/* Homepage, redesign of 24 October 2026: village first, the vision as a path, three ways to house a family.
   Same world as the rest of the site: white, teal (#276578 text, #4A90A4 lines), square corners, Arial. */
::selection{background:#D3E8EF;color:#193D4E}
html{scrollbar-color:#9DC3CF #F7FAFB}

/* Hero: the village drawing carries the first screen */
.home-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:48px 0 40px}
.home-hero h1{font-size:clamp(36px,3.9vw,58px);line-height:1.06;letter-spacing:-.025em;margin:0 0 20px;color:#193D4E;text-wrap:balance}
.home-hero .hero-lead{font-size:18px;line-height:1.55;color:#193D4E;max-width:34em;margin:0}
.home-hero .actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.village-figure{margin:0}
.village-frame{position:relative;line-height:0}
.village-frame img{width:100%;height:auto;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;background:#276578;color:#fff;
  font:700 14px/28px Arial,Helvetica,sans-serif;text-align:center;box-shadow:0 2px 8px rgba(25,61,78,.35);border:2px solid #fff}
.pin-legend{list-style:none;counter-reset:pin;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.pin-legend li{counter-increment:pin;display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:15px;line-height:1.4;color:#193D4E}
.pin-legend li::before{content:counter(pin);width:22px;height:22px;background:#276578;color:#fff;
  font:700 12px/22px Arial,Helvetica,sans-serif;text-align:center;margin-top:-1px}
.village-figure figcaption{margin-top:14px;font-size:15px;line-height:1.5;color:#526571}

/* Section rhythm */
.home-section{padding:88px 0 0}
.home-section>h2{font-size:clamp(28px,2.8vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 16px;max-width:22em;text-wrap:balance}
.home-section .section-lead{font-size:19px;line-height:1.55;max-width:38em;margin:0 0 40px;color:#193D4E}

/* The vision as a path: a house, a home, a neighbourhood, resilience */
.vision-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.vision-path::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:#4A90A4;opacity:.45}
.vision-path li{position:relative;padding-top:34px}
.vision-path li::before{content:"";position:absolute;left:0;top:0;width:12px;height:12px;background:#4A90A4}
.vision-path li:last-child::before{background:#276578;width:14px;height:14px;top:-1px}
.vision-path h3{display:flex;align-items:center;gap:10px;font-size:21px;margin:0 0 10px;color:#193D4E}
.vision-glyph{width:30px;height:30px;flex:none;fill:none;stroke:#276578;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vision-path p{font-size:16px;line-height:1.55;margin:0;color:#193D4E}
.vision-after{margin-top:40px;max-width:44em;font-size:16px;line-height:1.6}

/* Our prototype: the two-loft model, one large view and five smaller ones; each opens the image viewer */
.proto-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:12px;margin-top:24px}
.proto-view{display:block;border:1px solid #D9E3E8;background:#fff;padding:10px;line-height:0}
.proto-view img{width:100%;height:100%;object-fit:contain;display:block;aspect-ratio:3/2}
.proto-1{grid-row:span 2}
.proto-1 img{aspect-ratio:auto;max-height:560px}
.proto-view:hover{border-color:#4A90A4}
.proto-figure{margin:0}
.proto-caption{display:block;margin-top:14px;font-size:15px;color:#526571;max-width:44em}

/* Three ways to house a family */
.three-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.three-ways>li{border-top:3px solid #D9E3E8;padding-top:20px}
.three-ways>li.way-imobx{border-top-color:#276578}
.way-art{display:block;width:100%;max-width:240px;height:auto;margin:0 0 12px}
.three-ways h3{font-size:20px;margin:0 0 8px;color:#193D4E}
.three-ways p{font-size:16px;line-height:1.55;margin:0;color:#193D4E}
.three-ways .way-verdict{font-weight:700;margin-bottom:8px}
.three-ways .way-verdict.loses{color:#193D4E}
.three-ways .way-verdict.keeps{color:#276578}
.three-ways .source-note{margin-top:10px;font-size:15px;line-height:1.45;color:#526571}
.three-ways-note{margin-top:28px;font-size:16px;color:#526571}

/* Water in the drawings */
.way-art .vessel{fill:#fff;stroke:#193D4E;stroke-width:2.5;stroke-linejoin:round}
.way-art .line{fill:none;stroke:#193D4E;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.way-art .water{fill:#4A90A4;opacity:.55}
.way-art .stream{fill:none;stroke:#4A90A4;stroke-width:6;stroke-linecap:round}
.way-art .leak{fill:none;stroke:#E07A00;stroke-width:4;stroke-linecap:round}
.way-art .puddle{fill:#E07A00;opacity:.3}
.way-art .step{fill:#E8F4F8;stroke:#193D4E;stroke-width:2.5}
.way-art .step-text{font:700 13px Arial,Helvetica,sans-serif;fill:#193D4E}
.way-art .mark{fill:none;stroke:#276578;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* The one authored moment: the IMOBX home fills and spills into the next home when it comes into view */
@media (prefers-reduced-motion:no-preference){
  .js-fill .way-imobx .water-rise{transform:translateY(60px);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
  .js-fill .way-imobx .water-next{transform:translateY(30px);transition:transform 1.2s cubic-bezier(.16,1,.3,1) 1.1s}
  .js-fill .way-imobx .spill{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset .6s ease-out .9s}
  .js-fill .way-imobx.is-filled .water-rise,.js-fill .way-imobx.is-filled .water-next{transform:none}
  .js-fill .way-imobx.is-filled .spill{stroke-dashoffset:0}
}

/* Founding circle as a band */
.circle-band{background:#F7FAFB;border:1px solid #D9E3E8;margin:96px auto 0;width:min(1296px,94%);padding:64px 48px}
.circle-band .home-section{padding-top:0;width:100%;max-width:1200px}
.circle-band .partner-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 48px;margin:32px 0}
.circle-band .partner-list>div{padding:16px 0;border-top:1px solid #D9E3E8}
.circle-band .partner-list dt{font-weight:700;color:#276578;margin:0 0 4px}
.circle-band .partner-list dd{margin:0;font-size:16px;line-height:1.55}
.join-steps{counter-reset:join;list-style:none;padding:0;margin:20px 0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.join-steps li{counter-increment:join;font-size:16px;line-height:1.5;padding-top:12px;border-top:2px solid #276578}
.join-steps li::before{content:counter(join);display:block;font:700 28px/1 Arial,Helvetica,sans-serif;color:#276578;margin-bottom:8px}

/* Phases as a timeline */
#como-chegamos .flow-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:32px 0 0}
#como-chegamos .flow-phases>li{border:0;background:none;padding:20px 0 0;border-top:2px solid #4A90A4;box-shadow:none}
#como-chegamos .flow-phases strong{display:block;font-size:19px;margin-bottom:6px;color:#193D4E}
#como-chegamos .flow-phases span{font-size:16px;line-height:1.55}

#modelo .home-model-layout{display:block}
#modelo .home-purchase{max-width:44em}
#modelo .home-residents{margin:20px 0 28px}
#modelo .home-residents a{display:inline-block;margin-top:4px}
#saiba-mais{padding-top:72px}

@media (max-width:900px){
  .home-hero{grid-template-columns:1fr;gap:28px;padding:24px 0 8px}
  .vision-path{grid-template-columns:1fr 1fr;gap:36px 28px}
  .vision-path::before{display:none}
  .three-ways{grid-template-columns:1fr;gap:36px}
  .way-art{max-width:200px}
  .proto-grid{grid-template-columns:1fr 1fr}
  .proto-1{grid-column:span 2;grid-row:auto}
  #como-chegamos .flow-phases,.join-steps{grid-template-columns:1fr;gap:20px}
  .circle-band .partner-list{grid-template-columns:1fr}
  .home-section{padding-top:64px}
  .circle-band{margin-top:64px;padding:40px 24px}
}
@media (max-width:560px){
  .home-hero h1{font-size:34px}
  .home-hero .hero-lead{font-size:17px}
  .pin{width:24px;height:24px;font-size:12px;line-height:24px}
  .pin-legend{grid-template-columns:1fr}
  .vision-path{grid-template-columns:1fr;gap:28px}
  .vision-path li{padding-top:0}
  .vision-path li::before{display:none}
  .home-section .section-lead{font-size:17px;margin-bottom:28px}
}

/* 28 Oct (owner decisions 18 and 19): the short note before each group button, what happens after joining, who is preparing this */
.home-hero .group-note{margin:16px 0 0;font-size:15px;color:#526571}
.circle-band .group-note{margin:8px 0 0;font-size:15px;color:#526571}
.who-prepares{margin:32px 0 0;padding-top:20px;border-top:1px solid #D9E3E8;max-width:40em}
.who-prepares h3{font-size:20px;margin:0 0 8px}
.who-prepares ul{margin:0 0 8px;padding-left:20px}
.who-prepares li{margin:4px 0}
.after-join{margin:24px 0 0;max-width:40em}

/* Owner, 28 Oct (decision 21): where we are now, low on the page */
#onde-estamos .stage-now{max-width:40em;font-size:18px;line-height:1.55}
#onde-estamos h3{font-size:20px;margin:24px 0 8px}
#onde-estamos .stage-next{max-width:40em;padding-left:22px}
#onde-estamos .stage-next li{margin:6px 0}

/* Owner, 28 Oct (decision 26): one sentence per column; the numbers open on tap */
.three-ways .numbers-btn{margin:8px 0 0;padding:6px 0;min-height:44px;background:none;border:0;color:#A84B00;text-decoration:underline;text-underline-offset:3px;font:inherit;font-size:15px;cursor:pointer}
.numbers-pop{max-width:min(28em,calc(100vw - 32px));padding:18px 20px;border:1px solid #D9E3E8;border-radius:4px;background:#fff;color:#193D4E;box-shadow:0 8px 24px rgba(25,61,78,.18)}
.numbers-pop p{margin:0 0 8px;font-size:16px;line-height:1.5}
.numbers-pop .source-note{font-size:14px;margin:0}

/* Iceberg window (decisions 16, 26; owner "proceed" on option A, 28 Oct; from the menu session) */
/* The IMOBX Iceberg (owner, 26-28 Oct, decisions 16 and 26): one window, opened from "Who is preparing this".
   Above the waterline: what anyone can check today. Below: what drives the founders, in their own words. */
.iceberg-window{max-height:90vh;overflow:auto;max-width:min(760px,92vw);padding:0;border:1px solid #D9E3E8;box-shadow:0 16px 48px rgba(25,61,78,.18);color:#193D4E}
.iceberg-window::backdrop{background:rgba(25,61,78,.35)}
.iceberg-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px 0}
.iceberg-head h2{margin:0;font-size:24px}
.iceberg-close{min-width:44px;min-height:44px;border:0;background:none;font:inherit;font-size:26px;line-height:1;color:#193D4E;cursor:pointer}
.iceberg-close:focus-visible{outline:3px solid #276578;outline-offset:2px}
.iceberg{display:grid;grid-template-columns:140px 1fr;gap:0 24px;padding:16px 22px 22px}
.iceberg-peak{align-self:end;width:140px;height:70px}
.iceberg-body{align-self:stretch;width:140px;height:100%;min-height:160px;border-top:2px dashed #276578}
.iceberg-peak,.iceberg-body{display:block}
.iceberg-above,.iceberg-below{padding:14px 0}
.iceberg-above h3,.iceberg-below h3{margin:0 0 8px;font-size:16px;text-transform:none}
.iceberg-above ul{margin:0;padding-left:18px}.iceberg-above li{margin:4px 0}
.iceberg-below{border-top:2px solid #276578}
.iceberg-below blockquote{margin:0 0 10px;font-size:17px;line-height:1.45}
.iceberg-below cite{display:block;font-style:normal;font-size:14px;color:#596772;margin-top:2px}
.iceberg-reasons{margin:0;padding-left:20px}.iceberg-reasons li{margin:0 0 10px;font-size:17px;line-height:1.45}
@media (max-width:600px){.iceberg{grid-template-columns:72px 1fr;gap:0 14px;padding:12px 16px 18px}.iceberg-peak{width:72px;height:36px}.iceberg-body{width:72px;min-height:90px}}
.iceberg-intro{margin:8px 22px 0;font-size:16px;line-height:1.5;color:#405866;max-width:46ch}
.section-intro{max-width:52ch;margin:-4px 0 24px;font-size:18px;line-height:1.55;color:#405866}

.iceberg-more{margin:12px 0 0;font-size:15px}