/* Moretti Premium B — inner pages (projetos, detalhe, sobre, contato). Owner: coder-PAGES.
   Uses the shared tokens only. Class-scoped selectors only (no bare tag selectors, inside or outside @media). */

/* ---------- page hero (text-led pages) ---------- */
.pg-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(3.5rem, 9vw, 8rem)) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
.pg-hero__title { font-size: var(--fs-d1); margin-top: 1.25rem; }
.pg-hero__title .is-dim { color: rgba(245, 241, 231, .5); } /* the words still in shadow (>=3:1 on --ink, large text) */
.pg-hero__row {
  display: grid; gap: 1.75rem 2rem; margin-top: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 900px) {
  .pg-hero__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* the light motif: a slow diagonal sun band crossing the dark ground behind the type (transform only) */
.pg-sun {
  position: absolute; inset: -20% -10%; pointer-events: none; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 220, .07) 48%, rgba(255, 244, 220, .11) 50%, rgba(255, 244, 220, .07) 52%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 95%);
  transform: translate3d(-45%, 0, 0);
  animation: pg-sun 2400ms var(--ease-cine) 300ms both;
}
@keyframes pg-sun { to { transform: translate3d(12%, 0, 0); } }

/* ---------- filters ---------- */
.pf-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-block: 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pf-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: 0 1rem;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .03em; color: var(--ivory-dim);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, background-color var(--dur-ui) ease, transform 140ms var(--ease-ui);
}
.pf-btn__n { font-size: var(--fs-micro); color: var(--ivory-dim); font-variant-numeric: tabular-nums; }
.pf-btn[aria-pressed="true"] { color: var(--ink); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--ivory); }
.pf-btn[aria-pressed="true"] .pf-btn__n { color: var(--ink); }
.pf-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .pf-btn:hover { color: var(--ivory); box-shadow: inset 0 0 0 1px var(--copper); }
  .pf-btn[aria-pressed="true"]:hover { color: var(--ink); }
}
.pf-status { margin-top: 1rem; font-size: var(--fs-small); color: var(--ivory-dim); min-height: 1.6em; }

/* ---------- cinematic index grid ---------- */
.pg-grid {
  display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}
@media (min-width: 640px) {
  .pg-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); grid-auto-rows: clamp(240px, 44vw, 380px); }
}
@media (min-width: 1024px) {
  .pg-grid { grid-template-columns: repeat(12, minmax(40px, 1fr)); grid-auto-rows: clamp(300px, 33vw, 520px); }
  .pt { grid-column: span var(--span, 6); }
}

.pt { position: relative; min-width: 0; scroll-margin-top: calc(var(--header-h) + 1rem); }
/* initial tile width without inline style (strict CSP); the filter (pages.js) overrides --span through the CSSOM */
.pt[data-span="4"] { --span: 4; } .pt[data-span="5"] { --span: 5; } .pt[data-span="7"] { --span: 7; } .pt[data-span="8"] { --span: 8; } .pt[data-span="12"] { --span: 12; }
.pt[hidden] { display: none; }
.pt__hit {
  position: relative; display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; overflow: hidden; text-align: left;
  background: var(--charcoal); isolation: isolate;
}
@media (min-width: 640px) { .pt__hit { aspect-ratio: auto; } }
.pt__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 1400ms var(--ease-cine);
}
.pt__img--plan { object-fit: contain; background: var(--ivory); padding: 6%; }
/* night: a shade over the render; "light on" = the shade lifts */
.pt__shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 20, 28, .55) 0%, rgba(11, 20, 28, .62) 45%, rgba(11, 20, 28, .94) 100%);
  transition: opacity 900ms var(--ease-cine);
}
.pt__shade::before { /* the extra darkness that disappears when the light comes on */
  content: ""; position: absolute; inset: 0; background: rgba(11, 20, 28, .5);
  transition: opacity 900ms var(--ease-cine);
}
/* sunlight band crossing the facade once per hover/focus */
.pt__beam {
  position: absolute; inset: -10% -40%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 244, 220, .2) 49%, rgba(255, 244, 220, .32) 50%, rgba(255, 244, 220, .2) 51%, transparent 60%);
  transform: translate3d(-75%, 0, 0); opacity: 0;
}
.pt__meta {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 2vw, 1.6rem);
  display: grid; gap: .35rem;
}
.pt__no { position: absolute; z-index: 3; top: clamp(.9rem, 1.6vw, 1.3rem); left: clamp(1rem, 2vw, 1.6rem);
  font-size: var(--fs-micro); letter-spacing: var(--track-label); color: var(--ivory-dim); font-variant-numeric: tabular-nums; }
.pt__cat { font-size: var(--fs-micro); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-light); }
.pt__name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1; letter-spacing: var(--track-display); color: var(--ivory);
}
.pt__facts { font-size: var(--fs-small); color: var(--ivory); font-variant-numeric: tabular-nums; }
.pt__cue {
  position: absolute; z-index: 3; top: clamp(.6rem, 1.4vw, 1rem); right: clamp(.6rem, 1.4vw, 1rem);
  display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: 0 .85rem;
  font-size: var(--fs-micro); font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ivory); box-shadow: inset 0 0 0 1px var(--line); background: rgba(11, 20, 28, .55);
  transition: box-shadow var(--dur-ui) ease;
}
.pt__cue--page { color: var(--ink); background: var(--ivory); box-shadow: none; }
/* every tile opens its project page; the image count is a real button: a quick view in the lightbox */
.pt__quick { z-index: 5; min-height: 44px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pt__quick:focus-visible { outline-offset: 2px; }
.pt__quick:active { transform: scale(.96); transition: transform 120ms var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .pt__quick:hover { box-shadow: inset 0 0 0 1px var(--copper); } }
.pt__glint { /* copper hairline that draws along the bottom edge when lit */
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 1px; background: var(--copper);
  transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-cine);
}

.pt__hit:focus-visible { outline-offset: 4px; }
.pt__hit:focus-visible .pt__shade::before,
.pt__hit.is-lit .pt__shade::before { opacity: 0; }
.pt__hit:focus-visible .pt__img,
.pt__hit.is-lit .pt__img { transform: scale(1); }
.pt__hit:focus-visible .pt__glint,
.pt__hit.is-lit .pt__glint { transform: scaleX(1); }
.pt__hit:focus-visible .pt__beam,
.pt__hit.is-lit .pt__beam { animation: pt-beam 1300ms var(--ease-cine) both; }
@keyframes pt-beam {
  0% { transform: translate3d(-75%, 0, 0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate3d(75%, 0, 0); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .pt__hit:hover .pt__shade::before { opacity: 0; }
  .pt__hit:hover .pt__img { transform: scale(1); }
  .pt__hit:hover .pt__glint { transform: scaleX(1); }
  .pt__hit:hover .pt__beam { animation: pt-beam 1300ms var(--ease-cine) both; }
  .pt__hit:hover .pt__cue { box-shadow: inset 0 0 0 1px var(--copper); }
}
/* immediate click feedback */
.pt__hit:active .pt__meta { transform: translate3d(0, 2px, 0); transition: transform 120ms var(--ease-ui); }
.pt__hit.is-pressed::after {
  content: ""; position: absolute; inset: 0; z-index: 4; box-shadow: inset 0 0 0 2px var(--copper);
}
/* touch: there is no hover, so tiles are lit as they cross the middle of the screen (pages.js adds .is-lit) */

/* ---------- project detail: cover ---------- */
.pd-cover {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.pd-cover .lf { position: absolute; inset: 0; }
/* portrait phones: a shorter cover keeps more of the 16:9 render's width (37 % instead of 26 % at 390 × 844),
   and data-focus (tools/build_projects.py FOCUS) aims the crop at the building */
@media (max-width: 899px) and (orientation: portrait) {
  .pd-cover { height: min(100svh, 150vw); min-height: 520px; }
  .pd-cover .lf__base, .pd-cover .lf__lit { object-position: var(--focus, 50% 50%); }
  .pd-cover[data-focus="15% 50%"] { --focus: 15% 50%; }
  .pd-cover[data-focus="25% 50%"] { --focus: 25% 50%; }
  .pd-cover[data-focus="30% 50%"] { --focus: 30% 50%; }
  .pd-cover[data-focus="35% 50%"] { --focus: 35% 50%; }
  .pd-cover[data-focus="40% 50%"] { --focus: 40% 50%; }
  .pd-cover[data-focus="45% 50%"] { --focus: 45% 50%; }
  .pd-cover[data-focus="55% 50%"] { --focus: 55% 50%; }
  .pd-cover[data-focus="60% 50%"] { --focus: 60% 50%; }
  .pd-cover[data-focus="65% 50%"] { --focus: 65% 50%; }
}
.pd-cover__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(75deg, rgba(11, 20, 28, .62) 0%, rgba(11, 20, 28, .38) 34%, rgba(11, 20, 28, 0) 62%),
    linear-gradient(180deg, rgba(11, 20, 28, .55) 0%, rgba(11, 20, 28, 0) 30%, rgba(11, 20, 28, .22) 50%, rgba(11, 20, 28, .94) 100%);
}
.pd-cover__body { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2rem, 5vw, 4.5rem); }
.pd-back {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  font-size: var(--fs-small); font-weight: 600; color: var(--ivory);
}
.pd-back__arrow { transition: transform var(--dur-ui) var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .pd-back:hover .pd-back__arrow { transform: translateX(-4px); } }
.pd-cover__body .eyebrow { display: flex; width: max-content; max-width: 100%; margin-top: 1.5rem; color: var(--ivory); }
/* small type over the lit render: a soft dark halo keeps it AA over glass and light wood */
.pd-cover__body .eyebrow, .pd-back, .pd-headline { text-shadow: 0 1px 2px rgba(11, 20, 28, .7), 0 0 14px rgba(11, 20, 28, .75); }
.pd-title { font-size: var(--fs-hero); margin-top: .75rem; line-height: .82; }
.pd-headline { margin-top: 1.25rem; font-size: var(--fs-lead); color: var(--ivory); max-width: 30ch; }
/* cover sweep: the render starts in shadow, one band of sunlight crosses it on load and leaves it lit */
.pd-sweep .lf__base { filter: brightness(.72) saturate(.95) contrast(1.04); }
/* the shadow over the render lifts by opacity (compositor only — no filter animation) */
.pd-sweep::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(0, 0, 0, .5);
  transition: opacity 1600ms var(--ease-cine) 900ms;
}
.pd-sweep .lf__band { z-index: 1; }
.pd-sweep.is-done::after, html:not(.js) .pd-sweep::after { opacity: 0; }
.pd-scroll {
  position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(6.5rem, 8vw, 8rem); /* clear of the floating WhatsApp button */
  writing-mode: vertical-rl; font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-dim);
}
@media (max-width: 639px) { .pd-scroll { display: none; } }

/* ---------- project detail: technical sheet ---------- */
.pd-sheet { padding-block: var(--section) calc(var(--section) * .6); }
.pd-sheet__grid { display: grid; gap: 2.5rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pd-sheet__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.pd-sheet__text { margin-top: 1.5rem; font-size: var(--fs-lead); line-height: 1.5; max-width: 40ch; }
.pd-facts { display: grid; border-top: 1px solid var(--line); }
.pd-facts__row {
  display: grid; grid-template-columns: minmax(96px, 2fr) minmax(0, 3fr); gap: 1rem;
  padding-block: 1.05rem; border-bottom: 1px solid var(--line);
}
.pd-facts__k { font-size: var(--fs-micro); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-light); padding-top: .2rem; }
.pd-facts__v { font-size: .9375rem; color: var(--ivory); }
.pd-note { margin-top: 1.75rem; font-size: var(--fs-small); color: var(--ivory-dim); max-width: 60ch; }

/* ---------- project detail: editorial gallery ---------- */
.pd-gallery { padding-bottom: var(--section); }
.pd-gallery__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.pd-gallery__grid { display: grid; gap: clamp(1.75rem, 3vw, 3rem) clamp(.75rem, 1.4vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .pd-gallery__grid { grid-template-columns: repeat(12, minmax(40px, 1fr)); }
  .pg-fig { grid-column: var(--col, 1 / -1); }
}
/* gallery columns without inline style (strict CSP): data-col="a/b" = grid-column a / b (tools/build_projects.py asserts each value has a rule) */
.pg-fig[data-col="1/-1"] { --col: 1 / -1; }
.pg-fig[data-col="1/6"] { --col: 1 / 6; }
.pg-fig[data-col="1/7"] { --col: 1 / 7; }
.pg-fig[data-col="1/8"] { --col: 1 / 8; }
.pg-fig[data-col="2/12"] { --col: 2 / 12; }
.pg-fig[data-col="3/11"] { --col: 3 / 11; }
.pg-fig[data-col="6/-1"] { --col: 6 / -1; }
.pg-fig[data-col="7/-1"] { --col: 7 / -1; }
.pg-fig[data-col="8/-1"] { --col: 8 / -1; }
.pg-fig { min-width: 0; }
.pg-fig__btn {
  position: relative; display: block; width: 100%; overflow: hidden; background: var(--charcoal);
}
.pg-fig__btn--plan { background: var(--ivory); }
.pg-fig__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1200ms var(--ease-cine); }
.pg-fig__btn--plan .pg-fig__img { object-fit: contain; padding: clamp(.75rem, 3%, 2rem); transform: none; }
.pg-fig__zoom {
  position: absolute; right: .75rem; bottom: .75rem;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: 0 .85rem;
  background: var(--ink); color: var(--ivory); font-size: var(--fs-micro); font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-ui) ease;
}
.pg-fig__btn:active { transform: scale(.995); }
.pg-fig__btn:focus-visible { outline-offset: 4px; }
.pg-fig__btn:focus-visible .pg-fig__zoom { box-shadow: inset 0 0 0 1px var(--copper); }
/* phones: the floating WhatsApp rests bottom-right, so the badge moves to the top-right corner */
@media (max-width: 899px) { .pg-fig__zoom { bottom: auto; top: .75rem; } }
@media (hover: hover) and (pointer: fine) {
  .pg-fig__btn:hover .pg-fig__img { transform: scale(1); }
  .pg-fig__btn--plan:hover .pg-fig__img { transform: none; }
  .pg-fig__btn:hover .pg-fig__zoom { box-shadow: inset 0 0 0 1px var(--copper); }
}
.pg-fig__cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; margin-top: .9rem; }
.pg-fig__k { grid-row: span 2; font-size: var(--fs-micro); letter-spacing: var(--track-label); color: var(--copper-light); padding-top: .25rem; font-variant-numeric: tabular-nums; }
.pg-fig__t { font-weight: 650; }
.pg-fig__c { font-size: var(--fs-small); color: var(--ivory-dim); }

/* ---------- next project (cinematic hand-off) ---------- */
.pd-next { border-top: 1px solid var(--line); }
.pd-next__link {
  position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 62vh, 640px);
  overflow: hidden; isolation: isolate; background: var(--charcoal);
}
.pd-next__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.08); transition: transform 1600ms var(--ease-cine); }
.pd-next__shade { position: absolute; inset: 0; z-index: -1; background: rgba(11, 20, 28, .72); transition: opacity 900ms var(--ease-cine); }
.pd-next__body { width: 100%; padding-block: clamp(2rem, 5vw, 4rem); }
.pd-next__title { display: block; font-size: var(--fs-d1); margin-top: .75rem; }
.pd-next__go { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.25rem; font-weight: 650; }
.pd-next__go-line { width: 48px; height: 1px; background: var(--copper); transform-origin: left; transition: transform 700ms var(--ease-cine); }
.pd-next__link:focus-visible { outline-offset: -6px; }
.pd-next__link:focus-visible .pd-next__shade { opacity: .45; }
@media (hover: hover) and (pointer: fine) {
  .pd-next__link:hover .pd-next__img { transform: scale(1); }
  .pd-next__link:hover .pd-next__shade { opacity: .45; }
  .pd-next__link:hover .pd-next__go-line { transform: scaleX(2); }
}
.pd-next__all { padding-block: 1.5rem 2.5rem; }
/* the expanding curtain used by pages.js to carry the next cover into the next page */
.pd-carry {
  position: fixed; inset: 0; z-index: 190; pointer-events: none; overflow: hidden;
  background: var(--ink);
}
.pd-carry__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.36) saturate(.7) contrast(1.06); }

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 170;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease-ui), visibility 0s linear 240ms;
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-ui), visibility 0s; }
.lb__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--gutter); min-height: 64px; }
.lb__count { font-size: var(--fs-small); color: var(--ivory-dim); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.lb__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 48px; min-height: 48px; padding: 0 .9rem;
  color: var(--ivory); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-small); font-weight: 600;
  transition: box-shadow var(--dur-ui) ease, transform 140ms var(--ease-ui);
}
.lb__btn:active { transform: scale(.95); }
.lb__btn[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .lb__btn:not([disabled]):hover { box-shadow: inset 0 0 0 1px var(--copper); } }
.lb__body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; overflow: auto; overscroll-behavior: contain; }
@media (min-width: 1024px) {
  .lb--info .lb__body { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); overflow: hidden; }
}
.lb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); touch-action: pan-y pinch-zoom; }
.lb__frame { position: relative; width: 100%; height: 100%; min-height: 46vh; display: grid; place-items: center; }
/* small screens with the info panel: image and text stack and scroll together (no overlap) */
@media (max-width: 1023px) {
  .lb--info .lb__body { align-content: start; grid-auto-rows: max-content; }
  .lb--info .lb__frame { height: auto; min-height: 0; padding-block: .5rem 1.25rem; }
  .lb--info .lb__img { max-height: 58svh; }
}
.lb__img {
  max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; object-fit: contain;
  opacity: 1; transform: none; transition: opacity 220ms var(--ease-ui), transform 320ms var(--ease-ui);
}
.lb__img.is-plan { background: var(--ivory); padding: clamp(.5rem, 2vw, 1.25rem); }
.lb__img.is-swapping { opacity: 0; transform: scale(.985); }
.lb__info { padding: 1.5rem var(--gutter) 2rem; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .lb__info { overflow: auto; border-top: 0; border-left: 1px solid var(--line); padding: .5rem 2rem 2rem; } }
.lb__info[hidden] { display: none; }
.lb__name { font-size: var(--fs-d3); margin-top: .75rem; }
.lb__loc { margin-top: .75rem; font-size: var(--fs-small); color: var(--ivory); font-variant-numeric: tabular-nums; }
.lb__desc { margin-top: 1rem; font-size: .9375rem; color: var(--ivory-dim); }
.lb__info .pd-facts { margin-top: 1.25rem; }
.lb__info .pd-facts__row { grid-template-columns: minmax(84px, 2fr) minmax(0, 3fr); padding-block: .8rem; }
.lb__note { margin-top: 1rem; font-size: var(--fs-micro); color: var(--ivory-dim); line-height: 1.55; }
.lb__page { margin-top: 1.5rem; }
.lb__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: .85rem var(--gutter) 1.1rem; border-top: 1px solid var(--line); }
.lb__cap-text { min-width: 0; }
.lb__cap-t { font-weight: 650; }
.lb__cap-c { font-size: var(--fs-small); color: var(--ivory-dim); }
.lb__nav { display: flex; gap: .5rem; }

/* ---------- sobre ---------- */
.ab-people { padding-block: var(--section) 0; }
.ab-people__grid { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 900px) { .ab-people__grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
.ab-person { position: relative; background: var(--ink); padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem); overflow: hidden; }
.ab-person__name { font-size: var(--fs-d2); margin-top: 1rem; }
.ab-person__role { margin-top: 1.25rem; font-size: var(--fs-lead); }
.ab-person__reg {
  display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.5rem;
  padding: .55rem .9rem; box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.ab-person__reg::before { content: ""; width: 6px; height: 6px; background: var(--copper); transform: rotate(45deg); }
.ab-person__shadow { /* the long cast shadow of the name: a copy offset along the sun angle */
  position: absolute; right: -2%; bottom: -12%; z-index: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .8;
  font-size: clamp(7rem, 22vw, 20rem); color: rgba(245, 241, 231, .035);
}
.ab-person__shadow::before { content: attr(data-shadow); }
.ab-person > :not(.ab-person__shadow) { position: relative; z-index: 1; }

.ab-light { padding-block: var(--section); }
.ab-light__frame { position: relative; aspect-ratio: 16 / 9; }
@media (max-width: 639px) { .ab-light__frame { aspect-ratio: 4 / 5; } }
.ab-light__frame .lf { position: absolute; inset: 0; }
.ab-light__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: .9rem; font-size: var(--fs-small); color: var(--ivory-dim); }
.ab-light__title { font-size: var(--fs-d2); }
.ab-light__lead { margin: 1rem 0 clamp(1.5rem, 3vw, 2.5rem); }

.ab-services { padding-bottom: var(--section); }
.ab-services__grid { display: grid; gap: 2.5rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ab-services__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ab-services__title { font-size: var(--fs-d2); margin-top: 1.25rem; }
.ab-services__hint { margin-top: 1.25rem; max-width: 36ch; }
.ab-list { border-top: 1px solid var(--line); }
.ab-item { border-bottom: 1px solid var(--line); }
.ab-item__btn {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 1rem;
  width: 100%; min-height: 64px; padding-block: .9rem; text-align: left;
}
.ab-item__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1; letter-spacing: .005em; }
.ab-item__icon { position: relative; width: 44px; height: 44px; }
.ab-item__icon::before, .ab-item__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: var(--copper-light);
  transition: transform 300ms var(--ease-ui);
}
.ab-item__icon::after { transform: rotate(90deg); }
.ab-item__btn[aria-expanded="true"] .ab-item__icon::after { transform: rotate(0deg); }
.ab-item__panel { padding: 0 0 1.25rem; color: var(--ivory-dim); max-width: 52ch; }
.ab-item__panel[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .ab-item__btn:hover .ab-item__name { color: var(--light); } }

/* ---------- shared closing CTA ---------- */
.pg-cta { position: relative; padding-block: var(--section); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.pg-cta__title { font-size: var(--fs-d1); }
.pg-cta__row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ---------- contato ---------- */
.ct-people { padding-bottom: var(--section); }
.ct-grid { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 900px) { .ct-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); } }
.ct-card { background: var(--ink); padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem); display: flex; flex-direction: column; }
.ct-card__name { font-size: var(--fs-d2); margin-top: 1rem; }
.ct-card__role { margin-top: .75rem; color: var(--ivory-dim); }
.ct-list { margin-top: 2rem; border-top: 1px solid var(--line); }
.ct-link {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 24px; align-items: center; gap: 1rem;
  min-height: 64px; padding-block: .75rem; border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-ui) ease;
}
.ct-link__k { font-size: var(--fs-micro); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-light); }
.ct-link__v { font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .ct-link { grid-template-columns: 92px minmax(0, 1fr) 18px; gap: .75rem; } }
.ct-link__a { color: var(--ivory-dim); transition: transform var(--dur-ui) var(--ease-ui), color var(--dur-ui) ease; }
.ct-link:active { background: rgba(245, 241, 231, .05); }
@media (hover: hover) and (pointer: fine) {
  .ct-link:hover .ct-link__a { transform: translate(3px, -3px); color: var(--copper-light); }
  .ct-link:hover .ct-link__v { color: var(--light); }
}
.ct-card__cta { margin-top: 2rem; align-self: flex-start; }
.ct-note { margin-top: 1.75rem; font-size: var(--fs-small); color: var(--ivory-dim); max-width: 60ch; }
.ct-office { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; }
.ct-office__k { font-size: var(--fs-micro); font-weight: 650; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--copper-light); }
.ct-office__v { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1; letter-spacing: var(--track-display, -.01em); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-sun { animation: none; transform: none; opacity: .6; }
  .pt__img, .pg-fig__img, .pd-next__img { transform: none; transition: none; }
  .pt__beam { display: none; }
  .pt__hit:hover .pt__beam, .pt__hit:focus-visible .pt__beam, .pt__hit.is-lit .pt__beam { animation: none; }
  .pt__shade, .pt__shade::before, .pd-next__shade { transition-duration: 200ms; }
  .pt__glint, .pd-next__go-line { transition: none; }
  .pd-sweep::after { transition-duration: 1ms; transition-delay: 0ms; }
  .lb, .lb.is-open, .lb__img { transition-duration: 1ms; }
  .lb__img.is-swapping { transform: none; }
}

/* [hidden] must win over the display set on these components */
.lb[hidden], .lb__btn[hidden] { display: none; }

/* no JS: light-frames show the lit render, no band */
html:not(.js) .lf__band { transform: none; -webkit-mask-image: none; mask-image: none; }
html:not(.js) .lf__lit { transform: none; }
html:not(.js) .lf__glint { display: none; }

/* ---------- FIX2: gallery depth + privacy page ---------- */
.pg-fig__btn.has-depth .pg-fig__img { scale: 1.1; }
.pv { padding-block: 0 var(--section); }
.pv__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pv__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } }
.pv__facts { border-top: 1px solid var(--line); }
.pv__row { display: grid; grid-template-columns: minmax(6.5rem, 1fr) auto; gap: .5rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.pv__row dt { font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-dim); align-self: center; }
.pv__row dd { font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.pv__row:last-child { grid-template-columns: minmax(0, 1fr); }
.pv__row:last-child dd { text-align: left; font-weight: 500; }
.pv__text { display: grid; gap: 1.1rem; max-width: 62ch; color: var(--ivory-dim); }
.pv__text p:first-child { color: var(--ivory); font-size: var(--fs-lead); line-height: 1.45; }

/* @generated gallery-ratios: tools/build_projects.py rewrites this block (box ratio of each gallery button, strict CSP) */
.pg-fig__btn[data-ratio="3x4"] { aspect-ratio: 3 / 4; }
.pg-fig__btn[data-ratio="4x3"] { aspect-ratio: 4 / 3; }
.pg-fig__btn[data-ratio="628x531"] { aspect-ratio: 628 / 531; }
.pg-fig__btn[data-ratio="662x471"] { aspect-ratio: 662 / 471; }
.pg-fig__btn[data-ratio="692x627"] { aspect-ratio: 692 / 627; }
.pg-fig__btn[data-ratio="694x560"] { aspect-ratio: 694 / 560; }
.pg-fig__btn[data-ratio="813x836"] { aspect-ratio: 813 / 836; }
.pg-fig__btn[data-ratio="926x397"] { aspect-ratio: 926 / 397; }
.pg-fig__btn[data-ratio="1004x429"] { aspect-ratio: 1004 / 429; }
.pg-fig__btn[data-ratio="1280x318"] { aspect-ratio: 1280 / 318; }
.pg-fig__btn[data-ratio="1280x531"] { aspect-ratio: 1280 / 531; }
.pg-fig__btn[data-ratio="1280x617"] { aspect-ratio: 1280 / 617; }
.pg-fig__btn[data-ratio="1280x692"] { aspect-ratio: 1280 / 692; }
.pg-fig__btn[data-ratio="1280x693"] { aspect-ratio: 1280 / 693; }
.pg-fig__btn[data-ratio="1280x717"] { aspect-ratio: 1280 / 717; }
.pg-fig__btn[data-ratio="1280x718"] { aspect-ratio: 1280 / 718; }
.pg-fig__btn[data-ratio="1280x719"] { aspect-ratio: 1280 / 719; }
.pg-fig__btn[data-ratio="1280x720"] { aspect-ratio: 1280 / 720; }
.pg-fig__btn[data-ratio="1280x739"] { aspect-ratio: 1280 / 739; }
.pg-fig__btn[data-ratio="1280x741"] { aspect-ratio: 1280 / 741; }
.pg-fig__btn[data-ratio="1280x828"] { aspect-ratio: 1280 / 828; }
.pg-fig__btn[data-ratio="1280x848"] { aspect-ratio: 1280 / 848; }
.pg-fig__btn[data-ratio="1280x853"] { aspect-ratio: 1280 / 853; }
.pg-fig__btn[data-ratio="1280x917"] { aspect-ratio: 1280 / 917; }
.pg-fig__btn[data-ratio="1280x924"] { aspect-ratio: 1280 / 924; }
.pg-fig__btn[data-ratio="1280x960"] { aspect-ratio: 1280 / 960; }
.pg-fig__btn[data-ratio="1280x965"] { aspect-ratio: 1280 / 965; }
.pg-fig__btn[data-ratio="1280x966"] { aspect-ratio: 1280 / 966; }
.pg-fig__btn[data-ratio="1280x1076"] { aspect-ratio: 1280 / 1076; }
.pg-fig__btn[data-ratio="1280x1102"] { aspect-ratio: 1280 / 1102; }
.pg-fig__btn[data-ratio="1280x1145"] { aspect-ratio: 1280 / 1145; }
.pg-fig__btn[data-ratio="1280x1167"] { aspect-ratio: 1280 / 1167; }
.pg-fig__btn[data-ratio="1280x1264"] { aspect-ratio: 1280 / 1264; }
.pg-fig__btn[data-ratio="1280x1536"] { aspect-ratio: 1280 / 1536; }
/* @end gallery-ratios */
