/* ============================================================
   Total Environment Butterfly of Dreams — on Bootstrap 6
   Theme mirrors total-environment.com: white pages, a black footer and a
   minimal coral accent. Total Environment sets type in Haas Unica, a
   licensed face; Work Sans is the closest free match and is self-hosted
   under /fonts (latin + latin-ext, variable 400-700).

   Bootstrap 6 is loaded first (assets/css/bootstrap.min.css, trimmed to
   the classes these pages use by tools/assets.mjs). This file keeps the
   site's own design:
     1. the self-hosted font;
     2. the palette, and Bootstrap's design tokens (--bs-*) pointed at it;
     3. a. the element defaults the pages were designed on, in
           Bootstrap's "reboot" layer, so Bootstrap's component classes
           override them as any class did before;
        then in the "custom" layer Bootstrap reserves for a site's styles
        (so a Bootstrap utility class on an element still wins):
        b. Bootstrap's navbar, drawer, accordion, breadcrumb, figure,
           buttons and form fields reset to this design's defaults,
        c. the site's layout and components,
        d. Bootstrap's buttons in this design.
   ============================================================ */

@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/work-sans-latin-ext-400-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/work-sans-latin-400-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* 2. The palette, and Bootstrap's tokens pointed at it. Outside the layers,
   because Bootstrap declares its own tokens outside them. Plain colours, not
   light-dark() pairs: the site keeps its light look whatever the visitor's
   system setting. */
:root,
:host{
  /* Total Environment theme: ink is near-black, the accent is Total
     Environment's coral: #ef7f7a for decoration, darkened to #b04640
     wherever it carries text (5.5:1 on white). Footer is black, as on
     total-environment.com. (The names are the template's.) */
  --navy:#111111;
  --navy-2:#000000;
  --blue:#b04640;
  --coral:#ef7f7a;
  --grey-blue:#f4f4f4;
  --grey-blue-2:#f6f6f6;
  --ink:#111111;
  --white:#ffffff;
  --off-white:#f7f7f7;
  --text:#2b2b2b;
  --text-soft:#5f5f5f;
  --line:#e6e6e6;
  --line-navy:rgba(255,255,255,.14);
  --gold:#c8a04e;
  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --max:1200px;
  --gutter:clamp(1.15rem,4vw,3.5rem);
  --radius:6px;
  --radius-sm:4px;
  --shadow:0 10px 40px -12px rgba(0,0,0,.16);
  --shadow-sm:0 4px 16px -6px rgba(0,0,0,.14);

  color-scheme:light;
  /* Bootstrap reserves the scrollbar's width on every page; these pages
     were designed without that. */
  scrollbar-gutter:auto;

  --bs-body-font-family:var(--font);
  --bs-body-font-size:17px;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.65;
  --bs-fg-body:var(--text);
  --bs-bg-body:var(--white);
  --bs-heading-font-weight:600;
  --bs-heading-line-height:1.12;
  --bs-heading-color:var(--navy);
  --bs-link-color:inherit;
  --bs-link-hover-color:inherit;
  --bs-link-decoration:none;
  --bs-link-underline-offset:auto;
  --bs-border-color:var(--line);
  --bs-focus-ring-color:var(--blue);

  /* Black buttons with white text; near-black #000 on hover. */
  --bs-primary-base:var(--navy);
  --bs-primary-fg:var(--navy);
  --bs-primary-fg-emphasis:var(--navy-2);
  --bs-primary-bg:var(--navy);
  --bs-primary-bg-subtle:var(--grey-blue);
  --bs-primary-bg-muted:var(--line);
  --bs-primary-border:var(--navy);
  --bs-primary-focus-ring:var(--blue);
  --bs-primary-contrast:#fff;
}

/* ---------- a. Element defaults: the site's own reboot ----------
   In Bootstrap's reboot layer, after Bootstrap's own rules there: element
   rules, which Bootstrap's component classes override, as a class always
   did over these. First the browser defaults these pages were designed on
   where Bootstrap's reboot changes them and the design never set its own,
   then the site's element rules. */
@layer reboot{
figure{margin:revert;}
b{font-weight:revert;}
input,button,select,optgroup,textarea{margin:revert;font-family:revert;font-size:revert;line-height:revert;}
button{border-radius:revert;}
label{display:revert;}
summary{display:revert;cursor:revert;}
img,svg{vertical-align:revert;}
iframe{color-scheme:revert;}
table{caption-side:revert;}
th{text-align:revert;}
body{-webkit-tap-highlight-color:revert;}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}}

body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--font);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

h1,h2,h3,h4{font-weight:700;line-height:1.12;margin:0 0 .5em;color:var(--navy);letter-spacing:-.02em;}
h1{font-size:clamp(2.15rem,5.2vw,3.6rem);}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem);}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);}
h4{font-size:1.1rem;font-weight:600;}
p{margin:0 0 1.1em;}
strong{font-weight:600;color:var(--navy);}

table{width:100%;border-collapse:collapse;min-width:520px;font-size:.95rem;}
thead th{background:var(--navy);color:#fff;font-weight:600;text-align:left;padding:.95rem 1.15rem;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;}
tbody td{padding:.9rem 1.15rem;border-bottom:1px solid var(--line);color:var(--text);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:nth-child(even){background:var(--off-white);}

body{padding-bottom:0;}

/* Total Environment theme */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.015em;}
}

@layer custom{

/* ---------- b. Bootstrap's components reset to this design ----------
   :where() keeps these at zero specificity, so every rule of the site's
   own, which follows, wins wherever it says otherwise. */
:where(.navbar){
  --bs-navbar-padding-y:0;
  --bs-navbar-min-height:0;
  display:block;
  flex-wrap:nowrap;
  padding:0;
  min-height:0;
  container-type:normal;
  color:inherit;
  background-color:transparent;
}
:where(.navbar-brand){
  padding:0;
  margin:0;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  white-space:normal;
}
:where(.navbar-brand:hover,.navbar-brand:focus){color:inherit;}
:where(.nav){
  --bs-nav-gap:0;
  --bs-nav-link-hover-bg:transparent;
  flex-wrap:nowrap;
}
:where(.nav-link){
  display:block;
  gap:normal;
  padding:0;
  font-weight:inherit;
  color:inherit;
  white-space:normal;
  border:0;
  border-radius:0;
  transition:none;
}
:where(.nav-link:hover,.nav-link:focus,.nav-link:focus-visible){color:inherit;background-color:transparent;}
:where(.breadcrumb-divider){margin-inline:0;}
/* Bootstrap's grid makes each grid a size container, for its container-query
   column classes, which these pages do not use; a grid then no longer widens
   to fit what is in it, as these grids were designed to. */
:where(.grid){container-type:normal;}
:where(.figure){display:block;gap:normal;}
:where(.accordion){
  --bs-accordion-border-width:0;
  --bs-accordion-border-radius:0;
  --bs-accordion-bg:transparent;
  --bs-accordion-color:inherit;
  --bs-accordion-btn-bg:transparent;
  --bs-accordion-active-bg:transparent;
}
:where(.accordion-item){position:static;}
:where(.accordion-item[open]){z-index:auto;}
:where(.accordion-header){width:auto;text-align:inherit;}
:where(.accordion-header:focus-visible){position:static;z-index:auto;}
:where(.accordion-body){font-size:inherit;}
:where(.form-control){display:revert;min-height:0;line-height:normal;box-shadow:none;}
.form-control::placeholder{color:#757575;}
:where(.btn-solid,.btn-outline){
  --bs-btn-min-height:0;
  vertical-align:baseline;
  -webkit-user-select:auto;
  user-select:auto;
}
:where(.btn-solid,.btn-outline):disabled{
  /* A disabled button ("Sending…") looks as it did enabled, hover included. */
  --bs-btn-disabled-bg:var(--bs-btn-bg);
  --bs-btn-disabled-color:var(--bs-btn-color);
  --bs-btn-disabled-border-color:var(--bs-btn-border-color);
  opacity:1;
  pointer-events:auto;
}
:where(.btn-solid,.btn-outline):disabled:hover{
  --bs-btn-disabled-bg:var(--bs-btn-hover-bg);
  --bs-btn-disabled-color:var(--bs-btn-hover-color);
  --bs-btn-disabled-border-color:var(--bs-btn-hover-border-color);
}

/* ---------- c. The site's design ---------- */

:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:3px;}
::selection{background:var(--navy);color:#fff;}

/* Bootstrap's .container, at this site's width and gutters. */
.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);}
.container-wide{max-width:1340px;margin-inline:auto;padding-inline:var(--gutter);}

/* ---------- Typography ---------- */
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--text-soft);line-height:1.6;}

.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem;}
.section-title{max-width:56ch;}
.center-block{margin-inline:auto;}

/* ---------- Buttons (Bootstrap's btn-solid / btn-outline, below) ---------- */
.btn-arrow{transition:transform .25s;}
:is(.btn-solid,.btn-outline):hover .btn-arrow{transform:translateX(3px);}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;}

/* ---------- Header (Bootstrap's navbar) ---------- */
/* position:sticky and top:0 come from Bootstrap's sticky-top. */
.header{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s;}
.header.scrolled{box-shadow:var(--shadow-sm);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px;}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--navy);font-size:1.02rem;line-height:1.1;letter-spacing:-.01em;}
.brand img{height:34px;width:auto;}
.brand .brand-txt small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
.nav{display:none;align-items:center;gap:1.5rem;}
.nav a{font-size:.94rem;font-weight:500;color:var(--text);position:relative;padding:.4rem 0;}
.nav a::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--navy);transition:width .28s;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--navy);}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%;}
.header-cta{display:none;}
.burger{display:inline-flex;flex-direction:column;gap:5px;width:46px;height:46px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);}
.burger span{width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .3s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* The menu on phones and tablets: Bootstrap's drawer, opened without a
   backdrop or a modal layer (data-bs-backdrop="false", data-bs-scroll="true")
   so it slides in under the header, which stays on top with its burger
   turned into a close button, as before. */
.mobile-nav{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;width:auto;max-width:none;height:auto;max-height:none;margin:0;padding:0;overflow:hidden;color:inherit;background:var(--navy);border:0;border-radius:0;box-shadow:none;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,.84,.44,1),visibility .4s;}
.mobile-nav[open]{transform:translateX(0);}
.mobile-nav > .drawer-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:0;padding:5.5rem var(--gutter) 2.5rem;overflow-y:auto;}
.mobile-nav a{color:#fff;font-size:1.4rem;font-weight:600;padding:.65rem 0;border-bottom:1px solid var(--line-navy);}
.mobile-nav a[aria-current="page"]{color:var(--grey-blue);}
.mobile-nav :is(.btn-solid,.btn-outline){margin-top:1.8rem;align-self:flex-start;}

@media(min-width:1000px){
  .nav{display:flex;}
  .header-cta{display:inline-flex;}
  .burger{display:none;}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;}
.hero-media{position:relative;}
.hero-media img{width:100%;height:clamp(340px,54vh,620px);object-fit:cover;object-position:center;}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,33,56,.35) 0%,rgba(12,33,56,.15) 45%,rgba(12,33,56,.85) 100%);}
.hero-body{position:relative;z-index:2;margin-top:-9rem;padding-bottom:clamp(2.5rem,5vw,4rem);}
.hero-card{background:rgba(12,33,56,.72);backdrop-filter:blur(8px);border:1px solid var(--line-navy);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.8rem);max-width:760px;}
.hero .location-tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-blue);margin-bottom:1rem;}
.hero h1{color:#fff;margin-bottom:.6rem;}
.hero p{color:rgba(255,255,255,.86);max-width:60ch;margin-bottom:1.6rem;}
.hero .btn-row{margin-bottom:0;}
/* Bootstrap's grid, at this site's breakpoints (here and below). */
.hero-stats{--bs-columns:2;--bs-gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:2rem;}
.hero-stats .stat{background:#fff;padding:1.3rem 1.2rem;}
.hero-stats .stat b{display:block;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--navy);font-weight:700;line-height:1;}
.hero-stats .stat span{font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);margin-top:.3rem;display:block;}
@media(min-width:760px){.hero-stats{--bs-columns:4;}}

/* status strip */
.status-strip{background:var(--grey-blue-2);border-bottom:1px solid var(--line);}
.status-strip .container{display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding-block:.85rem;justify-content:center;font-size:.82rem;color:var(--text-soft);font-weight:500;}
.status-strip b{color:var(--navy);font-weight:600;}
.status-strip .sep{color:var(--blue);}

/* ---------- Section shell ---------- */
.section{padding-block:clamp(3.2rem,7vw,6rem);}
.section-alt{background:var(--off-white);}
.section-navy{background:var(--navy);color:#fff;}
.section-navy h1,.section-navy h2,.section-navy h3{color:#fff;}
.section-navy .lead{color:rgba(255,255,255,.82);}
.section-navy .eyebrow{color:var(--grey-blue);}
.section-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3rem);}
.section-head.center{margin-inline:auto;text-align:center;}

/* ---------- Breadcrumb (Bootstrap's breadcrumb list in the page's bar) ---------- */
.breadcrumb-bar{padding-block:1rem;font-size:.85rem;color:var(--text-soft);}
.breadcrumb{flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;margin:0;padding:0;}
.breadcrumb > li{display:inline-flex;align-items:center;}
.breadcrumb a{color:var(--blue);}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .sep{color:var(--line);}
.breadcrumb [aria-current="page"]{color:var(--text-soft);}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{background:var(--navy);color:#fff;padding-block:clamp(2.4rem,5vw,3.6rem);}
.page-hero .eyebrow{color:var(--grey-blue);}
.page-hero h1{color:#fff;margin-bottom:.4rem;}
.page-hero p{color:rgba(255,255,255,.82);max-width:64ch;margin:0;}

/* ---------- Prose & USP grid ---------- */
.grid-2{--bs-columns:1;--bs-gap:2.4rem;}
@media(min-width:820px){.grid-2{--bs-columns:2;--bs-gap:3.5rem;align-items:start;}}
.usp-list{display:grid;gap:.9rem;}
.usp-list li{position:relative;padding-left:1.9rem;color:var(--text);}
.usp-list li::before{content:'';position:absolute;left:0;top:.62em;width:11px;height:11px;border:2px solid var(--blue);border-radius:50%;}
.usp-list.on-navy li{color:rgba(255,255,255,.9);}
.usp-list.on-navy li::before{border-color:var(--grey-blue);}

/* ---------- Stat band ---------- */
.stat-band{--bs-columns:2;--bs-gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.stat-band .cell{background:#fff;padding:1.6rem 1.4rem;text-align:center;}
.stat-band .cell b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--navy);font-weight:700;}
.stat-band .cell span{font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;color:var(--text-soft);margin-top:.3rem;display:block;}
@media(min-width:760px){.stat-band{--bs-columns:4;}}

/* ---------- Cards ---------- */
.card-grid{--bs-columns:1;--bs-gap:1.4rem;}
@media(min-width:640px){.card-grid.cols-2{--bs-columns:2;}.card-grid.cols-3{--bs-columns:2;}}
@media(min-width:920px){.card-grid.cols-3{--bs-columns:3;}.card-grid.cols-4{--bs-columns:4;}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.6rem;transition:transform .28s,box-shadow .28s,border-color .28s;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--grey-blue);}
.card .card-num{font-size:.82rem;font-weight:700;color:var(--blue);letter-spacing:.05em;}
.card h3{margin:.5rem 0 .5rem;font-size:1.2rem;}
.card p{margin:0;color:var(--text-soft);font-size:.96rem;}
.card-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:600;color:var(--navy);font-size:.9rem;}
.card-link .btn-arrow{transition:transform .25s;}
.card:hover .card-link .btn-arrow{transform:translateX(3px);}

/* hub cards (home) */
.hub-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;transition:transform .28s,box-shadow .28s,border-color .28s;}
.hub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--grey-blue);}
.hub-card .n{font-size:.8rem;font-weight:700;color:var(--blue);}
.hub-card h3{margin:.5rem 0;font-size:1.18rem;}
.hub-card p{margin:0 0 .9rem;color:var(--text-soft);font-size:.92rem;}
.hub-card .go{font-weight:600;color:var(--navy);font-size:.88rem;display:inline-flex;gap:.35rem;align-items:center;}

/* ---------- Media figure (Bootstrap's .figure) ---------- */
.figure{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--off-white);}
.figure img{width:100%;}
.figure figcaption{padding:.9rem 1.2rem;font-size:.85rem;color:var(--text-soft);border-top:1px solid var(--line);}

/* ---------- Data table ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);-webkit-overflow-scrolling:touch;}
.tag{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.18rem .55rem;border-radius:20px;background:var(--grey-blue);color:var(--navy);}

/* ---------- Amenities ---------- */
.amenity-grid{--bs-columns:2;--bs-gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.amenity-grid .item{background:#fff;padding:1.4rem 1.3rem;}
.amenity-grid .item .item-title{margin:0 0 .3rem;color:var(--navy);font-size:1rem;font-weight:700;}
.amenity-grid .item p{margin:0;font-size:.88rem;color:var(--text-soft);}
@media(min-width:680px){.amenity-grid{--bs-columns:3;}}
.note{margin-top:1.5rem;padding:1.1rem 1.3rem;border-left:3px solid var(--blue);background:var(--grey-blue-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.92rem;color:var(--text);}

/* ---------- Gallery ---------- */
.gallery-grid{--bs-columns:2;--bs-gap:1rem;}
@media(min-width:820px){.gallery-grid{--bs-columns:3;}}
.gallery-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative;background:var(--off-white);}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s;}
.gallery-grid figure:hover img{transform:scale(1.05);}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;font-size:.8rem;font-weight:500;color:#fff;background:linear-gradient(0deg,rgba(12,33,56,.85),transparent);}

/* floor-plan cards */
.plan-grid{--bs-columns:1;--bs-gap:1.6rem;}
@media(min-width:760px){.plan-grid{--bs-columns:2;}}
.plan-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;}
.plan-card .plan-img{background:var(--off-white);padding:1rem;}
.plan-card img{width:100%;}
.plan-card .plan-body{padding:1.3rem 1.5rem;}
.plan-card h3{margin:0 0 .3rem;font-size:1.15rem;}
.plan-card .plan-meta{color:var(--text-soft);font-size:.9rem;margin-bottom:.8rem;}

/* ---------- Price ---------- */
.price-panel{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.price-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:baseline;padding:1.2rem 1.5rem;border-bottom:1px solid var(--line);}
.price-row:last-child{border-bottom:none;}
.price-row:nth-child(even){background:var(--off-white);}
.price-row .cfg{font-weight:700;color:var(--navy);font-size:1.1rem;}
.price-row .size{color:var(--text-soft);font-size:.9rem;}
.price-row .amt{font-weight:600;color:var(--blue);letter-spacing:.02em;}
/* A single native <details>, styled as a panel (not an accordion). */
.payment-schedule{margin-top:2rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.payment-schedule summary{padding:1.1rem 1.5rem;font-weight:600;color:var(--navy);cursor:pointer;background:var(--grey-blue-2);}
.payment-schedule .rows{padding:.5rem 1.5rem 1.2rem;}
.payment-schedule .rows div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px dashed var(--line);font-size:.92rem;}
.payment-schedule .rows div:last-child{border-bottom:none;}
.payment-schedule .rows span:first-child{color:var(--text-soft);}
.payment-schedule .rows span:last-child{font-weight:500;color:var(--navy);text-align:right;}

/* ---------- Location ---------- */
.loc-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.loc-list .info-row{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line);}
.loc-list .info-row:last-child{border-bottom:none;}
.loc-list .info-row:nth-child(even){background:var(--off-white);}
.loc-list .place{color:var(--text);}
.loc-list .dist{font-weight:600;color:var(--blue);white-space:nowrap;}
.map-embed{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block;}

/* ---------- FAQ (Bootstrap's accordion: <details> and <summary>) ---------- */
.faq{max-width:820px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.3rem 0;font-weight:600;color:var(--navy);font-size:1.08rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq .plus{flex:none;width:24px;height:24px;position:relative;transition:transform .3s;}
.faq .plus::before,.faq .plus::after{content:'';position:absolute;background:var(--blue);border-radius:2px;}
.faq .plus::before{left:50%;top:4px;bottom:4px;width:2px;transform:translateX(-50%);}
.faq .plus::after{top:50%;left:4px;right:4px;height:2px;transform:translateY(-50%);}
.faq details[open] .plus{transform:rotate(45deg);}
.faq .answer{padding:0 0 1.4rem;color:var(--text-soft);max-width:68ch;}

/* ---------- Contact / form ---------- */
.contact-grid{--bs-columns:1;--bs-gap:2.5rem;}
@media(min-width:880px){.contact-grid{grid-template-columns:.85fr 1.15fr;}}
.contact-info .info-row{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);}
.contact-info .info-row .k{width:96px;flex:none;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);font-weight:600;}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.2rem);}
.field{margin-bottom:1.15rem;}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--navy);margin-bottom:.45rem;}
.field input,.field textarea{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-family:inherit;font-size:1rem;color:var(--text);background:var(--off-white);transition:border-color .2s,background .2s;}
.field input:focus,.field textarea:focus{border-color:var(--blue);background:#fff;}
.field textarea{resize:vertical;min-height:110px;}
.field .err{display:block;font-size:.8rem;color:#c0392b;margin-top:.35rem;min-height:1em;}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form-status{margin-top:1rem;font-size:.92rem;font-weight:500;min-height:1.4em;}
.form-status.ok{color:#1e7a46;}
.form-status.bad{color:#c0392b;}

/* ---------- Page nav (prev/next) ---------- */
.page-nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-block:2.2rem;border-top:1px solid var(--line);margin-top:1rem;}
.page-nav a{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--text-soft);}
.page-nav a .lbl{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-weight:600;}
.page-nav a .t{font-weight:600;color:var(--navy);font-size:1.05rem;}
.page-nav a.next{text-align:right;margin-left:auto;}
.page-nav a:hover .t{color:var(--blue);}

/* related links inline */
.related{margin-top:1.5rem;padding:1.1rem 1.3rem;background:var(--grey-blue-2);border-radius:var(--radius-sm);font-size:.92rem;}
.related a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:#fff;border-radius:var(--radius);padding:clamp(2rem,5vw,3.2rem);text-align:center;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.82);max-width:52ch;margin-inline:auto;margin-bottom:1.6rem;}

/* ---------- Footer ---------- */
.footer{background:var(--navy-2);color:rgba(255,255,255,.75);padding-block:3.5rem 2rem;}
.footer-grid{--bs-columns:1;--bs-gap:2.2rem;}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer .brand{color:#fff;margin-bottom:1rem;}
.footer .brand .brand-txt small{color:var(--grey-blue);}
.footer p{font-size:.9rem;max-width:34ch;}
.footer .footer-col-title{color:#fff;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem;font-weight:600;}
.footer ul{display:flex;flex-direction:column;gap:.6rem;}
.footer a{font-size:.9rem;color:rgba(255,255,255,.72);}
.footer a:hover{color:#fff;}
.footer-legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line-navy);font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.6;text-align:justify;text-justify:inter-word;hyphens:auto;}
.footer-bottom{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.6);}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);padding:.7rem var(--gutter);display:flex;gap:.6rem;box-shadow:0 -6px 20px rgba(17,45,78,.12);}
.sticky-cta :is(.btn-solid,.btn-outline){flex:1;--bs-btn-padding-y:.8rem;--bs-btn-padding-x:.8rem;--bs-btn-font-size:.9rem;}
@media(min-width:1000px){.sticky-cta{display:none;}}
@media(max-width:999px){body.has-sticky{padding-bottom:70px;}}

/* ---------- Enquiry dialog (Bootstrap's dialog, opened by script.js) ---------- */
.modal{
  --bs-dialog-width:460px;
  --bs-dialog-margin:1.2rem;
  --bs-dialog-color:var(--text);
  --bs-dialog-bg:#fff;
  --bs-dialog-border-width:0;
  --bs-dialog-border-radius:var(--radius);
  --bs-dialog-box-shadow:none;
  --bs-dialog-transition-property:opacity,transform,visibility;
  --bs-dialog-transition-duration:.3s;
  --bs-dialog-transition-timing:ease;
  --bs-dialog-backdrop-bg:rgba(12,33,56,.6);
  --bs-dialog-backdrop-blur:4px;
  position:fixed;inset:0;
  max-height:92vh;overflow-y:auto;transform:translateY(14px);
}
.modal[open]:not(.hiding){transform:translateY(0);}
.modal-box{position:relative;padding:clamp(1.6rem,4vw,2.4rem);}
.modal-close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:1.2rem;line-height:1;color:var(--navy);}
.modal h3,.modal .modal-title{margin-bottom:.3rem;font-size:1.25rem;}
.modal p{color:var(--text-soft);font-size:.92rem;margin-bottom:1.2rem;}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,.84,.44,1),transform .7s cubic-bezier(.16,.84,.44,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
/* Spacing: Bootstrap's mt-9 (2rem) and mt-12 (3rem) utilities. */
.mb-0{margin-bottom:0;}

/* ============================================================
   Total Environment theme (overrides the template above)
   ============================================================ */
.eyebrow{letter-spacing:.14em;}
.nav a::after{background:var(--coral);}
.usp-list li::before{border-color:var(--coral);}
.faq .plus::before,.faq .plus::after{background:var(--coral);}
::selection{background:var(--coral);color:#111;}
:focus-visible{outline-color:var(--blue);}

/* hero: dark card over the photograph, white page below */
.hero{background:#fff;color:var(--text);}
.hero-media::after{background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.06) 45%,rgba(0,0,0,.5) 100%);}
.hero-card{background:rgba(17,17,17,.9);border-color:rgba(255,255,255,.12);}
.hero .location-tag{color:#f4f4f4;}
.hero-stats{margin-top:1.5rem;}

/* interior page heads: light band, black type */
.page-hero{background:var(--grey-blue);color:var(--text);border-bottom:1px solid var(--line);}
.page-hero .eyebrow{color:var(--blue);}
.page-hero h1{color:var(--navy);}
.page-hero p{color:var(--text-soft);}

.mobile-nav{background:#111;}
.mobile-nav a[aria-current="page"]{color:var(--coral);}
.gallery-grid figcaption{background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);}
.cta-band{background:#111;}
.modal{--bs-dialog-backdrop-bg:rgba(0,0,0,.6);}
.sticky-cta{box-shadow:0 -6px 20px rgba(0,0,0,.1);}
.footer{background:#000;color:rgba(255,255,255,.72);}
.footer-legal{color:rgba(255,255,255,.6);}

/* ---------- Monogram: the builder's first letter, black and coral ---------- */
.brand.brandmark{flex-direction:row;align-items:center;gap:.7rem;}
.brand-text{display:flex;flex-direction:column;gap:.18rem;line-height:1;}
.brandmark_badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:4px;background:#111;color:#fff;border-bottom:3px solid var(--coral);font-family:var(--font);font-size:1.45rem;font-weight:700;line-height:1;}
.brandmark_name{font-size:1.15rem;font-weight:600;color:#111;letter-spacing:-.01em;white-space:nowrap;}
.brand-sub{font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);}
.footer .brandmark_badge{background:var(--coral);color:#111;border-bottom-color:#fff;}
.footer .brandmark_name{color:#fff;}
.footer .brand-sub{color:#d6d6d6;}
@media(max-width:479px){.brandmark_badge{width:2.15rem;height:2.15rem;font-size:1.2rem;}.brandmark_name{font-size:1.02rem;}}

/* ---------- Other projects list (FAQ) ---------- */
.net-cols{--bs-columns:1;--bs-gap:1.2rem 2rem;margin-top:1rem;}
@media(min-width:680px){.net-cols{--bs-columns:2;}}
.net-group .heading{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#111;margin:0 0 .5rem;}
.net-list{display:flex;flex-direction:column;gap:.35rem;}
.net-list li{font-size:.95rem;line-height:1.45;}
.net-list a{color:#111;font-weight:600;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px;}
.net-loc{color:var(--text-soft);font-size:.88rem;}
.faq .answer p{margin:0 0 .4rem;}

/* ---------- Enquiry dialog: compact bottom sheet on phones ---------- */
@media(max-width:479px){
  .modal{--bs-dialog-margin:0;width:100%;max-width:none;margin:auto 0 0;border-radius:12px 12px 0 0;max-height:88vh;transform:translateY(100%);}
  .modal-box{padding:1.2rem 1.1rem calc(1rem + env(safe-area-inset-bottom));}
  .modal .modal-title{font-size:1.1rem;padding-right:2.8rem;}
  .modal-title + p{padding-right:2.2rem;}
  .modal p{font-size:.85rem;margin-bottom:.8rem;}
  .modal .field{margin-bottom:.55rem;}
  .modal .field label{margin-bottom:.25rem;}
  .modal .field input,.modal .field textarea{padding:.65rem .85rem;}
  .modal .field textarea{min-height:0;height:3.4rem;}
  .modal .field .err{min-height:0;}
  .modal .form-status{margin-top:.5rem;}
  .modal-close{top:.8rem;right:.8rem;}
}

/* ---------- d. Bootstrap's buttons in this design ----------
   btn-solid theme-primary (black), btn-outline theme-primary, and two for
   the dark hero card and bands: btn-solid btn-light and
   btn-outline btn-ghost-light. */
.btn-solid,.btn-outline{
  --bs-btn-gap:.55rem;
  --bs-btn-padding-y:.95rem;
  --bs-btn-padding-x:1.7rem;
  --bs-btn-font-size:.98rem;
  --bs-btn-font-weight:600;
  --bs-btn-line-height:1;
  --bs-btn-border-width:1.5px;
  --bs-btn-border-radius:var(--radius-sm);
  /* Set here as well as in the token: the button's radius outlasts the
     focus ring's 3px (:focus-visible, above), as it always did. */
  border-radius:var(--bs-btn-border-radius);
  transition:background .25s,border-color .25s,color .25s,transform .2s,box-shadow .25s;
}
.btn-solid:hover,.btn-outline:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn-solid.theme-primary:hover{--bs-btn-hover-bg:var(--navy-2);--bs-btn-hover-border-color:var(--navy-2);--bs-btn-hover-color:#fff;}
.btn-outline.theme-primary:hover{--bs-btn-hover-bg:var(--navy);--bs-btn-hover-border-color:var(--navy-2);--bs-btn-hover-color:#fff;}
.btn-light{--bs-btn-bg:#fff;--bs-btn-color:var(--navy);--bs-btn-border-color:#fff;}
.btn-light:hover{--bs-btn-hover-bg:#f4f4f4;--bs-btn-hover-border-color:#f4f4f4;--bs-btn-hover-color:#111;}
.btn-ghost-light{--bs-btn-bg:transparent;--bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.5);}
.btn-ghost-light:hover{--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-hover-color:#111;}

}