/* =============================================================================
   David Góis — Portfolio
   Modelled on matthewwolff.com (Semplice): full-bleed 3-column grid on black,
   white About with a serif headline and edge-anchored section labels,
   client logos revealed on scroll, black page-transition wipe.
   ============================================================================= */

:root {
  --white: #fafafa;
  --black: #0a0a0a;
  --ink: #111111;
  --grey: #999999;
  --grey-dark: #6b6b6b;

  --sans: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --pad: clamp(18px, 1.5vw, 30px);     /* page edge margin — logo, nav and grid all sit on it */
  --gutter: 4px;                       /* half of the 8px grid gutter */
  --nav-h: 76px;
  --ease: cubic-bezier(0.77, 0, 0.175, 1);
}

html { font-size: 18px; -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg, var(--white));
  color: var(--black);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.8333rem;      /* 15px */
  line-height: 1.389rem;     /* 25px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Visible focus for keyboard users everywhere, without adding a ring on
   mouse/touch clicks (:focus-visible), and never removed without this
   replacement. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 1px;
}
.nav-toggle:focus-visible { outline-offset: 4px; }
/* <main> only ever gets focus programmatically, from the skip link — the
   scroll jump itself is the visible cue, a focus ring around the whole page
   isn't */
#main:focus { outline: none; }
body.theme-dark { background: var(--page-bg, var(--black)); color: var(--white); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Hidden until it receives keyboard focus, same recipe as .sr-only but
   reversed on :focus so Tab from the very top jumps straight to <main>. */
.skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 0.6rem; left: 0.6rem; z-index: 200;
  width: auto; height: auto; margin: 0; padding: 0.7rem 1.1rem;
  clip: auto; overflow: visible; white-space: normal;
  background: var(--white); color: var(--black);
  font-size: 0.8333rem; text-transform: uppercase; letter-spacing: 0.02em;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { touch-action: manipulation; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1.389rem; }

.container { width: 100%; padding-left: var(--pad); padding-right: var(--pad); }

/* 12-column row (Semplice-style) */
.row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--gutter) * -1); }
.col { padding: 0 var(--gutter); }
.col-1 { width: 8.3333%; }
.col-2 { width: 16.6667%; }
.col-4 { width: 33.3333%; }
.col-5 { width: 41.6667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333%; }
.col-10 { width: 83.3333%; }
.col-12 { width: 100%; }
@media (max-width: 991.98px) {
  .col-1 { display: none; }
  .col-10, .col-6, .col-7 { width: 100%; }
  .col-2, .col-4, .col-5 { width: 50%; }
}

/* Underline grows from the left (.2s ease-out) */
.ul-link { position: relative; display: inline-block; }
.ul-link::before {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
  background: currentColor; transition: right 0.2s ease-out;
}
.ul-link:hover::before, .ul-link:focus-visible::before { right: 0; }

/* =============================================================================
   Header — logo hard left, menu hard right, same edge as the grid
   ============================================================================= */

.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color 0.4s ease, color 0.4s ease;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
/* gains its background once the page is scrolled — a translucent material
   with content scrolling under it, not a hard opaque cut */
.site-header.is-solid {
  background: color-mix(in srgb, var(--page-bg, var(--white)) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.theme-dark .site-header.is-solid { background: color-mix(in srgb, var(--page-bg, var(--black)) 72%, transparent); }
/* no backdrop-filter support: fall back to a solid bar rather than a see-through one */
@supports not (backdrop-filter: blur(1px)) {
  .site-header.is-solid { background: var(--page-bg, var(--white)); }
  .theme-dark .site-header.is-solid { background: var(--page-bg, var(--black)); }
}
/* reduced transparency: go frostier/solid instead of blurred */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-solid {
    background: var(--page-bg, var(--white));
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .theme-dark .site-header.is-solid { background: var(--page-bg, var(--black)); }
}

/* project pages: the cover runs up underneath the transparent bar */
.has-cover .cover { margin-top: calc(var(--nav-h) * -1); }
.has-cover .site-header:not(.is-solid) { color: var(--white); }
/* soft scrim so the wordmark stays legible over a light photo */
.has-cover .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--nav-h) * 1.9);
  background: linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(0,0,0,0));
  opacity: 1; transition: opacity 0.4s ease; pointer-events: none; z-index: -1;
}
.has-cover .site-header.is-solid::after { opacity: 0; }

.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.logo {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1;
}

.nav ul { display: flex; gap: 2rem; }
.nav a {
  font-size: 0.9444rem;      /* 17px */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.2s ease-out;
}
.nav a:hover, .nav a.is-active { opacity: 1; }
.nav a.ul-link::before { bottom: -5px; }

/* hamburger — mobile only.
   44x44 hit area (WCAG 2.5.5) with the 30x20 icon centred inside via a fixed
   gap, instead of stretched with justify-content: space-between — same 7px
   gap the old space-between math produced, so the icon looks identical. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  position: relative; z-index: 60;
  transition: transform 0.1s ease-out;
}
/* feedback on press, not on release — instant, so the button never feels dead on touch */
.nav-toggle:active { transform: scale(0.9); }
.nav-toggle span {
  display: block; height: 2px; width: 30px;
  background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: var(--page-bg, var(--white));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.7rem, 7vw, 2.6rem);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
  overscroll-behavior: contain;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.theme-dark .nav-overlay { background: var(--page-bg, var(--black)); }
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.nav-overlay a {
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1;            /* the body's fixed 25px line-height squashed these together */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.nav-overlay a.is-active, .nav-overlay a:hover { opacity: 1; }

@media (max-width: 991.98px) {
  .nav ul { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 543.98px) {
  .logo { font-size: 0.8889rem; }
}

/* =============================================================================
   Work grid — 3 across, full page width, large gap between rows
   ============================================================================= */

.pg-section { padding-top: 0.6rem; padding-bottom: 4rem; }

.masonry { display: flex; flex-wrap: wrap; margin: 0 calc(var(--gutter) * -1); }

.thumb {
  width: 33.3333%;
  padding: 0 var(--gutter);
  margin-bottom: calc(var(--gutter) * 2);   /* same gap vertically as laterally */
}
.pg-more .thumb { margin-bottom: 2rem; }

/* below the desktop breakpoint: one project per row, like the phone layout */
@media (max-width: 991.98px) {
  .thumb { width: 100%; margin-bottom: calc(var(--gutter) * 2); }
  .pg-more .thumb { width: 50%; margin-bottom: 1rem; }
}
@media (max-width: 543.98px) {
  .pg-more .thumb { width: 100%; }
}

.thumb-inner { position: relative; overflow: hidden; background: #141414; }
.pg-more .thumb-inner { background: #f2f2f2; }
.theme-dark .pg-more .thumb-inner { background: rgba(255, 255, 255, 0.08); }

.thumb-inner img {
  width: 100%;
  aspect-ratio: 1480 / 914;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

/* Hover: title + category fade in, centred (Semplice "middle-center show-title fade") */
.thumb-hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(0, 0, 0, 0.62);
  color: var(--white);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.thumb-hover .title { display: block; font-size: clamp(0.95rem, 1.3vw, 1.25rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.thumb a:hover .thumb-hover, .thumb a:focus-visible .thumb-hover { opacity: 1; }
.thumb a:hover .thumb-inner img, .thumb a:focus-visible .thumb-inner img { transform: scale(1.03); }
/* instant feedback the moment a touch lands, instead of waiting for the tap to resolve */
.thumb a:active .thumb-hover { opacity: 1; transition: opacity 0.1s ease-out; }
.thumb a:active .thumb-inner img { transform: scale(1.01); transition: transform 0.1s ease-out; }

/* staggered reveal */
.thumb { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.9s var(--ease); }
.is-ready .thumb { opacity: 1; transform: none; }
.is-ready .thumb:nth-child(1) { transition-delay: 0.05s; }
.is-ready .thumb:nth-child(2) { transition-delay: 0.13s; }
.is-ready .thumb:nth-child(3) { transition-delay: 0.21s; }
.is-ready .thumb:nth-child(n+4) { transition-delay: 0.29s; }

/* =============================================================================
   Footer
   ============================================================================= */

.site-footer { padding: 3.4rem 0 2.6rem; }
.site-footer--plain { padding: 1.8rem 0; }
.site-footer--plain .footer-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.site-footer .container { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem; }

.footer-cta {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 14ch;
  transition: opacity 0.2s ease;
}
.footer-cta:hover { opacity: 0.75; }
.footer-cta:active { opacity: 0.55; }

/* fixed-width columns so the hover letter-spacing animation never nudges the others */
.footer-links { display: grid; grid-template-columns: repeat(2, 8.6rem); column-gap: 1.2rem; row-gap: 1.4rem; }
.footer-links a {
  font-size: 0.7778rem; text-transform: uppercase;
  letter-spacing: 0.0556rem;
  opacity: 0.7;
  transition: opacity 0.25s ease-out, letter-spacing 0.25s ease-out;
  justify-self: start;
}
.footer-links a:hover { opacity: 1; letter-spacing: 0.0139rem; }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.7222rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.62;   /* 0.55 read at 4.35:1 on the light theme — under the 4.5:1 AA minimum */
}
.site-footer--dark .footer-bottom { border-top-color: rgba(255, 255, 255, 0.16); }

@media (max-width: 543.98px) {
  .site-footer .container { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: 1fr; row-gap: 0.8rem; }
}

/* =============================================================================
   About — serif headline filling the first screen, labels anchored at its edge
   ============================================================================= */

.about-screen {
  min-height: calc(100vh - var(--nav-h));
  display: flex; flex-direction: column;
}
.about-headline-wrap { flex: 1; display: flex; align-items: center; padding: 3rem 0 4rem; }

.about-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 6.2rem);   /* ≈ 112px on a 1730px screen */
  line-height: 0.98;
  text-wrap: balance;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 10.5em;
}
.about-headline .nowrap-line { white-space: nowrap; }
.about-headline em { font-style: normal; color: var(--grey-dark); }
.theme-dark .about-headline em { color: rgba(255, 255, 255, 0.55); }

/* label bars: sit on the bottom edge of the first viewport */
.label {
  margin: 0;
  font-weight: 400;
  font-size: 0.8333rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: inherit;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid currentColor;
}
.about-labels { padding-bottom: 0.2rem; }
.about-labels .label { margin: 0; }

.about-content { padding-top: 1.1rem; padding-bottom: 3.5rem; }
.about-content .about-col-experience { padding-left: calc(var(--gutter) + 0.85rem); }
.about-content p { color: var(--ink); }
.about-content li { color: var(--ink); line-height: 1.389rem; }
.about-content li::before { content: "- "; }
.about-content li a { color: var(--ink); }

/* Clients — logos fade/rise in as you scroll */
.clients { padding-bottom: 5rem; }
.clients .label { margin-bottom: 2.2rem; }
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 3rem 2rem;
  align-items: center;
}
.client {
  position: relative;
  height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.client img {
  width: 112px; height: 80px; object-fit: contain;
  transition: opacity 0.35s ease;
}
.client img.color { position: absolute; inset: 0; margin: auto; opacity: 0; }
.client.has-color:hover img.mono, .client.has-color:focus-visible img.mono { opacity: 0; }
.client.has-color:hover img.color, .client.has-color:focus-visible img.color { opacity: 1; }
.client .client-name {
  font-size: 0.7222rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  text-align: center; line-height: 1.3; color: inherit;
}

/* =============================================================================
   Contact — headline on the left, form on the right
   ============================================================================= */

.contact-screen {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 2.2rem);
  padding-bottom: 4rem;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.6rem;
  align-items: start;
  width: 100%;
}
@media (min-width: 1200px) {
  .contact-grid { grid-template-columns: 1.4fr 1fr; gap: 3.4rem; }
}

.contact-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 1.3rem;
}
.contact-intro {
  max-width: 34em;
  opacity: 0.72;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 2.2rem;
  text-wrap: pretty;
}

.contact-socials { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; }
.contact-social {
  font-size: 0.8056rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  transition: opacity 0.2s ease-out;
}
.contact-social:hover, .contact-social:focus-visible { opacity: 1; }

.contact-form { display: flex; flex-direction: column; gap: 1.5rem; max-width: 30rem; }
.contact-form .field { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-form label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.contact-form input,
.contact-form textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.4);
  padding: 0.6rem 0;
  outline: none;
  transition: border-color 0.2s ease-out;
}
.contact-form textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
.contact-form input:focus, .contact-form textarea:focus { border-color: currentColor; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

.contact-submit {
  align-self: flex-start;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: 0.8889rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.85rem 2.2rem;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.1s ease-out;
}
.contact-submit:hover { background: currentColor; color: var(--black); }
.theme-dark .contact-submit:hover { color: var(--white); }
.contact-submit:active { transform: scale(0.96); }

@media (max-width: 767.98px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .contact-screen { padding-top: calc(var(--nav-h) + 1.4rem); align-items: flex-start; }
  .contact-intro { margin-bottom: 1.8rem; }
}

/* =============================================================================
   Project page
   ============================================================================= */

.cover { position: relative; height: 100vh; min-height: 520px; overflow: hidden; background: var(--page-bg, var(--black)); }
.cover-image { position: absolute; inset: -12% 0; background-size: cover; background-position: 50% 50%; will-change: transform; }
.cover .show-more {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  width: 30px; height: 11px; padding: 0; border: 0; background: none;
  color: var(--white); opacity: 0.9; cursor: pointer; z-index: 3;
  transition: opacity 0.2s ease, transform 0.4s var(--ease);
}
/* the visible chevron stays small; the tap target underneath doesn't (WCAG 2.5.5) */
.cover .show-more::before { content: ""; position: absolute; inset: -20px -10px; }
.cover .show-more:hover { opacity: 1; transform: translateX(-50%) translateY(4px); }
.cover .show-more:active { opacity: 1; transform: translateX(-50%) translateY(4px) scale(0.88); transition: transform 0.1s ease-out; }
.cover .show-more svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cover .show-more polyline {
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 543.98px) {
  .cover .show-more { width: 24px; height: 9px; bottom: 1.6rem; }
}

.project-images { padding-top: 0.7778rem; }
.project-images .container { display: grid; gap: var(--blk-gap); }
.project-content-label { margin-top: 0.8rem; }

/* a row of images, all the same height.
   flex-grow carries each image's aspect ratio, so widths come out proportional
   to shape and nothing has to be cropped to fit */
:root { --blk-gap: 0.7778rem; }
.blk-row { display: flex; gap: var(--blk-gap); align-items: stretch; }
.blk-item { flex: 1 1 0; min-width: 0; margin: 0; }
.blk-item img {
  width: 100%; height: 100%;
  object-fit: cover;              /* only ever a sub-pixel trim */
  background: #f2f2f2;
  display: block;
}
.theme-dark .blk-item img { background: rgba(255, 255, 255, 0.07); }

/* a single upright image: centred, at the height a row of two would have */
.blk-row--solo { justify-content: center; }
.blk-row--solo .blk-item { flex: 0 0 auto; width: var(--solo-w, 50%); }

/* a video slot takes its share of the row like an image does; the player keeps
   its own shape (9:16 for a Short) centred inside, so nothing of it is cut */
.blk-item--video .blk-embed {
  position: relative; width: 100%; background: #000;
  aspect-ratio: var(--slot-ratio, 9 / 16);     /* the slot, like an image's shape */
}
.blk-item--video iframe,
.blk-item--video .blk-embed-fallback {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 0; height: 100%; width: auto; max-width: 100%;
  aspect-ratio: 9 / 16;                        /* the player, never cropped */
}
/* shown until the player is mounted (and if it can't be) */
.blk-item--video .blk-embed-fallback { display: block; overflow: hidden; }
.blk-item--video .blk-embed-fallback img { width: 100%; height: 100%; object-fit: cover; }
.blk-item--video .blk-embed-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}
.blk-item--video .blk-embed-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-left: 18px solid #111; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
@media (max-width: 599.98px) {
  .blk-item--video .blk-embed { aspect-ratio: 9 / 16; height: auto; }
}

/* tablet: rows keep their shape, just smaller — wrapping a row of three into
   2 + 1 left the orphan stretched to full width, which read as a mistake */
/* phone: one image per row, each at its own natural height */
@media (max-width: 599.98px) {
  .blk-row { flex-wrap: wrap; }
  .blk-row .blk-item { flex: 1 1 100%; width: auto; }
  .blk-item img { height: auto; }
}

/* quick-glance strip right under the hero, before the full gallery.
   The cover's negative top margin (so the hero bleeds under the sticky nav)
   shifts this section up by the same amount, so its own top padding has to
   absorb nav-h or the sticky header lands directly over this text. */
.project-stats { padding: calc(var(--nav-h) + 1.5rem) 0 1.5rem; border-bottom: 1px solid rgba(128, 128, 128, 0.25); }
.project-stats .container { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; }
.project-stats .stat { min-width: 7rem; }
.stat-label {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.stat-value { margin: 0; font-size: 1.0625rem; line-height: 1.3; }

@media (max-width: 543.98px) {
  .project-stats { padding: calc(var(--nav-h) + 1.2rem) 0 1.2rem; }
  .project-stats .container { gap: 1rem 1.8rem; }
}

.project-outro { padding-top: 3.4rem; padding-bottom: 7rem; }

/* the text block sits inset from the full-bleed images above it */
.outro-inner { max-width: 1480px; margin: 0 auto; }

.outro-head { align-items: stretch; margin-bottom: 1.5rem; }
.outro-head .row { width: 100%; align-items: stretch; }
.outro-head .col-5 { display: flex; }
.outro-cell {
  height: 100%;
  display: flex; align-items: flex-end;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.45rem;
}

.project-signature {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

.outro-body p { color: inherit; line-height: 1.6; margin: 0 0 1.1rem; }
.outro-body p:last-child { margin-bottom: 0; }

.info-label {
  margin: 0;
  font-size: 0.8333rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.info-list li { color: inherit; line-height: 1.5; }
.info-list--dash li::before { content: "- "; }



.more-work { padding-bottom: 3rem; }
.more-work .label { margin-bottom: 1.4rem; }

.project-images .blk-item { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 1s var(--ease); }
.project-images .blk-item.in { opacity: 1; transform: none; }

/* =============================================================================
   Page transition — black wipe (Semplice transition-wrap)
   ============================================================================= */

.transition-overlay { position: fixed; inset: 0; z-index: 100; background: var(--black); transform: translateY(101%); pointer-events: none; }
.transition-overlay.is-entering { transform: translateY(0); transition: transform 0.55s var(--ease); pointer-events: auto; }
.transition-overlay.is-leaving  { transform: translateY(-101%); transition: transform 0.65s var(--ease); }
.transition-overlay.no-anim { transition: none; }

.page { opacity: 0; transition: opacity 0.5s ease; }
.is-ready .page { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .page, .thumb, .project-images .blk-item { opacity: 1; transform: none; }
}

/* =============================================================================
   Mobile / tablet
   ============================================================================= */

.label-inline, .info-label--inline { display: none; }

@media (max-width: 991.98px) {
  /* About: the label bar on the fold only works on wide screens —
     on small screens each block carries its own label instead */
  .about-screen { min-height: 0; }
  .about-headline-wrap { align-items: flex-start; padding: 1.5rem 0 3rem; }
  .about-headline .nowrap-line { white-space: normal; }
  .about-labels { display: none; }
  .about-content { padding-top: 0; }
  .about-content .col-6, .about-content .col-2 { width: 100%; }
  .about-content .col-2 { margin-top: 2.6rem; }
  .label-inline { display: block; margin-bottom: 1rem; }
  .contact-list li { overflow-wrap: anywhere; }

  /* Project outro: stack the two info columns, each with its own label */
  .outro-head .col-5 { display: none; }
  .outro-body .col-5 { width: 100%; margin-top: 2.6rem; }
  .outro-body .col-5 .col-6 { width: 100%; }
  .outro-body .col-5 .col-6 + .col-6 { margin-top: 2.2rem; }
  .info-label--inline {
    display: block;
    margin-bottom: 0.6rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid currentColor;
  }

  /* a full-height cover crops too hard on a tall phone screen */
  .cover { height: 62vh; min-height: 360px; }

  .project-outro { padding-top: 2.4rem; padding-bottom: 4rem; }
  .project-signature { font-size: clamp(1.6rem, 8vw, 2.2rem); }
}

@media (max-width: 543.98px) {
  .site-footer { padding-top: 2.6rem; }
  .footer-links { grid-template-columns: repeat(2, 8.4rem); column-gap: 0.8rem; row-gap: 1rem; }
  .footer-cta { max-width: 12ch; }
  .clients-grid { gap: 2.2rem 1rem; }
}