/* home.css: the getcasaroo.com home page only. Loaded after casaroo-site.css.
   Design source: the Casaroo Redesign canvas, home page. Nov 2026. */
*{box-sizing:border-box}
body{margin:0;background:#FFFFFF;font-size:18px;line-height:1.6}
.h-wrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}
.h-d{font-family:var(--cx-display);font-weight:800;letter-spacing:.005em}
.h-sec{padding:104px 0 96px}
.h-2col{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end;margin-bottom:40px}
.h-2col p{margin:0;color:var(--cx-soft)}
.h-h2{font-size:72px;line-height:.95;margin:0}
main a{color:var(--cx-teal);text-underline-offset:3px;text-decoration-thickness:1.5px}
main a:hover{color:var(--cx-deep)}

/* hero */
.h-hero{background-color:var(--cx-deep);background-image:var(--cx-grid);background-size:32px 32px;color:var(--cx-on-deep);padding:40px 0 150px}
.h-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.h-hero h1{font-size:104px !important;line-height:.92 !important;margin:0 0 28px;color:#FFFFFF}
.h-hero-lead{margin:0 0 22px;font-size:20px;max-width:28em;color:var(--cx-on-deep-soft)}
.h-hero-sub{margin:0;font-size:17px}
.h-hero a{color:var(--cx-mint)}
.h-hero a:hover{color:#FFFFFF}
.h-art{position:relative}
.h-art svg{width:100%;height:auto;display:block}
.h-tag{position:absolute;width:200px;background:#FFFFFF;color:var(--cx-ink);border-radius:8px;padding:10px 12px;font-size:14px;line-height:1.35;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.h-tag strong{display:block;font-size:15px}
.h-tag .cx-hl{font-size:17px;padding:0 5px}
.h-legend{display:none;margin:16px 0 0;padding-left:22px;font-size:16px;color:var(--cx-on-deep-soft);line-height:1.8}
.h-legend .cx-hl{background:none;color:#FFFFFF;font-size:19px;padding:0}
.h-pin{animation:hpop .5s cubic-bezier(.2,.9,.3,1.4) both}
.h-pin2{animation-delay:.15s}.h-pin3{animation-delay:.3s}.h-pin4{animation-delay:.45s}.h-pin5{animation-delay:.6s}
@keyframes hpop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.h-promise-strip{display:flex;flex-wrap:wrap;column-gap:36px;row-gap:6px;margin:56px 0 0;padding-top:20px;border-top:1px solid rgba(159,224,211,.25);font-size:16px;color:var(--cx-on-deep-soft)}

/* the Blind Spots front door, lifted into the hero */
.h-door{position:relative;z-index:2;margin-top:-120px}
.h-door .bs-card{border:0;border-radius:14px;padding:36px 36px 30px;box-shadow:0 30px 70px -30px rgba(8,51,47,.55)}
.h-door .bs-unit h2.bs-h{font-size:56px;line-height:.95;margin-bottom:12px}
.h-door .bs-go{background:var(--cx-amber);color:var(--cx-ink);border-radius:6px;box-shadow:none;font-size:18px;min-height:56px}
.h-door .bs-unit input[type=text]{border-radius:6px;font-size:20px;min-height:56px}
.h-door .bs-yeartap,.h-door .bs-chip{border-radius:6px}
.h-browse{margin:18px 0 0;font-size:16px;color:var(--cx-soft)}

/* the floor plan */
.h-plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"hall living living kitchen" "dining dining utility porch";gap:7px;background:var(--cx-ink);border:9px solid var(--cx-ink);border-radius:4px}
.h-room{background:#FFFFFF;padding:26px 26px 24px;position:relative;min-height:210px;transition:background-color .15s}
.h-room:hover{background:#E6F4F0}
.h-room-name{margin:0 0 14px;font-size:15px;font-style:italic;color:#5E726E}
.h-room h3{font-size:34px !important;line-height:1 !important;margin:0 0 10px}
.h-room h3 span{color:var(--cx-teal)}
.h-room.h-big h3{font-size:44px !important}
.h-room p.h-room-desc{margin:0 0 10px;font-size:16px;color:var(--cx-soft);max-width:30em}
.h-room a{display:inline-block;padding:3px 0;font-weight:500}
.h-door-arc{position:absolute;right:18px;top:0}

/* era timeline */
.h-era{background:var(--cx-plaster)}
.h-chart{overflow-x:auto;background:#FFFFFF;border-radius:10px;padding:28px 28px 20px}
.h-chart-in{min-width:760px}
.h-axis{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:end;margin-bottom:6px}
.h-axis-track{position:relative;height:44px;font-size:17px;font-family:var(--cx-display);font-weight:700;color:#5E726E}
.h-axis-track span{position:absolute;bottom:0;transform:translateX(-50%)}
.h-axis-track .h-y1900{transform:none}
.h-axis-track .h-y2026{transform:none;left:auto;right:0}
.h-axis-track .h-mark{top:0;bottom:auto;background:var(--cx-amber);color:var(--cx-ink);padding:1px 8px;border-radius:4px;font-size:20px;line-height:1.2;font-weight:800}
.h-rows{display:grid;grid-template-columns:280px minmax(0,1fr)}
.h-rows a{padding:11px 16px 11px 0;border-top:1px solid #E1E7E4;font-weight:500}
.h-rows a.h-on{font-weight:700;color:var(--cx-ink)}
.h-track{position:relative;border-top:1px solid #E1E7E4;background-image:repeating-linear-gradient(90deg,#E9EEEB 0 1px,transparent 1px 7.937%)}
.h-bar{position:absolute;top:13px;height:20px;border-radius:10px;background:var(--cx-pale)}
.h-bar.h-from0{border-radius:0 10px 10px 0}
.h-bar.h-on{background:var(--cx-teal)}
.h-now{position:absolute;left:51.59%;top:0;bottom:0;width:3px;margin-left:-1px;background:var(--cx-amber)}
.h-rows .h-last{border-bottom:1px solid #E1E7E4}
.h-era-foot{margin:22px 0 0}

/* story */
.h-story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.h-story-grid svg{width:100%;max-width:400px;height:auto;display:block}
.h-story-grid p{max-width:34em}
.h-sign{margin:0;font-family:var(--cx-display);font-weight:800;font-size:26px}
.h-promises{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:88px}
.h-promises div{border-top:4px solid var(--cx-ink);padding-top:16px}
.h-promises h3{font-size:32px !important;line-height:1 !important;margin:0 0 8px}
.h-promises p{margin:0;font-size:16px;color:var(--cx-soft)}

/* library band */
.h-lib{background:var(--cx-teal);color:#E8F6F2}
.h-lib h2{color:#FFFFFF}
.h-lib-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:start}
.h-lib form{display:flex;gap:8px;max-width:540px}
.h-lib input{flex:1;min-width:0;height:58px;border:0;border-radius:6px;padding:0 16px;font:inherit;font-size:18px;color:var(--cx-ink)}
.h-lib button{height:58px;padding:0 22px;border:0;background:var(--cx-deep);color:#FFFFFF;border-radius:6px;font:inherit;font-weight:700;cursor:pointer}
.h-idx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.h-idx a{color:#FFFFFF;text-decoration:none;font-family:var(--cx-display);font-weight:700;font-size:30px;line-height:1.25}
.h-idx a:hover{text-decoration:underline;color:var(--cx-hl)}
.h-lib a{color:#FFFFFF}
.h-lib-more{margin:28px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.3)}

/* organisations */
.h-org-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.h-org-grid h3{font-size:36px !important;line-height:1 !important;margin:0 0 12px}
.h-org-grid p{margin:0 0 14px;max-width:32em;color:#233F3A}

/* FAQ */
.h-faq{background:var(--cx-plaster)}
.h-faq .h-wrap > div{max-width:820px}
.h-faq details{border-top:1px solid #CDD5D1;padding:18px 0}
.h-faq details:last-child{border-bottom:1px solid #CDD5D1}
.h-faq summary{font-weight:700;cursor:pointer;font-size:19px}
.h-faq .body{margin:10px 0 0;color:#233F3A}

@media (max-width:900px){
  .h-wrap{padding-left:16px;padding-right:16px}
  .h-sec{padding-top:64px;padding-bottom:64px}
  .h-2col,.h-hero-grid,.h-story-grid,.h-lib-grid,.h-org-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .h-hero{padding:20px 0 110px}
  .h-hero h1{font-size:62px !important}
  .h-h2{font-size:46px}
  .h-tag{display:none}
  .h-legend{display:block}
  .h-door{margin-top:-80px}
  .h-door .bs-card{padding:24px 18px 22px}
  .h-door .bs-unit h2.bs-h{font-size:40px}
  .h-plan{grid-template-columns:minmax(0,1fr);grid-template-areas:"hall" "living" "kitchen" "dining" "utility" "porch"}
  .h-room{min-height:0;padding:22px 20px}
  .h-room.h-big h3{font-size:34px !important}
  .h-door-arc{display:none}
  .h-promises{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:56px}
  .h-idx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-story-grid svg{max-width:300px}
}
@media (prefers-reduced-motion:reduce){.h-pin{animation:none}.h-room{transition:none}}