/* ============================================================
   "Classic" skin — a simplified, conventional look for the same
   site/content. Activated by body.skin-classic (Customizer →
   Design Skin, or the admin-bar "Design" toggle). Loaded after
   main.css only when the skin is on; everything is scoped under
   .skin-classic so switching back to Noir is a no-op.
   - Fraunces headings (same as Noir) over Inter body text
   - Real gold + navy accents instead of strict B&W
   - Stock photography (skyline hero, handshake) instead of the
     dotted 3D art; dotted card icons hidden
   ============================================================ */

body.skin-classic{
  --serif:'Fraunces','Georgia',serif;   /* headings stay Fraunces on both skins */
  --display:'Fraunces','Georgia',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --ink:#173A5E;    /* black sections become navy on the classic skin */
  --ink-2:#1E4569;
  --gold:#1B4E8A;   /* accent is blue on the classic skin */
  --gold-2:#2F6CB3;
  --gold-soft:#D8E4F2;
  --accent:#1B4E8A;
}

/* type: headings inherit the Noir weight/tracking (Fraunces 700 / -.022em) */
.skin-classic .hero-sub,.skin-classic .whylead{font-weight:600}

/* accents: real gold CTAs, navy links */
.skin-classic .btn-gold{background:var(--gold);color:#fff}
.skin-classic .btn-gold:hover{background:var(--gold-2)}
.skin-classic .hero--dark .btn-gold,
.skin-classic .section--dark .btn-gold,
.skin-classic .cta .btn-gold{background:var(--gold);color:#fff}
.skin-classic .hero--dark .btn-gold:hover,
.skin-classic .section--dark .btn-gold:hover,
.skin-classic .cta .btn-gold:hover{background:var(--gold-2)}
.skin-classic .bcard-link,.skin-classic .vf-pill.is-active{background:var(--accent);border-color:var(--accent)}
.skin-classic .eyebrow{color:var(--gold)}
.skin-classic .hero--dark .eyebrow,.skin-classic .section--dark .eyebrow{color:var(--on-dark-mut,#A7ADB5)}

/* hero: generic skyline photo instead of the dotted Femida */
.skin-classic.home .hero-photo{
  background:url(../img/corporate-towers2.jpg) center/cover no-repeat}
.skin-classic.home .hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right, var(--ink) 0%, rgba(23,58,94,.9) 6%, rgba(23,58,94,.74) 14%, rgba(23,58,94,.56) 22%, rgba(23,58,94,.4) 32%, rgba(23,58,94,.27) 44%, rgba(23,58,94,.16) 56%, rgba(23,58,94,.08) 70%, rgba(23,58,94,.03) 84%, rgba(23,58,94,0) 100%)}

/* dotted 3D icons off */
.skin-classic .dot-ic{display:none}

/* Our Clients: navy section, handshake as a faint full-width backdrop */
.skin-classic #clients.section--dark{position:relative}
.skin-classic #clients.section--dark::before{content:"";position:absolute;inset:0;
  background:url(../img/handshake-classic.jpg) center/cover no-repeat;opacity:.12}
.skin-classic #clients.section--dark .wrap{position:relative;display:block}
.skin-classic #clients .clients-art{display:none}

/* --- simplification round 2 --- */

/* two-level menu: plain list, no icons/subtitles/chevrons */
.skin-classic .mega__area .ico,
.skin-classic .mega__area .txt > span,
.skin-classic .mega__area .chev{display:none}
.skin-classic .mega__area{padding:10px 14px}
.skin-classic .mega__area:hover,.skin-classic .mega__area.active{box-shadow:none}
.skin-classic .mega__area b{min-height:0}

/* Featured In: the running strip is back — the classic skin used to freeze
   the animation, drop the edge fade and hide everything past the twelfth
   logo. All of that is removed, so the marquee scrolls with the full set
   again, exactly as on Noir. prefers-reduced-motion still stops it. */

/* Practices: no invert-on-hover theatrics */
.skin-classic .pxcard:hover{background:#fff}
.skin-classic .pxcard:hover h3{color:var(--ink)}
.skin-classic .pxcard:hover p{color:var(--muted)}
.skin-classic .pxcard:hover .arrow{opacity:0}
.skin-classic .pcard h3 a:hover{text-decoration:none}

/* blog cards: Read Article as a solid blue button */
.skin-classic .bcard-link{display:inline-flex;align-items:center;background:var(--gold);color:#fff;
  border:0;border-radius:8px;padding:12px 20px;font-size:.8rem;letter-spacing:.06em;margin-top:18px}
.skin-classic .bcard-link:hover{background:var(--gold-2);color:#fff}

/* single posts define their own --serif/--sans (e.g. #dlx) — keep Fraunces headings
   and Inter body there too */
.skin-classic #dlx,
.skin-classic .post-single,
.skin-classic article{
  --serif:'Fraunces','Georgia',serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif}

/* square corners everywhere — the classic skin has no rounding at all */
.skin-classic *,
.skin-classic *::before,
.skin-classic *::after{border-radius:0 !important}

/* ============================================================
   BRAND — the three-colour system, applied site-wide.
     navy   #002E48  ink, 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 nothing else is needed. Light grounds are white and one
   azure tint #EEF4F8 — no pink, ever.
   Replaces the earlier Cyan Arc block. Revert by deleting this block.
   ============================================================ */

body.skin-classic{
  --ink:#002E48;
  --ink-2:#04486E;
  --ink-3:#086B9E;
  --navy:#002E48;
  --azure:#086B9E;
  --violet:#5B3097;
  --brand-tint:#EEF4F8;
  --ramp:linear-gradient(90deg,#086B9E,#5B3097);
  --gold:#086B9E;
  --gold-2:#5B3097;
  --gold-soft:#DCEAF3;
  --accent:#086B9E;
  --hair:#D3E2EC;
  --on-dark-line:#0A4A70;
}

/* light bands alternate azure tint and violet tint */
.skin-classic .section--paper2{background:var(--brand-tint)}


/* eyebrows carry a 26px slice of the ramp */
.skin-classic .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--azure)}
.skin-classic .eyebrow::before{content:"";width:26px;height:2px;background:var(--ramp);flex:none}
.skin-classic .hero--dark .eyebrow,
.skin-classic .section--dark .eyebrow,
.skin-classic .cta .eyebrow{color:#BFE0F0}
.skin-classic .hero--dark .eyebrow::before,
.skin-classic .section--dark .eyebrow::before,
.skin-classic .cta .eyebrow::before{background:linear-gradient(90deg,#BFE0F0,#C4A9E6)}

/* dark grounds: navy into azure. The CTA is the violet field. */
.skin-classic .hero--dark,
.skin-classic .section--dark{
  background:linear-gradient(160deg,#002E48 0%,#04486E 55%,#086B9E 100%)}
.skin-classic .cta{background:linear-gradient(100deg,#3A1E62,#5B3097)}

/* hero photograph: the supplied banner, whose blue field is the brand azure */
.skin-classic.home .hero-photo{
  left:0;right:0;width:100%;
  background:url(../img/hero-nyc-brand.jpg) center center/cover no-repeat}
.skin-classic.home .hero-photo::after{
  background:linear-gradient(to right,rgba(0,46,72,.32) 0%,rgba(0,46,72,.12) 18%,rgba(0,46,72,0) 42%)}

/* Our Clients keeps its backdrop, tinted to the navy end */
.skin-classic #clients.section--dark::before{opacity:.10}
.skin-classic #clients.section--dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,46,72,.9) 0%,rgba(0,46,72,.6) 46%,rgba(0,46,72,.15) 100%)}

/* BUTTONS — one style, every ground: azure with white type, violet on hover */
.skin-classic .btn-gold,
.skin-classic .nav > a.btn-gold,
.skin-classic .hero--dark .btn-gold,
.skin-classic .section--dark .btn-gold,
.skin-classic .cta .btn-gold,
.skin-classic .bcard-link,
.skin-classic .vf-pill.is-active,
.skin-classic .inext{
  background:#086B9E;background-image:none;color:#fff;border-color:#086B9E;box-shadow:none}
.skin-classic .btn-gold:hover,
.skin-classic .nav > a.btn-gold:hover,
.skin-classic .hero--dark .btn-gold:hover,
.skin-classic .section--dark .btn-gold:hover,
.skin-classic .cta .btn-gold:hover,
.skin-classic .bcard-link:hover,
.skin-classic .inext:hover:not(:disabled){background:#5B3097;background-image:none;color:#fff}
.skin-classic .btn::after,
.skin-classic .btn-gold::after,
.skin-classic .bcard-link::after{content:none}
.skin-classic .btn-on-dark{border-color:rgba(255,255,255,.5);color:#fff}
.skin-classic .btn-on-dark:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.skin-classic .btn-ghost:hover,
.skin-classic .btn-phone:hover{border-color:#086B9E}
.skin-classic .btn-phone .ico{color:#086B9E}

/* cards, rules and states */
.skin-classic .pxcard::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--ramp);transition:width .35s ease}
.skin-classic .pxcard:hover::before{width:100%}
.skin-classic .pxcard:hover .arrow{color:var(--azure);opacity:1}
.skin-classic .tcard{position:relative}
.skin-classic .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}
.skin-classic .tcard:hover::before{opacity:1}
.skin-classic .tbody .role{color:#5B3097}
.skin-classic .tbody a{color:#086B9E;border-bottom-color:#086B9E}
.skin-classic .stat b{color:#BFE0F0}
.skin-classic .s-head h2::after,
.skin-classic .stats-head h2::after{
  content:"";display:block;width:64px;height:2px;margin-top:18px;background:var(--ramp)}
.skin-classic .stats-head h2::after{margin-left:auto;margin-right:auto}
.skin-classic .section--dark .s-head h2::after,
.skin-classic .section--dark .stats-head h2::after{background:linear-gradient(90deg,#BFE0F0,#C4A9E6)}

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

/* --- 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 */
.skin-classic .btn-gold,
.skin-classic .nav > a.btn-gold,
.skin-classic .hero--dark .btn-gold,
.skin-classic .section--dark .btn-gold,
.skin-classic .cta .btn-gold,
.skin-classic .vf-pill.is-active,
.skin-classic .inext{
  background:#5B3097;background-image:none;color:#fff;border:1px solid #5B3097;box-shadow:none}
.skin-classic .btn-gold:hover,
.skin-classic .nav > a.btn-gold:hover,
.skin-classic .hero--dark .btn-gold:hover,
.skin-classic .section--dark .btn-gold:hover,
.skin-classic .cta .btn-gold:hover,
.skin-classic .inext:hover:not(:disabled){
  background:#4A2679;background-image:none;border-color:#4A2679;color:#fff;outline:none}
.skin-classic .btn-gold:focus,
.skin-classic .btn-gold:active{outline:none;border-color:#4A2679}
.skin-classic .btn-gold:focus-visible{outline:2px solid #5B3097;outline-offset:2px}

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

/* Our Clients: the supplied purple field with the statue */
.skin-classic #clients.section--dark{background:#5B3097}
.skin-classic #clients.section--dark::before{
  background:url(../img/clients-liberty-purple.jpg) center center/cover no-repeat;opacity:1}
.skin-classic #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%)}
.skin-classic #clients .eyebrow{color:#E4D8F5}
.skin-classic #clients .eyebrow::before{background:linear-gradient(90deg,#E4D8F5,#BFE0F0)}
.skin-classic #clients .s-head h2::after{background:linear-gradient(90deg,#E4D8F5,#BFE0F0)}

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

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

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

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

/* "View all articles" is a primary CTA again — only the in-card
   "Read article" stays outlined */
.skin-classic #blog .btn-gold,
.skin-classic .blog-teaser .btn-gold{
  background:#5B3097;background-image:none;color:#fff;border:1px solid #5B3097}
.skin-classic #blog .btn-gold:hover,
.skin-classic .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. */
.skin-classic #clients.section--dark{background:#5E318E}
.skin-classic #clients.section--dark::before{
  background:url(../img/clients-harbor.jpg) center center/cover no-repeat;opacity:1}
.skin-classic #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 */
.skin-classic .tbody a{color:#000000;border-bottom-color:#000000}
.skin-classic .tbody a:hover{color:#5B3097;border-bottom-color:#5B3097}

/* By the Numbers: a light hairline between the figures */
.skin-classic .stats{background:transparent;gap:0}
.skin-classic .stat{background:transparent;border-left:1px solid rgba(255,255,255,.16)}
.skin-classic .stat:first-child{border-left:0}
@media(max-width:940px){
  .skin-classic .stat{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .skin-classic .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 */
.skin-classic .site-header .subnav__t,
.skin-classic .site-header .subnav > span,
.skin-classic .site-header .subnav__t *{color:#FFFFFF}
.skin-classic .site-header .subnav__t:hover{color:#FFFFFF;opacity:.82}

/* By the Numbers: every hairline the same light colour, outside included */
.skin-classic .stats{border:1px solid rgba(255,255,255,.16)}
.skin-classic .stat{border-left:1px solid rgba(255,255,255,.16)}
.skin-classic .stat:first-child{border-left:0}
@media(max-width:940px){
  .skin-classic .stat{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .skin-classic .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. */
.skin-classic.home .hero-photo{
  background:url(../img/hero-nyc-wide.jpg) center center/cover no-repeat}
.skin-classic.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 */
.skin-classic.home .hero__inner{padding-top:48px;padding-bottom:44px}
@media(max-width:900px){
  .skin-classic.home .hero__inner{padding-top:36px;padding-bottom:34px}
}

/* ============================================================
   INNER TEMPLATES — the brand palette beyond the front page.
   practice-area.css and contact.css each declare their own token
   block in the Noir near-black (#111318). Re-pointing those tokens
   recolours both templates wholesale; only the handful of places
   that hardcode a colour need naming individually.
   ============================================================ */

/* practice-area pages (crypto recovery, asset protection, et al) */
.skin-classic .pa-page{
  --ink:#002E48;
  --ink-2:#04486E;
  --paper-2:#EEF4F8;
  --paper-3:#E4EEF5;
  --text:#002E48;
  --muted:#4A6377;
  --muted-2:#7E93A2;
  --line:#D3E2EC;
}
.skin-classic .pa-page .hero-icon{background:#5B3097}
.skin-classic .pa-page .btn-primary{background:#5B3097;color:#fff}
.skin-classic .pa-page .btn-primary:hover{background:#4A2679}
.skin-classic .pa-page .ba-after{background:#002E48}
.skin-classic .pa-page .geo:hover{background:#04486E}

/* contact page */
.skin-classic .cx-page{
  --cx-ink:#002E48;
  --cx-text:#002E48;
  --cx-paper-2:#EEF4F8;
  --cx-muted:#4A6377;
  --cx-muted-2:#7E93A2;
  --cx-line:#D3E2EC;
}
.skin-classic .cx-submit{background:#5B3097;color:#FFFFFF}
.skin-classic .cx-submit:hover{background:#4A2679;opacity:1}
.skin-classic .cx-expect-item .cx-ico{background:#5B3097;border-color:#5B3097;color:#FFFFFF}
.skin-classic .cx-scam{background:#002E48}
.skin-classic .cx-line a:hover{color:#5B3097}

/* inner-page heroes and the 404 use the shared tokens, so they follow the
   navy automatically; these two only needed their local blocks re-pointed */

/* the contact form card inverts its submit to white on the dark panel —
   it has to be the violet CTA like every other primary on the site */
.skin-classic .cx-form-card .cx-submit{background:#5B3097;color:#FFFFFF}
.skin-classic .cx-form-card .cx-submit:hover{background:#4A2679;opacity:1}

/* About: the figures in the attorney profile sit on the navy panel —
   white reads there, the violet did not */
.skin-classic .profile__stats b{color:#FFFFFF}

/* --- Our Clients: video backdrop, and two trims --------------------------- */

/* the harbour clip replaces the still; main.js injects the <video> because the
   section markup lives in page content */
.skin-classic #clients.section--dark{position:relative;overflow:hidden}
/* the still stays underneath as the fallback: if the clip is slow, blocked or
   the visitor asked for reduced motion, the section still looks finished */
.skin-classic #clients.section--dark::before{
  background:url(../img/clients-harbor.jpg) center center/cover no-repeat;opacity:1;z-index:0}
.skin-classic #clients .clients-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;pointer-events:none}
/* the 30% violet layer sits over the footage */
.skin-classic #clients.section--dark::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:rgba(91,48,151,.30)}
.skin-classic #clients .wrap{position:relative;z-index:3}

/* no dash before the eyebrow anywhere on the site */
.skin-classic .eyebrow::before{display:none}
.skin-classic .eyebrow{gap:0}

/* the "Many come to us..." paragraph is cut. It is the third <p> inside the
   section head (eyebrow, h2, then three ledes). The seed file no longer has
   it; this hides it on the live page until the content is next synced. */
.skin-classic #clients .s-head p.lede:nth-of-type(3){display:none}

/* --- client comments, 17 Aug ---------------------------------------------- */

/* Practice cards: the headings and taglines run to different line counts, so
   the copy and the service lists started at different heights. The row is a
   grid, so each card opts into subgrid and inherits the row's tracks — every
   heading, tagline and list then lines up at any width, without reserving a
   guessed number of lines. Browsers without subgrid fall back to the old
   ragged layout rather than to a broken one. */
@supports (grid-template-rows: subgrid){
  .skin-classic #practice .prow{grid-template-rows:auto auto auto 1fr}
  .skin-classic #practice .pcard{
    display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
  /* the list is pushed to the bottom of the flex card by an auto top margin;
     inside the subgrid that would drop the shorter list a line, so pin it */
  .skin-classic #practice .pcard .psvc{margin-top:0;align-self:start}
}

/* --- Max's profile card (About) ------------------------------------------ */
.skin-classic .mprofile{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px 56px;
  padding:40px;border:1px solid rgba(255,255,255,.18)}
.skin-classic .mprofile__name{font-family:var(--serif);font-size:1.7rem;color:#fff;line-height:1.1}
.skin-classic .mprofile__role{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#BFE0F0;margin-top:8px}
.skin-classic .mprofile__contact{margin-top:20px;line-height:1.9;color:#D7E5EF}
.skin-classic .mprofile__contact a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}
.skin-classic .mprofile__facts{display:flex;flex-direction:column;gap:18px;justify-content:center}
.skin-classic .mfact{display:flex;align-items:baseline;gap:14px}
.skin-classic .mfact b{font-family:var(--serif);font-size:1.9rem;color:#fff;min-width:104px}
.skin-classic .mfact span{color:#B7CBD9;font-size:.95rem}
.skin-classic .mprofile__cols{
  grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.18)}
.skin-classic .mprofile__cols ul{list-style:none;margin:12px 0 0;padding:0;line-height:1.9;color:#D7E5EF}
@media(max-width:820px){
  .skin-classic .mprofile{grid-template-columns:1fr;gap:28px;padding:28px}
  .skin-classic .mprofile__cols{grid-template-columns:1fr;gap:24px}
  .skin-classic .mfact b{min-width:88px}
}

/* Practice Areas mega-menu: the tagline under each panel heading is cut
   (17 Aug comments) */
.skin-classic .mega__sub{display:none}

/* ============================================================
   SERVICE-PAGE HEADERS — option A, rolled out to every page on the
   Practice Area template. Two grounds, both in the brand three
   (navy #002E48, azure #086B9E, violet #5B3097):
     default            service-hero-nyc.jpg     — Manhattan glass, desaturated
     .pa-hero-abstract  service-hero-abstract.jpg — arcs on a brand field
   ============================================================ */

body.skin-classic.pa-hero-custom .pa-page .hero{
  position:relative;overflow:hidden;border-bottom:0;padding:96px 0 104px;background:#002E48}
body.skin-classic.pa-hero-custom .pa-page .hero > *{position:relative;z-index:2}
body.skin-classic.pa-hero-custom .pa-page .hero h1,
body.skin-classic.pa-hero-custom .pa-page .hero h1 span,
body.skin-classic.pa-hero-custom .pa-page .hero h1 .gold,
body.skin-classic.pa-hero-custom .pa-page .hero .eyebrow{color:#FFFFFF}
body.skin-classic.pa-hero-custom .pa-page .hero .lead,
body.skin-classic.pa-hero-custom .pa-page .hero .lead *,
body.skin-classic.pa-hero-custom .pa-page .hero .pill,
body.skin-classic.pa-hero-custom .pa-page .hero p{color:#FFFFFF}
body.skin-classic.pa-hero-custom .pa-page .hero .lead a{color:#FFFFFF}
body.skin-classic.pa-hero-custom .pa-page .hero-icon{background:#5B3097}
body.skin-classic.pa-hero-custom .pa-page .hero .btn-primary{background:#5B3097;color:#FFFFFF;border-color:#5B3097}
body.skin-classic.pa-hero-custom .pa-page .hero .btn-primary:hover{background:#4A2679;border-color:#4A2679}

/* the fact pill on the parent pages sits on dark now */
body.skin-classic.pa-hero-custom .pa-page .hero .pill{
  background:rgba(255,255,255,.12);color:#FFFFFF;border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
body.skin-classic.pa-hero-custom .pa-page .hero .pill .dot{background:#FFFFFF;color:#5B3097}
body.skin-classic.pa-hero-custom .pa-page .hero .pill .dot svg,
body.skin-classic.pa-hero-custom .pa-page .hero .pill .dot path{stroke:#5B3097;color:#5B3097}
body.skin-classic.pa-hero-custom .pa-page .hero-icon svg,
body.skin-classic.pa-hero-custom .pa-page .hero-icon path{color:#FFFFFF;stroke:#FFFFFF}

/* photographic ground: the glass canyon, drained of its own colour and
   held under the navy-to-violet wash so every page reads the same */
body.skin-classic.pa-hero-custom .pa-page .hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--pa-hero-img,url(../img/service-hero-nyc.jpg));
  background-position:center center;background-size:cover;background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.02)}
body.skin-classic.pa-hero-custom .pa-page .hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(0,46,72,.95) 0%,rgba(0,46,72,.88) 36%,rgba(8,107,158,.74) 70%,rgba(91,48,151,.64) 100%)}

@media(max-width:820px){
  body.skin-classic.pa-hero-custom .pa-page .hero{padding:64px 0 72px}
  body.skin-classic.pa-hero-custom .pa-page .hero::after{
    background:linear-gradient(160deg,rgba(0,46,72,.95) 0%,rgba(0,46,72,.86) 52%,rgba(91,48,151,.66) 100%)}
}

/* Home hero: all of the copy reads white on the photograph — the grey
   supporting line and the pale-blue eyebrow both lacked contrast */
body.skin-classic.home .hero .eyebrow,
body.skin-classic.home .hero h1,
body.skin-classic.home .hero .hero-sub,
body.skin-classic.home .hero .hero-supp,
body.skin-classic.home .hero p{color:#FFFFFF}

/* ============================================================
   ONE CARD, EVERYWHERE
   The Practices card on the front page is the model: white ground,
   one hairline, square corners, 26px of air, and a hairline that
   darkens on hover — no lift, no shadow, no second radius. Every
   light card on the site is re-pointed at it here, so there is one
   card style to change instead of a dozen.
   Dark cards (.matter-card, .pullbox, .svc-grid.dark, .urgent-card)
   are deliberately left alone.
   ============================================================ */
.skin-classic .pcard,
.skin-classic .svc,
.skin-classic .cx-lines,
.skin-classic .pxcard,
.skin-classic .modelcard,
.skin-classic .whycard,
.skin-classic .bigcard,
.skin-classic .qcard,
.skin-classic .ucard,
.skin-classic .mcard,
.skin-classic .relcard,
.skin-classic .bcard,
.skin-classic .tcard,
.skin-classic .vcard,
.skin-classic .pa-page .insight-card,
.skin-classic .pa-page .svc-grid:not(.dark) .svc-card{
  background:#FFFFFF;border:1px solid #D3E2EC;border-radius:0;box-shadow:none}

/* the same 26px of air in every text card */
.skin-classic .pcard,
.skin-classic .svc,
.skin-classic .cx-lines,
.skin-classic .pxcard,
.skin-classic .modelcard,
.skin-classic .whycard,
.skin-classic .bigcard,
.skin-classic .qcard,
.skin-classic .ucard,
.skin-classic .mcard,
.skin-classic .relcard,
.skin-classic .pa-page .insight-card,
.skin-classic .pa-page .svc-grid:not(.dark) .svc-card{padding:26px}

/* cards that open with a photograph keep the image flush to the edge */
.skin-classic .bcard,
.skin-classic .tcard,
.skin-classic .vcard{padding:0;overflow:hidden}

/* one hover: the hairline darkens, nothing moves */
.skin-classic .pcard:hover,
.skin-classic .svc:hover,
.skin-classic .cx-lines:hover,
.skin-classic .pxcard:hover,
.skin-classic .modelcard:hover,
.skin-classic .whycard:hover,
.skin-classic .bigcard:hover,
.skin-classic .qcard:hover,
.skin-classic .ucard:hover,
.skin-classic .mcard:hover,
.skin-classic .relcard:hover,
.skin-classic .bcard:hover,
.skin-classic .tcard:hover,
.skin-classic .vcard:hover,
.skin-classic .pa-page .insight-card:hover,
.skin-classic .pa-page .svc-grid:not(.dark) .svc-card:hover{
  border-color:#086B9E;background:#FFFFFF;box-shadow:none;transform:none}

/* the What We Do grid drew its rules with a 1px gap over a tinted
   ground — separate cards instead, like the front page */
.skin-classic .pa-page .svc-grid:not(.dark){
  background:transparent;border:0;border-radius:0;gap:20px;overflow:visible}
.skin-classic .pa-page .insight-grid{gap:20px}

/* ============================================================
   THE TRACK RECORD band — the dotted wave sits behind the whole
   section, held down by the section's own navy at 80% so it reads
   as texture rather than as a picture. The band is the only dark
   block on a practice page that carries the figures, so :has(.stats)
   identifies it without touching the other bands.
   ============================================================ */
.skin-classic .pa-page section.block.dark:has(.stats){
  position:relative;overflow:hidden;background-color:#002E48}
.skin-classic .pa-page section.block.dark:has(.stats)::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url(../img/section-dots-wave.jpg) center center/cover no-repeat}
.skin-classic .pa-page section.block.dark:has(.stats)::after{
  content:"";position:absolute;inset:0;z-index:1;background:rgba(0,46,72,.8)}
.skin-classic .pa-page section.block.dark:has(.stats) > .wrap{position:relative;z-index:2}

/* ============================================================
   HOME HERO — same treatment as the practice-page headers:
   the photograph drained of its own colour and held under the
   navy → azure → violet wash, so the front page and the inner
   pages read as one system. The /home-2/ and /home-3/ drafts
   keep their own palettes.
   ============================================================ */
/* the photograph goes on ::before so the grey filter cannot reach the
   wash on ::after — a filter on the parent would drain that too */
body.skin-classic.home:not(.home-alt):not(.home-alt3) .hero-photo{
  background-image:none;filter:none}
body.skin-classic.home:not(.home-alt):not(.home-alt3) .hero-photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url(../img/hero-nyc-wide.jpg) center 62%/cover no-repeat;
  filter:grayscale(1) contrast(1.02)}
body.skin-classic.home:not(.home-alt):not(.home-alt3) .hero-photo::after{
  z-index:1;
  background:linear-gradient(100deg,
    rgba(0,46,72,.95) 0%,rgba(0,46,72,.88) 36%,rgba(8,107,158,.74) 70%,rgba(91,48,151,.64) 100%)}
@media(max-width:820px){
  body.skin-classic.home:not(.home-alt):not(.home-alt3) .hero-photo::after{
    background:linear-gradient(160deg,rgba(0,46,72,.95) 0%,rgba(0,46,72,.86) 52%,rgba(91,48,151,.66) 100%)}
}

/* ============================================================
   PRACTICE PAGES — one violet band, one icon tile.
   A page may carry a single .dark.violet section: the same navy →
   violet ramp as the headers, with the dotted wave screened over it
   at low strength so it belongs to the same family as the track-record
   band. Icon tiles are violet everywhere on these pages, matching the
   hero tile — one accent, used twice, not a new colour system.
   ============================================================ */
.skin-classic .pa-page section.dark.violet{
  position:relative;overflow:hidden;
  background:linear-gradient(115deg,#2A1450 0%,#45246F 44%,#5B3097 100%)}
.skin-classic .pa-page section.dark.violet::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.3;
  background:url(../img/section-dots-wave.jpg) center center/cover no-repeat;
  mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%)}
.skin-classic .pa-page section.dark.violet > .wrap{position:relative;z-index:1}
.skin-classic .pa-page section.dark.violet .steps .n{color:#C9B6E8}
.skin-classic .pa-page section.dark.violet h2.sec,
.skin-classic .pa-page section.dark.violet .step h4{color:#FFFFFF}
.skin-classic .pa-page section.dark.violet .subhead,
.skin-classic .pa-page section.dark.violet .step p{color:#E3D7F5}
.skin-classic .pa-page section.dark.violet .sec-eyebrow{color:#C9B6E8}
.skin-classic .pa-page section.dark.violet .step{border-top-color:rgba(255,255,255,.22)}
.skin-classic .pa-page section.dark.violet .steps > .step:last-child{border-bottom-color:rgba(255,255,255,.22)}

/* icon tiles: violet, square, white line art */
.skin-classic .pa-page .insight-icon{background:#5B3097;border-radius:0}
.skin-classic .pa-page .attack-item .insight-icon{margin-bottom:20px}

/* Hero video on a practice page: the same treatment as the front page —
   drained of colour and held under the navy → azure → violet wash. The
   still photograph stays underneath as the fallback, and the video is
   skipped entirely for anyone who asked for reduced motion. */
body.skin-classic.pa-hero-custom .pa-page .hero .pa-hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;filter:grayscale(1) contrast(1.02)}
@media(prefers-reduced-motion:reduce){
  body.skin-classic.pa-hero-custom .pa-page .hero .pa-hero-video{display:none}
}

/* ============================================================
   SECTOR TILES — 4 over 3, each a slice of the brand ramp.
   Twelve-column grid: the first four tiles span three columns,
   the last three span four, so both rows fill the width exactly.
   ============================================================ */
.skin-classic .pa-page .sect-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:32px}
.skin-classic .pa-page .sect-tile{
  grid-column:span 3;position:relative;overflow:hidden;isolation:isolate;
  min-height:230px;padding:26px 24px 24px;display:flex;flex-direction:column;
  color:#FFFFFF;border:0;border-radius:0}
.skin-classic .pa-page .sect-tile:nth-child(n+5){grid-column:span 4}
.skin-classic .pa-page .sect-tile::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.16;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#FFFFFF 1.1px,transparent 1.4px);
  background-size:13px 13px;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 62%);
  mask-image:linear-gradient(200deg,#000 0%,transparent 62%)}
.skin-classic .pa-page .sect-tile .sect-ic{
  width:30px;height:30px;flex:none;
  fill:none;stroke:#FFFFFF;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.skin-classic .pa-page .sect-tile h3{
  font-family:var(--display);font-weight:500;font-size:20px;line-height:1.15;
  color:#FFFFFF;margin:20px 0 8px}
.skin-classic .pa-page .sect-tile p{
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);margin:0}

/* the ramp, walked across the seven tiles */
.skin-classic .pa-page .sect-tile--1{background:linear-gradient(140deg,#002E48 0%,#0A5680 100%)}
.skin-classic .pa-page .sect-tile--2{background:linear-gradient(140deg,#04486E 0%,#0A76AD 100%)}
.skin-classic .pa-page .sect-tile--3{background:linear-gradient(140deg,#086B9E 0%,#2F5AA6 100%)}
.skin-classic .pa-page .sect-tile--4{background:linear-gradient(140deg,#33418A 0%,#5B3097 100%)}
.skin-classic .pa-page .sect-tile--5{background:linear-gradient(140deg,#002E48 0%,#3A2470 100%)}
.skin-classic .pa-page .sect-tile--6{background:linear-gradient(140deg,#0A4A70 0%,#5B3097 100%)}
.skin-classic .pa-page .sect-tile--7{background:linear-gradient(140deg,#45246F 0%,#7040BE 100%)}

@media(max-width:1080px){
  .skin-classic .pa-page .sect-tile,
  .skin-classic .pa-page .sect-tile:nth-child(n+5){grid-column:span 6}
  .skin-classic .pa-page .sect-tile:last-child{grid-column:span 12}
}
@media(max-width:640px){
  .skin-classic .pa-page .sect-tile,
  .skin-classic .pa-page .sect-tile:nth-child(n+5){grid-column:span 12;min-height:0}
}

/* Wordmark: sized to the header bar rather than to a leftover 30px default —
   the bar is 74px tall and the buttons in it are 46px, so the mark can carry
   the same weight without crowding. */
.skin-classic .site-header .brand__img{height:44px}
@media(max-width:820px){
  .skin-classic .site-header .brand__img{height:34px}
}

/* ============================================================
   INNER PAGES — measure, hierarchy, and the gap under the hero.
   The long-form pages (About above all) were running body copy at
   1100px — around 140 characters a line — with h3 barely a pixel
   larger than the paragraphs under it, and 184px of air between the
   hero and the first line of text.
   ============================================================ */

/* one measure for the page, in pixels rather than ch: the hero lede is set
   two points larger than the body, so a ch-based cap made the two columns
   different widths — the thing that read as sloppy */
body.skin-classic{--measure:820px}
.skin-classic .prose,
.skin-classic .hero--page .lede,
.skin-classic .hero--page .hero__inner > p{max-width:var(--measure)}

/* the hero no longer floats a hundred and eighty pixels above the text */
.skin-classic .hero--page .hero__inner{padding-bottom:52px}
.skin-classic .hero--page + .section{padding-top:56px}

/* headings that outrank the paragraphs they sit on */
.skin-classic .prose h2{
  font-family:var(--serif);font-weight:500;font-size:31px;line-height:1.15;
  letter-spacing:-.01em;color:var(--ink);margin:52px 0 14px}
.skin-classic .prose h3{
  font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2;
  color:var(--ink);margin:44px 0 12px}
.skin-classic .prose h4{
  font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.25;
  color:var(--ink);margin:34px 0 10px}
.skin-classic .prose > *:first-child{margin-top:0}
.skin-classic .prose p{margin:0 0 20px}
.skin-classic .prose .lede{font-size:20px;line-height:1.6;color:var(--text);margin-bottom:26px}

/* Long-form body copy does not fade in. A 1600px block of text animating as
   one unit reads as the page loading late, which is the opposite of the
   effect the reveal is there for. */
.skin-classic .prose.reveal,
.js .skin-classic .prose.reveal{opacity:1;transform:none}