/* /advisors/consulting. Family ADVISORS "Structure": the cool half of the light only (cyan, blue, violet and their
   pastels), graphite lines, an optical-bench grammar. Signature: DIFFRACTION (one practice, one ruled grating, three
   orders landing as lines: growth, operations, compliance; then each line read at higher resolution).
   Defaults are the poster (JS off): everything drawn. Motion is CSS, gated on .js and prefers-reduced-motion:
   no-preference; consulting.js only toggles classes (no rAF loop on this page). */
:root {
  --c-cyan: #4FC3E8;
  --c-blue: #76A0EE;
  --c-violet: #9C7CF4;
  --hair: rgba(29, 33, 38, .14);
  --hair-2: rgba(29, 33, 38, .26);
}
main { position: relative; z-index: 1; overflow-x: clip; }
.page-consult { background: var(--pearl); }

/* ---------- hero: wide serif, the lede set into the space beside line one ---------- */
.hero { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 60px 0 0; }
.hero .eyebrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0 0 26px; }
.hero .eyebrow .sl { color: var(--ink-3); font-weight: 500; }
.eb-fan { position: relative; display: block; width: 46px; height: 18px; }
.eb-fan i { position: absolute; left: 0; top: 50%; height: 1.5px; width: 100%; transform-origin: 0 50%; border-radius: 1px; }
.eb-fan i:nth-child(1) { background: var(--c-cyan); transform: rotate(-17deg); }
.eb-fan i:nth-child(2) { background: var(--c-blue); transform: rotate(-9deg); }
.eb-fan i:nth-child(3) { background: var(--c-violet); transform: rotate(0deg); width: 92%; }
.hero h1 {
  grid-column: 1 / -1; grid-row: 2; margin: 0;
  font: 400 clamp(56px, 8.6vw, 132px)/.9 var(--serif); letter-spacing: -.028em;
}
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero .lede {
  grid-column: 8 / -1; grid-row: 2; align-self: start; position: relative; z-index: 1;
  margin: .5em 0 0; font-size: 18.5px; line-height: 1.58; color: var(--ink-2); text-wrap: pretty;
  padding-left: 22px; border-left: 1px solid var(--hair-2);
}

/* ---------- the bench (signature) ---------- */
.bench { position: relative; margin: 18px auto 0; max-width: 1600px; }
.bench-v { position: relative; }
.bench-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bench-tall { display: none; }
.bench-labels { position: absolute; inset: 0; pointer-events: none; }
.lbl {
  position: absolute; left: var(--x); top: var(--y); transform: translateY(-50%); margin: 0;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  color: var(--ink); text-decoration: none; pointer-events: auto;
}
.lbl .ln { grid-column: 2; font: 400 26px/1.05 var(--serif); letter-spacing: -.005em; white-space: nowrap; }
.lbl .cap { grid-column: 2; font: 500 13px/1.3 var(--sans); color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.lbl-src .ln, .lbl-grt .ln { font-size: 22px; }
.lbl-src .ln, .lbl-src .cap, .lbl-grt .ln, .lbl-grt .cap { grid-column: 1 / -1; }
.lbl-grt { transform: translate(-50%, -50%); text-align: center; }
.lbl-zero .ln { grid-column: 1 / -1; font: 500 13px/1.3 var(--sans); letter-spacing: .02em; color: var(--ink-3); }
.lbl-line { min-height: 48px; padding: 4px 10px 4px 0; border-radius: 10px; }
.lbl-line .sw { grid-row: 1 / span 2; width: 22px; height: 3px; border-radius: 2px; background: var(--hue); box-shadow: 0 0 10px var(--hue); }
.lbl-line .ln { transition: transform .4s var(--ease); }
.lbl-line:hover .ln { transform: translateX(3px); }
.lbl-line:focus-visible { outline-offset: 4px; }

/* hover or focus on one line: its order brightens, the other orders step back (works without JS) */
.ord, .land { transition: opacity .45s var(--ease); }
.bench:has(.lbl-line[data-k="g"]:is(:hover, :focus-visible)) :is(.o-o, .o-c, .o-z, .l-o, .l-c, .l-z),
.bench:has(.lbl-line[data-k="o"]:is(:hover, :focus-visible)) :is(.o-g, .o-c, .o-z, .l-g, .l-c, .l-z),
.bench:has(.lbl-line[data-k="c"]:is(:hover, :focus-visible)) :is(.o-g, .o-o, .o-z, .l-g, .l-o, .l-z) { opacity: .16; }

/* light pulses: only drawn with JS and motion; paused unless the bench is on screen and the tab is visible */
.pl { fill: none; stroke-linecap: round; stroke-width: 2.4; stroke-dasharray: .045 1.2; stroke-dashoffset: .045; opacity: 0; }
.pl-glow { stroke-width: 9; }

/* ---------- what a conversation covers ---------- */
.covers { position: relative; padding: 132px 0 0; }
.covers-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.covers-head h2 { grid-column: 1 / 8; margin: 0; font: 400 clamp(46px, 5.4vw, 84px)/.96 var(--serif); letter-spacing: -.018em; }
.covers-intro { grid-column: 8 / -1; margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

.plate {
  position: relative; margin-top: 72px; border-top: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(251, 250, 247, .72), rgba(251, 250, 247, .2));
}
.line {
  position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 0;
  padding: 64px 0; border-bottom: 1px solid var(--hair);
}
.line-head { display: flex; flex-direction: column; justify-content: center; padding-right: 0; }
.lh-top { padding: 0 32px 0 0; }
.line-ix { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
/* where this line lands on the bench: its own order lit, the other two in graphite */
.ix-fan { position: relative; display: block; width: 34px; height: 16px; flex: none; }
.ix-fan i { position: absolute; left: 0; bottom: 2px; height: 1.5px; width: 100%; transform-origin: 0 50%; border-radius: 1px; background: rgba(29, 33, 38, .22); }
.ix-fan i:nth-child(1) { transform: rotate(-21deg); }
.ix-fan i:nth-child(2) { transform: rotate(-12deg); }
.ix-fan i:nth-child(3) { transform: rotate(-5deg); }
#growth .ix-fan i:nth-child(1), #operations .ix-fan i:nth-child(2), #compliance .ix-fan i:nth-child(3) { background: var(--hue); box-shadow: 0 0 6px var(--hue); }
.line h3 { margin: 0; font: 400 clamp(46px, 5.4vw, 82px)/.92 var(--serif); letter-spacing: -.016em; }
.line-sum { margin: 0; padding: 20px 32px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 22em; text-wrap: pretty; }

.fine { position: relative; align-self: center; display: grid; grid-template-columns: 112px minmax(0, 1fr); }
/* the row's opener: a cut of the bench's screen. Every line's landing is ticked at the height it has on the bench
   (Growth 11.8%, Operations 34.2%, Compliance 55.1%, the zero order 74.3% of the screen); this row's own line is lit
   there, and its fine structure (the fan) leaves from that point */
.cut {
  position: absolute; left: 0; top: 0; bottom: 0; width: 12px; z-index: 1; pointer-events: none; border-radius: 4px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(233, 238, 247, .62) 55%, rgba(255, 255, 255, .9));
  box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .24), 5px 6px 0 rgba(29, 33, 38, .05);
}
.cut i { position: absolute; left: -3px; width: 18px; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: rgba(29, 33, 38, .3); }
.cut .t-g { top: 11.8%; }
.cut .t-o { top: 34.2%; }
.cut .t-c { top: 55.1%; }
.cut .t-z { top: 74.3%; left: -1px; width: 14px; background: rgba(29, 33, 38, .2); }
.cut i.own { left: -5px; width: 22px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--hue); box-shadow: 0 0 10px var(--hue); }
.cut i.own::before {
  /* the landing's glow, tight */
  content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 22px; transform: translate(-50%, -50%);
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 75%, transparent), transparent);
}
.fine::after {
  /* the row's own light, held at its line's position (--at) and spreading the way the fan opens */
  content: ""; position: absolute; left: -40px; top: var(--at); width: 360px; height: 220px; transform: translateY(-50%);
  z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 24%, transparent), transparent);
}
.fan { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hue) 60%, transparent)); }
.fan path { fill: none; stroke: var(--hue); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.fine-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; }
.fine-list li { position: relative; display: flex; align-items: center; min-height: 84px; padding: 12px 0 12px 30px; border-top: 1px solid var(--hair); }
.fine-list li:first-child { border-top: 0; }
.fine-list li::before {
  content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--hue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 16%, transparent), 0 0 12px var(--hue);
}
.fine-list p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 40em; text-wrap: pretty; }
.fine-list strong { font-weight: 600; color: var(--ink); }

.source-note { padding: 36px 0 0; }
.source-note p { margin: 0 0 0 calc(4 / 12 * 100% + 112px + 30px); max-width: 40em; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.source-note a { color: var(--ink); text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------- the close: the grating's own ending (a short bench whose screen stands beside the CTA), one CTA ---------- */
.close { position: relative; padding: 140px 0 150px; }
.close-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.close h2 { grid-column: 1 / 7; grid-row: 1; margin: 0; font: 400 clamp(50px, 6vw, 96px)/.95 var(--serif); letter-spacing: -.02em; max-width: 7.5em; }
.close-body { grid-column: 7 / -1; grid-row: 1; padding-top: 14px; }
.close-body p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 28em; text-wrap: pretty; }
/* the same 12 columns as the close: the bench ends at column 6 with its screen, the button starts column 7 */
.close-cta { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; margin-top: 48px; }
.cb { display: block; height: auto; overflow: visible; }
.cb-wide { grid-column: 1 / 7; justify-self: end; width: min(100%, 420px); }
.cb-tall { display: none; }
.close-cta .btn { grid-column: 7 / -1; justify-self: start; }
.close-alt { grid-column: 7 / -1; grid-row: 3; margin: 8px 0 0; font-size: 15px; }
.close-alt a { color: var(--ink-2); text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.close-alt a:hover { color: var(--ink); }

/* ---------- motion (JS + motion allowed only; the poster reads complete without it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* load: the beam draws in, the grating glints, the orders draw out, the lines land */
  .js:not(.still) .bench .d { stroke-dasharray: 1 1; animation: draw 1s var(--ease) both; }
  .js:not(.still) .bench .beam .d { animation-duration: .9s; animation-delay: .25s; }
  .js:not(.still) .bench .o-z .d { animation-delay: 1.05s; animation-duration: 1.3s; }
  .js:not(.still) .bench .o-c .d { animation-delay: 1.1s; animation-duration: 1.1s; }
  .js:not(.still) .bench .o-o .d { animation-delay: 1.18s; animation-duration: 1.15s; }
  .js:not(.still) .bench .o-g .d { animation-delay: 1.26s; animation-duration: 1.2s; }
  .js:not(.still) .bench .ghosts { animation: land 1.4s var(--ease) 1.3s both; }
  .js:not(.still) .bench .glint { transform-origin: center; transform-box: fill-box; animation: glint 1.2s var(--ease) .95s both; }
  .js:not(.still) .bench .land { animation: land .9s var(--ease) both; }
  .js:not(.still) .bench .l-c { animation-delay: 2.0s; }
  .js:not(.still) .bench .l-o { animation-delay: 2.1s; }
  .js:not(.still) .bench .l-g { animation-delay: 2.2s; }
  .js:not(.still) .bench .l-z { animation-delay: 2.1s; }

  /* pulses: one runs in, then three run out; paused unless .is-live (on screen, tab visible) */
  .js:not(.still) .bench .pl { animation: pulse-in 5.2s linear 2.6s infinite; animation-play-state: paused; }
  .js:not(.still) .bench .pl-out { animation-name: pulse-out; }
  .js:not(.still) .bench.is-live .pl { animation-play-state: running; }

  /* rows below the fold at load: the line lands on its cut of the screen, then its fan draws, once, in view */
  .js:not(.still) .line.is-armed .cut .own, .js:not(.still) .line.is-armed .fine::after { opacity: 0; }
  .js:not(.still) .line.is-armed .fan path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js:not(.still) .line.is-armed .fine-list li::before { transform: scale(0); }
  .js:not(.still) .line.is-in .cut .own, .js:not(.still) .line.is-in .fine::after { opacity: 1; transition: opacity .8s var(--ease) .1s; }
  .js:not(.still) .line.is-in .fan path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) .75s; }
  .js:not(.still) .line.is-in .fine-list li::before { transform: scale(1); transition: transform .5s var(--ease) 1.45s; }
  /* 900 px and down: the branches draw with the dots, not before them */
  .js:not(.still) .line.is-armed .fine-list li::after { opacity: 0; }
  .js:not(.still) .line.is-in .fine-list li::after { opacity: 1; transition: opacity .7s var(--ease) .8s; }
  .js:not(.still) .line.is-in .fan path:nth-child(2) { transition-delay: .82s; }
  .js:not(.still) .line.is-in .fan path:nth-child(3) { transition-delay: .89s; }
  .js:not(.still) .line.is-in .fan path:nth-child(4) { transition-delay: .96s; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes glint { 0% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
@keyframes land { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pulse-in {
  0% { opacity: 1; stroke-dashoffset: .045; }
  30% { opacity: 1; stroke-dashoffset: -1; }
  30.01%, 100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes pulse-out {
  0%, 29.99% { opacity: 0; stroke-dashoffset: .045; }
  30% { opacity: 1; stroke-dashoffset: .045; }
  78% { opacity: 1; stroke-dashoffset: -1; }
  78.01%, 100% { opacity: 0; stroke-dashoffset: -1; }
}

/* ---------- laptop and tablet ---------- */
@media (max-width: 1180px) {
  .hero .lede { grid-column: 1 / 9; grid-row: 3; margin: 30px 0 0; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .lbl-line .ln { font-size: 21px; }
  .lbl-src .ln, .lbl-grt .ln { font-size: 18px; }
  .lbl .cap { font-size: 12px; }
  .line { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .fine { grid-template-columns: 72px minmax(0, 1fr); }
  .source-note p { margin-left: calc(4 / 11 * 100% + 72px + 30px); }
}
@media (max-width: 900px) and (min-width: 761px) {
  .lbl-line .ln { font-size: 18px; }
  .lbl-src .cap, .lbl-grt .cap, .lbl .cap { display: none; }
  .lbl-line .sw { grid-row: 1; width: 16px; }
  .lbl-zero .ln { font-size: 11.5px; letter-spacing: 0; }
}

/* ---------- 900 px and down: the three lines stack; the cut of the screen stands as the stem, its own line lit at
   its own height, and the line branches once per question ---------- */
@media (max-width: 900px) {
  .covers { padding-top: 96px; }
  .covers-head { display: block; }
  .covers-head h2 { font-size: clamp(42px, 9vw, 64px); }
  .covers-intro { margin-top: 20px; font-size: 17.5px; max-width: 34em; }
  .plate { margin-top: 44px; }
  .line { display: block; padding: 48px 0 40px; }
  .line-head { display: block; }
  .lh-top { padding: 0; }
  .line h3 { font-size: clamp(44px, 9vw, 64px); }
  .line-sum { padding: 16px 0 0; font-size: 17px; max-width: 30em; }
  .fine { display: block; margin-top: 26px; padding-left: 2px; }
  .fan { display: none; }
  .cut { width: 9px; top: 4px; bottom: 24px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .24), 4px 5px 0 rgba(29, 33, 38, .05); }
  .cut i { left: -3px; width: 15px; }
  .cut .t-z { left: -1px; width: 11px; }
  .cut i.own { left: -5px; width: 19px; }
  .cut i.own::before { width: 36px; height: 18px; }
  .fine::after { left: -8px; width: 240px; height: 180px; }
  .fine-list { display: block; }
  .fine-list li { display: block; min-height: 0; padding: 16px 0 16px 40px; }
  .fine-list li::before { left: 22px; top: 30px; margin-top: -4px; }
  .fine-list li::after {
    content: ""; position: absolute; left: 7px; top: 25px; width: 16px; height: 1.5px;
    background: var(--hue); transform: rotate(19deg); transform-origin: 0 0;
  }
  .fine-list p { font-size: 17px; }
  .source-note { padding-top: 28px; }
  .source-note p { margin-left: 0; font-size: 14.5px; }
}

/* ---------- phone: the bench stands up and reads top to bottom ---------- */
@media (max-width: 760px) {
  .hero { display: block; padding-top: 40px; }
  .hero .eyebrow { margin-bottom: 20px; gap: 10px; }
  .eb-fan { width: 30px; }
  .hero h1 { font-size: clamp(46px, 13.4vw, 66px); line-height: .94; }
  .hero .lede { margin: 26px 0 0; font-size: 17px; padding-left: 16px; }

  .bench { margin: 34px 16px 0; }
  .bench-wide { display: none; }
  .bench-tall { display: block; }
  .lbl-line .ln { font-size: 21px; }
  .lbl-src .ln, .lbl-grt .ln { font-size: 19px; }
  .lbl .cap { font-size: 12.5px; white-space: normal; }
  .lbl-line { column-gap: 9px; }
  .lbl-line .sw { width: 12px; }
  .lbl-grt { transform: translateY(-50%); text-align: left; }
  .lbl-zero .ln { font-size: 12.5px; }

  .covers { padding-top: 88px; }
  .covers-head h2 { font-size: clamp(42px, 11.5vw, 56px); }
  .covers-intro { font-size: 17px; }
  .line { padding: 44px 0 40px; }
  .line h3 { font-size: clamp(44px, 12vw, 56px); }
  .fine-list p { font-size: 16.5px; }

  .close { padding: 96px 0 104px; }
  .close-grid { display: block; }
  .close h2 { font-size: clamp(44px, 12vw, 58px); }
  .close-body { padding-top: 22px; }
  .close-body p { font-size: 17px; }
  .close-cta { display: flex; margin: 6px 0 0; flex-direction: column; align-items: stretch; }
  /* the short bench stands up: the beam drops through the grating and the lines land on a screen above the button */
  .cb-wide { display: none; }
  .cb-tall { display: block; width: min(100%, 300px); margin: 40px auto 26px; }
  .close-cta .btn { margin: 0; width: 100%; }
}