/* Capítulos da casa: marfim, areia, sálvia, verde profundo e latão pontual. */
:root { --chapter-sand:#e5dfd2; --chapter-sage:#d9e3da; --chapter-forest:#293c35; --chapter-brass:#b69a63; }
.reference-site main > section { scroll-margin-top:96px; }
.reference-site h2,.reference-site h3 { text-wrap:balance; }
.reference-site .house-tour.section { background:#f8f7f4; padding-block:clamp(72px,8vw,120px); }
.reference-site .house-tour-heading { display:block; margin-bottom:36px; }
.reference-site .house-tour-heading h2 { margin:0; font-size:clamp(40px,5.6vw,72px); }
.reference-site .house-tour-heading p { max-width:65ch; margin:12px 0 0; font:400 .875rem/1.7 'Montserrat',Arial,sans-serif; color:#68726b; }
.reference-site .house-tour .house-slide { grid-template-columns:minmax(0,2.25fr) minmax(280px,.85fr); gap:clamp(28px,4vw,64px); background:transparent; overflow:visible; border-radius:0; align-items:center; }
.reference-site .house-tour .house-photo { border-radius:8px; aspect-ratio:1672/941; overflow:hidden; background:transparent; }
.reference-site .house-tour .house-photo img { object-fit:contain; object-position:center; }
.reference-site .house-tour .house-copy { padding:20px 0; min-width:0; align-self:center; display:flex; flex-direction:column; justify-content:flex-start; background:transparent; }
.reference-site .house-tour .house-description { min-height:0; }
.reference-site .house-tour .house-description h3 { margin:0 0 16px; font:500 clamp(28px,2.6vw,38px)/1.15 'Cormorant Garamond',Georgia,serif; letter-spacing:-.015em; }
.reference-site .house-tour .house-description p { max-width:34ch; margin:0; font:400 .9375rem/1.75 'Montserrat',Arial,sans-serif; color:#647067; text-wrap:pretty; }
.reference-site .house-tour .house-navigation { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; margin-top:32px; }
.reference-site .house-tour #house-count { font:400 .8125rem/1.5 'Montserrat',Arial,sans-serif; color:#647067; }
.reference-site .house-tour .house-arrows { gap:10px; }
.reference-site .house-tour .house-arrows button { width:44px; height:44px; background:transparent; }
.house-thumbnails { display:flex; gap:14px; overflow-x:auto; padding:24px 4px 8px; overscroll-behavior-x:contain; scrollbar-width:thin; }
.house-thumbnails button { flex:1 0 108px; max-width:190px; border:0; border-bottom:2px solid transparent; background:transparent; color:#52645b; cursor:pointer; padding:0 0 12px; text-align:left; transition:color .2s; }
.house-thumbnails img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:4px; opacity:.6; transition:opacity .25s; }
.house-thumbnails span { display:block; padding-top:10px; font:400 14px/1.5 'Montserrat',Arial,sans-serif; }
.house-thumbnails button[aria-pressed=true] { border-color:#5a706b; color:#293c35; }
.house-thumbnails button:is(:hover,[aria-pressed=true]) img { opacity:1; }
.house-thumbnails button:focus-visible { outline:2px solid #293c35; outline-offset:4px; }
.reference-site .about-karen.section { position:relative; background:var(--chapter-sand); padding-block:clamp(80px,9vw,132px); border-top:1px solid #c9c1af; border-bottom:1px solid #c9c1af; }
.reference-site .about-karen.section .about-portrait { border-radius:120px 120px 8px 8px; overflow:hidden; }
.reference-site .about-karen-copy .section-caption { color:#52645b; }
.reference-site .about-karen-copy .about-belief { margin-top:24px; }
.reference-site .projects.projects-stories { background:#f8f7f4; padding-block:clamp(80px,9vw,128px); }
.reference-site .projects-stories-heading h2 { font-size:clamp(42px,5.5vw,76px); }
.reference-site .projects-stories-heading p { font-size:17px; max-width:55ch; margin-top:20px; }
.reference-site .project-story-tabs { margin-top:40px; margin-bottom:40px; border-bottom:1px solid #bdcabb; }
.reference-site .project-story-tabs button { min-height:64px; padding-inline:24px; font-size:16px; }
.reference-site .story-tab-marker { background:#d9e3da; border-radius:8px 8px 0 0; box-shadow:inset 0 -3px #5a706b; }
.reference-site .projects-stories .life-frame { border-radius:10px; overflow:hidden; }
.reference-site .projects-stories .ideas-layout { align-items:center; gap:clamp(32px,5vw,80px); }
.reference-site .projects-stories .ideas-copy p { font-size:16px; line-height:1.85; }
.reference-site .projects-stories .ideas-heading #ideas-title { max-width:28ch; font-size:clamp(30px,3.3vw,46px); }
.reference-site .light-heading .light-switch { display:none; }
.house-light-control { display:flex; gap:16px; align-items:center; flex-shrink:0; }
.house-light-control > span { font:400 14px/1.5 'Montserrat',Arial,sans-serif; color:#52645b; }
.house-light-toggle { width:64px; height:82px; padding:8px; border:1px solid #b7c3b5; border-radius:9px; background:#e5eadd; cursor:pointer; box-shadow:0 3px 8px #293c3512; }
.house-light-rocker { display:grid; place-items:center; width:100%; height:100%; background:#f8f7f4; border-radius:4px; border:1px solid #c4cdbc; box-shadow:0 4px 0 #a4b09f; transform:translateY(-2px); transition:transform .22s,background-color .22s; }
.house-light-rocker svg { width:24px; height:24px; fill:none; stroke:#52645b; stroke-width:1.5; }
.house-light-toggle[aria-pressed=true] .house-light-rocker { transform:translateY(2px); background:#293c35; box-shadow:0 -3px 0 #a4b09f; }
.house-light-toggle[aria-pressed=true] svg { stroke:#f6dfaa; }
.house-light-toggle:focus-visible { outline:2px solid #293c35; outline-offset:5px; }
.reference-site .project-selection.portfolio-chapter { max-width:none; margin:0; border:0; background:var(--chapter-forest); padding:clamp(72px,8vw,112px) 0 64px; color:#f8f7f4; overflow:hidden; }
.portfolio-heading { width:88%; max-width:1320px; margin:auto; display:flex; justify-content:space-between; align-items:end; gap:32px; }
.reference-site .portfolio-heading h2 { color:#f8f7f4; font:500 clamp(42px,5.5vw,74px)/1.08 'Cormorant Garamond',Georgia,serif; margin:0; max-width:14ch; }
.reference-site .portfolio-heading p { color:#d7e1d7; font:400 16px/1.8 'Montserrat',Arial,sans-serif; max-width:35ch; }
.reference-site .portfolio-coverflow { padding-top:46px; background:transparent; }
.portfolio-coverflow .coverflow-ambient { display:none; }
.portfolio-coverflow .coverflow-stage { grid-template-columns:repeat(2,minmax(0,1fr)); }
.portfolio-coverflow.is-ready .coverflow-stage { height:clamp(380px,42vw,590px); }
.portfolio-coverflow.is-ready .coverflow-card { width:min(64%,800px); border-radius:8px; }
.portfolio-coverflow .coverflow-photo { object-fit:cover; }
.portfolio-coverflow .coverflow-card::after { background:linear-gradient(transparent 45%,#13221be8); }
.portfolio-coverflow .coverflow-copy { padding:28px 34px; }
.portfolio-coverflow .coverflow-picker button { width:44px; padding:8px; }
.reference-site .services.section.service-showcase { background:var(--chapter-sage); padding-block:clamp(80px,8vw,112px); }
.reference-site .service-heading h2 { font-size:clamp(42px,5vw,70px); }
.reference-site .service-photo-card .service-photo-card-cta { opacity:1; transform:none; font-size:15px; }
.service-photo-card-cta::after { content:''; display:block; width:76%; height:1px; margin:10px auto 0; background:#fff; transform:scaleX(.24); transform-origin:center; opacity:.65; transition:transform .4s cubic-bezier(.22,.75,.25,1),opacity .25s; }
.service-photo-card:is(:hover,:focus-visible) .service-photo-card-cta::after { transform:scaleX(1); opacity:1; }
.reference-site .service-showcase .home-service-finder { display:flex; width:88%; max-width:1320px; padding:36px 40px; border:0; margin:48px auto 0; border-radius:10px; background:#293c35; gap:32px; box-sizing:border-box; }
.reference-site .service-showcase .home-service-finder h3 { color:#fff; font-size:clamp(28px,3vw,40px); }
.reference-site .service-showcase .home-service-finder p { color:#d7e1d7; font-size:15px; }
.reference-site .service-showcase .home-service-finder > a { display:inline-flex; gap:24px; align-items:center; background:#f8f7f4; color:#293c35; border:1px solid #f8f7f4; font-size:16px; padding:20px 26px; min-height:64px; border-radius:6px; }
.reference-site .service-showcase .home-service-finder > a:hover { background:#e5dfd2; color:#293c35; border-color:#e5dfd2; }
.reference-site .home-service-finder > a:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.reference-site .channel.section { background:#eee5d4; padding-block:clamp(80px,9vw,128px); border-top:1px solid #d6c7ab; border-bottom:1px solid #d6c7ab; }
.reference-site .channel .section-caption { color:#52645b; font-size:16px; }
.reference-site .channel #channel-title { font-size:clamp(42px,5.5vw,74px); max-width:16ch; }
.reference-site .channel .video-card { background:transparent; border:0; }
.reference-site .channel .video-card h3 { color:#293c35; line-height:1.55; font-size:16px; }
.reference-site .channel .channel-button { background:#5a706b; padding:18px 28px; min-height:58px; border-radius:6px; font-size:16px; }
.reference-site .channel .channel-button:hover { background:#475e58; }
.experience-page .finder-photo-panel > video { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#293c35; }
.experience-page .finder-photo-panel { background:#293c35; }
.reference-site :is(button,a):active { transition-duration:.1s; }
@media (max-width:850px) {
  .reference-site .house-tour-heading,.portfolio-heading { display:block; }
  .reference-site .house-tour-heading p { margin-top:12px; }
  .portfolio-heading p { margin-top:18px; }
  .reference-site .house-tour .house-slide { grid-template-columns:minmax(0,1fr); }
  .reference-site .house-tour .house-photo { aspect-ratio:1672/941; }
  .reference-site .house-tour .house-copy { padding:0; }
  .reference-site .house-tour .house-navigation { margin-top:24px; }
  .reference-site .service-showcase .home-service-finder { flex-direction:column; align-items:stretch; padding:28px; }
  .reference-site .service-showcase .home-service-finder > a { width:auto; max-width:none; justify-content:space-between; }
}
@media (max-width:700px) {
  .reference-site .house-tour.section,.reference-site .about-karen.section,.reference-site .projects.projects-stories,.reference-site .services.section.service-showcase,.reference-site .channel.section { padding-block:64px; }
  .house-thumbnails button { flex:0 0 104px; }
  .reference-site .project-story-tabs button { padding-inline:10px; font-size:14px; }
  .reference-site .light-heading { display:flex; align-items:start; flex-direction:column; }
  .house-light-control { align-self:flex-end; }
  .reference-site .project-selection.portfolio-chapter { padding-block:64px 32px; }
  .portfolio-coverflow.is-ready .coverflow-stage { height:440px; }
  .portfolio-coverflow.is-ready .coverflow-card { width:88%; }
  .portfolio-coverflow .coverflow-copy { padding:24px; }
  .portfolio-coverflow .coverflow-controls { gap:8px; }
  .portfolio-coverflow .coverflow-picker { gap:0; }
  .portfolio-coverflow .coverflow-picker button { width:44px; font-size:12px; }
  .experience-page .finder-photo-panel:not([hidden]) { display:block; min-height:0; height:auto; aspect-ratio:16/10; max-height:none; margin-top:32px; border-radius:10px; }
  .reference-site .service-showcase .home-service-finder > a { font-size:15px; gap:12px; padding-inline:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .house-thumbnails img,.house-light-rocker,.service-photo-card-cta::after { transition:none; }
  .reference-site .service-photo-card:is(:hover,:focus-visible) img { transform:none; }
}