/* IBER Atlas design layer for Tabanan House Lab (v2.2).
   Source: IBER Atlas design system (atlas.iber.homes, atlas.css v4). Loaded after invest.css.
   Palette, radii and shadows come from brand-tokens.css (same values as Atlas);
   this file brings typography, header, section heads, cards, the capital block and footer to Atlas. */

:root{
  --font-display:'Onest',system-ui,sans-serif;
  --font-body:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

/* typography: Onest 650, negative tracking, balanced */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:650;letter-spacing:-.01em;text-wrap:balance}
.hero h1{font-weight:680;font-size:clamp(42px,7.4vw,96px);line-height:.98;letter-spacing:-.025em;max-width:16ch;text-shadow:var(--shadow-text-on-photo)}
.hero h1 .l2{font-weight:500;letter-spacing:-.005em;max-width:46ch;text-shadow:none}
.chap h2{font-weight:650;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.015em}
.chap p{color:var(--muted);max-width:56ch;font-size:16px}
.chap .no{color:var(--muted)}
.chap .no::after{background:var(--line)}
.sub-t{font-weight:650;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.01em}
.lede{font-size:17px;line-height:1.6;max-width:52ch}
.card h3,.card h4{font-weight:650;font-size:20px;letter-spacing:-.01em}
.model h3{font-weight:650;font-size:22px;letter-spacing:.04em}
.model .area{font-weight:650;font-size:22px}
.fact .n{font-weight:650}
.faq-q{font-weight:650}
.fn h4,.risk h4,.note-box h4{font-weight:650}

/* header: glass milk, text logo */
.brand .word{font:700 17px/1 var(--font-display);letter-spacing:.06em;color:var(--head);white-space:nowrap}
.brand .sub{font-size:10.5px;letter-spacing:.14em}
.navlinks a{font-weight:600}
.navcta{font-size:13.5px;border:1px solid var(--line);background:transparent;color:var(--head)}
.navcta:hover{border-color:var(--green);background:transparent}

/* buttons: verbs with arrows, 8px corners */
.btn{border-radius:var(--r-btn);padding:15px 28px}
.link{border-radius:var(--r-btn)}

/* cards and panels: thin line at rest, soft teal shadow only on hover */
.card,.fn,.risk,.model{box-shadow:none}
.form-card{box-shadow:none}
.form-card:focus-within{box-shadow:var(--shadow-card-hover)}
.photo{box-shadow:none}

/* capital: Atlas editorial block instead of a dark section */
section.feat{background:var(--grad-editorial);color:var(--ink);
  --muted-on-dark:var(--muted);--line-on-dark:var(--line);--ink-on-dark:var(--ink)}
section.feat .cap-n{color:var(--head);font-weight:650}
section.feat .legend b{color:var(--head)}
section.feat .note-box{background:var(--white);border:var(--border);border-left:3px solid var(--green);border-radius:var(--r-panel)}
section.feat .note-box p{color:var(--ink)}
section.feat .steps6 b{color:var(--head)}
section.feat .steps6 li::before{color:var(--green-text)}
section.feat .chap .no{color:var(--green-text)}

/* photo credit line, as in Atlas covers */
.photo .credit,.model .mphoto .credit,.hero-frame .credit{position:absolute;right:10px;bottom:8px;z-index:3;max-width:calc(100% - 20px);font:500 10.5px/1.3 var(--font-body);color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.photo .cap{right:auto;max-width:calc(100% - 32px);bottom:30px}
.hero-frame .credit{top:50px;bottom:auto;right:18px}

/* footer: solid head, white text logo */
footer{background:var(--head);color:var(--footer-text)}
footer .brand .word{color:#fff}
footer .brand .sub{color:var(--footer-text)}

@media (max-width:860px){.brand .sub-lab{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
section.feat .legend .p{color:var(--head)}
@media (max-width:860px){.hero-frame .credit{top:44px}.hero-in{padding-top:72px}}

/* v2.3 hero: Atlas home hero — text left, 2×2 photo mosaic right (no full-bleed photo) */
.hero{padding:calc(var(--t-nav-h) + clamp(40px,6vw,80px)) 0 clamp(28px,4vw,48px);background:var(--grad-hero),var(--milk)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero .eyebrow{color:var(--muted);margin:0}
.hero h1{font:650 clamp(48px,7vw,88px)/1 var(--font-display);letter-spacing:-.02em;color:var(--head);margin:14px 0;max-width:none;text-shadow:none}
.hero h1 i{font-style:normal;background:var(--grad-title);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .hero-sub{font:600 clamp(19px,1.8vw,22px)/1.3 var(--font-display);color:var(--ink-2,#1B5C6B);margin:0 0 14px;max-width:40ch}
.hero p.lead{font-size:17px;line-height:1.6;max-width:52ch;margin:0 0 26px;color:var(--ink)}
.hero .actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero .stats{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.hero .stats b{display:block;font:650 30px/1.1 var(--font-display);color:var(--head);letter-spacing:-.01em}
.hero .stats .mono{display:block;color:var(--muted);margin-top:6px}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:22px}
.mosaic .cover{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r-panel);overflow:hidden;background:var(--sage);box-shadow:var(--shadow-photo)}
.mosaic .cover:nth-child(2),.mosaic .cover:nth-child(4){transform:translateY(22px)}
.mosaic .cover img{display:block;width:100%;height:100%;object-fit:cover}
.mosaic .badge{position:absolute;left:10px;top:10px;font:400 10px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(254,251,246,.94);color:var(--ink);border-radius:var(--r-pill);padding:4px 9px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mosaic .credit{position:absolute;right:8px;bottom:6px;max-width:calc(100% - 16px);font:500 9.5px/1.3 var(--font-body);color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-note{margin-top:clamp(20px,3vw,36px);font-size:13px;color:var(--quiet,#7C8590)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:calc(var(--t-nav-h) + 28px)}.hero-in{padding-top:0}.mosaic{padding-bottom:22px}}
.mono{font-family:var(--font-mono);font-size:11.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.hero .stats{flex-wrap:nowrap}
.hero .stats > div{min-width:0}
.mosaic-cap{grid-column:1/-1;margin:30px 0 0;font-size:12.5px;color:var(--quiet,#7C8590);text-align:right}
@media (max-width:600px){.hero .stats{flex-wrap:wrap;gap:18px 28px}.hero .stats b{font-size:26px}.mosaic-cap{text-align:left}}

/* v2.6: collage of six houses next to "Why six models" */
.photo.collage{background:var(--white);padding:0}
.photo.collage .tiles{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;width:100%;height:100%}
.photo.collage figure{margin:0;overflow:hidden;min-width:0;min-height:0}
.photo.collage figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.photo.collage:hover figure img{transform:scale(1.03)}
@media (max-width:600px){.photo.collage{aspect-ratio:3/4}.photo.collage .tiles{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}}

/* v2.8: asymmetric bento of seven photos */
.photo.collage{aspect-ratio:1/1}
.photo.collage .tiles.bento{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);grid-template-areas:"a a b c" "a a d c" "e f f c" "e f f g"}
.bento .t1{grid-area:a}.bento .t2{grid-area:b}.bento .t3{grid-area:c}.bento .t4{grid-area:d}.bento .t5{grid-area:e}.bento .t6{grid-area:f}.bento .t7{grid-area:g}
@media (max-width:600px){.photo.collage{aspect-ratio:3/4}.photo.collage .tiles.bento{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr);grid-template-areas:"a a c" "a a c" "b d c" "f f e" "f f g"}}