/* Singular Interiors · design notes in DESIGN.md */
/* Fonts are self-hosted (SIL OFL, licences in assets/fonts): no request to third parties. */
@font-face { font-family: 'Bodoni Moda'; src: url('fonts/bodoni-moda.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('fonts/hanken-grotesk.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --cal: #EAE5E1;      /* limewash: page background (monogram ground) */
  --gesso: #F5F2EF;    /* plaster: fields, title blocks */
  --tinta: #2B2D1F;    /* olive-black ink (logo) */
  --oliva: #4B4F33;    /* brand olive */
  --pedra: #625C55;    /* secondary text, AA on --cal */
  --linha: #B7AFA6;    /* rules */
  --display: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --text: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --section: clamp(72px, 11vw, 152px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cal); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--text); font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; font-optical-sizing: none; font-variation-settings: "opsz" 18; }
h2 { font-variation-settings: "opsz" 14; }
h3, h4, legend, .brand-name, .footer-lead, .index a > span:first-child, .carimbo-stats dt { font-variation-settings: "opsz" 9; font-optical-sizing: none; }
h1 { font-size: clamp(2.75rem, 6.4vw, 5.9rem); line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.06; }
h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; }
h4 { font-size: 1.45rem; line-height: 1.2; }
p { max-width: 64ch; }
.lead { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 44ch; }
.muted { color: var(--pedra); }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--tinta); color: var(--cal); padding: 10px 14px; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- links and buttons ---------- */
.link { display: inline-flex; align-items: baseline; gap: .45em; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link:hover { color: var(--oliva); }
.arrow { font-size: .9em; transition: transform .2s ease; }
a:hover > .arrow { transform: translate(2px, -2px); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem;
  background: var(--tinta); color: var(--cal); padding: 17px 22px; min-height: 58px; border: 0;
  font: 500 .98rem/1.2 var(--text); text-decoration: none; cursor: pointer; }
.button:hover { background: var(--oliva); }
.button-light { background: var(--cal); color: var(--tinta); }
.button-light:hover { background: var(--gesso); }
.back { display: inline-flex; gap: .5em; color: var(--pedra); text-decoration: none; font-size: .95rem; margin-bottom: 36px; }
.back:hover { color: var(--tinta); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--cal) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.is-scrolled { border-bottom-color: color-mix(in srgb, var(--linha) 60%, transparent); }
.header-inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand-name { font: 400 1.3rem/1 var(--display); letter-spacing: .01em; }
.nav { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav a { text-decoration: none; font-size: .98rem; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--linha); }
.nav a[aria-current="page"] { border-bottom-color: var(--tinta); }
/* Serviços: the three service pages open under the menu item (hover or keyboard focus); on phones they are listed under it */
.nav-group { position: relative; display: flex; }
.nav-sub { position: absolute; top: 100%; left: -18px; z-index: 30; display: none; flex-direction: column; min-width: 300px; padding: 8px 18px;
  background: var(--gesso); border: 1px solid var(--linha); box-shadow: 0 18px 40px rgb(43 45 31 / .14); }
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { display: flex; }
.nav-sub a { padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: .95rem; white-space: nowrap; }
.nav-sub a:last-child { border-bottom: 0; }
.nav-sub a:hover { border-bottom-color: var(--linha); color: var(--oliva); }
.nav-sub .nav-sub-all { color: var(--pedra); font-size: .88rem; }
.language { display: flex; border: 1px solid var(--linha); }
.language a { font: 500 .8rem/1 var(--text); letter-spacing: .04em; color: var(--pedra); text-decoration: none; padding: 8px 10px; }
.language a:hover { color: var(--tinta); }
.language a[aria-current="true"] { background: var(--tinta); color: var(--cal); }
.menu-toggle { display: none; align-items: center; gap: 10px; background: none; border: 0; font: 500 .95rem var(--text); color: var(--tinta); padding: 8px 0; cursor: pointer; }
.menu-lines, .menu-lines::before { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform .2s; }
.menu-lines { margin-top: -5px; }
.menu-lines::before { content: ""; position: absolute; top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-lines { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::before { transform: translateY(-7px) rotate(-90deg); }

/* ---------- material chips: the signature ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { width: 92px; background: var(--gesso); padding: 6px 6px 9px; box-shadow: 0 1px 0 rgba(43, 45, 31, .08), 0 8px 18px -12px rgba(43, 45, 31, .45); }
.chip-swatch { display: block; height: 64px; background: var(--c); }
.chip-name { display: block; margin-top: 7px; font-size: .74rem; line-height: 1.25; }
.chips-small { gap: 6px; }
.chips-small li { width: auto; display: flex; align-items: center; gap: 8px; padding: 0; background: none; box-shadow: none; }
.chips-small .chip-swatch { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px rgba(43, 45, 31, .12); }
.chips-small .chip-name { margin: 0 12px 0 0; font-size: .82rem; color: var(--pedra); }


/* ---------- title block ---------- */
.carimbo { border: 1px solid var(--tinta); background: var(--gesso); font-size: .9rem; }
.carimbo > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 9px 12px; }
.carimbo > div + div { border-top: 1px solid var(--linha); }
.carimbo dt { color: var(--pedra); }
.carimbo-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; max-width: 640px; }
.carimbo-inline > div { grid-template-columns: 1fr; gap: 2px; }
.carimbo-inline > div + div { border-top: 0; border-left: 1px solid var(--linha); }
.carimbo-stats dt { font: 400 1.5rem/1.15 var(--display); color: var(--tinta); }
.carimbo-stats dd { color: var(--pedra); font-size: .88rem; }

/* ---------- home hero ---------- */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(16px, 2vw, 32px); align-items: end;
  padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 120px); }
.hero-copy { grid-column: 1 / span 5; display: grid; gap: 28px; justify-items: start; padding-bottom: 12px; }
.hero h1 { font-size: clamp(2.6rem, 3.9vw, 4.4rem); }
.hero h1 span { display: block; text-wrap: balance; }
.hero-board { grid-column: 6 / -1; position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero-board .chips { position: relative; margin: -52px 0 0 -28px; z-index: 2; }
.hero-board figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 18px; font-size: .92rem; }
.hero-board figcaption a { text-decoration: none; font-weight: 500; }
.hero-board figcaption a:hover { text-decoration: underline; }

/* The one orchestrated moment: the material samples are laid down on the photograph. */
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-board .chips li { animation: lay .7s cubic-bezier(.2, .7, .2, 1) both; }
  .page-home .hero-board .chips li:nth-child(1) { animation-delay: .25s; }
  .page-home .hero-board .chips li:nth-child(2) { animation-delay: .37s; }
  .page-home .hero-board .chips li:nth-child(3) { animation-delay: .49s; }
  .page-home .hero-board .chips li:nth-child(4) { animation-delay: .61s; }
}
@keyframes lay { from { opacity: 0; transform: translateY(-18px) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.section { padding-block: var(--section) 0; }
.section-tint { background: var(--gesso); padding-block: var(--section); margin-top: var(--section); }
.section-tint + .section { padding-top: var(--section); }
.section-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px clamp(16px, 2vw, 32px); align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.section-head h2 { grid-column: 1 / span 6; }
.section-head p { grid-column: 8 / -1; color: var(--pedra); }
.section-more { margin-top: clamp(40px, 5vw, 64px); }

/* ---------- project boards ---------- */
.prancha { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px clamp(16px, 2vw, 32px); align-items: start; }
.prancha + .prancha, .study + .prancha { margin-top: clamp(72px, 9vw, 128px); }
.prancha-figure { grid-column: 1 / span 7; }
.prancha-photo { display: block; overflow: hidden; }
.prancha-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.prancha-photo:hover img { transform: scale(1.025); }
.prancha-copy { grid-column: 9 / -1; display: grid; gap: 20px; justify-items: start; align-self: center; }
.prancha-copy h3 a, .prancha-copy h3 { text-decoration: none; }
.prancha-copy h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.prancha-copy > p { color: var(--pedra); }
.prancha-copy .carimbo { width: 100%; }
.prancha-flip .prancha-figure { grid-column: 6 / -1; grid-row: 1; }
.prancha-flip .prancha-copy { grid-column: 1 / span 4; grid-row: 1; }
.prancha-wide .prancha-figure { grid-column: 1 / -1; }
.prancha-wide .prancha-photo img { aspect-ratio: auto; max-height: 520px; }
.prancha-wide .prancha-copy { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; gap: 20px clamp(16px, 2vw, 32px); }
.prancha-wide .prancha-copy > h3 { grid-column: 1 / span 4; }
.prancha-wide .prancha-copy > p { grid-column: 5 / span 4; }
.prancha-wide .prancha-copy > .carimbo { grid-column: 9 / -1; grid-row: 1 / span 2; }
.prancha-wide .prancha-copy > .chips { grid-column: 5 / span 4; }
.drawing { width: 100%; border-top: 1px solid var(--linha); padding-top: 14px; }
.drawing summary { cursor: pointer; font-weight: 500; }
.drawing img { margin: 16px 0 8px; background: #fff; }
.drawing p { font-size: .88rem; color: var(--pedra); }

/* Casa Rabelo Barbosa: two studies of one house */
.study { border-top: 1px solid var(--tinta); padding-top: 28px; }
.study-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px clamp(16px, 2vw, 32px); align-items: start; margin-bottom: 36px; }
.study-head h3 { grid-column: 1 / span 4; }
.study-head .study-label { grid-column: 5 / span 4; align-self: center; margin: 0; }
.study-head .chips { grid-column: 9 / -1; align-self: center; }
.study-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px clamp(16px, 2vw, 32px); align-items: start; }
.study-main { grid-column: 1 / span 8; }
.study-grid > .study-copy:nth-of-type(1) { grid-column: 9 / -1; align-self: end; }
.study-detail { grid-column: 9 / -1; grid-row: 2; }
.study-lavabo { grid-column: 1 / span 4; grid-row: 2 / span 2; }
.study-grid > .study-copy:nth-of-type(2) { grid-column: 5 / span 4; grid-row: 2; align-self: end; }
.study-copy { display: grid; gap: 14px; }
.study-copy p { color: var(--pedra); }
.study figcaption, .gallery figcaption, .project-hero figcaption, .about-portrait figcaption, .studio-portrait figcaption, .approach figcaption { margin-top: 10px; font-size: .86rem; color: var(--pedra); }

/* collaborations, people */
.collabs { margin-top: clamp(64px, 8vw, 104px); border-top: 1px solid var(--tinta); padding-top: 24px;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px clamp(16px, 2vw, 32px); }
.collabs h3 { grid-column: 1 / span 4; font-size: 1.5rem; }
.collabs ul { grid-column: 5 / -1; }
.collabs li, .people li { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.collabs li span, .people li span { color: var(--pedra); }
.collabs strong, .people strong { font-weight: 500; }

/* ---------- services: scope bars ---------- */
.scope-head, .scope-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(24px, 4vw, 64px); }
.scope-stages { display: grid; grid-template-columns: repeat(4, 1fr); }
.scope-stage { font-size: .86rem; color: var(--pedra); padding: 0 0 10px 10px; border-left: 1px solid var(--linha); }
/* The stage legend stays under the header while the rows scroll past. */
.scope-head { position: sticky; top: var(--header-h, 76px); z-index: 2; background: var(--cal); padding-top: 12px; border-bottom: 1px solid var(--linha); }
.section-tint .scope-head { background: var(--gesso); }
.scope-head + .scope-row { border-top: 0; }
.scope-row { padding: 28px 0; border-top: 1px solid var(--linha); align-items: center; }
.scope-row:last-child { border-bottom: 1px solid var(--linha); }
.scope-copy { display: grid; gap: 10px; justify-items: start; }
.icon { width: 36px; height: 36px; color: var(--oliva); flex: none; }
.sector-name { display: flex; align-items: center; gap: 16px; }
.scope-copy p { color: var(--pedra); }
.scope-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 44px; align-items: center;
  background: repeating-linear-gradient(90deg, var(--linha) 0 1px, transparent 1px 25%); }
.scope-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--linha); }
.scope-bar { grid-column: var(--from) / var(--to); grid-row: 1; height: 12px; background: var(--oliva); position: relative; }
.scope-bar::before, .scope-bar::after { content: ""; position: absolute; top: -6px; width: 1px; height: 24px; background: var(--oliva); }
.scope-bar::before { left: 0; }
.scope-bar::after { right: 0; }
.scope-note { margin-top: 28px; color: var(--pedra); }
.includes-label { font-weight: 500; margin-top: 6px; color: var(--tinta) !important; }
.includes { display: grid; gap: 4px; }
.includes li { padding-left: 18px; position: relative; color: var(--pedra); }
.includes li::before { content: ""; position: absolute; left: 0; top: .75em; width: 10px; height: 1px; background: var(--tinta); }

/* ---------- sectors ---------- */
.sectors { border-top: 1px solid var(--tinta); }
.sector { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 48px); align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--linha); text-decoration: none; }
.sector-img { overflow: hidden; }
.sector-img img { width: 200px; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sector:hover .sector-img img { transform: scale(1.05); }
.sector-text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 12px 32px; align-items: baseline; }
.sector-text h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.sector-text p { color: var(--pedra); }
.sector .arrow { font-size: 1.4rem; }

/* ---------- about / studio ---------- */
.about { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px clamp(16px, 2vw, 32px); align-items: end; padding-top: var(--section); }
.about-portrait { grid-column: 2 / span 4; }
/* Full portrait at its own 2:3 proportions, never cropped (feet included). */
.about-portrait img, .studio-portrait img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.about-copy { grid-column: 7 / -1; display: grid; gap: 22px; justify-items: start; min-width: 0; }
.about-copy > p { color: var(--pedra); }
.studio-lead { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px clamp(16px, 2vw, 32px); align-items: end; padding-top: clamp(40px, 7vw, 96px); }
.studio-lead-copy { grid-column: 1 / span 7; display: grid; gap: 28px; }
.studio-portrait { grid-column: 9 / -1; }
.prose-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px clamp(16px, 2vw, 32px); }
.prose-cols > h2 { grid-column: 1 / span 5; }
.prose-cols > div { grid-column: 7 / -1; display: grid; gap: 18px; justify-items: start; }
.studies { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px); }
.studies > div { border-top: 1px solid var(--tinta); padding-top: 20px; display: grid; gap: 12px; align-content: start; }
.studies p { color: var(--pedra); }
.timeline { border-top: 1px solid var(--tinta); }
.timeline li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px clamp(16px, 2vw, 32px); padding: 26px 0; border-bottom: 1px solid var(--linha); }
.tl-years { font: 400 1.25rem/1.3 var(--text); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
.timeline li > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 6px 32px; }
.timeline h3 { font-size: 1.45rem; }
.timeline li > div > span { grid-column: 1; }
.timeline li > div > p { grid-column: 2; grid-row: 1 / span 2; color: var(--pedra); }
.approach { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px clamp(16px, 2vw, 32px); align-items: center; }
.approach figure { grid-column: 1 / span 7; }
.approach figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.approach > div { grid-column: 8 / -1; display: grid; gap: 20px; justify-items: start; }
.approach > div p { color: var(--pedra); }
.people { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); border-top: 1px solid var(--tinta); }
.people li { grid-template-columns: 1fr; }

/* ---------- inner page leads ---------- */
.page-lead { padding-top: clamp(48px, 8vw, 112px); display: grid; gap: 28px; }
.page-lead h1 { max-width: 16ch; }
.index { display: flex; flex-wrap: wrap; gap: 12px 40px; border-top: 1px solid var(--tinta); padding-top: 18px; margin-top: 12px; }
.index a { display: grid; text-decoration: none; font-size: 1.05rem; }
.index a > span:first-child { font: 400 1.6rem/1.2 var(--display); }
.index a:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.index .muted { font-size: .88rem; }

/* ---------- project pages ---------- */
.project-lead { padding-top: clamp(36px, 6vw, 80px); }
.project-lead-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px clamp(16px, 2vw, 32px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.project-lead-grid h1 { grid-column: 1 / span 7; }
.project-lead-grid .lead { grid-column: 9 / -1; color: var(--pedra); }
.project-hero img { width: 100%; max-height: 82vh; object-fit: cover; }
.project-story { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px clamp(16px, 2vw, 32px); padding-top: var(--section); align-items: start; }
.project-aside { grid-column: 1 / span 4; display: grid; gap: 36px; position: sticky; top: 100px; }
.board-title { font-weight: 500; margin-bottom: 14px; }
.project-narrative { grid-column: 6 / span 6; display: grid; gap: 20px; }
.project-narrative p { font-size: 1.12rem; line-height: 1.7; color: #45463a; }
.gallery { padding-top: var(--section); display: grid; gap: clamp(20px, 3vw, 40px); }
.gallery-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.gallery-pair figure:nth-child(2) { margin-top: clamp(40px, 8vw, 120px); }
.gallery img { width: 100%; }
.gallery-wide img { max-height: 86vh; object-fit: cover; }

/* ---------- CTA band + footer ---------- */
.cta-band { background: var(--oliva); color: var(--cal); margin-top: var(--section); padding-block: clamp(64px, 9vw, 128px); }
.cta-inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px clamp(16px, 2vw, 32px); align-items: end; }
.cta-inner h2 { grid-column: 1 / span 7; }
.cta-inner p { grid-column: 1 / span 6; color: color-mix(in srgb, var(--cal) 82%, var(--oliva)); }
.cta-inner .button { grid-column: 9 / -1; grid-row: 1; justify-self: start; align-self: end; }
.site-footer { padding-block: clamp(56px, 7vw, 96px) 28px; }
.cta-band + .site-footer, main > .cta-band:last-child { margin-bottom: 0; }
.footer-inner { display: grid; grid-template-columns: auto 1fr; gap: 32px clamp(24px, 4vw, 64px); }
.footer-mark { width: clamp(160px, 18vw, 230px); height: auto; }
.footer-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.footer-lead { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--display); margin-bottom: 12px; }
.footer-email { font-size: 1.1rem; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.footer-cols nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.footer-cols nav a { text-decoration: none; }
.footer-cols nav a:hover { text-decoration: underline; }
.footer-navs { display: grid; gap: 22px; }
.footer-cols .footer-services { grid-template-columns: 1fr; padding-top: 18px; border-top: 1px solid var(--linha); font-size: .92rem; }
.scope-links { margin: 14px 0 0; }
.footer-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; border-top: 1px solid var(--linha);
  padding-top: 18px; font-size: .84rem; color: var(--pedra); max-width: none; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px clamp(16px, 2vw, 32px); padding-block: clamp(40px, 7vw, 96px) var(--section); align-items: start; }
.contact-intro { grid-column: 1 / span 5; display: grid; gap: 28px; position: sticky; top: 100px; }
.contact-direct { display: grid; gap: 12px; justify-items: start; border-top: 1px solid var(--linha); padding-top: 22px; }
.contact-email { font: 500 clamp(1.15rem, 1.6vw, 1.35rem)/1.3 var(--text); text-decoration-thickness: 1px; text-underline-offset: 5px; overflow-wrap: anywhere; }
.brief { grid-column: 7 / -1; }
.brief fieldset { border: 0; margin: 0; padding: 0 0 40px; min-width: 0; display: grid; gap: 20px; }
.brief fieldset + fieldset { border-top: 1px solid var(--linha); padding-top: 32px; }
.brief legend { display: flex; align-items: baseline; gap: 14px; font: 400 clamp(1.5rem, 2.2vw, 1.9rem)/1.2 var(--display); padding: 0; margin-bottom: 20px; float: left; width: 100%; }
.brief legend + * { clear: both; }
.step { font: 500 .8rem/1 var(--text); width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--tinta); border-radius: 50%; flex: none; transform: translateY(-4px); }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--linha); background: var(--gesso); cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice:has(input:checked) { background: var(--tinta); color: var(--cal); border-color: var(--tinta); }
.choice:has(input:focus-visible) { outline: 2px solid var(--oliva); outline-offset: 3px; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.span-2 { grid-column: 1 / -1; }
.field-f { display: grid; gap: 8px; }
.field-f label, .field-f .label { font-size: .92rem; font-weight: 500; }
.brief input[type="text"], .brief input[type="email"], .brief input[type="tel"], .brief select, .brief textarea {
  width: 100%; font: inherit; color: var(--tinta); background: var(--gesso); border: 0; border-bottom: 1px solid var(--tinta);
  padding: 13px 14px; border-radius: 0; min-height: 50px; }
.brief textarea { resize: vertical; min-height: 140px; }
.brief select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.brief input:focus, .brief select:focus, .brief textarea:focus { outline: 2px solid var(--oliva); outline-offset: 0; }
.help { font-size: .88rem; color: var(--pedra); }
.files { display: grid; gap: 8px; }
.file { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; font-size: .9rem; padding: 8px 12px; background: var(--gesso); }
.file input { font: inherit; font-size: .86rem; min-width: 0; }
.privacy { font-size: .86rem; color: var(--pedra); margin-bottom: 20px; }
.file-error, .form-error { color: #8F3A26; font-size: .92rem; line-height: 1.5; }
.form-error { margin: 0 0 18px; }
.brief-submit:disabled { opacity: .6; cursor: progress; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.thanks { padding-block: clamp(64px, 12vw, 160px); display: grid; gap: 28px; justify-items: start; }
.thanks img { width: 96px; border-radius: 50%; }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: 104px; }
@media (max-width: 640px) { [id] { scroll-margin-top: 84px; } }

/* ---------- boards: label line ---------- */
.prancha-label { font-size: .86rem; color: var(--pedra); }
.prancha-copy > .prancha-label { margin-bottom: -10px; }

/* ---------- home: turnkey band (the main offer) ---------- */
.hero-actions, .turnkey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.turnkey { background: var(--tinta); color: var(--cal); padding-block: var(--section); margin-top: var(--section); }
.hero + .turnkey { margin-top: clamp(24px, 4vw, 56px); }
.turnkey + .section { padding-top: var(--section); }
.turnkey-inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px clamp(16px, 2vw, 32px); align-items: center; }
.turnkey-photo { grid-column: 1 / span 6; }
.turnkey-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.turnkey-photo figcaption { margin-top: 10px; font-size: .86rem; color: color-mix(in srgb, var(--cal) 72%, var(--tinta)); }
.turnkey-copy { grid-column: 8 / -1; display: grid; gap: 24px; justify-items: start; }
.turnkey-copy h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
.turnkey-copy > p { color: color-mix(in srgb, var(--cal) 84%, var(--tinta)); }
.turnkey .link { color: var(--cal); }
.turnkey .link:hover { color: var(--gesso); }
.benefits { width: 100%; border-top: 1px solid color-mix(in srgb, var(--cal) 45%, var(--tinta)); }
.benefits li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--cal) 22%, var(--tinta)); font-size: 1.04rem; }
.benefits li::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--cal); transform: translateY(-1px); }
.journey { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 72px); }
.journey-bar { display: block; height: 12px; background: var(--cal); position: relative; }
.journey-bar::before, .journey-bar::after { content: ""; position: absolute; top: -6px; width: 1px; height: 24px; background: var(--cal); }
.journey-bar::before { left: 0; }
.journey-bar::after { right: 0; }
.journey ol { display: grid; grid-template-columns: repeat(4, 1fr); }
.journey li { display: grid; gap: 10px; align-content: start; padding: 22px 24px 0 14px; border-left: 1px solid color-mix(in srgb, var(--cal) 35%, var(--tinta)); }
.journey h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.journey p { color: color-mix(in srgb, var(--cal) 80%, var(--tinta)); font-size: .97rem; }
.journey .step { border-color: var(--cal); transform: none; }

/* services: the turnkey row leads */
.scope-tag { font-size: .8rem; font-weight: 500; background: var(--tinta); color: var(--cal); padding: 5px 10px; line-height: 1; }
.scope-main .scope-copy h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.scope-main .scope-bar { background: var(--tinta); height: 16px; }
.scope-main .scope-bar::before, .scope-main .scope-bar::after { background: var(--tinta); top: -4px; }
.page-lead > .button { justify-self: start; }

/* ---------- home: register of further projects ---------- */
.register-head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px clamp(16px, 2vw, 32px); align-items: end; margin: clamp(88px, 11vw, 152px) 0 24px; }
.register-head h3 { grid-column: 1 / span 6; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.register-head p { grid-column: 8 / -1; color: var(--pedra); }
.register { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 64px); border-top: 1px solid var(--tinta); }
.register-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linha); text-decoration: none; }
.register-img { overflow: hidden; }
.register-img img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.register-row:hover .register-img img { transform: scale(1.05); }
.register-text { display: grid; gap: 4px; min-width: 0; }
.register-text h3 { font-size: 1.4rem; }
.register-text .muted { font-size: .86rem; }

/* ---------- projects page: group labels, experience ---------- */
.group-label { font-weight: 500; font-size: .95rem; border-top: 1px solid var(--tinta); padding-top: 14px; margin-bottom: clamp(32px, 4vw, 56px); max-width: none; }
.group-break { margin-top: clamp(80px, 10vw, 140px); }
.group-break .group-label { margin-bottom: 8px; }
.group-break > p.muted { margin-bottom: clamp(32px, 4vw, 56px); }
.group-break + .prancha { margin-top: 0; }
.experience { margin-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px clamp(16px, 2vw, 32px); align-items: start; }
.experience > .group-label { grid-column: 1 / -1; margin-bottom: 8px; }
.experience > h3 { grid-column: 1 / span 5; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.experience > p:not(.group-label) { grid-column: 7 / -1; color: var(--pedra); }
.experience > .link { grid-column: 7 / -1; justify-self: start; }
.about-copy > .credentials { color: var(--tinta); font-weight: 500; }
.tl-link { margin-top: 10px; grid-column: 2; justify-self: start; }

/* ---------- contact: short form ---------- */
.brief-head { display: grid; gap: 6px; margin-bottom: 28px; }
.brief-head h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.brief-note { font-size: .88rem; margin-top: 14px; }

/* ---------- enlarge photographs ---------- */
a.zoom { display: block; cursor: zoom-in; overflow: hidden; }
a.zoom img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.zoom:hover img { transform: scale(1.02); }
.lightbox { padding: 0; border: 0; margin: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  background: #1F2016; color: var(--cal); }
.lightbox::backdrop { background: #1F2016; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: max(12px, env(safe-area-inset-top, 0px)) var(--gutter) 12px; font-size: .88rem; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-caption { padding: 14px var(--gutter) max(18px, env(safe-area-inset-bottom, 0px)); max-width: none; font-size: .92rem; color: color-mix(in srgb, var(--cal) 85%, transparent); }
.lb-btn { min-width: 44px; min-height: 44px; padding: 0 14px; background: rgba(31, 32, 22, .55); color: var(--cal); border: 1px solid color-mix(in srgb, var(--cal) 40%, transparent);
  font: 500 .9rem var(--text); cursor: pointer; }
.lb-btn:hover { border-color: var(--cal); }
.lb-btn:focus-visible { outline: 2px solid var(--cal); outline-offset: 2px; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.1rem; }
.lb-prev { left: var(--gutter); }
.lb-next { right: var(--gutter); }
html.lb-open { overflow: hidden; }

@media (max-width: 900px) {
  .turnkey-photo, .turnkey-copy, .register-head h3, .register-head p, .experience > h3, .experience > p:not(.group-label), .experience > .link { grid-column: 1 / -1; }
  .register { grid-template-columns: 1fr; }
  .tl-link { grid-column: 1; }
}
@media (max-width: 640px) {
  .register-row { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; }
  .register-img img { width: 88px; }
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-copy { grid-column: 1 / -1; padding-bottom: 48px; }
  .hero-board { grid-column: 1 / -1; }
  .hero-board .chips { margin-left: 0; }
  .prancha-figure, .prancha-flip .prancha-figure { grid-column: 1 / -1; grid-row: auto; }
  .prancha-copy, .prancha-flip .prancha-copy { grid-column: 1 / span 8; grid-row: auto; }
  .prancha-wide .prancha-copy > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; padding: 8px var(--gutter) 24px;
    background: var(--cal); border-bottom: 1px solid var(--linha); }
  .nav.is-open { display: flex; }
  .nav a { font: 400 1.8rem/1.2 var(--display); padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .nav a[aria-current="page"] { border-bottom-color: var(--tinta); }
  .nav.is-open { max-height: calc(100dvh - 76px); overflow-y: auto; }
  .nav-group { display: block; }
  .nav-group > a { display: block; }
  .nav-sub { position: static; display: flex; min-width: 0; padding: 4px 0 10px 18px; background: none; border: 0; box-shadow: none; }
  .nav-sub::before { display: none; }
  .nav-sub a { font: 400 1.05rem/1.35 var(--text); padding: 10px 0; border-bottom: 0; white-space: normal; }
  .header-inner { position: relative; }
  .section-head h2, .section-head p, .about-portrait, .about-copy, .studio-lead-copy, .studio-portrait, .prose-cols > h2, .prose-cols > div,
  .approach figure, .approach > div, .project-lead-grid h1, .project-lead-grid .lead, .project-aside, .project-narrative,
  .contact-intro, .brief, .cta-inner h2, .cta-inner p, .cta-inner .button, .collabs h3, .collabs ul,
  .study-head > *, .study-grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .prancha-copy, .prancha-flip .prancha-copy { grid-column: 1 / -1; }
  .project-aside, .contact-intro { position: static; }
  .studio-portrait { max-width: 420px; }
  .about-portrait { max-width: 420px; }
  .scope-head, .scope-row { grid-template-columns: 1fr; }
  .scope-head > span { display: none; }
  .studies { grid-template-columns: 1fr; }
  .timeline li > div { grid-template-columns: 1fr; }
  .timeline li > div > p { grid-column: 1; grid-row: auto; }
  .footer-cols { grid-template-columns: 1fr; }
  .gallery-pair figure:nth-child(2) { margin-top: 0; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .brand-name { font-size: 1.1rem; }
  .brand img { width: 38px; height: 38px; }
  .header-inner { min-height: 66px; gap: 14px; }
  .scope-head { top: var(--header-h, 66px); }
  .hero-board .chips { margin-top: -36px; gap: 8px; }
  .hero-board .chips li { width: calc(25% - 6px); min-width: 0; padding: 4px 4px 7px; }
  .chip-swatch { height: 44px; }
  .chip-name { font-size: .68rem; }
  .sector { grid-template-columns: 96px 1fr auto; }
  .sector-img img { width: 96px; }
  .sector-text { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; }
  .people, .fields-2, .gallery-pair { grid-template-columns: 1fr; }
  .collabs li { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-mark { width: 170px; }
  .carimbo > div { grid-template-columns: 6.5rem 1fr; }
  .carimbo-inline { grid-template-columns: 1fr; }
  .carimbo-inline > div + div { border-left: 0; border-top: 1px solid var(--linha); }
  .carimbo-inline > div { grid-template-columns: 6.5rem 1fr; }
  .carimbo-stats > div { grid-template-columns: 1fr; }
  .button { width: 100%; }
  .file { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 900px) {
  .journey ol { grid-template-columns: 1fr 1fr; row-gap: 12px; }
}
@media (max-width: 560px) {
  .journey-bar { display: none; }
  .journey ol { grid-template-columns: 1fr; }
  .journey li { border-left: 2px solid var(--cal); padding-top: 14px; padding-bottom: 6px; }
  .hero-actions, .turnkey-actions { align-items: stretch; flex-direction: column; justify-self: stretch; }
  .hero-actions .link, .turnkey-actions .link { align-self: flex-start; }
}

/* ---------- projects: render-only work, kept small at the end ---------- */
.section-head-small h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.renders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 32px); border-top: 1px solid var(--linha); padding-top: 28px; }
.render-card { display: grid; gap: 10px; align-content: start; }
.render-photo { display: block; overflow: hidden; }
.render-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.render-card figure { margin-bottom: 6px; }
.render-card h3 { font-size: 1.35rem; }
.render-card h3 a { text-decoration: none; }
.render-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.render-card > p:last-child { color: var(--pedra); font-size: .95rem; }
@media (max-width: 900px) { .renders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .renders { grid-template-columns: 1fr; } }

/* ---------- services page ---------- */
.page-lead-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 32px); align-items: end; }
.page-lead-copy { grid-column: 1 / span 6; display: grid; gap: 28px; justify-items: start; }
.page-lead-split h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); max-width: 13ch; }
.page-lead-photo { grid-column: 8 / -1; }
.page-lead-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.page-lead-photo figcaption { margin-top: 10px; font-size: .86rem; color: var(--pedra); }
.approach > div h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(16px, 2vw, 32px); }
.field { display: grid; gap: 10px; align-content: start; justify-items: start; }
.field figure { width: 100%; margin-bottom: 10px; overflow: hidden; }
.field img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.field h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.field p.muted { font-size: .9rem; }
.field .link { margin-top: 6px; }
.section-tint + .cta-band { margin-top: 0; }
@media (max-width: 900px) {
  .page-lead-copy, .page-lead-photo { grid-column: 1 / -1; }
  .page-lead-photo { max-width: 520px; }
  .page-lead-photo img { aspect-ratio: 4 / 3; }
  .fields { grid-template-columns: 1fr; gap: 40px; }
  .field { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 20px; align-items: start; }
  .field figure { grid-row: 1 / span 4; margin: 0; }
}
@media (max-width: 560px) {
  .field { grid-template-columns: 1fr; }
  .field figure { grid-row: auto; margin-bottom: 6px; }
}
.fields + .scope-note { margin-top: clamp(40px, 5vw, 64px); max-width: 62ch; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- site management: second focus, quieter than turnkey ---------- */
.scope-tag-soft { background: transparent; color: var(--oliva); box-shadow: inset 0 0 0 1px var(--oliva); }
.scope-second .scope-bar { height: 14px; }
.scope-copy > .link { margin-top: 6px; }
.site-aside { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(32px, 4vw, 48px); padding: clamp(22px, 3vw, 32px); border: 1px solid var(--linha); border-left: 3px solid var(--oliva); background: var(--cal); }
.site-aside h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); margin-bottom: 8px; }
.site-aside p { color: var(--pedra); max-width: 60ch; }
.site-aside-links { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: flex-start; }
@media (max-width: 900px) { .site-aside { grid-template-columns: 1fr; } }

/* checklist for site supervision (home aside, services approach) */
.checks { display: grid; gap: 8px; margin-top: 4px; }
.checks li { display: flex; align-items: baseline; gap: 12px; }
.checks li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--oliva); transform: translateY(-1px); }
.site-aside .checks { margin-top: 16px; }
.approach-note { font-size: .92rem; border-top: 1px solid var(--linha); padding-top: 14px; }

/* ---------- WhatsApp contact ---------- */
.whatsapp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.whatsapp-label { color: var(--pedra); font-size: .92rem; }
.whatsapp strong { font-weight: 500; font-size: 1.08rem; }
.copy { font: 500 .82rem/1 var(--text); color: var(--tinta); background: transparent; border: 1px solid var(--linha); padding: 7px 10px; cursor: pointer; align-self: center; }
.copy:hover { border-color: var(--tinta); }
.copy-status { font-size: .86rem; color: var(--oliva); }
.footer-whatsapp { margin-top: 12px; }

/* ---------- Google reviews (home) ---------- */
.reviews-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px clamp(16px, 2vw, 32px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.reviews-head h2 { grid-column: 1 / span 7; }
.reviews-score { grid-column: 9 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.reviews-rating { font: 400 clamp(2.6rem, 4vw, 3.6rem)/1 var(--display); }
.stars { color: var(--oliva); letter-spacing: .12em; font-size: .95rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 32px); border-top: 1px solid var(--tinta); padding-top: clamp(28px, 4vw, 44px); }
.review { display: grid; gap: 14px; align-content: start; }
.review figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.review-by { font-weight: 500; font-size: .95rem; }
.review-feature { grid-column: 1 / span 5; }
.review-feature blockquote p { font: 400 clamp(1.5rem, 2.3vw, 2.05rem)/1.3 var(--display); text-wrap: pretty; }
.review-list { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(16px, 2vw, 32px); }
.review-list .review { border-top: 1px solid var(--linha); padding-top: 16px; }
.review-list blockquote p { color: var(--pedra); }
.reviews-foot { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; font-size: .92rem; }
@media (max-width: 900px) {
  .reviews-head h2, .reviews-score, .review-feature, .review-list { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .review-list { grid-template-columns: 1fr; } }
.review, .review blockquote { margin: 0; }
.review { gap: 12px; }
.review-feature blockquote p { font-variation-settings: "opsz" 11; font-optical-sizing: none; font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.32; }

/* ---------- contact channels: form, WhatsApp, email, Instagram ---------- */
.channels { display: grid; border-top: 1px solid var(--linha); width: 100%; }
.ch { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--linha); text-decoration: none; }
.ch-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ch-text { display: grid; gap: 2px; min-width: 0; }
.ch-label { font-weight: 500; }
.ch-value { color: var(--pedra); font-size: .94rem; overflow-wrap: anywhere; }
.ch:hover .ch-label { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.contact-channels { display: grid; gap: 14px; }
.channels-title { font-size: clamp(1.35rem, 1.9vw, 1.6rem); }
.contact-intro { position: static; }

/* in the closing band */
.cta-channels { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: clamp(16px, 3vw, 32px); padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--cal) 28%, var(--oliva)); }
.cta-channels > p { color: color-mix(in srgb, var(--cal) 82%, var(--oliva)); font-size: .95rem; }
.channels-inline { display: flex; flex-wrap: wrap; gap: 10px 32px; border: 0; width: auto; }
.channels-inline .ch { display: inline-grid; grid-template-columns: 22px auto auto; gap: 10px; padding: 6px 0; border: 0; color: var(--cal); }
.channels-inline .ch-text { display: flex; gap: 8px; align-items: baseline; }
.channels-inline .ch-value { color: color-mix(in srgb, var(--cal) 80%, var(--oliva)); }

/* in the footer */
.channels-footer { border: 0; gap: 2px; }
.channels-footer .ch { grid-template-columns: 22px auto auto; justify-content: start; padding: 6px 0; border: 0; }
.channels-footer .ch-text { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.channels-footer .ch-label { min-width: 5.5em; color: var(--pedra); font-weight: 400; font-size: .92rem; }
.channels-footer .ch-value { color: var(--tinta); font-size: 1rem; }

/* floating contact dock: button + panel with every channel */
.contact-dock { position: fixed; right: 20px; bottom: 20px; z-index: 15; display: grid; justify-items: end; gap: 10px; transition: opacity .2s ease, transform .2s ease; }
.contact-dock.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.dock-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--tinta); color: var(--cal); border: 0;
  font: 500 .95rem/1 var(--text); text-decoration: none; cursor: pointer; box-shadow: 0 8px 24px rgb(43 45 31 / .22); }
.dock-toggle:hover { background: var(--oliva); }
.dock-toggle .ch-icon { width: 20px; height: 20px; }
.dock-toggle .i-close, .contact-dock.is-open .dock-toggle .i-chat { display: none; }
.contact-dock.is-open .dock-toggle .i-close { display: block; }
.dock-panel { width: min(340px, calc(100vw - 28px)); background: var(--gesso); color: var(--tinta); border: 1px solid var(--linha);
  box-shadow: 0 18px 48px rgb(43 45 31 / .2); padding: 20px 20px 6px; transform-origin: bottom right; }
.contact-dock.is-open .dock-panel { animation: dock-in .18s ease-out; }
@keyframes dock-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.dock-title { font: 400 1.35rem/1.2 var(--display); font-variation-settings: "opsz" 9; }
.dock-sub { color: var(--pedra); font-size: .9rem; margin: 4px 0 12px; }
.channels-dock .ch { padding: 12px 0; }
.channels-dock li:last-child .ch { border-bottom: 0; }
html.lb-open .contact-dock { display: none; }
@media (max-width: 640px) { .contact-dock { right: 14px; bottom: 14px; } .dock-toggle { padding: 12px 16px; } }
@media (prefers-reduced-motion: reduce) { .contact-dock.is-open .dock-panel { animation: none; } .contact-dock { transition: none; } }
@media print { .contact-dock { display: none; } }
.contact-intro h1 { font-size: clamp(2.5rem, 4.2vw, 4.2rem); max-width: 12ch; }

/* ---------- cookie notice (only when measurement is configured) ---------- */
/* A centred dialog over a dimmed page: the visitor answers before browsing. Both choices are one click and the same size. */
.consent { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgb(43 45 31 / .58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: consent-fade .25s ease-out; }
.consent[hidden] { display: none; }
.consent-panel { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 18px; justify-items: start;
  padding: clamp(24px, 5vw, 40px); background: var(--gesso); color: var(--tinta); border: 1px solid var(--linha);
  box-shadow: 0 30px 80px rgb(43 45 31 / .35); font-size: 1rem; line-height: 1.6; }
.consent-panel p { margin: 0; }
.consent-panel:focus { outline: none; }
.arrow { font-variant-emoji: text; }
.consent-mark { width: 56px; height: 56px; border-radius: 50%; }
.consent-title { margin: 0; font-size: clamp(1.7rem, 4.6vw, 2.2rem); line-height: 1.1; }
.consent-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.consent-btn { font: 500 1rem/1 var(--text); padding: 17px 16px; background: transparent; color: var(--tinta); border: 1px solid var(--tinta); cursor: pointer; }
.consent-btn:hover { background: var(--tinta); color: var(--cal); }
.consent-btn.is-primary { background: var(--tinta); color: var(--cal); }
.consent-btn.is-primary:hover { background: var(--oliva); border-color: var(--oliva); }
.consent-btn:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; }
.consent-note { font-size: .86rem; color: var(--pedra); }
html.consent-open { overflow: hidden; }
html.consent-open .contact-dock { display: none; }
@keyframes consent-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
.cookie-prefs { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-prefs[hidden] { display: none; }
@media (max-width: 640px) {
  .consent { place-items: end stretch; padding: 10px; }
  .consent-panel { width: 100%; }
}
@media print { .consent { display: none; } }

/* ---------- hero trust strip: Bianca + Google rating ---------- */
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 22px; border-top: 1px solid var(--linha); width: 100%; }
.trust-person, .trust-rating { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.trust-person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.trust-person > span { display: grid; line-height: 1.3; }
.trust-person strong { font-weight: 500; font-size: .95rem; }
.trust-person > span > span { color: var(--pedra); font-size: .86rem; }
.trust-rating { font-size: .92rem; gap: 10px; }
.trust-rating .stars { font-size: 1rem; }
.trust-person:hover strong, .trust-rating:hover > span:last-child { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px clamp(16px, 2vw, 32px); align-items: start; }
.faq-head { grid-column: 1 / span 4; display: grid; gap: 18px; justify-items: start; position: sticky; top: 110px; }
.faq-head p { color: var(--pedra); }
.faq-list { grid-column: 6 / -1; border-top: 1px solid var(--tinta); }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 20px 0; font: 400 clamp(1.2rem, 1.6vw, 1.4rem)/1.3 var(--display); font-variation-settings: "opsz" 9; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 300 1.5rem/1 var(--text); color: var(--oliva); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--oliva); }
.faq-item p { color: var(--pedra); max-width: 62ch; padding: 0 0 22px; }
@media (max-width: 900px) {
  .faq-head, .faq-list { grid-column: 1 / -1; }
  .faq-head { position: static; }
}
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* ---------- before and after ---------- */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 16px); }
.ba-side { position: relative; margin: 0; }
.ba-side img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ba-tag { position: absolute; left: 10px; top: 10px; font: 500 .78rem/1 var(--text); letter-spacing: .02em; padding: 6px 9px; background: var(--gesso); color: var(--tinta); }
.ba-after .ba-tag { background: var(--tinta); color: var(--cal); }
.ba-before img { filter: saturate(.92); }
.ba-row { display: grid; gap: 14px; }
.ba-row + .ba-row { margin-top: clamp(40px, 5vw, 64px); }
.ba-row h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.ba-row:nth-child(n) .ba-pair { }
.ba .ba-row:has(.ba-side img[height="1600"]) .ba-side img, .ba-side img[height="1600"], .ba-side img[height="1448"], .ba-side img[height="1086"][width="814"] { aspect-ratio: 3 / 4; }
.ba-row:has(img[height="1600"]) .ba-pair { max-width: 860px; }
.ba-compact .ba-side img { aspect-ratio: 4 / 5; }
.turnkey-caption { margin-top: 12px; font-size: .86rem; }
.turnkey-caption a { color: color-mix(in srgb, var(--cal) 78%, var(--tinta)); }
.turnkey-caption a:hover { color: var(--cal); }
.turnkey .ba-tag { background: var(--cal); color: var(--tinta); }
.turnkey .ba-after .ba-tag { background: var(--oliva); color: var(--cal); }

/* before / during / after: three photos in a row; concept vs built */
.ba-pair.ba-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-during .ba-tag { background: var(--oliva); color: var(--cal); }
.ba-concept .ba-tag { background: var(--gesso); color: var(--tinta); }
.ba-built .ba-tag { background: var(--tinta); color: var(--cal); }
.ba-side img[height="1800"][width="1350"] { aspect-ratio: 3 / 4; }
.ba-row:has(img[height="1800"][width="1350"]) .ba-pair { max-width: 860px; }
.ba-note { color: var(--pedra); max-width: 62ch; margin-top: -4px; }
.renders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .ba-pair.ba-n3 { grid-template-columns: 1fr 1fr; } .ba-pair.ba-n3 .ba-side:last-child { grid-column: 1 / -1; } }

/* ---------- landing pages (Google Ads) ---------- */
.lp-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 32px); align-items: center; padding-block: clamp(32px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.lp-copy { grid-column: 1 / span 6; display: grid; gap: 24px; justify-items: start; }
.lp-copy h1 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); text-wrap: balance; }
.lp-copy h1 span { display: block; }
.lp-checks { font-size: 1.02rem; }
.lp-visual { grid-column: 8 / -1; }
.lp-visual .ba-side img { aspect-ratio: 3 / 4; }
.lp-caption { margin-top: 10px; font-size: .86rem; }
.lp-caption a { color: var(--pedra); }
.lp-steps { margin-top: 0; }
.lp-steps h2 { font-size: clamp(2rem, 3.4vw, 3rem); max-width: 18ch; }
.lp-steps .journey { margin-top: clamp(28px, 4vw, 48px); }
.lp-proof .ba-pair { margin-top: 8px; }
.lp-form { padding-top: var(--section); }
.lp-form .contact-intro h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
@media (max-width: 900px) {
  .lp-copy, .lp-visual { grid-column: 1 / -1; }
  .lp-visual { max-width: 560px; }
}

/* ---------- October 2026 revision: what we renovate (paths) and levels of support ---------- */
.paths { border-top: 1px solid var(--tinta); }
.paths-note { margin-top: 22px; color: var(--pedra); max-width: 72ch; }
.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.level { display: grid; gap: 12px; align-content: start; justify-items: start; padding: clamp(20px, 2.2vw, 28px); background: var(--cal); border: 1px solid var(--linha); }
.section:not(.section-tint) .level { background: var(--gesso); }
.level h3 { font-size: clamp(1.4rem, 1.8vw, 1.7rem); }
.level > p { color: var(--pedra); }
.level .includes { margin-top: 4px; border-top: 1px solid var(--linha); padding-top: 14px; width: 100%; }
.level-main { background: var(--tinta) !important; color: var(--cal); border-color: var(--tinta); }
.level-main > p, .level-main .includes li { color: color-mix(in srgb, var(--cal) 82%, var(--tinta)); }
.level-main .includes { border-top-color: color-mix(in srgb, var(--cal) 30%, var(--tinta)); }
.level-main .includes li::before { background: var(--cal); }
.level-tag { font-size: .8rem; font-weight: 500; line-height: 1; padding: 6px 10px; background: var(--cal); color: var(--tinta); }
.levels-notes { margin-top: clamp(20px, 3vw, 32px); display: grid; gap: 8px; max-width: 80ch; }
.levels-notes li { display: flex; align-items: baseline; gap: 12px; color: var(--pedra); }
.levels-notes li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--oliva); transform: translateY(-1px); }
.register-head-tight { margin-top: clamp(48px, 6vw, 80px); }
.section-tint + .turnkey { margin-top: 0; }
@media (max-width: 1080px) { .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .levels { grid-template-columns: 1fr; } }

/* contact page and landing form: heading, then the form, then the other channels */
.contact > .contact-intro { grid-column: 1 / span 5; grid-row: 1; }
.contact > .brief { grid-column: 7 / -1; grid-row: 1 / span 2; }
.contact > .contact-more { grid-column: 1 / span 5; grid-row: 2; display: grid; gap: 18px; align-content: start; }
@media (max-width: 900px) {
  .contact > .contact-intro, .contact > .brief, .contact > .contact-more { grid-column: 1 / -1; grid-row: auto; }
}

/* reviews: on phones the first three show, the rest open with a button */
.reviews-toggle { display: none; }
@media (max-width: 640px) {
  .js .reviews:not(.is-expanded) .review-more { display: none; }
  .reviews-toggle:not([hidden]) { display: inline-flex; align-items: center; min-height: 48px; margin-top: 28px; padding: 0 20px;
    font: 500 1rem var(--text); color: var(--tinta); background: transparent; border: 1px solid var(--tinta); cursor: pointer; }
}

/* phones: request bar fixed at the bottom (replaces the floating "Falar connosco" button) */
.mobile-bar { display: none; }
@media (max-width: 640px) {
  .contact-dock { display: none; }
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 16; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--cal) 94%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--linha); transition: transform .25s ease, opacity .25s ease; }
  .mobile-bar.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .mobile-bar a { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; text-decoration: none; font: 500 1rem/1 var(--text); }
  .mobile-bar-main { justify-content: space-between; background: var(--tinta); color: var(--cal); }
  .mobile-bar-wa { border: 1px solid var(--tinta); color: var(--tinta); background: var(--gesso); }
  .mobile-bar-wa .ch-icon { width: 20px; height: 20px; }
  html.consent-open .mobile-bar, html.lb-open .mobile-bar, html.menu-open .mobile-bar { display: none; }

  /* hero: shorter, so the photograph reaches the first screen */
  .hero { padding-block: 24px 40px; }
  .hero-copy { gap: 20px; padding-bottom: 28px; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 2.6rem); }
  .hero h1 span { white-space: normal; }
  .hero-trust { padding-top: 16px; }

  /* touch: at least 44 px to tap, without changing how the links look */
  .link { position: relative; }
  .link::after { content: ""; position: absolute; inset: -10px -4px; }
  .language a { padding: 14px 11px; }
  .footer-cols nav a { display: block; padding: 8px 0; }
  .cookie-prefs { padding: 10px 0; }
  .trust-person, .trust-rating { min-height: 44px; }
  .lp-caption a, .turnkey-caption a, .hero-board figcaption a { display: inline-block; padding: 10px 0; }

  /* text: nothing under 14 px */
  .chip-name, .chips-small .chip-name, .prancha-label, .ba-tag, .privacy, .footer-base, .register-text .muted, .trust-person > span > span,
  .lp-caption, .turnkey-caption, .brief-note, .index .muted, .study figcaption, .gallery figcaption, .project-hero figcaption,
  .about-portrait figcaption, .studio-portrait figcaption, .approach figcaption, .page-lead-photo figcaption, .carimbo, .carimbo-stats dd,
  .consent-note, .dock-sub, .field p.muted, .reviews-foot, .trust-rating, .review-by, .level-tag { font-size: .875rem; }
  .hero-board .chips li { padding: 4px 4px 8px; }

  /* the closing band already lists every channel: no second copy in the footer */
  .footer-cols > div:first-child { display: none; }
}
/* landing form: the section heading already says it, so the form's own heading is read by screen readers only */
.lp-form .brief-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .paths .sector-name .icon { display: none; }
  .paths .sector-text h3 { font-size: 1.5rem; }
  .footer-cols nav a { padding: 10px 0; }
}

/* ---------- phone/tablet menu: fits one screen, and the page behind does not scroll ---------- */
@media (max-width: 900px) {
  html.menu-open { overflow: hidden; }
  .nav.is-open { overscroll-behavior: contain; padding-bottom: 16px; }
  .nav > a, .nav-group > a { font-size: 1.55rem; padding: 10px 0; }
  .nav-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 0 0 6px; }
  .nav-sub a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; font-size: 1rem; line-height: 1.25; }
  .nav-sub .nav-sub-all { display: none; }
}
/* the open menu covers the whole screen under the header: nothing behind it can be tapped or scrolled */
.nav-cta { display: none; }
@media (max-width: 900px) {
  .nav.is-open { left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); height: calc(100vh - 76px); height: calc(100dvh - 76px); max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav .nav-cta { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding: 16px 20px; min-height: 54px;
    background: var(--tinta); color: var(--cal); border: 0; font: 500 1rem/1.2 var(--text); text-decoration: none; }
}
@media (max-width: 640px) {
  .nav.is-open { height: calc(100vh - 66px); height: calc(100dvh - 66px); }
}
/* phones/tablets: a tap counts as hover on iOS; keep the two-column list instead of the desktop drop-down */
@media (max-width: 900px) {
  .nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { display: grid; }
}