/* ============================================================
   Brett Colby Group — Homepage Mockups (Version A + B)
   Shared stylesheet. Version B differences are scoped to body.v2
   Brand: RE/MAX (blue / red / white). Type: Roboto sitewide.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --remax-blue:#003DA5;
  --remax-blue-dark:#002A6E;
  --remax-red:#DC1C2E;
  --remax-red-dark:#B3121F;
  --ink:#1A1F2B;
  --slate:#5A6473;
  --cloud:#F4F6F9;
  --line:#E2E7EE;
  --white:#fff;

  --container:1200px;
  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 2px 8px rgba(16,31,60,.08);
  --shadow-md:0 12px 30px rgba(16,31,60,.12);
  --shadow-lg:0 24px 60px rgba(16,31,60,.18);

  --space:clamp(56px,7vw,96px);   /* vertical section rhythm */
  --ff:"Roboto",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  --ff-cond:"Roboto Condensed",var(--ff);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);color:var(--ink);
  background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:700;letter-spacing:-.01em}

.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding-block:var(--space)}
.section--cloud{background:var(--cloud)}

/* section heading pattern */
.eyebrow{
  font-family:var(--ff-cond);text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;font-size:.78rem;color:var(--remax-red);margin:0 0 12px;
}
.section-head{max-width:760px;margin:0 auto 44px;text-align:center}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.section-head p{color:var(--slate);margin:14px 0 0;font-size:1.05rem}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  font-weight:600;font-size:.98rem;padding:14px 26px;border-radius:var(--radius-sm);
  border:2px solid transparent;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--remax-red);color:#fff}
.btn--primary:hover{background:var(--remax-red-dark);box-shadow:var(--shadow-md)}
.btn--blue{background:var(--remax-blue);color:#fff}
.btn--blue:hover{background:var(--remax-blue-dark);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;border-color:#fff;color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--outline{background:#fff;border-color:var(--remax-blue);color:var(--remax-blue)}
.btn--outline:hover{background:var(--remax-blue);color:#fff}
.btn--lg{padding:16px 34px;font-size:1.05rem}

/* accessibility */
:focus-visible{outline:3px solid var(--remax-red);outline-offset:2px;border-radius:4px}

/* extra brand tokens */
:root{ --footer-navy:#233B67; --footer-navy-2:#1b2e52; --aqua:#81C1CD; --navy-text:#16335f; }

/* ============================================================
   HEADER / FOOTER / CTA BAND / SKIP LINK — see new-chrome.css.
   The chrome is styled ONLY there (it loads on every page, incl.
   the homepage, after this file). Do not re-add chrome rules here.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:min(86vh,720px);display:flex;align-items:center;
  overflow:hidden;background:#06203f;color:#fff}
.hero__media{background-color:#06203f;
  background-image:url(/userfiles/sky/hero-poster.webp);
  background-position:center;background-size:cover;background-repeat:no-repeat}
.hero__media,.hero__media video,.hero__media img,.hero__media iframe{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,18,44,.55),rgba(2,18,44,.35) 45%,rgba(2,18,44,.72))}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:64px}
/* boxes sized so headline + lede each break into 2 lines on desktop
   (the old 16ch/46ch widths — not the font size — forced 3 lines) */
.hero h1{font-size:clamp(2rem,4.6vw,3.5rem);max-width:26ch;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35);
  min-height:2lh /* both tab headlines get 2 lines' room, so swapping them can't move the layout */}
.hero p.lede{font-size:clamp(1.05rem,2vw,1.3rem);max-width:72ch;text-wrap:balance;margin:18px 0 0;color:#e8eefb}

/* segmented toggle — "make look like more buttons, larger, centered" */
.toggle{display:inline-flex;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px;gap:6px;margin-bottom:18px}
.toggle button{border:0;background:transparent;color:#fff;font-family:var(--ff-cond);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.02rem;
  padding:12px 28px;border-radius:999px;transition:.2s}
.toggle button[aria-selected="true"]{background:#fff;color:var(--remax-blue)}

/* search bar (overlay in A) */
.searchbar{background:#fff;color:var(--ink);border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow-lg);display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr auto;gap:12px;align-items:end;margin-top:10px}
.searchbar .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.searchbar label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--slate)}
.searchbar input,.searchbar select{
  width:100%;padding:13px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.95rem;background:#fff;color:var(--ink)}
.searchbar .btn{height:48px;white-space:nowrap}
.searchbar__more{grid-column:1/-1;justify-self:start;background:none;border:0;
  color:var(--remax-blue);font-weight:600;font-size:.9rem;padding:2px 0}

/* hero tab panes — "Find a Home" (search) / "Home Estimates" (Homebot) */
/* both panes share one grid cell: the hidden one still contributes to the hero's
   height (visibility, not display:none), so switching tabs never shifts the layout —
   and Homebot's iframe can size itself even while its pane is hidden */
.hero-panes{display:grid}
.hero-pane{grid-area:1/1;visibility:hidden}
.hero-pane.is-active{visibility:visible}
.estimate-card{background:#fff;color:var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:20px;margin-top:10px;max-width:640px}
.estimate-card #homebot_homeowner iframe{max-width:100%}

.hero--centered .hero__inner{text-align:center}
.hero--centered .hero h1,.hero--centered .hero p.lede{margin-inline:auto}

/* ============================================================
   SEARCH CARD (Version B — pulled below hero)
   ============================================================ */
.searchsection{background:var(--cloud)}
.searchsection .container{position:relative}
.searchcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:22px;margin-top:-56px;position:relative;z-index:5}
.searchcard .toggle{background:var(--cloud);border-color:var(--line);margin-bottom:16px}
.searchcard .toggle button{color:var(--slate)}
.searchcard .toggle button[aria-selected="true"]{background:var(--remax-blue);color:#fff}
.searchcard .searchbar{box-shadow:none;padding:0;margin-top:0}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews__rating{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px}
.reviews__rating .big{font-family:var(--ff-cond);font-weight:700;font-size:1.6rem;letter-spacing:.02em}
.stars{color:#FBBC04;letter-spacing:3px;font-size:1.2rem}
.reviews__rating .meta{color:var(--slate);font-size:.92rem}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px}
.review-card .head{display:flex;align-items:center;gap:12px}
.review-card .avatar{width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--remax-blue);color:#fff;display:grid;place-items:center;font-weight:700}
.review-card .name{font-weight:700;font-size:.98rem}
.review-card .date{color:var(--slate);font-size:.82rem}
.review-card .stars{font-size:1rem;letter-spacing:2px}
.review-card p{margin:0;color:#3b4252;font-size:.96rem}
.reviews__actions{text-align:center;margin-top:34px}

/* ============================================================
   TEAM  (A: photo + bio  /  B: cutout on gradient)
   ============================================================ */
.team .container{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.team__photo img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%}
.team__bio h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.team__bio .eyebrow{text-align:left}
.team__bio p{color:#3b4252;margin:16px 0 0}
.team__bio .actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
/* Version A only — team photo on the RIGHT (desktop). Mirrors the column widths so the
   photo keeps its slightly-larger share. Below 981px this block doesn't apply, so the
   existing mobile rule (single column, photo-first) is unchanged. Version B (.v2) untouched. */
@media (min-width:981px){
  body.v1 .team .container{grid-template-columns:1fr 1.05fr}
  body.v1 .team__bio{order:1}
  body.v1 .team__photo{order:2}
}

/* Version B — gradient team band */
.team--gradient{background:linear-gradient(120deg,var(--remax-blue) 0%,var(--remax-blue-dark) 60%,#06183a 100%);
  color:#fff;overflow:hidden;position:relative}
.team--gradient::before{content:"";position:absolute;right:-10%;top:-30%;width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(220,28,46,.28),transparent 60%);pointer-events:none}
.team--gradient .container{position:relative;z-index:1}
.team--gradient .eyebrow{color:#ffd2d6}
.team--gradient .team__bio p{color:#dfe7f5}
.team--gradient .team__photo img{
  border-radius:0;box-shadow:none;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));
  /* If team-cutout.png (transparent bg) is supplied, point src here for the floating effect */
}
.team--gradient .team__photo.is-photo img{border-radius:var(--radius);box-shadow:var(--shadow-lg);filter:none}

/* ============================================================
   NEIGHBORHOOD GRID  (8 community tiles)
   ============================================================ */
.hood-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hood-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-sm);
  /* PLACEHOLDER background — swap each .hood-card for a real image later */
  background:linear-gradient(135deg,#234a86,#0a294f);isolation:isolate}
.hood-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.62));}
.hood-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hood-card__body{padding:18px;width:100%}
.hood-card h3{font-size:1.12rem;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hood-card .explore{margin-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-cond);text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  font-size:.8rem;padding:8px 14px;border:1px solid rgba(255,255,255,.6);border-radius:999px}
.hood-card:hover .explore{background:#fff;color:var(--remax-blue)}
.hood-card .ph-tag{position:absolute;top:10px;left:10px;z-index:1;background:rgba(255,255,255,.85);
  color:var(--slate);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:4px}

/* Version B only — 6-tile mosaic: 2 tall (col 1 & 4) flanking a 2x2 of shorter tiles.
   DOM order = tall, short, short, tall, short, short -> grid auto-places into the pattern.
   Scoped to .v2 so Version A's 8-tile 4-col grid is untouched. */
body.v2 .hood-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(180px,20vw,250px)}
body.v2 .hood-card{aspect-ratio:auto;height:100%}
body.v2 .hood-card--tall{grid-row:span 2}

/* ============================================================
   BUYING / SELLING two-column
   ============================================================ */
.bs-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.bs-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.bs-col__tag{font-family:var(--ff-cond);text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;font-size:.8rem}
.bs-col--buy{border-top:5px solid var(--remax-blue)}
.bs-col--buy .bs-col__tag{color:var(--remax-blue)}
.bs-col--sell{border-top:5px solid var(--remax-red)}
.bs-col--sell .bs-col__tag{color:var(--remax-red)}
.bs-col h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:10px 0 14px}
.bs-col p{color:#3b4252;margin:0 0 24px}

/* ============================================================
   WELCOME (Version B intro copy block)
   ============================================================ */
.welcome .container{max-width:880px;text-align:center}
.welcome h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.welcome p{color:#3b4252;font-size:1.08rem;margin:18px 0 0}

/* ============================================================
   LISTINGS  /  NEW CONSTRUCTION  (IDX placeholders)
   ============================================================ */
.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.listing-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.listing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.listing-card__media{position:relative;aspect-ratio:3/2;background:var(--cloud)}
.listing-card__media img{width:100%;height:100%;object-fit:cover}
.listing-card__price{position:absolute;left:0;bottom:0;background:rgba(0,61,165,.92);color:#fff;
  font-weight:700;font-size:1.05rem;padding:8px 14px;border-top-right-radius:8px;letter-spacing:.01em}
.listing-card__body{padding:16px 18px 20px}
.listing-card__specs{font-family:var(--ff-cond);font-weight:700;color:var(--ink);font-size:.95rem;
  letter-spacing:.02em;display:flex;gap:14px}
.listing-card__addr{color:var(--slate);font-size:.9rem;margin-top:6px}
.idx-note{margin-top:30px;text-align:center;color:var(--slate);font-size:.85rem}
.idx-flag{display:inline-block;background:#fff;border:1px dashed var(--remax-blue);color:var(--remax-blue);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:6px}

/* carousel dots (decorative placeholder) */
.dots{display:flex;gap:8px;justify-content:center;margin-top:28px}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots span:first-child{background:var(--remax-blue)}

/* ============================================================
   VERSION D — #1 AGENT BADGE (bio/welcome band)
   White card because the supplied artwork is black-on-transparent.
   ============================================================ */
.badge-card{background:#fff;border-radius:10px;padding:14px 18px;margin-top:22px;
  box-shadow:var(--shadow-md);display:inline-block;max-width:420px}
.badge-card img{width:100%;height:auto;display:block}

/* ============================================================
   VERSION D — NEW CONSTRUCTION (combined: homes + communities)
   ============================================================ */
.nc-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,44px)}
.nc-col{display:flex;flex-direction:column}
.nc-col__title{font-size:1.15rem;padding-bottom:12px;margin-bottom:18px;
  border-bottom:2px solid var(--line);color:var(--ink)}
.nc-list{display:flex;flex-direction:column;gap:14px}
.nc-item{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease}
.nc-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.nc-item__media{aspect-ratio:4/3;background:var(--cloud);height:100%}
.nc-item__media img{width:100%;height:100%;object-fit:cover}
.nc-item__body{padding:12px 14px 12px 0;min-width:0}
.nc-item__price{font-weight:700;font-size:1.12rem;color:var(--remax-blue);line-height:1.2}
.nc-item__specs{font-family:var(--ff-cond);font-weight:700;font-size:.9rem;display:flex;gap:12px;margin-top:4px}
.nc-item__addr,.nc-item__meta{color:var(--slate);font-size:.86rem;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-item__name{font-weight:700;font-size:1.08rem;color:var(--ink);line-height:1.2}
.nc-item__link{display:inline-block;margin-top:8px;font-family:var(--ff-cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;color:var(--remax-red)}
.nc-item--community:hover .nc-item__link{text-decoration:underline}
.nc-col__cta{margin-top:20px;align-self:flex-start}

/* (footer CTA band + footers are styled in new-chrome.css) */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .review-grid{grid-template-columns:1fr}
  .team .container{grid-template-columns:1fr}
  .listing-grid{grid-template-columns:repeat(2,1fr)}
  .hood-grid{grid-template-columns:repeat(2,1fr)}
  /* Version D — new-construction columns stack */
  .nc-split{grid-template-columns:1fr;gap:36px}
  /* Version B mosaic collapses to a uniform 2-col grid (tall spans + auto-rows reset) */
  body.v2 .hood-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  body.v2 .hood-card{aspect-ratio:4/5;height:auto}
  body.v2 .hood-card--tall{grid-row:auto}
  .searchbar{grid-template-columns:1fr 1fr}
  .searchbar .field--q{grid-column:1/-1}
  .searchbar .btn{grid-column:1/-1}
}
@media (max-width:620px){
  .bs-grid{grid-template-columns:1fr}
  .listing-grid{grid-template-columns:1fr}
  .hood-grid{grid-template-columns:1fr}
  body.v2 .hood-grid{grid-template-columns:1fr}
  /* Version D — new-construction items go full-width image on top */
  .nc-item{grid-template-columns:1fr}
  .nc-item__media{aspect-ratio:16/9;height:auto}
  .nc-item__body{padding:12px 14px 16px}
  .badge-card{max-width:100%}
  .searchbar{grid-template-columns:1fr}
  .hero{min-height:auto}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ============================================================
   sky-new ADDITIONS — homepage blocks ported from the old theme
   (city listing rows, CMS prose, agents, blog) in the new style
   ============================================================ */

/* section header row: title left, view-all + arrows right */
/* listing rows use the centered .section-head (mockup "Listed by Brett Colby" style);
   arrows + View All sit centered under the row, where the mockup's idx-note was */
.section-head h2 a{color:inherit}
.section-head h2 a:hover{color:var(--remax-blue)}
.rowfoot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px}
.rowfoot .viewall{color:var(--remax-blue);font-weight:600;font-size:.95rem;white-space:nowrap}
.rowfoot .viewall:hover{text-decoration:underline}
.cnav{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--remax-blue);font-size:1rem;display:grid;place-items:center;padding:0;
  transition:background .15s ease,color .15s ease}
.cnav:hover{background:var(--remax-blue);color:#fff}

/* horizontal scroll-snap card row (replaces the old owl carousels) */
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.hscroll>*{scroll-snap-align:start}
@media (max-width:980px){.hscroll{grid-auto-columns:calc((100% - 24px)/2)}}
@media (max-width:620px){.hscroll{grid-auto-columns:86%}}

/* CMS copy blocks (pageCopy1..4 blobs) styled to match the new design */
.prose{max-width:880px;margin-inline:auto}
.prose h1,.prose h2{font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.2;margin:0 0 16px}
.prose h3{font-size:1.25rem;margin:24px 0 12px}
.prose p{color:#3b4252;margin:0 0 14px;font-size:1.02rem}
.prose ul,.prose ol{color:#3b4252;margin:0 0 14px;padding-left:22px}
.prose img{max-width:100%;height:auto;border-radius:var(--radius)}
.prose a{color:var(--remax-blue);font-weight:600}
.prose a:hover{text-decoration:underline}

/* agents (OUR TEAM) */
.agent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.agent-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:26px 20px;text-align:center}
.agent-card img{width:110px;height:110px;border-radius:50%;object-fit:cover;margin:0 auto 14px}
.agent-card .name{font-weight:700;font-size:1.05rem}
.agent-card .role{color:var(--slate);font-size:.88rem;margin-top:2px}
.agent-card .phone{color:var(--remax-blue);font-weight:600;font-size:.92rem;margin-top:8px;display:block}
.agent-card .view{display:inline-block;margin-top:12px;font-family:var(--ff-cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;color:var(--remax-red)}
@media (max-width:980px){.agent-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.agent-grid{grid-template-columns:1fr}}

/* blog + newsletters */
.blog-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.blog-split img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.doc-list{list-style:none;margin:18px 0 0;padding:0}
.doc-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.doc-list a{color:var(--remax-blue);font-weight:600}
@media (max-width:980px){.blog-split{grid-template-columns:1fr}}