/* =========================================================================
   CONDO CURATORS · Design System
   Blue Diamond palette: coastal navy + steel blue + warm camel, on a warm
   sand canvas. Type matches the Team Asgarian system: Figtree (heading sans)
   + Newsreader italic (accent word) + Open Sans (body/UI).
   House rule: no em dashes in any user-visible string.
   Structure and premium feel derived from the reference builds in the 2026 field audit.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  --navy:#1a3656;
  --navy-2:#234565;
  --navy-3:#2f567a;
  --navy-glass:rgba(26,54,86,.80);
  --ink:#16263f;
  --ink-soft:#3a4a63;
  --muted:#5d6478;
  --muted-d:#a8b1c6;
  --gold:#c5a06a;
  --gold-2:#ddc196;
  --gold-deep:#a17e46;
  /* Canvas is a WARM neutral (sand), not a cool blue-grey. This is the
     signature-design DNA: warm editorial, never cold corporate. Matched in
     lightness to the old #f5f6fa so section rhythm is unchanged. */
  --paper:#f7f5f1;
  --cream:#faf9f5;
  --white:#ffffff;
  --line:#ebe7e0;
  --line-2:#f1ede7;
  --line-d:rgba(255,255,255,.14);
  --ok:#1f9d6b;
  --ok-bg:#e7f5ee;
  --amber:#c98a2b;
  --amber-bg:#fbf1df;
  --grey:#8a93a6;
  --grey-bg:#eceef3;
  --shadow-sm:0 2px 10px rgba(26,54,86,.07);
  --shadow:0 14px 40px rgba(26,54,86,.12);
  --shadow-lg:0 30px 70px rgba(26,54,86,.20);

  /* ---- Design-token scale (Figma) — see design-tokens.md ---- */
  /* Spacing */
  --space-0:0px;  --space-2:2px;  --space-4:4px;   --space-8:8px;   --space-12:12px;
  --space-16:16px; --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px;
  --space-64:64px; --space-80:80px; --space-96:96px;
  /* Corner radius */
  --radius-xs:2px; --radius-sm:4px; --radius-lg:8px; --radius-xl:12px;
  --radius-2xl:16px; --radius-3xl:24px; --radius-4xl:32px; --radius-full:9999px;
  /* Border width */
  --border-hair:.75px; --border:1px; --border-strong:1.5px; --border-heavy:2px;
  /* Page gutter (token-aligned) */
  --gutter:24px;
  /* Fixed-header height (topbar + nav); measured live in site.js */
  --header-h:121px;

  /* Component radii mapped onto the scale */
  --r:var(--radius-2xl);     /* cards / panels — was 14px */
  --r-lg:var(--radius-3xl);  /* large cards / feature — was 22px */
  /* ---- TYPE (matches the Team Asgarian system) ----
     Headings are the SANS (--display); the italic SERIF is reserved for the
     accent word inside a heading. That inversion is the signature move.
     Was Playfair Display + Inter: the default pick in both slots. */
  --display:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --container:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--white);color:var(--ink);
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--gold);color:var(--navy)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--space-96) 0}
.section-sm{padding:var(--space-64) 0}
.bg-paper{background:var(--paper)}
.bg-cream{background:var(--cream)}
.bg-navy{background:var(--navy);color:#fff}
.center{text-align:center}
.maxw{max-width:680px}
.center .maxw{margin-left:auto;margin-right:auto}

/* ---------- Typography ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px;
}
.kicker::before{content:"";width:26px;height:1.5px;background:var(--gold)}
.bg-navy .kicker{color:var(--gold-2)}
.kicker.solo::before{display:none}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
/* Italic-serif accent word inside a sans heading. The signature move. */
.hl,h1 .gold,h2 .gold,h3 .gold{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.display{font-size:clamp(38px,6vw,72px);font-weight:700;line-height:1.04;letter-spacing:-.02em}
.h-xl{font-size:clamp(32px,4.6vw,54px)}
.h-lg{font-size:clamp(27px,3.4vw,40px)}
.h-md{font-size:clamp(22px,2.4vw,28px)}
.lead{font-family:var(--sans);font-size:clamp(17px,1.5vw,20px);color:var(--muted);line-height:1.7;font-weight:400}
.bg-navy .lead{color:var(--muted-d)}
.eyebrow-gold{color:var(--gold-deep)}
.serif-italic{font-style:italic}
.section-head{margin-bottom:var(--space-48)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em;
  /* Pill buttons are the signature-design tell. The ribbons, status chips and
     hero badge were already pills; the primary button was a 12px rectangle. */
  padding:16px 32px;border-radius:var(--radius-full);border:var(--border-strong) solid transparent;
  transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .25s,border-color .2s;
  white-space:nowrap;cursor:pointer;
}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#23180a;box-shadow:0 10px 26px rgba(161,126,70,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(161,126,70,.4)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-3);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{border-color:var(--navy);background:var(--navy);color:#fff;transform:translateY(-2px)}
.bg-navy .btn-outline,.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.bg-navy .btn-outline:hover,.btn-outline-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-lg{padding:16px 40px;font-size:16px}
.btn-block{width:100%}
.link-gold{color:var(--gold-deep);font-weight:600;display:inline-flex;align-items:center;gap:7px;
  border-bottom:1.5px solid transparent;padding-bottom:1px;transition:border-color .2s,gap .2s}
.link-gold:hover{border-color:var(--gold);gap:11px}

/* ---------- Top utility bar ---------- */
.topbar{background:var(--navy);color:#d8deec;font-size:13px;overflow:hidden}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:42px;gap:20px;
  transition:height .3s var(--ease),opacity .25s var(--ease)}
.topbar a{color:#d8deec;transition:color .2s}
.topbar a:hover{color:var(--gold-2)}
.topbar .tb-left{display:flex;gap:26px;align-items:center}
.topbar .tb-item{display:flex;align-items:center;gap:8px}
.topbar svg{width:14px;height:14px;flex-shrink:0;stroke:var(--gold-2)}
.topbar .tb-right{display:flex;gap:14px;align-items:center}
.topbar .tb-soc{display:flex;gap:12px}
@media(max-width:880px){.topbar .tb-item.hours,.topbar .tb-soc{display:none}}
/* Below this the area label + phone fight for space on one 42px line and wrap.
   Keep only the tappable phone and center it. */
@media(max-width:600px){.topbar .tb-left{display:none}.topbar .wrap{justify-content:center}}

/* ---------- Header / Nav ---------- */
/* Header overlays the hero/pagehead so a transparent nav reveals the dark
   section behind it (not the white page body). site.js sets --header-h and
   toggles .scrolled on #site-header after a small scroll. */
#site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:box-shadow .3s var(--ease)}
#site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav{position:relative;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
/* brand left · menu centered · CTA right */
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:78px;gap:28px;
  transition:height .3s var(--ease)}
/* Desktop: header is transparent over the dark hero/pagehead until you hover it
   or scroll (then it turns solid white and shrinks for a compact sticky bar). */
@media(min-width:1041px){
  #site-header:not(:hover):not(.scrolled) .nav{
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom-color:transparent;box-shadow:none;
  }
  #site-header:not(:hover):not(.scrolled) .brand{color:#fff}
  #site-header:not(:hover):not(.scrolled) .nav-links>li>a{color:rgba(255,255,255,.9)}
  #site-header:not(:hover):not(.scrolled) .nav-links>li.active>a{color:#fff}
  /* Compact once scrolled: collapse the utility bar and shrink the nav row */
  #site-header.scrolled .topbar .wrap{height:0;opacity:0}
  #site-header.scrolled .nav .wrap{height:60px}
  #site-header.scrolled .nav-cta{padding:9px 20px;font-size:14px}
}
/* The logo is the supplied horizontal lockup, inlined whole, so the type and
   the hairlines live in the SVG rather than being rebuilt in CSS. Colour is the
   only thing CSS controls: the chevron pair and the type are currentColor, so
   this one property switches the lockup to the reversed artwork. Gold is fixed
   inside the file. */
.brand{display:flex;align-items:center;flex-shrink:0;color:var(--navy);transition:color .3s var(--ease)}
.brand .logo-lockup{width:196px;height:auto;flex-shrink:0;display:block}
@media(max-width:1040px){.brand .logo-lockup{width:168px}}
.nav-links{display:flex;align-items:center;gap:6px;justify-self:center}
.nav-links>li{position:relative;list-style:none}
.nav-links>li>a{display:flex;align-items:center;gap:5px;padding:9px 12px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--ink-soft);border-radius:8px;transition:color .2s,background .2s}
.nav-links>li>a:hover{color:var(--navy)}
.nav-links>li.active>a{color:var(--navy);font-weight:600}
.nav-links .caret{width:11px;height:11px;stroke:currentColor;transition:transform .25s}
.nav-links>li:hover .caret{transform:rotate(180deg)}
/* dropdown */
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-2xl);box-shadow:var(--shadow);padding:12px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s var(--ease);z-index:120}
.nav-links>li:hover .dropdown,.dropdown:hover{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:10px;transition:background .18s}
.dropdown a:hover{background:var(--paper)}
.dropdown .di-ic{width:34px;height:34px;border-radius:8px;flex-shrink:0;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:var(--gold-2);font-size:15px}
.dropdown .di-t{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.dropdown .di-s{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
.nav-cta{justify-self:end;transition:padding .3s var(--ease),font-size .3s var(--ease),background .2s,box-shadow .25s,transform .25s var(--ease)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-xl);background:#fff;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.nav-toggle span{width:20px;height:2px;background:var(--navy);border-radius:2px;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1040px){
  /* The closed off-canvas drawer (.nav-links, position:fixed, translateX(100%))
     sits a full viewport-width off the right edge. body{overflow-x:hidden} does
     NOT clip a fixed child on real mobile browsers, so the page becomes pannable
     and the hero shifts under the fixed header. Clip at the root too — scoped to
     mobile, where no sticky elements are active, so it can't break them. */
  html{overflow-x:hidden}
  /* backdrop-filter on .nav makes it the containing block for position:fixed
     children, which collapses/offsets the mobile menu panel. Drop it on mobile. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  /* back to a simple bar on mobile: brand left, CTA + menu toggle right */
  .nav .wrap{display:flex;align-items:center;gap:14px}
  .brand{margin-right:auto}
  /* Right-anchored slide-out drawer. Explicit right/left/width (not inset:0 0)
     so the desktop grid's justify-self can't shrink-wrap it mid-page. */
  .nav-links{position:fixed;top:var(--header-h);right:0;bottom:0;left:auto;width:min(380px,100%);
    justify-self:auto;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;padding:20px 24px;overflow-y:auto;transform:translateX(100%);
    transition:transform .3s var(--ease);border-top:1px solid var(--line);box-shadow:-12px 0 40px rgba(26,54,86,.16)}
  .nav-links.open{transform:translateX(0)}
  .nav-links>li>a{padding:15px 6px;font-size:17px;border-bottom:1px solid var(--line-2);border-radius:0}
  .nav-links .caret{margin-left:auto}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    min-width:0;padding:4px 0 10px 10px;display:none}
  .nav-links>li.mobile-open .dropdown{display:block}
  .nav-cta{justify-self:auto;margin:0}
  .nav-toggle{display:flex}
}

/* ---------- Hero (home, full-bleed) ---------- */
/* Home hero fills the full viewport ("full page"). The 1515/NORTHCORE detail
   heroes set an inline min-height:600px which overrides this, so only the home
   hero (no inline min-height) gets 100vh. Content taller than the viewport just
   grows the hero past 100vh, so short screens stay content-driven. */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden;padding-top:var(--header-h)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,17,38,.62) 0%,rgba(8,17,38,.48) 45%,rgba(8,17,38,.82) 100%)}
/* Crossfade hero slideshow: first <img> is the LCP base (opacity 1); the rest fade over it. */
.hero-bg.slides{background:#1a3656}
.hero-bg.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg.slides img+img{opacity:0;animation:heroSlide 16s ease-in-out infinite}
.hero-bg.slides img:nth-child(2){animation-delay:3s}
.hero-bg.slides img:nth-child(3){animation-delay:9s}
@keyframes heroSlide{0%,100%{opacity:0}6%,28%{opacity:1}34%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-bg.slides img+img{display:none}}
.hero-inner{position:relative;z-index:2;width:100%;padding:96px 0}
.hero .badge{display:inline-flex;align-items:center;gap:9px;background:rgba(194,162,90,.16);
  border:1px solid rgba(221,193,150,.5);color:var(--gold-2);font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:40px;margin-bottom:22px;backdrop-filter:blur(6px)}
.hero .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 0 0 rgba(217,189,121,.7);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,189,121,.5)}70%{box-shadow:0 0 0 10px rgba(217,189,121,0)}100%{box-shadow:0 0 0 0 rgba(217,189,121,0)}}
.hero h1{color:#fff;max-width:16ch}
.hero h1 .gold{color:var(--gold-2);font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:0}
.hero p.sub{font-size:clamp(17px,1.6vw,20px);color:#e3e8f2;max-width:600px;margin:22px 0 34px;line-height:1.7}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}

/* search bar */
.searchbar{margin-top:32px;background:rgba(255,255,255,.96);border-radius:var(--radius-2xl);padding:8px;
  display:flex;gap:8px;max-width:680px;box-shadow:var(--shadow-lg)}
.searchbar input{flex:1;border:none;outline:none;background:transparent;padding:14px 18px;font-size:15.5px;color:var(--ink);font-family:inherit}
.searchbar input::placeholder{color:var(--muted)}
.searchbar .btn{flex-shrink:0}
@media(max-width:600px){.searchbar{flex-direction:column}.searchbar input{padding:13px 14px}}

/* hero stats row */
.hero-stats{display:flex;flex-wrap:wrap;gap:38px;margin-top:42px}
.hero-stats .hs{display:flex;flex-direction:column}
.hero-stats .hs .n{font-family:var(--sans);font-size:34px;font-weight:700;color:var(--gold-2);line-height:1}
.hero-stats .hs .l{font-size:13px;color:#cdd5e4;margin-top:6px;letter-spacing:.02em}

/* ---------- Page header (interior) ---------- */
.pagehead{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding-top:var(--header-h)}
.pagehead::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 420px at 85% -10%,rgba(194,162,90,.16),transparent 60%),
  radial-gradient(700px 400px at 0% 120%,rgba(26,53,99,.6),transparent 60%)}
.pagehead .wrap{position:relative;z-index:2;padding:var(--space-64) var(--gutter) var(--space-80)}
.pagehead.with-img .ph-bg{position:absolute;inset:0;z-index:0;opacity:.28}
.pagehead.with-img .ph-bg img{width:100%;height:100%;object-fit:cover}
.breadcrumb{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted-d);margin-bottom:20px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--gold-2)}
.breadcrumb .sep{opacity:.5}
.pagehead h1{max-width:18ch;color:#fff}
.pagehead p{color:var(--muted-d);max-width:620px;margin-top:18px;font-size:18px}

/* ---------- Stat strip ---------- */
.statstrip{background:var(--navy);color:#fff}
.statstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:var(--space-48) var(--gutter)}
.statstrip .st{text-align:center;position:relative}
.statstrip .st:not(:last-child)::after{content:"";position:absolute;right:-9px;top:14%;height:72%;width:1px;background:var(--line-d)}
.statstrip .st .n{font-family:var(--sans);font-size:clamp(30px,3.4vw,46px);font-weight:700;color:var(--gold-2);line-height:1}
.statstrip .st .l{font-size:13.5px;color:#c4ccdd;margin-top:8px}
@media(max-width:720px){.statstrip .wrap{grid-template-columns:1fr 1fr;gap:30px 18px}.statstrip .st:nth-child(2)::after{display:none}}

/* ---------- Project cards grid ---------- */
.grid{display:grid;gap:var(--space-24)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(194,162,90,.4)}
.pcard-img{position:relative;aspect-ratio:16/11;overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.ribbon{position:absolute;top:14px;left:14px;z-index:2;background:linear-gradient(135deg,var(--navy-3),var(--navy));
  color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 14px;border-radius:30px;display:flex;align-items:center;gap:7px;box-shadow:0 6px 18px rgba(26,54,86,.28)}
.ribbon .star{color:var(--gold-2)}
.status{position:absolute;top:14px;right:14px;z-index:2;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:6px 12px;border-radius:30px;backdrop-filter:blur(4px)}
.status.available{background:var(--ok);color:#fff}
.status.coming{background:var(--amber);color:#fff}
.status.sold{background:rgba(26,54,86,.7);color:#cfd6e4}
.pcard-body{padding:var(--space-24) var(--space-24) var(--space-24);display:flex;flex-direction:column;flex:1}
.pcard-loc{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:7px}
.pcard-loc svg{width:14px;height:14px;stroke:var(--gold-deep)}
.pcard h3{font-size:24px;margin-bottom:4px}
.pcard .dev{font-size:13px;color:var(--muted);margin-bottom:18px}
.pcard .dev a{color:var(--gold-deep);font-weight:600}
.pcard-meta{display:flex;flex-direction:column;gap:11px;margin-bottom:22px;padding-top:18px;border-top:1px solid var(--line-2)}
/* Block (not flex) so the text + inline <b> values flow and wrap as normal
   prose; the icon is positioned out of flow. Flex made each text run/<b> a
   separate non-wrapping item, so longer metas (e.g. "$1,500/mo") clipped. */
.pcard-meta .m{position:relative;padding-left:41px;font-size:14px;color:var(--ink-soft);line-height:1.5}
.pcard-meta .m .mi{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold-deep)}
.pcard-meta .m b{color:var(--ink);font-weight:600}
.pcard-price{font-family:var(--sans);font-size:26px;font-weight:700;color:var(--navy)}
.pcard-price small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}
.pcard-cta{display:flex;gap:10px;margin-top:auto}
.pcard-cta .btn{flex:1;padding:13px 16px;font-size:14px}

/* featured (large split card) */
.feature{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.feature:hover img{transform:scale(1.05)}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,17,38,.9))}
.feature-body{position:relative;z-index:2;padding:var(--space-32) var(--space-32);color:#fff;width:100%}
.feature-body .status{position:static;display:inline-flex;margin-bottom:14px}
.feature-body h3{color:#fff;font-size:30px;margin-bottom:8px}
.feature-body p{color:#dde3ef;font-size:15px;max-width:46ch;margin-bottom:18px}

/* ---------- Split section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.narrow{gap:48px}
.split-img{border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--shadow);aspect-ratio:4/3}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img.tall{aspect-ratio:3/4}
.split .floattag{position:absolute;left:24px;bottom:24px;background:var(--navy-glass);backdrop-filter:blur(8px);
  border:1px solid rgba(221,193,150,.4);border-radius:var(--radius-2xl);padding:16px 24px;color:#fff;max-width:240px}
.split .floattag .ft-n{font-family:var(--sans);font-size:24px;color:var(--gold-2);line-height:1}
.split .floattag .ft-l{font-size:12px;color:#cdd5e4;margin-top:5px}
/* .split.ov: image col stretches to section height (used on 1515 overview) */
@media(min-width:921px){.split.ov{align-items:stretch}.split.ov .split-img{height:100%}.split.ov .split-img img{height:100%;object-fit:cover}}

/* numbered reasons list */
.reasons{display:flex;flex-direction:column;gap:24px;margin-top:8px}
.reason{display:flex;gap:20px}
.reason .rn{flex-shrink:0;width:50px;height:50px;border-radius:13px;background:var(--navy);
  color:var(--gold-2);font-family:var(--sans);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center}
.reason h4{font-family:var(--sans);font-size:18px;font-weight:700;margin-bottom:5px;color:var(--ink)}
.reason p{font-size:15px;color:var(--muted);line-height:1.65}

/* ---------- Feature/benefit grid ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.benefit{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--space-32) var(--space-32);transition:transform .25s var(--ease),box-shadow .25s}
.benefit:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bg-paper .benefit{background:#fff}

/* Search result summary on the projects grid. Injected by SiteInteractions when
   a ?q= filter is active, so a search always reports what it did. */
.search-summary{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;
  margin:0 0 var(--space-32);padding:14px 18px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-2xl);
  font-size:15px;color:var(--ink-soft);
}
.search-summary a{white-space:nowrap}
.benefit .bi{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,var(--navy),var(--navy-3));
  display:flex;align-items:center;justify-content:center;color:var(--gold-2);margin-bottom:18px}
.benefit .bi svg{width:24px;height:24px;stroke:var(--gold-2)}
.benefit h4{font-family:var(--sans);font-size:18px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.benefit p{font-size:14.5px;color:var(--muted);line-height:1.65}
/* Dark (navy) section benefit cards */
.bg-navy .benefit{background:rgba(255,255,255,.04);border-color:var(--line-d)}
.bg-navy .benefit h4{color:#fff}
.bg-navy .benefit p{color:var(--muted-d)}

/* ---------- Steps (how it works) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-24)}
.step{position:relative;padding:8px}
.step .sn{width:56px;height:56px;border-radius:50%;border:2px solid var(--gold);color:var(--gold-deep);
  font-family:var(--sans);font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:#fff}
.bg-navy .step .sn{background:transparent;color:var(--gold-2)}
.step h4{font-family:var(--sans);font-size:18px;font-weight:700;margin-bottom:8px}
.step p{font-size:14.5px;color:var(--muted)}
.bg-navy .step p{color:var(--muted-d)}
.step .conn{position:absolute;top:28px;left:64px;right:-14px;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
@media(max-width:860px){.step .conn{display:none}}

/* ---------- Market data cards ---------- */
.datacards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-24)}
.datacard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--space-32) var(--space-24);border-top:3px solid var(--gold)}
.bg-navy .datacard{background:rgba(255,255,255,.04);border-color:var(--line-d);border-top-color:var(--gold)}
.datacard .dn{font-family:var(--sans);font-size:clamp(32px,3.6vw,46px);font-weight:700;color:var(--navy);line-height:1;margin-bottom:10px}
.bg-navy .datacard .dn{color:var(--gold-2)}
.datacard h4{font-family:var(--sans);font-size:15px;font-weight:700;margin-bottom:8px;line-height:1.3}
.datacard p{font-size:13px;color:var(--muted);line-height:1.6}
.bg-navy .datacard p{color:var(--muted-d)}

/* Block source notes / disclaimers (StatGrid sourceNote, PriceTable,
   CtaBand and Gallery note). These used to set color inline in
   RenderBlocks.tsx, so NO stylesheet rule could reach them without
   !important, and on navy they rendered --muted #5d6478 = 2.09:1.
   At 12px there is no large-text exemption, so that failed WCAG 1.4.3,
   and this is the COMPLIANCE text: sources, "prices vary by floor and
   release", "figures are maximums, not guarantees". Colour now lives
   here and follows the same .bg-navy pattern as .lead/.step p/.datacard p. */
.section-note{font-size:12px;line-height:1.7;color:var(--muted)}
.bg-navy .section-note,
.formsection .section-note{color:var(--muted-d)}  /* 5.73:1 on #1a3656 */
.datacard sup{color:var(--gold-deep);font-size:10px;font-weight:700}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
.gallery .g{border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;position:relative}
.gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery .g:hover img{transform:scale(1.07)}
.gallery .g.wide{grid-column:span 2}
.gallery .g.tall{grid-row:span 2;aspect-ratio:auto}

/* ---------- Price table ---------- */
.pricetable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.pricetable th,.pricetable td{padding:18px 22px;text-align:left;font-size:15px}
.pricetable thead th{background:var(--navy);color:#fff;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--sans)}
.pricetable tbody tr{border-bottom:1px solid var(--line-2)}
.pricetable tbody tr:last-child{border-bottom:none}
.pricetable tbody tr:hover{background:var(--paper)}
.pricetable .unit{font-weight:600;color:var(--ink)}
.pricetable .from{font-family:var(--sans);font-weight:700;color:var(--navy);font-size:18px}
.pricetable .compare{color:var(--muted)}
.pricetable .save{color:var(--ok);font-weight:600}
.pricetable .save .pill{background:var(--ok-bg);padding:3px 9px;border-radius:20px;font-size:12.5px}
@media(max-width:680px){.pricetable thead{display:none}.pricetable tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:16px 18px}.pricetable td{padding:2px 0}.pricetable td::before{content:attr(data-l);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}}

/* spec list */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-16) var(--space-32)}
.spec{display:flex;align-items:flex-start;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.spec .si{width:38px;height:38px;border-radius:10px;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold-deep)}
.spec .si svg{width:18px;height:18px;stroke:var(--gold-deep)}
.spec>span:last-child{display:flex;flex-direction:column;gap:2px}
.spec .st{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.spec .sv{display:block;font-size:15.5px;color:var(--ink);font-weight:600;font-family:var(--sans);line-height:1.3}
.spec .sv a:hover{color:var(--gold-deep)}

/* ---------- FAQ accordion ---------- */
.faq{max-width:880px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa-q{width:100%;background:none;border:none;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;font-family:var(--serif);font-size:clamp(18px,2vw,21px);font-weight:600;color:var(--ink);transition:color .2s}
.qa-q:hover{color:var(--gold-deep)}
.qa-ic{flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.qa-ic svg{width:20px;height:20px;stroke:var(--gold-deep)}
.qa.open .qa-ic{transform:rotate(180deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.qa-a-in{padding:0 4px 24px;color:var(--muted);font-size:15.5px;line-height:1.75;max-width:90%}

/* ---------- Register / Lead form ---------- */
.formsection{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.formsection::before{content:"";position:absolute;top:-150px;right:-120px;width:480px;height:480px;background:radial-gradient(circle,rgba(194,162,90,.16),transparent 70%)}
.formsection::after{content:"";position:absolute;bottom:-160px;left:-130px;width:480px;height:480px;background:radial-gradient(circle,rgba(26,53,99,.7),transparent 70%)}
.formgrid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 480px;gap:var(--space-64);align-items:center}
.form-benefits{display:flex;flex-direction:column;gap:16px;margin-top:var(--space-32)}
.fb{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;color:#dbe1ee}
.fb .fbi{width:34px;height:34px;border-radius:9px;background:rgba(194,162,90,.16);color:var(--gold-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fb .fbi svg{width:17px;height:17px;stroke:var(--gold-2)}
.card{background:#fff;border-radius:var(--r-lg);padding:var(--space-32) var(--space-32);color:var(--ink);box-shadow:var(--shadow-lg)}
.card .badge-line{display:inline-flex;align-items:center;gap:7px;background:var(--paper);color:var(--gold-deep);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:30px;margin-bottom:14px}
.card h3{font-size:26px;margin-bottom:6px}
.card .cs{font-size:14.5px;color:var(--muted);margin-bottom:24px}
.fg{margin-bottom:15px}
.fg label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.fg input,.fg select,.fg textarea{width:100%;background:var(--paper);border:var(--border-strong) solid var(--line);border-radius:var(--radius-lg);
  padding:14px 16px;font-size:15px;color:var(--ink);font-family:inherit;outline:none;transition:border-color .2s,background .2s}
.fg input::placeholder,.fg textarea::placeholder{color:var(--grey)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);background:#fff}
.fg textarea{resize:vertical;min-height:90px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent{display:flex;gap:11px;align-items:flex-start;margin:14px 0 6px;font-size:12.5px;color:var(--muted);line-height:1.55}
.consent input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--gold-deep);cursor:pointer}
.submit{width:100%;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#23180a;font-size:16px;font-weight:700;
  padding:16px;border:none;border-radius:var(--radius-xl);margin-top:8px;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 26px rgba(161,126,70,.3)}
.submit:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(161,126,70,.42)}
.fineprint{font-size:11px;color:var(--grey);text-align:center;margin-top:14px;line-height:1.6}
.fineprint a{color:var(--gold-deep);text-decoration:underline}
.form-success{display:none;text-align:center;padding:30px 6px}
.form-success .ic{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-success .ic svg{width:30px;height:30px;stroke:var(--ok)}
.form-success h3{font-size:26px;margin-bottom:10px;color:var(--navy)}
.form-success p{color:var(--muted)}

/* ---------- Trust / logos ---------- */
.trustbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 44px}
.trustbar .tlogo{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink-soft);opacity:.7}
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--space-32);box-shadow:var(--shadow-sm)}
.testi .stars{color:var(--gold);font-size:16px;letter-spacing:2px;margin-bottom:14px}
.testi p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;color:var(--ink);margin-bottom:18px}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .who .av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--serif)}
.testi .who .wn{font-weight:700;font-size:14.5px}
.testi .who .wd{font-size:13px;color:var(--muted)}

/* ---------- CTA band ---------- */
.ctaband{position:relative;background:var(--navy);color:#fff;overflow:hidden;border-radius:var(--r-lg)}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 80% 0%,rgba(194,162,90,.2),transparent 60%)}
.ctaband-in{position:relative;z-index:2;padding:var(--space-64) var(--space-48);display:flex;align-items:center;justify-content:space-between;gap:var(--space-32);flex-wrap:wrap}
.ctaband h2{color:#fff;max-width:18ch}
.ctaband p{color:var(--muted-d);margin-top:8px;max-width:46ch}

/* ---------- Footer ---------- */
footer.site{background:#081226;color:#aeb7ca;padding:var(--space-64) 0 0}
footer.site .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-40);padding-bottom:var(--space-48);border-bottom:1px solid var(--line-d)}
footer.site .brand{color:#fff}
footer.site .fabout{font-size:14px;line-height:1.7;margin:18px 0;max-width:34ch}
footer.site .fsoc{display:flex;gap:12px}
footer.site .fsoc a{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;transition:.2s}
footer.site .fsoc a:hover{background:var(--gold);border-color:var(--gold)}
footer.site .fsoc a:hover svg{stroke:var(--navy)}
footer.site .fsoc svg{width:17px;height:17px;stroke:#aeb7ca;transition:stroke .2s}
footer.site h5{color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
footer.site ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer.site ul a{font-size:14px;transition:color .2s}
footer.site ul a:hover{color:var(--gold-2)}
footer.site .fcontact .fc{display:flex;gap:11px;align-items:flex-start;font-size:14px;margin-bottom:14px}
footer.site .fcontact svg{width:16px;height:16px;stroke:var(--gold-2);flex-shrink:0;margin-top:3px}
footer.site .legal{padding:var(--space-24) 0 var(--space-32);font-size:11.5px;color:#76819a;line-height:1.75}
footer.site .legal a{color:#9aa4ba;text-decoration:underline}
footer.site .legal .lrow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:18px;margin-top:18px;border-top:1px solid var(--line-d)}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:#fff;border-top:1px solid var(--line);
  padding:11px 20px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 22px rgba(26,54,86,.1);gap:10px}
.sticky-cta .btn{flex:1;padding:14px}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1040px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .datacards,.steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .section{padding:var(--space-64) 0}
  /* !important so inline desktop grid-template-columns (set per-page) can't keep
     multi-column layouts on mobile and overflow/clip the viewport. */
  .split{grid-template-columns:1fr !important;gap:var(--space-32)}
  .split-img{order:-1}
  .grid-3,.grid-2{grid-template-columns:1fr !important}
  .benefits{grid-template-columns:1fr !important}
  .formgrid{grid-template-columns:1fr !important;gap:var(--space-32)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .g.tall{grid-row:span 1;aspect-ratio:1/1}
  .ctaband-in{padding:var(--space-48) var(--space-32)}
  footer.site .fgrid{grid-template-columns:1fr 1fr;gap:var(--space-32)}
  .nav-cta{display:none}
  .sticky-cta{display:flex}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:560px){
  .wrap{padding:0 var(--space-16)}
  .benefits,.datacards,.steps,.specs{grid-template-columns:1fr !important}
  .frow{grid-template-columns:1fr !important}
  footer.site .fgrid{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  /* Safety so long single-word stats (e.g. "Same-day", "GTA-wide") can break
     rather than overflow a narrow 2-up stat column on small phones */
  .statstrip .st .n{overflow-wrap:break-word}
  /* Full-width hero CTAs so they align to the page gutter and the sticky bar */
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%;justify-content:center}
  /* Long CTA-band buttons (white-space:nowrap by default) overflow the band on
     narrow screens — let them wrap and fill the width instead of clipping. */
  .ctaband-in{padding:var(--space-40) var(--space-24)}
  .ctaband-in .btn{white-space:normal;width:100%}
}

/* =========================================================================
   CMS richtext adaptations (Payload only — NOT present on the static site)
   The static HTML uses direct elements like <p class="sub">; the CMS renderer
   wraps rich text as <div class="x"><div class="payload-richtext"><p>…</p></div>.
   Element-specific selectors (e.g. `.hero p.sub`) therefore miss. These rules
   re-apply the same visual treatment with element-agnostic selectors so the
   CMS output matches the reference byte-for-byte visually.
   ========================================================================= */
/* Hero / PageHeader subhead: mirror `.hero p.sub` (the CMS emits
   <div class="sub"><div class="payload-richtext"><p>). */
.hero .sub{font-size:clamp(17px,1.6vw,20px);color:#e3e8f2;max-width:600px;margin:22px 0 34px;line-height:1.7}
.hero .sub>.payload-richtext>p{margin:0}
/* Inter-paragraph spacing inside multi-paragraph rich text. The global reset
   (`*{margin:0}`) zeroes paragraph margins, so multi-<p> blocks (footer legal,
   some FAQ answers, source notes) would collapse with no gap. Only spaces
   *subsequent* paragraphs, so single-paragraph blocks are unaffected. */
.payload-richtext>p+p{margin-top:1em}

/* Legal document (privacy page). On the static site these live in a page-inline
   <style>; the CMS has no per-page styles, so they go here. Mirrors
   website/privacy.html exactly. The .legaldoc wrapper is emitted by the
   richText block when `legalHtml` is set. */
.legaldoc{max-width:820px;margin:0 auto}
.legaldoc h2{font-size:24px;margin:40px 0 12px}
.legaldoc h3{font-family:var(--sans);font-size:16px;font-weight:700;margin:24px 0 8px}
.legaldoc p,.legaldoc li{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-bottom:12px}
.legaldoc ul{padding-left:24px;margin-bottom:12px}
.legaldoc .updated{color:var(--muted);font-size:13px}
.legaldoc .note{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;font-size:14px;color:var(--muted)}

/* Project card meta icon: constrain SVG to 16px to match reference (comparable to .spec .si svg and .benefit .bi svg rules above) */
.pcard-meta .m .mi svg{width:16px;height:16px;stroke-width:2}

/* HST calculator page disclaimers (page-inline <style> on the static site). */
.calc-note{font-size:12px;color:var(--muted);line-height:1.7;margin-top:16px}

/* ── Readability overrides (CMS) ───────────────────────────────────────────
   Big display numbers + $ signs were a serif; the serif $ glyph reads poorly.
   Standalone number displays use the sans face with tabular figures. Also:
   headings inherit color:var(--ink) (dark), which on the navy .formsection
   made the lead-form heading invisible, so it is forced white.
     Same trap, wider: .lead/.fineprint/.st keep their greys (--muted #5d6478,
     --grey #8a93a6) which are 2.09:1 and 3.53:1 on the navy #1a3656 and fail
     WCAG AA (needs 4.5). Lifted to #c9d1e0 = 8.02:1 (AAA), scoped to
     .formsection so the light sections are untouched. */
.hero-stats .hs .n,
.datacard .dn{font-family:var(--sans);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.formsection h2{color:#fff}
.formsection .lead,
.formsection .fineprint,
.formsection .spec .st{color:#c9d1e0}
.formsection .spec .sv{color:#fff}

/* ── Section grouping helpers ──────────────────────────────────────────────
   Consecutive CMS blocks that the reference packs into ONE <section> can be
   visually merged by setting tightTop/tightBottom on the seed block. These
   classes remove the top or bottom padding so consecutive same-bg blocks
   flow as one visual section without the doubled ~192px gap. */
.section.tight-top{padding-top:0}
.section.tight-bottom{padding-bottom:0}