:root {

  --bg: #11120f;

  --bg2: #181a16;

  --cream: #e9e6dd;

  --muted: #9b9b91;

  --gold: #bda078;

  --line: rgba(233, 230, 221, 0.18);

  --sans: "DM Sans", sans-serif;

  --display: "Manrope", sans-serif;

  --serif: "Playfair Display", serif;

}

* {

  box-sizing: border-box;

}

html {

  scroll-behavior: smooth;

  scroll-padding-top: 90px;

}

body {

  margin: 0;

  background: var(--bg);

  color: var(--cream);

  font-family: var(--sans);

  -webkit-font-smoothing: antialiased;

}

a {

  color: inherit;

  text-decoration: none;

}

button,

input,

textarea,

select {

  font: inherit;

}

.progress {

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 0;

  height: 2px;

  width: 0;

  background: var(--gold);

}

.header {

  height: 88px;

  padding: 0 5.2vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: absolute;

  z-index: 50;

  top: 0;

  left: 0;

  width: 100%;

  border-bottom: 1px solid rgba(255, 255, 255, 0.16);

}

.brand {

  display: flex;

  align-items: center;

  gap: 12px;

}

.brand-symbol {

  width: 37px;

  height: 37px;

  border: 1px solid var(--gold);

  display: grid;

  place-items: center;

  font: 500 17px var(--serif);

  position: relative;

  color: var(--gold);

}

.brand-symbol span {

  position: absolute;

  font-size: 11px;

  right: 4px;

  bottom: 3px;

}

.brand-word {

  font: 700 11px var(--display);

  letter-spacing: 0.16em;

}

.brand-word small {

  display: block;

  font: 500 8px var(--sans);

  letter-spacing: 0.34em;

  color: #aaa79e;

  margin-top: 4px;

}

.nav {

  display: flex;

  gap: 42px;

}

.nav a,

.header-cta {

  font-size: 10px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #e6e2d9;

  transition: color 0.25s;

}

.nav a:hover,

.header-cta:hover {

  color: var(--gold);

}

.header-cta span {

  color: var(--gold);

  margin-left: 12px;

  font-size: 16px;

}

.menu-toggle {

  display: none;

  background: none;

  border: 0;

}

.hero {

  height: min(940px, 100svh);

  min-height: 720px;

  position: relative;

  overflow: hidden;

  background: #222;

}

.hero-image {

  position: absolute;

  inset: 0;

  background: url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2400&q=90")

    center 52% / cover;

  transform: scale(1.06);

  animation: heroZoom 15s ease-out forwards;

}

.hero-shade {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(

      90deg,

      rgba(10, 12, 10, 0.91) 0%,

      rgba(10, 12, 10, 0.65) 42%,

      rgba(10, 12, 10, 0.12) 100%

    ),

    linear-gradient(0deg, rgba(10, 12, 10, 0.55), transparent 34%);

}

.hero-grid {

  position: absolute;

  inset: 0;

  opacity: 0.14;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);

  background-size: 100px 100px;

  mask-image: linear-gradient(90deg, black, transparent 85%);

}

.hero-content {

  position: absolute;

  left: 10.3%;

  top: 25%;

  max-width: 690px;

  z-index: 3;

}

.eyebrow {

  font-size: 9px;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: var(--gold);

  font-weight: 600;

}

.eyebrow-line {

  display: inline-block;

  width: 35px;

  height: 1px;

  background: var(--gold);

  vertical-align: middle;

  margin-right: 13px;

}

.hero h1 {

  font: 500 clamp(56px, 7.4vw, 112px)/0.99 var(--display);

  letter-spacing: -0.075em;

  margin: 32px 0 23px;

}

.hero h1 em,

.intro h2 em,

.manifesto h2 em,

.section-heading h2 em,

.blueprint-content h2 em,

.projects h2 em,

.numbers h2 em,

.contact h2 em {

  font-family: var(--serif);

  font-weight: 500;

  letter-spacing: -0.06em;

  color: var(--gold);

}

.hero-content > p {

  max-width: 410px;

  color: #c4c2b9;

  font-size: 13px;

  line-height: 1.9;

}

.hero-actions {

  display: flex;

  align-items: center;

  gap: 32px;

  margin-top: 35px;

}

.button {

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  padding: 17px 20px;

  min-width: 220px;

  border: 1px solid transparent;

  font-size: 9px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  cursor: pointer;

  transition:

    transform 0.3s,

    *background* 0.3s,

    color 0.3s;

}

.button:hover {

  transform: translateY(-4px);

}

.button span {

  font-size: 17px;

}

.button-light {

  background: var(--cream);

  color: #171813;

}

.button-light:hover {

  background: var(--gold);

}

.text-link {

  font-size: 9px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #e6e2d9;

}

.text-link span {

  color: var(--gold);

  font-size: 16px;

  margin-left: 10px;

}

.hero-blueprint {

  position: absolute;

  z-index: 2;

  width: min(39vw, 540px);

  right: 7.5%;

  top: 21%;

  opacity: 0.82;

  filter: drop-shadow(0 0 20px rgba(189, 160, 120, 0.14));

  animation: blueFloat 7s ease-in-out infinite;

}

.house-svg {

  width: 100%;

  overflow: visible;

}

.house-svg path,

.house-svg circle {

  vector-effect: non-scaling-stroke;

}

.blueprint-back {

  stroke: rgba(224, 211, 188, 0.25);

  stroke-width: 1;

  stroke-dasharray: 5 7;

}

.blueprint-front {

  stroke: rgba(220, 194, 154, 0.86);

  stroke-width: 1.3;

  stroke-dasharray: 800;

  stroke-dashoffset: 800;

  animation: draw 5s 1s ease forwards;

}

.blueprint-dims {

  stroke: rgba(220, 194, 154, 0.65);

  stroke-width: 0.8;

}

.blueprint-dots {

  fill: var(--gold);

  stroke: none;

}

.blueprint-label,

.blueprint-note {

  font-size: 8px;

  letter-spacing: 0.18em;

  color: #d6c8b0;

}

.blueprint-label span,

.blueprint-note span {

  color: #88877f;

  margin-left: 9px;

}

.blueprint-note {

  position: absolute;

}

.note-a {

  left: 4%;

  top: 43%;

}

.note-b {

  right: 4%;

  bottom: 13%;

}

.hero-bottom {

  position: absolute;

  z-index: 3;

  bottom: 30px;

  left: 5.2%;

  right: 5.2%;

  display: flex;

  justify-content: space-between;

  color: #c1bfb5;

  font-size: 8px;

  letter-spacing: 0.2em;

}

.scroll-indicator b {

  color: var(--gold);

  font-size: 15px;

  margin-left: 12px;

}

.hero-index {

  position: absolute;

  right: 5.2%;

  top: 50%;

  writing-mode: vertical-rl;

  font-size: 9px;

  letter-spacing: 0.2em;

  color: #e3d8c5;

}

.hero-index span {

  color: var(--gold);

  margin: 9px 0;

}

.section-pad {

  padding: 145px 10.3%;

}

.section-index {

  font-size: 8px;

  letter-spacing: 0.22em;

  color: var(--gold);

  white-space: nowrap;

}

.intro {

  display: grid;

  grid-template-columns: 1fr 2.1fr 0.55fr;

  gap: 4%;

  background: var(--cream);

  color: #1b1c18;

  min-height: 680px;

  align-items: start;

}

.intro .section-index {

  color: #887454;

}

.intro-main {

  padding-top: 45px;

}

.overline {

  font-size: 10px;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: #827e73;

}

.intro h2 {

  font: 500 clamp(45px, 6vw, 84px)/1.05 var(--display);

  letter-spacing: -0.075em;

  margin: 25px 0 34px;

}

.intro h2 em {

  color: #927b58;

}

.intro-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  max-width: 670px;

}

.intro-bottom p {

  max-width: 480px;

  color: #69685f;

  font-size: 13px;

  line-height: 1.95;

}

.circle-link {

  width: 52px;

  height: 52px;

  border: 1px solid #a99b83;

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-size: 20px;

  color: #897653;

  transition: 0.3s;

}

.circle-link:hover {

  background: #1a1b17;

  color: white;

  transform: rotate(45deg);

}

.intro-aside {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-top: 180px;

}

.vertical-rule {

  height: 105px;

  width: 1px;

  background: #b5aa96;

}

.intro-aside span:last-child {

  font-size: 7px;

  line-height: 2.1;

  letter-spacing: 0.16em;

  color: #77756c;

  writing-mode: vertical-rl;

}

.manifesto {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  min-height: 760px;

  background: #191b17;

}

.manifesto-image {

  min-height: 760px;

  position: relative;

  background:

    linear-gradient(0deg, rgba(13, 14, 12, 0.15), transparent),

    url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1500&q=85")

      center/cover;

}

.image-tag {

  position: absolute;

  bottom: 35px;

  left: 10%;

  font-size: 8px;

  letter-spacing: 0.2em;

  color: #f0e9dc;

}

.manifesto-copy {

  padding: 110px 12% 90px 13%;

  position: relative;

}

.manifesto-copy .section-index {

  margin-bottom: 90px;

}

.manifesto-copy .eyebrow {

  font-size: 8px;

}

.manifesto h2 {

  font: 500 clamp(44px, 5vw, 72px)/1.06 var(--display);

  letter-spacing: -0.07em;

  margin: 27px 0;

}

.manifesto h2 em {

  display: inline-block;

}

.manifesto-copy > p {

  max-width: 400px;

  color: #a7a69b;

  font-size: 12px;

  line-height: 2;

  margin-top: 32px;

}

.manifesto-stamp {

  position: absolute;

  right: 12%;

  bottom: 65px;

  width: 100px;

  height: 100px;

  border: 1px solid rgba(189, 160, 120, 0.5);

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: var(--gold);

}

.manifesto-stamp span {

  font: italic 29px var(--serif);

}

.manifesto-stamp small {

  font-size: 6px;

  letter-spacing: 0.15em;

  text-align: center;

  line-height: 1.6;

}

.services {

  background: #e9e6dd;

  color: #191a16;

}

.section-heading {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 50px;

  margin-bottom: 65px;

}

.section-heading .section-index,

.process .section-index,

.projects .section-index {

  color: #8d7859;

  margin-bottom: 36px;

}

.section-heading .eyebrow,

.projects .eyebrow {

  color: #8c785a;

}

.section-heading h2,

.projects h2 {

  font: 500 clamp(48px, 6vw, 84px)/1.01 var(--display);

  letter-spacing: -0.075em;

  margin: 22px 0 0;

}

.section-heading h2 em,

.projects h2 em {

  color: #927b58;

}

.heading-note {

  max-width: 310px;

  color: #737168;

  font-size: 12px;

  line-height: 1.9;

  margin-bottom: 7px;

}

.service-list {

  border-top: 1px solid #c9c4b8;

}

.service-item {

  min-height: 125px;

  border-bottom: 1px solid #c9c4b8;

  display: grid;

  grid-template-columns: 80px 1fr 40px;

  align-items: center;

  position: relative;

  overflow: hidden;

  padding: 20px 15px;

  transition: padding 0.4s;

}

.service-item:before {

  content: "";

  position: absolute;

  inset: 0;

  background: #d9d3c6;

  transform: translateY(101%);

  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);

}

.service-item:hover:before {

  transform: translateY(0);

}

.service-item:hover {

  padding-left: 30px;

}

.service-no,

.service-item h3,

.service-item p,

.service-arrow,

.service-hover {

  position: relative;

  z-index: 1;

}

.service-no {

  font: italic 16px var(--serif);

  color: #9b835d;

}

.service-item h3 {

  font: 500 clamp(20px, 2.6vw, 34px) var(--display);

  letter-spacing: -0.04em;

  margin: 0 0 7px;

}

.service-item p {

  font-size: 11px;

  color: #77756b;

  margin: 0;

}

.service-arrow {

  font-size: 22px;

  color: #927b58;

}

.service-hover {

  position: absolute;

  right: 80px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 7px;

  letter-spacing: 0.2em;

  color: #95805d;

  opacity: 0;

  transition: 0.3s;

}

.service-item:hover .service-hover {

  opacity: 1;

}

.blueprint-section {

  min-height: 760px;

  position: relative;

  overflow: hidden;

  background: #141712;

  display: flex;

  align-items: center;

  padding: 100px 10.3%;

}

.blueprint-bg {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  background-size: 70px 70px;

  opacity: 0.6;

}

.blueprint-content {

  position: relative;

  z-index: 2;

  max-width: 480px;

}

.blueprint-content .section-index {

  margin-bottom: 55px;

}

.blueprint-content h2 {

  font: 500 clamp(48px, 6vw, 82px)/1.02 var(--display);

  letter-spacing: -0.075em;

  margin: 25px 0;

}

.blueprint-content p {

  max-width: 370px;

  color: #a7a99e;

  font-size: 12px;

  line-height: 2;

  margin: 25px 0 30px;

}

.button-outline {

  border-color: rgba(233, 230, 221, 0.42);

  color: var(--cream);

  background: transparent;

}

.button-outline:hover {

  background: var(--cream);

  color: #171813;

}

.blueprint-technical {

  position: absolute;

  width: min(54vw, 720px);

  right: 2%;

  top: 50%;

  transform: translateY(-50%);

  opacity: 0.72;

}

.technical-lines {

  stroke: #bda078;

  stroke-width: 1;

  stroke-dasharray: 1200;

  stroke-dashoffset: 1200;

  animation: draw 7s 1s ease forwards;

}

.technical-dim {

  stroke: #e0d3bc;

  stroke-width: 0.7;

}

.tech-label {

  position: absolute;

  font-size: 7px;

  letter-spacing: 0.2em;

  color: #a99777;

}

.tech-one {

  top: 15%;

  left: 10%;

}

.tech-two {

  bottom: 18%;

  right: 7%;

}

.tech-three {

  top: 48%;

  right: 3%;

  writing-mode: vertical-rl;

}

.process {

  background: #1a1c17;

}

.process .section-heading {

  margin-bottom: 90px;

}

.process .section-heading h2 em {

  color: var(--gold);

}

.process .heading-note {

  color: #aaa99f;

}

.process-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  border-top: 1px solid var(--line);

}

.process-step {

  padding: 28px 24px 20px 0;

  border-right: 1px solid var(--line);

  min-height: 210px;

}

.process-step:not(:first-child) {

  padding-left: 24px;

}

.process-step:last-child {

  border: 0;

}

.process-step > span {

  font: italic 17px var(--serif);

  color: var(--gold);

}

.process-step h3 {

  font: 500 21px var(--display);

  margin: 45px 0 10px;

}

.process-step p {

  font-size: 11px;

  line-height: 1.8;

  color: #a5a69b;

  max-width: 210px;

}

.projects {

  padding: 145px 10.3%;

  background: #e9e6dd;

  color: #191a16;

}

.projects-top {

  display: flex;

  justify-content: space-between;

  align-items: end;

  margin-bottom: 60px;

}

.projects-top p {

  max-width: 300px;

  color: #77756b;

  font-size: 11px;

  line-height: 1.9;

}

.project-mosaic {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  grid-template-rows: 330px 330px;

  gap: 18px;

}

.project-mosaic figure {

  margin: 0;

  position: relative;

  overflow: hidden;

  background: #bcb9af;

}

.project-mosaic figure:after {

  content: "";

  position: absolute;

  inset: 35% 0 0;

  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent);

}

.project-mosaic img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);

  filter: saturate(0.78);

}

.project-mosaic figure:hover img {

  transform: scale(1.06);

}

.project-large {

  grid-row: span 2;

}

.project-wide {

  grid-column: span 2;

}

.project-mosaic figcaption {

  position: absolute;

  z-index: 2;

  left: 30px;

  bottom: 27px;

  color: white;

  display: flex;

  flex-direction: column;

  gap: 9px;

}

.project-mosaic figcaption span {

  font-size: 7px;

  letter-spacing: 0.2em;

  color: #ddc69f;

}

.project-mosaic figcaption b {

  font: 500 21px var(--display);

}

.numbers {

  padding: 105px 10.3%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10%;

  align-items: end;

  background: #bca98c;

  color: #1b1c18;

}

.numbers .section-index {

  color: #4c493f;

}

.numbers h2 {

  font: 500 clamp(43px, 5.5vw, 75px)/1.03 var(--display);

  letter-spacing: -0.075em;

  margin: 30px 0 0;

}

.numbers h2 em {

  color: #fff4df;

}

.numbers-copy p {

  font-size: 13px;

  line-height: 2;

  color: #46453d;

  max-width: 430px;

}

.under-link {

  display: inline-block;

  border-bottom: 1px solid #77705f;

  padding: 14px 0;

  font-size: 9px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  margin-top: 20px;

}

.under-link span {

  margin-left: 20px;

  font-size: 16px;

}

.contact {

  position: relative;

  overflow: hidden;

  padding: 130px 10.3% 120px;

  background: #11130f;

}

.contact-backdrop {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg, rgba(12, 14, 11, 0.96), rgba(12, 14, 11, 0.77)),

    url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2000&q=80")

      center/cover;

  opacity: 0.8;

}

.contact-inner {

  position: relative;

  z-index: 2;

  max-width: 850px;

}

.contact-inner .section-index {

  margin-bottom: 50px;

}

.contact h2 {

  font: 500 clamp(55px, 7vw, 98px)/0.98 var(--display);

  letter-spacing: -0.08em;

  margin: 25px 0;

}

.contact h2 em {

  color: var(--gold);

}

.contact-inner > p {

  max-width: 390px;

  color: #c0beb4;

  font-size: 12px;

  line-height: 1.9;

}

.contact-form {

  margin-top: 50px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 25px 30px;

  max-width: 700px;

}

.field {

  display: flex;

  flex-direction: column;

  gap: 11px;

}

.field-wide {

  grid-column: span 2;

}

.field label {

  font-size: 8px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--gold);

}

.field input,

.field textarea,

.field select {

  border: 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  background: transparent;

  color: #f1eee6;

  padding: 10px 0;

  outline: 0;

  font-size: 12px;

  resize: vertical;

}

.field input:focus,

.field textarea:focus,

.field select:focus {

  border-color: var(--gold);

}

.field input::placeholder,

.field textarea::placeholder {

  color: #8d8d84;

}

.field select option {

  background: #171a15;

  color: white;

}

.contact-form button {

  grid-column: span 2;

  justify-self: start;

  margin-top: 10px;

}

.footer {

  padding: 45px 5.2%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  background: #e9e6dd;

  color: #1b1c18;

}

.footer .brand-word small {

  color: #6f6d65;

}

.footer-mid {

  display: flex;

  flex-direction: column;

  gap: 9px;

  font-size: 10px;

  color: #55564e;

}

.footer-end {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 12px;

}

.footer-end > a {

  font-size: 9px;

  letter-spacing: 0.16em;

  color: #8c7654;

}

.footer-end small {

  font-size: 7px;

  letter-spacing: 0.12em;

  color: #77766d;

}

.floating-whatsapp {

  position: fixed;

  z-index: 40;

  right: 25px;

  bottom: 25px;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: var(--gold);

  color: #161712;

  display: grid;

  place-items: center;

  font-size: 20px;

  box-shadow: 0 8px 30px #0005;

  transition: 0.3s;

}

.floating-whatsapp:hover {

  transform: translateY(-5px) rotate(45deg);

}

.reveal {

  opacity: 0;

  transform: translateY(28px);

  transition:

    opacity 0.9s ease,

    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);

}

.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}

.service-item:nth-child(2),

.process-step:nth-child(2) {

  transition-delay: 0.08s;

}

.service-item:nth-child(3),

.process-step:nth-child(3) {

  transition-delay: 0.16s;

}

.service-item:nth-child(4),

.process-step:nth-child(4) {

  transition-delay: 0.24s;

}

@keyframes heroZoom {

  to {

    transform: scale(1);

  }

}

@keyframes blueFloat {

  0%,

  100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-16px);

  }

}

@keyframes draw {

  to {

    stroke-dashoffset: 0;

  }

}

@media (max-width: 1000px) {

  .hero-content {

    left: 7%;

    top: 25%;

  }

  .hero-blueprint {

    right: 1%;

    width: 43vw;

    opacity: 0.55;

  }

  .section-pad,

  .projects {

    padding-left: 7%;

    padding-right: 7%;

  }

  .intro {

    grid-template-columns: 0.6fr 2fr;

  }

  .intro-aside {

    display: none;

  }

  .manifesto-copy {

    padding: 90px 9%;

  }

  .blueprint-section {

    padding-left: 7%;

  }

  .blueprint-technical {

    right: -14%;

    opacity: 0.42;

  }

  .contact {

    padding-left: 7%;

    padding-right: 7%;

  }

}

@media (max-width: 700px) {

  .header {

    height: 74px;

    padding: 0 22px;

  }

  .nav {

    display: none;

    position: absolute;

    top: 74px;

    left: 0;

    right: 0;

    background: #141611;

    padding: 25px;

    flex-direction: column;

    gap: 23px;

    border-bottom: 1px solid var(--line);

  }

  .nav.open {

    display: flex;

  }

  .header-cta {

    display: none;

  }

  .menu-toggle {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 10px;

  }

  .menu-toggle i {

    display: block;

    width: 24px;

    height: 1px;

    background: var(--cream);

  }

  .hero {

    min-height: 780px;

    height: 100svh;

  }

  .hero-image {

    background-position: 58% center;

  }

  .hero-shade {

    background:

      linear-gradient(90deg, rgba(10, 12, 10, 0.9), rgba(10, 12, 10, 0.45)),

      linear-gradient(0deg, rgba(10, 12, 10, 0.6), transparent 50%);

  }

  .hero-content {

    left: 7%;

    right: 7%;

    top: 22%;

  }

  .hero h1 {

    font-size: clamp(54px, 13vw, 82px);

  }

  .hero-content > p {

    font-size: 12px;

    max-width: 340px;

  }

  .hero-actions {

    gap: 20px;

    flex-wrap: wrap;

  }

  .button {

    min-width: 195px;

    padding: 15px;

  }

  .hero-blueprint {

    width: 62vw;

    right: -10%;

    top: 54%;

    opacity: 0.42;

  }

  .hero-bottom {

    left: 7%;

    right: 7%;

    bottom: 22px;

    font-size: 6px;

  }

  .hero-bottom > span:last-child,

  .hero-index {

    display: none;

  }

  .section-pad,

  .projects {

    padding: 90px 7%;

  }

  .intro {

    display: block;

    min-height: 0;

  }

  .intro-main {

    padding-top: 60px;

  }

  .intro h2 {

    font-size: clamp(43px, 11vw, 66px);

  }

  .intro-bottom {

    align-items: flex-end;

    gap: 20px;

  }

  .intro-bottom p {

    font-size: 12px;

  }

  .circle-link {

    flex: 0 0 48px;

  }

  .manifesto {

    display: flex;

    flex-direction: column;

  }

  .manifesto-image {

    min-height: 390px;

  }

  .manifesto-copy {

    padding: 75px 7% 150px;

  }

  .manifesto-copy .section-index {

    margin-bottom: 55px;

  }

  .manifesto h2 {

    font-size: 58px;

  }

  .manifesto-stamp {

    bottom: 30px;

    right: 8%;

    width: 82px;

    height: 82px;

  }

  .section-heading,

  .projects-top {

    display: block;

    margin-bottom: 45px;

  }

  .section-heading h2,

  .projects h2 {

    font-size: 58px;

  }

  .heading-note,

  .projects-top p {

    margin-top: 25px;

  }

  .service-item {

    grid-template-columns: 43px 1fr 25px;

    min-height: 112px;

    padding: 18px 4px;

  }

  .service-item h3 {

    font-size: 21px;

  }

  .service-item p {

    font-size: 10px;

    max-width: 270px;

    line-height: 1.6;

  }

  .service-hover {

    display: none;

  }

  .blueprint-section {

    min-height: 780px;

    padding: 80px 7%;

    align-items: flex-start;

  }

  .blueprint-content {

    max-width: 100%;

  }

  .blueprint-content .section-index {

    margin-bottom: 45px;

  }

  .blueprint-content h2 {

    font-size: 59px;

  }

  .blueprint-technical {

    width: 115%;

    right: -25%;

    top: 65%;

    opacity: 0.32;

  }

  .tech-label {

    font-size: 6px;

  }

  .process {

    padding-top: 90px;

    padding-bottom: 90px;

  }

  .process .section-heading {

    margin-bottom: 55px;

  }

  .process-grid {

    grid-template-columns: 1fr 1fr;

  }

  .process-step {

    min-height: 190px;

    padding: 22px 12px 15px 0;

  }

  .process-step:not(:first-child) {

    padding-left: 14px;

  }

  .process-step:nth-child(2) {

    border-right: 0;

  }

  .process-step:nth-child(3),

  .process-step:nth-child(4) {

    border-top: 1px solid var(--line);

  }

  .process-step h3 {

    margin-top: 34px;

    font-size: 18px;

  }

  .process-step p {

    font-size: 10px;

  }

  .projects {

    padding-top: 90px;

    padding-bottom: 90px;

  }

  .project-mosaic {

    grid-template-columns: 1fr;

    grid-template-rows: 380px 280px 280px;

    gap: 12px;

  }

  .project-large {

    grid-row: auto;

  }

  .project-wide {

    grid-column: auto;

  }

  .project-mosaic figcaption {

    left: 20px;

    bottom: 20px;

  }

  .project-mosaic figcaption b {

    font-size: 18px;

  }

  .numbers {

    padding: 80px 7%;

    grid-template-columns: 1fr;

    gap: 25px;

  }

  .numbers h2 {

    font-size: 57px;

  }

  .contact {

    padding: 90px 7%;

  }

  .contact-inner .section-index {

    line-height: 1.8;

    margin-bottom: 35px;

  }

  .contact h2 {

    font-size: clamp(53px, 13vw, 78px);

  }

  .contact-form {

    grid-template-columns: 1fr;

    gap: 22px;

  }

  .field-wide,

  .contact-form button {

    grid-column: span 1;

  }

  .footer {

    padding: 35px 7%;

    align-items: flex-start;

    flex-direction: column;

  }

  .footer-end {

    align-items: flex-start;

  }

  .footer-mid {

    margin: 10px 0;

  }

  .floating-whatsapp {

    right: 16px;

    bottom: 16px;

    width: 44px;

    height: 44px;

  }

}

@media (prefers-reduced-motion: reduce) {

  *,

  *:before,

  *:after {

    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

  .reveal {

    opacity: 1;

    transform: none;

  }

}



/* ─── PREMIUM MOTION SYSTEM / V2 ─── */

:root {

  --gold-hi: #d7bd91;

  --ink: #0c0e0c;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);

}

body {

  overflow-x: hidden;

}

body.loading {

  overflow: hidden;

}

.preloader {

  position: fixed;

  z-index: 2000;

  inset: 0;

  background: #0c0e0c;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 22px;

  transition:

    transform 1.1s var(--ease),

    visibility 1.1s;

}

.preloader.done {

  transform: translateY(-102%);

  visibility: hidden;

}

.loader-mark {

  font: italic 54px var(--serif);

  color: var(--gold);

  letter-spacing: -0.1em;

}

.loader-line {

  height: 1px;

  width: 150px;

  background: #34352f;

  overflow: hidden;

}

.loader-line span {

  display: block;

  width: 100%;

  height: 100%;

  background: var(--gold);

  transform: translateX(-100%);

  animation: loaderSweep 1.3s 0.15s var(--ease) forwards;

}

.loader-caption {

  font-size: 7px;

  letter-spacing: 0.32em;

  color: #aaa79e;

}

.cursor-dot,

.cursor-ring {

  position: fixed;

  z-index: 1500;

  left: 0;

  top: 0;

  pointer-events: none;

  border-radius: 50%;

  opacity: 0;

  transform: translate(-50%, -50%);

}

.cursor-dot {

  width: 5px;

  height: 5px;

  background: var(--gold-hi);

}

.cursor-ring {

  width: 34px;

  height: 34px;

  border: 1px solid rgba(215, 189, 145, 0.6);

  transition:

    width 0.3s,

    height 0.3s,

    *background* 0.3s,

    border 0.3s;

}

.cursor-ring.active {

  width: 78px;

  height: 78px;

  background: rgba(215, 189, 145, 0.12);

  border-color: transparent;

}

.hero {

  isolation: isolate;

}

.hero-image {

  will-change: transform;

  animation: heroZoom 18s var(--ease) forwards;

}

.hero-shade {

  background:

    linear-gradient(

      90deg,

      rgba(8, 10, 8, 0.94) 0%,

      rgba(8, 10, 8, 0.69) 39%,

      rgba(8, 10, 8, 0.1) 100%

    ),

    linear-gradient(0deg, rgba(8, 10, 8, 0.68), transparent 38%);

}

.hero-content {

  top: 24%;

  max-width: 760px;

}

.hero h1 {

  font-size: clamp(64px, 8.3vw, 128px);

  line-height: 0.91;

  letter-spacing: -0.09em;

}

.hero h1 em {

  display: inline-block;

  position: relative;

}

.hero h1 em:after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -0.08em;

  height: 1px;

  background: var(--gold);

  transform: scaleX(0);

  transform-origin: left;

  animation: lineIn 1.1s 1.1s var(--ease) forwards;

}

.hero-coordinate {

  position: absolute;

  right: 5.2%;

  top: 118px;

  z-index: 3;

  font-size: 8px;

  letter-spacing: 0.18em;

  color: #e2d6c2;

  text-align: right;

}

.hero-coordinate span {

  display: block;

  color: #a9a79c;

  margin-top: 7px;

  font-size: 7px;

}

.hero-orbit {

  position: absolute;

  right: 17%;

  bottom: 17%;

  width: 100px;

  height: 100px;

  border: 1px solid rgba(215, 189, 145, 0.25);

  border-radius: 50%;

  z-index: 3;

  display: grid;

  place-items: center;

  color: var(--gold);

  font: italic 25px var(--serif);

  animation: orbitFloat 8s ease-in-out infinite;

}

.hero-orbit:before,

.hero-orbit:after {

  content: "";

  position: absolute;

  border: 1px solid rgba(215, 189, 145, 0.18);

  border-radius: 50%;

  inset: -12px;

}

.hero-orbit:after {

  inset: -25px;

  border-style: dashed;

  animation: spin 30s linear infinite;

}

.hero-orbit i {

  position: absolute;

  width: 5px;

  height: 5px;

  background: var(--gold);

  border-radius: 50%;

  right: 5px;

  top: 15px;

  box-shadow: 0 0 16px var(--gold);

}

.hero-grain {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0.12;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");

}

.hero-content .eyebrow,

.hero-content h1,

.hero-content > p,

.hero-actions {

  animation: heroTextIn 1s var(--ease) both;

}

.hero-content h1 {

  animation-delay: 0.12s;

}

.hero-content > p {

  animation-delay: 0.25s;

}

.hero-actions {

  animation-delay: 0.36s;

}

.marquee-band {

  height: 76px;

  background: var(--gold);

  color: #171813;

  overflow: hidden;

  display: flex;

  align-items: center;

  transform: rotate(-1.2deg) scale(1.03);

  position: relative;

  z-index: 5;

  margin: 0 0 -4px;

}

.marquee-track {

  display: flex;

  align-items: center;

  gap: 34px;

  white-space: nowrap;

  min-width: max-content;

  animation: marquee 32s linear infinite;

  font: 600 11px var(--display);

  letter-spacing: 0.22em;

}

.marquee-track b {

  font-size: 18px;

  font-weight: 400;

}

.architecture-lab {

  min-height: 790px;

  background: #11140f;

  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  align-items: center;

  padding: 115px 7.5%;

  gap: 4%;

  position: relative;

  overflow: hidden;

}

.architecture-lab:before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  background-size: 58px 58px;

  mask-image: linear-gradient(90deg, transparent, #000 35%, #000);

}

.lab-copy {

  position: relative;

  z-index: 2;

  padding-left: 4%;

}

.lab-copy .section-index {

  margin-bottom: 65px;

}

.lab-copy h2 {

  font: 500 clamp(55px, 6.2vw, 88px)/0.98 var(--display);

  letter-spacing: -0.085em;

  margin: 25px 0;

}

.lab-copy h2 em {

  font-family: var(--serif);

  font-weight: 500;

  color: var(--gold);

}

.lab-copy > p {

  font-size: 12px;

  line-height: 2;

  color: #a9aa9f;

  max-width: 360px;

}

.lab-legend {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  margin-top: 48px;

}

.lab-legend span {

  font-size: 7px;

  letter-spacing: 0.15em;

  color: #c5c0b4;

  display: flex;

  align-items: center;

  gap: 8px;

}

.lab-legend i {

  display: inline-block;

  width: 17px;

  height: 1px;

  background: var(--gold);

}

.lab-legend .legend-frame {

  background: #e8e2d5;

  height: 5px;

  width: 5px;

  border-radius: 50%;

}

.lab-legend .legend-plane {

  background: transparent;

  border: 1px dashed var(--gold);

  height: 9px;

  width: 9px;

}

.lab-visual {

  position: relative;

  z-index: 1;

  min-height: 580px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.lab-visual:before {

  content: "";

  position: absolute;

  width: 72%;

  aspect-ratio: 1;

  border: 1px solid rgba(215, 189, 145, 0.12);

  border-radius: 50%;

  box-shadow:

    0 0 0 45px rgba(215, 189, 145, 0.025),

    0 0 0 90px rgba(215, 189, 145, 0.018);

}

.lab-topline {

  position: absolute;

  top: 0;

  left: 5%;

  right: 5%;

  display: flex;

  justify-content: space-between;

  color: #9d9b8f;

  font-size: 7px;

  letter-spacing: 0.2em;

}

.building-svg {

  width: 100%;

  max-width: 760px;

  overflow: visible;

  filter: drop-shadow(0 25px 30px rgba(0, 0, 0, 0.2));

  animation: buildingLevitate 7s ease-in-out infinite;

}

.building-svg path {

  vector-effect: non-scaling-stroke;

}

.building-shadow {

  fill: #000;

  opacity: 0.25;

  filter: blur(9px);

}

.building-base path {

  fill: url(#slabFill);

  stroke: rgba(215, 189, 145, 0.65);

  stroke-width: 1.1;

  stroke-dasharray: 1100;

  stroke-dashoffset: 1100;

}

.building-columns path {

  stroke: #e0c79f;

  stroke-width: 2;

  fill: none;

  stroke-dasharray: 800;

  stroke-dashoffset: 800;

}

.building-walls path {

  fill: url(#wallFill);

  stroke: rgba(215, 189, 145, 0.8);

  stroke-width: 1.2;

  stroke-dasharray: 1000;

  stroke-dashoffset: 1000;

}

.building-openings path {

  fill: rgba(215, 189, 145, 0.08);

  stroke: rgba(238, 223, 196, 0.7);

  stroke-width: 1;

}

.building-roof path {

  fill: rgba(215, 189, 145, 0.13);

  stroke: #d7bd91;

  stroke-width: 1.3;

  stroke-dasharray: 900;

  stroke-dashoffset: 900;

}

.building-dimensions path {

  stroke: rgba(215, 189, 145, 0.5);

  stroke-width: 0.8;

  fill: none;

  stroke-dasharray: 3 5;

}

.architecture-lab.visible .building-base path,

.architecture-lab.visible .building-columns path,

.architecture-lab.visible .building-walls path,

.architecture-lab.visible .building-roof path {

  animation: drawStructure 2.6s var(--ease) forwards;

}

.architecture-lab.visible .building-columns path {

  animation-delay: 0.35s;

}

.architecture-lab.visible .building-walls path {

  animation-delay: 0.65s;

}

.architecture-lab.visible .building-roof path {

  animation-delay: 1s;

}

.lab-callout {

  position: absolute;

  font-size: 7px;

  letter-spacing: 0.15em;

  color: #d4c4a7;

  padding: 9px 12px;

  border: 1px solid rgba(215, 189, 145, 0.25);

  background: rgba(16, 19, 14, 0.68);

  backdrop-filter: blur(8px);

  animation: calloutPulse 4s ease-in-out infinite;

}

.lab-callout span {

  color: var(--gold);

  margin-right: 8px;

}

.callout-a {

  left: 2%;

  top: 37%;

}

.callout-b {

  right: 0;

  top: 52%;

  animation-delay: 1s;

}

.callout-c {

  left: 16%;

  bottom: 8%;

  animation-delay: 2s;

}

.lab-crosshair {

  position: absolute;

  right: 13%;

  top: 17%;

  font-size: 18px;

  color: var(--gold);

  opacity: 0.6;

}

.image-card {

  cursor: none;

}

.image-card img {

  transform: scale(1.04);

  transition:

    transform 1.4s var(--ease),

    filter 1s;

}

.image-card:hover img {

  transform: scale(1.12);

  filter: saturate(1.05);

}

.image-card:before {

  content: "";

  position: absolute;

  z-index: 1;

  inset: 0;

  border: 1px solid rgba(255, 255, 255, 0);

  transition:

    inset 0.6s,

    border 0.6s;

  pointer-events: none;

}

.image-card:hover:before {

  inset: 15px;

  border-color: rgba(255, 255, 255, 0.5);

}

.project-mosaic figure {

  isolation: isolate;

}

.project-mosaic figure:after {

  z-index: 1;

}

.project-mosaic figcaption {

  transition: transform 0.6s var(--ease);

}

.project-mosaic figure:hover figcaption {

  transform: translateY(-8px);

}

.section-index {

  position: relative;

}

.section-index:after {

  content: "";

  display: inline-block;

  vertical-align: middle;

  width: 32px;

  height: 1px;

  background: currentColor;

  margin-left: 12px;

  opacity: 0.55;

}

.reveal {

  transition:

    opacity 1s var(--ease),

    transform 1s var(--ease),

    clip-path 1.2s var(--ease);

}

.architecture-lab .reveal {

  transform: translateY(35px);

}

.architecture-lab .reveal.visible {

  transform: translateY(0);

}

.button {

  position: relative;

  overflow: hidden;

}

.button:after {

  content: "";

  position: absolute;

  inset: 0;

  background: var(--gold);

  transform: translateX(-102%);

  transition: transform 0.55s var(--ease);

  z-index: 0;

}

.button:hover:after {

  transform: translateX(0);

}

.button > *,

.button {

  isolation: isolate;

}

.button span {

  position: relative;

  z-index: 1;

}

.button-light:hover {

  color: #171813;

}

.header {

  backdrop-filter: blur(8px);

  background: linear-gradient(180deg, rgba(10, 12, 10, 0.24), transparent);

}

.floating-whatsapp {

  box-shadow:

    0 0 0 7px rgba(189, 160, 120, 0.08),

    0 8px 30px #0005;

}

.floating-whatsapp:before {

  content: "";

  position: absolute;

  inset: -7px;

  border: 1px solid rgba(189, 160, 120, 0.45);

  border-radius: 50%;

  animation: ringPulse 2.8s ease-out infinite;

}

.contact {

  isolation: isolate;

}

.contact-backdrop {

  transform: scale(1.05);

  transition: transform 8s linear;

}

.contact:hover .contact-backdrop {

  transform: scale(1);

}

@keyframes loaderSweep {

  to {

    transform: translateX(0);

  }

}

@keyframes heroTextIn {

  from {

    opacity: 0;

    transform: translateY(32px);

    filter: blur(8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

    filter: blur(0);

  }

}

@keyframes lineIn {

  to {

    transform: scaleX(1);

  }

}

@keyframes orbitFloat {

  0%,

  100% {

    transform: translateY(0) rotate(-7deg);

  }

  50% {

    transform: translateY(-15px) rotate(7deg);

  }

}

@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}

@keyframes marquee {

  to {

    transform: translateX(-50%);

  }

}

@keyframes drawStructure {

  to {

    stroke-dashoffset: 0;

  }

}

@keyframes buildingLevitate {

  0%,

  100% {

    transform: translateY(0) rotateX(0);

  }

  50% {

    transform: translateY(-12px) rotateX(1deg);

  }

}

@keyframes calloutPulse {

  0%,

  100% {

    opacity: 0.65;

    transform: translateY(0);

  }

  50% {

    opacity: 1;

    transform: translateY(-5px);

  }

}

@keyframes ringPulse {

  0% {

    transform: scale(0.9);

    opacity: 0.7;

  }

  100% {

    transform: scale(1.45);

    opacity: 0;

  }

}

@media (max-width: 900px) {

  .architecture-lab {

    grid-template-columns: 1fr;

    padding: 90px 7%;

    gap: 10px;

  }

  .lab-copy {

    padding-left: 0;

  }

  .lab-copy .section-index {

    margin-bottom: 38px;

  }

  .lab-visual {

    min-height: 500px;

  }

  .hero-coordinate {

    right: 7%;

    top: 95px;

  }

  .hero-orbit {

    right: 12%;

    bottom: 12%;

  }

}

@media (max-width: 700px) {

  .cursor-dot,

  .cursor-ring {

    display: none;

  }

  .hero-coordinate {

    top: 91px;

    font-size: 6px;

  }

  .hero-orbit {

    width: 68px;

    height: 68px;

    right: 8%;

    bottom: 18%;

    font-size: 18px;

  }

  .hero h1 {

    font-size: clamp(58px, 14vw, 88px);

  }

  .marquee-band {

    height: 58px;

  }

  .marquee-track {

    font-size: 9px;

    gap: 22px;

  }

  .architecture-lab {

    padding: 85px 7% 70px;

    min-height: 0;

  }

  .lab-copy h2 {

    font-size: 62px;

  }

  .lab-visual {

    min-height: 360px;

    margin: 5px -5% 0;

  }

  .lab-topline {

    font-size: 6px;

  }

  .lab-callout {

    font-size: 5px;

    padding: 6px 8px;

  }

  .callout-a {

    left: 0;

    top: 34%;

  }

  .callout-b {

    right: 0;

    top: 54%;

  }

  .callout-c {

    left: 8%;

    bottom: 2%;

  }

  .lab-legend {

    gap: 12px;

    margin-top: 30px;

  }

  .building-svg {

    width: 112%;

  }

}

@media (prefers-reduced-motion: reduce) {

  .preloader {

    display: none;

  }

  body.loading {

    overflow: auto;

  }

  .cursor-dot,

  .cursor-ring {

    display: none;

  }

  .marquee-track {

    animation: none;

  }

  .building-svg,

  .hero-orbit {

    animation: none;

  }

  .building-base path,

  .building-columns path,

  .building-walls path,

  .building-roof path {

    stroke-dashoffset: 0 !important;

  }

}



/* ── Interactive project gallery ───────────────────────────── */

.gallery-section {

  position: relative;

  overflow: hidden;

}

.gallery-controls {

  display: flex;

  align-items: center;

  gap: clamp(8px, 1.5vw, 22px);

  flex-wrap: wrap;

  margin: 58px 0 28px;

  border-bottom: 1px solid rgba(233, 230, 221, 0.16);

  padding-bottom: 18px;

}

.gallery-filter {

  appearance: none;

  border: 1px solid rgba(233, 230, 221, 0.18);

  background: transparent;

  color: #b7b5ab;

  padding: 12px 17px;

  border-radius: 99px;

  font: 500 10px var(--display);

  letter-spacing: 0.08em;

  cursor: pointer;

  transition:

    color 0.35s,

    border-color 0.35s,

    *background* 0.35s,

    transform 0.35s;

}

.gallery-filter span {

  font-size: 8px;

  color: #8c8d83;

  margin-left: 8px;

  transition: color 0.35s;

}

.gallery-filter:hover {

  border-color: var(--gold);

  color: var(--cream);

  transform: translateY(-2px);

}

.gallery-filter.is-active {

  background: var(--gold);

  border-color: var(--gold);

  color: #171813;

}

.gallery-filter.is-active span {

  color: #4d4435;

}

.gallery-meta {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  color: #85877d;

  font-size: 8px;

  letter-spacing: 0.18em;

  margin: 0 0 18px;

}

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

}

.gallery-item {

  appearance: none;

  display: block;

  text-align: left;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--cream);

  cursor: pointer;

  min-width: 0;

  animation: galleryEnter 0.65s var(--ease) both;

}

.gallery-item[hidden] {

  display: none;

}

.gallery-image {

  display: block;

  position: relative;

  overflow: hidden;

  aspect-ratio: 1.22;

  background: #24251f;

}

.gallery-image:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, rgba(8, 9, 8, 0.34), transparent 45%);

  opacity: 0.7;

  transition: opacity 0.5s;

}

.gallery-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  filter: saturate(0.78);

  transform: scale(1.015);

  transition:

    transform 1s var(--ease),

    filter 0.8s;

}

.gallery-image i {

  position: absolute;

  z-index: 2;

  right: 18px;

  top: 18px;

  width: 38px;

  height: 38px;

  border: 1px solid #ffffff80;

  border-radius: 50%;

  display: grid;

  place-items: center;

  color: #fff;

  font-style: normal;

  font-size: 16px;

  opacity: 0;

  transform: translate(-5px, 5px);

  transition:

    opacity 0.4s,

    transform 0.4s;

}

.gallery-item:hover .gallery-image img {

  transform: scale(1.075);

  filter: saturate(1.05);

}

.gallery-item:hover .gallery-image i {

  opacity: 1;

  transform: translate(0, 0);

}

.gallery-caption {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 8px 12px;

  padding: 16px 2px 22px;

  border-bottom: 1px solid rgba(233, 230, 221, 0.16);

}

.gallery-caption small {

  grid-column: 1/-1;

  color: var(--gold);

  font-size: 7px;

  letter-spacing: 0.2em;

}

.gallery-caption b {

  font: 500 clamp(14px, 1.35vw, 19px) var(--display);

  letter-spacing: -0.035em;

}

.gallery-caption em {

  align-self: center;

  color: #99998e;

  font: normal 7px var(--display);

  letter-spacing: 0.13em;

  transition: color 0.3s;

}

.gallery-item:hover .gallery-caption em {

  color: var(--gold);

}

.gallery-empty {

  padding: 70px 20px;

  text-align: center;

  color: #a8a69c;

  font: italic 20px var(--serif);

}

.gallery-note {

  margin-top: 26px;

  text-align: right;

  color: #77796f;

  font-size: 7px;

  letter-spacing: 0.16em;

}

.gallery-lightbox {

  position: fixed;

  z-index: 3000;

  inset: 0;

  background: rgba(7, 8, 7, 0.97);

  backdrop-filter: blur(18px);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 7vh 9vw;

  opacity: 0;

  visibility: hidden;

  transition:

    opacity 0.45s,

    visibility 0.45s;

}

.gallery-lightbox.is-open {

  opacity: 1;

  visibility: visible;

}

.gallery-lightbox figure {

  margin: 0;

  max-width: min(1100px, 78vw);

  width: 100%;

  max-height: 86vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 18px;

  transform: translateY(18px) scale(0.985);

  transition: transform 0.55s var(--ease);

}

.gallery-lightbox.is-open figure {

  transform: translateY(0) scale(1);

}

.gallery-lightbox figure img {

  display: block;

  max-width: 100%;

  max-height: 72vh;

  object-fit: contain;

  box-shadow: 0 25px 90px #0009;

}

.gallery-lightbox figcaption {

  width: 100%;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  color: var(--cream);

  font: 500 13px var(--display);

}

.gallery-lightbox figcaption small {

  color: var(--gold);

  font-size: 8px;

  letter-spacing: 0.2em;

}

.lightbox-close,

.lightbox-prev,

.lightbox-next {

  position: absolute;

  appearance: none;

  border: 1px solid rgba(233, 230, 221, 0.35);

  background: rgba(255, 255, 255, 0.04);

  color: #f0eee7;

  border-radius: 50%;

  width: 48px;

  height: 48px;

  display: grid;

  place-items: center;

  cursor: pointer;

  transition:

    *background* 0.3s,

    color 0.3s,

    border 0.3s;

}

.lightbox-close:hover,

.lightbox-prev:hover,

.lightbox-next:hover {

  background: var(--gold);

  border-color: var(--gold);

  color: #171813;

}

.lightbox-close {

  right: 34px;

  top: 30px;

  font-size: 27px;

  font-weight: 300;

}

.lightbox-prev {

  left: 3vw;

  top: 50%;

  font-size: 20px;

}

.lightbox-next {

  right: 3vw;

  top: 50%;

  font-size: 20px;

}

body.lightbox-open {

  overflow: hidden;

}

@keyframes galleryEnter {

  from {

    opacity: 0;

    transform: translateY(16px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@media (max-width: 900px) {

  .gallery-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .gallery-controls {

    gap: 8px;

    margin-top: 38px;

  }

  .gallery-filter {

    padding: 10px 13px;

  }

}

@media (max-width: 600px) {

  .gallery-grid {

    grid-template-columns: 1fr;

    gap: 4px;

  }

  .gallery-image {

    aspect-ratio: 1.25;

  }

  .gallery-caption {

    padding: 13px 2px 17px;

  }

  .gallery-meta {

    font-size: 6px;

    letter-spacing: 0.1em;

  }

  .gallery-note {

    text-align: left;

    line-height: 1.8;

  }

  .gallery-lightbox {

    padding: 70px 16px;

  }

  .gallery-lightbox figure {

    max-width: 100%;

    max-height: 80vh;

  }

  .gallery-lightbox figure img {

    max-height: 65vh;

  }

  .lightbox-close {

    right: 15px;

    top: 14px;

    width: 40px;

    height: 40px;

  }

  .lightbox-prev,

  .lightbox-next {

    top: auto;

    bottom: 18px;

    width: 42px;

    height: 42px;

  }

  .lightbox-prev {

    left: calc(50% - 52px);

  }

  .lightbox-next {

    right: calc(50% - 52px);

  }

  .gallery-lightbox figcaption {

    padding: 0 6px;

    font-size: 11px;

  }

}

@media (prefers-reduced-motion: reduce) {

  .gallery-item {

    animation: none;

  }

  .gallery-lightbox,

  .gallery-lightbox figure,

  .gallery-image img {

    transition: none;

  }

}



.loader-mark img {

    width: 110px;

    height: auto;

    object-fit: contain;

    animation: logoPulse 2s ease-in-out infinite;

    filter: sepia(0.75) saturate(0.85) hue-rotate(350deg) brightness(1.15);

}



@keyframes logoPulse {

    0%, 100% {

        transform: scale(1);

        opacity: 0.75;

    }

    50% {

        transform: scale(1.08);

        opacity: 1;

    }

}



/* ==========================================================
   TU DISEÑO CONSTRUCTORA — IDENTIDAD AZUL / GRIS PREMIUM
   Conserva el diseño, las secciones y las animaciones.
   Reemplaza únicamente los tonos de marca y superficies.
========================================================== */

:root {
  /* Identidad de marca */
  --brand-blue: #3156A4;
  --brand-blue-light: #7896C9;
  --brand-steel: #A4A5AE;

  /* Superficies */
  --bg: #111722;
  --bg2: #1B2432;
  --cream: #F1F2F4;
  --muted: #A4A5AE;

  /* Compatibilidad con variables originales */
  --gold: #3156A4;
  --gold-hi: #7896C9;
  --line: rgba(164, 165, 174, .22);
  --ink: #111722;
}

/* Acentos de marca: reemplaza dorados por azul, sin recolorear bloques */
.eyebrow,
.eyebrow-line,
.section-index,
.hero h1 em,
.intro h2 em,
.manifesto h2 em,
.section-heading h2 em,
.blueprint-content h2 em,
.projects h2 em,
.numbers h2 em,
.contact h2 em,
.lab-copy h2 em,
.process-step > span,
.service-no,
.service-arrow,
.service-hover,
.header-cta span,
.text-link span,
.scroll-indicator b,
.hero-index span,
.loader-mark,
.field label,
.manifesto-stamp,
.footer-end > a {
  color: var(--brand-blue-light);
}

.eyebrow-line,
.blueprint-dots,
.loader-line span {
  background-color: var(--brand-blue);
}

/* Conserva las superficies oscuras originales */
body,
.preloader,
.blueprint-section,
.architecture-lab,
.contact {
  background-color: var(--bg);
}

/* Grafito para las secciones oscuras secundarias */
.manifesto,
.process {
  background-color: var(--bg2);
}

/* Los bloques que ya eran claros siguen claros: solo neutralizamos el beige */
.intro,
.services,
.projects,
.footer {
  background-color: #F1F2F4;
  color: #171D28;
}

/* Cinta de marca */
.marquee-band {
  background-color: var(--brand-blue);
  color: #FFFFFF;
}

/* Números y bloques destacados: gris acero, no marrón */
.numbers {
  background-color: #A4A5AE;
  color: #111722;
}

.numbers h2 em {
  color: #FFFFFF;
}

/* Logo / marca */
.brand-symbol {
  border-color: var(--brand-blue);
  color: var(--brand-blue-light);
}

/* Navegación */
.nav a:hover,
.header-cta:hover,
a:hover {
  color: var(--brand-blue-light);
}

/* Botones: conserva tamaños y animaciones existentes */
.button-light,
.button:not(.button-outline) {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #FFFFFF;
}

.button-light:hover,
.button:not(.button-outline):hover {
  background-color: var(--brand-blue-light);
  border-color: var(--brand-blue-light);
  color: #111722;
}

.button-outline {
  border-color: rgba(241, 242, 244, .55);
  color: #F1F2F4;
}

.button-outline:hover {
  background-color: #F1F2F4;
  color: #111722;
}

/* Planos y dibujos técnicos */
.blueprint-back {
  stroke: rgba(164, 165, 174, .28);
}

.blueprint-front,
.technical-lines {
  stroke: var(--brand-blue-light);
}

.blueprint-dims,
.technical-dim {
  stroke: rgba(164, 165, 174, .75);
}

.blueprint-label,
.blueprint-note,
.tech-label {
  color: #A4A5AE;
}

/* Servicios: bordes neutros, sin alterar estructura */
.service-list,
.service-item {
  border-color: rgba(164, 165, 174, .35);
}

.service-item:before {
  background-color: #D9DDE5;
}

.service-item p,
.heading-note,
.projects-top p,
.overline {
  color: #667085;
}

/* Galería: mantiene fotografías como protagonistas */
.project-mosaic figure {
  background-color: #A4A5AE;
}

.project-mosaic figcaption span {
  color: var(--brand-blue-light);
}

/* Formulario */
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--brand-blue-light);
}

.field select option {
  background-color: var(--bg2);
  color: #FFFFFF;
}

/* WhatsApp / acceso flotante */
.floating-whatsapp {
  background-color: var(--brand-blue);
  color: #FFFFFF;
}

/* Preloader */
.loader-line {
  background-color: #344052;
}

.loader-caption {
  color: var(--brand-steel);
}

/* Cursor interactivo */
.cursor-dot {
  background-color: var(--brand-blue-light);
}

.cursor-ring {
  border-color: rgba(120, 150, 201, .65);
}

.cursor-ring.active {
  background-color: rgba(49, 86, 164, .16);
}

/* Resplandor azul sutil en elementos técnicos */
.hero-blueprint {
  filter: drop-shadow(0 0 20px rgba(49, 86, 164, .18));
}

.hero-orbit,
.hero-orbit:before,
.hero-orbit:after {
  border-color: rgba(164, 165, 174, .28);
}

.hero-orbit i {
  background-color: var(--brand-blue-light);
  box-shadow: 0 0 16px rgba(120, 150, 201, .7);
}

/* Menú móvil */
@media (max-width: 700px) {
  .nav {
    background-color: var(--bg);
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.brand-word {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 1px;
}

.brand-word small {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2px;
  margin-top: 4px;
}

.manifesto-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.manifesto-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 0.45;
  filter: grayscale(20%);
}

.manifesto-stamp small {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 2px;
}

/* FOOTER */
.footer {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.5fr;
  align-items: center;
  gap: 35px;
}

.footer .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer .brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.footer-mid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-socials a {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  transition: color 0.3s ease;
}

.footer-socials a:hover {
  color: #7896C9;
}

.footer-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
}

.footer-end small {
  font-size: 9px;
  letter-spacing: 1px;
  text-align: right;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .footer {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .footer-mid {
    align-items: flex-start;
  }

  .footer-end {
    align-items: flex-start;
  }

  .footer-socials {
    justify-content: flex-start;
  }

  .footer-end small {
    text-align: left;
  }
}

.floating-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
}

.floating-whatsapp svg {
  width: 30px;
  height: 30px;
  display: block;
}