/* ================================
   Builders Choice — Clean Styles
   ================================ */
@import url('https://fonts.cdnfonts.com/css/museo-sans-rounded');

/* ---------- Design Tokens ---------- */
:root{
  /* Brand */
  --bc-accent:#F5A623;
  --bc-cream:#fff; --bg:#fff; --surface:#f7f7f9;
  --bc-border:#e9ecf2; --border:var(--bc-border);
  --ink:#222; --muted:#6b7280;

  /* Legacy alias */
  --orange:var(--bc-accent);
  --orange-strong:#f18f00;

  /* Layout */
  --container:1200px;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --header-h:58px;

  /* Type scale */
  --fs-hero:clamp(30px,7vw,64px);
  --fs-h2:clamp(22px,3.3vw,36px);
  --fs-h3:clamp(18px,2.2vw,22px);
  --fs-body:16px;

  /* Motion */
  --ease:cubic-bezier(.2,.6,.2,1);
  --t-1:150ms; --t-2:220ms; --t-3:350ms;

  /* Home hero */
  --home-orange-1:#ffb63b;
  --home-orange-2:#ff9a0e;
  --home-orange-3:#ff8f00;

  /* Estimator */
  --est-panel-gap:12px;

  /* Favourite button */
  --fav-size:44px; --fav-gap:14px; --fav-reserve:calc(var(--fav-size) + var(--fav-gap));
}
@media (min-width:900px){ :root{ --header-h:56px } }

/* ---------- Base ---------- */
*{ box-sizing:border-box; user-select: none }
html,body{ height:100%; overflow-x:hidden }
html{ color-scheme:light; -webkit-text-size-adjust:100% }
body{
  margin:0; padding-top:var(--header-h);
  font:400 var(--fs-body)/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
.muted{ color:var(--muted) }
.container{ max-width:var(--container); margin-inline:auto; padding: 20px 0; padding-inline:16px }
:focus-visible{ outline:3px solid color-mix(in srgb,var(--bc-accent) 45%, transparent); outline-offset:2px; border-radius:8px }

/* Hide visually but keep for screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; /* prevent line breaks */
  border: 0;
}

/* For “skip to content” or items that should appear when focused */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important;
  width: auto; 
  height: auto; 
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Layout helpers */
.grid-2{ display:grid; gap:12px }
@media (min-width:520px){ .grid-2{ grid-template-columns:1fr 1fr } }
.center{ display:grid; place-items:center }
.stack > * + *{ margin-top:12px }

/* Screen-reader only */
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px) }

/* ---------- Header / Navigation ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  background:#fff; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(8px);
  left:0; right:0; width:100%;
}
.site-header .container{ width:100%; max-width:100%; margin:0; padding-inline:12px }
@media (min-width:900px){
  .site-header .container{ max-width:var(--container); margin-inline:auto; padding-inline:16px }
}
.header-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding-block:8px }
.logo img{ height:28px }
.nav{ display:flex; align-items:center; gap:10px; position:relative; min-width:0 }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6ch;
  padding:12px 18px; border-radius:999px; font-weight:700; border:1px solid transparent; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm) }
.btn-primary,.btn-quote{ background:var(--bc-accent); color:#fff }
.btn-quote{ font-size:.95rem; padding:8px 14px; position:relative }

.nav-toggle{
  width:36px; height:36px; border:0; background:#fff; border-radius:8px;
  display:grid !important; place-content:center; box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:pointer;
}
.nav-toggle-bar{ width:20px; height:2px; background:#111; margin:3px 0; border-radius:2px }

/* Single dropdown (all breakpoints) */
.nav-list{
  position:absolute; right:0; top:calc(100% + 6px);
  width:min(280px,92vw); background:#fff;
  border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.12);
  padding:6px 0; margin:0; list-style:none;
  transform:translateY(-8px); opacity:0; pointer-events:none; transition:transform var(--t-2), opacity var(--t-2);
}
.nav-list.open{ transform:none; opacity:1; pointer-events:auto }
.nav-list li+li{ border-top:1px solid var(--border) }
.nav-list a{ display:block; padding:12px 16px; font-weight:600; border-radius:8px }

/* ---------- Home / Landing ---------- */
.home-hero{
  position:relative; color:#fff;
  padding-top:26px; padding-bottom:clamp(24px,6vw,48px);
  background:
    radial-gradient(1200px 500px at 50% -80%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(180deg, var(--home-orange-1) 0%, var(--home-orange-2) 60%, var(--home-orange-2) 100%);
}
.home-hero .home-wrap{ position:relative }

/* Headline */
.home-title{
  margin:0 0 14px; padding-bottom:10px; max-width:38ch;
  font:800 clamp(22px,5.2vw,36px)/1.15 Inter,system-ui,sans-serif;
  text-align:center; margin-inline:auto;
}
.home-title .home-sub{
  display:block; margin-top:6px;
  font:100 clamp(16px,5.2vw,24px)/1.15 Inter,system-ui,sans-serif;
  opacity:.95; text-align:inherit;
}
@media (min-width:640px){ .home-title{ margin-block:clamp(24px,4vw,56px) } }

/* Tiles */
.home-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px; max-width:680px; margin-inline:auto;
}
@media (min-width:980px){
  .home-grid{ grid-template-columns:repeat(3, minmax(220px,1fr)); gap:18px; max-width:920px }
}
.home-tile{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px;
  padding:18px 16px; background:#fff; color:#0b1220;
  border-radius:18px; border:1px solid var(--bc-border); box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:transform .12s ease, box-shadow .12s ease;
}
.home-tile:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.10) }
.tile-icon{ display:grid; place-items:center; width:56px; height:56px; flex:0 0 auto; background:transparent; color:var(--home-orange-3) }
.tile-icon svg{ width:28px; height:28px }
.tile-text small{ display:block; color:#6b7280; font-weight:700; font-size:.95rem; line-height:1.05 }
.tile-text strong{ display:block; color:#0b1220; font-weight:800; font-size:1.25rem; line-height:1.1 }

/* Phone: stack + remove inner gap */
@media (max-width:640px){
  .home-tile{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:0; padding:16px 14px }
  .tile-icon{ width:46px; height:46px; margin-bottom:0 }
}

/* Colorize black SVG <img> icons via filter */
.home-grid .tile-icon{ object-fit:contain; filter:invert(56%) sepia(92%) saturate(624%) hue-rotate(354deg) brightness(99%) contrast(97%) }
.home-grid a.home-tile:hover .tile-icon{
  filter:invert(56%) sepia(92%) saturate(624%) hue-rotate(354deg) brightness(105%) contrast(100%)
}

/* House art */
.home-art{ position:relative; margin-top:18px; min-height:140px }
.home-art img{
  width:clamp(260px,60vw,520px); margin:10px auto 0; object-fit:contain;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.18))
}

/* Optional size knobs */
.home-hero { --tile-icon:72px; --tile-pad:18px }
.home-grid .home-tile{ padding:var(--tile-pad) }
.home-grid .home-tile .tile-icon{
  width:var(--tile-icon); height:var(--tile-icon); flex:0 0 var(--tile-icon); margin-bottom:10px;
}
.home-grid .home-tile .tile-icon.is-mask{
  background:var(--bc-accent); -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
}
@media (max-width:420px){
  .home-hero{ --tile-icon:56px; --tile-pad:14px }
  .home-grid{ gap:14px }
  .home-grid .home-tile .tile-text strong{ font-size:22px }
  .home-grid .home-tile .tile-text small{ font-size:16px }
}
@media (max-width:360px){ .home-hero{ --tile-icon:40px; --tile-pad:12px } }

/* ---------- Controls (Builders / Plans / Elevations) ---------- */
.builder-controls,.plans-controls,.elevations-controls{ margin:12px 0 20px }
.controls-bar{ display:grid; gap:10px; align-items:center; background:#fff; border:none; border-radius:14px; padding:0 }
.control{ position:relative; display:flex; align-items:center; min-height:44px }
.control:focus-within{ box-shadow:0 0 0 3px color-mix(in srgb,var(--bc-accent) 18%, transparent); border-radius:12px }
.control input,.control select{
  height:44px; padding:0 40px 0 12px; border:1px solid var(--border); border-radius:10px; background:#fff; font:inherit; width:100%;
}
.control--search input{ background:#f9fafb }
.icon-search,.icon-caret{ position:absolute; right:12px; color:#9aa3af; pointer-events:none }
.control select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:none; padding-right:38px }
.control select::-ms-expand{ display:none }
.builder-controls   .controls-bar{ grid-template-columns:1fr 120px; gap:12px }
.plans-controls     .controls-bar{ grid-template-columns:1fr 140px 120px; gap:12px }
.elevations-controls .controls-bar{ grid-template-columns:1fr 140px 120px; gap:12px }
.projects-controls .controls-bar{ grid-template-columns:1fr 120px; gap:12px }
.controls-bar .icon-sort { margin-left: auto; }

/* Responsive controls layouts */
@media (max-width: 680px) {
  .builder-controls .controls-bar,
  .projects-controls .controls-bar { grid-template-columns: 1fr; gap: 12px; }
  .plans-controls .controls-bar,
  .elevations-controls .controls-bar { grid-template-columns: 1fr 1fr; gap: 12px; }
  .plans-controls .controls-bar .control--search,
  .elevations-controls .controls-bar .control--search { grid-column: 1 / -1; }
}

/* ---------- Builders ---------- */
.builders{ display:grid; gap:12px }
.builder{
  position:relative; background:#fff; border:1px solid var(--bc-border); border-radius:16px;
  padding:12px 14px; display:grid; gap:10px;
}
.builder--cream{ background:var(--bc-cream) }
.builder-header{ display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:start }
.builder-logo{ width:96px; border-radius:6px; background:#fff }
.builder-name{ margin:0; padding-block:8px; font-weight:800; color:var(--bc-accent); font-size:1rem }
.builder-desc{ margin:0; color:var(--muted); font-size:.9rem }
.builder-ratings{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; text-align:center }
.rating{ display:grid; grid-template-rows:auto auto auto; justify-items:center; gap:4px }
.rating-score{ font-weight:800; font-size:1.35rem; line-height:1; color:var(--ink) }
.rating-stars{ height:18px }
.rating-meta{ display:inline-flex; align-items:center; gap:6px; min-height:20px }
.brandmark{ height:22px }
.meta-text{ color:var(--ink); font-size:.9rem }
@media (max-width:520px){
  .builder-header{ grid-template-columns:80px 1fr }
  .builder-logo{ width:80px }
  .rating-score{ font-size:1.3rem } .rating-stars{ height:16px } .meta-text{ font-size:.8rem }
}
@media (min-width:900px){ .builder{ padding-right:var(--fav-reserve) } }
@media (min-width:1000px){
  .builder{
    display:grid; grid-template-columns:112px 1fr minmax(340px,420px);
    align-items:center; gap:16px;
  }
  .builder-header{ display:contents }
  .builder-logo{ grid-column:1; width:96px; justify-self:start }
  .builder-info{ grid-column:2 }
  .builder-ratings{ grid-column:3; grid-template-columns:repeat(3, minmax(90px,1fr)); gap:16px; align-items:center }
  .builder-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
}

/* ---------- Plans ---------- */
.plans-grid{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:620px){ .plans-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:980px){ .plans-grid{ grid-template-columns:repeat(3,1fr) } }
.plan-card{
  position:relative; background:#fff; border:1px solid var(--bc-border); border-radius:16px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.03); display:grid; grid-template-rows:auto auto;
}
.plan-media{ background:#fff; display:flex; justify-content:center; align-items:center; padding:14px }
.plan-media img{ width:100%; height:auto; max-height:300px; object-fit:contain }
@media (max-width:640px){ .plan-media img{ max-height:240px } }
.plan-details{ background:#f7f7f9; border-top:1px solid var(--border); padding:12px 16px 14px; display:grid; gap:8px }
.plan-title{ margin:0; font-weight:800; color:var(--bc-accent); font-size:1rem }
.plan-specs{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.9rem; color:#374151 }
.plan-spec{ display:inline-flex; align-items:center; gap:4px; line-height:1 }
.plan-spec svg{ width:18px; height:18px; flex-shrink:0 }

/* ---------- Elevations ---------- */
.elevations-grid{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:620px){ .elevations-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:980px){ .elevations-grid{ grid-template-columns:repeat(3,1fr) } }
.elevation-card{
  position:relative; background:#fff; border:1px solid var(--bc-border); border-radius:16px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.03); display:grid; grid-template-rows:auto 1fr;
}
.elevation-media{ position:relative; aspect-ratio:16/9; background:#f3f4f6; overflow:hidden }
.elevation-media img{ width:100%; height:100%; object-fit:cover }
.elevation-meta{ padding:12px 12px 14px; display:grid; gap:4px }
.elevation-title{ margin:0; font-weight:800; color:var(--ink); font-size:1rem }
.elevation-sub{ margin:0; color:var(--muted); font-size:.9rem }
.elevation-tags{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap }
.elevation-tag{ border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:.8rem; color:#374151; background:#f9fafb }

/* ---------- Projects (cards + width-based carousel) ---------- */
.projects-grid{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:620px){ .projects-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:980px){ .projects-grid{ grid-template-columns:repeat(3,1fr) } }
.project-card{
  position:relative; background:#fff; border:1px solid var(--bc-border); border-radius:16px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.03); display:grid; grid-template-rows:auto 1fr;
}
#panel-projects .project-card .project-media{ position:relative; overflow:hidden }
#panel-projects .carousel{ position:relative; isolation:isolate }
#panel-projects .car-track{
  position:relative; z-index:1; list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  transform:translateX(calc(var(--i,0) * -100%)); transition:transform .35s ease;
}
#panel-projects .car-slide img{ width:100%; height:auto; display:block }
#panel-projects .car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; z-index:2; color:#fff;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
#panel-projects .car-btn.prev{ left:8px }
#panel-projects .car-btn.next{ right:8px }
#panel-projects .car-dots{ display:none !important }
#panel-projects .project-meta{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 10px 12px 12px;
}
#panel-projects .project-main{ flex:1 1 auto; min-width:0 }
#panel-projects .project-title{ margin:0 0 6px; font-weight:700 }
#panel-projects .project-tags{ display:flex; flex-wrap:wrap; gap:6px }
#panel-projects .project-tag{
  font-size:.875rem; line-height:1; padding:6px 10px; border:1px solid #e6e9f0;
  border-radius:999px; background:#f7f8fb; color:#374151;
}
#panel-projects .project-linkicon{
  flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center;
  border-radius:999px; border:1px solid #e6e9f0; background:#fff; color:#111; text-decoration:none;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease;
}
#panel-projects .project-linkicon:hover{ background:#f9fafb; box-shadow:0 2px 10px rgba(0,0,0,.06); transform:translateY(-1px) }
#panel-projects .project-linkicon:focus-visible{ outline:3px solid color-mix(in srgb, var(--bc-accent) 35%, transparent); outline-offset:2px }
#panel-projects .project-link{ display:none !important }

/* ---------- Panel Titles ---------- */
:root{
  --panel-title-size:clamp(22px,2.4vw,30px);
  --panel-title-icon:clamp(26px,2.8vw,34px);
}
.panel-title{
  display:flex; align-items:center; gap:12px; margin:0 0 14px; padding: 10px; border-radius: 10px;
  color:var(--bc-accent); font-weight:800; font-size:var(--panel-title-size); line-height:1.1; cursor:pointer;
}
.panel-title:hover { background: rgb(247, 247, 249); }
.panel-title .panel-title__icon.is-mask{
  width:var(--panel-title-icon); height:var(--panel-title-icon); flex:0 0 var(--panel-title-icon);
  background:var(--bc-accent); -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
}

/* ---------- Tab Panels ---------- */
.tab-panel{ display:none; background:#fff }
.tab-panel.is-active{ display:block }
body.is-home #panel-home{ padding:0; background:transparent }

/* ---------- Modals ---------- */
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px) }
.modal[hidden]{ display:none }
.modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:16px }
.modal__panel{
  position:relative; width:min(92vw,560px); max-height:calc(100dvh - 32px); overflow:auto;
  background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 24px 64px rgba(0,0,0,.25); padding:20px;
  animation:modalIn .18s ease-out;
}
@keyframes modalIn{ from{ transform:translateY(8px); opacity:.6 } to{ transform:none; opacity:1 } }
.modal__title{
  margin:0 0 8px; font-size:clamp(22px,2.6vw,28px); font-weight:800; color:var(--ink);
  font-family:"museo-sans-rounded","Museo Sans Rounded",sans-serif;
}
.modal__lead{ margin:0 0 12px; color:var(--muted) }
.modal__close{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border:0; border-radius:10px;
  background:#fff; color:#111; font-size:20px; line-height:1; box-shadow:0 1px 3px rgba(0,0,0,.1); cursor:pointer;
}
.modal__form{ display:grid; gap:12px; margin-top:8px }
.field{ display:grid; gap:6px }
.field span{ font-weight:600; font-size:.95rem }
.field :is(input,textarea,select){
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:#fff; font:inherit;
}
.field :is(input,textarea,select):focus{ outline:2px solid color-mix(in srgb,var(--bc-accent) 35%, transparent); border-color:var(--bc-accent) }
.modal__actions{ margin-top:4px; display:flex; gap:10px; justify-content:flex-end; align-items:center }

/* ---------- Lightbox ---------- */
.plan-lightbox[hidden]{ display:none }
.plan-lightbox{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; background:rgba(255,255,255,.98); padding:16px }
.plan-lightbox__img{ max-width:95vw; max-height:95vh; height:100%; object-fit:contain; border-radius:6px; padding:0 20px }
.plan-lightbox__backdrop{ position:absolute; inset:0 }
.plan-lightbox__close{
  position:absolute; top:16px; right:16px; width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.9); font-size:28px; line-height:1; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4);
}

/* ---------- Favourites (heart) ---------- */
.fav-btn{
  position:absolute; top:12px; right:12px; width:42px; height:42px; padding:0;
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:#a2a9b3; display:inline-grid; place-items:center; cursor:pointer; border-radius:6px; transition:color var(--t-1) var(--ease);
}
.fav-btn svg{ width:33px; height:33px; display:block }
.fav-btn svg .heart-stroke{ stroke-width:1 }
.fav-btn .heart-fill{ opacity:0; transition:opacity var(--t-1) var(--ease) }
.fav-btn:hover{ color:var(--orange-strong) }
.fav-btn[aria-pressed="true"]{ color:var(--bc-accent) }
.fav-btn[aria-pressed="true"] .heart-fill{ opacity:1 }
@media (max-width:899px){ .builder-name{ padding-right:calc(var(--fav-size) + var(--fav-gap)) } }

/* ---------- Quote badge & saved list ---------- */
.quote-badge{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#0b1220; color:#fff; font-weight:800; font-size:12px; line-height:20px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.quote-saved{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border) }
.quote-saved__title{ margin:0 0 10px; font-size:1rem; font-weight:800; color:var(--ink) }
.quote-saved__groups{ display:grid; gap:12px }
.quote-saved__group h4{ margin:6px 0; font-size:.95rem; color:var(--bc-accent) }
.quote-saved__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.quote-saved__item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:8px; border:1px solid var(--border); border-radius:10px; background:#fff;
}
.quote-saved__thumb{ width:44px; height:44px; object-fit:cover; border-radius:6px; background:#f3f4f6 }
.quote-saved__label{ font-weight:600 }
.quote-saved__remove{ appearance:none; border:1px solid var(--border); background:#fff; color:#444; padding:6px 10px; border-radius:8px; cursor:pointer; font-weight:600 }
.quote-saved__remove:hover{ background:#f9fafb }

/* ---------- Chat widget ---------- */
.bc-chat{ position:fixed; right:10px; bottom:10px; z-index:9999; font-family:Inter,system-ui,sans-serif }
.bc-chat-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border:0; border-radius:999px; cursor:pointer;
  background:#0b1220;
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.bc-chat-btn:focus-visible{ outline:2px solid #fcd300; outline-offset:2px; }
.bc-chat-svg{ width:22px; height:22px; display:block; }
#bc-chat-panel{
  position:fixed; right:10px; bottom:78px; width:min(420px,92vw); height:64vh; background:#fff; border:1px solid #e6e9ef;
  border-radius:16px; box-shadow:0 24px 60px rgba(16,24,40,.18); display:grid; grid-template-rows:auto 1fr auto; overflow:hidden;
  transform:translateY(20px); opacity:0; transition:transform .25s ease, opacity .25s ease;
}
#bc-chat-panel.show,
#bc-chat-root.is-open #bc-chat-panel{ pointer-events: auto;transform:translateY(0); opacity:1 }
#bc-chat-panel[hidden]{ display:none; }
.bc-chat-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #eef1f6; background:#fafbfe }
.bc-chat-brand{ display:flex; align-items:center; gap:8px; font-weight:600 }
.bc-chat-brand img{ height:22px }
.bc-icon-btn{ background:transparent; border:0; font-size:18px; cursor:pointer }
.bc-chat-stream{ padding:12px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.bc-msg{
  max-width:90%; padding:10px 12px; border-radius:14px; line-height:1.35; font-size:14.5px;
  height:auto; width:fit-content; white-space:pre-wrap; word-break:break-word
}
.bc-msg.user{ margin-left:auto; background:var(--bc-accent); color:#fff; border-bottom-right-radius:4px }
.bc-msg.bot{ margin-right:auto; background:#f7f8fb; border:1px solid #edf0f6; border-bottom-left-radius:4px }
.bc-chat-form{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; border-top:1px solid #eef1f6; background:#fff }
#bc-chat-input{ padding:12px 14px; border-radius:12px; border:1px solid #e1e6ef; outline:none }
#bc-chat-input:focus{ border-color:#c9d4ea; box-shadow:0 0 0 3px rgba(52,108,255,.12) }
.bc-send{ background:#0b1220; color: #fff; border:0; border-radius:12px; padding:0 16px; font-weight:600; cursor:pointer }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* ---------- Utilities ---------- */
.is-hidden{ display:none !important }
html,body{ overflow-x:clip }

/* ---------- Scroll to top ---------- */
.to-top{
  position:fixed; z-index:900; bottom:max(18px, env(safe-area-inset-bottom)); right:max(16px, env(safe-area-inset-right));
  width:44px; height:44px; border-radius:999px; background:#fff; border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.12); display:grid; place-items:center;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.to-top svg{ width:22px; height:22px }
.to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto }

/* ---------- Quote panel (land-yes responsive) ---------- */
#panel-quote #land-yes{ display:grid; gap:12px }
#panel-quote #land-yes .grid-2{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:520px){
  #panel-quote #land-yes{ grid-template-columns:1fr 1fr; align-items:start }
  #panel-quote #land-yes .grid-2{ display:contents }
  #panel-quote #land-yes .grid-2 > .field:first-child{ grid-column:1 / -1 }
}

/* ---------- Estimator (scoped to #panel-estimator) ---------- */
#panel-estimator{
  --est-brand:var(--bc-accent);
  --est-ink:#0b1220; --est-muted:#6b7280; --est-border:#e6e9f0;
}
#panel-estimator .bc-estimator .grid{ display:grid; gap:18px }
#panel-estimator .card{ background:transparent; border:none; box-shadow:none }
#panel-estimator .pad{ padding:0 }

/* User parameters */
#panel-estimator .bc-est-user .bc-est-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px }
#panel-estimator .bc-est-live{ display:flex; align-items:baseline; gap:8px; font-weight:700 }
#panel-estimator .bc-est-live span{ color:var(--est-brand) }
#panel-estimator .bc-est-live strong{ font-size:22px; color:#000 }
#panel-estimator .section-title h2{ margin:0; color:var(--muted); font-weight:800 }

/* Parameters grid */
#panel-estimator .bc-est-grid{ display:grid; gap:14px; grid-template-columns:repeat(3, minmax(0,1fr)) }
@media (max-width:980px){ #panel-estimator .bc-est-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ #panel-estimator .bc-est-grid{ grid-template-columns:1fr } }
#panel-estimator .bc-est-field{ display:grid; gap:6px; min-width:0 }
#panel-estimator .bc-est-field label{ font-size:12px; color:var(--est-muted) }
#panel-estimator .bc-est-field :is(input,select){
  height:44px; width:100%; padding:10px 14px; border:1px solid var(--est-border); border-radius:999px; background:#fff; color:var(--est-ink); font:inherit;
}
#panel-estimator .bc-est-field select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:none; padding-right:32px }
#panel-estimator .bc-est-field :is(input,select):focus{ outline:3px solid color-mix(in srgb, var(--est-brand) 35%, transparent); outline-offset:1px }

/* Tabs inside Admin settings */
#panel-estimator .tabs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding:0 0 12px; background:transparent; border:0 }
#panel-estimator .tab{
  appearance:none; border:0; border-radius:10px; padding:12px 16px;
  font-weight:700; cursor:pointer; background:#cfd3db; color:#fff; text-align:center; transition:filter .15s ease;
}
#panel-estimator .tab[aria-selected="true"]{ background:var(--est-brand) }
#panel-estimator .tab:not([aria-selected="true"]):hover{ filter:brightness(.95) }
@media (max-width:420px){ #panel-estimator .tabs{ grid-template-columns:1fr } }

/* Admin Rates (Costs) sliders — uses --p fill */
#panel-estimator #panel-costs{ padding:0 }
#panel-estimator #panel-costs .row{ padding:12px 0 }
#panel-estimator #panel-costs .slider{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
  padding:6px 0 12px; border-bottom:6px solid var(--est-border);
}
#panel-estimator #panel-costs .slider:last-child{ border-bottom:0 }
#panel-estimator #panel-costs .label{ font-size:12px; color:var(--est-muted); margin:0 }
#panel-estimator #panel-costs .value{ font-weight:800; color:#000; white-space:nowrap; text-align:right }
#panel-estimator #panel-costs input[type="range"]{
  grid-column:1 / -1; margin-top:6px; -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; outline:none;
  background:linear-gradient(var(--est-brand), var(--est-brand)) left/var(--p,0%) 100% no-repeat, var(--est-border);
}
#panel-estimator #panel-costs input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--est-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--est-brand) 20%, transparent);
}
#panel-estimator #panel-costs input[type="range"]::-moz-range-track{ height:6px; background:var(--est-border); border:0; border-radius:999px }
#panel-estimator #panel-costs input[type="range"]::-moz-range-progress{ height:6px; background:var(--est-brand); border-radius:999px }
#panel-estimator #panel-costs input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--est-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--est-brand) 20%, transparent);
}

/* Line items */
#panel-estimator #panel-items .btn{ background:#fff; border:1px solid var(--est-border); border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer }
#panel-estimator .table-wrap{ border:1px solid var(--est-border); border-radius:10px; overflow:auto; max-height:420px }
#panel-estimator table{ width:100%; border-collapse:collapse }
#panel-estimator th,#panel-estimator td{ padding:10px; border-bottom:1px solid var(--est-border); text-align:left }
#panel-estimator thead th{ position:sticky; top:0; background:#fafbfe; z-index:1; font-size:12px; color:var(--est-muted) }
#panel-estimator #panel-items input[type="number"]{ width:80px }

/* Calculations */
#panel-estimator #panel-calcs h3{ margin:0 0 6px; font-size:16px }
#panel-estimator #panel-calcs .sub{ color:var(--est-muted); margin:0 0 8px }
#panel-estimator #panel-calcs .sep{ height:1px; background:var(--est-border); margin:10px 0 }
#panel-estimator #panel-calcs h4{ margin:14px 0 6px; color:var(--est-ink) }
#panel-estimator #panel-calcs :is(ul,ol){ margin:0 0 8px 18px }

/* Trades toggles */
#panel-estimator .bc-est-toggles{ grid-column:1 / -1 }
#panel-estimator .bc-est-toggles .legend{ display:block; margin-bottom:6px; font-size:12px; color:var(--est-muted) }
#panel-estimator .toggle-list{ display:flex; flex-wrap:wrap; gap:12px }

/* Switch (shared) */
.switch{ --w:46px; --h:26px; --knob:18px; display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none }
.switch input{ position:absolute; opacity:0; pointer-events:none }
.switch .track{
  width:var(--w); height:var(--h); border-radius:999px; background:#e5e8f0; border:1px solid #e6e9f0;
  position:relative; transition:background .18s ease, border-color .18s ease;
}
.switch .track::after{
  content:""; position:absolute; top:50%; left:4px;
  width:var(--knob); height:var(--knob); border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18);
  transform:translateY(-50%); transition:left .18s ease;
}
.switch input:checked + .track{ background:#F5A623; border-color:#F5A623 }
.switch input:checked + .track::after{ left:calc(var(--w) - 4px - var(--knob)) }
.switch input:focus-visible + .track{ outline:3px solid color-mix(in srgb,#F5A623 40%, transparent); outline-offset:2px }
.switch .txt{ font-weight:600; color:#374151; white-space:nowrap }

/* Admin collapsible */
#panel-estimator .admin-settings .collapse-toggle{
  display:flex; align-items:center; justify-content:space-between;
  background:#f6f7fb; border:1px solid var(--est-border);
  border-radius:12px 12px 0 0; padding:10px 14px; margin:0; cursor:pointer; user-select:none;
}
#panel-estimator .admin-settings .collapse-toggle .chevron{
  width:18px; height:18px; flex:0 0 18px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center/contain; 
  background:#9aa1ad; transition:transform .2s ease;
}
#panel-estimator .admin-settings .collapse-toggle[aria-expanded="true"] .chevron{ transform:rotate(180deg) }
#panel-estimator .admin-settings-content{
  background:#f6f7fb; border:1px solid var(--est-border); border-top:0; border-radius:0 0 12px 12px;
  padding:12px; overflow:hidden; height:auto; transition:height .24s ease;
}
#panel-estimator .admin-settings-content.is-collapsed{ height:0 !important; padding-top:0; padding-bottom:0 }
#panel-estimator .admin-settings-content.is-collapsed > *{ margin-top:0 !important; margin-bottom:0 !important }

/* Mortgage (same --p model) */
#panel-estimator #panel-mortgage .section-title h2{ margin:0; color:var(--muted); font-weight:800 }
#panel-estimator #panel-mortgage .mort-grid{ display:grid; gap:14px }
#panel-estimator #panel-mortgage .mort-field{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:6px 0 12px;
}
#panel-estimator #panel-mortgage .mort-field .label{ font-size:12px; color:var(--est-muted); margin:0 }
#panel-estimator #panel-mortgage .mort-field .value{ font-weight:800; color:#000; white-space:nowrap; text-align:right }
#panel-estimator #panel-mortgage input[type="range"]{
  grid-column:1 / -1; margin-top:6px; -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; outline:none;
  background:linear-gradient(var(--est-brand), var(--est-brand)) left/var(--p,0%) 100% no-repeat, var(--est-border);
}
#panel-estimator #panel-mortgage input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--est-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--est-brand) 20%, transparent);
}
#panel-estimator #panel-mortgage input[type="range"]::-moz-range-track{ height:6px; background:var(--est-border); border:0; border-radius:999px }
#panel-estimator #panel-mortgage input[type="range"]::-moz-range-progress{ height:6px; background:var(--est-brand); border-radius:999px }
#panel-estimator #panel-mortgage input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--est-brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--est-brand) 20%, transparent);
}
#panel-estimator #panel-mortgage :is(select,input[type="number"]){
  height:44px; padding:10px 14px; border:1px solid var(--est-border); border-radius:999px; background:#fff; color:var(--est-ink); font:inherit;
}
@media (min-width:640px){
  #panel-estimator #panel-mortgage .mort-grid{ grid-template-columns:1fr auto }
  #panel-estimator #panel-mortgage .mort-grid .mort-field{ grid-column:1 / -1 }
  #panel-estimator #panel-mortgage .mort-grid .mort-field:has(#repayType){ grid-column:1 / 2 }
  #panel-estimator #panel-mortgage .mort-grid .mort-field:has(#termYears){ grid-column:2 / 3; align-self:end }
  #panel-estimator #panel-mortgage #termYears{ width:110px; text-align:right }
}

/* Estimator spacing + summary */
#panel-estimator #bcEstimator > .card{ margin-block:calc(var(--est-panel-gap) / 2) }
#panel-estimator #bcEstimator .bc-est-live{
  margin-bottom:var(--est-panel-gap); display:inline-flex; width:100%;
  justify-content:flex-end; text-align:right;
}
@media (min-width:900px){ :root{ --est-panel-gap:32px } }

#panel-estimator .card.summary{ display:grid; gap:16px 24px; align-items:start }
#panel-estimator .card.summary .build-summary .section-title{
  padding-bottom:6px; border-bottom:1px solid var(--est-border); margin-bottom:8px;
}
#panel-estimator .card.summary .kv{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:6px 0;
}
#panel-estimator .card.summary .kv > span{ color:var(--est-muted); font-weight:600 }
#panel-estimator .card.summary .kv > strong{ text-align:right; white-space:nowrap; font-weight:800; font-size:20px }
#panel-estimator .card.summary .kv.big{
  padding:12px 14px; border:1px solid var(--est-border); border-radius:10px; background:#f6f7fb; font-size:1.05rem;
}
#panel-estimator .card.summary .kv.big > span{ color:var(--est-brand); font-weight:800 }
#panel-estimator .card.summary .kv.big > strong{ font-size:26px }
@media (min-width:980px){
  #panel-estimator .card.summary{
    grid-template-columns:1fr 1fr; grid-auto-flow:row dense; position:relative;
    --sum-col:min(320px,35%); --sum-gap:24px; --sum-top:42px;
    padding-right:calc(var(--sum-col) + var(--sum-gap));
  }
  #panel-estimator .card.summary .build-summary,
  #panel-estimator .card.summary .mort-summary{ display:contents }
  #panel-estimator .card.summary .build-summary .section-title{ grid-column:1 / 3 }
  #panel-estimator .card.summary .build-summary .kv{ grid-column:1 }
  #panel-estimator .card.summary .mort-summary  .kv{ grid-column:2 }
  #panel-estimator .card.summary .overall-summary{
    position:absolute; right:0; top:var(--sum-top); width:var(--sum-col); display:grid; gap:12px;
  }
}

/* === Estimator – Build Specification grid === */
#panel-estimator .bc-est-grid{
  display: grid;
  gap: 12px;
  /* Desktop: all five spec fields on a single row */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end; /* line up inputs neatly */
}

/* Make the spec fields compact/flexible */
#panel-estimator .bc-est-field{ min-width: 0; }
#panel-estimator .bc-est-field label{ font-size: 12px; }
#panel-estimator .bc-est-field :is(input, select){
  height: 44px; padding: 10px 14px; border-radius: 999px;
}

/* Inclusions/toggles should always span full width */
#panel-estimator .bc-est-toggles{ grid-column: 1 / -1; }

/* Tablet/small laptop: 3 per row */
@media (max-width: 900px){
  #panel-estimator .bc-est-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phone: 2 per row */
@media (max-width: 600px){
  #panel-estimator .bc-est-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Very narrow phones: 1 per row (optional) */
@media (max-width: 380px){
  #panel-estimator .bc-est-grid{
    grid-template-columns: 1fr;
  }
}

/* Inclusions / Trade toggles layout */
#panel-estimator .bc-est-toggles{ grid-column: 1 / -1; }

#panel-estimator .toggle-list{
  display: grid;
  gap: 12px;
  /* Desktop: spread evenly across one row */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

/* Mobile: 2 columns */
@media (max-width: 600px){
  #panel-estimator .toggle-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Make each toggle fill its grid cell and space content nicely */
#panel-estimator .toggle-list .switch{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--est-border);
  border-radius: 12px;
  background: #fff;
}

/* Put the text on the left, the track on the right */
#panel-estimator .toggle-list .switch .txt{
  order: -1;              /* move before the track */
  margin-right: auto;     /* push track to the right */
  font-weight: 600;
  white-space: nowrap;
}
#panel-estimator .toggle-list .switch .track{
  margin-left: 0;
}


/* Inclusions / Trade toggles responsive grid */
#panel-estimator .bc-est-toggles{ grid-column: 1 / -1; }

#panel-estimator .toggle-list{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* ≥1366px: one row, 5-up */
  align-items: stretch;
}

/* <=1366px: 3-up */
@media (max-width: 1366px){
  #panel-estimator .toggle-list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* <=900px: 2-up + slightly tighter spacing */
@media (max-width: 900px){
  #panel-estimator .toggle-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #panel-estimator .toggle-list .switch{
    padding: 9px 10px;
    gap: 8px;
  }
}

/* <=576px: single column */
@media (max-width: 576px){
  #panel-estimator .toggle-list{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Tile-style toggle; text left, switch right */
#panel-estimator .toggle-list .switch{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--est-border);
  border-radius: 12px;
  background: #fff;
}

#panel-estimator .toggle-list .switch .txt{
  order: -1;            /* label before track */
  margin-right: auto;   /* push track to right edge */
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* avoid wrapping on tighter widths */
}

#panel-estimator .toggle-list .switch .track{ margin-left: 0; }

/* === Estimator › Mortgage: make Loan Type + Loan Term sit on one row === */
#panel-estimator #panel-mortgage .mort-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;      /* always 2-up (all breakpoints) */
  align-items: start;
}

/* Keep label above field like other parameters */
#panel-estimator #panel-mortgage .mort-field{
  display: grid;
  grid-template-columns: 1fr;          /* label over control */
  gap: 6px;
}

/* These fields should occupy one column each (left/right) */
#panel-estimator #panel-mortgage .mort-field:has(#repayType),
#panel-estimator #panel-mortgage .mort-field:has(#termYears){
  grid-column: auto;                   /* don’t span */
}

/* Sliders (rate, land, deposit, rent) span both columns below */
#panel-estimator #panel-mortgage .mort-field:has(input[type="range"]){
  grid-column: 1 / -1;                 /* full width */
}

/* Make the controls match parameter styling */
#panel-estimator #panel-mortgage :is(select, input[type="number"]){
  height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--est-border);
  border-radius: 999px;
  background: #fff;
  color: var(--est-ink);
  font: inherit;
}

/* Ensure term input fills its half column (instead of the narrower width used before) */
#panel-estimator #panel-mortgage #termYears{
  width: 100%;
  text-align: left;
}

/* Slider rows keep the orange fill via --p (you already paint this in JS) */
#panel-estimator #panel-mortgage input[type="range"]{
  background:
    linear-gradient(var(--est-brand), var(--est-brand)) left/var(--p,0%) 100% no-repeat,
    var(--est-border);
}

/* Estimator › Mortgage: limit just Loan Type + Loan Term widths */

#panel-estimator #panel-mortgage .mort-field:has(#repayType){
  /*max-width: 220px;*/
  width: 100%;
}

#panel-estimator #panel-mortgage .mort-field:has(#termYears){
  max-width: 80px;
  width: 100%;
}

/* Make the controls fill their capped containers */
#panel-estimator #panel-mortgage :is(select, input#termYears){
  width: 100%;
}

/* Fix widths (containers) */
#panel-estimator #panel-mortgage .mort-field:has(#repayType){
  width:220px;
}
#panel-estimator #panel-mortgage .mort-field:has(#termYears){
  width:80px;
}

/* Estimator · Mortgage: left-align Loan Type + Loan Term (fixed widths) */
#panel-estimator #panel-mortgage .mort-params{
  display: grid;
  grid-template-columns: auto auto; /* two tight columns for the top fields */
  gap: 14px 16px;
  align-items: start;
  justify-content: start;  /* keep the pair flush-left; no spreading */
  justify-items: start;
}

/* Label above control (unchanged) */
#panel-estimator #panel-mortgage .mort-params .mort-field{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

/* Fix widths for the two top fields (containers) */
#panel-estimator #panel-mortgage .mort-params .mort-field:has(#repayType){ width: 220px; }
#panel-estimator #panel-mortgage .mort-params .mort-field:has(#termYears){ width: 80px;  }

/* Inputs fill their fixed containers */
#panel-estimator #panel-mortgage :is(select, #termYears){ width: 100%; }

/* Sliders (rate, land, deposit, rent) span full width on new rows */
#panel-estimator #panel-mortgage .mort-field:has(input[type="range"]){
  grid-column: 1 / -1;
}

/* Estimator · Slider thumb with orange ring, white ring, orange core */
#panel-estimator #panel-costs input[type="range"]::-webkit-slider-thumb,
#panel-estimator #panel-mortgage input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  border:0;                                        /* let the gradient draw the rings */
  /* center orange (≈5px radius) → white ring (≈2px) → outer orange ring (≈2px) */
  background:
    radial-gradient(circle,
      var(--bc-accent) 0 6px,                      /* solid orange core */
      #fff 6px 9px,                                /* white ring */
      var(--bc-accent) 9px 12px,                    /* outer orange ring to edge */
      transparent 12px
    );
  /* subtle outer halo for contrast on light tracks */
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-accent) 20%, transparent);
  cursor: pointer;

}

#panel-estimator #panel-costs input[type="range"]::-moz-range-thumb,
#panel-estimator #panel-mortgage input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  border:0;
  background:
    radial-gradient(circle,
      var(--bc-accent) 0 6px,                      /* solid orange core */
      #fff 6px 9px,                                /* white ring */
      var(--bc-accent) 9px 12px,                    /* outer orange ring to edge */
      transparent 12px
    );
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc-accent) 20%, transparent);
}

/* Optional: tiny size bump on hover/focus for affordance */
#panel-estimator input[type="range"]:hover::-webkit-slider-thumb,
#panel-estimator input[type="range"]:focus-visible::-webkit-slider-thumb,
#panel-estimator input[type="range"]:hover::-moz-range-thumb,
#panel-estimator input[type="range"]:focus-visible::-moz-range-thumb{
  width:26px; height:26px;
}



/* ---------- Misc ---------- */
.disclaimer{ font-size:12px; color:var(--muted); text-align:justify; font-style:italic }

/* ---------- CTA / Why ---------- */
.cta{
  color:#fff; padding:clamp(28px,6vw,64px) 0;
  background:
    linear-gradient(140deg, rgba(255,204,77,.85) 0%, rgba(255,165,30,.85) 40%, rgba(255,143,26,.85) 100%),
    url("../img/bg-people2.jpg") center/cover no-repeat;
}
.cta-grid{ display:grid; gap:20px; align-items:center }
.cta-copy h2{ font-size:var(--fs-h2); margin:0 0 10px }
.cta-copy p{ color:#111; margin:0 0 16px; font-size:24px }

.why{ background:#fff; padding:clamp(24px,6vw,52px) 0 }
.why h2{ text-align:center; font-size:30px }
.why-grid{ display:grid; gap:20px; grid-template-columns:1fr }
.why-item{ text-align:center; background:#fff; border:1px solid var(--border); padding:18px; border-radius:14px }
.why-item img{ height:44px; margin:0 auto 8px }
.why-item h4{ font-size:18px; color:var(--orange); margin:8px 0 }
.why-item p{ margin:0; color:var(--muted) }
.google-rating{ display:grid; place-items:center; margin-top:20px }
@media (min-width:680px){ .why-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1000px){ .why-grid{ grid-template-columns:repeat(4,1fr) } }

/* ---------- Footer ---------- */
.site-footer{
  background:#f5f6f8; border-top:1px solid var(--border);
  margin-top:8px; padding:10px; font-size:14px; text-align:center;
}
.footer-grid{
  display:grid; gap:20px; padding:22px 0; justify-items:center; align-items:center;
  grid-template-columns:1fr;
}
.footer-grid > *{ text-align:center }
.footer-logo{ max-width:200px; margin-inline:auto }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center }
.footer-address{ font-style:normal }
.legal{ border-top:1px solid var(--border); padding:12px 0; text-align:center }
.site-footer a, .site-footer a:visited{ color:var(--bc-accent) }
.site-footer a:hover{
  color:color-mix(in srgb, var(--bc-accent) 85%, #000 15%);
  text-decoration:underline;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
}

/* ---------- Icon Sort ---------- */
.vh,.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon-sort { position: relative; display: inline-block; z-index: 10; }
.icon-sort__btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff); color: var(--text, #111827); cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}
.icon-sort__btn svg { width: 20px; height: 20px; display:block; }
.icon-sort__menu{
  position:absolute; top:100%; right:0; margin-top:.5rem; min-width:220px; padding:.5rem;
  border-radius:10px; border:1px solid var(--border,#e5e7eb); background:var(--surface,#fff);
  box-shadow:0 10px 25px rgb(0 0 0 / 10%), 0 2px 8px rgb(0 0 0 / 6%);
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem; opacity:0; transform:scale(.98); pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
}
.icon-sort.open .icon-sort__menu { opacity:1; transform:scale(1); pointer-events:auto; }
.icon-sort__item{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .6rem;
  border-radius:8px; border:1px solid transparent; background:transparent; cursor:pointer; color:var(--text,#111827); white-space:nowrap;
}
.icon-sort__item svg { width:18px; height:18px; }
.icon-sort__item:hover,.icon-sort__item:focus-visible{ background:#f3f4f6; border-color:var(--border,#e5e7eb); outline:none }
.icon-sort__item[aria-checked="true"]{
  background:#eef2ff; border-color:#6366f1; color:#3730a3;
}
@media (max-width: 480px){ .icon-sort__menu { grid-template-columns: 1fr; min-width: 180px; } }

/* default hidden */
/*#panel-why { display: none; }*/
.is-home #panel-why { display: block; }

#pwa-install[hidden] { display: none !important; }
#pwa-install.btn-ghost {
  border: 1px solid var(--bc-accent, #F29F05);
  color: var(--bc-accent, #F29F05);
  background: transparent;
  padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
}
#pwa-install.btn-ghost:hover { filter: brightness(0.95); }

/* ---------- Guide (progress/cards) ---------- */
#panel-guide .guide-header { display:grid; gap:.75rem; margin-bottom:1rem; }
.guide-progress__bar { background:#e5e7eb; height:8px; border-radius:999px; overflow:hidden; }
.guide-progress__fill { display:block; height:100%; background:var(--bc-accent); width:0%; transition:width .2s; }
.guide-steps { list-style:none; padding:0; margin:0; }
.guide-step { display:none; }
.guide-step.is-active { display:block; }
.guide-actions { display:flex; gap:.5rem; margin:.75rem 0; }
.guide-status { color:#6b7280; margin:0; }
.guide-footer { display:flex; justify-content:space-between; margin-top:1rem; }
.guide-return{
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: 999px; background: #111827; color: #fff; box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
  font-size: 14px; line-height: 1; cursor: pointer; border: 0;
}
.guide-return:hover { opacity: .95; }
@media (max-width: 600px){ .guide-return { bottom: 12px; right: 12px; } }
.panel-title{ display:flex; align-items:center; gap:.5rem; }
.panel-title__guide{ margin-left:auto; }
.btn-ghost-sm{ padding:6px 10px; font-size:.875rem; line-height:1.2; }

/* Guide cards with numbered badges */
.guide-cards{
  display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  list-style:none; padding:0; margin:16px 0 24px; counter-reset: guide-step;
}
.guide-card{
  position: relative; border:1px solid var(--border,#e5e7eb); border-radius:12px;
  padding:20px 16px 16px 16px; background:#fff; box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.guide-card::before{
  counter-increment: guide-step; content: counter(guide-step);
  position:absolute; top:12px; left:12px; width:32px; height:32px; display:grid; place-items:center;
  border-radius:50%; background: var(--bc-accent); color:#fff; font-weight:700; font-size:.95rem; line-height:1;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.35);
}
.guide-card h3{ margin: 0 0 6px 44px; font-size: 1rem; }
.guide-card p{ margin: 0 0 12px 44px; color:#6b7280; }
.btn-accent{ background: var(--bc-accent); color: #fff; border: none; }
.btn-accent:hover{ filter: brightness(0.95); }
.btn-sm{ padding: 6px 10px; font-size: .875rem; line-height: 1.2; }
.panel-title__next{ margin-left: auto; }
.btn-accent-outline{
  background: transparent; color: var(--bc-accent); border: 1.5px solid var(--bc-accent); border-radius: 10px; padding: 8px 12px; font-weight: 600;
}
.btn-accent-outline:hover{ background: color-mix(in srgb, var(--bc-accent) 12%, #ffffff); }
.btn-accent-outline:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--bc-accent), #000 20%); outline-offset: 2px;
}
.guide-cta{ display: flex; justify-content: center; margin: 24px 0 8px; }
.guide-cta .btn{ min-width: 220px; padding: 12px 18px; border-radius: 10px; }
@media (max-width: 680px){ .guide-cta{ margin: 28px 0 10px; } }
.guide-card .btn,.guide-card .btn-group{ margin-left:44px; display:inline-flex; align-items:center; gap:8px }
@media (max-width: 680px){ .guide-card .btn{ width:auto } }

/* Yes/No fieldset & checks */
.conditional-group[hidden]{ display:none !important; }
.yn-group{ display:inline-grid; grid-auto-flow:column; gap:10px; margin-top:8px }
.yn-btn{
  border:1.5px solid var(--border); background:#fff; border-radius:10px;
  padding:10px 14px; font-weight:700; cursor:pointer;
  transition:border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
.yn-btn[aria-pressed="true"]{
  border-color:var(--orange); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 16%, transparent);
}
fieldset.field{
  border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 0; min-inline-size: 0;
}
fieldset.field > legend{ padding: 0 8px; margin-left: 6px; font-weight: 600; color: var(--muted); }
fieldset.field:focus-within{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 16%, transparent); border-color: color-mix(in srgb, var(--orange) 35%, var(--border));
}
:root{ --check-size: 34px; --check-tick: 28px; }
.bc-check{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none }
.bc-check input[type="checkbox"]{
  position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; padding:0; margin:0; border:0;
}
.bc-box{
  inline-size:22px; block-size:22px; border:1.5px solid var(--border); border-radius:6px; background:#fff;
  display:inline-grid; place-items:center; transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
.bc-box::after{
  content:""; inline-size:14px; block-size:14px; transform:scale(0); transition: transform var(--t-1) var(--ease);
  background: var(--orange);
  mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path d='M3.8 13.2 L10.2 19.2 L20.4 7.6' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/>\
    </svg>") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
      <path d='M3.8 13.2 L10.2 19.2 L20.4 7.6' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/>\
    </svg>") center / contain no-repeat;
}
.bc-check input:checked + .bc-box{ border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 16%, transparent) }
.bc-check input:checked + .bc-box::after{ transform:scale(1) }
.bc-check input:focus-visible + .bc-box{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 25%, transparent) }
.bc-label{ font-weight:700; color:var(--ink) }

/* Hide admin for non-admins */
body[data-admin="0"] .admin-settings { display: none !important; }
/* Smooth accordion base */
.admin-settings-content{ overflow: hidden; height: 0; transition: height .28s ease; }
.admin-settings-content.is-collapsed{ height: 0 !important; }

/* Visually hidden utility used by icon sort */
.vh{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

[data-auth-msg] { margin-top: .5rem; font-size: .9rem; }
[data-auth-msg].is-error { color: #b91c1c; }
[data-auth-msg].is-ok { color: #065f46; }
[aria-busy="true"] { opacity:.7; pointer-events:none; }

/* show a subtle badge on the menu button when authenticated */
.is-auth .nav-toggle::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--bc-accent, #F29F05);
}

/* user identity row inside the nav */
.nav-user { padding: 8px 12px; border-bottom: 1px solid var(--bc-border,#e5e7eb); }
.nav-user__row { display:flex; align-items:center; gap:10px; }
.nav-user__avatar { font-size: 20px; }
.nav-user .muted { color: var(--muted,#6b7280); font-size: 12px; }

/* admin group */
.nav-admin { margin: 8px 0 0 0; padding: 8px 0 0 0; border-top: 1px dashed var(--bc-border,#e5e7eb); }
.nav-item--admin { font-weight: 600; }
.logout-modal menu { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }

/* Admin section in the nav */
#navMenu .nav-admin {
  list-style: none;
  padding-left: 0;      /* remove left indent */
  margin: 8px 0 0;
  border-top: 1px dashed var(--bc-border, #e5e7eb);
}
#navMenu .nav-admin li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#navMenu .nav-admin .nav-item {
  display: block;       /* make full-row clickable */
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;     /* matches your “admin” emphasis */
}
#navMenu .nav-admin .nav-item:hover {
  background: rgba(0,0,0,.04);
}

.admin-toolbar { display:flex; gap:12px; align-items:center; margin-bottom:12px; padding: 5px 0; }
.admin-toolbar .input { padding:8px 10px; border:1px solid var(--bc-border, #e5e7eb); border-radius:10px; }
/*.admin-toolbar .btn { padding:8px 12px; border-radius:12px; border:1px solid var(--bc-border, #e5e7eb); background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); cursor:pointer; }
.admin-toolbar .btn-accent { border-color: var(--bc-accent, #F29F05); }
.admin-toolbar .btn-danger { border-color:#ef4444; color:#ef4444; }*/
.admin-toolbar .muted { color: var(--muted, #6b7280); margin-left: 8px; }
.admin-grid-wrap { overflow:auto; border:1px solid var(--bc-border,#e5e7eb); border-radius:14px; }
.admin-grid { width:100%; border-collapse:separate; border-spacing:0; }
.admin-grid thead th { position:sticky; top:0; background:#fafafa; text-align:left; font-weight:600; padding:10px; border-bottom:1px solid var(--bc-border,#e5e7eb); }
.admin-grid td { padding:8px 10px; border-bottom:1px solid #f1f5f9; vertical-align:top; }
.admin-grid input, .admin-grid textarea { width:100%; padding:8px; border:1px solid #e5e7eb; border-radius:10px; font:inherit; }
.admin-grid textarea { min-height: 70px; }

#clients-grid tr:hover,
#users-grid tr:hover {
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* --- Make admin panels vertically-scrollable -------------------------------- */
.tab-panel .container {
  display: flex;
  flex-direction: column;
  min-height: 0;            /* CRUCIAL: allow scroll child to shrink */
}

/* a shell that holds toolbar + scroll area */
.admin-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;            /* allow inner scroll area to get height */
}

/* scroll area for the grid */
.admin-scroll {
  flex: 1 1 auto;
  min-height: 0;            /* needed when parent is flex */
  overflow: auto;           /* <— gets a scrollbar */
  /* Fit viewport minus any fixed header/nav if you have one */
  max-height: calc(100vh - var(--nav-height, 64px) - var(--panel-header, 56px));
}

/* improve table usability in a scroll container */
.admin-grid {
  width: 100%;
  border-collapse: collapse;
}
.admin-grid th, .admin-grid td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; }
.admin-grid thead th {
  position: sticky;
  top: 0;
  background: #fff;         /* so the sticky header isn't transparent */
  z-index: 1;
}

/* optional: avoid body being locked unless a modal is open */
body:not(.modal-open) { overflow: auto; }


/* ===== Admin Editor Panels (list <-> edit) ===== */
.admin-two { display:grid; grid-template-rows:auto 1fr; gap:12px; min-height:0; }
.admin-board { display:grid; grid-template-rows:auto 1fr; gap:12px; background:#fff; border:1px solid var(--bc-border); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; }
.admin-toolbar--board { padding:10px 12px; border-bottom:1px solid var(--bc-border); display:flex; gap:10px; align-items:center; }
.admin-body { min-height:0; overflow:auto; padding:12px; }

.admin-editor { display:grid; grid-template-rows:auto 1fr auto; min-height:0; }
.admin-editor .editor-head { padding:12px; border-bottom:1px solid var(--bc-border); display:flex; align-items:center; gap:12px; }
.admin-editor .editor-title { margin:0; font-weight:800; font-size:1.15rem; color:#0b1220 }
.admin-editor .editor-sub { color:var(--muted); }
.admin-editor .editor-form { padding:12px; min-height:0; overflow:auto; display:grid; gap:12px; }
.admin-editor .grid-2 { grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px){ .admin-editor .grid-2 { grid-template-columns:1fr } }
.editor-actions {
  position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px;
  padding:10px; border-top:1px solid var(--bc-border); background:#fff;
}

/* Consistent field styling */
.form-field { display:grid; gap:6px; }
.form-field label { font-weight:600; color:#374151; font-size:.95rem; }
.form-field :is(input,select,textarea) {
  width:100%; padding:12px 14px; border:1px solid var(--bc-border); border-radius:10px; background:#fff; font:inherit;
}
.form-field textarea { min-height:110px; }

/* Hide/show the two subpanels */
.panel-sub { display:none; }
.panel-sub.is-active { display:grid; }


/* Keep the Actions column visible on horizontal scroll */
.admin-grid th.sticky-right,
.admin-grid td.sticky-right {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 2;
  box-shadow: -1px 0 0 var(--bc-border, #e5e7eb); /* subtle left border */
}
.admin-grid thead th.sticky-right { z-index: 3; }
