:root{
 --navy:#0B2C71; --navy-dk:#00287A; --navy-deep:#071B45;
 --blue:#0063C6; --blue-dk:#0057B8;
 --grey:#F4F6FA; --line:#DCE3EE;
 --text:#1B2333; --muted:#5A6478;
 --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Figtree',system-ui,sans-serif;color:var(--text);font-size:17px;line-height:1.65;background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:'Barlow Condensed','Figtree',sans-serif;font-weight:700;text-transform:uppercase;line-height:1.04;color:var(--navy)}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.4rem}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:700;font-size:1rem;padding:15px 32px;border:0;border-radius:8px;cursor:pointer;font-family:'Figtree',sans-serif}
.btn:hover{background:var(--blue-dk)}
.btn-lg{padding:18px 40px;font-size:1.1rem}
.btn-full{display:block;width:100%;text-align:center;padding:17px}

/* NAV */
nav{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:18px}
.logo-ph{border:1px dashed #B9C6DC;color:#8494AE;font-size:.68rem;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--grey);border-radius:4px}
.logo-proj{width:200px;height:50px;flex:none}
.navright{display:flex;align-items:center;gap:26px}
.navlink{color:var(--navy);text-decoration:none;font-weight:600;font-size:.95rem}
.navlink:hover{color:var(--blue)}
.navlink.on{color:var(--blue);border-bottom:2px solid var(--blue);padding-bottom:3px}

/* HERO */
.hero{position:relative;display:flex;align-items:center;background:var(--navy-deep)}
.hero.tall{min-height:640px}
.hero.short{min-height:340px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,27,69,.95) 0%,rgba(7,27,69,.86) 38%,rgba(7,27,69,.48) 74%,rgba(7,27,69,.28) 100%)}
.hero .wrap{position:relative;width:100%;padding:70px 24px}
.hero.split .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{color:#fff}
.kicker{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:1rem;color:#8FB4E8;font-weight:600;margin-bottom:16px}
.hero .lede{color:#D5E1F5;font-size:1.12rem;margin-top:20px;max-width:38em}
.builder{display:flex;align-items:center;gap:16px;margin-top:28px}
.builder img{height:34px;opacity:.95}
.builder span{color:#8FB4E8;font-size:.85rem}
.specbar{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border-top:1px solid rgba(255,255,255,.22);padding-top:20px}
.specbar b{font-family:'Barlow Condensed',sans-serif;font-size:2rem;color:#fff;display:block;font-weight:700;line-height:1}
.specbar span{font-size:.75rem;color:#8FB4E8;text-transform:uppercase;letter-spacing:.08em}

/* FORM */
.card{background:#fff;border-radius:12px;padding:32px 30px;box-shadow:0 26px 70px rgba(0,0,0,.35)}
.card.flat{box-shadow:none;border:1px solid var(--line)}
.card h3{margin-bottom:4px}
.card .sub{font-size:.9rem;color:var(--muted);margin-bottom:20px}
label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.req{color:var(--blue)}
input,select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:.97rem;margin-bottom:15px;background:#fff}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,99,198,.15)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fine{font-size:.71rem;color:var(--muted);margin-top:14px;line-height:1.55}

section{padding:84px 0}
.sec-grey{background:var(--grey)}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy h2{color:#fff}
.eyebrow{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:.95rem;font-weight:600;color:var(--blue);margin-bottom:10px}
.sec-navy .eyebrow{color:#8FB4E8}
.lead{color:var(--muted);max-width:62ch;margin-top:14px;font-size:1.03rem}
.sec-navy .lead{color:#B9CDEC}

/* COLLECTIONS */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:24px;margin-top:44px}
/* 258 rather than 290 so the four collections sit on one row at 1180 instead of
   leaving the fourth card orphaned underneath. Three-card sections still fill. */
.col{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.col img{height:190px;width:100%;object-fit:cover}
.col .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.col .type{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;font-size:1.3rem;color:var(--navy)}
.col .amt{font-family:'Barlow Condensed',sans-serif;font-size:2.6rem;font-weight:700;color:var(--navy);line-height:1;margin-top:12px}
.col .from{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.col .meta{font-size:.9rem;color:var(--muted);margin-top:12px;padding-top:14px;border-top:1px solid var(--line);flex:1}
/* Four cards to a row leaves ~210px inside each, so the button label needs to be
   a touch smaller to stay on one line. */
.col .btn{margin-top:18px;text-align:center;font-size:.9rem;padding:14px 12px}

/* PLANS */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;margin-top:44px}
.plan{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.plan img{height:200px;width:100%;object-fit:cover;filter:blur(1.5px);transform:scale(1.04)}
.plan .lock{position:absolute;left:0;right:0;top:0;height:200px;background:linear-gradient(180deg,rgba(11,44,113,.28) 0%,rgba(11,44,113,.62) 100%);text-shadow:0 1px 6px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;color:#fff}
.plan .lock svg{width:26px;height:26px;margin-bottom:10px;opacity:.9}
.plan .lock b{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:1.15rem}
.plan .lock span{font-size:.8rem;color:#C9D9F2;margin-top:4px}
.plan .cap{padding:14px 16px;font-size:.88rem;color:var(--muted);border-top:1px solid var(--line)}
.plan .cap b{display:block;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--navy);font-size:1.05rem}

/* GALLERY */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.gal img{height:200px;width:100%;object-fit:cover;border-radius:8px}
.gal .tall{grid-row:span 2;height:412px}

/* SCORES + COMMUTE */
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:40px}
.score{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:24px}
.score b{font-family:'Barlow Condensed',sans-serif;font-size:3rem;color:#fff;display:block;line-height:1}
.score .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#8FB4E8}
.score .desc{font-size:.9rem;color:#C9D9F2;margin-top:6px}
.commute{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;margin-top:40px}
.commute b{font-family:'Barlow Condensed',sans-serif;font-size:2.5rem;color:#fff;display:block;font-weight:700;line-height:1}
.commute span{font-size:.9rem;color:#B9CDEC}
.commute.light b{color:var(--navy)}
.commute.light span{color:var(--muted)}

table.sch{width:100%;border-collapse:collapse;margin-top:34px;font-size:.96rem}
table.sch th{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.07em;font-size:.85rem;color:var(--muted);text-align:left;padding:0 12px 12px;border-bottom:2px solid var(--line)}
table.sch td{padding:16px 12px;border-bottom:1px solid var(--line)}
table.sch td:last-child,table.sch th:last-child{text-align:right}
.rating{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.25rem;color:var(--navy)}
.newtag{display:inline-block;background:var(--blue);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-left:8px;vertical-align:2px}

.booking{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px;align-items:start}
.calbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.calbox .disp{font-size:1.2rem;margin-bottom:8px}

.faq{margin-top:36px;max-width:820px}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:19px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px;color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"\2013"}
details p{padding-bottom:20px;color:var(--muted);max-width:70ch}

.closing{position:relative;text-align:center;color:#fff;padding:110px 0}
.closing-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.closing-bg::after{content:"";position:absolute;inset:0;background:rgba(7,27,69,.86)}
.closing .wrap{position:relative}
.closing h2{color:#fff}
.closing p{color:#C9D9F2;max-width:48ch;margin:14px auto 30px}

footer{background:var(--navy-deep);color:#8FB4E8;padding:48px 0 40px;font-size:.85rem;line-height:1.7}
.footgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
.footgrid .disp{color:#fff;font-size:.92rem;letter-spacing:.16em;margin-bottom:14px}
.footgrid ul{list-style:none}
.footgrid ul li{margin-bottom:8px}
.footgrid ul a{text-decoration:none}
.footgrid ul a:hover{color:#fff}
footer img.mlogo{height:32px;margin-bottom:12px}
.legal{padding-top:22px;font-size:.75rem;color:#6E8CBC}
footer a{color:#fff}

.stickybar{display:none}
@media(max-width:1000px){
 .hero.split .wrap{grid-template-columns:1fr;gap:34px;padding:48px 24px}
 .hero.tall,.hero.short{min-height:auto}
 .specbar{grid-template-columns:1fr 1fr;gap:18px}
 section{padding:56px 0}
 .gal{grid-template-columns:1fr 1fr}
 .gal .tall{grid-row:auto;height:200px}
 .booking{grid-template-columns:1fr}
 .footgrid{grid-template-columns:1fr}
 .navlink.hide-sm{display:none}
 body{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
 .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid var(--line);padding:12px 16px;gap:12px}
 .stickybar .btn{flex:1;text-align:center;padding:14px}
}


/* ---- Added 1 Sep 2026: real logos, wired form ---- */
.logo-link{display:flex;align-items:center;flex:none}
.logo-ujc{height:42px;width:auto;display:block}
/* Both logo PNGs were re-cut with real alpha on 2 Sep 2026. The earlier note
   here blamed Hostinger's image optimiser for destroying transparency; that was
   tested directly and is not true - a transparent PNG round-trips intact. The
   source files were simply flat white-backed. UJC wordmark: white knocked out
   globally, so on the dark footer brightness(0) invert(1) gives a clean white
   wordmark with the letter counters still open. */
.logo-ujc-inv{filter:brightness(0) invert(1);background:none;border-radius:0;padding:0;margin-bottom:14px}
/* Mattamy png: white removed only where it is connected to the border, so the
   rounded corners are transparent but the white lettering inside the blue block
   is kept. It now sits directly on the hero photo and the footer, no white chip. */
.builder img,footer img.mlogo{filter:none;border-radius:0;background:none}
.builder img{height:38px;padding:0}
footer img.mlogo{height:36px}
/* Between 900 and ~1150 the full nav is wider than the wrap and the page
   scrolls sideways. Tighten first, then collapse to the sticky bar at 1000. */
@media(max-width:1200px){
 nav .wrap{gap:12px}
 .navright{gap:16px}
 .navlink{font-size:.88rem}
 .navright .btn{padding:13px 20px;font-size:.92rem}
}
/* Without this the Register button breaks onto two lines and grows taller
   than the 78px nav bar. */
.navright .btn{white-space:nowrap}
/* Keeps "1,717-3,179" on one line so the four spec columns stay aligned. */
.specbar b{white-space:nowrap}
@media(max-width:1000px){.logo-ujc{height:34px}}

.ujc-thanks h3{margin-bottom:10px}
.ujc-thanks .sub{color:var(--muted)}
.card input[aria-invalid="true"]{border-color:#c0392b}
.calbox iframe{width:100%;border:0;min-height:640px;display:block}
.calbox.is-live{padding:0;min-height:0;display:block;overflow:hidden}
.navlink{white-space:nowrap}

/* Phones: the wordmark plus the Register button is all that fits on one row.
   The sticky bar pinned to the bottom carries the rest of the navigation. */
@media(max-width:560px){
 nav .wrap{gap:10px}
 .navright .navlink{display:none}
 .navright .btn{padding:11px 16px;font-size:.88rem}
}
/* The pricing tables are five columns wide and were dragging the whole page
   sideways on a phone. Shrink them, then let the table scroll inside itself. */
@media(max-width:700px){
 table.sch{display:block;overflow-x:auto;font-size:.82rem;
  /* Scroll shadows: the white panes scroll with the content (local) and the
     grey ones stay put (scroll), so a shadow shows only on the side that
     still has columns hidden. Tells the reader the table slides. */
  background:
   linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left/34px 100% no-repeat local,
   linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right/34px 100% no-repeat local,
   radial-gradient(farthest-side at 0 50%,rgba(11,44,113,.16),rgba(11,44,113,0)) left/14px 100% no-repeat scroll,
   radial-gradient(farthest-side at 100% 50%,rgba(11,44,113,.16),rgba(11,44,113,0)) right/14px 100% no-repeat scroll}
 table.sch th{padding:0 8px 10px}
 table.sch td{padding:12px 8px}
 table.sch th,table.sch td{white-space:nowrap}
}


/* ---- Added 1 Sep 2026 (evening): desktop visit CTA + dated incentive line ---- */
.ujc-deadline{margin:2px 0 16px;font-size:.86rem;font-weight:600;letter-spacing:.01em;color:#0B2350}
.ujc-deadline strong{white-space:nowrap}
.visitfab{display:none}
@media(min-width:1001px){
  .visitfab{display:inline-block;position:fixed;right:26px;bottom:26px;z-index:95;border-radius:999px;box-shadow:0 10px 26px rgba(11,35,80,.30);white-space:nowrap}
  .visitfab:hover{box-shadow:0 14px 32px rgba(11,35,80,.36)}
  .visitfab:focus-visible{outline:3px solid #0B2350;outline-offset:3px}
}

/* Booking calendar: GHL form_embed.js hides the iframe inline and sometimes never reveals it.
   ID specificity beats .calbox.is-live; !important overrides its inline styles. */
#book-cal{min-height:800px !important;overflow:visible !important;height:auto !important}
#book-cal iframe{position:static !important;opacity:1 !important;visibility:visible !important;
  pointer-events:auto !important;left:auto !important;top:auto !important;
  width:100% !important;max-width:100% !important;min-height:780px !important;border:0;display:block}
.calfallback{margin:0 0 10px;font-size:.9rem;color:#4A5A76}
@media(max-width:700px){#book-cal{min-height:720px !important}#book-cal iframe{min-height:700px !important}}

/* ---- 2 Sep 2026 evening: header lockup, sticky bar, plan cards, video, tables ---- */
.logos{display:flex;align-items:center;gap:14px;flex:none}
.logo-div{width:1px;height:34px;background:var(--line)}
.logo-mattamy{height:30px;width:auto;display:block}
.colimg{display:block;line-height:0}
.planlink{display:block;color:inherit;text-decoration:none}
.planlink .plan{transition:transform .18s ease,box-shadow .18s ease}
.planlink:hover .plan{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,44,113,.12)}
.btn-ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-ghost:hover{background:#F3F6FB}
.stickybar .btn-ghost{flex:0 0 auto;padding:14px 16px}
.stickybar .btn-visit{flex:1}
.vidwrap{position:relative;margin-top:36px;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9;cursor:pointer}
.vidwrap img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.vidplay{white-space:nowrap;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.96);color:var(--navy);border:0;border-radius:999px;padding:14px 26px 14px 18px;font:700 1rem 'Figtree',sans-serif;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.vidplay svg{width:28px;height:28px;color:var(--blue)}
.vidwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tablewrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablehint{display:none}
.vidwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vidwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vidwrap{margin-top:36px;border-radius:12px;overflow:hidden;background:#0b2c71;aspect-ratio:16/9;position:relative}
.builder img,footer img.mlogo{background:none;border-radius:0;filter:none}
.builder img{height:34px}
footer img.mlogo{height:30px}
@media(max-width:700px){
  .tablewrap.stack table,.tablewrap.stack tbody,.tablewrap.stack tr,.tablewrap.stack td{display:block;width:100%}
  .tablewrap.stack thead,.tablewrap.stack th,.tablewrap.stack tr:has(th){display:none}
  .tablewrap.stack tr{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
  .tablewrap.stack td{border:0;padding:3px 0;font-size:.95rem}
  .tablewrap.stack td:first-child{font-weight:700;color:var(--navy);font-size:1.02rem;padding-bottom:6px}
  .tablewrap.stack td:not(:first-child):before{content:attr(data-label) ": ";color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
  .tablewrap.stack tr:first-child{display:none !important}
  .tablewrap.stack td{text-align:left !important}
  .tablewrap.stack td:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
  .tablewrap.stack td:first-child > *{font-size:.7rem}
  .tablewrap.stack tr{padding:12px 14px 10px}
  .scores{grid-template-columns:1fr}
  .logo-mattamy{height:24px}
  .logo-div{height:26px}
}

.brandline{color:#C9D9F2;font-size:.85rem}.brandline b{color:#fff;font-weight:700}


/* ===== MOBILE NAV + iOS/ANDROID FIXES (v10) ===== */
.menubtn{display:none}
.mobilemenu{display:none}
@media(max-width:1000px){
 nav .wrap{height:66px;gap:10px}
 .navright{gap:10px}
 .menubtn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;flex:none}
 .menubtn span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
 .menubtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .menubtn[aria-expanded="true"] span:nth-child(2){opacity:0}
 .menubtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .mobilemenu{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 30px rgba(11,31,59,.12);padding:8px 20px 18px;z-index:85}
 .mobilemenu[hidden]{display:none}
 .mobilemenu a{color:var(--navy);text-decoration:none;font-weight:600;font-size:1.05rem;padding:14px 0;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
 .mobilemenu a.btn{margin-top:14px;border-bottom:0;justify-content:center;color:#fff}
 .mobilemenu a.on{color:var(--blue)}
 .stickybar{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .logos{gap:10px}
 .logo-link img{max-height:38px}
 .logo-mattamy{max-height:26px}
}
@media(max-width:700px){
 input,select,textarea{font-size:16px !important}
 .tablewrap.stack .newtag{display:inline-block;margin-left:0;margin-top:6px;white-space:normal;vertical-align:baseline}
 .tablewrap.stack td{overflow-wrap:anywhere}
}

@media(max-width:560px){ /* compact nav 560 */
 nav .wrap{padding-left:14px;padding-right:14px;gap:8px;height:60px}
 .logos{gap:8px}
 .logo-ujc{height:30px}
 .logo-mattamy{height:21px}
 .logo-div{height:22px}
 .navright{gap:8px}
 .navright .btn{padding:9px 12px;font-size:13px;white-space:nowrap}
 .menubtn{width:42px;height:42px}
 .mobilemenu{padding-left:14px;padding-right:14px}
}

@media(max-width:700px){ /* stack wrap names */
 .tablewrap.stack td,.tablewrap.stack td:first-child{white-space:normal !important;overflow:visible}
}


/* ===== $70K PROMO + FOOTER BRAND (v13) ===== */
.promo{display:flex;align-items:center;justify-content:center;gap:6px 16px;flex-wrap:wrap;background:#F5B52B;color:var(--navy);text-decoration:none;padding:10px 20px;font-size:.93rem;line-height:1.35;text-align:center}
.promo:hover{background:#FFC63F}
.promo-tag{font-family:'Barlow Condensed','Figtree',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1rem}
.promo-cta{font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hero-badge{display:inline-block;background:#F5B52B;color:var(--navy);font-weight:700;font-size:.86rem;letter-spacing:.01em;padding:7px 13px;border-radius:6px;margin:0 0 16px;text-decoration:none}
.hero-badge:hover{background:#FFC63F}
.inc-hot{border-left-color:#F5B52B !important;background:#FFF7E0;padding:12px 16px 12px 18px !important;border-radius:0 8px 8px 0}
.inc-hot span{color:var(--text) !important}
.cardtag{display:inline-block;background:#FFF7E0;color:#6B4300;border:1px solid #F5B52B;font-size:.76rem;font-weight:700;padding:4px 9px;border-radius:5px;margin:0 0 12px}
.callout70{background:#F5B52B;color:var(--navy);font-weight:600;padding:12px 16px;border-radius:8px;margin-top:18px;max-width:640px;font-size:.95rem}
.footbottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:20px;font-size:.8rem;color:#8FB4E8}
.footbottom img{height:40px;width:auto;display:block;background:none;filter:none}
@media(max-width:700px){
 .promo{padding:9px 14px;font-size:.86rem;gap:3px 10px}
 .promo-tag{font-size:.95rem}
 .footbottom{justify-content:flex-start}
 .footbottom img{height:34px}
}

.promo-text-sm{display:none}
@media(max-width:700px){ .promo-text{display:none} .promo-text-sm{display:inline} .promo{flex-direction:column;gap:2px;padding:8px 14px} }


/* ===== 2 Sep 2026 late: work order edits 4-7 (v15) ===== */
/* EDIT 4: section CTA - block, centred, full width of the wrap on phones, capped on desktop */
.cta-full{display:block;width:100%;max-width:420px;margin:28px auto 0;text-align:center;box-sizing:border-box}
/* EDIT 5: collection card photos keep a 3:2 ratio and are never squashed; no fixed pixel height */
.col img{height:auto;aspect-ratio:3/2;width:100%;object-fit:cover}
/* EDIT 7: the brightness(0) invert(1) knockout is for the UJC wordmark only (.logo-ujc-inv).
   The Mattamy mark is never filtered; on dark backgrounds it sits in full colour on a white rounded plaque,
   the same treatment as the header, so the blue oval reads. */
img[src*="mattamy-logo"]{filter:none !important}
.builder img,footer img.mlogo{box-sizing:content-box;height:34px;width:auto;padding:6px 10px;background:#fff;border-radius:8px;opacity:1}
footer img.mlogo{height:30px;margin-bottom:12px}
/* EDIT 3: footer email replaces the Dream Villa mark */
.footbottom a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.footbottom a:hover{border-bottom-color:#fff}
.footbottom span{overflow-wrap:anywhere}


/* ---- PHONE PASS 2 Sep 2026: no cropped photos on phones ---- */
@media(max-width:700px){
 .gal{grid-template-columns:1fr 1fr;align-items:start}
 .gal img,.gal .tall{height:auto;aspect-ratio:auto;object-fit:unset;grid-row:auto}
 /* Safari-safe: photo keeps 3:2 via aspect-ratio (works on <img>); the overlay is absolutely
    positioned with all four edges set, caption has a fixed height so bottom lines up exactly */
 .plan{display:block}
 .plan img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#0b2c71;transform:none}
 .plan .cap{height:80px;box-sizing:border-box;overflow:hidden}
 .plan .lock{position:absolute;top:0;left:0;right:0;bottom:80px;height:auto;width:auto;aspect-ratio:auto}
 .col img{object-fit:contain;background:#0b2c71}
 .vidwrap img{object-fit:contain}
}


/* 2 Sep 2026 late: click-to-play video on touch devices (iOS blocks muted autoplay in Low Power Mode) */
.vidwrap .playbtn{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border:0;border-radius:50%;background:#F5B52B;color:#0b2c71;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35);padding:0}
.vidwrap .playbtn svg{width:36px;height:36px;fill:currentColor;margin-left:4px}
.vidwrap iframe{z-index:2}
.vidwrap img,.vidwrap .playbtn{display:none}


/* 1 Oct 2026: hero refresh. Sharper streetscape photo, lighter overlay, photo strip on phones */
.hero-bg{background-position:center 80%}
.hero-bg::after{background:linear-gradient(100deg,rgba(7,27,69,.86) 0%,rgba(7,27,69,.70) 38%,rgba(7,27,69,.22) 70%,rgba(7,27,69,0) 100%)}
.hero h1,.hero .lede,.hero .kicker{text-shadow:0 2px 14px rgba(4,16,44,.45)}
@media(max-width:1000px){
.hero{flex-direction:column;align-items:stretch}
.hero-bg{position:relative;inset:auto;width:100%;height:210px;flex:0 0 auto;background-position:center 60%}
.hero.short .hero-bg{height:170px}
.hero-bg::after{background:linear-gradient(180deg,rgba(7,27,69,0) 60%,rgba(7,27,69,.85) 100%)}
.hero.split .wrap,.hero .wrap{padding-top:26px}
}