/* Horta da Bibita: Google Ads landing page, "The Curve".
   The design idea comes from the building itself: stacked, sweeping terrace slabs. Curves appear as
   the hero clip, parallel "floor" lines, arc dividers, the ownership year, arched and swept image
   corners, and rounded controls. Brand: Horta logo, teal, Plantin + Latina. Supporting palette
   from the renders: limestone and rust. */

@font-face { font-family: "HDB Latina"; src: url(/assets/fonts/Latina-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "HDB Latina"; src: url(/assets/fonts/Latina-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HDB Latina"; src: url(/assets/fonts/Latina-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Their live-site tokens */
  --teal: #006A6D;
  --teal-dark: #005B5F;
  --mint: #A9D8BA;
  --mint-soft: #D8EEE0;
  --cream: #F7F2EA;
  --ink: #006064;
  --shadow: 0 24px 80px rgba(0, 73, 77, .18);
  /* Derived */
  --stone: var(--cream);
  --paper: #ffffff;
  --body: #3E6B6D;
  --soft: #7A9798;
  --line: rgba(0, 96, 100, .16);
  --sans: "HDB Latina", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --pad: clamp(20px, 5.5vw, 80px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--sans); font-weight: 400; letter-spacing: -.025em; color: var(--ink); }
p { margin: 0; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.body { font-size: 17px; line-height: 1.75; color: var(--body); max-width: 50ch; }
.body--light { color: rgba(255,255,255,.82); }

/* Rounded controls */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 28px; border: 0; border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); white-space: nowrap; }
.pill svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.pill:hover svg { transform: translateX(4px); }
.pill--teal { background: var(--teal); color: #fff; }
.pill--teal:hover { background: var(--teal-dark); }
.pill--white { background: #fff; color: var(--teal); }
.pill--white:hover { background: var(--stone); }
.pill--sm { height: 40px; padding: 0 20px; font-size: 14px; }
.pill[disabled] { opacity: .6; cursor: progress; }
.round { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.round:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ═════ Top bar (after hero) ═════ */
.bar-top { position: fixed; inset: 0 0 auto; z-index: 50; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); background: rgba(250, 248, 244, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform .4s var(--ease); }
.bar-top.is-on { transform: none; }
.bar-top__logo img { width: 58px; }
.bar-top__actions { display: flex; align-items: center; gap: 22px; }
.bar-top__tel { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 400; text-decoration: none; color: var(--ink); }
.bar-top__tel svg { color: var(--teal); }
@media (max-width: 899px) { .bar-top__actions { display: none; } .bar-top { justify-content: center; height: 58px; } }

/* ═════ Hero ═════ */
.hero { position: relative; min-height: max(100svh, 760px); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; background: var(--teal); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform-origin: 62% 58%; animation: kenburns 22s cubic-bezier(.25, .6, .3, 1) both; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 45, 48, .42) 0%, rgba(0, 45, 48, 0) 28%, rgba(0, 45, 48, 0) 46%, rgba(0, 45, 48, .62) 100%); }
.hero__logo { position: absolute; z-index: 3; top: clamp(26px, 5vh, 54px); left: 50%; width: clamp(150px, 15vw, 230px); height: auto; translate: -50% 0; }
.hero__inner { position: relative; z-index: 3; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--pad) clamp(120px, 15vh, 170px); display: grid; gap: 36px; align-items: end; }
.hero h1 { font-size: clamp(42px, 5.4vw, 86px); line-height: 1.02; letter-spacing: -.035em; color: #fff; max-width: 12ch; text-shadow: 0 2px 40px rgba(0, 40, 42, .35); }
.hero__lede { margin-top: 22px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: rgba(255,255,255,.92); max-width: 40ch; text-shadow: 0 1px 20px rgba(0, 40, 42, .4); }
@media (min-width: 1000px) { .hero__inner { grid-template-columns: 1fr minmax(380px, 430px); gap: 64px; } }

/* Hero curve: fill matches the facts band below; lines draw in on load */
.hero__curve { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 100%; height: clamp(70px, 10vw, 160px); pointer-events: none; }
.hero__curve-fill { fill: var(--mint); stroke: none; }
.hero__curve-line { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.4s cubic-bezier(.6, .1, .2, 1) forwards; }
.hero__curve-line:nth-child(2) { animation-delay: .25s; }
.hero__curve-line:nth-child(3) { animation-delay: .5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Load-in */
.rise { opacity: 0; transform: translateY(26px); animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards; }
.hero__logo.rise { transform: translateY(-14px); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Hero form card */
.hero .lead--card { margin: 0; padding: clamp(24px, 2.4vw, 34px); background: var(--cream); color: var(--ink); border-radius: 28px; box-shadow: 0 30px 80px -20px rgba(0, 40, 42, .55); }
.lead__title { font: 400 clamp(22px, 1.8vw, 27px)/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.lead__sub { margin: 8px 0 18px; font-size: 14px; line-height: 1.55; color: var(--body); }

@media (max-width: 999px) {
  .hero { min-height: 0; display: block; background: var(--mint); }
  .hero__media, .hero__shade { height: 82svh; min-height: 560px; bottom: auto; }
  .hero__inner { padding: 0 var(--pad) 40px; display: block; }
  .hero__copy { min-height: 82svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 0 190px; }
  .hero__curve { top: calc(max(82svh, 560px) - clamp(70px, 10vw, 160px) + 1px); bottom: auto; }
  .hero .lead--card { position: relative; margin-top: -150px; }
  .hero h1 { font-size: clamp(40px, 11vw, 56px); }
}


/* Lead form */
.lead { margin-top: 30px; scroll-margin-top: 90px; }
.lead__label { font: 500 13px/1.4 var(--sans); letter-spacing: .02em; color: var(--ink); margin-bottom: 12px; }
.lead__fields, .lead__stack { display: grid; gap: 10px; }
.lead input, .lead select { display: block; width: 100%; height: 54px; padding: 0 24px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: 0 8px 24px -16px rgba(0, 73, 77, .35); color: var(--ink); font: 300 16px var(--sans); -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s; }
.lead input::placeholder { color: var(--soft); }
.lead input:focus, .lead select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0, 106, 109, .12); }
.lead input[aria-invalid="true"] { border-color: #C0614A; box-shadow: 0 0 0 4px rgba(192, 97, 74, .12); }
.lead .pill { width: 100%; margin-top: 4px; }
.lead__fine { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--soft); max-width: 46ch; }
.lead__fine a { color: var(--teal); text-decoration: none; font-weight: 400; }
.form-error { margin-top: 12px; font-size: 14px; line-height: 1.5; color: #A4412B; }
.form-error a { color: inherit; font-weight: 500; }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 24px; top: 21px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.select select { padding-right: 52px; cursor: pointer; }
.lead--dark input, .lead--dark select { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
.lead--dark input::placeholder { color: rgba(255,255,255,.7); }
.lead--dark select { color: #fff; }
.lead--dark select.is-empty { color: rgba(255,255,255,.7); }
.lead--dark select option { color: var(--ink); }
.lead--dark .select { color: #fff; }
.lead--dark input:focus, .lead--dark select:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.lead--dark .lead__fine { color: rgba(255,255,255,.6); }
.lead--dark .form-error { color: #FFD4C7; }

/* ═════ Facts ═════ */
.facts { background: var(--mint); }
.facts__row { display: grid; grid-template-columns: repeat(2, 1fr); }
.facts__row div { padding: 26px 0 24px; display: flex; flex-direction: column; gap: 4px; }
.facts b { font: 400 clamp(20px, 1.7vw, 24px)/1.2 var(--sans); letter-spacing: -.015em; }
.facts span { font: 300 14px/1.4 var(--sans); color: var(--body); }
@media (min-width: 900px) { .facts__row { grid-template-columns: repeat(4, 1fr); } .facts__row div + div { padding-left: 32px; border-left: 1px solid var(--line); } }
@media (max-width: 899px) { .facts__row div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); } .facts__row div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ═════ Building ═════ */
.building { padding: clamp(88px, 11vw, 150px) 0 clamp(72px, 8vw, 110px); }
.building__grid { display: grid; gap: 48px; align-items: center; }
.building__img { margin: 0; overflow: hidden; border-radius: clamp(140px, 22vw, 320px) 0 0 0; box-shadow: var(--shadow); }
.building__img img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.building h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08; margin: 0 0 22px; max-width: 14ch; }
@media (min-width: 900px) { .building__grid { grid-template-columns: 1.1fr 1fr; gap: clamp(56px, 7vw, 110px); } }

.floors { list-style: none; padding: 0; margin: clamp(64px, 8vw, 110px) 0 0; }
.floors li { position: relative; display: grid; grid-template-columns: 1fr; gap: 6px 20px; padding: 40px 0 26px; }
.floors__arc { position: absolute; left: 0; top: 0; width: 100%; height: 30px; }
.floors__arc path { fill: none; stroke: var(--teal); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; }
.floors h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; }
.floors p { font-size: 16px; line-height: 1.7; color: var(--body); max-width: 56ch; }
@media (min-width: 900px) { .floors li { grid-template-columns: 1fr 1.1fr; align-items: baseline; padding: 46px 0 30px; } }

/* ═════ Gallery ═════ */
.gallery { position: relative; }
.gallery__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 84px 0 110px; overflow: hidden; }
.gallery__sticky > .wrap { width: 100%; }
.gallery.is-static .gallery__sticky { position: static; height: auto; padding: 40px 0 140px; }
.gallery__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.gallery h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
.gallery__nav { display: flex; gap: 10px; }
.gallery__track { overflow: hidden; touch-action: pan-y; cursor: grab; }
.gallery__rail { display: flex; gap: 18px; width: max-content; padding: 0 var(--pad) 4px; will-change: transform; transform: translate3d(0, 0, 0); }
.gallery.is-static .gallery__track { overflow-x: auto; touch-action: auto; cursor: auto; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
@media (min-width: 1360px) { .gallery__rail { padding-inline: calc((100vw - var(--wrap)) / 2 + var(--pad)); } }
.shot { flex: 0 0 auto; margin: 0; }
.shot button { display: block; border: 0; padding: 0; overflow: hidden; background: var(--stone); cursor: zoom-in; height: min(clamp(320px, 36vw, 520px), calc(100svh - 300px)); aspect-ratio: 5 / 6; }
.shot:nth-child(odd) button { border-radius: clamp(90px, 10vw, 160px) 0 0 0; }
.shot:nth-child(even) button { border-radius: 0 clamp(90px, 10vw, 160px) 0 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.shot button:hover img { transform: scale(1.035); }
.shot figcaption { margin-top: 12px; font-size: 14px; color: var(--body); }
.gallery__progress { height: 2px; margin-top: 26px; background: var(--line); border-radius: 2px; overflow: hidden; }
.gallery__progress span { display: block; height: 100%; width: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 899px) {
  .gallery__sticky { padding: 70px 0 104px; }
  .shot button { height: min(112vw, calc(100svh - 320px)); aspect-ratio: 4 / 5; }
  .gallery__head { margin-bottom: 20px; }
}

/* ═════ Ownership ═════ */
.own { position: relative; background: var(--teal); color: #fff; padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.own h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08; color: #fff; margin: 0 0 22px; max-width: 15ch; }
.edge { position: absolute; left: 0; width: 100%; height: clamp(40px, 6vw, 90px); pointer-events: none; }
.edge path { stroke: none; }
.own .edge path, .close .edge path { fill: var(--teal); }
.edge--top { bottom: calc(100% - 1px); }
.edge--bottom { top: calc(100% - 1px); }
.own__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .own__grid { grid-template-columns: 1fr 1fr; gap: clamp(56px, 7vw, 110px); } }
.own__points { list-style: none; padding: 0; margin: 28px 0 36px; display: grid; gap: 10px; }
.own__points li { position: relative; padding-left: 28px; font-size: 16px; color: rgba(255,255,255,.9); }
.own__points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 7px; border: 1.5px solid var(--mint); border-top: 0; border-radius: 0 0 14px 14px; }

.year { width: 100%; height: auto; overflow: visible; }
.year .seg { cursor: pointer; transition: fill .25s var(--ease), opacity .2s; }
.year .seg[data-who="you"] { fill: #fff; }
.year .seg[data-who="guest"] { fill: url(#hatch); }
.year .seg:hover { opacity: .8; }
.year .seg:focus-visible { outline: none; stroke: var(--mint); stroke-width: 2; }
.year text { font: 400 12px var(--sans); fill: rgba(255,255,255,.75); stroke: none; text-anchor: middle; }
.year .seg { stroke: none; }
.year .mid { font: 300 52px var(--sans); fill: #fff; letter-spacing: -.02em; }
.year .mid-l { font: 300 14px var(--sans); fill: rgba(255,255,255,.8); }
.year__sum { margin-top: 10px; text-align: center; font: 400 clamp(18px, 1.6vw, 21px)/1.4 var(--sans); letter-spacing: -.01em; }
.year__hint { margin-top: 10px; text-align: center; font-size: 13px; color: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); }
.sw--you { background: #fff; }
.sw--guest { background: repeating-linear-gradient(135deg, var(--mint) 0 2px, transparent 2px 5px); margin-left: 8px; }
.year__fine { margin-top: 8px; text-align: center; font-size: 11.5px; color: rgba(255,255,255,.55); }

/* ═════ Location ═════ */
.place { background: var(--cream); padding: clamp(150px, 15vw, 220px) 0 clamp(80px, 9vw, 130px); }
.place__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .place__grid { grid-template-columns: .85fr 1fr; gap: clamp(56px, 8vw, 120px); } }
.place__arch { margin: 0; overflow: hidden; border-radius: 999px 999px 0 0; max-width: 520px; box-shadow: var(--shadow); }
.place__arch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.place h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08; margin: 0 0 22px; max-width: 14ch; }
.walk { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.walk li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.walk span { font: 400 17px/1.3 var(--sans); }
.walk i { font: 300 14px/1 var(--sans); font-style: normal; color: var(--body); white-space: nowrap; }
@media (max-width: 520px) { .walk { grid-template-columns: 1fr; } }

/* ═════ Team ═════ */
.team { border-top: 1px solid var(--line); padding: 40px 0 clamp(110px, 11vw, 160px); }
.team__row { display: grid; gap: 28px; align-items: center; }
.team ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: flex-end; }
.team li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.team img { height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: opacity .3s, filter .3s; }
.team li:hover img { filter: none; opacity: 1; }
.team small { font: 300 13px/1 var(--sans); color: var(--soft); }
@media (min-width: 1000px) { .team ul { justify-content: space-between; } }

/* ═════ Close ═════ */
.close { position: relative; background: var(--teal); color: #fff; padding: clamp(40px, 5vw, 70px) 0 0; }
.close__grid { display: grid; gap: 48px; align-items: center; padding-bottom: clamp(72px, 9vw, 120px); }
@media (min-width: 900px) { .close__grid { grid-template-columns: 1fr minmax(360px, 440px); gap: clamp(56px, 8vw, 120px); } }
.close h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1.06; color: #fff; margin: 0 0 22px; }
.close__tel { display: inline-flex; flex-direction: column; gap: 6px; margin-top: 34px; text-decoration: none; font: 300 clamp(26px, 2.4vw, 32px)/1.1 var(--sans); letter-spacing: -.01em; }
.close__tel small { font: 300 14px/1 var(--sans); color: rgba(255,255,255,.75); letter-spacing: 0; }
.close__tel:hover { color: var(--mint); }
.close .lead { margin-top: 0; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding-top: 28px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.18); }
.foot img { width: 64px; }
.foot p { flex: 1 1 320px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.6); }

/* ═════ Mobile action bar ═════ */
.mbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--teal); box-shadow: 0 -10px 30px rgba(0, 73, 77, .22); transition: transform .3s var(--ease); }
.mbar.is-typing { transform: translateY(110%); }
.mbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 999px; font: 500 15px/1 var(--sans); text-decoration: none; }
.mbar__call { flex: 0 0 32%; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.mbar__call svg { width: 16px; height: 16px; }
.mbar__cta { flex: 1; background: #fff; color: var(--teal); }
@media (min-width: 900px) { .mbar { display: none; } }
@media (max-width: 899px) { .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ═════ Lightbox ═════ */
.lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(20, 30, 29, .96); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(20, 30, 29, .9); }
.lightbox img { max-width: 88vw; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.lightbox .round { position: absolute; color: #fff; border-color: rgba(255,255,255,.35); font: 300 24px/1 var(--sans); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: calc(50% - 23px); }
.lightbox__next { right: 20px; top: calc(50% - 23px); }
.lightbox__cap { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font: 300 15px var(--sans); color: rgba(255,255,255,.8); }

/* ═════ Desktop: fixed base CTA ═════ */
.dock { position: fixed; z-index: 60; right: 28px; bottom: 28px; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 30px; border-radius: 999px; background: var(--teal); color: #fff; font: 500 15px/1 var(--sans); text-decoration: none; box-shadow: 0 0 0 3px #fff, 0 18px 40px -12px rgba(0, 73, 77, .55); transition: background .25s var(--ease), transform .25s var(--ease); }
.dock svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.dock:hover { background: var(--teal-dark); }
.dock:hover svg { transform: translateX(4px); }
@media (max-width: 899px) { .dock { display: none; } }
@media (min-width: 900px) { .foot { padding-bottom: 104px; } }

/* ═════ Full-bleed parallax break ═════ */
.break { position: relative; height: clamp(520px, 92svh, 980px); overflow: hidden; color: #fff; display: flex; align-items: flex-end; }
.break__media { position: absolute; inset: -12% 0; }
.break__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.break__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 45, 48, 0) 35%, rgba(0, 45, 48, .65) 100%); }
.break__inner { position: relative; width: 100%; padding-bottom: clamp(56px, 9vh, 110px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.break__line { font: 400 clamp(38px, 5vw, 80px)/1.02 var(--sans); letter-spacing: -.035em; max-width: 14ch; text-shadow: 0 2px 40px rgba(0, 40, 42, .35); }

/* ═════ Scroll reveals ═════ */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
.building__img[data-reveal] img, .place__arch[data-reveal] img { transform: scale(1.14); transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.building__img[data-reveal].in img, .place__arch[data-reveal].in img { transform: scale(1); }
.floors[data-reveal] .floors__arc path { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.8s cubic-bezier(.6, .1, .2, 1); }
.floors[data-reveal].in .floors__arc path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero__img, .rise, .hero__curve-line { animation: none !important; opacity: 1; transform: none; stroke-dashoffset: 0; }
  [data-reveal], [data-reveal] img { opacity: 1 !important; transform: none !important; }
  .floors__arc path { stroke-dashoffset: 0 !important; }
}