/* ============ Colours & base ============ */
:root {
  --background: #f8f5f0;
  --foreground: #482526;
  --border: #d4c9bd;
  --muted: #6f615a;
  --sand: #e9e2d9;
  --dark: #382b28;

  /* Page colour stops (see "Scroll colour" below and script.js) */
  --c-ivory: #f8f5f0;
  --c-sand: #ebe3d8;
  --c-sage: #e0e2d7;
  --c-brown: #3a2b27;

  /* Colours the scroll effect updates while you scroll (these are the starting values) */
  --page-bg: var(--c-ivory);
  --page-fg: #482526;
  --page-muted: #6a5b54;
  --page-line: #a08c85;
  --page-rule: #d8cec4;
}

/* ============ Scroll colour ============ */
/* Every section is tagged data-tone="ivory|sand|sage|brown".
   Default (no JavaScript, or "reduce motion"): each section paints its own fixed colour.
   With .bg-scroll on <html>: sections are transparent and the whole page shares one
   background that script.js blends between the section colours as you scroll.
   Text colours (--fg, --fg-muted, --line, --rule) follow the background so they stay readable. */
[data-tone] { --bg-now: var(--sec-bg); background: var(--sec-bg); color: var(--fg); }
[data-tone="ivory"] { --sec-bg: var(--c-ivory); }
[data-tone="sand"]  { --sec-bg: var(--c-sand); }
[data-tone="sage"]  { --sec-bg: var(--c-sage); }
[data-tone="brown"] { --sec-bg: var(--c-brown); }
[data-tone="ivory"], [data-tone="sand"], [data-tone="sage"] {
  --fg: #482526; --fg-muted: #6a5b54; --line: #a08c85; --rule: #d3c8bd;
}
[data-tone="brown"] {
  --fg: #f6f0e8; --fg-muted: #d6c8be; --line: #8f7c75; --rule: #5a4843;
}
html.bg-scroll, html.bg-scroll body { background: var(--page-bg); }
html.bg-scroll [data-tone] {
  --bg-now: var(--page-bg);
  --fg: var(--page-fg); --fg-muted: var(--page-muted); --line: var(--page-line); --rule: var(--page-rule);
  background: transparent;
}

/* Language switching: show only the text for the current language */
html[lang="pt"] .en,
html[lang="en"] .pt { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  background: var(--background);
  color: var(--foreground);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { object-fit: cover; width: 100%; display: block; }
svg { flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  letter-spacing: -.045em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.08;
}
em { font-weight: 400; }
:focus-visible { outline: 2px solid #ad724e; outline-offset: 5px; }

.eyebrow { letter-spacing: 1.8px; text-transform: uppercase; font-size: 12px; line-height: 1.7; }

/* ============ Header ============ */
header {
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 4.5%;
}
.wordmark { letter-spacing: -1.6px; font-family: Georgia, serif; font-size: 30px; line-height: 1; }
.wordmark span {
  display: block; margin-top: 9px;
  letter-spacing: 5px; text-align: center;
  font-family: Arial, sans-serif; font-size: 10px;
}
nav { display: flex; gap: 38px; font-size: 14px; }
nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-end { display: flex; align-items: center; gap: 16px; }
.languages { display: flex; gap: 9px; font-size: 13px; }
.languages button { color: inherit; opacity: .5; background: none; border: 0; padding: 4px; }
.languages button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.mobile-menu { display: none; color: inherit; background: none; border: 0; }
.skip { position: fixed; top: -100px; left: 15px; z-index: 100; background: #fff; padding: 12px; }
.skip:focus { top: 15px; }

/* ============ Hero ============ */
/* Image-led: compact text row above one large photograph (about two thirds of the first screen). */
.hero { padding: 36px 4.5% 0; }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: 28px; }
.hero-heading .eyebrow { margin-bottom: 14px; }
.hero h1 { font-size: clamp(34px, 3.5vw, 52px); line-height: 1.1; max-width: 16ch; text-wrap: balance; }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 440px; padding-bottom: 4px; }
.hero-text { color: var(--fg-muted); font-size: 15px; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.hero-ctas .hero-secondary { margin-top: 0; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 20px; font-size: 14px;
  border: 1px solid var(--fg);
  transition: background .25s, color .25s;
}
.btn-primary { color: var(--bg-now); background: var(--fg); }
.btn-primary:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg-now)); }

.hero-media { margin: 0; }
.hero-media picture { display: block; height: clamp(360px, 64vh, 760px); overflow: hidden; background: #e8e2d9; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.hero-media figcaption { display: flex; justify-content: flex-end; margin-top: 12px; }
.hero-caption {
  display: inline-flex; align-items: center; gap: 8px; padding: 0;
  color: var(--fg-muted); background: none; border: 0;
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
}
.hero-caption:hover { color: var(--fg); }

/* ============ Intro ============ */
.intro { text-align: center; padding: 110px 10%; }
.intro h2 { margin: 25px 0; font-size: clamp(38px, 4.7vw, 64px); }
.intro > p:not(.eyebrow) { color: var(--fg-muted); }
.text-link {
  display: inline-block; margin-top: 28px; padding-bottom: 3px;
  border-bottom: 1px solid var(--line); font-size: 14px;
}

/* ============ Projects ============ */
.projects { padding: 20px 4.5% 100px; }
.section-heading {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rule); padding: 32px 0;
}
.section-heading h2 { font-size: 44px; }
.section-heading > span { letter-spacing: 2px; font-size: 12px; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px 28px; }
.project-grid article:nth-child(2n) { margin-top: 80px; }
.project-open { display: block; width: 100%; padding: 0; text-align: left; color: inherit; background: none; border: 0; }

/* The frame shared by every project (same idea as the brand cards, in the light palette).
   It keeps its own background, so it looks the same while the page colour changes around it. */
.project-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px;
  color: var(--foreground); background: #fcfaf6;
  border: 1px solid #e0d6cb;
  transition: border-color .3s, box-shadow .3s;
}
.project-card-top, .project-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.project-card-top { min-height: 28px; }
.project-card-top .eyebrow { color: #6a5b54; }
.project-count { color: #7d6d66; font-size: 12px; letter-spacing: 2px; white-space: nowrap; }
.project-photo { position: relative; height: 470px; overflow: hidden; background: #ece6dd; }
.project-photo img { height: 100%; transition: transform .6s; }
.project-card-bottom h3 { font-size: 30px; }
.project-visit {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 3px; border-bottom: 1px solid #b3a39b;
  color: #6a5b54; font-size: 13px; white-space: nowrap;
  transition: color .25s, border-color .25s;
}
.project-card:hover { border-color: #c4b3a6; box-shadow: 0 18px 40px -24px #2417123d; }
.project-card:hover .project-photo img { transform: scale(1.035); }
.project-card:hover .project-visit { color: var(--foreground); border-color: var(--foreground); }

/* ============ Services ============ */
.services { padding: 85px 4.5%; }
.services-intro h2 { margin-top: 25px; font-size: clamp(38px, 4.6vw, 65px); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 65px; }
.service-grid article { border-top: 1px solid var(--line); padding-top: 22px; }
.service-grid h3 { margin: 22px 0 18px; font-size: 31px; }
.service-grid article > p:not(.eyebrow) { color: var(--fg-muted); max-width: 370px; }
.service-grid a { display: flex; align-items: center; gap: 15px; margin-top: 28px; font-size: 14px; }

/* ============ Story: behind the work ============ */
/* Asymmetric editorial layout on a 12-column grid: intro top-left, one large photo on the
   right, two small close-ups and a wide studio frame stepping down the page. */
.story { padding: 110px 5.5% 120px; }
.story-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; max-width: 1400px; margin: 0 auto; }
.story-intro { grid-column: 1 / 6; grid-row: 1; align-self: start; padding-top: 30px; }
.story-intro h2 { margin: 25px 0 26px; font-size: clamp(38px, 4.2vw, 60px); }
.story-intro > p:not(.eyebrow) { color: var(--fg-muted); max-width: 440px; }
.story-fig { margin: 0; align-self: start; } /* reset figure margins first; the placements below add their own */
.story-large   { grid-column: 7 / 13; grid-row: 1 / 3; }
.story-small-a { grid-column: 2 / 5; grid-row: 2; align-self: end; margin-top: 70px; }
.story-small-b { grid-column: 1 / 4; grid-row: 3; margin-top: 110px; }
.story-studio  { grid-column: 6 / 12; grid-row: 3; margin-top: 190px; }

/* Each photo sits in the same light frame as the project cards, caption included.
   The frame keeps its own colours, so it reads the same while the page colour shifts. */
.story-fig { padding: 18px 18px 20px; color: var(--foreground); background: #fcfaf6; border: 1px solid #e0d6cb; }
.story-img { overflow: hidden; background: #ece6dd; }
.story-img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.story-fig figcaption { margin-top: 16px; max-width: 460px; color: #6a5b54; font-size: 14px; line-height: 1.6; }
.story-where { display: block; margin-bottom: 4px; color: var(--foreground); font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; }
.story-fig .story-link { border-bottom-color: #b3a39b; }
.story-link { margin-top: 30px; }

.story-img--wide img { aspect-ratio: 3 / 2; }

/* Subtle entrance: a short fade-up as each part scrolls into view (only with .anim, so
   reduced-motion visitors and visitors without JavaScript see everything straight away) */
.anim .story-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }
.anim .story-reveal.is-visible { opacity: 1; transform: none; }

/* ============ Brands ============ */
.brands { padding: 60px 0 75px; overflow: hidden; }
.brands-intro { text-align: center; padding: 0 7%; }
.brands h2 { margin: 15px 0; font-size: 42px; }
.brands-intro > p:last-child { color: var(--fg-muted); max-width: 510px; margin: auto; }

/* Carousel: one row of framed cards that scrolls sideways and runs off the screen edge */
.brand-carousel { --edge: 7vw; margin-top: 55px; }
.brand-track {
  display: flex; gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 4px var(--edge) 8px;
  scrollbar-width: none;
  cursor: grab;
}
.brand-track::-webkit-scrollbar { display: none; }
.brand-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.brand-track.dragging a { pointer-events: none; }
.brand-track:focus-visible { outline-offset: -2px; }
.brand-track img { -webkit-user-drag: none; user-select: none; }

/* The frame shared by every brand */
.brand-card {
  flex: 0 0 clamp(280px, 30vw, 460px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px;
  background: #41322e;
  border: 1px solid #5c4a44;
  transition: border-color .3s, background .3s;
}
.brand-card-top, .brand-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand-card-top { min-height: 64px; }
.brand-logo { width: auto; max-width: 150px; height: 52px; object-fit: contain; object-position: left center; }
.brand-count { color: #b7a59b; font-size: 12px; letter-spacing: 2px; }
.brand-photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #2c211f; }
.brand-photo img { height: 100%; transition: transform .6s; }
.brand-card-bottom .eyebrow { color: #b7a59b; }
.brand-visit {
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 3px; border-bottom: 1px solid #8a7770;
  color: #d8c9bf; font-size: 13px; white-space: nowrap;
  transition: color .25s, border-color .25s;
}
.brand-card:hover { border-color: #8a7770; background: #46362f; }
.brand-card:hover .brand-photo img { transform: scale(1.035); }
.brand-card:hover .brand-visit { color: #f6f0e8; border-color: #f6f0e8; }

/* Progress line + arrows */
.brand-controls { display: flex; align-items: center; gap: 28px; margin-top: 34px; padding: 0 var(--edge); }
.brand-controls[hidden] { display: none; }
.brand-progress { position: relative; flex: 1; height: 1px; background: var(--rule); }
.brand-progress span { position: absolute; top: -1px; left: 0; height: 3px; width: 25%; background: var(--fg); transition: left .15s linear, width .15s linear; }
.brand-arrows { display: flex; gap: 10px; }
.brand-arrows button {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  color: var(--fg); background: none; border: 1px solid var(--line); border-radius: 50%;
  transition: background .25s, opacity .25s;
}
.brand-arrows button:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 9%, transparent); }
.brand-arrows button:disabled { opacity: .3; cursor: default; }

/* ============ Contact & form ============ */
.contact {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9%;
  padding: 95px 7%;
}
.contact h2 { margin: 25px 0 32px; font-size: clamp(38px, 4vw, 58px); }
.contact-intro > p:not(.eyebrow) { color: var(--fg-muted); max-width: 390px; margin-bottom: 32px; }
.contact-alternative { margin-top: 20px; font-size: 14px; }
.contact-alternative a { text-decoration: underline; text-underline-offset: 4px; }

.button {
  display: inline-flex; justify-content: space-between; align-items: center; gap: 15px;
  padding: 15px 23px; font-size: 14px;
  color: inherit; background: none; border: 1px solid;
}
.button:hover { background: color-mix(in srgb, currentColor 9%, transparent); }

form h3 { letter-spacing: -1px; margin-bottom: 24px; font-size: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
form label { display: block; margin: 0 0 24px; letter-spacing: .1px; font-size: 13px; }
form input, form textarea, form select {
  display: block; width: 100%; min-height: 40px;
  margin-top: 4px; padding: 8px 0;
  color: var(--fg); background: none;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font-size: 16px;
}
form select {
  appearance: none; -webkit-appearance: none;
  /* chevron drawn in the text colour, so it follows the page colour */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 26px;
}
form select option { color: var(--foreground); background: var(--background); }
form textarea { resize: vertical; }
form textarea::placeholder { color: var(--fg-muted); opacity: .85; font-size: 14px; }
form input:focus-visible, form textarea:focus-visible, form select:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
form .form-privacy { color: var(--fg-muted); margin-bottom: 22px; font-size: 12px; line-height: 1.6; }
form .form-privacy button { color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.submit { color: var(--foreground); background: var(--background); border-color: var(--background); }
.submit:hover { background: #e8d7ca; }
.submit .sending-label { display: none; }
.is-sending .submit > .en, .is-sending .submit > .pt { display: none !important; }
.is-sending .submit .sending-label { display: inline; }
.submit:disabled { opacity: .7; cursor: wait; }
.form-status { display: flex; gap: 10px; margin-top: 20px; font-size: 14px; }
.form-status[hidden] { display: none; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ============ Footer ============ */
footer { padding: 60px 5% 25px; }
.footer-top { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr .6fr; gap: 25px; font-size: 14px; }
.footer-top .eyebrow { margin-bottom: 14px; }
.footer-top .wordmark { align-self: start; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 60px; padding-top: 20px;
  border-top: 1px solid var(--rule); color: var(--fg-muted); font-size: 12px;
}
.footer-bottom button { color: inherit; background: none; border: 0; padding: 0; font-size: inherit; }

.whatsapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  display: flex; align-items: center; gap: 9px;
  padding: 13px 20px; font-size: 14px;
  color: var(--foreground); background: var(--background);
  border: 1px solid #d9cbc0; border-radius: 40px;
  box-shadow: 0 5px 25px #24171218;
}

/* ============ Pop-up windows ============ */
dialog {
  position: fixed; inset: 0; margin: auto;
  max-height: 90dvh; overflow-y: auto;
  color: var(--foreground); background: var(--background);
  border: 1px solid var(--border); border-radius: 0;
  box-shadow: 0 20px 60px #1c110d40;
}
dialog::backdrop { background: #1c110d99; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body:has(dialog[open]) { overflow: hidden; }
.modal-close {
  position: absolute; top: 15px; right: 15px; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  color: inherit; background: var(--background); border: 1px solid var(--border);
}
.project-dialog { width: calc(100% - 40px); max-width: 1100px; padding: 40px; }
.project-dialog .eyebrow { margin-bottom: 8px; }
.modal-title { letter-spacing: -1.6px; font-family: Georgia, serif; font-size: 44px; line-height: 1.1; padding-right: 40px; }
.modal-description { max-width: 700px; margin-top: 10px; line-height: 1.65; font-size: 16px; color: var(--muted); }
.modal-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.modal-gallery img { height: 450px; }
.modal-gallery img:first-child { grid-column: 1 / -1; height: auto; max-height: 650px; object-fit: contain; background: #e8e2d9; }
/* Exactly two photos: show them side by side at the same size instead of one wide + one alone */
.modal-gallery:has(> img:nth-child(2):last-child) img { grid-column: auto; height: auto; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; background: none; }
.menu-dialog, .privacy-dialog { width: calc(100% - 40px); max-width: 560px; padding: 35px; }
.menu-dialog h2 { font-size: 30px; padding-right: 40px; }
.menu-dialog nav { flex-direction: column; gap: 22px; padding-top: 20px; font-family: Georgia, serif; font-size: 24px; }
.privacy-dialog h2 { padding-right: 25px; font-size: 30px; margin-bottom: 14px; }
.privacy-dialog p { font-size: 16px; line-height: 1.65; margin-top: 10px; }

/* ============ Responsive ============ */
@media (min-width: 1600px) { main { max-width: 1920px; margin: auto; } }

@media (max-width: 1050px) {
  nav { gap: 20px; }
  .service-grid { gap: 24px; }
  .contact { gap: 6%; padding: 75px 6%; }
  .story-grid { column-gap: 20px; }
  .story-studio { grid-column: 5 / 13; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  header { gap: 12px; padding: 20px 6%; }
  .wordmark { font-size: 24px; }
  header nav { display: none; }
  .mobile-menu { display: block; }
  .hero { padding: 22px 6% 0; }
  .hero-top { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
  .hero-heading .eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: 1px; }
  .hero h1 { font-size: 31px; }
  .hero-side { gap: 14px; max-width: none; }
  .hero-text { font-size: 14px; }
  .hero-ctas { gap: 12px 20px; }
  .btn { padding: 12px 18px; }
  .hero-media picture { height: min(62vh, 520px); }
  .hero-media img { object-position: 50% 60%; }
  .intro { padding: 65px 6%; }
  .projects { padding: 0 6% 65px; }
  .section-heading h2 { font-size: 32px; }
  .project-grid { grid-template-columns: 1fr; gap: 35px; }
  .project-grid article:nth-child(2n) { margin-top: 0; }
  .project-card { padding: 16px; gap: 14px; }
  .project-photo { height: 360px; }
  .project-card-bottom { flex-wrap: wrap; gap: 10px 16px; }
  .project-card-bottom h3 { font-size: 26px; }
  .project-visit { font-size: 12px; gap: 6px; }
  .services { padding: 60px 6%; }
  .service-grid { grid-template-columns: 1fr; gap: 35px; margin-top: 40px; }
  .service-grid h3 { margin: 17px 0 14px; }
  /* Story on phones: a paced vertical sequence with varied widths */
  .story { padding: 70px 6% 80px; }
  .story-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 14px; }
  .story-intro { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
  .story-large { grid-column: 1 / -1; grid-row: auto; margin-top: 40px; }
  .story-small-a { grid-column: 3 / -1; grid-row: auto; margin-top: 56px; }
  .story-small-b { grid-column: 1 / 5; grid-row: auto; margin-top: 56px; }
  .story-studio { grid-column: 1 / -1; grid-row: auto; margin-top: 56px; }
  .story-fig { padding: 12px 12px 14px; }
  .story-fig figcaption { font-size: 13px; margin-top: 12px; }
  .brands { padding: 50px 0 60px; }
  .brands-intro { padding: 0 6%; }
  .brands h2 { font-size: 34px; }
  .brand-carousel { --edge: 6vw; margin-top: 40px; }
  .brand-track { gap: 14px; }
  .brand-card { flex-basis: 80vw; padding: 16px; gap: 14px; }
  .brand-card-top { min-height: 48px; }
  .brand-logo { max-width: 110px; height: 40px; }
  .brand-visit { font-size: 12px; gap: 6px; }
  .brand-controls { gap: 18px; margin-top: 26px; }
  .brand-arrows button { width: 40px; height: 40px; }
  .contact { grid-template-columns: 1fr; gap: 50px; padding: 60px 6%; }
  .contact-intro > p:not(.eyebrow) { max-width: 100%; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  footer { padding: 45px 6% 85px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 35px 20px; }
  .footer-top > .wordmark { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; gap: 12px; margin-top: 35px; }
  .footer-bottom > span:nth-child(2) { display: none; }
  .whatsapp { padding: 12px; right: 16px; bottom: 16px; }
  .whatsapp > span { display: none; }
  .project-dialog { width: calc(100% - 20px); max-height: 94dvh; padding: 30px 20px; }
  .modal-title { font-size: 33px; }
  .modal-gallery { grid-template-columns: 1fr; }
  .modal-gallery img { height: auto; max-height: 600px; }
  .modal-gallery img:first-child { max-height: 550px; }
  .project-dialog > .button { gap: 12px; }
  .privacy-dialog { padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}