/* lux.css (11/10/2026): the RealtyMind finish for Sell South FL. Loaded last on every page, so it wins over site.css.
   Serif italic accents, fixed headline spacing, floating glass header, a dark photographic hero, a moving
   neighborhood ribbon, cards that lean toward the mouse, a photo call-to-action and a deep navy footer.
   Light by default; night mode keeps working. Motion turns off for visitors who ask for less motion. */
@font-face{font-family:SSFSerif;src:url(/fonts/serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:SSFSerif;src:url(/fonts/serif.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{--serif:SSFSerif,"Iowan Old Style","Palatino Linotype",Georgia,serif;--champ:#EAD3A2;--champ-2:#C9A35E;--navy:#06121F;--navy-2:#0A1C2E;--lx-line:rgba(234,211,162,.18)}

/* ---------- type: words no longer run together, accents in serif italic ---------- */
h1,h2,h3{word-spacing:.04em}
.h1{letter-spacing:-.042em;word-spacing:.07em;line-height:.98}
.h2{letter-spacing:-.038em;word-spacing:.06em}
.gx{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em;word-spacing:0;padding-right:.08em;
  background-image:linear-gradient(95deg,#0A7A8F 0%,#1B8FB0 38%,#B8862A 78%,#D9A441 100%)}
.h1 .gx{font-size:1.1em;line-height:.85}
.h2 .gx{font-size:1.08em}
:root[data-theme="dark"] .gx{background-image:linear-gradient(95deg,#6AD6E5 0%,#9FD8F0 40%,#EAD3A2 80%,#F2C979 100%)}
.eyebrow{letter-spacing:.16em}

/* ---------- header: logo bigger and crisper, the bar floats as glass once you scroll ---------- */
.logo img{width:74px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.08))}
.logo b{font-size:19px}
.logo small{font-family:var(--serif);font-style:italic;font-weight:400;font-size:14.5px;letter-spacing:0;color:var(--gold)}
.site-h{transition:background .35s,border-color .35s,box-shadow .35s}
.site-h .wrap{transition:max-width .4s cubic-bezier(.2,.8,.2,1),margin .4s,border-radius .4s,background .35s,box-shadow .35s,height .35s,padding .4s}
.site-h.lx-float{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-h.lx-float .wrap{max-width:1160px;margin-top:10px;height:60px;border-radius:20px;padding-inline:18px;
  background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:saturate(1.7) blur(18px);-webkit-backdrop-filter:saturate(1.7) blur(18px);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 18px 40px -22px rgba(6,18,31,.45)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:10%;right:10%;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--gold-2));transform:scaleX(0);transition:transform .3s}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}

/* gold progress line under the header */
.lx-prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--champ-2),var(--champ));pointer-events:none}

/* ---------- home hero: Miami waterfront at blue hour under a deep navy veil ---------- */
.hero.lx-dark{position:relative;isolation:isolate;color:#F2F6FA;margin-top:-68px;padding-top:calc(68px + clamp(44px,7vw,92px));
  background:
   radial-gradient(1000px 520px at 50% -10%,rgba(14,149,174,.30),transparent 62%),
   radial-gradient(800px 460px at 90% 20%,rgba(217,164,65,.20),transparent 60%),
   linear-gradient(180deg,rgba(4,12,22,.78) 0%,rgba(5,14,26,.86) 50%,var(--navy) 100%),
   url(/img/homes/condo-towers-bay.jpg) center 35%/cover no-repeat}
.hero.lx-dark::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;z-index:-1;background:linear-gradient(180deg,transparent,var(--navy))}
.hero.lx-dark .h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero.lx-dark .gx{background-image:linear-gradient(95deg,#F6E7C6 0%,#EAD3A2 35%,#D9A441 70%,#9FD8F0 100%)!important}
.hero.lx-dark .hero-sub{color:rgba(228,236,244,.82)}
.hero.lx-dark .newpill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero.lx-dark .newpill b{background:linear-gradient(135deg,var(--champ),var(--champ-2));color:#1A1203}
.hero.lx-dark .btn:not(.ghost){background:linear-gradient(135deg,#0E95AE,#0A7A8F);box-shadow:0 14px 34px -12px rgba(14,149,174,.75)}
.hero.lx-dark .btn.ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.28)}
.hero.lx-dark .btn.ghost:hover{background:rgba(255,255,255,.14)}
.hero.lx-dark .pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#fff;box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero.lx-dark .pill .pl{background:linear-gradient(135deg,var(--champ),var(--champ-2));color:#1A1203}
.hero.lx-dark .pstage{filter:drop-shadow(0 40px 70px rgba(0,0,0,.5))}
.hero.lx-dark .pmain{box-shadow:0 0 0 1px rgba(234,211,162,.22)}
.hero.lx-dark .notif{color:var(--ink)}
/* the header sits clear over the photo until you scroll */
.lx-onhero .site-h:not(.lx-float){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.lx-onhero .site-h:not(.lx-float) .nav a,.lx-onhero .site-h:not(.lx-float) .logo b{color:#fff}
.lx-onhero .site-h:not(.lx-float) .logo small{color:var(--champ)}
.lx-onhero .site-h:not(.lx-float) .icon-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.lx-onhero .site-h:not(.lx-float) .toggle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
/* the marquee band right under the hero continues the dark */
.lx-dark + .lx-ribbon + .band.tight,.lx-dark + .band.tight{background:var(--navy)}
.lx-dark + .lx-ribbon + .band.tight .eyebrow,.lx-dark + .band.tight .eyebrow{color:var(--champ)!important;opacity:.85}
.lx-dark + .lx-ribbon + .band.tight .marq span,.lx-dark + .band.tight .marq span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#EEF3F8}

/* ---------- neighborhood ribbon under the hero ---------- */
.lx-ribbon{background:var(--navy);padding:clamp(18px,3vw,34px) 0 clamp(26px,3.5vw,40px);overflow:hidden;position:relative}
.lx-ribbon .rh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.lx-ribbon .rh p{font-family:var(--serif);font-style:italic;color:var(--champ);font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.lx-ribbon .rh a{color:rgba(238,243,248,.8);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.lx-ribbon .rh a:hover{color:#fff}
.lx-ribbon .rail{display:flex;gap:16px;width:max-content;animation:lxrail 80s linear infinite}
.lx-ribbon:hover .rail,.lx-ribbon:focus-within .rail{animation-play-state:paused}
@keyframes lxrail{to{transform:translateX(-50%)}}
.lx-nb{position:relative;width:280px;height:340px;flex:none;border-radius:22px;overflow:hidden;color:#fff;text-decoration:none;background:#0A1C2E center/cover;
  box-shadow:0 0 0 1px rgba(234,211,162,.14),0 26px 50px -28px rgba(0,0,0,.8);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lx-nb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,12,22,0) 35%,rgba(4,12,22,.86));transition:opacity .4s}
.lx-nb:hover{transform:translateY(-6px)}
.lx-nb .t{position:absolute;left:18px;right:18px;bottom:16px}
.lx-nb small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);opacity:.9}
.lx-nb b{display:block;font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.05;margin-top:4px}
.lx-nb i{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transform:translateY(-4px);transition:.3s}
.lx-nb:hover i{opacity:1;transform:none}
@media (max-width:640px){.lx-nb{width:210px;height:260px}.lx-nb b{font-size:25px}}

/* ---------- cards: real edges, they lean toward the mouse with a soft light ---------- */
.card,.stat,.area,.fc,.proc .pr{--mx:50%;--my:50%}
.lx-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.lx-tilt.lx-on{transition:transform .12s linear,box-shadow .4s;box-shadow:0 30px 60px -30px rgba(6,40,60,.45)}
.lx-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(234,211,162,.16),transparent 45%)}
.lx-tilt.lx-on::after{opacity:1}
.card,.stat,.fc{position:relative}
.card{border-color:color-mix(in srgb,var(--line) 70%,#B9C8D3)}
:root[data-theme="dark"] .card{border-color:var(--line)}

/* ---------- team: monograms become portrait-style medallions ---------- */
.avatar{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:.02em;font-size:46px!important;
  box-shadow:0 0 0 3px var(--surface),0 0 0 4.5px var(--champ-2),0 22px 40px -18px rgba(6,18,31,.45)!important}

/* ---------- section headings: a short champagne rule under the eyebrow ---------- */
.sec-h .eyebrow{display:inline-flex;align-items:center;gap:10px}
.sec-h .eyebrow::before,.sec-h:not(.left) .eyebrow::after{content:"";width:22px;height:1px;background:currentColor;opacity:.5}

/* ---------- dark bands: champagne eyebrows and hairlines ---------- */
.band.night{background:radial-gradient(800px 420px at 85% 0%,rgba(14,149,174,.22),transparent 60%),var(--navy)}
.band.night .eyebrow,.cta .eyebrow{color:var(--champ)}
.band.night.round{box-shadow:0 0 0 1px var(--lx-line) inset}

/* ---------- closing call to action over a waterfront photograph ---------- */
.band.cta{position:relative;isolation:isolate;background:
  radial-gradient(700px 420px at 92% 0%,rgba(217,164,65,.32),transparent 60%),
  linear-gradient(140deg,rgba(10,122,143,.86),rgba(6,18,31,.94) 70%),
  url(/img/homes/waterfront-villa.jpg) center/cover no-repeat}
.band.cta .form{box-shadow:0 0 0 1px rgba(234,211,162,.25),0 40px 90px -30px rgba(0,0,0,.6)}
.band.cta .h2{color:#fff}

/* ---------- footer: deep navy with the gold mark ---------- */
.site-f{background:var(--navy);color:rgba(220,230,238,.66);border-top:1px solid var(--lx-line)}
.site-f h4{color:var(--champ)}
.site-f a{color:rgba(228,236,244,.74)}
.site-f a:hover{color:#fff}
.site-f .logo b,.site-f .logo{color:#fff}
.site-f .logo small{color:var(--champ)}
.site-f a[href^="tel:"]{color:#fff!important}
.site-f .legal{border-top-color:rgba(255,255,255,.1)}
.site-f .legal b,.site-f .legal strong,.site-f .eho{color:rgba(240,244,248,.9)}

/* ---------- questions glide open ---------- */
.faq details{transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 18px 40px -26px rgba(6,40,60,.4)}
.faq details .lx-body{overflow:hidden;transition:height .35s cubic-bezier(.2,.8,.2,1)}

/* ---------- headline words arrive one by one with a light sweep ---------- */
.lx-w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s}
.lx-go .lx-w{opacity:1;transform:none;filter:none}
.lx-sweep{position:relative}
.lx-sweep::after{content:"";position:absolute;inset:-10% -5%;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;mix-blend-mode:soft-light;opacity:0}
.lx-go.lx-sweep::after{animation:lxsweep 1.6s .9s ease-out forwards}
@keyframes lxsweep{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-30% 0}}

/* ---------- phones ---------- */
@media (max-width:700px){
  .hero.lx-dark{margin-top:-68px;padding-top:calc(68px + 34px)}
  .hero .pillrow{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);width:100%;padding-bottom:4px}
  .hero .pillrow::-webkit-scrollbar{display:none}
  .hero .pillrow .pill{flex:none}
  .hero .btns.c{width:100%;flex-direction:column}
  .hero .btns.c .btn{width:100%}
  .site-h.lx-float .wrap{margin-top:8px;margin-inline:8px;height:56px;padding-inline:12px}
  .lx-ribbon .rh a{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lx-ribbon .rail{animation:none}
  .lx-w{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  .lx-sweep::after{display:none}
  .lx-tilt{transform:none!important}
}
.proc .pr{position:relative}
@media (max-width:600px){.avatar{font-size:36px!important}}
.hero.lx-dark .checks{color:rgba(228,236,244,.8)}
.hero.lx-dark .checks svg{color:var(--champ)}