/* ============================================================
   HOME-3 — "Twilight" palette. Alternative front page at /home-3/,
   scoped entirely under body.home-alt3 (set in functions.php), so the
   live front page and every other template are untouched.

   Taken from the second reference photograph (Lower Manhattan at dusk,
   full moon) — a lilac and light-blue scene, not a black one:
     lilac       #B9A9DC / #CFC3E8   the upper sky, accents on dark
     periwinkle  #7E93D8 / #9DB2E6   mid sky
     blush       #E9B6CB             the thin band at the horizon
     city blue   #4C63B0 / #3A5C93   lit facades, buttons
     twilight    #2B3A78 / #24305F   the dark bands and the hero
     mist        #F3F0FA / #E9E4F5   the page ground
     indigo      #232A4D             type on light
   ============================================================ */

body.home-alt3{
  --paper:#F3F0FA;
  --paper-2:#E9E4F5;
  --tint:#E9E4F5;
  --text:#232A4D;
  --ink:#2B3A78;          /* dark bands are twilight blue, never black */
  --ink-2:#37478C;
  --ink-3:#4C63B0;
  --muted:#5C6488;
  --muted-2:#7A80A4;
  --hair:#DFD9EE;
  --gold:#4B4E9E;         /* the only accent that carries text on mist (6.5:1) */
  --gold-2:#6459B8;
  --gold-soft:#E4DDF6;
  --accent:#4B4E9E;
  --on-dark:#EFECF9;
  --on-dark-mut:#B6BCE0;
  --on-dark-line:#3F4E96;
  --lilac:#CFC3E8;
  --periwinkle:#9DB2E6;
  --blush:#E9B6CB;
  --ramp:linear-gradient(90deg,#9B8FD8,#7E93D8);
}

/* page ground: lilac mist, not white */
body.home-alt3{background:var(--paper);color:var(--text)}
.home-alt3 .section{background:transparent}
.home-alt3 .section--paper2{background:var(--paper-2)}

/* dark bands: twilight, opening to the lilac end of the sky */
.home-alt3 .section--dark{
  background:linear-gradient(160deg,#24305F 0%,#2B3A78 46%,#4C63B0 100%);
  color:var(--on-dark)}
.home-alt3 .cta{background:linear-gradient(100deg,#2B3A78,#5A72C0)}

/* hero: the photograph mapped into the lilac ramp, the sky's own gradient
   behind it, and a twilight scrim holding the left half for the headline */
.home-alt3 .hero--dark{
  background:linear-gradient(180deg,#37478C 0%,#5A72C0 34%,#8E9CDC 58%,#C9AFD8 76%,#E9B6CB 88%,#4C63B0 100%);
  color:#F7F5FD}
.home-alt3.home .hero-photo{
  display:block;left:0;right:0;width:100%;   /* full-bleed, not a right-hand panel */
  background:url(../img/hero-nyc-moonrise-twilight.jpg) center 64%/cover no-repeat}
.home-alt3.home .hero-photo::after{
  background:linear-gradient(to right,
    #24305F 0%, rgba(36,48,95,.92) 12%, rgba(36,48,95,.8) 24%,
    rgba(43,58,120,.58) 38%, rgba(76,99,176,.3) 54%, rgba(142,156,220,.1) 72%,
    rgba(201,175,216,0) 100%)}
.home-alt3 .hero--dark h1{color:#FFFFFF}
.home-alt3 .hero--dark .hero-sub{color:#F0EBFA}
.home-alt3 .hero--dark p{color:#DED8F2}
/* the moon, drawn as a radial gradient so the skin's global
   border-radius:0 rule cannot square it off */
.home-alt3 .hero--dark::before{
  content:"";position:absolute;right:13%;top:22%;width:200px;height:200px;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 50% 50%,
    #FBF8F2 0 12%, rgba(251,248,242,.5) 15%, rgba(228,222,246,.18) 34%, rgba(228,222,246,0) 62%)}
.home-alt3 .hero__inner{position:relative;z-index:3}

/* header: twilight, so the hero reads as one piece */
.home-alt3 .site-header{background:rgba(36,48,95,.93);border-bottom-color:#3F4E96}
.home-alt3 .site-header .nav > a:not(.btn){color:#E7E4F5}
.home-alt3 .site-header .nav > a:not(.btn):hover{color:#fff}
.home-alt3 .site-header .nav > a.btn-phone{color:#232A4D}
/* the wordmark is black artwork — invert it on the twilight bar */
.home-alt3 .site-header .logo img,
.home-alt3 .site-header .brand img,
.home-alt3 .site-header a[class*="logo"] img{filter:invert(1) brightness(1.7)}
.home-alt3 .btn-phone{background:#FFFFFF;color:#232A4D;border-color:#CFC3E8}

/* eyebrow: indigo on mist, lilac on twilight, with a lilac ramp dash */
.home-alt3 .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold)}
.home-alt3 .eyebrow::before{content:"";width:26px;height:2px;flex:none;background:var(--ramp)}
.home-alt3 .hero--dark .eyebrow,
.home-alt3 .section--dark .eyebrow,
.home-alt3 .cta .eyebrow{color:var(--lilac)}
.home-alt3 .hero--dark .eyebrow::before,
.home-alt3 .section--dark .eyebrow::before,
.home-alt3 .cta .eyebrow::before{background:linear-gradient(90deg,#CFC3E8,#9DB2E6)}

/* one button, every ground: city blue with white type (5.7:1) */
.home-alt3 .btn-gold,
.home-alt3 .nav > a.btn-gold,
.home-alt3 .hero--dark .btn-gold,
.home-alt3 .section--dark .btn-gold,
.home-alt3 .cta .btn-gold,
.home-alt3 .bcard-link,
.home-alt3 .vf-pill.is-active,
.home-alt3 .inext{background:#4C63B0;background-image:none;color:#fff;border-color:#4C63B0;box-shadow:none}
.home-alt3 .btn-gold:hover,
.home-alt3 .nav > a.btn-gold:hover,
.home-alt3 .hero--dark .btn-gold:hover,
.home-alt3 .section--dark .btn-gold:hover,
.home-alt3 .cta .btn-gold:hover,
.home-alt3 .bcard-link:hover,
.home-alt3 .inext:hover:not(:disabled){background:#3F5498;color:#fff}
.home-alt3 .btn::after{content:none}
.home-alt3 .btn-on-dark{border-color:rgba(207,195,232,.5);color:#EFECF9}
.home-alt3 .btn-on-dark:hover{border-color:#CFC3E8;color:#fff;background:rgba(207,195,232,.14)}
.home-alt3 .btn-ghost:hover,
.home-alt3 .btn-phone:hover{border-color:#4B4E9E}
.home-alt3 .btn-phone .ico{color:#4B4E9E}

/* cards on mist: near-white panels, lilac rule on hover */
.home-alt3 .pxcard,
.home-alt3 .pcard,
.home-alt3 .bcard,
.home-alt3 .tcard,
.home-alt3 .modelcard{background:#FCFBFE;border-color:var(--hair)}
.home-alt3 .pxcard::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--ramp);transition:width .35s ease}
.home-alt3 .pxcard:hover::before{width:100%}
.home-alt3 .tcard{position:relative}
.home-alt3 .tcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:var(--ramp);
  opacity:0;transition:opacity .3s ease}
.home-alt3 .tcard:hover::before{opacity:1}
.home-alt3 .tbody .role{color:#5C6488}
.home-alt3 .tbody a{color:#4B4E9E;border-bottom-color:#4B4E9E}
.home-alt3 .tphoto img{filter:grayscale(1) contrast(1.04)}
.home-alt3 .tcard:hover .tphoto img{filter:grayscale(0)}

/* stats on the twilight band: lilac figures */
.home-alt3 .stat{background:transparent}
.home-alt3 .stats{background:rgba(239,236,249,.16)}
.home-alt3 .stat b{color:#CFC3E8}
.home-alt3 .stat span{color:#B6BCE0}

/* section heads: a short lilac rule; blush appears once, here, on dark */
.home-alt3 .s-head h2::after,
.home-alt3 .stats-head h2::after{
  content:"";display:block;width:64px;height:2px;margin-top:18px;background:var(--ramp)}
.home-alt3 .stats-head h2::after{margin-left:auto;margin-right:auto}
.home-alt3 .section--dark .s-head h2::after,
.home-alt3 .section--dark .stats-head h2::after{background:linear-gradient(90deg,#CFC3E8,#E9B6CB)}

/* intake widget: twilight panel */
.home-alt3 .intake{background:linear-gradient(160deg,#2B3A78,#202B55);border-color:#3F4E96}
.home-alt3 .ipdot.done{background:#CFC3E8}
.home-alt3 .ipdot.active{background:rgba(207,195,232,.5)}
.home-alt3 .iopt.sel{border-color:#CFC3E8;background:rgba(207,195,232,.12)}
.home-alt3 .iopt:hover{border-color:rgba(207,195,232,.45)}

/* the dotted art belongs to Noir — off here, as on the classic skin */
.home-alt3 .dot-ic{display:none}

/* no dash before the eyebrow anywhere */
.home-alt3 .eyebrow::before{display:none}
.home-alt3 .eyebrow{gap:0}