/* Dan Merriam & Associates — shared stylesheet */ :root{ --blue:#002349;--blue-soft:#143a60;--blue-deep:#001a36; --ivory:#f7f3ec;--ivory-deep:#efe9dd;--paper:#ffffff; /* --stone-light was #9c9483, which is 2.72:1 on ivory and 3.01:1 on paper -- both below the 4.5:1 WCAG AA floor, on text that matters (form hints, press datelines, the mobile table's column labels, "Book a call" links). Solved for the darkest value that clears 4.5:1 on ivory, paper AND ivory-deep: #6f695d. That lands one hex digit from --stone, which is the real finding -- a "lighter stone" cannot exist above AA against these warm off-whites. Hierarchy is carried by size, weight and uppercase instead. DO NOT lighten this back. */ --ink:#1a1a18;--stone:#6f685c;--stone-light:#6f695d; --gold:#a8894e;--gold-soft:#c4a86f;--gold-ink:#7d663a; --line:rgba(26,26,24,0.12);--line-gold:rgba(168,137,78,0.4); --serif:'Cormorant',Georgia,serif;--sans:'Inter',-apple-system,system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box;} /* Visually hidden, still announced. Used for the headings that keep the outline from skipping h1 -> h3 on the two card-grid pages. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} html{scroll-behavior:smooth;} /* ---------- iOS Safari: form controls must be 16px ---------- Under 16px, iOS Safari zooms the page the moment a field takes focus and never zooms back -- the layout visibly jumps mid-form. Every control on this site was 14-15px. This is the base rule; the per-component rules below all restate 16px so a future edit to one of them cannot quietly reintroduce the bug. */ input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;} /* ---------- Visible keyboard focus ---------- There was none: one `outline:none` and otherwise whatever the browser drew. Gold-ink is 4.95:1 on ivory and gold-soft is 6.87:1 on blue, so both clear the 3:1 WCAG 1.4.11 floor for a non-text indicator on their own surfaces. */ :focus-visible{outline:2px solid var(--gold-ink);outline-offset:2px;border-radius:2px;} header :focus-visible,footer :focus-visible,.advisory :focus-visible,.hero :focus-visible, .phero :focus-visible,.markets :focus-visible,.final :focus-visible,.pillar :focus-visible, .feature-card :focus-visible{outline-color:var(--gold-soft);} /* ---------- prefers-reduced-motion ---------- The site had no reduced-motion handling at all: smooth scrolling on , on both carousel tracks, and transitions on nearly every interactive element. */ @media (prefers-reduced-motion: reduce){ html,.carousel-track,.pcar-track{scroll-behavior:auto;} *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important;} } body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;} h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-0.01em;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} .wrap{max-width:1180px;margin:0 auto;padding:0 32px;} .wrap-narrow{max-width:820px;margin:0 auto;padding:0 32px;} .eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-ink);font-weight:500;} .hero .eyebrow,.phero .eyebrow,.pillar .eyebrow,.markets .eyebrow,.advisory .eyebrow,.final .eyebrow{color:var(--gold-soft);} .btn{display:inline-block;font-family:var(--sans);font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:14px 28px;border-radius:3px;cursor:pointer;border:1px solid transparent;transition:.2s;} .btn-gold{background:var(--gold);color:var(--blue);font-weight:500;} .btn-gold:hover{background:var(--gold-soft);} .btn-line{border-color:rgba(247,243,236,0.5);color:var(--ivory);} .btn-line:hover{background:rgba(247,243,236,0.12);} .btn-line-dark{border-color:var(--line-gold);color:var(--blue);} .btn-line-dark:hover{background:var(--ivory-deep);} /* HEADER */ header{position:sticky;top:0;z-index:100;background:var(--blue);} .bar{display:flex;align-items:center;justify-content:space-between;height:76px;} .logo .l1{font-family:var(--serif);font-size:21px;letter-spacing:2px;color:var(--ivory);} .logo .l2{font-size:9px;letter-spacing:4px;color:var(--gold);margin-top:1px;} nav.main{display:flex;align-items:center;gap:28px;} .nav-item{position:relative;} .nav-item>button,.nav-item>a.toplink{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:13px;letter-spacing:.6px;color:rgba(247,243,236,0.86);padding:28px 0;display:flex;align-items:center;gap:5px;} .nav-item>button:hover,.nav-item.open>button,.nav-item.open>a.toplink,.nav-item>a.toplink:hover{color:var(--ivory);} .nav-item>button .car,.nav-item>a.toplink .car{font-size:9px;opacity:.6;transition:.2s;} .nav-item.open>button .car,.nav-item.open>a.toplink .car{transform:rotate(180deg);} .nav-cta{font-size:12px!important;letter-spacing:1px;text-transform:uppercase;padding:12px 22px;} .menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;color:var(--ivory);font-size:24px;line-height:1;cursor:pointer;} .mega{position:fixed;left:0;right:0;top:76px;background:var(--ivory);border-top:2px solid var(--gold);box-shadow:0 24px 40px -24px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s;z-index:99; max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;} .mega.show{opacity:1;visibility:visible;transform:translateY(0);} .mega-inner{max-width:1180px;margin:0 auto;padding:38px 32px;display:grid;grid-template-columns:1.1fr 1.1fr 1fr 1.1fr;gap:34px;} .col-label{font-family:var(--sans);font-size:12px;letter-spacing:.5px;color:var(--blue);font-weight:500;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-gold);} .col-link{display:block;font-size:14.5px;color:var(--ink);padding:7px 0;transition:.15s;} .col-link:hover{color:var(--gold-ink);padding-left:4px;} .col-link small{display:block;font-size:12px;color:var(--stone);letter-spacing:0;} .viewall{display:inline-block;margin-top:8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-ink);font-weight:500;} .feature-card{background:var(--blue);border-radius:4px;padding:24px;color:var(--ivory);display:flex;flex-direction:column;} .feature-card .fc-quote{font-family:var(--serif);font-size:21px;line-height:1.25;margin-bottom:8px;} .feature-card .fc-sub{font-size:13px;color:rgba(247,243,236,0.7);margin-bottom:auto;} .feature-card .btn{margin-top:16px;text-align:center;} /* wordmark / logo rows (featured-in, partners) */ .logorow{display:flex;align-items:center;gap:28px;flex-wrap:wrap;} .logorow .pl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--stone);} .logorow a{font-family:var(--serif);font-size:19px;color:var(--stone);transition:.2s;white-space:nowrap;} .logorow a:hover{color:var(--blue);} .logorow img{height:26px;width:auto;filter:grayscale(1) opacity(.72);transition:.2s;} .logorow a:hover img{filter:none;} /* HERO (home) */ .hero{position:relative;color:var(--ivory);padding:120px 0 96px;background:var(--blue);overflow:hidden;} .hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;} .hero .wrap{position:relative;z-index:2;} .hero h1{font-size:clamp(2.5rem,5.2vw,4.2rem);max-width:880px;margin:20px 0 0;} .hero p.lede{font-size:clamp(1.05rem,1.55vw,1.22rem);color:rgba(247,243,236,0.85);max-width:680px;margin:24px 0 0;line-height:1.6;} .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;} /* PAGE HERO (interior pages) */ .phero{position:relative;color:var(--ivory);background:var(--blue);padding:64px 0 56px;overflow:hidden;} .phero .bg{position:absolute;inset:0;background-size:cover;background-position:center;} .phero .wrap{position:relative;z-index:2;} .phero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);max-width:840px;margin:14px 0 0;} .phero p{color:rgba(247,243,236,0.82);max-width:640px;margin:16px 0 0;font-size:17px;} .breadcrumb{font-size:12px;letter-spacing:.5px;color:rgba(247,243,236,0.6);} .breadcrumb a:hover{color:var(--gold-soft);} /* FEATURED band */ .featured{background:var(--paper);border-bottom:1px solid var(--line);padding:26px 0;} .featured .wrap{justify-content:center;} /* SECTIONS */ section{padding:88px 0;} .sec-head{max-width:760px;margin-bottom:46px;} .sec-head.center{text-align:center;margin-left:auto;margin-right:auto;} .sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:14px 0 0;} .sec-head p{color:var(--stone);margin-top:16px;font-size:17px;} /* value props */ .vp-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--paper);} .vp{padding:34px 26px;border-right:1px solid var(--line);} .vp:last-child{border-right:none;} .vp .vp-i{width:40px;height:40px;border:1px solid var(--line-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold-ink);font-family:var(--serif);font-size:18px;margin-bottom:16px;} .vp h3{font-size:21px;margin-bottom:8px;} .vp p{font-size:14px;color:var(--stone);line-height:1.6;} /* triple pillars */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .pillar{position:relative;border-radius:5px;overflow:hidden;min-height:380px;display:flex;align-items:flex-end;padding:30px;color:var(--ivory);} .pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .pillar .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,26,54,.15),rgba(0,26,54,.9));} .pillar .pc{position:relative;z-index:2;} .pillar h3{font-size:27px;} .pillar p{font-size:14.5px;color:rgba(247,243,236,0.85);margin:8px 0 16px;} .pillar .go{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-soft);font-weight:500;} /* dan intro */ .dan{background:var(--paper);} .dan .wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:54px;align-items:center;} .dan .portrait{border-radius:5px;overflow:hidden;} .dan .portrait img{width:100%;height:580px;object-fit:cover;object-position:center top;} .dan .role{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-ink);margin-top:6px;} .dan h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin:12px 0 0;} .dan p{color:var(--stone);margin-top:18px;font-size:16.5px;} .stats{display:flex;gap:40px;margin-top:26px;flex-wrap:wrap;} .stat .n{font-family:var(--serif);font-size:34px;color:var(--blue);line-height:1;} .stat .l{font-size:12.5px;letter-spacing:.5px;color:var(--stone);margin-top:6px;} .dan .partners{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);} .dan .partners .pl{display:block;margin-bottom:12px;} /* property cards */ .dev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;} .dev{background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden;transition:.2s;} .dev:hover{transform:translateY(-4px);box-shadow:0 18px 30px -22px rgba(0,0,0,.4);} .dev .ph{height:170px;position:relative;overflow:hidden;} .dev .ph img{width:100%;height:100%;object-fit:cover;transition:.4s;} .dev:hover .ph img{transform:scale(1.05);} .dev .tag{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--blue);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;font-weight:500;padding:5px 9px;border-radius:2px;} .dev .body{padding:18px 20px 22px;} .dev .loc{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-ink);} .dev h3{font-size:20px;margin:5px 0 0;line-height:1.15;} .dev .meta{font-size:13.5px;color:var(--stone);border-top:1px solid var(--line);padding-top:10px;margin-top:12px;} /* listings page — compact grid & anchor offsets (scoped to #listings-grid on listings.html; other pages unaffected) */ #listings-grid .dev{scroll-margin-top:90px;} #listings-grid .dev .ph picture{display:block;height:100%;} @media(min-width:1100px){ #listings-grid{grid-template-columns:repeat(4,1fr);gap:16px;} #listings-grid .dev .ph{height:130px;} #listings-grid .dev .body{padding:12px 14px 14px;} #listings-grid .dev .loc{font-size:9.5px;letter-spacing:1.2px;} #listings-grid .dev h3{font-size:16px;line-height:1.22;} #listings-grid .dev .meta{font-size:11.5px;padding-top:8px;margin-top:8px;} #listings-grid .dev .body p{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} } /* markets */ .markets{position:relative;color:var(--ivory);overflow:hidden;} .markets .bg{position:absolute;inset:0;background-size:cover;background-position:center;} .markets .wrap{position:relative;z-index:2;} .market-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px;} .market{border:1px solid rgba(247,243,236,0.25);border-radius:40px;padding:11px 24px;font-size:14px;letter-spacing:.5px;transition:.2s;} .market:hover{background:var(--gold);color:var(--blue);border-color:var(--gold);} /* editorial split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .split .art{border-radius:5px;overflow:hidden;} .split .art img{width:100%;height:430px;object-fit:cover;} .split h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:14px 0 0;} .split p{color:var(--stone);margin-top:16px;} .checklist{list-style:none;margin:22px 0 28px;} .checklist li{padding:9px 0 9px 30px;position:relative;font-size:15.5px;border-bottom:1px solid var(--line);} .checklist li:before{content:"";position:absolute;left:0;top:15px;width:14px;height:7px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg);} /* advisory */ .advisory{background:var(--blue-deep);color:var(--ivory);} .advisory .sec-head p{color:rgba(247,243,236,0.72);} .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .adv-card{border:1px solid rgba(247,243,236,0.16);border-radius:4px;padding:28px;} .adv-card h3{font-size:21px;color:var(--ivory);} .adv-card p{font-size:14px;color:rgba(247,243,236,0.68);margin-top:8px;} a.adv-card{text-decoration:none;transition:.2s;} a.adv-card:hover{border-color:var(--gold);} .adv-card .rm{display:inline-block;margin-top:14px;} .adv-card.card-lite{border-color:var(--line);background:var(--paper);} .adv-card.card-lite h3{color:var(--blue);} .adv-card.card-lite p{color:var(--stone);} /* testimonials */ .tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .tcard{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:30px;} .tcard .q{font-family:var(--serif);font-size:21px;line-height:1.4;color:var(--ink);} .tcard .who{margin-top:20px;font-size:13px;letter-spacing:.5px;color:var(--stone);} .tcard .who b{color:var(--ink);font-weight:500;} /* insights */ .ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .ins-grid.is-capped > .ins:nth-child(n+25){display:none !important;} .ins-more{text-align:center;margin-top:32px;} .ins{background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden;} .cat-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;} .pill{font-family:var(--sans);font-size:12px;letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;border-radius:20px;border:1px solid var(--line);background:var(--paper);color:var(--stone);cursor:pointer;transition:.2s;} .pill:hover{border-color:var(--gold);color:var(--blue);} .pill.active{background:var(--blue);border-color:var(--blue);color:var(--ivory);} .ins-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 22px;margin:0 0 30px;} .ins-controls .cat-pills{margin:0;} .ins-search{position:relative;flex:1 1 260px;max-width:340px;} .ins-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--stone);pointer-events:none;} .ins-search input{width:100%;font-family:var(--sans);font-size:16px;padding:11px 16px 11px 42px;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--blue);transition:.2s;-webkit-appearance:none;} .ins-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(179,146,92,.14);} .ins-search input::placeholder{color:var(--stone);} .ins-noresults{text-align:center;color:var(--stone);font-family:var(--sans);font-size:15px;padding:48px 0;} .linklike{background:none;border:none;padding:0;color:var(--gold-ink);text-decoration:underline;cursor:pointer;font:inherit;} /* Newsroom press cards */ .press-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} .press{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:28px 30px;color:inherit;transition:.2s;} .press:hover{border-color:var(--line-gold);box-shadow:0 10px 30px -18px rgba(0,26,54,.35);transform:translateY(-2px);} .press .p-mark{height:30px;display:flex;align-items:center;margin-bottom:18px;} .press .p-mark img{max-height:28px;width:auto;filter:grayscale(1) opacity(.75);transition:.2s;} .press:hover .p-mark img{filter:none;} .press .p-mark .pw{font-family:var(--serif);font-size:22px;letter-spacing:1px;color:var(--stone);} .press:hover .p-mark .pw{color:var(--blue);} .press .p-meta{font-family:var(--sans);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--stone-light);margin-bottom:8px;min-height:14px;} .press h3{font-size:22px;line-height:1.25;color:var(--blue);margin-bottom:12px;} .press .pq{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.55;color:var(--stone);border-left:2px solid var(--line-gold);padding-left:16px;margin:0 0 16px;} .press .rm{margin-top:auto;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-ink);font-weight:500;} @media(max-width:860px){.press-grid{grid-template-columns:1fr;}} /* Horizontal card carousel (home slider, related-article strips, advisory) */ .carousel{position:relative;} .carousel-track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 2px 10px;scrollbar-width:none;} .carousel-track::-webkit-scrollbar{display:none;} .carousel-track>.ins{flex:0 0 340px;scroll-snap-align:start;} .carousel-track>.dev{flex:0 0 290px;scroll-snap-align:start;} .carousel-track>.dev .ph{height:170px;} .carousel-nav{position:absolute;top:calc(50% - 12px);transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:.2s;box-shadow:0 6px 20px rgba(0,26,54,.12);} .carousel-nav:hover{background:var(--blue);color:var(--ivory);border-color:var(--blue);} .carousel-nav[disabled]{opacity:0;pointer-events:none;} .carousel-prev{left:-14px;} .carousel-next{right:-14px;} .carousel-nav svg{width:18px;height:18px;fill:currentColor;} @media(max-width:760px){.carousel-track>.ins{flex-basis:80%;}.carousel-nav{display:none;}} /* Inventory rail inside a Real Estate tab panel. It sits in the prose column, not a full-width section, so the arrows have to come inside the track -- at -14px they hang into the sidebar gutter -- and the cards run narrower to keep two in view at desktop. */ /* A grid item defaults to min-width:auto, which means it grows to fit its widest content instead of letting that content scroll. The prose column therefore stretched to the full width of the inventory track -- eight 264px cards, 2256px -- and pushed the whole page into horizontal scroll while both carousel arrows sat disabled, because from the track's point of view nothing was overflowing. min-width:0 lets the column hold its grid width and hands the overflow back to .carousel-track, which is the element that actually has overflow-x:auto. */ /* In-body figure on the jurisdiction pages. Lives inside a tab panel in the prose column, so it takes the column width rather than bleeding full-width, and the aspect ratio is fixed in CSS so the caption does not jump when the image loads. */ .jfig{margin:28px 0 6px;} .jfig img{width:100%;height:auto;display:block;border-radius:3px;} .jfig figcaption{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--stone); padding:9px 2px 0;border-top:1px solid var(--line);margin-top:9px;} .twocol>div{min-width:0;} .jrail{margin-top:34px;} .jrail .carousel-prev{left:6px;} .jrail .carousel-next{right:6px;} .jrail .carousel-track{gap:20px;} .jrail .carousel-track>.dev{flex:0 0 264px;} @media(max-width:760px){.jrail .carousel-track>.dev{flex-basis:82%;}} .ins .ph{height:180px;overflow:hidden;} .ins .ph picture{display:block;height:100%;} .ins .ph img{width:100%;height:100%;object-fit:cover;} .ins .ib{padding:22px 24px 26px;} .ins .cat{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-ink);} .ins h3{font-size:21px;margin:10px 0;} .ins p{font-size:14px;color:var(--stone);} .ins .rm{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--blue);margin-top:12px;display:inline-block;} /* lead band */ .lead{background:var(--gold);color:var(--blue);} /* On gold, prose ink is 4.33:1 and a gold-ink link is 1.66:1 -- near invisible. --blue is 4.75:1. */ .lead .prose,.lead p{color:var(--blue);} .lead .prose a,.lead a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:2px;} .lead .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;} .lead h2{font-size:clamp(1.7rem,3vw,2.3rem);max-width:560px;} .lead form{display:flex;gap:10px;flex-wrap:wrap;} .lead input{font-family:var(--sans);font-size:16px;padding:14px 18px;border:1px solid var(--blue);border-radius:3px;background:var(--ivory);color:var(--blue);min-width:240px;} .lead input::placeholder{color:rgba(0,35,73,0.55);} .lead button{background:var(--blue);color:var(--ivory);border:none;} /* final cta */ .final{position:relative;color:var(--ivory);text-align:center;overflow:hidden;} .final .bg{position:absolute;inset:0;background-size:cover;background-position:center;} .final .wrap{position:relative;z-index:2;} .final h2{font-size:clamp(2.2rem,4vw,3.2rem);max-width:760px;margin:0 auto;} .final p{color:rgba(247,243,236,0.82);max-width:560px;margin:18px auto 30px;} /* prose (article / rich text) */ .prose{font-size:17px;color:#2c2a26;} .prose>*+*{margin-top:1.1em;} .prose h2{font-size:1.8rem;margin-top:1.6em;} .prose h3{font-size:1.35rem;margin-top:1.4em;} .prose ul,.prose ol{padding-left:1.2em;} .prose li{margin-top:.4em;} .prose a{color:var(--gold-ink);text-decoration:underline;} /* quick facts box */ .facts{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:8px 26px;} .facts .row{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);} .facts .row:last-child{border-bottom:none;} .facts .k{font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--stone);} .facts .v{font-family:var(--serif);font-size:20px;color:var(--blue);text-align:right;} /* two-column program layout */ .twocol{display:grid;grid-template-columns:1fr 360px;gap:54px;align-items:start;} .twocol .sticky{position:sticky;top:100px;} /* FAQ */ .faq details{border-bottom:1px solid var(--line);padding:18px 0;} .faq summary{font-family:var(--serif);font-size:21px;color:var(--blue);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;} .faq summary::-webkit-details-marker{display:none;} .faq summary:after{content:"+";color:var(--gold-ink);font-family:var(--sans);} .faq details[open] summary:after{content:"–";} .faq p{color:var(--stone);margin-top:12px;} /* form */ .lead-form{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:28px;} .lead-form h3{font-size:24px;color:var(--blue);} .lead-form .sub{font-size:14px;color:var(--stone);margin:6px 0 18px;} .lead-form label{display:block;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--stone);margin:14px 0 5px;} .lead-form input,.lead-form select,.lead-form textarea{width:100%;font-family:var(--sans);font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:var(--ivory);color:var(--ink);} .lead-form textarea{min-height:90px;resize:vertical;} .lead-form button{width:100%;margin-top:20px;background:var(--gold);color:var(--blue);border:none;} /* steps */ .steps{counter-reset:s;list-style:none;} .steps li{position:relative;padding:0 0 26px 56px;border-left:1px solid var(--line-gold);margin-left:16px;} .steps li:last-child{border-left:1px solid transparent;} .steps li:before{counter-increment:s;content:counter(s);position:absolute;left:-16px;top:-4px;width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--ivory);font-family:var(--serif);font-size:16px;display:flex;align-items:center;justify-content:center;} .steps h3{font-size:20px;color:var(--blue);} .steps p{font-size:14.5px;color:var(--stone);margin-top:4px;} /* comparison table */ .ctable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:5px;} .ctable{width:100%;border-collapse:collapse;background:var(--paper);font-size:14.5px;min-width:680px;} .ctable th,.ctable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);} .ctable thead th{background:var(--blue);color:var(--ivory);font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.5px;text-transform:uppercase;} .ctable tbody th{font-family:var(--serif);font-size:18px;font-weight:500;} .ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:none;} .ctable .hl{color:var(--gold-ink);font-weight:500;} /* Below 760px a comparison table stops being a table and becomes one card per row. A sideways-scrolling grid is poor UX on the page a buyer actually decides from, and these tables carry six columns. The column name comes from data-label, stamped onto every cell at build time by stamp_table_labels() in build_site.py. */ @media(max-width:760px){ .ctable-wrap{overflow-x:visible;border:none;border-radius:0;background:transparent;} .ctable{min-width:0;max-width:100%;font-size:14px;background:transparent;border-collapse:separate;border-spacing:0 14px;} .ctable thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .ctable tbody tr{display:block;background:var(--paper);border:1px solid var(--line);border-radius:5px;overflow:hidden;} .ctable tbody th{display:block;padding:14px 16px 8px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.3;overflow-wrap:anywhere;} /* min-width:0 matters: a flex item defaults to min-width:auto and will not shrink below its own min-content, so one long cell held the whole table at 643px inside a 311px column and scrolled the entire page sideways. */ .ctable tbody td{display:flex;gap:14px;align-items:baseline;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere;} .ctable tbody td:last-child{border-bottom:none;} .ctable tbody td::before{content:attr(data-label);flex:0 0 40%;min-width:0;overflow-wrap:anywhere;font-family:var(--sans);font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--stone-light);line-height:1.5;} .ctable tbody td[data-label=""]::before{display:none;} .ctable tbody tr:last-child th{border-bottom:1px solid var(--line);} .ctable tbody tr:last-child td:last-child{border-bottom:none;} } /* footer */ footer{background:var(--blue-deep);color:rgba(247,243,236,0.7);padding:70px 0 34px;font-size:14px;} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px;} .foot-grid h4{font-family:var(--sans);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:16px;} .foot-grid a{display:block;padding:5px 0;color:rgba(247,243,236,0.7);font-size:13.5px;} .foot-grid a:hover{color:var(--ivory);} .foot-brand .l1{font-family:var(--serif);font-size:22px;color:var(--ivory);letter-spacing:2px;} .foot-brand .l2{font-size:9px;letter-spacing:4px;color:var(--gold);margin:2px 0 16px;} .foot-brand p{font-size:13.5px;line-height:1.6;max-width:280px;} .foot-connect{margin-top:44px;padding-top:28px;border-top:1px solid rgba(247,243,236,0.14);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .foot-news{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .foot-news label{font-size:13px;color:rgba(247,243,236,0.7);margin-right:6px;} .foot-news input{font-family:var(--sans);font-size:16px;padding:11px 14px;border:1px solid rgba(247,243,236,0.25);border-radius:3px;background:transparent;color:var(--ivory);min-width:220px;} .foot-news input::placeholder{color:rgba(247,243,236,0.58);} .foot-news button{background:var(--gold);color:var(--blue);border:none;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:11px 18px;border-radius:3px;cursor:pointer;font-weight:500;} .social{display:flex;gap:10px;} .social a{width:44px;height:44px;border:1px solid rgba(247,243,236,0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(247,243,236,0.75);transition:.2s;} .social a:hover{background:var(--gold);border-color:var(--gold);color:var(--blue);} .social svg{width:16px;height:16px;fill:currentColor;} .wrap-narrow{max-width:760px;margin:0 auto;padding:0 32px;} .article-hero h1{max-width:880px;} .article-body{font-size:17px;} .article-body p{margin:0 0 18px;} .article-body h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.1rem);color:var(--blue);margin:40px 0 14px;line-height:1.2;} .article-body h3{font-family:var(--serif);font-size:1.45rem;color:var(--blue);margin:30px 0 12px;} .article-body h4{font-size:1.05rem;font-weight:500;color:var(--blue);margin:24px 0 10px;} .article-body img{width:100%;height:auto;border-radius:5px;margin:26px 0;display:block;} .article-body picture{display:block;margin:26px 0;} .article-body picture img{margin:0;} .article-body figure{margin:26px 0;} .article-body figure picture,.article-body figure img{margin:0;} .article-body figcaption{font-family:var(--sans);font-size:13px;color:var(--stone);padding:10px 2px 0;text-align:center;} .article-body ul,.article-body ol{margin:0 0 18px 22px;} .article-body li{margin:7px 0;} .article-body a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px;} .article-body a:hover{color:var(--blue);} .article-body blockquote{border-left:3px solid var(--gold);padding:4px 0 4px 22px;margin:26px 0;font-family:var(--serif);font-size:1.35rem;line-height:1.4;color:var(--blue);font-style:italic;} .article-body strong{font-weight:500;color:var(--ink);} .article-disclaimer{margin-top:44px;padding:16px 20px;border-left:3px solid var(--line);font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--stone);} .article-disclaimer a{color:var(--stone);text-decoration:underline;} .article-author{margin-top:26px;padding:28px 30px;background:var(--ivory-deep);border-radius:5px;} .article-author .aa-name{font-family:var(--serif);font-size:23px;color:var(--blue);} .article-author .aa-role{font-size:14px;color:var(--stone);margin:4px 0 16px;max-width:480px;line-height:1.5;} .article-author .aa-social{display:flex;gap:9px;margin:0 0 20px;} .article-author .aa-social a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--stone);transition:.2s;} .article-author .aa-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;} .article-author .aa-social svg{width:15px;height:15px;fill:currentColor;} .foot-bottom{margin-top:34px;padding-top:24px;border-top:1px solid rgba(247,243,236,0.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:13px;color:rgba(247,243,236,0.5);} @media(max-width:1080px){ .vp-grid{grid-template-columns:1fr 1fr;} .vp:nth-child(1),.vp:nth-child(2){border-bottom:1px solid var(--line);} .vp:nth-child(2){border-right:none;} .dev-grid{grid-template-columns:1fr 1fr;} .tcards,.ins-grid,.adv-grid,.pillars{grid-template-columns:1fr 1fr;} .dan .wrap{grid-template-columns:1fr;gap:30px;} .dan .portrait img{height:440px;} .twocol{grid-template-columns:1fr;} .twocol .sticky{position:static;} .foot-grid{grid-template-columns:1fr 1fr;} } @media(max-width:880px){ nav.main{position:fixed;inset:76px 0 auto 0;background:var(--blue-deep);flex-direction:column;align-items:stretch;gap:0;padding:10px 0;display:none;border-top:1px solid rgba(247,243,236,0.12);max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow:auto;-webkit-overflow-scrolling:touch;} nav.main.open{display:flex;} .nav-item>button,.nav-item>a.toplink{padding:16px 32px;width:100%;justify-content:space-between;} .nav-cta{margin:14px 32px;justify-content:center;} .menu-toggle{display:block;} .mega{position:static;box-shadow:none;border-top:none;opacity:1;visibility:visible;transform:none;display:none;background:rgba(255,255,255,0.04);} .mega.show{display:block;} .mega-inner{grid-template-columns:1fr;gap:22px;padding:14px 32px 26px;} .col-label{color:var(--gold);border-color:rgba(247,243,236,0.2);} .col-link{color:rgba(247,243,236,0.8);} .feature-card{background:rgba(247,243,236,0.06);} .tcards,.ins-grid,.adv-grid,.pillars,.split,.lead .wrap{grid-template-columns:1fr;} /* Two property cards still fit a 768px tablet; one per row wastes the width. */ .dev-grid{grid-template-columns:1fr 1fr;} .split{display:block;}.split .art{margin-top:28px;}.split .art img{height:280px;} .vp-grid{grid-template-columns:1fr;} .vp{border-right:none;border-bottom:1px solid var(--line);} .foot-grid{grid-template-columns:1fr 1fr;} .lead form{width:100%;} } /* market-guide accordion (caribbean-real-estate) */ .dev-grid .mkt-more{display:none!important;} .dev-grid.markets-open .mkt-more{display:block!important;} /* compare programs tabs */ /* Tab component (revived from the orphaned compare-tabs rules rather than adding a third parallel tab style). Server ships every panel stacked; site.js collapses it. */ .cmp-tabs{display:flex;gap:10px;margin:0 0 26px;flex-wrap:wrap;} .cmp-tabs .pill{cursor:pointer;font-size:14px;padding:12px 22px;min-height:44px; font-family:var(--sans);letter-spacing:.02em;color:var(--blue);background:transparent; border:1px solid var(--line-gold);border-radius:3px;transition:.18s;} .cmp-tabs .pill:hover{background:var(--ivory-deep);} .cmp-tabs .pill[aria-selected="true"]{background:var(--blue);color:var(--ivory);border-color:var(--blue);} .cmp-hidden{display:none;} .tabs .tabp{scroll-margin-top:90px;} .tabs .tabp:focus{outline:none;} .tabs .tabp+.tabp{margin-top:38px;} /* With JS up and room for a row, the tab label replaces the panel heading. Without JS -- and for a crawler -- the heading stays and the page reads as one document. */ @media(min-width:761px){ .tabs[data-tabs-ready] .tabp-h{position:absolute;width:1px;height:1px;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .tabs[data-tabs-ready] .tabp+.tabp{margin-top:0;} } /* A six-item tablist cannot work at 375px, and the row must never push the body sideways. Below the site's mobile breakpoint the stacked form comes back regardless of JS. */ @media(max-width:760px){ .tabs .cmp-tabs{display:none!important;} .tabs[data-tabs-ready] .tabp[hidden]{display:block;} } /* Insights mega-menu: 5 columns (adds Markets in Focus) */ .nav-item[data-menu="ins"] .mega-inner{grid-template-columns:1.05fr 1fr 1fr .95fr 1.05fr;gap:26px;} @media(max-width:1080px){.nav-item[data-menu="ins"] .mega-inner{grid-template-columns:1fr;}} /* ---------- Photo carousel (listings, developments, communities) ---------- Native scroll-snap so swipe works on touch with no JS, arrows/dots are progressive enhancement. Fixed aspect box stops the layout jumping and stops portrait frames blowing out the page, which was the sizing problem. */ .pcar{position:relative;margin:0 0 6px;} .pcar-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory; gap:0;border-radius:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .pcar-track::-webkit-scrollbar{display:none;} .pcar-slide{flex:0 0 100%;scroll-snap-align:start;position:relative; aspect-ratio:3/2;background:var(--ivory-deep);} .pcar-slide img{width:100%;height:100%;object-fit:cover;display:block;} .pcar-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px; border:none;border-radius:50%;background:rgba(255,255,255,.92);color:var(--blue); font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:0 2px 10px rgba(0,26,54,.20);opacity:0;transition:opacity .18s;z-index:2;} .pcar:hover .pcar-btn,.pcar-btn:focus-visible{opacity:1;} .pcar-btn[disabled]{opacity:0!important;pointer-events:none;} .pcar-prev{left:12px;} .pcar-next{right:12px;} .pcar-count{position:absolute;right:12px;bottom:12px;background:rgba(0,26,54,.72);color:#fff; font-size:11.5px;letter-spacing:.06em;padding:4px 9px;border-radius:3px;z-index:2;} .pcar-dots{display:flex;gap:0;justify-content:center;margin-top:4px;} /* 24x24 hit area (WCAG 2.5.8) around the same 6px dot -- it was a 6x6 target. */ .pcar-dot{position:relative;width:24px;height:24px;border-radius:50%;background:none;border:none;padding:0;cursor:pointer;} .pcar-dot::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--line);} .pcar-dot[aria-current="true"]::after{background:var(--gold);} @media (max-width:760px){ .pcar-slide{aspect-ratio:4/3;} .pcar-btn{opacity:1;width:34px;height:34px;font-size:16px;} } /* In-article enquiry. Sits after the argument ends, styled as an editorial note rather than an ad: no popup, no sticky bar, nothing gated behind it. */ .article-ask{margin-top:22px;padding:26px 30px;background:var(--paper);border:1px solid var(--line);border-radius:5px;} .article-ask h3{font-family:var(--serif);font-size:21px;color:var(--blue);margin:0;} .article-ask .aa-sub{font-size:14px;color:var(--stone);margin:6px 0 16px;line-height:1.5;max-width:520px;} .article-ask .aa-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .article-ask input,.article-ask textarea{width:100%;font-family:var(--sans);font-size:16px;padding:11px 13px;border:1px solid var(--line);border-radius:3px;background:var(--ivory);color:var(--ink);} .article-ask textarea{margin-top:12px;resize:vertical;} .article-ask button{margin-top:14px;background:var(--gold);color:var(--blue);border:none;} @media(max-width:600px){.article-ask{padding:22px 20px;}.article-ask .aa-row{grid-template-columns:1fr;}} /* Homepage communities: 8 shown, the rest revealed in the SAME grid. Two separate .dev-grid blocks left no gap between the eighth card and the ninth, which is what made the expanded state look broken. Mirrors the .mkt-more pattern above. */ .dev-grid .comm-more{display:none!important;} .dev-grid.comm-open .comm-more{display:block!important;} /* ---------- Touch widths: tap targets, reading size, dark mega ---------- Dan's buyers skew 50+ and disproportionately iPhone/iPad. Footer links were 33px tall, the mega menu's links 39px; WCAG 2.5.8 wants 24x24 and the practical target for a thumb is 44x44. Applied only where a finger is the pointer -- a mouse does not need 44px and the desktop composition stays as designed. */ @media(max-width:880px){ .foot-grid a{display:flex;align-items:center;min-height:44px;font-size:14.5px;padding:4px 0;} .col-link{display:flex;align-items:center;min-height:44px;} .foot-news label{font-size:14px;} .social a,.article-author .aa-social a{width:44px;height:44px;} /* the mega is blue-deep here, not ivory: gold reads 5.29:1 on it, gold-ink does not */ .viewall{color:var(--gold);} .col-link:hover{color:var(--gold);} } /* One property card per row only once two genuinely stop fitting. */ @media(max-width:600px){.dev-grid{grid-template-columns:1fr;}} /* ---------- Form confirmation modal ---------- Netlify's own success page is an unbranded white card on a black field, and it takes the reader off the site at the exact moment they have just committed to a six-figure conversation. site.js intercepts the submit, POSTs to Netlify over fetch and shows this instead; the reader never leaves the page. If JS fails the form still submits natively, so the fallback is Netlify's page, not a dead end. Colours are existing tokens only -- blue backdrop, paper card, one gold rule. */ .fmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(0,26,54,.62);opacity:0;visibility:hidden;transition:opacity .2s;} .fmodal.open{opacity:1;visibility:visible;} .fmodal-card{position:relative;width:100%;max-width:432px;background:var(--paper); border-top:3px solid var(--gold);border-radius:3px;padding:38px 34px 32px; box-shadow:0 32px 60px -28px rgba(0,26,54,.55);transform:translateY(8px);transition:transform .2s; max-height:calc(100vh - 48px);overflow-y:auto;} .fmodal.open .fmodal-card{transform:translateY(0);} .fmodal-card h2{font-family:var(--serif);font-size:1.75rem;line-height:1.15;color:var(--blue); margin-bottom:12px;font-weight:600;} .fmodal-card p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--stone);margin-bottom:10px;} .fmodal-card p.lede{color:var(--ink);} .fmodal-close{position:absolute;top:8px;right:8px;width:44px;height:44px;display:flex; align-items:center;justify-content:center;background:none;border:0;cursor:pointer; color:var(--stone);font-size:22px;line-height:1;border-radius:3px;} .fmodal-close:hover{color:var(--blue);} .fmodal-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;} .fmodal-actions .btn{font-size:14px;padding:11px 20px;} /* The dismiss control is a real button, so it needs the ghost treatment explicitly. */ .fmodal-ghost{background:none;border:1px solid var(--line);color:var(--blue); font-family:var(--sans);font-size:14px;padding:11px 20px;border-radius:2px;cursor:pointer; letter-spacing:.02em;transition:.2s;} .fmodal-ghost:hover{border-color:var(--gold);color:var(--gold-ink);} @media(max-width:520px){ .fmodal-card{padding:32px 22px 26px;} .fmodal-card h2{font-size:1.5rem;} }