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

   Three colours, nothing else:
     navy    #002E48   ink on light, dark bands, the deep end of every ramp
     azure   #086B9E   primary buttons, links, the hero's own blue
     violet  #5B3097   the accent: hovers, rules, the CTA field

   All three carry white type (14.2:1, 5.8:1, 9.1:1) and all three read as
   text on white, so the page needs no fourth colour. Light grounds are white
   and one azure tint #EEF4F8 — no pink, ever.
   The hero photograph is supplied pre-composed: its blue field is #076B9E,
   the brand azure itself, so nothing is washed over it.
   ============================================================ */

body.home-alt{
  --paper:#FFFFFF;
  --paper-2:#EEF4F8;      /* azure tint */
  --tint:#EEF4F8;
  --text:#002E48;
  --ink:#002E48;
  --ink-2:#0A4A70;
  --ink-3:#086B9E;
  --muted:#4A6377;
  --muted-2:#7E93A2;
  --hair:#D3E2EC;
  --gold:#086B9E;         /* azure carries links and small accents */
  --gold-2:#5B3097;       /* violet is the second half of every ramp */
  --gold-soft:#DCEAF3;
  --accent:#086B9E;
  --navy:#002E48;
  --azure:#086B9E;
  --violet:#5B3097;
  --ramp:linear-gradient(90deg,#086B9E,#5B3097);   /* azure into violet */
}

body.home-alt{background:var(--paper);color:var(--text)}
.home-alt .section{background:transparent}
.home-alt .section--paper2{background:var(--paper-2)}
/* the second light band is violet-tinted, so the page alternates
   white -> azure tint -> navy -> white -> violet tint -> navy */


/* hero: the supplied banner, full-bleed and untouched. Its blue field
   already holds the left half, so no scrim is layered over it. */
.home-alt .hero--dark{background:#086B9E;color:#FFFFFF}
.home-alt.home .hero-photo{
  display:block;left:0;right:0;width:100%;   /* full-bleed, not a right-hand panel */
  background:url(../img/hero-nyc-brand.jpg) center center/cover no-repeat}
.home-alt.home .hero-photo::after{
  /* only a touch of navy at the very edge, for very wide viewports where
     cover starts to reveal the flat blue */
  background:linear-gradient(to right,rgba(0,46,72,.32) 0%,rgba(0,46,72,.12) 18%,rgba(0,46,72,0) 42%)}
.home-alt .hero--dark h1{color:#FFFFFF}
.home-alt .hero--dark .hero-sub{color:#EAF3F9}
.home-alt .hero--dark p{color:#CFE3EF}
.home-alt .hero--dark .eyebrow{color:#BFE0F0}
.home-alt .hero--dark .eyebrow::before{background:linear-gradient(90deg,#BFE0F0,#C4A9E6)}
.home-alt .hero__inner{position:relative;z-index:3}

/* header: navy, so it sits on top of the hero's blue as one piece */
.home-alt .site-header{background:rgba(0,46,72,.94);border-bottom-color:#0A4A70}
.home-alt .site-header .nav > a:not(.btn){color:#DCEAF3}
.home-alt .site-header .nav > a:not(.btn):hover{color:#FFFFFF}
.home-alt .site-header .brand img,
.home-alt .site-header .logo img{filter:invert(1) brightness(1.8)}
.home-alt .site-header .nav > a.btn-phone{background:#FFFFFF;color:#002E48;border-color:#8FB6CC}

/* dark bands: navy into azure, the same two colours as the hero */
.home-alt .section--dark{
  background:linear-gradient(160deg,#002E48 0%,#04486E 55%,#086B9E 100%);
  color:#EAF3F9}
.home-alt .cta{background:linear-gradient(100deg,#3A1E62,#5B3097)}

/* eyebrow: azure on light, pale azure on navy, dash runs azure into violet */
.home-alt .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--azure)}
.home-alt .eyebrow::before{content:"";width:26px;height:2px;flex:none;background:var(--ramp)}
.home-alt .section--dark .eyebrow,
.home-alt .cta .eyebrow{color:#BFE0F0}
.home-alt .section--dark .eyebrow::before,
.home-alt .cta .eyebrow::before{background:linear-gradient(90deg,#BFE0F0,#C4A9E6)}

/* one button, every ground: azure with white type (5.8:1), violet on hover */
.home-alt .btn-gold,
.home-alt .nav > a.btn-gold,
.home-alt .hero--dark .btn-gold,
.home-alt .section--dark .btn-gold,
.home-alt .cta .btn-gold,
.home-alt .bcard-link,
.home-alt .vf-pill.is-active,
.home-alt .inext{background:#086B9E;background-image:none;color:#fff;border-color:#086B9E;box-shadow:none}
.home-alt .btn-gold:hover,
.home-alt .nav > a.btn-gold:hover,
.home-alt .hero--dark .btn-gold:hover,
.home-alt .section--dark .btn-gold:hover,
.home-alt .cta .btn-gold:hover,
.home-alt .bcard-link:hover,
.home-alt .inext:hover:not(:disabled){background:#5B3097;color:#fff}
.home-alt .btn::after{content:none}
/* on the hero and the navy bands the outline button is light */
.home-alt .hero--dark .btn-on-dark,
.home-alt .section--dark .btn-on-dark,
.home-alt .cta .btn-on-dark{border-color:rgba(255,255,255,.5);color:#FFFFFF}
.home-alt .hero--dark .btn-on-dark:hover,
.home-alt .section--dark .btn-on-dark:hover,
.home-alt .cta .btn-on-dark:hover{border-color:#FFFFFF;background:rgba(255,255,255,.12);color:#FFFFFF}
.home-alt .btn-ghost{border-color:#C6D9E5;color:#002E48;background:#fff}
.home-alt .btn-ghost:hover,
.home-alt .btn-phone:hover{border-color:#086B9E}
.home-alt .btn-phone .ico{color:#086B9E}

/* cards: white panels, azure-to-violet rule on hover */
.home-alt .pxcard,
.home-alt .pcard,
.home-alt .bcard,
.home-alt .tcard,
.home-alt .modelcard{background:#FFFFFF;border-color:var(--hair)}
.home-alt .pxcard::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--ramp);transition:width .35s ease}
.home-alt .pxcard:hover::before{width:100%}
.home-alt .tcard{position:relative}
.home-alt .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-alt .tcard:hover::before{opacity:1}
.home-alt .tbody .role{color:#5B3097}
.home-alt .tbody a{color:#086B9E;border-bottom-color:#086B9E}
.home-alt .tphoto img{filter:grayscale(1) contrast(1.04)}
.home-alt .tcard:hover .tphoto img{filter:grayscale(0)}

/* stats on the navy band */
.home-alt .stat{background:transparent}
.home-alt .stats{background:rgba(234,243,249,.14)}
.home-alt .stat b{color:#BFE0F0}
.home-alt .stat span{color:#9FBACB}

/* section heads: a short azure-to-violet rule */
.home-alt .s-head h2::after,
.home-alt .stats-head h2::after{
  content:"";display:block;width:64px;height:2px;margin-top:18px;background:var(--ramp)}
.home-alt .stats-head h2::after{margin-left:auto;margin-right:auto}
.home-alt .section--dark .s-head h2::after,
.home-alt .section--dark .stats-head h2::after{background:linear-gradient(90deg,#BFE0F0,#C4A9E6)}

/* intake widget: navy panel, violet states */
.home-alt .intake{background:linear-gradient(160deg,#04486E,#002E48);border-color:#0A4A70}
.home-alt .ipdot.done{background:#C4A9E6}
.home-alt .ipdot.active{background:rgba(196,169,230,.5)}
.home-alt .iopt.sel{border-color:#C4A9E6;background:rgba(196,169,230,.14)}
.home-alt .iopt:hover{border-color:rgba(196,169,230,.45)}

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

/* --- CTA hierarchy and the Clients field ---------------------------------
   Primary CTA is the violet by default and only darkens on hover — no blue,
   no outline. Secondary CTAs ("View all articles", "Read article") are
   outlined so they never compete with a primary. The powder-pink band is
   gone for good: light sections are white or the azure tint, nothing else.
   -------------------------------------------------------------------- */

/* primary: violet, darker violet on hover, no border colour change ever */
.home-alt .btn-gold,
.home-alt .nav > a.btn-gold,
.home-alt .hero--dark .btn-gold,
.home-alt .section--dark .btn-gold,
.home-alt .cta .btn-gold,
.home-alt .vf-pill.is-active,
.home-alt .inext{
  background:#5B3097;background-image:none;color:#fff;border:1px solid #5B3097;box-shadow:none}
.home-alt .btn-gold:hover,
.home-alt .nav > a.btn-gold:hover,
.home-alt .hero--dark .btn-gold:hover,
.home-alt .section--dark .btn-gold:hover,
.home-alt .cta .btn-gold:hover,
.home-alt .inext:hover:not(:disabled){
  background:#4A2679;background-image:none;border-color:#4A2679;color:#fff;outline:none}
.home-alt .btn-gold:focus,
.home-alt .btn-gold:active{outline:none;border-color:#4A2679}
.home-alt .btn-gold:focus-visible{outline:2px solid #5B3097;outline-offset:2px}

/* secondary: outlined, never filled */
.home-alt .bcard-link,
.home-alt #blog .btn-gold,
.home-alt .blog-teaser .btn-gold{
  background:transparent;background-image:none;color:#5B3097;
  border:1px solid #5B3097;box-shadow:none}
.home-alt .bcard-link:hover,
.home-alt #blog .btn-gold:hover,
.home-alt .blog-teaser .btn-gold:hover{
  background:rgba(91,48,151,.08);border-color:#4A2679;color:#4A2679}
.home-alt .section--dark .bcard-link,
.home-alt .section--dark #blog .btn-gold{color:#D9C9EF;border-color:rgba(217,201,239,.6)}

/* Our Clients: the supplied purple field with the statue */
.home-alt #clients.section--dark{background:#5B3097}
.home-alt #clients.section--dark::before{
  background:url(../img/clients-liberty-purple.jpg) center center/cover no-repeat;opacity:1}
.home-alt #clients.section--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(91,48,151,.45) 0%,rgba(91,48,151,.2) 24%,rgba(91,48,151,0) 46%)}
.home-alt #clients .eyebrow{color:#E4D8F5}
.home-alt #clients .eyebrow::before{background:linear-gradient(90deg,#E4D8F5,#BFE0F0)}
.home-alt #clients .s-head h2::after{background:linear-gradient(90deg,#E4D8F5,#BFE0F0)}

/* the powder-pink band is retired: these sections are plain */
.home-alt #team,
.home-alt #blog{background:transparent}

/* --- round 2 of the client's notes -------------------------------------- */

/* header and footer are black */
.home-alt .site-header{background:#000000;border-bottom-color:#1A1A1A}
.home-alt .site-header .nav > a:not(.btn){color:#F2F2F2}
.home-alt .site-header .nav > a:not(.btn):hover{color:#FFFFFF}
.home-alt .site-header .brand img,
.home-alt .site-header .logo img{filter:invert(1) brightness(2)}
.home-alt .site-header .nav > a.btn-phone{background:transparent;color:#FFFFFF;border-color:#3A3A3A}
.home-alt .site-header .nav > a.btn-phone .ico{color:#FFFFFF}
.home-alt .site-header .nav > a.btn-phone:hover{border-color:#5B3097}
.home-alt .footer{background:#000000;color:#C9C9C9}
.home-alt .footer a{color:#E6E6E6}
.home-alt .footer a:hover{color:#FFFFFF}
.home-alt .footer h4,
.home-alt .footer strong{color:#FFFFFF}

/* Our Clients: white type on the violet field */
.home-alt #clients.section--dark,
.home-alt #clients.section--dark p,
.home-alt #clients.section--dark .lede,
.home-alt #clients.section--dark li{color:#FFFFFF}
.home-alt #clients.section--dark h2,
.home-alt #clients.section--dark h3{color:#FFFFFF}

/* "View all articles" is a primary CTA again — only the in-card
   "Read article" stays outlined */
.home-alt #blog .btn-gold,
.home-alt .blog-teaser .btn-gold{
  background:#5B3097;background-image:none;color:#fff;border:1px solid #5B3097}
.home-alt #blog .btn-gold:hover,
.home-alt .blog-teaser .btn-gold:hover{
  background:#4A2679;border-color:#4A2679;color:#fff}

/* --- round 3 of the client's notes -------------------------------------- */

/* Our Clients: the new violet graphic. Its flat field is #5E318E, so the
   section ground matches it exactly and the seam disappears. */
.home-alt #clients.section--dark{background:#5E318E}
.home-alt #clients.section--dark::before{
  background:url(../img/clients-harbor.jpg) center center/cover no-repeat;opacity:1}
.home-alt #clients.section--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(94,49,142,.45) 0%,rgba(94,49,142,.2) 24%,rgba(94,49,142,0) 46%)}

/* attorney cards: the "Learn more" link is black, not blue */
.home-alt .tbody a{color:#000000;border-bottom-color:#000000}
.home-alt .tbody a:hover{color:#5B3097;border-bottom-color:#5B3097}

/* By the Numbers: a light hairline between the figures */
.home-alt .stats{background:transparent;gap:0}
.home-alt .stat{background:transparent;border-left:1px solid rgba(255,255,255,.16)}
.home-alt .stat:first-child{border-left:0}
@media(max-width:940px){
  .home-alt .stat{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .home-alt .stat:first-child{border-top:0}
}

/* --- round 4 of the client's notes -------------------------------------- */

/* the "Practice Areas" trigger is a span, not a nav link — it kept the
   light-theme ink and went invisible on the black bar */
.home-alt .site-header .subnav__t,
.home-alt .site-header .subnav > span,
.home-alt .site-header .subnav__t *{color:#FFFFFF}
.home-alt .site-header .subnav__t:hover{color:#FFFFFF;opacity:.82}

/* By the Numbers: every hairline the same light colour, outside included */
.home-alt .stats{border:1px solid rgba(255,255,255,.16)}
.home-alt .stat{border-left:1px solid rgba(255,255,255,.16)}
.home-alt .stat:first-child{border-left:0}
@media(max-width:940px){
  .home-alt .stat{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .home-alt .stat:first-child{border-top:0}
}

/* --- round 5: the new header banner ------------------------------------- */

/* the supplied wide frame (2000x833, ratio 2.40), taken down one step to
   1800px / q86 — the composition is untouched, only the file is lighter.
   Its flat field is #076B9E, the brand azure, so the hero ground matches it
   and the seam at the left edge disappears. */
.home-alt.home .hero-photo{
  background:url(../img/hero-nyc-wide.jpg) center center/cover no-repeat}
.home-alt.home .hero-photo::after{
  background:linear-gradient(to right,rgba(0,46,72,.28) 0%,rgba(0,46,72,.1) 18%,rgba(0,46,72,0) 40%)}
/* the frame is wide and shallow, so the hero band comes down a little to
   match it rather than cropping the skyline away */
.home-alt.home .hero__inner{padding-top:48px;padding-bottom:44px}
@media(max-width:900px){
  .home-alt.home .hero__inner{padding-top:36px;padding-bottom:34px}
}

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