/* Hansen Homes -- palette sampled from hansen-homes-logo-transparent.png */
:root{
  --navy:#203342; --sub:#668095; --sky:#8caebb;
  --water-light:#a2c3d0; --water-mid:#86b2c5; --warm:#e3d3c3;
  --ground:#ffffff; --ink:#203342; --muted:#5d7385;
  --rule:rgba(32,51,66,.14); --shell:#f6f8f9;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Jost,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300; font-size:17px; line-height:1.65;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--navy)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}

/* the signature: never set the name tight */
.brandmark{letter-spacing:.30em}
.brandmark .homes{letter-spacing:.42em; color:var(--sub)}
h1,h2,h3{font-weight:300; letter-spacing:.06em; line-height:1.22; margin:0 0 .5em}
h1{font-size:clamp(30px,5vw,50px)}
h2{font-size:clamp(23px,3.2vw,32px)}
h3{font-size:19px}
.eyebrow{
  font-size:12px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--sub); margin:0 0 14px
}

/* header */
.site-head{border-bottom:1px solid var(--rule); background:var(--ground);
  position:sticky; top:0; z-index:40}
.site-head .wrap{display:flex; align-items:center; gap:20px; min-height:82px}
.logo img{height:52px; width:auto}
.site-nav{margin-left:auto; display:flex; flex-wrap:wrap; gap:22px; align-items:center}
.site-nav a{
  text-decoration:none; color:var(--navy); font-size:12.5px;
  letter-spacing:.20em; text-transform:uppercase; padding:6px 0;
  border-bottom:1px solid transparent
}
.site-nav a:hover,.site-nav a[aria-current=page]{border-bottom-color:var(--sky)}
.site-nav .tel{color:var(--sub)}

/* buttons */
.btn{
  display:inline-block; padding:15px 30px; border:0; cursor:pointer;
  background:var(--navy); color:#fff; text-decoration:none;
  font-family:inherit; font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:400
}
.btn:hover{background:#16242f}
.btn.ghost{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy)}
.btn.ghost:hover{background:var(--navy); color:#fff}

/* hero */
.hero{background:linear-gradient(180deg,var(--warm) 0%,var(--water-light) 58%,var(--water-mid) 100%);
  padding:86px 0 92px}
.hero h1{max-width:17ch}
.hero p.lede{font-size:19px; max-width:52ch; color:var(--navy); opacity:.9}
.hero .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}

section{padding:74px 0}
section.shell{background:var(--shell)}
.lede{font-size:18px; max-width:64ch; color:var(--muted)}

/* grids */
.grid{display:grid; gap:26px}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* house card */
.card{background:#fff; border:1px solid var(--rule); display:flex; flex-direction:column}
.card .shot{position:relative; background:var(--shell)}
.card .shot img{width:100%; aspect-ratio:16/10; object-fit:cover}
.card .body{padding:22px; display:flex; flex-direction:column; gap:12px; flex:1}
.card h3{margin:0}
.badges{position:absolute; top:14px; left:14px; display:flex; gap:8px; flex-wrap:wrap}
.badge{
  font-size:10.5px; letter-spacing:.20em; text-transform:uppercase;
  padding:7px 12px; background:var(--navy); color:#fff; font-weight:400
}
.badge.uc{background:var(--sub)}
.badge.cs{background:var(--navy)}
.badge.sold{background:#4a5c68}
.badge.sample{background:#b4471f}
.facts{
  display:flex; gap:18px; flex-wrap:wrap; list-style:none; margin:0; padding:0;
  font-size:14px; color:var(--muted)
}
.facts li strong{font-weight:400; color:var(--navy)}
.price{font-size:23px; letter-spacing:.05em}
.city{font-size:15px; color:var(--muted); letter-spacing:.10em; text-transform:uppercase}
.finishing{font-size:15px; color:var(--navy); letter-spacing:.10em; text-transform:uppercase}
.notlisted{
  font-size:13px; color:var(--muted); border-left:2px solid var(--sky);
  padding-left:12px; margin:0
}
.rendering-note{font-size:12px; color:var(--muted); font-style:italic; margin:8px 0 0}

/* progress */
.progress{margin-top:4px}
.progress .track{height:5px; background:var(--rule)}
.progress .fill{height:5px; background:var(--sub)}
.progress .pct{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:7px}

/* timeline */
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.timeline li{display:flex; gap:14px; align-items:baseline; padding:11px 0;
  border-bottom:1px solid var(--rule); font-size:15px}
.timeline .dot{width:9px; height:9px; border-radius:50%; background:var(--rule); flex:none}
.timeline li.done .dot{background:var(--sub)}
.timeline li.done{color:var(--navy)}
.timeline li:not(.done){color:var(--muted)}
.timeline .when{margin-left:auto; font-size:13px; letter-spacing:.10em; text-transform:uppercase}

/* forms */
form.lead{display:grid; gap:14px; max-width:520px}
form.lead .row{display:grid; gap:14px; grid-template-columns:1fr 1fr}
label{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  display:block; margin-bottom:6px}
input,select,textarea{
  width:100%; padding:14px 15px; border:1px solid var(--rule); background:#fff;
  font-family:inherit; font-size:16px; font-weight:300; color:var(--ink); border-radius:0
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky); outline-offset:-2px}
textarea{min-height:110px; resize:vertical}
.consent{font-size:12.5px; color:var(--muted); line-height:1.5}
.consent input{width:auto; margin-right:8px}
.formnote{font-size:12.5px; color:var(--muted)}
.formok{background:var(--warm); padding:18px 20px; color:var(--navy)}
.agent-id{font-size:12px; color:var(--muted); line-height:1.55; margin-top:22px;
  padding-top:16px; border-top:1px solid var(--rule); max-width:60ch}

/* stats */
.stat{padding:26px 0}
.stat .n{font-size:38px; letter-spacing:.04em; color:var(--navy)}
.stat .k{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}

/* team */
.person .shot{background:var(--shell); aspect-ratio:1/1; overflow:hidden}
/* Square crop out of whatever ratio the BCB photographer sent: Gabi's is square,
   Jelena's and Tarek's are tall portraits. Centring a tall portrait cuts the face
   in half, so the crop is pulled upward. */
.person .shot img{width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.person .role{font-size:12px; letter-spacing:.20em; text-transform:uppercase; color:var(--sub)}
/* Licence number under the role. Quiet, but present: this is a licensed team
   page and the number is the thing a consumer can actually check.
   Gabi Bottura carries none here on purpose -- lib/compliance.check_identity(). */
.person .dre{font-size:12px; letter-spacing:.06em; color:var(--sub); margin-top:6px}

/* guide */
.guide{max-width:760px}
.guide h2{margin-top:48px}
.guide ol,.guide ul{padding-left:22px}
.guide li{margin:9px 0}
.callout{background:var(--shell); border-left:3px solid var(--sky); padding:20px 24px; margin:28px 0}

/* footer */
.site-foot{background:var(--navy); color:#cfdae2; padding:56px 0 34px; margin-top:0}
.site-foot a{color:#cfdae2; text-decoration:none}
.site-foot a:hover{color:#fff; text-decoration:underline}
.site-foot .cols{display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.site-foot h4{font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  color:#8fa6b6; margin:0 0 14px; font-weight:400}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14.5px}
.site-foot .legal{margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px; color:#8fa6b6; line-height:1.6}
.foot-brand{font-size:17px; letter-spacing:.30em; color:#fff; margin-bottom:10px}
.foot-tag{font-size:11px; letter-spacing:.24em; color:#8fa6b6}

@media(max-width:720px){
  .site-head .wrap{min-height:68px; gap:12px}
  .site-nav{gap:14px}
  .site-nav a{font-size:11px; letter-spacing:.14em}
  .logo img{height:40px}
  .hero{padding:56px 0 60px}
  section{padding:52px 0}
  form.lead .row{grid-template-columns:1fr}
}
@media print{
  .site-head,.site-foot,.noprint{display:none!important}
  body{font-size:12pt}
  .guide{max-width:none}
}

/* ---------------------------------------------------------------------------
   HERO, DEK-ORDER-2026-09-09-42
   --------------------------------------------------------------------------- */

/* The hero mark. Gabi picked full colour 2026-09-09; the white knockout is gone. */
.heromark{margin:0 auto 22px}
.heromark img{width:clamp(120px,17vw,190px); height:auto; margin:0 auto; display:block}

.hero .identity{text-align:center}
.hero .heromark + .identity{margin-top:0}

/* Brad's "first picture". Uploaded at /photos and served from /photo/hero.jpg, so
   it appears the moment Gabi drops it in, with no rebuild. The navy underneath is
   not a fallback that has to be arranged: a background image that 404s simply does
   not paint, and the panel reads as intended either way. .has-photo is always on
   for that reason.

   Full bleed with the navy overlay, per the order 60 mockup: the photograph at
   full strength under a navy gradient that deepens towards the buttons, and the
   block fills most of the first screen. */
.hero.has-photo{position:relative; color:#fff; background:var(--navy);
  min-height:min(88svh,880px); display:grid; align-items:center}
.hero.has-photo::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(32,51,66,.35),rgba(32,51,66,.75)),
             url("/photo/hero.jpg") center/cover no-repeat}
.hero.has-photo > .wrap{position:relative}
.hero.has-photo h1,.hero.has-photo .lede,.hero.has-photo .identity{color:#fff}

/* Buttons over a photograph, AMEND-order-60c. The primary stays solid navy with
   white text. The secondary used to be navy text with a navy hairline, which
   vanished on the light concrete of the hero photo: over a photo it is white text,
   a white 1px line, no fill, and it fills white with navy text on hover. This rule
   is on .has-photo, so any block that puts a button over a photo gets it. */
.hero.has-photo .btn.ghost{color:#fff; box-shadow:inset 0 0 0 1px #fff; background:transparent}
.hero.has-photo .btn.ghost:hover{background:#fff; color:var(--navy)}

/* Brad's headshot in the hero, AMEND-order-60 item 7. The same file /team uses,
   small, under the eyebrow, with a white ring so it reads on any photo. */
.hero .headshot{width:64px; height:64px; border-radius:50%; object-fit:cover;
  object-position:50% 22%; margin:0 auto 18px; box-shadow:0 0 0 2px rgba(255,255,255,.9)}

@media (max-width:560px){
  .heromark img{width:clamp(96px,30vw,140px)}
}

/* The mark and the identity line are centred by the order. A left-aligned H1
   under a centred logo reads as a mistake, so the whole hero block centres.
   Everything below the hero keeps its left alignment. */
.hero .wrap{text-align:center}
.hero h1,.hero p.lede{margin-left:auto; margin-right:auto}
.hero .cta{justify-content:center}

/* The header is sticky, so an in-page jump to #flips would put the heading
   underneath it. DEK-ORDER-2026-09-09-42 item 2. */
#flips,#contact{scroll-margin-top:86px}
html{scroll-behavior:smooth}

/* ---------------------------------------------------------------------------
   THE COPY-OVER PACK, DEK-ORDER-2026-09-09-44
   FAQ, glossary, neighbourhood guides, buying and selling guides.
   --------------------------------------------------------------------------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 10px}
.chips .chip{border:1px solid var(--rule); color:var(--sub); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; padding:7px 13px; text-decoration:none}
.chips .chip:hover{border-color:var(--sub); color:var(--navy)}

.qa-group{padding-top:14px; scroll-margin-top:86px}
.qa-group h2{margin-top:42px}
.qa{border-bottom:1px solid var(--rule); padding:20px 0}
.qa h3{font-size:17px; font-weight:400; margin:0 0 8px}
.qa p{margin:0; font-size:15px; line-height:1.8; color:var(--sub)}

.arealist{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px; margin-top:28px}
.arealist .arealink{border:1px solid var(--rule); padding:16px 18px;
  text-decoration:none; color:var(--navy); font-size:15px; line-height:1.45}
.arealist .arealink:hover{border-color:var(--sub); background:var(--shell)}

.guide h2{margin-top:36px}
.guide h3{margin-top:26px; font-size:17px; font-weight:400}
.guide ul{margin:14px 0 0 18px}
.guide li{margin-bottom:8px; line-height:1.8; color:var(--sub)}
.learn-cta{margin-top:48px; padding-top:26px; border-top:1px solid var(--rule)}



/* Brad's track record. Three numbers, given by Gabi 2026-09-10, rendered from
   BRAD_STATS in lib/pages.py so the home page and /about cannot drift apart.
   Wraps to one column on a phone rather than squeezing three columns to nothing. */
.stats{display:flex; flex-wrap:wrap; gap:34px}
.stats div{min-width:96px}
.stats strong{display:block; font-size:30px; font-weight:300; letter-spacing:-.01em;
  color:var(--navy); line-height:1.1}
.stats span{display:block; margin-top:4px; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sub)}
@media (max-width:520px){ .stats{gap:22px} .stats strong{font-size:25px} }


/* THE TWO NAV MENUS, Gabi 2026-09-10.
   Built on <details>/<summary> so a tap opens them with no JavaScript, which is
   what a phone does and what a broken script cannot take away. On a device with a
   real pointer, CSS opens them on hover and the click still navigates. */
.site-nav .menu{position:relative; display:inline-block}
/* A summary is not an <a>, so it needs the nav's own type treatment spelled out
   or it renders in sentence case beside seven uppercase siblings. */
.site-nav .menu>summary{list-style:none; cursor:pointer; display:inline-block;
  color:var(--navy); font-size:12.5px; letter-spacing:.20em; text-transform:uppercase;
  padding:6px 0; border-bottom:1px solid transparent}
.site-nav .menu>summary:hover,
.site-nav .menu>summary[aria-current=page]{border-bottom-color:var(--sky)}
/* Inside the menu the items are a list to read, not a bar to scan, so they keep
   their capitals and drop the wide tracking. */
.site-nav .menu-pop a{text-transform:none; letter-spacing:.02em; border-bottom:0}
.site-nav .menu>summary::-webkit-details-marker{display:none}
.site-nav .menu>summary::after{content:""; display:inline-block; width:5px; height:5px;
  margin-left:7px; vertical-align:2px; border-right:1px solid currentColor;
  border-bottom:1px solid currentColor; transform:rotate(45deg); opacity:.55}
.site-nav .menu-pop{position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%); min-width:232px; background:var(--ground);
  border:1px solid var(--rule); box-shadow:0 14px 40px rgba(32,51,66,.13);
  padding:8px 0; z-index:60; display:flex; flex-direction:column}
.site-nav .menu-pop a{display:block; padding:11px 20px; letter-spacing:.06em;
  font-size:12.5px; white-space:nowrap; text-align:left}
.site-nav .menu-pop a:hover{background:var(--shell)}
/* A hover bridge, so the pointer can cross the gap without the menu closing. */
.site-nav .menu[open]>summary::before{content:""; position:absolute; left:0; right:0;
  top:100%; height:14px}
@media (hover:hover) and (pointer:fine){
  .site-nav .menu:hover .menu-pop{display:flex}
  .site-nav .menu:not([open]) .menu-pop{display:none}
  .site-nav .menu:hover:not([open]) .menu-pop{display:flex}
}
@media (max-width:820px){
  .site-nav .menu{position:static}
  .site-nav .menu-pop{position:static; transform:none; border:0; box-shadow:none;
    padding:2px 0 6px; min-width:0}
  .site-nav .menu-pop a{padding:8px 0 8px 14px}
}


/* FINISHED WORK. Photographs of completed houses, Gabi 2026-09-10. Deliberately a
   different card from a sale card: no price, no closing date, no production claim.
   The photo leads, because that is the whole point of showing a finished house. */
.donecard{border:1px solid var(--rule); background:var(--ground); overflow:hidden}
.donecard img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover}
.donecard .noshot{width:100%; aspect-ratio:3/2; display:flex; align-items:center;
  justify-content:center; background:var(--sky); color:var(--ground)}
.donecard .noshot span{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.85}
.donebody{padding:20px 22px 24px}
.donebody .city{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sub); margin-bottom:6px}
.donebody h3{font-size:20px; font-weight:400; margin:0 0 8px}
.donebody .lede{font-size:15px; margin:0}

/* The sell and buy blocks on the home page, each beside its photograph from the
   /photos desk (order 60). The picture sits to the right of the words on a wide
   screen, .flip puts it on the left, and on a phone it stacks under the text. If
   the slot is empty the frame removes itself and the block is one column again. */
.block-photo{align-items:center; gap:44px}
.block-photo .shot{background:var(--shell); overflow:hidden}
.block-photo .shot img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
/* The About block: Brad with his dog is a portrait, 1800 by 2400. */
.block-photo.portrait .shot img{aspect-ratio:3/4}
@media (min-width:721px){
  .block-photo.flip > div:first-child{order:2}
  .block-photo.flip > .shot{order:1}
}

/* THE FLIPS CAROUSEL on the home page, AMEND-order-60e. The completed cards from
   /flips, exactly as they look there, in a row that scrolls sideways. Plain
   overflow scroll with CSS scroll snap: a phone swipes it with no script, a
   pointer gets two small arrows that the script wires up. No library. */
.reel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px}
.reel-nav{display:none; gap:10px; flex:none; padding-bottom:6px}
.reel-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--navy);
  background:var(--ground); color:var(--navy); font:inherit; font-size:18px;
  line-height:1; cursor:pointer; display:grid; place-items:center; padding:0}
.reel-btn:hover{background:var(--navy); color:#fff}
.reel-btn:disabled{opacity:.3; cursor:default; background:var(--ground); color:var(--navy)}
.reel{display:flex; gap:22px; margin-top:34px; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:2px; scroll-padding-inline:0}
.reel::-webkit-scrollbar{display:none}
.reel > *{flex:0 0 min(84%,340px); scroll-snap-align:start}
@media (min-width:721px){
  .reel > *{flex-basis:clamp(300px,38%,440px)}
}
@media (hover:hover) and (pointer:fine) and (min-width:721px){
  .reel-nav{display:flex}
}

/* Her own site, under her name on /team and nowhere else. Gabi 2026-09-10. */
.ownsite{margin-top:3px}
.ownsite a{font-size:12.5px; color:var(--sub); text-decoration:none;
  border-bottom:1px solid var(--rule)}
.ownsite a:hover{color:var(--navy); border-bottom-color:var(--sky)}