@font-face{font-family:'Geoform';src:url('/fonts/Geoform-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Geoform';src:url('/fonts/Geoform-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Geoform';src:url('/fonts/Geoform-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Geoform';src:url('/fonts/Geoform-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Geoform';src:url('/fonts/Geoform-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Geoform';src:url('/fonts/Geoform-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}

:root {
    --navy:#11222D; --white:#FFFFFF; --stone:#C3CBD1; --slate:#6A7883;
    --ink:#26333C; --paper:#FDFCF9; --line:#E4E1DA;
    /* Type system: Geoform (self-hosted woff2) across the whole site —
       display, body/UI and quotes, differentiated by weight/style. */
    --display:'Geoform','Helvetica Neue',Arial,sans-serif;
    --serif:'Geoform','Helvetica Neue',Arial,sans-serif;
    --sans:'Geoform','Helvetica Neue',Helvetica,Arial,sans-serif;
    --ease-quint:cubic-bezier(0.22,1,0.36,1);
    --ease-expo:cubic-bezier(0.16,1,0.3,1);
    --mx:clamp(20px,5vw,64px);
  }
  /* ---------- reset ----------
     The system must not depend on the legacy Next stylesheet being present.
     blog.html and real-estate.html dropped it and fell straight back to browser
     defaults: 8px body margin, 16px paragraph margins, 40px bulleted list
     indents, underlined links, 13px buttons - so those two pages diverged from
     the four that still load it. Scoped to .rd so admin/ and studio/ are
     untouched. On pages that DO load the legacy sheet this is a no-op, because
     it resets the same properties to the same values.
     Written with :where(), which has zero specificity, so ANY component rule
     wins over it. Without that, `.rd h2` (0,1,1) outranks a single-class rule
     like `.form-title` (0,1,0) and silently flattens its margins - which is
     exactly what happened on the contact page.
  */
  :where(body.rd) { margin:0; }
  :where(.rd) :where(*, *::before, *::after) { box-sizing:border-box; }
  :where(.rd) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin:0; }
  :where(.rd) :where(ul, ol) { margin:0; padding:0; list-style:none; }
  :where(.rd) :where(a) { text-decoration:none; }
  :where(.rd) :where(button) { font:inherit; }

  .rd { font-family:var(--sans); color:var(--ink); background:var(--paper); }
  .rd ::selection { background:var(--navy); color:#fff; }
  .serif { font-family:var(--display); }
  .sans  { font-family:var(--sans); }
  /* Whole site in Geoform: force legacy font classes (nav/footer/legal) onto the system font */
  .satoshi, .geist, .font-satoshi, .font-geist { font-family: var(--sans) !important; }
  .rd-wrap { max-width:1360px; margin:0 auto; padding-left:var(--mx); padding-right:var(--mx); }

  /* tracked label + hairline (brandbook idiom) */
  .rd-label { font-family:var(--sans); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--slate); font-weight:500; }
  .rd-hair { height:1px; background:var(--line); border:0; }
  .rd-hair-d { height:1px; background:rgba(255,255,255,0.14); border:0; }

  .rd-statement { font-family:var(--display); font-weight:500; letter-spacing:-0.01em; line-height:1.06; color:var(--navy); }
  .rd-body { font-family:var(--sans); font-size:clamp(15px,1.15vw,17px); line-height:1.75; color:var(--ink); }

  /* ---------- HERO ---------- */
  .rd-hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy); }
  /* Full bleed by default. The -16% overscan only exists to give the parallax
     room to travel, and no hero currently uses it - so every hero was cropping
     32% of its image or video for a movement that never runs. Opt in with
     data-parallax on the media element. */
  .rd-hero__media { position:absolute; inset:0; z-index:0; }
  .rd-hero__media[data-parallax] { inset:-16% 0; }
  /* video as well as img: the Real Estate hero is a <video>, and with only the
     img selector it fell back to its intrinsic 1280x720 inside a 1440-wide
     container - filling part of the header and letterboxing the rest. */
  .rd-hero__media img, .rd-hero__media video { width:100%; height:100%; object-fit:cover; display:block; }
  .rd-hero__scrim { position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(17,34,45,0.58) 0%, rgba(17,34,45,0) 56%),
               linear-gradient(180deg, rgba(17,34,45,0.30) 0%, rgba(17,34,45,0.08) 42%, rgba(17,34,45,0.80) 100%); }
  .rd-hero__inner { position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,7vh,88px); padding-top:26vh; }
  .rd-hero h1 { color:#fff; font-family:var(--display); font-weight:500; letter-spacing:-0.015em;
    font-size:clamp(40px,7vw,104px); line-height:1.02; max-width:16ch; margin:0; }
  .rd-hero__sub { color:var(--stone); font-family:var(--sans); font-weight:300;
    font-size:clamp(15px,1.5vw,20px); line-height:1.6; max-width:52ch; margin:22px 0 0; }
  .rd-hero__row { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:34px; }
  .rd-cta { display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--navy);
    font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:0.01em; padding:16px 32px;
    border-radius:2px; text-decoration:none; transition:transform .5s var(--ease-expo), background .3s ease; }
  .rd-cta:hover { transform:translateY(-2px); background:#f0ede8; }
  .rd-cta--ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.4); }
  .rd-cta--ghost:hover { background:rgba(255,255,255,0.08); border-color:#fff; }
  /* Sits clear of the floating chat widget, which is anchored bottom-right on
   every page and would otherwise cover the second figure. */
.rd-hero__caption { position:absolute; right:var(--mx); bottom:clamp(104px,15vh,150px); z-index:2;
    text-align:right; color:#fff; display:flex; flex-direction:column; gap:4px; }
  .rd-hero__caption .k { color:rgba(255,255,255,0.7); }
  .rd-hero__caption .v { font-family:var(--display); font-size:clamp(18px,1.5vw,22px); }
  @media (max-width:820px){ .rd-hero__caption{ display:none; } }

  /* ---------- HERO · scroll-scrubbed flythrough ---------- */
  .rd-fly { position:relative; height:100svh; overflow:hidden; background:#11222D url('/hero-flythrough-poster.jpg?v=2') center center / cover no-repeat; }
  .rd-fly__canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
  /* Navy curtain over the office-zoom video: an even veil keeps the footage
     subtle and classy (never a loud autoplay), with the bottom carrying the
     type panel. */
  .rd-fly__scrim { position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(17,34,45,0.46) 0%, rgba(17,34,45,0.30) 44%, rgba(17,34,45,0.88) 100%),
               linear-gradient(90deg, rgba(17,34,45,0.40) 0%, rgba(17,34,45,0.12) 55%, rgba(17,34,45,0) 100%); }
  .rd-fly__panel { position:absolute; left:var(--mx); right:var(--mx); bottom:clamp(48px,9vh,112px); z-index:2; }
  .rd-fly__panel.p1 { opacity:1; }
  .rd-fly__panel.p2, .rd-fly__panel.p3 { opacity:0; }
  .rd-fly h1 { color:#fff; font-family:var(--display); font-weight:500; letter-spacing:-0.015em;
    font-size:clamp(40px,7vw,104px); line-height:1.02; max-width:16ch; margin:0; }
  .rd-fly__sub { color:var(--stone); font-family:var(--sans); font-weight:300;
    font-size:clamp(15px,1.5vw,20px); line-height:1.6; max-width:48ch; margin:22px 0 0; }
  .rd-fly__line { color:#fff; font-family:var(--display); font-weight:500;
    font-size:clamp(26px,3.6vw,54px); line-height:1.12; letter-spacing:-0.01em; max-width:22ch; margin:0; }

  /* ---------- generic section ---------- */
  .rd-sec { padding:clamp(72px,11vw,168px) 0; }
  .rd-sec--navy { background:var(--navy); color:#fff; }
  .rd-sec--navy .rd-statement { color:#fff; }
  .rd-sec--navy .rd-body { color:var(--stone); }

  /* ---------- proof numbers ---------- */
  .rd-proof { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,0.14); }
  .rd-proof > div { padding:clamp(28px,4vw,56px) clamp(16px,2.4vw,40px) 0; border-right:1px solid rgba(255,255,255,0.14); }
  .rd-proof > div:last-child { border-right:0; }
  .rd-proof .n { font-family:var(--display); font-weight:500; color:#fff; letter-spacing:-0.03em; line-height:1;
    font-size:clamp(48px,7vw,104px); }
  .rd-proof .l { color:var(--stone); font-family:var(--sans); font-size:13px; letter-spacing:0.04em; margin-top:18px; line-height:1.5; }
  @media (max-width:760px){ .rd-proof{ grid-template-columns:1fr; } .rd-proof > div{ border-right:0; border-bottom:1px solid rgba(255,255,255,0.14); padding-bottom:28px; } }

  /* ---------- pillars ---------- */
  .rd-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(40px,6vw,72px); border-top:1px solid var(--line); }
  .rd-pillars > div { padding:clamp(28px,3vw,44px) clamp(16px,2vw,36px) 0; border-right:1px solid var(--line); }
  .rd-pillars > div:last-child { border-right:0; }
  .rd-pillars h3 { font-family:var(--display); font-weight:600; font-size:clamp(20px,1.7vw,26px); color:var(--navy); margin:16px 0 12px; line-height:1.2; }
  .rd-pillars p { font-family:var(--sans); font-size:15px; line-height:1.7; color:var(--ink); margin:0; }
  .rd-pillars .pf { font-family:var(--sans); font-size:12.5px; color:var(--slate); margin-top:16px; line-height:1.55; }
  @media (max-width:820px){ .rd-pillars{ grid-template-columns:1fr; } .rd-pillars > div{ border-right:0; border-bottom:1px solid var(--line); padding-bottom:28px; } }

  /* ---------- pinned "six functions" ---------- */
  .rd-pin { background:var(--navy); color:#fff; }
  .rd-pin__stage { min-height:100svh; display:flex; align-items:center; }
  .rd-pin__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; width:100%; }
  .rd-pin__lead { font-family:var(--display); font-weight:500; font-size:clamp(28px,3.6vw,52px); line-height:1.1; letter-spacing:-0.01em; }
  .rd-funcs { list-style:none; margin:0; padding:0; }
  .rd-funcs li { display:flex; gap:20px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.14); }
  .rd-funcs li .fi { font-family:var(--display); font-size:15px; color:var(--stone); width:2ch; flex-shrink:0; padding-top:3px; }
  .rd-funcs li .ft { display:block; font-family:var(--sans); font-weight:500; font-size:clamp(16px,1.4vw,19px); color:#fff; }
  .rd-funcs li .fd { display:block; font-family:var(--sans); font-size:13.5px; color:var(--stone); margin-top:5px; line-height:1.5; }
  @media (max-width:900px){ .rd-pin__grid{ grid-template-columns:1fr; gap:32px; } .rd-pin__stage{ min-height:auto; padding:clamp(64px,12vw,120px) 0; } }

  /* ---------- two ways ---------- */
  .rd-two { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.5vw,32px); margin-top:clamp(40px,5vw,64px); }
  .rd-card { background:#fff; border:1px solid var(--line); padding:clamp(28px,3.2vw,48px); display:flex; flex-direction:column; min-height:100%; }
  .rd-card h3 { font-family:var(--display); font-weight:600; font-size:clamp(22px,2vw,30px); color:var(--navy); margin:0 0 16px; line-height:1.15; }
  .rd-card p { font-family:var(--sans); font-size:15.5px; line-height:1.75; color:var(--ink); margin:0 0 14px; }
  .rd-card a.more { margin-top:auto; padding-top:24px; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--navy); text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
  .rd-card a.more svg { transition:transform .4s var(--ease-expo); }
  .rd-card:hover a.more svg { transform:translateX(5px); }
  @media (max-width:820px){ .rd-two{ grid-template-columns:1fr; } }

  /* ---------- asset (one asset, location + two figures) ---------- */
  .rd-asset { position:relative; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy); }
  .rd-asset__media { position:absolute; inset:-16% 0 -16% 0; z-index:0; }
  .rd-asset__media img, .rd-asset__media video { width:100%; height:100%; object-fit:cover; display:block; }
  .rd-asset__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(17,34,45,0.15) 30%, rgba(17,34,45,0.8) 100%); }
  .rd-asset__plate { position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,7vh,88px); }
  .rd-asset__plate h2 { font-family:var(--display); font-weight:500; color:#fff; font-size:clamp(30px,4.4vw,64px); line-height:1.05; margin:0; max-width:16ch; }
  .rd-figs { display:flex; gap:clamp(28px,4vw,64px); margin-top:28px; flex-wrap:wrap; }
  .rd-figs .f .n { font-family:var(--display); font-size:clamp(28px,3vw,44px); color:#fff; line-height:1; }
  .rd-figs .f .l { color:var(--stone); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; margin-top:8px; }

  /* ---------- closing ---------- */
  .rd-close { text-align:center; }
  .rd-close h2 { font-family:var(--display); font-weight:500; color:var(--navy); font-size:clamp(30px,4.6vw,66px); line-height:1.05; letter-spacing:-0.01em; max-width:18ch; margin:0 auto; }
  .rd-close p { font-family:var(--sans); font-size:clamp(15px,1.3vw,18px); color:var(--ink); max-width:52ch; margin:24px auto 0; line-height:1.7; }

  /* ---------- MOTION (content visible by default; gated behind .motion-ready) ---------- */
  html.motion-ready .reveal { opacity:0; transform:translateY(26px); }
  html.motion-ready .reveal-line { opacity:0; transform:translateY(40px); }
  @media (prefers-reduced-motion: reduce){
    html.motion-ready .reveal, html.motion-ready .reveal-line { opacity:1 !important; transform:none !important; }
    * , *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }
  .rd-scrollcue { position:absolute; left:var(--mx); bottom:clamp(24px,4vh,40px); z-index:2; color:rgba(255,255,255,0.7); font-size:11px; letter-spacing:0.24em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
  .rd-scrollcue .bar { width:1px; height:40px; background:rgba(255,255,255,0.4); position:relative; overflow:hidden; }
  .rd-scrollcue .bar::after { content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff; animation:cue 2.4s var(--ease-expo) infinite; }
  @keyframes cue { 0%{transform:translateY(0)} 60%{transform:translateY(200%)} 100%{transform:translateY(200%)} }

/* ---------- NAV · premium scroll-aware header ---------- */
.rd-nav { background: rgba(253,252,249,0.92) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line); transition: background .4s var(--ease-expo), box-shadow .4s ease, backdrop-filter .4s ease; }
.rd-nav .container { padding-top: 15px; padding-bottom: 15px; }
.rd-nav img { transition: filter .4s ease; }
.rd-nav nav a { font-family: var(--sans) !important; font-weight: 500 !important; font-size: 14px !important;
  letter-spacing: 0.005em; color: var(--navy) !important; opacity: .78; transition: opacity .25s ease, color .3s ease, background .3s ease; }
.rd-nav nav a:hover { opacity: 1; }
.rd-nav nav span.absolute { display: none !important; }            /* kill the underline-grow decoration */
/* Match both logo classes in use: index.html carries `invert`, the older pages
   carry Tailwind's arbitrary `invert-[1]`. Missing one leaves a white wordmark
   on the light bar, effectively invisible. */
.rd-nav img[class*="invert"] { filter: none !important; }          /* navy logo on the light bar */
.rd-nav nav a.bg-white { background: var(--navy) !important; color: #fff !important; opacity: 1;
  border-radius: 2px !important; padding: 10px 24px !important; font-weight: 600 !important; }
.rd-nav nav a.bg-white:hover { background: #1c3646 !important; }
.rd-nav .cms-lang-switcher { color: var(--navy) !important; }

/* dark-hero pages: nav is transparent + white until the user scrolls */
body.rd-dark-hero .rd-nav:not(.rd-nav--solid) { background: transparent !important; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
body.rd-dark-hero .rd-nav:not(.rd-nav--solid) nav a { color: #fff !important; opacity: .85; }
body.rd-dark-hero .rd-nav:not(.rd-nav--solid) nav a:hover { opacity: 1; }
body.rd-dark-hero .rd-nav:not(.rd-nav--solid) img[class*="invert"] { filter: invert(1) !important; }
body.rd-dark-hero .rd-nav:not(.rd-nav--solid) nav a.bg-white { background: #fff !important; color: var(--navy) !important; }
body.rd-dark-hero .rd-nav:not(.rd-nav--solid) nav a.bg-white:hover { background: #f0ede8 !important; }
body.rd-dark-hero .rd-nav:not(.rd-nav--solid) .cms-lang-switcher { color: #fff !important; }

/* ---------- testimonials + journal ---------- */
.rd-quotes, .rd-journal { display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.rd-quotes > *, .rd-journal > * { padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,40px);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.rd-quote { display:flex; flex-direction:column; }
.rd-quote p { font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(16px,1.4vw,20px);
  line-height:1.55; color:var(--navy); margin:0 0 22px; }
.rd-quote .who { margin-top:auto; font-family:var(--sans); font-size:12.5px; letter-spacing:0.06em;
  color:var(--slate); text-transform:uppercase; }
.rd-post .k { font-family:var(--sans); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--slate); }
.rd-post h3 { font-family:var(--display); font-weight:500; font-size:clamp(19px,1.7vw,26px); line-height:1.2;
  color:var(--navy); margin:14px 0 12px; }
.rd-post p { font-family:var(--sans); font-size:14.5px; line-height:1.7; color:var(--ink); margin:0 0 18px; }
.rd-post a.more { font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--navy);
  text-decoration:none; display:inline-flex; gap:7px; align-items:center; }
.rd-post a.more svg { transition:transform .4s var(--ease-expo); }
.rd-post:hover a.more svg { transform:translateX(5px); }
@media (max-width:820px){ .rd-quotes, .rd-journal { grid-template-columns:1fr; } }

/* ---------- mobile menu · premium editorial ---------- */
#mobile-menu { background: var(--navy) !important; }
#mobile-menu > .flex.flex-col { align-items: stretch !important; justify-content: flex-start !important;
  height: 100% !important; padding: clamp(88px,16vh,120px) clamp(28px,8vw,52px) 40px !important;
  gap: 0 !important; overflow-y: auto; }
#mobile-menu a { font-family: var(--sans) !important; font-weight: 500 !important;
  font-size: clamp(16px,4.4vw,19px) !important; line-height: 1.2 !important; letter-spacing: 0.005em;
  color: #fff !important; text-align: left !important; padding: 18px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important; transition: opacity .2s ease; }
#mobile-menu a:hover, #mobile-menu a:active { opacity: .65; }
/* the Contact CTA is a button, not a list row */
#mobile-menu a[href="contact.html"] { font-family: var(--sans) !important; font-weight: 600 !important;
  font-size: 15px !important; letter-spacing: 0.02em; background: #fff !important; color: var(--navy) !important;
  text-align: center !important; border: 0 !important; border-radius: 2px !important;
  padding: 17px 24px !important; margin-top: 32px !important; }
#mobile-menu a[href="contact.html"]:hover { opacity: 1; background: #f0ede8 !important; }
/* language toggle: white on the navy sheet, pushed to the bottom */
#mobile-menu .cms-lang-switcher { color: #fff !important; margin-top: 28px !important; margin-left: 0 !important;
  justify-content: flex-start; font-size: 15px; }
#mobile-menu .cms-lang-switcher button { font-size: 15px !important; }

/* ---------- FAQ · native <details> so answers stay in the DOM for AEO ---------- */
.rd-faq { max-width:900px; }
.rd-faq details { border-bottom:1px solid var(--line); }
.rd-faq details:first-of-type { border-top:1px solid var(--line); }
.rd-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:baseline; gap:28px; padding:26px 2px;
  font-family:var(--display); font-weight:500; font-size:clamp(17px,1.6vw,21px);
  line-height:1.35; color:var(--navy); transition:color .3s ease; }
.rd-faq summary::-webkit-details-marker { display:none; }
.rd-faq summary:hover { color:var(--slate); }
.rd-faq summary:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }
/* The mark is slate, not the gold the old page used: gold is not in the brand
   palette, and the Brand Book reserves colour for the ground, never for signalling. */
.rd-faq .rd-faq__mark { flex-shrink:0; position:relative; width:14px; height:14px;
  align-self:center; transition:transform .35s var(--ease-expo); }
.rd-faq .rd-faq__mark::before, .rd-faq .rd-faq__mark::after { content:""; position:absolute;
  background:var(--slate); transition:background .3s ease; }
.rd-faq .rd-faq__mark::before { left:0; top:6px; width:14px; height:1.5px; }
.rd-faq .rd-faq__mark::after { top:0; left:6px; width:1.5px; height:14px; }
.rd-faq details[open] .rd-faq__mark { transform:rotate(45deg); }
.rd-faq summary:hover .rd-faq__mark::before, .rd-faq summary:hover .rd-faq__mark::after { background:var(--navy); }
.rd-faq__a { padding:0 2px 30px; max-width:66ch; font-family:var(--sans);
  font-size:clamp(15px,1.1vw,16.5px); line-height:1.8; color:var(--ink); }

/* ---------- Portfolio carousel · one asset per slide, tracked ----------
   Built on CSS scroll-snap: every slide is in the DOM and reachable by
   scrolling, so with JS blocked this degrades to a horizontal scroller
   rather than hiding the properties from readers and crawlers alike. */
.rd-carousel { position:relative; background:var(--navy); }
.rd-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; }
.rd-track::-webkit-scrollbar { display:none; }
.rd-slide { position:relative; flex:0 0 100%; scroll-snap-align:start;
  min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--navy); }
.rd-slide__media { position:absolute; inset:0; z-index:0; }
.rd-slide__media img, .rd-slide__media video { width:100%; height:100%; object-fit:cover; display:block; }
/* Brand Book p24: type on an image goes on a navy scrim or a white plate,
   never directly on texture. These are bright interiors, so a gradient over
   the whole frame neither reads nor complies — the type sits on a plate and
   the photograph stays a photograph. p16 calls this "full bleed + plate". */
.rd-slide__scrim { position:absolute; inset:0; z-index:1;
  /* Darkens only the bottom strip, where the counter and the arrows sit;
     the middle of the frame stays a photograph. */
  background:linear-gradient(180deg, rgba(17,34,45,0) 52%, rgba(17,34,45,0.68) 100%); }
.rd-slide__plate { position:relative; z-index:2; width:100%;
  padding-bottom:clamp(104px,15vh,150px); padding-top:clamp(48px,8vh,88px); }
.rd-slide__card { background:rgba(17,34,45,0.94); -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px); padding:clamp(28px,3.4vw,48px); max-width:min(640px,100%); }
.rd-slide__card h3 { font-family:var(--display); font-weight:500; color:#fff;
  font-size:clamp(28px,3.4vw,46px); line-height:1.06; letter-spacing:-0.01em; margin:0; }
.rd-slide__card .rd-figs { margin-top:26px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,0.18); }
.rd-slide__src { font-family:var(--sans); font-size:12px; color:rgba(255,255,255,0.62);
  margin:18px 0 0; letter-spacing:0.02em; line-height:1.5; }

/* controls sit on the hairline that closes the slide */
.rd-carousel__bar { position:absolute; left:var(--mx); right:var(--mx);
  bottom:clamp(38px,6vh,60px); z-index:3; display:flex; align-items:center;
  /* Counter and arrows both sit on the left margin: the floating chat widget is
     anchored bottom-right on every page and was covering the next button. */
  justify-content:flex-start; gap:clamp(18px,2.5vw,34px);
  border-top:1px solid rgba(255,255,255,0.22); padding-top:18px; }
.rd-carousel__count { font-family:var(--display); font-size:15px; color:rgba(255,255,255,0.8);
  font-variant-numeric:tabular-nums; }
.rd-carousel__btns { display:flex; gap:10px; }
.rd-carousel__btn { width:42px; height:42px; border:1px solid rgba(255,255,255,0.34);
  background:transparent; color:#fff; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; border-radius:2px;
  transition:background .3s ease, border-color .3s ease, opacity .3s ease; }
.rd-carousel__btn:hover:not(:disabled) { background:rgba(255,255,255,0.12); border-color:#fff; }
.rd-carousel__btn:disabled { opacity:.3; cursor:default; }
.rd-carousel__btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (max-width:760px){
  .rd-slide__plate { padding-bottom:clamp(104px,16vh,150px); }
  .rd-carousel__bar { flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ---------- header layout, independent of the Tailwind CDN ----------
   The header's geometry came entirely from cdn.tailwindcss.com - h-10, container
   mx-auto, hidden lg:flex, space-x-8, the CTA's padding. That is the JIT browser
   build: it generates CSS in JavaScript AFTER first paint, so every page painted
   with an unstyled header first - giant logo, nav links wrapping onto two lines -
   and then snapped into place. That is the flicker, and the reason the menu
   appeared to shift on arrival.

   These rules live in a real render-blocking stylesheet, so the header is correct
   in the first frame. Values are measured from what Tailwind ends up computing,
   so nothing moves when it finally loads. */
.rd-nav { position:fixed; top:0; left:0; width:100%; z-index:50; }
.rd-nav .container { max-width:1280px; margin-left:auto; margin-right:auto;
  padding-left:24px; padding-right:24px; padding-top:15px; padding-bottom:15px;
  display:flex; justify-content:space-between; align-items:center; }
.rd-nav img { height:40px; width:auto; max-width:100%; }
.rd-nav nav.hidden { display:none; align-items:center; }
/* Replicates space-x-8 exactly rather than using gap: if both applied the
   spacing would double to 64px the moment Tailwind arrived - a new shift. */
.rd-nav nav.hidden > * + * { margin-left:32px; }
/* The legacy Next sheet gives the FIRST nav item a 32px margin-right, so on
   the pages that still load it the Home-to-About gap was 64px and on the two
   that dropped it, 32px. Same menu, different spacing per page. */
.rd-nav nav.hidden > * { margin-right:0; }
.rd-nav nav.hidden a { white-space:nowrap; }    /* never let a label wrap */
@media (min-width:1024px){ .rd-nav nav.hidden { display:flex; } }
.rd-nav nav a.bg-white { padding:10px 24px; border-radius:2px; background:#fff; }
/* the hamburger is lg:hidden in Tailwind; hold that before the CDN answers */
.rd-nav button[onclick*="mobile-menu"] { display:inline-flex; }
@media (min-width:1024px){ .rd-nav button[onclick*="mobile-menu"] { display:none; } }

/* ---------- MESSAGE FROM (portrait + statement, bio over the photo) ---------- */
/* Brand book, p16: full bleed plus a plate. The bio never sets type straight on
   the photograph - it opens a navy plate over it. */
.rd-msg { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4.5vw,80px); align-items:start; }
@media (max-width:900px){ .rd-msg { grid-template-columns:1fr; gap:32px; } }

.rd-msg__figure { position:relative; margin:0; border-radius:2px; overflow:hidden;
  background:var(--navy); aspect-ratio:4/5; }
.rd-msg__figure img { width:100%; height:100%; object-fit:cover; display:block; }

/* The trigger sits on its own plate, never as bare type on the image. */
/* Both the trigger and the collapsed state are switched on by the script. With
   no JS the bio simply shows over the portrait - readable, rather than a dead
   button next to text nobody can reach. */
.rd-msg__trigger { position:absolute; left:0; bottom:0; z-index:2;
  display:none; align-items:center; gap:10px; border:0; cursor:pointer;
  background:rgba(17,34,45,0.94); color:#fff; font-family:var(--sans);
  font-size:11px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase;
  padding:15px 22px; transition:background .3s ease; }
.rd-msg__figure[data-js] .rd-msg__trigger { display:inline-flex; }
.rd-msg__trigger:hover { background:var(--navy); }
.rd-msg__trigger .x { display:none; }
.rd-msg__trigger[aria-expanded="true"] .o { display:none; }
.rd-msg__trigger[aria-expanded="true"] .x { display:inline; }

.rd-msg__bio { position:absolute; inset:0; z-index:1; background:rgba(17,34,45,0.97);
  color:var(--stone); font-family:var(--sans); font-size:15px; line-height:1.75;
  padding:clamp(24px,2.6vw,40px); padding-bottom:76px; overflow-y:auto;
  transition:opacity .4s var(--ease-expo), visibility .4s, transform .4s var(--ease-expo); }
.rd-msg__figure[data-js] .rd-msg__bio { opacity:0; visibility:hidden; transform:translateY(10px); }
.rd-msg__figure[data-js] .rd-msg__bio[data-open="1"] { opacity:1; visibility:visible; transform:none; }
.rd-msg__bio p { margin:0 0 14px; }
.rd-msg__bio p:last-child { margin-bottom:0; }
.rd-msg__bio strong { color:#fff; font-weight:600; }

.rd-msg__body p { font-family:var(--sans); font-size:clamp(15px,1.15vw,17px);
  line-height:1.8; color:var(--ink); margin:0 0 20px; }
.rd-msg__body p:last-of-type { margin-bottom:0; }
/* The opening line carries the weight, so it is set in the serif. */
.rd-msg__lead { font-family:var(--display) !important; font-weight:500;
  font-size:clamp(21px,2.1vw,29px) !important; line-height:1.35 !important;
  color:var(--navy) !important; letter-spacing:-0.01em; margin-bottom:26px !important; }
.rd-msg__sign { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.rd-msg__name { font-family:var(--display); font-size:20px; font-weight:500;
  color:var(--navy); margin:0; }
.rd-msg__role { font-family:var(--sans); font-size:13px; color:var(--slate);
  margin:5px 0 0; letter-spacing:0.01em; }

/* ════════════════════════════════════════════════════════════════
   TYPE + MOTION overhaul (2026-08) — architectural grotesque display
   + Stripe-style pointer motion. All motion respects reduced-motion.
   ════════════════════════════════════════════════════════════════ */

/* Archivo Expanded reads a touch heavier and tighter at big display sizes;
   this is where the display weight/tracking is tuned. */
.rd-hero h1, .rd-fly h1, .rd-fly__line, .rd-statement, .rd-proof .n,
.rd-close h2, .rd-asset__plate h2, .rd-pin__lead, .rd-slide__card h3,
.rd-msg__lead { font-weight:600; letter-spacing:-0.02em; }
.rd-pillars h3, .rd-card h3, .rd-post h3 { font-weight:600; letter-spacing:-0.01em; }

/* ---- Pointer spotlight on dark sections (Stripe-style, JS-driven) ---- */
.rd-sec--navy { position:relative; overflow:hidden; }
.rd-sec--navy > .rd-wrap { position:relative; z-index:1; }
.sa-spot { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(600px circle at var(--sx,50%) var(--sy,30%),
    rgba(150,188,230,0.16), rgba(150,188,230,0) 60%); }
.sa-spot.on { opacity:1; }

/* Static subtle wash on dark sections. (An animated background-position used to
   live here; animating background-position forces a full repaint every frame and
   was the main cause of janky scrolling in Chrome — removed.) */
.rd-sec--navy::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(150,188,230,0.05), transparent 46%, rgba(150,188,230,0.04) 84%); }

/* ---- Card hover-lift + button micro-interaction ---- */
.rd-card, .re-card, .dev-projects .dev-projects-card,
.dev-projects a[class*="rounded"] { transition:transform .5s var(--ease-expo), box-shadow .5s ease; }
.rd-card:hover, .re-card:hover,
.dev-projects a[class*="rounded"]:hover { transform:translateY(-6px); box-shadow:0 22px 52px rgba(17,34,45,0.15); }
.rd-cta:active { transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .sa-spot { display:none; }
  .rd-sec--navy::before { animation:none; }
  .rd-card, .re-card { transition:none; }
  .rd-card:hover, .re-card:hover { transform:none; box-shadow:none; }
}

/* ---- Nav order (Home · About · Invest · Real Estate · Properties · Blog · Contact) ---- */
.rd-nav nav > div:has(a[href*="index"]){order:1}
.rd-nav nav > div:has(a[href*="about"]){order:2}
.rd-nav nav > div:has(a[href*="invest-in-portugal"]){order:3}
.rd-nav nav > div:has(a[href*="real-estate"]){order:4}
.rd-nav nav > div.rd-dd{order:5}
.rd-nav nav > div:has(a[href*="blog"]){order:6}
.rd-nav nav > div:has(a[href*="contact"]){order:7}
.rd-nav nav > .cms-lang-switcher{order:8}
#mobile-menu .flex.flex-col > a[href*="index"]{order:1}
#mobile-menu .flex.flex-col > a[href*="about"]{order:2}
#mobile-menu .flex.flex-col > a[href*="invest-in-portugal"]{order:3}
#mobile-menu .flex.flex-col > a[href*="real-estate"]{order:4}
#mobile-menu .flex.flex-col > a[href*="our-developments"]{order:5}
#mobile-menu .flex.flex-col > a[href*="property-management"]{order:6}
#mobile-menu .flex.flex-col > a[href*="blog"]{order:7}
#mobile-menu .flex.flex-col > a[href*="contact"]{order:8}
#mobile-menu .flex.flex-col > .cms-lang-switcher{order:9}

/* ---- Properties dropdown: also open on click/tap/keyboard (hover still works) ---- */
.rd-dd.rd-dd--open .rd-dd__menu{opacity:1;visibility:visible;transform:none;}

/* ---- Cursor-following glow on blocks (motion-flow) ----
   A soft radial gradient tracks the pointer inside each card: a white wash on
   navy blocks, a blue wash on white blocks. Variant is chosen in JS from the
   block's own background luminance and applied as --glow. Real content is
   lifted above the glow layer so the wash never sits on top of the text. */
.rd-glow { position:relative; overflow:hidden; }
.rd-glow > * { position:relative; z-index:1; }
.rd-glow::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease-expo);
  background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),
            var(--glow, rgba(31,74,107,0.16)), transparent 66%);
}
.rd-glow.is-on::after { opacity:1; }
.rd-glow--light { --glow: rgba(255,255,255,0.16); }   /* navy block  -> white glow */
.rd-glow--dark  { --glow: rgba(31,90,140,0.20); }     /* white block -> blue glow  */
@media (prefers-reduced-motion:reduce){ .rd-glow::after { display:none; } }