/* Immigration Attorneys - page-level sections only.
 *
 * Everything shared lives in about-v2.css (tokens, .wrap, .sec, .h-sec,
 * .eyebrow, .cta, .fin, .band, the .mh hero, nav, footer). The hero is the
 * shared <MediaHero>, so none of its styling is here.
 *
 * PROPERTY OWNERSHIP: this file hides pre-reveal elements with OPACITY ONLY.
 * The motion layer owns transform. .mo-pre is a PERMANENT flag - the layout
 * sets it before first paint and nothing ever removes it - so any transform
 * written under it is a standing rule that beats the GSAP tween. The first
 * build did exactly that and parked a headline 159px below its mask.
 */

/* ======================================================================
   2. WHY DIFFERENT - a feature spotlight.
   Left: heading, lead and a glass stage (sticky on desktop) whose orb shows
   the icon of the selected row. Right: four rows down a rail. While the
   section is in view the selection steps through the rows (hover picks
   one); [data-active] on the section drives it all (attorneys-motion.js).
   Every row shares one style - only the selection state lights one.
   ====================================================================== */
.adf__in{display:grid;gap:clamp(30px,4vw,64px);align-items:start}
@media(min-width:1000px){.adf__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .adf__side{position:sticky;top:calc(var(--header-h,73px) + 36px)}}
.adf__h{max-width:14ch;margin:0}
.adf__l{margin:16px 0 0;max-width:46ch}

/* The stage: an icon orbit straight on the page - no box. A small oxblood
   orb shows the selected point's icon; the four points ride the middle
   ring as satellites (the ring turns, the icons stay upright) and the
   selected one fills. The whole orbit tilts toward the pointer. */
.adf__stage{position:relative;isolation:isolate;display:none;margin-top:clamp(18px,2.4vw,28px);
  height:clamp(300px,27vw,360px);perspective:900px}
@media(min-width:1000px){.adf__stage{display:block}}
.adf__dots{position:absolute;inset:0;z-index:-1;opacity:.55;
  background-image:radial-gradient(rgba(90,31,27,.22) 1px,transparent 1px);background-size:20px 20px;
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.adf__rings,.adf__orbit,.adf__orb{position:absolute;left:50%;top:50%}
.adf__rings{translate:-50% -50%}
.adf__rings i{position:absolute;left:50%;top:50%;border-radius:50%;translate:-50% -50%;
  border:1px solid rgba(90,31,27,.16)}
.adf__rings i:nth-child(1){width:150px;height:150px;border-style:dashed;border-color:rgba(90,31,27,.24);animation:adf-spin 50s linear infinite}
.adf__rings i:nth-child(2){width:260px;height:260px}
.adf__rings i:nth-child(3){width:350px;height:350px;border-style:dotted;border-color:rgba(90,31,27,.2);animation:adf-spin 90s linear infinite reverse}
@keyframes adf-spin{to{rotate:1turn}}
/* Satellites on the 260px ring (radius 130px). */
.adf__orbit{width:0;height:0;animation:adf-spin 70s linear infinite}
.adf__sat{position:absolute;left:0;top:0;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  transform:rotate(calc(var(--k,0) * 90deg - 45deg)) translate(130px) rotate(calc(var(--k,0) * -90deg + 45deg));
  color:var(--brand);font-size:1.05rem;background:var(--white);border:1px solid var(--line-2);
  box-shadow:0 14px 28px -16px rgba(62,20,17,.45);transition:background .45s ease,color .45s ease,box-shadow .45s ease,scale .45s cubic-bezier(.23,1,.32,1)}
/* Keep each icon upright while the orbit turns. */
.adf__sat i{display:block;animation:adf-spin 70s linear infinite reverse}
.adf[data-active="0"] .adf__sat[data-k="0"],.adf[data-active="1"] .adf__sat[data-k="1"],
.adf[data-active="2"] .adf__sat[data-k="2"],.adf[data-active="3"] .adf__sat[data-k="3"]{
  scale:1.18;color:#fff;border-color:transparent;background:linear-gradient(160deg,var(--brand-2),var(--brand));
  box-shadow:0 0 0 8px rgba(124,46,40,.12),0 16px 30px -12px rgba(62,20,17,.6)}
/* The orb: the selected point's icon, tilting toward the pointer. */
.adf__orb{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  translate:-50% -50%;transform-style:preserve-3d;
  transform:rotateY(calc(var(--x,0) * 18deg)) rotateX(calc(var(--y,0) * -14deg));
  transition:transform .6s cubic-bezier(.23,1,.32,1);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),
    linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 55%,#3E1411 100%);
  box-shadow:0 26px 50px -18px rgba(62,20,17,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.adf__orb::after{content:"";position:absolute;inset:-16px;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(124,46,40,.22),transparent);animation:adf-pulse 3.6s ease-in-out infinite}
@keyframes adf-pulse{50%{transform:scale(1.2);opacity:.55}}
/* The icon swap is a crossfade with a zoom - never a flip, which showed
   the incoming icon edge-on ("half an icon") for its first moment. */
.adf__big{grid-area:1/1;font-size:2.4rem;color:#fff;
  opacity:0;transform:scale(.55);
  transition:opacity .35s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.adf[data-active="0"] .adf__big[style*="--k:0"],.adf[data-active="1"] .adf__big[style*="--k:1"],
.adf[data-active="2"] .adf__big[style*="--k:2"],.adf[data-active="3"] .adf__big[style*="--k:3"]{opacity:1;transform:none}

/* The rows down a rail. */
.adf__list{position:relative;margin:0;padding:0;list-style:none;display:grid;gap:12px}
.adf__list::before,.adf__list::after{content:"";position:absolute;left:clamp(41px,4vw,47px);top:40px;bottom:40px;width:2px;border-radius:2px}
.adf__list::before{background:var(--line-2)}
.adf__list::after{background:linear-gradient(180deg,var(--brand-2),var(--brand));transform-origin:50% 0;transform:scaleY(var(--fill,1))}
.adf__i{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
  padding:clamp(18px,2vw,24px);border-radius:22px;background:var(--white);border:1px solid var(--line);
  box-shadow:0 18px 40px -36px rgba(90,31,27,.45);
  transition:transform .45s cubic-bezier(.23,1,.32,1),box-shadow .45s ease,border-color .45s ease,opacity .45s ease}
.adf__ic{display:grid;place-items:center;width:clamp(46px,4vw,54px);height:clamp(46px,4vw,54px);border-radius:16px;
  background:var(--brand-wash);border:1px solid rgba(90,31,27,.14);color:var(--brand);font-size:1.2rem;
  transition:background .4s ease,color .4s ease,rotate .45s cubic-bezier(.23,1,.32,1),box-shadow .4s ease}
.adf__t{margin:6px 0 0;font-size:clamp(1.1rem,1.5vw,1.28rem);font-weight:800;letter-spacing:-.024em;line-height:1.28;color:var(--ink)}
/* The source links "Tech Professionals" to the EB-1A page inside the title. */
.adf__lnk{color:var(--brand);text-decoration:none;border-bottom:1.5px solid rgba(90,31,27,.3);transition:border-color .28s ease}
.adf__lnk:hover{border-bottom-color:var(--brand)}
.adf__p{margin:8px 0 0;max-width:48ch;color:var(--ink-2);font-size:.97rem;line-height:1.66}
/* Reading state (desktop motion only): the row in view lights. */
html.mo-on .adf__i{opacity:.62}
.adf[data-active="0"] .adf__i[data-k="0"],.adf[data-active="1"] .adf__i[data-k="1"],
.adf[data-active="2"] .adf__i[data-k="2"],.adf[data-active="3"] .adf__i[data-k="3"]{
  opacity:1;transform:translateX(8px);border-color:var(--line-2);box-shadow:0 30px 54px -34px rgba(90,31,27,.55)}
.adf[data-active="0"] .adf__i[data-k="0"] .adf__ic,.adf[data-active="1"] .adf__i[data-k="1"] .adf__ic,
.adf[data-active="2"] .adf__i[data-k="2"] .adf__ic,.adf[data-active="3"] .adf__i[data-k="3"] .adf__ic{
  background:linear-gradient(160deg,var(--brand-2),var(--brand));color:#fff;rotate:-6deg;box-shadow:0 12px 24px -12px rgba(62,20,17,.6)}
@media(max-width:999px){html.mo-on .adf__i{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .adf__rings i,.adf__orb::after,.adf__orbit,.adf__sat i{animation:none}
  .adf__orb,.adf__big,.adf__i,.adf__ic,.adf__sat{transition:none}
}

/* ======================================================================
   3. WHY CHOOSE - image left, argument right.
   ====================================================================== */
.awc__in{display:grid;gap:clamp(30px,4.4vw,70px);align-items:center}

/* The image renders WHOLE at its own ratio (1025x1412): it carries the
   SILICON PATH LAW branding in its upper third, so there is no fixed
   aspect-ratio, no object-fit, and the motion moves this frame - never the
   image inside it. */
.awc__fig{margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--white);
  box-shadow:0 34px 64px -36px rgba(36,19,16,.45);
  max-width:520px;justify-self:center;width:100%}
.awc__fig img{display:block;width:100%;height:auto}

.awc__h{max-width:18ch}
/* The source links this heading to the home page. It reads as a heading,
   not as a link, until it is hovered. */
.awc__hlink{color:inherit;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
  transition:background-size .5s var(--ease)}
.awc__hlink:hover{background-size:100% 2px}
/* The mask is the effect: each line is clipped by its own box, so it rises
   from behind an edge instead of fading. SplitText inserts .awc__line; the
   motion layer wraps each in .awc__mask. */
.awc__mask{display:block;overflow:hidden;
  padding-bottom:.08em;margin-bottom:-.08em}
.awc__line{display:block}
.awc__l{margin-top:16px}
.awc__b{margin:clamp(24px,3vw,32px) 0 0}

.awc__l2{margin:clamp(22px,2.6vw,32px) 0 0;padding:0;list-style:none;
  display:grid;gap:0}
.awc__i{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:8px 22px;
  padding:clamp(18px,2.2vw,26px) 0}
.awc__n{font-family:var(--mono);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;color:var(--brand);padding-top:.35em}
.awc__t{margin:0;font-size:clamp(1.04rem,1.5vw,1.2rem);font-weight:800;
  letter-spacing:-.024em;line-height:1.28;color:var(--ink)}
.awc__p{margin:8px 0 0;color:var(--ink-2);font-size:.95rem;line-height:1.72;
  max-width:60ch}
/* The rule that fills as the item is read. */
.awc__rule{position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line-2);overflow:hidden}
.awc__rule i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),transparent);
  transform:scaleX(0);transform-origin:left center}
.awc__i:last-child{border-bottom:1px solid var(--line-2)}

@media(min-width:1000px){
  .awc__in{grid-template-columns:.9fr 1.1fr}
}

/* ======================================================================
   4. THE TEAM - three groups, each a pinned stage on desktop.
   ====================================================================== */
.ateam{padding-block:clamp(60px,7.5vw,110px)}

/* Each group: its own heading and intro, separated from the next by a rule
   and space - the source's three groups, kept as three. */
/* A frozen group is wrapped in GSAP's .pin-spacer, so the next group follows the spacer, not a .tgrp: keep the same gap and rule. */
.tgrp + .tgrp,.pin-spacer + .tgrp{margin-top:clamp(64px,8vw,120px);
  padding-top:clamp(48px,6vw,90px);
  border-top:1px solid rgba(255,255,255,.14)}
.tgrp__hd{max-width:76ch}
.tgrp__h{max-width:22ch}
.tgrp__l{margin:16px 0 0;color:rgba(255,255,255,.86);
  font-size:1rem;line-height:1.74}

.tstage{margin-top:clamp(28px,3.6vw,52px);
  display:grid;gap:clamp(24px,3vw,48px);align-items:start}

/* ---- the profile panel ---- */
.tstage__panels{display:grid;gap:clamp(22px,3vw,40px)}
.tprof{padding:clamp(22px,2.4vw,32px);overflow:hidden;
  background:linear-gradient(168deg,rgba(30,12,10,.44) 0%,rgba(30,12,10,.58) 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  box-shadow:0 24px 48px -30px rgba(24,10,8,.7),inset 0 1px 0 rgba(255,255,255,.12)}

/* Header: who on the left, the numbers on the right. */
.tprof__hd{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:16px 24px;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)}
.tprof__who{min-width:0}
.tprof__role{margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.68rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#F3DEDA}
.tprof__name{margin:10px 0 0;font-size:clamp(1.45rem,2.5vw,2rem);
  font-weight:800;letter-spacing:-.034em;line-height:1.12;color:#fff}
/* The numbers as two small glass tiles. */
.tprof__stats{margin:0;padding:0;list-style:none;display:flex;gap:10px}
.tprof__stats li{min-width:96px;padding:10px 14px 9px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.tprof__stats b{display:block;font-size:clamp(1.25rem,1.9vw,1.5rem);
  font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.05}
.tprof__stats span{display:block;margin-top:5px;
  font-family:var(--mono);font-size:.6rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#EBD3CE}
.tprof__bio{margin:18px 0 0;max-width:64ch;color:rgba(255,255,255,.9);
  font-size:.97rem;line-height:1.74}
/* Label / value rows, divided by hairlines; values share one left edge. */
.tprof__spec{margin:18px 0 0}
.tprof__row{display:grid;grid-template-columns:148px 1fr;gap:6px 16px;
  align-items:center;padding:11px 0;border-top:1px solid rgba(255,255,255,.1)}
.tprof__row:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.tprof__spec dt{display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.66rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#F3DEDA;white-space:nowrap}
.tprof__spec dt i{flex:none;display:grid;place-items:center;
  width:28px;height:28px;border-radius:9px;font-size:.8rem;color:#FBE9E6;
  background:rgba(182,90,80,.3);border:1px solid rgba(240,220,216,.18);
  transition:background .35s var(--ease),transform .35s var(--ease)}
.tprof__row:hover dt i{background:rgba(182,90,80,.55);transform:rotate(-6deg) scale(1.06)}
.tprof__spec dd{margin:0;color:rgba(255,255,255,.9);
  font-size:.93rem;line-height:1.6}
@media(max-width:560px){
  .tprof__row{grid-template-columns:1fr;gap:8px}
}
.tprof__b{margin:20px 0 0}
.tprof__li{display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  color:#fff;text-decoration:none;
  font-size:.84rem;font-weight:700;letter-spacing:-.01em;
  transition:background .3s var(--ease),border-color .3s var(--ease),
    transform .3s var(--ease)}
.tprof__li:hover{background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4);transform:translateY(-2px)}

/* The inline portrait - the face travels with its own card wherever the
   portrait column is not shown. */
.tprof__inline{display:block;margin:0 0 18px;
  width:clamp(88px,22vw,120px);aspect-ratio:1;
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 16px 32px -22px rgba(0,0,0,.7)}
.tprof__inline img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- the portrait frame ---- */
.tstage__media{display:none;position:relative}
.tstage__frame{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:1;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.24);
  background:#5a0b0b}
/* The portraits are 1:1 with the head centred and headroom above; a taller
   frame crops the SIDES (backdrop), never a face. */
.tstage__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 20%;
  opacity:0;transition:opacity .6s var(--ease)}
.tstage__img.is-on{opacity:1}
.tstage__ring{position:absolute;inset:10px;z-index:4;
  border-radius:calc(var(--r-lg) - 8px);
  border:1px solid rgba(240,220,216,.3);pointer-events:none}

/* Counter, name and rail OVER the frame as a floating glass bar - no
   extra row below the frame, so the two columns keep one bottom edge. */
.tstage__nav{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;
  display:flex;align-items:center;gap:14px;
  padding:4px 8px 4px clamp(14px,1.4vw,18px);min-height:52px;
  border-radius:16px;overflow:hidden;
  background:rgba(28,10,8,.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 36px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16)}
.tstage__count{margin:0;display:flex;align-items:baseline;gap:6px;flex:none;
  font-variant-numeric:tabular-nums}
.tstage__cur{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;
  color:#fff;line-height:1}
.tstage__count span{font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;color:#F0DCD8}
/* The person on screen. Separated from the counter by a hairline. */
.tstage__who{margin:0;flex:1 1 auto;min-width:0;padding-left:14px;
  border-left:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:.86rem;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tstage__dots{margin:0 0 0 auto;padding:0;list-style:none;display:flex;gap:2px;flex:none}
/* 44px hit area around a short bar - a bar you have to aim at is not a
   control. */
.tstage__dots button{position:relative;display:block;width:34px;height:44px;
  padding:0;border:0;background:none;cursor:pointer}
.tstage__dots button::before{content:"";position:absolute;left:6px;right:6px;
  top:50%;height:4px;margin-top:-2px;border-radius:4px;
  background:rgba(255,255,255,.3);
  transition:background .4s var(--ease),left .4s var(--ease),right .4s var(--ease)}
.tstage__dots button:hover::before{background:rgba(255,255,255,.6)}
.tstage__dots button.is-on::before{background:#fff;left:2px;right:2px}
.tstage__dots button:focus-visible{outline:2px solid #F0DCD8;
  outline-offset:-8px;border-radius:8px}
/* Progress through the group, along the bar's bottom edge. --p (0..1) is
   written by the scroll pin; without it the line simply stays empty. */
.tstage__bar{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(255,255,255,.08);pointer-events:none}
.tstage__bar i{position:absolute;inset:0;transform-origin:0 50%;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,#B65A50,#F0DCD8)}

/* The glare: a soft light where the pointer is. Hidden unless the cursor
   layer runs AND the frame is hovered. */
.tstage__glare{position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:0;mix-blend-mode:soft-light;
  background:radial-gradient(circle at calc(50% + var(--x,0) * 50%) calc(50% + var(--y,0) * 50%),
    rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 46%);
  transition:opacity .5s var(--ease)}
html.st-cursor .tstage__media:hover .tstage__glare{opacity:1}

@media(min-width:1024px){
  .tstage{grid-template-columns:1.08fr .92fr;align-items:start}
  /* The portrait column carries the face at this width, so the inline copy
     would be the same person twice. */
  .tprof__inline{display:none}
  .tstage__media{display:block;position:sticky;top:calc(var(--header-h) + 24px)}
  /* A square frame wider than the screen is tall would run its bottom (and
     the control bar) off-screen. Width stays definite, so the cap trims the
     height only; the image crops its backdrop, never the face. */
  .tstage__frame{width:100%;max-height:calc(100svh - var(--header-h) - 48px)}
}
/* Short desktop screens: a tighter profile, so the stage still fits under
   the nav and can pin. Nothing is hidden - only spacing and size shrink. */
@media(min-width:1024px) and (max-height:860px){
  .tprof{padding:20px 24px}
  .tprof__hd{padding-bottom:12px;gap:12px 20px}
  .tprof__name{margin-top:6px;font-size:clamp(1.3rem,2.1vw,1.7rem)}
  .tprof__stats li{padding:7px 12px 6px;min-width:84px}
  .tprof__bio{margin-top:12px;font-size:.91rem;line-height:1.62}
  .tprof__spec{margin-top:12px}
  .tprof__row{padding:7px 0}
  .tprof__spec dt i{width:24px;height:24px;border-radius:8px}
  .tprof__spec dd{font-size:.87rem;line-height:1.5}
  .tprof__b{margin-top:12px}
}


/* ---- PINNED MODE --------------------------------------------------------
   .tstage--pinned is added by the motion layer only when the stage will
   actually pin (desktop width AND enough height to hold the taller profile).

   Panels share ONE grid cell, so the taller profile sets the stage height
   and switching people never changes the layout. The portrait column
   STRETCHES to that same height, so the frame's top and bottom line up
   exactly with the profile's - the alignment the first version lacked. */
.tstage--pinned{align-items:stretch}
.tstage--pinned .tstage__panels{display:grid;gap:0}
.tstage--pinned .tprof{grid-area:1 / 1;visibility:hidden}
.tstage--pinned .tprof.is-on{visibility:visible}
.tstage--pinned .tstage__media{position:relative;top:auto;display:flex}
.tstage--pinned .tstage__frame{flex:1 1 auto;aspect-ratio:auto;min-height:420px;max-height:none}
/* GSAP owns the portrait swap here (a directional wipe), so the CSS
   cross-fade is switched off rather than left to fight it. */
.tstage--pinned .tstage__img{opacity:1;transition:none;will-change:clip-path}

/* ======================================================================
   5. WHAT IT FEELS LIKE - a drawn thread on the light ground.
   ====================================================================== */
/* One left edge for everything: heading, thread, cards. */
.afl__in{display:grid;gap:clamp(30px,4vw,48px);align-items:start}
.afl__h{max-width:16ch;margin:0;text-align:left}
.afl__track{position:relative;padding-left:56px}
/* The thread: one segment per card, from its node down to the next node
   (the card's height plus the 16px gap), so it always meets the nodes
   exactly. The fill grows down when the card is reached. Node centre:
   x = 20px in the gutter, y = 48px = the icon's centre. */
.afl__l{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.afl__i{position:relative}
.afl__i:not(:last-child)::before,
.afl__i:not(:last-child)::after{content:"";position:absolute;
  left:-37px;top:48px;width:2px;height:calc(100% + 16px);border-radius:2px}
.afl__i:not(:last-child)::before{background:var(--line)}
.afl__i:not(:last-child)::after{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  transform-origin:50% 0;transform:scaleY(0);
  transition:transform 1s var(--ease) .15s}
.afl__i.is-lit::after,html.mo-off .afl__i::after{transform:scaleY(1)}
/* Node: an open ring until its card is reached, then filled. */
.afl__dot{position:absolute;left:-42px;top:42px;z-index:1;
  width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-2);
  transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
html.mo-off .afl__dot,
.afl__i.is-lit .afl__dot{background:var(--brand);border-color:var(--brand);
  box-shadow:0 0 0 6px var(--brand-wash)}
/* The card. */
.afl__card{position:relative;overflow:hidden;
  display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
  padding:22px clamp(18px,2.4vw,28px);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 36px -30px rgba(90,31,27,.35);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.afl__card:hover{transform:translateY(-3px);border-color:var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 26px 44px -30px rgba(90,31,27,.45)}
.afl__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  color:#fff;font-size:1.25rem;
  background:linear-gradient(160deg,var(--brand-2) 0%,var(--brand) 100%);
  box-shadow:0 12px 22px -14px rgba(90,31,27,.8),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .45s var(--ease)}
.afl__card:hover .afl__ic{transform:rotate(-6deg) scale(1.05)}
.afl__tx{min-width:0;padding-top:2px}
.afl__t{margin:0;max-width:none;font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:800;
  letter-spacing:-.024em;line-height:1.3;color:var(--ink)}
.afl__p{margin:6px 0 0;color:var(--ink-2);font-size:.97rem;line-height:1.6}

/* Desktop: heading left and still, cards right. */
@media(min-width:960px){
  .afl__in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(48px,6vw,96px)}
  .afl__h{position:sticky;top:calc(var(--header-h) + 40px)}
}
@media(max-width:480px){
  .afl__track{padding-left:34px}
  .afl__i:not(:last-child)::before,
  .afl__i:not(:last-child)::after{left:-25px;top:42px}
  .afl__dot{left:-30px;top:36px}
  .afl__card{grid-template-columns:1fr;gap:14px;padding:20px}
  .afl__ic{width:44px;height:44px;border-radius:13px;font-size:1.05rem}
}

/* ---- The disclaimer, under the Attorneys profiles (left column). ----
   Same glass as the profile card, quieter type: it qualifies the numbers,
   it does not compete with them. */
.tstage__note{margin:0;padding:14px clamp(18px,2vw,24px);
  border-radius:16px;
  background:rgba(30,12,10,.34);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8);font-size:.8rem;line-height:1.62}
.tstage__note strong{color:#fff;font-weight:800;letter-spacing:.01em}
/* Pinned: the profiles share row 1, the note takes row 2 of the same
   column, so the portrait (stretched to the column) ends level with it. */
.tstage--pinned .tstage__note{margin-top:14px}

/* ======================================================================
   CURSOR LAYER (StringTune) - see src/scripts/attorneys-motion.js's
   sibling, attorneys-cursor.js. Every variable has a resting fallback, so
   with the layer off (touch, reduced motion, JS failure) the page is simply
   static and complete.
   ====================================================================== */

/* -- Spotlight: a light that follows the pointer across a card. The module
   writes --spotlight-angle (deg) and --spotlight-distance (px, unitless). */
.tprof,.afl__card{position:relative}
.tprof::before,.afl__card::before{content:"";position:absolute;z-index:0;
  top:50%;left:50%;width:520px;height:520px;border-radius:50%;
  pointer-events:none;opacity:0;
  transform:translate(-50%,-50%)
    rotate(calc((var(--spotlight-angle,0) + 90) * 1deg))
    translateY(calc(min(var(--spotlight-distance,0), 220) * -1px));
  transition:opacity .45s var(--ease)}
/* Brand-tinted on the light cards, warm rose on the dark glass. */
.afl__card::before{background:radial-gradient(circle,rgba(124,46,40,.13),transparent 62%)}
.tprof::before{background:radial-gradient(circle,rgba(240,220,216,.13),transparent 62%)}
html.st-cursor .tprof:hover::before,
html.st-cursor .afl__card:hover::before{opacity:1}
/* A light EDGE on the profile: a 1px ring whose bright arc points at the
   pointer (same --spotlight-angle as the glow, so glow and edge agree). */
.tprof::after,.afl__card::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;padding:1px;opacity:0;
  background:conic-gradient(from calc((var(--spotlight-angle,0) + 90) * 1deg),
    rgba(240,220,216,.85) 0deg,rgba(240,220,216,0) 70deg,
    rgba(240,220,216,0) 290deg,rgba(240,220,216,.85) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity .45s var(--ease)}
html.st-cursor .tprof:hover::after,
html.st-cursor .afl__card:hover::after,
/* On the white cards the edge is brand oxblood, not rose. */
.afl__card::after{background:conic-gradient(from calc((var(--spotlight-angle,0) + 90) * 1deg),
  rgba(124,46,40,.7) 0deg,rgba(124,46,40,0) 70deg,
  rgba(124,46,40,0) 290deg,rgba(124,46,40,.7) 360deg)}
/* Content sits above the light. */
.tprof > *,.afl__card > *{position:relative;z-index:1}

/* -- Magnetic: the module writes --magnetic-x/-y (px, unitless). Applied
   through `translate`, NOT `transform`, so it composes with the buttons'
   own hover lift instead of overwriting it. */
html.st-cursor [string="magnetic"]{
  translate:calc(var(--magnetic-x,0) * 1px) calc(var(--magnetic-y,0) * 1px)}

/* -- Portrait tilt: StringCursor writes --x/--y in -1..1 on the frame. A few
   degrees only - enough to read as depth, not as a gimmick. */
html.st-cursor .tstage__media{perspective:1100px}
html.st-cursor .tstage__frame{
  transform:rotateY(calc(var(--x,0) * 5deg)) rotateX(calc(var(--y,0) * -4deg));
  will-change:transform}
/* Layers inside the tilted frame drift against the pointer, a few px each,
   so the glass bar and the ring read as floating in front of the portrait.
   `translate` only: GSAP owns the ring's transform during a swap. */
html.st-cursor .tstage__nav{translate:calc(var(--x,0) * -7px) calc(var(--y,0) * -5px)}
html.st-cursor .tstage__ring{translate:calc(var(--x,0) * -4px) calc(var(--y,0) * -3px)}

/* -- The cursor badge. Rides beside the system cursor (never replaces it)
   and only while a target is hovered: StringCursor adds .-show then. */
.tcur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:.95rem;
  box-shadow:0 10px 24px -10px rgba(36,19,16,.7),inset 0 1px 0 rgba(255,255,255,.25);
  /* Position and scale are SEPARATE properties. In one transform with a
     transition, the per-frame position updates would be eased too and the
     badge would trail ~0.35s behind the cursor. translate follows the pointer
     instantly (StringCursor already smooths it); only scale is transitioned. */
  translate:calc(var(--x,-200) * 1px + 18px) calc(var(--y,-200) * 1px + 18px);
  scale:0;opacity:0;
  transition:opacity .25s var(--ease),scale .35s var(--ease),
    width .35s var(--ease),height .35s var(--ease)}
html:not(.st-cursor) .tcur{display:none}
.tcur.-show{opacity:1;scale:1}
/* Over a portrait: a larger lit badge. */
.tcur.-view{width:56px;height:56px;font-size:1.1rem;
  background:linear-gradient(176deg,#7C2E28 0%,var(--brand) 46%,#4A1714 100%)}
/* Over a roster row: the arrow turns to point where the row goes. */
/* Kept as an up-right arrow (the same "goes somewhere" mark as the menu
   rows), nudged up and right rather than turned flat. */
.tcur i{transition:transform .3s var(--ease)}
.tcur.-go i{transform:translate(1px,-1px)}

/* ======================================================================
   PRE-PAINT
   Hidden only while .mo-pre is on the root, and only by opacity. Cleared
   the moment the motion layer takes over, so a JS failure cannot leave the
   page blank.
   ====================================================================== */
html.mo-pre .awc__i,
html.mo-pre .awc__fig,
html.mo-pre .afl__i,
html.mo-pre [data-rv]{opacity:0}

@media(prefers-reduced-motion:reduce){
  html.mo-pre .awc__i,
  html.mo-pre .awc__fig,
  html.mo-pre .afl__i,
  html.mo-pre [data-rv]{opacity:1}
}

/* ======================================================================
   HERO RIGHT COLUMN - the shared .pnv navigator (about-v2.css), one tile
   per team group. This page's own extras: the group's faces in the icon
   slot and the names line.
   ====================================================================== */
/* Fixed width (room for two faces) so every tile's text starts on the same
   line, whether its group has one person or two. Faces never shrink. */
.pnv__faces{flex:none;display:flex;width:80px;padding-left:10px}
.pnv__faces img{display:block;flex:none;width:40px;height:40px;aspect-ratio:1;margin-left:-10px;border-radius:50%;object-fit:cover;
  border:2px solid var(--white,#fff);box-shadow:0 4px 10px -4px rgba(36,19,16,.35);transition:margin .3s var(--ease,ease)}
.pnv__a:hover .pnv__faces img{margin-left:-4px}
.pnv__names{font-size:.82rem;line-height:1.45;color:var(--ink-2,#4A3F3A)}
@media(prefers-reduced-motion:reduce){.pnv__faces img{transition:none}}

/* ======================================================================
   KINETIC HEADINGS + RHYTHM - the same as the other v2 pages.
   This page scrolls on GSAP, not StringTune's scroll layer, so the shared
   rules (gated on html.st-scroll) are mirrored here on html.mo-on.
   ====================================================================== */
html.mo-on .kx .-s-word{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.12em;margin-bottom:-.12em}
html.mo-on .kx .-s-char{display:inline-block;transform:translateY(112%);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--char-index,0) * 14ms)}
html.mo-on .kx.-inview .-s-char{transform:none}
.adf,.awc,.afl{padding-block:clamp(44px,5.5vw,80px)}
.fin{padding-block:clamp(52px,6vw,88px)}
/* One-person group: no counter before the name, so no divider either. */
.tstage__nav > .tstage__who:first-child{border-left:0;padding-left:0;margin-left:0}
.tstage__nav > .tstage__who:first-child::before{display:none}