/* ArquiNova — folha de desenho: papel claro, traço fino, cotas com pontas redondas,
   a faixa amarela do logótipo como único acento; cada página leva o seu carimbo (folha 01–05). */
:root {
  --paper: #FBFBF7;
  --paper-2: #F2F1EA;
  --ink: #161614;
  --muted: #5D5C54;
  --rule: #DAD8CD;
  --rule-strong: #B9B7AB;
  --brand: #FFDE59;
  --brand-ink: #161614;
  --hatch: rgba(22, 22, 20, .13);
  --focus: #1C5FD4;

  --f-display: "Quicksand", ui-rounded, "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: .78rem; --t-sm: .9rem; --t-md: 1.0625rem; --t-lg: 1.3rem;
  --t-xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --t-2xl: clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem);

  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --maxw: 1160px;
  --radius-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121210; --paper-2: #1A1A17; --ink: #EDECE4; --muted: #A6A499;
    --rule: #2E2D29; --rule-strong: #4A4943; --hatch: rgba(237, 236, 228, .11); --focus: #7FA8FF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121210; --paper-2: #1A1A17; --ink: #EDECE4; --muted: #A6A499;
  --rule: #2E2D29; --rule-strong: #4A4943; --hatch: rgba(237, 236, 228, .11); --focus: #7FA8FF;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: var(--t-md); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 30; background: var(--paper);
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.005em; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

.wrap { width: 100%; max-width: calc(var(--maxw) + 64px); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--brand); color: var(--brand-ink); padding: 8px 14px; border-radius: var(--radius-pill); }

/* logótipo */
.lg-pill { fill: var(--brand); }
.lg-ink { fill: var(--ink); }
.lg-line { stroke: var(--ink); }
.lg-title { stroke: var(--brand-ink); }

/* cabeçalho */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; padding-block: 12px; }
.brand { display: inline-flex; line-height: 0; }
.logo { height: 38px; width: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 2px; }
.nav a {
  text-decoration: none; font-size: var(--t-sm); font-weight: 500; color: var(--muted);
  padding: 6px 12px; border-radius: var(--radius-pill); transition: background-color .15s, color .15s;
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--brand-ink); background: var(--brand); }
@media (max-width: 640px) {
  .header-in { padding-block: 10px 8px; }
  .logo { height: 32px; }
  .nav { width: 100%; justify-content: space-between; gap: 0; }
  .nav a { padding: 6px 8px; font-size: .86rem; }
}

/* textos de apoio */
.eyebrow, .k {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); color: var(--muted); max-width: 62ch; }
.tbc {
  display: inline-block; padding: 0 .45em; border: 1.5px dashed var(--rule-strong); border-radius: 6px;
  color: var(--muted); font-style: normal; white-space: nowrap;
}

/* botões (forma de comprimido, como a faixa do logótipo) */
.actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.btn {
  display: inline-flex; align-items: center; gap: .5em; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: var(--radius-pill);
  font: 600 var(--t-sm)/1 var(--f-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .15s, background-color .15s, border-color .15s;
  max-width: 100%;
}
.btn span { overflow: hidden; text-overflow: ellipsis; }
.btn:hover { transform: translateY(-1px); }
.btn-brand { background: var(--brand); color: var(--brand-ink); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--paper-2); }
.btn-ghost { background: var(--paper-2); color: var(--ink); border-color: var(--rule); }
.btn-dark { background: var(--brand-ink); color: var(--brand); }
.btn-line-dark { border-color: var(--brand-ink); color: var(--brand-ink); }
.btn-sm { min-height: 40px; padding: 0 16px; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.arr { width: 22px; height: 22px; flex: none; }

/* início */
.hero { border-bottom: 1px solid var(--rule); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 56px 64px; }
.hero-text { display: grid; gap: 20px; min-width: 0; }
.hero-text .actions { margin-top: 8px; }
.hero-art { min-width: 0; }
.hero-drawing { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 36px 40px; gap: 28px; } .hero-art { max-width: 520px; } }

.d-axis { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 10 5 2 5; }
.d-bubble { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1.2; }
.d-bubble-t { font: 500 13px var(--f-mono); fill: var(--muted); }
.d-pill { fill: var(--brand); }
.d-beam { fill: var(--ink); }
.d-guide { stroke: var(--ink); stroke-width: 1.6; }
.d-dot { fill: var(--ink); }
.d-lead { stroke: var(--rule-strong); stroke-width: 1.2; }
.d-label { font: 500 15px var(--f-mono); letter-spacing: .12em; fill: var(--muted); }
.d-block, .d-block-l { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.d-block-name { font: 700 19px var(--f-display); letter-spacing: .06em; fill: var(--ink); }
.d-block-k { font: 500 10.5px var(--f-mono); letter-spacing: .12em; fill: var(--muted); }
.d-block-v { font: 500 15px var(--f-mono); fill: var(--ink); }
@media (max-width: 640px) {
  .d-label { font-size: 21px; letter-spacing: .08em; }
  .d-block-name { font-size: 25px; }
  .d-block-k { font-size: 14px; }
  .d-block-v { font-size: 20px; }
}

.section { padding-block: 64px; }
.section.alt { background: var(--paper-2); border-block: 1px solid var(--rule); }
@media (max-width: 640px) { .section { padding-block: 44px; } }
.sec-head { display: grid; gap: 8px; margin-bottom: 32px; min-width: 0; }
.sec-lead { color: var(--muted); max-width: 60ch; margin-top: 4px; }

.svc-list { border-top: 1.5px solid var(--ink); }
.svc-list li { border-bottom: 1px solid var(--rule); }
.svc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 8px 32px; align-items: center;
  padding-block: 22px; text-decoration: none; transition: background-color .15s, padding .2s;
}
.svc-row:hover { background: var(--paper-2); padding-inline: 12px; }
.svc-name { font: 600 var(--t-lg)/1.25 var(--f-display); }
.svc-desc { color: var(--muted); }
.svc-row .arr { color: var(--muted); }
@media (max-width: 720px) { .svc-row { grid-template-columns: minmax(0, 1fr) auto; } .svc-desc { grid-column: 1 / -1; grid-row: 2; } }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; position: relative; }
.step { display: grid; gap: 10px; align-content: start; position: relative; padding-top: 44px; min-width: 0; }
.step::before { content: ""; position: absolute; top: 15px; left: 0; right: -32px; border-top: 1.6px solid var(--ink); }
.step:last-child::before { right: 0; }
.step-n {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: var(--brand-ink);
  font: 600 var(--t-sm)/1 var(--f-mono);
}
.step p { color: var(--muted); }
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .step { padding-top: 0; padding-left: 52px; }
  .step::before { top: 32px; bottom: -28px; left: 15px; right: auto; border-top: 0; border-left: 1.6px solid var(--ink); }
  .step:last-child::before { display: none; }
}

/* banda amarela de contacto */
.band { background: var(--brand); color: var(--brand-ink); }
.band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-block: 52px; }
.band-text { display: grid; gap: 10px; max-width: 60ch; min-width: 0; }
.band-text p { opacity: .85; }

/* cabeçalho das páginas interiores */
.page-head { padding-block: 40px 48px; border-bottom: 1px solid var(--rule); }
.page-head .wrap { display: grid; gap: 18px; }
.page-head h1 { margin-top: 10px; }
.sheet { display: inline-flex; max-width: 100%; border: 1.3px solid var(--ink); width: fit-content; }
.sheet-c { display: grid; gap: 2px; padding: 7px 14px; border-left: 1.3px solid var(--ink); min-width: 0; }
.sheet-c:first-child { border-left: 0; }
.sheet-c.grow { min-width: 9.5em; }
.sheet .k { font-size: .66rem; }
.sheet .v { font: 500 var(--t-sm)/1.2 var(--f-mono); }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.toc a {
  text-decoration: none; font-size: var(--t-sm); padding: 6px 14px; border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill); color: var(--ink);
}
.toc a:hover { background: var(--paper-2); }

/* serviços */
.svc-blocks { display: grid; }
.svc {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 56px;
  padding-block: 36px; border-top: 1px solid var(--rule); scroll-margin-top: 96px;
}
.svc:first-child { border-top: 1.5px solid var(--ink); }
.svc-head { display: grid; gap: 12px; align-content: start; min-width: 0; }
.svc-head > p { color: var(--muted); max-width: 58ch; }
.svc-for { color: var(--ink) !important; }
.svc-for .k { margin-right: .6em; }
.svc-inc { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 14px; border-top: 1.6px solid var(--ink);
}
.ticks li::after {
  content: ""; position: absolute; left: 11px; top: calc(.62em - 2.6px); width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
}
@media (max-width: 760px) { .svc { grid-template-columns: minmax(0, 1fr); } }

/* projectos */
.pj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
@media (max-width: 900px) { .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pj-grid { grid-template-columns: minmax(0, 1fr); } }
.pj { display: grid; gap: 6px; min-width: 0; }
.pj-img {
  aspect-ratio: 4 / 3; max-width: 100%; border: 1px solid var(--rule-strong); margin-bottom: 8px;
  background: repeating-linear-gradient(135deg, var(--hatch) 0 1.2px, transparent 1.2px 10px), var(--paper);
  display: grid; place-items: center;
}
.pj-img span {
  font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: var(--paper); padding: 8px 12px; border: 1px solid var(--rule);
}
.pj-cat { font: 500 var(--t-xs)/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pj-title { font: 600 var(--t-lg)/1.25 var(--f-display); }

/* sobre */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 56px; align-items: start; }
@media (max-width: 760px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.principles { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.principles li { display: grid; gap: 6px; padding-block: 20px; border-bottom: 1px solid var(--rule); }
.principles p { color: var(--muted); }
.person { display: grid; gap: 8px; padding: 24px; border: 1.3px solid var(--ink); background: var(--paper); min-width: 0; }
.person-name { font: 700 var(--t-xl)/1.2 var(--f-display); }
.person-role { color: var(--muted); }
.person-loc { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); }

/* contactos */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.c-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .c-cards { grid-template-columns: minmax(0, 1fr); } }
.c-card {
  display: grid; gap: 10px; align-content: start; padding: 22px; min-width: 0;
  border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper);
}
.c-k { display: flex; align-items: center; gap: 8px; font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.c-v { font: 600 var(--t-lg)/1.3 var(--f-display); overflow-wrap: anywhere; }
.c-card .btn { justify-self: start; margin-top: 4px; }
.c-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.c-note { color: var(--muted); font-size: var(--t-sm); }
.brief { padding: 24px; background: var(--brand); color: var(--brand-ink); display: grid; gap: 16px; min-width: 0; }
.brief h2 { font-size: var(--t-lg); }
.brief .ticks li::before { border-color: var(--brand-ink); }
.brief .ticks li::after { background: var(--brand-ink); }

/* rodapé */
.site-footer { border-top: 1px solid var(--rule); padding-block: 48px 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.footer-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); gap: 32px; align-items: start; }
@media (max-width: 760px) { .footer-in { grid-template-columns: minmax(0, 1fr); } }
.logo-full { width: 100%; max-width: 300px; height: auto; display: block; }
.f-col { display: grid; gap: 8px; min-width: 0; }
.f-col a { text-decoration: none; }
.f-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.f-h { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.f-nav { display: grid; gap: 6px; }
.f-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: var(--t-sm); color: var(--muted); }

/* botão flutuante de WhatsApp */
.wa-float {
  position: fixed; z-index: 25;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: var(--radius-pill); background: var(--brand); color: var(--brand-ink);
  border: 1.5px solid var(--brand-ink);
  font: 600 var(--t-sm)/1 var(--f-body); text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: transform .15s;
}
.wa-float:hover { transform: translateY(-2px); }
@media (max-width: 480px) { .wa-float span { display: none; } .wa-float { padding: 0 14px; } }

/* ====================================================================
   Movimento, imagens e componentes interactivos
   ==================================================================== */
picture { display: contents; }

/* transições entre páginas (Chrome, Edge, Safari recentes; os outros navegam normalmente) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.wa-float { view-transition-name: wa-float; }
::view-transition-old(root) { animation: 200ms cubic-bezier(.4, 0, 1, 1) both vt-out; }
::view-transition-new(root) { animation: 420ms cubic-bezier(0, 0, .2, 1) 40ms both vt-in; }
::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@keyframes vt-out { to { opacity: 0; translate: 0 -8px; } }
@keyframes vt-in { from { opacity: 0; translate: 0 16px; } }

/* zoom suave nas imagens */
.zoom { overflow: hidden; }
.zoom img { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
a:hover .zoom img, a.zoom:hover img, a:focus-visible .zoom img, a.zoom:focus-visible img { transform: scale(1.045); }

/* —— slideshow da página inicial —— */
.hero-in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
@media (max-width: 860px) { .hero-in { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: none; } }
.ss { display: grid; gap: 10px; min-width: 0; }
.ss-guide {
  display: block; height: 9px;
  background:
    radial-gradient(circle, var(--ink) 3.4px, transparent 4px) left center / 9px 9px no-repeat,
    radial-gradient(circle, var(--ink) 3.4px, transparent 4px) right center / 9px 9px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / calc(100% - 8px) 1.5px no-repeat;
}
.ss-frame {
  position: relative; display: block; aspect-ratio: 4 / 3; max-width: 100%;
  overflow: hidden; background: var(--paper-2); border-radius: 2px;
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.slide.is-on { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.09); transition: transform 7.5s cubic-bezier(.25, .6, .3, 1); }
.slide.is-on img { transform: scale(1); }
.ss-bar { display: flex; align-items: stretch; border: 1.3px solid var(--ink); min-width: 0; }
.ss-cell { display: grid; gap: 2px; padding: 7px 14px; border-right: 1.3px solid var(--ink); min-width: 0; }
.ss-cell .k { font-size: .66rem; }
.ss-cell .v { font: 500 var(--t-sm)/1.25 var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-name { flex: 1 1 auto; }
.ss-ctrl { display: flex; align-items: center; gap: 4px; padding: 0 8px; flex: none; }
.ss-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule-strong); background: transparent;
  color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-color .2s;
}
.ss-btn svg { width: 18px; height: 18px; }
.ss-btn:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.dots { display: flex; }
.dot { width: 22px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dot span { display: block; width: 16px; height: 3px; border-radius: 2px; background: var(--rule-strong); overflow: hidden; position: relative; }
.dot[aria-current="true"] span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; }
.ss.run .dot[aria-current="true"] span::after { animation: ss-prog var(--dur, 6s) linear both; }
.ss.paused .dot[aria-current="true"] span::after { animation-play-state: paused; }
@keyframes ss-prog { from { transform: scaleX(0); } }
@media (max-width: 520px) { .ss-num { display: none; } .ss-cell { padding: 7px 10px; } }

/* —— cartões de projecto —— */
.sec-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.sec-head-row > div { display: grid; gap: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 36px 24px; }
.card { min-width: 0; }
.card-in { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.card-img { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 2px; background: var(--paper-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-count {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--paper); color: var(--ink); padding: 7px 10px; border-radius: var(--radius-pill);
}
.card-text { display: grid; gap: 6px; min-width: 0; }
.card-title { font: 700 var(--t-lg)/1.2 var(--f-display); }
.card-desc { color: var(--muted); }
.card-text .link-arrow { margin-top: 6px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--t-sm); text-decoration: none; color: var(--ink); }
.link-arrow .arr { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
a:hover .link-arrow .arr, a.link-arrow:hover .arr { transform: translateX(5px); }

/* filtros */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  font: 500 var(--t-sm)/1 var(--f-body); padding: 10px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); cursor: pointer;
  display: inline-flex; gap: 8px; align-items: center; transition: background-color .2s, border-color .2s, color .2s;
}
.chip span { font: 500 var(--t-xs)/1 var(--f-mono); color: var(--muted); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-pressed="true"] span { color: var(--paper); opacity: .7; }
.soon { margin-top: 44px; padding: 16px 20px; border: 1px dashed var(--rule-strong); color: var(--muted); font-size: var(--t-sm); }

/* cabeçalho da página de serviços com o desenho */
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.ph-text { display: grid; gap: 18px; min-width: 0; }
.ph-text h1 { margin-top: 10px; }
.ph-art { min-width: 0; width: 100%; max-width: 440px; justify-self: end; }
@media (max-width: 860px) { .ph-grid { grid-template-columns: minmax(0, 1fr); } .ph-art { display: none; } }

/* fundador na página inicial */
.founder-strip { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px; align-items: center; }
.fs-photo { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 2px; background: var(--paper); }
.fs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-text { display: grid; gap: 10px; min-width: 0; }
.fs-role { color: var(--muted); max-width: 60ch; }
@media (max-width: 560px) { .founder-strip { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; } .fs-text h2 { font-size: var(--t-lg); } }

/* biografia */
.bio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.portrait { margin: 0; display: grid; gap: 8px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); }
.portrait-img { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: 2px; background: var(--paper-2); }
.portrait-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait figcaption { font: 500 var(--t-xs)/1.3 var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.bio-text { display: grid; gap: 12px; min-width: 0; }
.bio-role { color: var(--muted); font-weight: 500; }
.bio-body { display: grid; gap: 14px; max-width: 62ch; margin-top: 8px; }
@media (max-width: 760px) { .bio { grid-template-columns: minmax(0, 1fr); } .portrait { position: static; max-width: 340px; } }

/* página de projecto */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-sm); color: var(--muted); }
.crumbs a { color: var(--ink); text-underline-offset: 3px; }
.page-head.pj-head { border-bottom: 0; padding-bottom: 28px; }
.pj-hero { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 2px; background: var(--paper-2); cursor: zoom-in; }
.pj-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .pj-hero { aspect-ratio: 4 / 3; } }
.g-exp {
  position: absolute; right: 12px; top: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); color: var(--ink); display: grid; place-items: center;
  opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s;
}
.g-exp svg { width: 18px; height: 18px; }
a:hover > .g-exp, a:focus-visible > .g-exp { opacity: 1; transform: none; }
@media (hover: none) { .g-exp { opacity: .92; transform: none; } }
.pj-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 64px; align-items: start; }
.pj-text { display: grid; gap: 16px; max-width: 64ch; font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); }
.pj-ficha { margin: 0; display: grid; border-top: 1.5px solid var(--ink); }
.pj-ficha > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.pj-ficha dd { margin: 0; }
@media (max-width: 760px) { .pj-body { grid-template-columns: minmax(0, 1fr); } }
.section.pt0 { padding-top: 0; }
.gallery { columns: 2; column-gap: 20px; }
.g-item { position: relative; display: block; margin-bottom: 20px; break-inside: avoid; border-radius: 2px; background: var(--paper-2); cursor: zoom-in; }
.g-item img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) { .gallery { columns: 1; } .g-item { margin-bottom: 14px; } }

.next { border-top: 1px solid var(--rule); }
.next-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 44px; align-items: center; padding-block: 52px; text-decoration: none; color: inherit; }
.next-img { display: block; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 2px; background: var(--paper-2); }
.next-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.next-text { display: grid; gap: 8px; min-width: 0; }
.next-title { font: 700 var(--t-xl)/1.15 var(--f-display); }
@media (max-width: 640px) { .next-in { grid-template-columns: minmax(0, 1fr); padding-block: 36px; } }

/* galeria em ecrã inteiro (sempre escura, nos dois temas) */
.lb {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(14, 14, 12, .97); color: #EDECE4; overflow: hidden;
}
.lb::backdrop { background: rgba(14, 14, 12, .97); }
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: lb-in .3s ease both; }
@keyframes lb-in { from { opacity: 0; } }
.lb-stage {
  display: grid; place-items: center; min-height: 0; touch-action: pan-y;
  padding: max(60px, env(safe-area-inset-top, 0px)) max(72px, env(safe-area-inset-right, 0px)) 8px max(72px, env(safe-area-inset-left, 0px));
}
.lb-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 2px;
  opacity: 0; transform: scale(.975); transition: opacity .35s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  user-select: none; -webkit-user-drag: none;
}
.lb-img.in { opacity: 1; transform: none; }
.lb-bar {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 12px max(24px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
}
.lb-cap { font-size: var(--t-sm); color: #C9C7BD; max-width: 70ch; }
.lb-count { font: 500 var(--t-sm)/1 var(--f-mono); color: #FFDE59; white-space: nowrap; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .35); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s;
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-btn:hover { background: #FFDE59; color: #161614; border-color: #FFDE59; }
.lb-btn:focus-visible { outline: 2.5px solid #FFDE59; outline-offset: 3px; }
.lb-prev { left: max(14px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lb-next { right: max(14px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.lb-close { right: max(14px, env(safe-area-inset-right, 0px)); top: max(14px, env(safe-area-inset-top, 0px)); }
@media (max-width: 640px) {
  .lb-stage { padding-inline: 8px; }
  .lb-prev, .lb-next { top: auto; transform: none; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .lb-bar { padding-inline: 74px; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}
html.lb-open { overflow: hidden; }

/* —— animações: entrada da página inicial e elementos a aparecer ao descer —— */
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: up .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-text > :nth-child(2) { animation-delay: .07s; }
  .hero-text > :nth-child(3) { animation-delay: .14s; }
  .hero-text > :nth-child(4) { animation-delay: .21s; }
  .ss-frame { animation: wipe 1.15s cubic-bezier(.7, 0, .2, 1) .1s both; }
  .ss-guide, .ss-bar { animation: up .8s cubic-bezier(.2, .7, .2, 1) .5s both; }

  @supports (animation-timeline: view()) {
    .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .rv .zoom img, .zoom.rv img { animation: img-in linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .site-header { animation: hdr linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  }
}
@keyframes up { from { opacity: 0; translate: 0 18px; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rv-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes img-in { from { scale: 1.14; } to { scale: 1; } }
@keyframes hdr { to { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); } }

@media (prefers-reduced-motion: reduce) {
  .slide img, .slide.is-on img { transform: none; transition: none; }
  .zoom img { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* carimbo das páginas: encolhe em ecrãs estreitos em vez de alargar a página */
.page-head .wrap { grid-template-columns: minmax(0, 1fr); }
.sheet-c { min-width: 0; }
.sheet .v { overflow-wrap: anywhere; }
@media (max-width: 480px) { .sheet-c.grow { min-width: 0; } .sheet-c { padding: 6px 10px; } }
@media (max-width: 520px) { .ss-name .v { white-space: normal; overflow: visible; } }

/* quatro projectos: duas colunas largas no computador */
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; } }
.card-img { aspect-ratio: 3 / 2; }

/* projecto em destaque: ocupa a largura toda, imagem ao lado do texto */
@media (min-width: 760px) {
  .card-lead { grid-column: 1 / -1; }
  .card-lead .card-in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 36px; align-items: center; }
  .card-lead .card-img { aspect-ratio: 16 / 10; }
  .card-lead .card-title { font-size: var(--t-xl); }
}