/* Maui Real Estate Services: what is new on top of the approved base.
   Opening with the split logo, the logo seal, owner card, promise words, blueprint, services, properties, Hui network. */

:root{--sand:#e2b77a;--cream:#f4efe6;--koa:#3b2a1f;--sky:#5bb0f0}

/* ---------- opening ---------- */
#preloader{background:var(--noir)}
.intro-stage{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.intro-logo{position:relative;width:min(78vw,560px);aspect-ratio:1494/1053;will-change:transform}
.intro-logo img{position:absolute;inset:0;width:100%;height:100%;opacity:0;will-change:transform,opacity}
.intro-desc{font-family:var(--font-sans);font-size:clamp(.66rem,1.6vw,.8rem);font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--green-light);opacity:0;text-align:center;padding:0 1rem}
/* the page keeps the space of the scrollbar during the opening too, so nothing shifts when the logo lands */
html{scrollbar-gutter:stable}
body.intro #site-header .brand-name{opacity:0}
/* the logo in the header only appears at the exact moment the flying logo lands on it */
body.intro #site-header .seal,body.landing #site-header .seal{opacity:0}
body.intro #site-header .nav-links,body.intro #site-header .nav-cta,body.intro #site-header .nav-toggle{opacity:0}
#site-header .nav-links,#site-header .nav-cta,#site-header .nav-toggle,#site-header .brand-name{transition:opacity .6s ease}
body.intro .hero-inner,body.intro .owner-card{opacity:0}

/* ---------- logo: the new white and blue version sits straight on the dark site ---------- */
.seal{display:flex;align-items:center;flex-shrink:0;height:4.4rem;transition:height .35s ease}
.seal img{height:100%;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
#site-header.scrolled .seal{height:3.5rem}
.seal-lg{height:6rem}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.15;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media(max-width:1180px){ .brand-name{display:none} }
@media(max-width:640px){ .seal{height:3.4rem} }

/* ---------- hero ---------- */
#hero{isolation:isolate}
.hero-bg img{animation:heroDrift 26s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
@media(min-width:900px){
  .hero-bg img{object-position:60% 50%}
  .hero-wrap{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:3rem;align-items:center}
  .hero-wrap .hero-inner{margin-left:0;max-width:40rem}
}
@media(max-width:899px){ .hero-wrap{display:flex;flex-direction:column;gap:2.4rem} .hero-bg img{object-position:72% 50%} }
.hero-inner .text-gradient{background-image:linear-gradient(135deg,#ffffff,#d9efff 45%,#8fd0ff)}

/* owner card: glass, ticking through the month */
.owner-card{position:relative;padding:1.3rem 1.3rem 1.1rem;border-radius:1.3rem;background:rgba(7,19,29,.5);
  border:1px solid rgba(191,227,255,.22);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.oc-head{display:flex;align-items:center;gap:.8rem;padding-bottom:.9rem;border-bottom:1px solid rgba(191,227,255,.14)}
.oc-head strong{display:block;font-size:.9rem}
.oc-head small{font-size:.72rem;color:rgba(248,244,239,.6)}
.oc-dot{width:.6rem;height:.6rem;border-radius:999px;background:#5ff0b0;box-shadow:0 0 0 0 rgba(95,240,176,.6);animation:ocPulse 2s ease-out infinite}
@keyframes ocPulse{0%{box-shadow:0 0 0 0 rgba(95,240,176,.55)}100%{box-shadow:0 0 0 12px rgba(95,240,176,0)}}
.oc-list{margin-top:.9rem;display:flex;flex-direction:column;gap:.65rem}
.oc-list li{display:flex;align-items:center;gap:.7rem;font-size:.84rem;color:rgba(248,244,239,.55);transition:color .4s ease}
.oc-list .tick{position:relative;width:1.25rem;height:1.25rem;border-radius:999px;border:1.5px solid rgba(191,227,255,.35);flex-shrink:0;transition:all .4s ease}
.oc-list .tick::after{content:"";position:absolute;left:.36rem;top:.17rem;width:.32rem;height:.6rem;border:solid #04182b;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.oc-list li.done{color:#fff}
.oc-list li.done .tick{background:linear-gradient(135deg,#bfe3ff,#5bb0f0);border-color:transparent;box-shadow:0 0 14px rgba(91,176,240,.6)}
.oc-list li.done .tick::after{transform:rotate(45deg) scale(1)}
.oc-foot{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.oc-bar{display:block;height:4px;border-radius:999px;background:rgba(191,227,255,.15);overflow:hidden}
.oc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#bfe3ff,#5bb0f0);transition:width .6s ease}
.oc-foot small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(191,227,255,.7)}

/* ---------- promise: big words that light up with the scroll ---------- */
#promise{padding:0;height:220vh}
.promise-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.promise-pin::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 50%,rgba(91,176,240,.14),transparent 70%);pointer-events:none}
.promise-words{margin-top:1.6rem;font-family:var(--font-display);font-weight:600;font-size:clamp(2.3rem,6.6vw,5.6rem);line-height:1.04;letter-spacing:-.015em}
.promise-words span{display:block;padding-bottom:.14em;margin-bottom:-.14em;color:rgba(248,244,239,.12);transition:color .5s ease,text-shadow .5s ease,transform .5s ease;transform:translateX(0)}
.promise-words span.lit{color:#fff;text-shadow:0 0 40px rgba(91,176,240,.45)}
.promise-words span.lit:last-child{background-image:linear-gradient(100deg,#ffffff,#bfe3ff 35%,#5bb0f0 70%,#9fd6ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.promise-sub{margin-top:2rem;max-width:34rem;color:rgba(248,244,239,.6);line-height:1.7}

/* ---------- blueprint ---------- */
#what-we-do{padding-bottom:0}
.bp{position:relative;height:340vh;margin-top:3rem}
.bp-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.bp-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){ .bp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:4rem} }
.bp-steps{list-style:none;display:flex;flex-direction:column;gap:1.1rem;counter-reset:none}
.bp-steps li{padding:1rem 1.2rem;border-radius:1rem;border:1px solid transparent;opacity:.38;transition:all .5s ease}
.bp-steps li.active{opacity:1;border-color:rgba(191,227,255,.22);background:rgba(19,40,58,.55);box-shadow:0 0 50px -20px rgba(91,176,240,.5)}
.bp-no{font-family:var(--font-display);font-size:.72rem;letter-spacing:.2em;color:var(--green-light)}
.bp-steps h3{font-family:var(--font-display);font-size:1.5rem;margin-top:.2rem}
.bp-steps p{max-height:0;overflow:hidden;font-size:.86rem;line-height:1.6;color:rgba(248,244,239,.68);transition:max-height .6s ease,margin .6s ease}
.bp-steps li.active p{max-height:12rem;margin-top:.5rem}
.bp-art{position:relative;border-radius:1.4rem;border:1px solid rgba(191,227,255,.18);background:linear-gradient(160deg,#0c2236,#081826);padding:1rem;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.bp-art svg{width:100%;height:auto;display:block}
.bp-art .draw{fill:none;stroke:#bfe3ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(91,176,240,.55))}
.bp-art .dash{stroke-dasharray:6 7 !important;opacity:.6}
.bp-art .sun{stroke:var(--sand)}
.bp-art .grow{stroke:#5ff0b0;stroke-width:3}
.bp-label{fill:rgba(191,227,255,.7);font:600 11px var(--font-sans);letter-spacing:.2em;text-anchor:middle;text-transform:uppercase}
.bp-sky{opacity:0;transition:opacity 1s ease}
.bp-art.done .bp-sky{opacity:1}
.bp-progress{position:absolute;left:1.2rem;right:1.2rem;bottom:.8rem;height:3px;border-radius:999px;background:rgba(191,227,255,.12);overflow:hidden}
.bp-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#bfe3ff,#5bb0f0)}
@media(max-width:959px){
  .bp{height:300vh}
  .bp-sticky{align-items:flex-start;padding-top:5.6rem}
  .bp-grid{gap:1rem}
  .bp-art{order:-1;padding:.6rem}
  .bp-steps{gap:.4rem}
  .bp-steps li{padding:.6rem .9rem}
  .bp-steps li:not(.active){display:none}
  .bp-steps h3{font-size:1.25rem}
}

/* ---------- stats ---------- */
section.tight{padding:5rem 0}

/* ---------- services: cards with a light that follows the pointer ---------- */
.svc-grid{margin-top:3.2rem;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .svc-grid{grid-template-columns:repeat(3,1fr)} }
.svc-card{position:relative;padding:1.5rem;border-radius:1.2rem;border:1px solid var(--line);background:rgba(19,40,58,.5);overflow:hidden;transition:transform .35s ease,border-color .35s ease}
.svc-card::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(91,176,240,.18),transparent 60%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.svc-card:hover{transform:translateY(-4px);border-color:rgba(191,227,255,.3)}
.svc-card:hover::before{opacity:1}
.svc-card .ic{display:flex;align-items:center;justify-content:center;width:2.8rem;height:2.8rem;border-radius:.85rem;background:rgba(91,176,240,.12);border:1px solid rgba(191,227,255,.22);color:var(--green-light)}
.svc-card h3{margin-top:1rem;font-family:var(--font-display);font-size:1.2rem}
.svc-card p{margin-top:.45rem;font-size:.86rem;line-height:1.6;color:rgba(248,244,239,.62)}
.svc-card .num{position:absolute;right:1.2rem;top:1rem;font-family:var(--font-display);font-size:.8rem;color:rgba(191,227,255,.35)}
.svc-card.featured{grid-column:1/-1;display:grid;gap:1rem;align-items:center;background:linear-gradient(135deg,rgba(91,176,240,.16),rgba(19,40,58,.6) 55%);border-color:rgba(191,227,255,.25)}
@media(min-width:900px){ .svc-card.featured{grid-template-columns:auto 1fr auto} .svc-card.featured h3{margin-top:0} }

/* ---------- property types: 3D tilt with a glare ---------- */
.prop-grid{margin-top:3rem;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){ .prop-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1100px){ .prop-grid{grid-template-columns:repeat(4,1fr)} }
.prop{position:relative;aspect-ratio:3/4;border-radius:1.3rem;overflow:hidden;border:1px solid var(--line);transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
.prop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.prop:hover img{transform:scale(1.06)}
.prop::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,19,29,.95) 0%,rgba(7,19,29,.55) 42%,transparent 70%)}
.prop::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.22),transparent 45%);opacity:0;transition:opacity .3s}
.prop:hover::before{opacity:1}
.prop>div{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.3rem;transform:translateZ(30px)}
.prop small{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--green-light)}
.prop h3{margin-top:.2rem;font-family:var(--font-display);font-size:1.5rem}
.prop p{margin-top:.4rem;font-size:.82rem;line-height:1.55;color:rgba(248,244,239,.78)}
@media(max-width:639px){ .prop{aspect-ratio:4/3} }

/* ---------- Hui network ---------- */
.hui-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1000px){ .hui-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem} }
.hui-copy p{margin-top:1.1rem;color:rgba(248,244,239,.68);line-height:1.75}
.hui-copy h2{margin-top:1rem}
.hui-clock{margin-top:2rem;display:flex;align-items:center;gap:1rem}
.hui-clock svg{width:5.5rem;height:5.5rem;transform:rotate(-90deg)}
.hc-track{fill:none;stroke:rgba(191,227,255,.14);stroke-width:7}
.hc-run{fill:none;stroke:url(#none);stroke:#5bb0f0;stroke-width:7;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;filter:drop-shadow(0 0 6px rgba(91,176,240,.7))}
.hui-clock strong{display:block;font-family:var(--font-display);font-size:2rem;line-height:1}
.hui-clock small{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,244,239,.55)}
.hui-map{position:relative;border-radius:1.5rem;border:1px solid rgba(191,227,255,.16);background:radial-gradient(70% 70% at 50% 50%,rgba(91,176,240,.12),transparent 70%),rgba(12,28,41,.6);padding:1rem 1rem 1.4rem}
.hui-map svg{width:100%;height:auto;display:block;overflow:visible}
.hui-center{position:absolute;left:50%;top:calc(1rem + (100% - 2.4rem) * .5 - .3rem);transform:translate(-50%,-50%);width:24%;aspect-ratio:1;border-radius:999px;background:radial-gradient(circle,#123049,#0a1b2a 70%);border:1px solid rgba(191,227,255,.3);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(91,176,240,.18),0 0 60px rgba(91,176,240,.45);pointer-events:none}
.hui-center img{width:86%}
.hui-caption{margin-top:.6rem;text-align:center;font-size:.82rem;color:rgba(248,244,239,.7);min-height:2.6em;line-height:1.5}
.hn-line{stroke:rgba(191,227,255,.22);stroke-width:1.5;fill:none}
.hn-line.on{stroke:rgba(191,227,255,.85);filter:drop-shadow(0 0 4px rgba(91,176,240,.8))}
.hn-pulse{fill:#bfe3ff;filter:drop-shadow(0 0 5px #5bb0f0)}
.hn-node{cursor:pointer}
.hn-node circle{fill:#0f2638;stroke:rgba(191,227,255,.45);stroke-width:1.5;transition:all .3s ease}
.hn-node text{fill:rgba(248,244,239,.85);font:600 12.5px var(--font-sans);text-anchor:middle;pointer-events:none}
.hn-node .hn-ic{fill:none;stroke:#bfe3ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hn-node:hover circle,.hn-node.on circle,.hn-node:focus circle{fill:#164064;stroke:#bfe3ff;filter:drop-shadow(0 0 10px rgba(91,176,240,.8))}
.hn-node:focus{outline:none}

/* ---------- contact ---------- */
.office-photo{border-radius:1.1rem;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10}
.office-photo img{width:100%;height:100%;object-fit:cover}
.form-title{font-family:var(--font-display);font-size:1.7rem;line-height:1.15;margin-bottom:1.4rem}
.foot-note{font-size:.85rem;color:rgba(248,244,239,.5)}

/* reduced motion: everything is shown at rest */
@media (prefers-reduced-motion: reduce){
  #promise,.bp{height:auto}
  .promise-pin,.bp-sticky{position:relative;height:auto;padding:5rem 0}
  .promise-words span{color:#fff}
  .bp-steps li{opacity:1}
  .bp-steps li p{max-height:none;margin-top:.5rem}
  .bp-steps li:not(.active){display:block}
  .hero-bg img{animation:none}
}

/* phone: the long eyebrow wraps, so its side lines step aside */
@media(max-width:600px){
  .eyebrow{letter-spacing:.2em}
  .hero-inner .eyebrow::before,.hero-inner .eyebrow::after{display:none}
}

/* header while scrolling: lighter, more see-through glass */
header.scrolled{background:rgba(7,19,29,.5);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}

/* ---------- painel de logos suaves: the company logo stamped many times, aligned like wallpaper, almost invisible ---------- */
.logo-panel{position:relative;isolation:isolate}
.logo-panel::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("assets/logo/logo-panel-tile.png?v=1") 0 0/220px 170px repeat;   /* one tile holds two logos in a brick pattern */
  opacity:.04;filter:saturate(.55);
  /* the panel dissolves into the page at the top and bottom, never a hard edge */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
}