/* A.Lemos Interiores & Remodelações
   Base: template "Midblock" de 8B (MIT, ver LICENSE e CREDITS.md), adaptado e sem estilos inline (CSP). */

/* latin-ext */
@font-face {
  font-family: 'Mozilla Headline';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 75%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mozillaheadline/v1/QGY4z-UXahmCOps4kyMKGuSA9pYt2_P-w2kFrS88o6dLYTHDYMVmJQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mozilla Headline';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 75%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mozillaheadline/v1/QGY4z-UXahmCOps4kyMKGuSA9pYt2_P-w2kFrS88o6dLYTHNYMU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Mozilla Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mozillatext/v1/SZc-3FrnJ7S7WZIff2mJ7TbD4RNKuCc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mozilla Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mozillatext/v1/SZc-3FrnJ7S7WZIff2mJ7TbD7xNK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens, base, atoms, layout, sections, scenes;

@layer tokens {
:root {
  --color-1: #ebe6de;
  --color-2: #16130e;
  --color-3: #f7f3ed;
  --color-4: #b08a3e;
  --color-5: #d6b36a;
  --color-6: #7d7466;
  --color-7: #b5532a;
  --color-8: #b5532a;
  --color-9: #ffffff;
  --color-10: #6b6458;
  --color-11: #d6cdbf;
  --color-12: #e3d9cb;
  --font-1: "Mozilla Headline", "Mozilla Headline Fallback", "Arial Narrow", Arial, sans-serif;
  --font-2: "Mozilla Text", "Mozilla Text Fallback", Arial, sans-serif;
  --space-1: clamp(20px, 4vw, 64px);
  --space-2: clamp(72px, 11vw, 160px);
}
}

@layer base {
  /* font fallbacks */
  @font-face { font-family: "Mozilla Headline Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 71%; ascent-override: 133.7%; descent-override: 36.6%; line-gap-override: 0%; }
  @font-face { font-family: "Mozilla Text Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 549; size-adjust: 110.6%; ascent-override: 85.9%; descent-override: 23.5%; line-gap-override: 0%; }
  @font-face { font-family: "Mozilla Text Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 101.1%; ascent-override: 93.9%; descent-override: 25.7%; line-gap-override: 0%; }
  /* end font fallbacks */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  body { margin: 0; background: var(--color-1); color: var(--color-2); }
  img { display: block; max-width: 100%; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--color-2); outline-offset: 3px; }
  [data-tone="dark"] :focus-visible { outline-color: var(--color-5); }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  main { display: block; }
}

@layer atoms {
.m-text { font-family: var(--font-2); font-size: clamp(16px, 1.05vw + 10px, 18px); font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; font-style: normal; }
.m-text-2 { font-family: var(--font-1); font-size: clamp(44px, 5.4vw, 92px); font-weight: 650; font-stretch: 75%; line-height: .93; letter-spacing: -.005em; text-transform: none; font-style: normal; }
.m-text-3 { font-family: var(--font-1); font-size: clamp(38px, 4.4vw, 72px); font-weight: 620; font-stretch: 75%; line-height: .95; letter-spacing: 0; text-transform: none; font-style: normal; }
.m-text-4 { font-family: var(--font-2); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; font-style: normal; }
.m-text-5 { font-family: var(--font-2); font-size: clamp(18px, 1.2vw + 10px, 22px); font-weight: 450; line-height: 1.42; letter-spacing: 0; text-transform: none; font-style: normal; }
.m-text-6 { font-family: var(--font-1); font-size: clamp(24px, 1.6vw + 12px, 34px); font-weight: 600; font-stretch: 75%; line-height: 1.02; letter-spacing: .005em; text-transform: none; font-style: normal; }

.m-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 2px solid var(--color-2); background: var(--color-2); color: var(--color-9); font-family: var(--font-2); font-size: 16px; font-weight: 600; line-height: 1.1; letter-spacing: .01em; text-decoration: none; overflow: hidden; cursor: pointer; }
.m-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(to bottom, var(--color-4) 0 7px, var(--color-5) 7px 11px, var(--color-4) 11px 15px, var(--color-8) 15px 17px, var(--color-4) 17px 24px); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.m-btn__label { position: relative; }
@media (hover: hover) {
  .m-btn:hover::before { transform: scaleX(1); }
  .m-btn:hover { border-color: var(--color-4); }
}
.m-btn-2 { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 2px solid var(--color-2); background: transparent; color: var(--color-2); font-family: var(--font-2); font-size: 16px; font-weight: 600; line-height: 1.1; letter-spacing: .01em; text-decoration: none; overflow: hidden; cursor: pointer; transition: color .3s; }
.m-btn-2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(to bottom, var(--color-2) 0 7px, var(--color-7) 7px 10px, var(--color-2) 10px 16px, var(--color-6) 16px 18px, var(--color-2) 18px 24px); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
@media (hover: hover) {
  .m-btn-2:hover { color: var(--color-9); }
  .m-btn-2:hover::before { transform: scaleX(1); }
}
.m-btn-3 { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 2px solid var(--color-5); background: var(--color-5); color: var(--color-2); font-family: var(--font-2); font-size: 16px; font-weight: 600; line-height: 1.1; letter-spacing: .01em; text-decoration: none; overflow: hidden; cursor: pointer; }
.m-btn-3::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(to bottom, var(--color-9) 0 7px, var(--color-3) 7px 11px, var(--color-9) 11px 15px, var(--color-8) 15px 17px, var(--color-9) 17px 24px); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
@media (hover: hover) {
  .m-btn-3:hover::before { transform: scaleX(1); }
  .m-btn-3:hover { border-color: var(--color-9); }
}
.m-link { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--color-4), var(--color-4)); background-repeat: no-repeat; background-size: 28% 2px, 0 2px; background-position: 0 100%, 0 calc(100% - 4px); padding-bottom: 6px; transition: background-size .45s cubic-bezier(.7, 0, .2, 1); }
@media (hover: hover) {
  .m-link:hover { background-size: 100% 2px, 100% 2px; }
}
.m-icon-btn { position: relative; display: inline-grid; place-content: center; gap: 6px; width: 48px; height: 48px; padding: 0; border: 2px solid var(--color-2); background: transparent; color: var(--color-2); cursor: pointer; }
.m-icon-btn__bar { display: block; width: 22px; height: 2px; background: currentColor; transform-origin: 0 50%; transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
.m-icon-btn__bar:nth-child(2) { transform: scaleX(.6); }
@media (hover: hover) {
  .m-icon-btn:hover .m-icon-btn__bar { transform: scaleX(1.25); }
  .m-icon-btn:hover .m-icon-btn__bar:nth-child(2) { transform: scaleX(1); }
}
.m-block { background: var(--color-3); color: var(--color-2); padding: clamp(20px, 2.4vw, 36px); }
.m-block-2 { background: var(--color-12); color: var(--color-2); padding: clamp(20px, 2.4vw, 36px); }
.m-block-3 { background: var(--color-2); color: var(--color-9); padding: clamp(24px, 3.2vw, 56px); }
.m-photo { position: relative; overflow: hidden; background: var(--color-12); }
.m-photo__img { width: 100%; height: 100%; object-fit: cover; }
.m-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-2); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--color-2); }
.m-badge::before { content: ""; width: 18px; height: 6px; background: var(--color-6); }
.m-badge-2 { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-2); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--color-2); }
.m-badge-2::before { content: ""; width: 18px; height: 6px; background: var(--color-4); }
.m-field { display: grid; gap: 8px; }
.m-field__label { font-family: var(--font-2); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; font-style: normal; }
.m-field__input { width: 100%; min-height: 50px; padding: 12px 14px; border: 0; border-bottom: 2px solid var(--color-2); background: var(--color-9); color: var(--color-2); font-family: var(--font-2); font-size: 17px; line-height: 1.4; border-radius: 0; }
.m-field__input:focus-visible { outline: 3px solid var(--color-7); outline-offset: 2px; }
textarea.m-field__input { min-height: 120px; resize: vertical; }
}

@layer layout {
  .wrap { width: min(100% - 2 * var(--space-1), 1360px); margin-inline: auto; }
}

@layer sections {
  #navigation { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; height: 72px; padding: 0 var(--space-1); background: var(--color-1); border-bottom: 2px solid var(--color-2); }
  #navigation .nav__brand { font-family: var(--font-1); font-size: 30px; font-weight: 700; font-stretch: 75%; line-height: 1; letter-spacing: .01em; text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; gap: 10px; }
  #navigation .nav__mark { display: inline-grid; grid-template-columns: 5px 8px 5px; gap: 3px; height: 26px; align-items: end; }
  #navigation .nav__mark span { background: var(--color-2); height: 100%; }
  #navigation .nav__mark span:nth-child(2) { background: var(--color-4); height: 62%; }
  #navigation .nav__links { display: flex; gap: 26px; }
  #navigation .nav__links a { font-size: 16px; font-weight: 500; }
  #navigation .nav__cta { min-height: 44px; }
  #navigation .nav__toggle { display: none; }
  #navigation .nav__menu { position: fixed; inset: 0; z-index: 60; background: var(--color-2); color: var(--color-9); padding: 96px var(--space-1) 40px; display: grid; align-content: start; gap: 28px; }
  #navigation .nav__menu[hidden] { display: none; }
  #navigation .nav__menu-links { display: grid; gap: 4px; }
  #navigation .nav__menu-links a { font-family: var(--font-1); font-size: 44px; font-weight: 600; font-stretch: 75%; line-height: 1.15; text-decoration: none; display: block; padding: 4px 0; }
  #navigation .nav__close { position: absolute; top: 12px; right: var(--space-1); border-color: var(--color-9); color: var(--color-9); }
  #navigation .nav__menu-stripe { height: 14px; background: linear-gradient(to bottom, var(--color-5) 0 40%, var(--color-4) 40% 70%, var(--color-6) 70% 100%); }
  @media (prefers-reduced-motion: no-preference) {
    #navigation { transition: transform .45s cubic-bezier(.6, 0, .2, 1); }
  }
  #navigation[data-hidden] { transform: translateY(-100%); }
  @media (max-width: 900px) {
    #navigation { height: 64px; }
    #navigation .nav__links, #navigation .nav__cta { display: none; }
    #navigation .nav__toggle { display: inline-grid; }
  }
}

@layer sections {
  #opening { position: relative; background: var(--color-1); overflow-x: clip; }
  #opening .op__stage { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; overflow: hidden; container-type: size; z-index: 0; }
  #opening .op__sky { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--color-11), var(--color-1) 62%); }
  #opening .op__slab { position: absolute; inset: 0; z-index: 2; clip-path: inset(calc(var(--t) * 1%) calc((99.8 - var(--l) - var(--w)) * 1%) calc(var(--b) * 1%) calc(var(--l) * 1%)); }
  #opening .op__slab--gap { z-index: 1; clip-path: inset(0% calc((100 - var(--l) - var(--w) / 2) * 1%) 0% calc((var(--l) + var(--w) / 2) * 1%)); }
  #opening .op__rise { position: absolute; inset: 0; }
  #opening .op__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 50%; transform-origin: calc(var(--o) * 1%) 50%; transform: scaleX(64); }
  #opening .op__slab--gap .op__img { transform: none; }
  #opening .op__floor { position: absolute; inset: 0; z-index: 3; clip-path: inset(calc(var(--f) * 1%) 0% 0% 0%); --f: 84; --o: 47; }
  #opening .op__floor .op__img { object-position: 58% 50%; }
  /* desktop slab geometry, in % of the stage */
  #opening .op__slab:nth-of-type(2) { --l: 0;    --w: 11;   --t: 13; --b: 16; --o: 26; }
  #opening .op__slab:nth-of-type(3) { --l: 11;   --w: 9.5;  --t: 20; --b: 26; --o: 33; }
  #opening .op__slab:nth-of-type(4) { --l: 20.5; --w: 7;    --t: 41; --b: 21; --o: 41; }
  #opening .op__slab:nth-of-type(5) { --l: 70;   --w: 8;    --t: 31; --b: 29; --o: 61; }
  #opening .op__slab:nth-of-type(6) { --l: 78;   --w: 12;   --t: 11; --b: 22; --o: 71; }
  #opening .op__slab:nth-of-type(7) { --l: 90;   --w: 10;   --t: 0;  --b: 16; --o: 86; }
  #opening .op__slab--gap { --l: 27.5; --w: 42.5; --t: 0; --b: 0; --o: 50; }

  #opening .op__first { position: relative; z-index: 1; height: 100svh; }
  #opening .op__copy { position: absolute; left: 28.5%; width: 41%; top: max(96px, 15svh); display: grid; justify-items: start; }
  #opening .op__block { width: 100%; }
  #opening .op__block--a { padding-top: clamp(26px, 3vw, 44px); }
  #opening .op__block--b { width: 86%; justify-self: end; }
  #opening .op__block--c { width: 74%; display: flex; flex-wrap: wrap; gap: 12px; background: var(--color-5); }
  #opening .op__title { max-width: 11ch; }
  #opening .op__hold { height: 0; }
  #opening .op__second { position: relative; z-index: 1; min-height: 100svh; padding: max(120px, 16svh) var(--space-1) max(64px, 10svh); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-content: center; }
  #opening .op__manifesto { grid-column: 1 / span 7; display: grid; gap: 26px; }
  #opening .op__manifesto .m-text-3 { max-width: 14ch; }
  #opening .op__manifesto .m-text { max-width: 54ch; color: var(--color-9); }
  #opening .op__facts { grid-column: 9 / span 4; align-self: end; display: grid; gap: 0; padding: 0; }
  #opening .op__fact { padding: 22px 26px; border-top: 2px solid var(--color-2); }
  #opening .op__fact:first-child { border-top: 0; }
  #opening .op__fact:nth-child(2) { margin-left: -14%; background: var(--color-12); }
  #opening .op__fact dt { margin-bottom: 8px; color: var(--color-10); }

  @media (max-width: 900px) {
    #opening .op__slab:nth-of-type(2) { --l: 0;  --w: 10; --t: 10; --b: 30; --o: 12; }
    #opening .op__slab:nth-of-type(3) { --l: 10; --w: 8;  --t: 19; --b: 26; --o: 30; }
    #opening .op__slab:nth-of-type(4) { --l: 18; --w: 7;  --t: 29; --b: 34; --o: 44; }
    #opening .op__slab:nth-of-type(5) { --l: 75; --w: 8;  --t: 23; --b: 28; --o: 62; }
    #opening .op__slab:nth-of-type(6) { --l: 83; --w: 8;  --t: 13; --b: 22; --o: 78; }
    #opening .op__slab:nth-of-type(7) { --l: 91; --w: 9;  --t: 8;  --b: 18; --o: 92; }
    #opening .op__slab--gap { --l: 25; --w: 50; }
    #opening .op__floor { --f: 88; }
    #opening .op__copy { left: 5%; width: 90%; top: auto; bottom: max(20px, 2.5svh); }
    #opening .op__block--b { width: 90%; }
    #opening .op__block--c { width: 100%; }
    #opening .op__second { grid-template-columns: 1fr; row-gap: 0; padding-top: 96px; }
    #opening .op__manifesto, #opening .op__facts { grid-column: 1; }
    #opening .op__facts { width: 88%; justify-self: end; }
    #opening .op__fact:nth-child(2) { margin-left: -10%; }
  }
  @media (prefers-reduced-motion: no-preference) {
    #opening .op__slab:not(.op__slab--gap) .op__img, #opening .op__floor .op__img { animation: op-drift var(--dur, 8s) ease-in-out infinite alternate; }
    #opening .op__slab:nth-of-type(2) .op__img { --dur: 7s; --d: 7; }
    #opening .op__slab:nth-of-type(3) .op__img { --dur: 9s; --d: -6; }
    #opening .op__slab:nth-of-type(4) .op__img { --dur: 6s; --d: 8; }
    #opening .op__slab:nth-of-type(5) .op__img { --dur: 8s; --d: -7; }
    #opening .op__slab:nth-of-type(6) .op__img { --dur: 10s; --d: 6; }
    #opening .op__slab:nth-of-type(7) .op__img { --dur: 7.5s; --d: -8; }
    #opening .op__floor .op__img { --dur: 11s; --d: 22; }
    #opening .op__stage[data-paused] .op__img { animation-play-state: paused; }
    #opening .op__rise { animation: op-rise .9s cubic-bezier(.2, .7, .2, 1) backwards; }
    #opening .op__slab:nth-of-type(3) .op__rise { animation-delay: .08s; }
    #opening .op__slab:nth-of-type(4) .op__rise { animation-delay: .16s; }
    #opening .op__slab:nth-of-type(5) .op__rise { animation-delay: .12s; }
    #opening .op__slab:nth-of-type(6) .op__rise { animation-delay: .04s; }
    #opening .op__slab:nth-of-type(7) .op__rise { animation-delay: .2s; }
    #opening .op__floor .op__rise { animation-name: op-floor; animation-duration: 1s; }
    #opening .op__copy > * { animation: op-step .8s cubic-bezier(.2, .7, .2, 1) backwards; }
    #opening .op__block--b { animation-delay: .1s; --dx: 36px; }
    #opening .op__block--c { animation-delay: .2s; --dx: -28px; }
  }
  @keyframes op-drift { from { transform-origin: calc(var(--o) * 1%) 50%; } to { transform-origin: calc((var(--o) + var(--d, 6)) * 1%) 50%; } }
  @keyframes op-rise { from { clip-path: inset(100% 0% 0% 0%); } to { clip-path: inset(0% 0% 0% 0%); } }
  @keyframes op-floor { from { clip-path: inset(0% 100% 0% 0%); } to { clip-path: inset(0% 0% 0% 0%); } }
  @keyframes op-step { from { transform: translateX(var(--dx, -40px)); } }
}

@layer scenes {
  @media (prefers-reduced-motion: no-preference) {
    #opening[data-opening] .op__hold { height: 70svh; }
  }
}

@layer sections {
  #buildings { position: relative; background: var(--color-1); padding: var(--space-2) 0 calc(var(--space-2) * .6); }
  #buildings .bl__pin { position: relative; }
  #buildings .bl__track { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 56px 2.6vw; padding: 0 var(--space-1); }
  #buildings .bl__item { flex: none; width: calc(var(--plot) * 4.6vw); }
  #buildings .bl__item--head { width: max(300px, 30vw); display: grid; gap: 22px; align-content: end; }
  #buildings .bl__item--end { width: max(260px, 22vw); display: grid; gap: 18px; align-content: end; }
  #buildings .bl__photo { position: relative; overflow: hidden; height: calc(var(--h) * 1svh); background: var(--color-12); }
  #buildings .bl__shift { position: absolute; inset: 0 -8%; }
  #buildings .bl__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #buildings .bl__plate { height: 200px; padding-top: 16px; display: grid; gap: 6px; align-content: start; border-top: 4px solid var(--color-2); }
  #buildings .bl__plate .m-text-4 { color: var(--color-10); }
  #buildings .bl__plate p:last-child { font-size: 15px; line-height: 1.45; max-width: 36ch; }
  #buildings .bl__pavement { height: 18px; margin-top: 40px; background: linear-gradient(to bottom, var(--color-2) 0 34%, var(--color-5) 34% 67%, var(--color-6) 67% 100%); }
  @media (max-width: 900px) {
    #buildings .bl__item { width: min(84vw, calc(var(--plot) * 10vw)); }
    #buildings .bl__item--head, #buildings .bl__item--end { width: 84vw; }
    #buildings .bl__photo { height: calc(var(--h) * .9svh); }
    #buildings .bl__plate { height: 214px; }
  }
}

@layer scenes {
  @media (prefers-reduced-motion: no-preference) {
    #buildings[data-walk] { padding: 0; }
    #buildings[data-walk] .bl__pin { height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 6svh; overflow: hidden; }
    #buildings[data-walk] .bl__track { flex-wrap: nowrap; width: max-content; }
    #buildings[data-walk] .bl__pavement { margin-top: 0; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
    #buildings[data-walk] .bl__pin { justify-content: center; padding-bottom: 0; }
  }
}

@layer sections {
  #scan { background: var(--color-2); color: var(--color-9); padding: var(--space-2) var(--space-1); }
  #scan .sc__grid { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); grid-template-areas: "head stage" "steps stage"; column-gap: 4vw; max-width: 1440px; margin: 0 auto; }
  #scan .sc__head { grid-area: head; display: grid; gap: 22px; align-content: start; padding-bottom: 10svh; }
  #scan .sc__head .m-text-5 { color: var(--color-1); }
  #scan .sc__stage { grid-area: stage; }
  #scan .sc__frame { position: sticky; top: 12svh; height: 76svh; }
  #scan .sc__photo, #scan .sc__smear { position: absolute; inset: 0 0 46px 0; }
  #scan .sc__photo .m-photo__img { object-position: 50% 62%; }
  #scan .sc__smear { overflow: hidden; clip-path: inset(0% 100% 0% 0%); }
  #scan .sc__smear img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform-origin: 0% 50%; transform: scaleX(24); }
  #scan .sc__line { position: absolute; top: -12px; bottom: 34px; left: 0; width: 3px; margin-left: -1px; background: var(--color-8); }
  #scan .sc__axis { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; border-top: 2px solid var(--color-1); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #scan .sc__tick { padding-top: 9px; color: var(--color-1); }
  #scan .sc__tick[data-lit] { color: var(--color-5); }
  #scan .sc__steps { grid-area: steps; display: grid; }
  #scan .sc__step { min-height: 40svh; padding: 20px 0 32px 24px; border-left: 3px solid var(--color-10); display: grid; gap: 10px; align-content: start; }
  #scan .sc__step[data-lit] { border-left-color: var(--color-5); }
  #scan .sc__time { color: var(--color-5); }
  #scan .sc__step p:last-child { max-width: 38ch; }
  @media (max-width: 900px) {
    #scan .sc__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "steps"; }
    #scan .sc__head { padding-bottom: 32px; }
    #scan .sc__stage { position: sticky; top: 0; z-index: 2; background: var(--color-2); padding: 10px 0 14px; }
    #scan .sc__frame { position: relative; top: 0; height: 38svh; }
    #scan .sc__photo, #scan .sc__smear { bottom: 40px; }
    #scan .sc__tick { font-size: 11px; }
    #scan .sc__step { min-height: 34svh; padding-top: 24px; }
  }
}

@layer sections {
  #colours { background: var(--color-1); }
  #colours .co__head { padding: var(--space-2) var(--space-1) 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 6vw; align-items: end; max-width: 1440px; margin: 0 auto; }
  #colours .co__band { position: relative; min-height: max(120px, 15svh); display: grid; align-items: center; }
  #colours .co__fill { position: absolute; inset: 0; transform-origin: 50% 0; background: var(--co-band); }
  #colours .co__label { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr); gap: 12px 3vw; align-items: baseline; padding: 26px var(--space-1); max-width: 1440px; width: 100%; margin: 0 auto; }
  #colours .co__label p { max-width: 50ch; }
  #colours .co__band--sand { --co-band: var(--color-5); color: var(--color-2); }
  #colours .co__band--brick { --co-band: var(--color-4); color: var(--color-9); }
  #colours .co__band--door { --co-band: var(--color-6); color: var(--color-9); }
  #colours .co__band--plaster { --co-band: var(--color-12); color: var(--color-2); }
  #colours .co__band--tram { --co-band: var(--color-7); color: var(--color-9); }
  #colours .co__band--night { --co-band: var(--color-2); color: var(--color-9); }
  #colours .co__band--night .co__fill { border-top: 6px solid var(--color-8); }
  @media (max-width: 900px) {
    #colours .co__head { grid-template-columns: minmax(0, 1fr); }
    #colours .co__label { grid-template-columns: minmax(0, 1fr); padding-block: 22px; }
  }
}

@layer sections {
  #faq { background: var(--color-1); padding: var(--space-2) var(--space-1); overflow-x: clip; }
  #faq .fq__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 6vw; max-width: 1300px; margin: 0 auto; align-items: start; }
  #faq .fq__head { display: grid; gap: 22px; justify-items: start; }
  #faq .fq__list { border-bottom: 2px solid var(--color-2); }
  #faq .fq__item { border-top: 2px solid var(--color-2); }
  #faq .fq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; }
  #faq .fq__item summary::-webkit-details-marker { display: none; }
  #faq .fq__icon { position: relative; flex: none; width: 22px; height: 22px; }
  #faq .fq__icon::before, #faq .fq__icon::after { content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 2px; background: currentColor; transition: transform .4s cubic-bezier(.7, 0, .2, 1); }
  #faq .fq__icon::after { transform: rotate(90deg); }
  #faq .fq__item[open] .fq__icon::after { transform: rotate(0deg) scaleX(.5); }
  @media (hover: hover) {
    #faq .fq__item summary:hover .fq__icon::before { transform: scaleX(1.25); }
  }
  #faq .fq__item p { padding: 0 48px 26px 0; max-width: 60ch; }
  @media (max-width: 900px) {
    #faq .fq__inner { grid-template-columns: minmax(0, 1fr); }
    #faq .fq__item p { padding-right: 0; }
  }
}

@layer sections {
  #contact { background: var(--color-2); color: var(--color-9); padding: var(--space-2) 0; overflow-x: clip; }
  #contact .ct__stage { display: grid; grid-template-columns: minmax(0, 22fr) minmax(0, 52fr) minmax(0, 22fr); gap: 2vw; align-items: stretch; }
  #contact .ct__slab { position: relative; overflow: hidden; }
  #contact .ct__slab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #contact .ct__slab--l img { object-position: 30% 50%; }
  #contact .ct__slab--r img { object-position: 82% 50%; }
  #contact .ct__form { display: grid; gap: 22px; align-content: start; }
  #contact .ct__form .m-text-5 { max-width: 44ch; }
  #contact .ct__form :focus-visible { outline-color: var(--color-2); }
  #contact .ct__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  #contact .ct__fields .ct__wide { grid-column: 1 / -1; }
  #contact .ct__status { padding: 14px 16px; background: var(--color-5); color: var(--color-2); font-weight: 600; }
  #contact .ct__details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 3vw; padding: 56px var(--space-1) 0; max-width: 1440px; margin: 0 auto; }
  #contact .ct__details dt { color: var(--color-5); margin-bottom: 8px; }
  #contact .ct__details dd { color: var(--color-9); }
  @media (max-width: 900px) {
    #contact .ct__stage { grid-template-columns: minmax(0, 9fr) minmax(0, 82fr) minmax(0, 9fr); gap: 0; }
    #contact .ct__fields { grid-template-columns: minmax(0, 1fr); }
    #contact .ct__details { grid-template-columns: minmax(0, 1fr); }
  }
}

@layer sections {
  #footer { background: var(--color-2); color: var(--color-9); padding: 0 0 36px; }
  #footer .ft__bands { display: grid; }
  #footer .ft__bands span { display: block; transform-origin: 50% 0; }
  #footer .ft__bands span:nth-child(1) { height: 22px; background: var(--color-5); }
  #footer .ft__bands span:nth-child(2) { height: 10px; background: var(--color-4); }
  #footer .ft__bands span:nth-child(3) { height: 16px; background: var(--color-6); }
  #footer .ft__bands span:nth-child(4) { height: 4px; background: var(--color-8); }
  #footer .ft__mark { display: block; padding: 40px var(--space-1) 0; font-family: var(--font-1); font-weight: 700; font-stretch: 75%; line-height: .82; letter-spacing: -.01em; font-size: min(34vw, calc((100vw - 2 * var(--space-1)) / (var(--len) * .385))); color: var(--color-1); }
  #footer .ft__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 28px 4vw; padding: 48px var(--space-1) 0; }
  #footer .ft__grid ul { display: grid; gap: 8px; }
  #footer .ft__grid h2 { color: var(--color-5); margin-bottom: 12px; }
  #footer .ft__legal { padding: 48px var(--space-1) 0; font-size: 14px; color: var(--color-1); }
  @media (max-width: 900px) {
    #footer .ft__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #footer .ft__grid > :first-child { grid-column: 1 / -1; }
  }
}

/* ===== A.Lemos: ajustes ===== */
@layer sections {
  #opening .op__img { object-position: 38% 72%; }
  #opening .op__floor .op__img { object-position: 40% 92%; }
  #navigation .nav__brand { font-size: 28px; gap: 12px; }
  #navigation .nav__mark { grid-template-columns: 4px 9px 4px; }
  #navigation .nav__mark span { background: var(--color-2); }
  #navigation .nav__mark span:nth-child(2) { background: var(--color-4); }
  #navigation .nav__brand small { font-family: var(--font-2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-10); align-self: flex-end; margin-bottom: 3px; }
  #opening .op__second .m-text { color: #e9e3d8; }

  /* larguras e alturas das peças (antes eram style="--plot; --h") */
  #buildings .bl__item.p1 { --plot: 6.4; --h: 50; }
  #buildings .bl__item.p2 { --plot: 4.2; --h: 60; }
  #buildings .bl__item.p3 { --plot: 6.6; --h: 46; }
  #buildings .bl__item.p4 { --plot: 4.4; --h: 56; }
  #buildings .bl__item.p5 { --plot: 5.6; --h: 52; }
  #buildings .bl__item.p6 { --plot: 4.2; --h: 58; }
  #buildings .bl__item.p7 { --plot: 6; --h: 48; }
  #buildings .bl__item.p8 { --plot: 5.2; --h: 54; }
  #buildings .bl__plate { height: 170px; }
  #buildings .bl__item--end .m-link { font-weight: 600; }

  #colours .co__label p.m-text-4 { opacity: .85; }
  #colours .co__band--sand, #colours .co__band--plaster { color: var(--color-2); }
  #colours .co__band--door { --co-band: var(--color-6); color: var(--color-9); }

  #contact .ct__fields select.m-field__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-2) 50%), linear-gradient(135deg, var(--color-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
  #contact .ct__form .ct__nota { font-size: 14px; color: var(--color-10); }
  #contact .ct__details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #contact .ct__details a { color: var(--color-9); }
  #contact .ct__status[data-erro] { background: #f1d3c6; }

  #footer .ft__mark { --len: 7; color: var(--color-5); }
  #footer .ft__legal a { color: inherit; }

  .barra-movel { display: none; }
  @media (max-width: 900px) {
    body { padding-bottom: 74px; }
    #contact .ct__details { grid-template-columns: minmax(0, 1fr); }
    .barra-movel { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--color-1); border-top: 2px solid var(--color-2); }
    .barra-movel a { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-2); font-weight: 600; text-decoration: none; border: 2px solid var(--color-2); color: var(--color-2); }
    .barra-movel a.barra-escura { background: var(--color-2); color: var(--color-9); }
    .barra-movel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  }

  /* páginas simples */
  .legal { max-width: 760px; margin: 0 auto; padding: 120px var(--space-1) 96px; }
  .legal h1 { margin: 18px 0 8px; }
  .legal h2 { margin-top: 34px; }
  .legal p { margin-top: 10px; }
  .legal a { text-decoration: underline; text-underline-offset: 3px; }
}
@layer sections {
  @media (max-width: 900px) {
    #opening .op__copy { bottom: calc(84px + env(safe-area-inset-bottom)); }
    #opening .op__block--a { padding-top: 22px; }
  }
}
@layer sections {
  #opening .op__sky { background: linear-gradient(to bottom, #cdbfa9, var(--color-1) 70%); }
  #opening .op__slab:not(.op__slab--gap) .op__img, #opening .op__floor .op__img { filter: saturate(1.45) contrast(1.08); }
}