/* ==========================================================================
   Site-wide headings: the same tall, condensed, uppercase lettering and
   crimson > burgundy > oxblood gradient used on the home page.
   (Loaded by every page except the home page, which carries its own copy.)
   ========================================================================== */
@font-face{font-family:"Antonio";src:url("fonts/antonio.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:block}
:root{
  --hd-font:"Antonio","Oswald","Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --hd-grad:linear-gradient(180deg,#C31B37 0%,#8E0D20 52%,#4A0005 100%);
}

/* page titles */
h1,h1.h-display{font-family:var(--hd-font);font-weight:500;letter-spacing:.04em;line-height:.92;text-transform:uppercase;text-shadow:none;
  background:var(--hd-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1{font-size:clamp(52px,6.2vw,100px)}
/* the "small line over a large line" composition: identical on every page */
h1.h-display:not(.area-title){font-size:clamp(28px,2.9vw,44px)!important;line-height:1!important}
h1.h-display:not(.area-title) strong{display:block;font-size:clamp(52px,6.1vw,96px)!important;font-weight:500;line-height:.92;margin-top:.06em;color:inherit}
h1.area-title{font-size:clamp(60px,8vw,120px)}

/* section headings that sit on white */
.feat-text h2,.t-count h2,h2.section-title,.marketing-intro h2,.t-intro h2,.panel-head h2,.panel-head h3,.intro h2{
  font-family:var(--hd-font);font-weight:500;letter-spacing:.04em;line-height:.95;text-transform:uppercase;text-shadow:none;
  background:var(--hd-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.feat-text h2,.t-count h2,h2.section-title,.marketing-intro h2,.t-intro h2{font-size:clamp(40px,4.6vw,70px)}
.panel-head h2,.panel-head h3{font-size:clamp(38px,4vw,60px);margin-bottom:14px}
.feat-text h2 strong,.band h2 strong,h2 strong{font-weight:500;color:inherit}

/* red bands: same lettering, in white (a gradient would not read on the red) */
.band h2{font-family:var(--hd-font);font-weight:500;letter-spacing:.04em;line-height:.92;text-transform:uppercase;font-size:clamp(44px,5vw,76px)}

/* big numerals */
.stat b,.t-count b,.fact b,.stats b{font-family:var(--hd-font);font-weight:500;letter-spacing:.03em}

/* ----- pages built with their own heading rules: same lettering, applied with the page's own selectors ----- */
html[data-page="contact-us"] .left h1,
html[data-page="gallery"] .hero h1,
html[data-page="office"] :is(.aboutVisual h1,.aboutVisual h2,.listingHead h2,.teamTitle,.galleryTitle),
html[data-page="offices"] .end h2,
html[data-page="agent"] :is(.copy h2,.portfolioHead h2),
html[data-page="listing"] :is(.hero h1,.intro h2,.galleryHead h2),
html[data-page="list-with-us"] :is(.hero h1,.contact h2){
  font-family:var(--hd-font)!important;font-weight:500!important;letter-spacing:.04em!important;text-transform:uppercase!important;line-height:.94!important;text-shadow:none!important;font-style:normal!important;
  background:var(--hd-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
/* the same lettering on photographs and dark panels, with the lighter reds so it stays readable */
html[data-page="offices"] .officeCopy h1,
html[data-page="office"] section.contact h2,
html[data-page="listing"] section.contact h2{
  font-family:var(--hd-font)!important;font-weight:500!important;letter-spacing:.04em!important;text-transform:uppercase!important;line-height:.94!important;text-shadow:none!important;font-style:normal!important;
  background:linear-gradient(180deg,#FF6F86 0%,#EC3A54 50%,#C31B37 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
html[data-page="agent"] .copy h2{font-size:clamp(34px,3.4vw,50px)}

/* ----- fit: the condensed lettering must always stay inside its column ----- */
.t-hero h1,.t-count h1{font-size:clamp(46px,4.9vw,80px)!important;overflow-wrap:normal;word-break:normal}
h1{max-width:100%}
@media(max-width:600px){
  .t-hero h1,.t-count h1{font-size:clamp(30px,8.6vw,40px)!important;letter-spacing:.03em}
  h1.h-display:not(.area-title){font-size:clamp(22px,6.4vw,30px)!important}
  h1.h-display:not(.area-title) strong{font-size:clamp(40px,12.4vw,58px)!important}
}

/* ----- the shared top menu now has six links: on phones keep Rentals, Invest and Contact ----- */
@media(max-width:700px){
  .top nav a{display:none!important}
  .top nav a:nth-last-child(-n+3){display:inline-block!important}
  .top nav{gap:14px}
  .top .brand{font-size:11px;letter-spacing:.16em}
}

/* stat labels sit on white on these pages (the pale pink is only for the red band) */
.t-intro .stat span,.facts .stat span,.glance .stat span{color:#6a625b}

@media(max-width:360px){.top{padding:0 3%}.top .brand{font-size:10px;letter-spacing:.08em}.top nav{gap:9px}.top nav a{letter-spacing:.06em;font-size:9px}}
/* anchors on sub-pages land below the sticky header */
html:not([data-page]){scroll-padding-top:104px}

@media(max-width:480px){.t-intro{grid-template-columns:minmax(0,1fr)}.t-intro>*{min-width:0}.stat b{overflow-wrap:anywhere}}