/* Suder, LLC — site design system
   Tokens, base, layout, components. One file, no build step. */
:root{
  --ink:#111418; --ink-2:#1d2229; --paper:#f5f2ec; --paper-2:#ebe6dc; --white:#ffffff;
  --navy:#15243b; --navy-2:#0e192b; --brass:#b9924a; --brass-2:#d7b46b; --stone:#6b7280; --stone-2:#9aa0a8;
  --line:rgba(17,20,24,.12); --line-dark:rgba(255,255,255,.14);
  --display:"Fraunces",Georgia,"Times New Roman",serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1240px; --gutter:clamp(20px,4vw,48px); --radius:6px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.7s;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(40px,6vw,76px);font-variation-settings:"opsz" 144}
h2{font-size:clamp(32px,4.2vw,54px)}
h3{font-size:clamp(22px,2.4vw,30px)}
h4{font-size:20px}
p{margin:0 0 1.1em}
strong{font-weight:600}
em{font-family:var(--display);font-style:italic}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(64px,9vw,128px) 0}
.section-tight{padding:clamp(40px,6vw,80px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--stone);margin-bottom:22px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brass)}
.dark .eyebrow{color:var(--stone-2)}
/* over hero photography the grey eyebrow disappears; white plus a soft shadow holds on any slide */
.hero .eyebrow{color:rgba(255,255,255,.93);text-shadow:0 1px 14px rgba(14,25,43,.75)}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--ink-2);max-width:60ch}
/* .cta paints its own navy without the .dark class, so a lede inside it kept the
   light-ground ink and rendered near-black on navy */
.dark .lede,.cta .lede{color:rgba(255,255,255,.82)}
.muted{color:var(--stone)}
.dark{background:var(--navy);color:var(--white)}
.dark-ink{background:var(--ink);color:var(--white)}
.dark h1,.dark h2,.dark h3,.dark-ink h1,.dark-ink h2,.dark-ink h3{color:var(--white)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:.01em;border:1px solid transparent;transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s;white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--brass);color:var(--ink)}
.btn-primary:hover{background:var(--brass-2);transform:translateY(-2px)}
.btn-outline{border-color:currentColor;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--white);transform:translateY(-2px)}
.dark .btn-outline,.dark-ink .btn-outline,.hero .btn-outline{color:var(--white);border-color:rgba(255,255,255,.55)}
.dark .btn-outline:hover,.dark-ink .btn-outline:hover,.hero .btn-outline:hover{background:var(--white);color:var(--ink)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;border-bottom:1px solid var(--brass);padding-bottom:2px}
.link svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.link:hover svg{transform:translateX(4px)}

/* header */
.header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,box-shadow .4s,transform .4s var(--ease)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:84px;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;height:100%}
.brand img{height:48px;width:auto}
.brand .logo-dark{display:none}
.header.solid{background:rgba(245,242,236,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--line)}
.header.solid .brand .logo-dark{display:block}
.header.solid .brand .logo-white{display:none}
.header.hide{transform:translateY(-100%)}
.nav{display:flex;align-items:center;gap:34px}
.nav>a,.nav>.has-menu>a{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--white);opacity:.92;display:inline-flex;align-items:center;gap:6px;padding:10px 0}
.nav>a:hover,.nav>.has-menu>a:hover{opacity:1}
.header.solid .nav>a,.header.solid .nav>.has-menu>a{color:var(--ink)}
.has-menu{position:relative}
.has-menu svg{width:12px;height:12px}
.menu{position:absolute;top:100%;left:-18px;min-width:300px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:10px;box-shadow:0 20px 50px rgba(17,20,24,.16);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease)}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu a{display:block;padding:10px 12px;border-radius:6px;font-size:14.5px;font-weight:500;color:var(--ink)}
.menu a:hover{background:var(--paper)}
.menu a span{display:block;font-size:12px;color:var(--stone);font-weight:400}
.nav .btn{padding:11px 18px;font-size:13.5px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--white)}
.header.solid .burger{color:var(--ink)}
.burger span{display:block;width:26px;height:2px;background:currentColor;margin:6px 0;transition:.3s}
.mobile-nav{position:fixed;inset:0;background:var(--navy);color:var(--white);z-index:60;padding:110px var(--gutter) 40px;display:none;flex-direction:column;gap:6px;overflow:auto}
.mobile-nav.open{display:flex}
.mobile-nav a{font-family:var(--display);font-size:30px;padding:8px 0;border-bottom:1px solid var(--line-dark)}
.mobile-nav .sub{font-family:var(--body);font-size:17px;padding:8px 0 8px 18px;border:0;color:rgba(255,255,255,.8)}
.mobile-nav .close{position:absolute;top:26px;right:var(--gutter);background:none;border:0;color:var(--white);font-size:34px;cursor:pointer;line-height:1}
body.menu-open{overflow:hidden}
@media (max-width:980px){.nav{display:none}.burger{display:block}}

/* hero */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;color:var(--white);background:var(--navy-2);overflow:hidden;isolation:isolate}
.hero.hero-short{min-height:min(72vh,680px)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 12s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
/* Crossfade with no dip: the outgoing slide (.prev) stays fully opaque underneath
   while the incoming one fades in on top of it. Fading both at once let the navy
   ground show through at the midpoint, which is half of what read as a jump. */
.hero-slides img{position:absolute;inset:0;opacity:0;z-index:0;animation:none;transition:opacity 1.8s var(--ease);will-change:opacity,transform}
.hero-slides img.prev{opacity:1;z-index:1;transition:none}
.hero-slides img.active{opacity:1;z-index:2}
/* The pan stays applied through the fade-out. Previously it hung off .active alone,
   so dropping that class at the 6.5s handoff tore the animation off an image that
   was still visible for another 1.8s, snapping it from 72% of its travel back to
   the base transform. 'both' also puts the incoming slide on its first keyframe
   before it is visible, instead of jumping there as it fades in. */
.hero-slides img.active,.hero-slides img.prev{animation:kenburns 9s linear both}
.hero-slides img:nth-child(even).active,.hero-slides img:nth-child(even).prev{animation-name:kenburns2}
@keyframes kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
@keyframes kenburns2{from{transform:scale(1.12) translate3d(1.5%,1%,0)}to{transform:scale(1.02) translate3d(0,0,0)}}
.hero-caption{transition:opacity .6s}
.hero-dots{position:absolute;left:calc(var(--gutter) + 120px);bottom:28px;display:flex;gap:8px}
.hero-dots button{width:26px;height:2px;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer;transition:background .3s}
.hero-dots button.active{background:var(--brass-2)}
@media (max-width:980px){.hero-dots{display:none}}
/* Shaped to the hero text band, not to the frame. Measured against all ten
   slides: the eyebrow sits at 31%, the h1 spans 35-53%, the lede 55-66%, so the
   old ramp put its lightest point (25% at 40%) directly behind the headline. The
   top stays at .55 so the nav reads as before. */
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,25,43,.55) 0%,rgba(14,25,43,.38) 20%,rgba(14,25,43,.70) 34%,rgba(14,25,43,.82) 60%,rgba(14,25,43,.92) 100%)}
.hero-pattern{position:absolute;inset:0;z-index:-1;background-color:var(--navy-2);background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%)}
.hero-pattern::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 35%,rgba(185,146,74,.28),transparent 55%)}
.hero-inner{position:relative;padding:150px var(--gutter) clamp(56px,7vw,96px);max-width:var(--max);margin:0 auto;width:100%}
.hero h1{max-width:14ch;margin-bottom:22px}
.hero .lede{color:rgba(255,255,255,.86);max-width:56ch;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-tag{position:absolute;right:var(--gutter);bottom:clamp(88px,7vw,110px);font-family:var(--display);font-style:italic;font-size:clamp(18px,2vw,26px);color:rgba(255,255,255,.75);max-width:22ch;text-align:right}
@media (max-width:980px){.hero-tag{display:none}}
.hero-scroll{position:absolute;left:var(--gutter);bottom:22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:10px}
.hero-scroll::after{content:"";width:40px;height:1px;background:rgba(255,255,255,.4)}
/* captions name the matter, not just the place, so they read rather than whisper */
.hero-caption{position:absolute;right:var(--gutter);bottom:22px;font-size:15px;line-height:1.45;letter-spacing:.01em;color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(14,25,43,.65);max-width:46ch;text-align:right}
@media (max-width:980px){.hero-caption{display:none}}

/* stats */
.stats{background:var(--ink);color:var(--white);padding:0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{padding:38px 28px 38px 0;border-right:1px solid var(--line-dark)}
.stat:last-child{border-right:0}
.stat+.stat{padding-left:28px}
.stat b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(40px,4.4vw,60px);line-height:1;color:var(--brass-2);margin-bottom:10px}
.stat span{font-size:14px;color:rgba(255,255,255,.72);line-height:1.45;display:block;max-width:26ch}
@media (max-width:900px){.stats .wrap{grid-template-columns:1fr 1fr}.stat{border-right:0;border-bottom:1px solid var(--line-dark);padding:26px 0}.stat+.stat{padding-left:0}.stat:nth-child(odd){padding-right:24px}.stat:nth-child(even){padding-left:24px;border-left:1px solid var(--line-dark)}}

/* intro split */
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.split .sticky{position:sticky;top:110px}
@media (max-width:900px){.split{grid-template-columns:1fr}.split .sticky{position:static}}
.rule{height:1px;background:var(--line);margin:0}

/* practice cards */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px 30px;display:flex;flex-direction:column;min-height:300px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(17,20,24,.35);border-color:rgba(17,20,24,.25)}
.card .num{font-family:var(--display);font-size:13px;letter-spacing:.14em;color:var(--brass);margin-bottom:26px}
.card h3{font-size:26px;margin-bottom:12px;color:var(--ink)}
.card p{font-size:15.5px;color:var(--ink-2);flex:1}
.card .link{align-self:flex-start;margin-top:18px}
/* cards keep their own ink on a .dark section, which otherwise makes them white on white */
.dark .card h3{color:var(--ink)}
.dark .card .link{color:var(--ink)}
/* every card the same size, in line: no stagger, no spanning last card */
.grid-3{grid-auto-rows:1fr}
}

/* results rows */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:150px minmax(0,.9fr) minmax(0,1.6fr) auto;gap:clamp(20px,3vw,44px);padding:30px 0;border-bottom:1px solid var(--line);align-items:start;transition:background .3s}
.row .thumb{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.row .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .9s var(--ease),filter .6s}
.row:hover .thumb img{transform:scale(1.05);filter:none}
.row .thumb-empty{display:grid;place-items:center;font-family:var(--display);font-style:italic;color:var(--stone);font-size:15px;border:1px solid var(--line)}
.dark .row .thumb-empty{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:var(--stone-2)}
.row:hover{background:rgba(255,255,255,.5)}
.row .kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--brass);margin-bottom:8px}
.row h3{font-size:24px;margin-bottom:4px}
.row .meta{font-size:14px;color:var(--stone)}
.row p{margin:0;font-size:16px;color:var(--ink-2)}
.row .arrow{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.35s}
.row:hover .arrow{background:var(--ink);color:var(--white);border-color:var(--ink)}
.row .arrow svg{width:16px;height:16px}
@media (max-width:820px){.row{grid-template-columns:1fr;gap:12px}.row .arrow{display:none}.row .thumb{max-width:260px}.row .thumb-empty{display:none}}
.dark .rows{border-color:var(--line-dark)}.dark .row{border-color:var(--line-dark)}.dark .row:hover{background:rgba(255,255,255,.04)}.dark .row p{color:rgba(255,255,255,.8)}.dark .row .meta{color:var(--stone-2)}.dark .row .arrow{border-color:var(--line-dark)}.dark .row:hover .arrow{background:var(--white);color:var(--ink)}

/* awards */
.awards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
/* an award with a listing URL renders as a link and lifts like the practice cards */
.award[href]{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.award[href]:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(17,20,24,.3);border-color:rgba(17,20,24,.25)}
.award{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.award img{height:150px;width:auto;object-fit:contain}
.award .ph{height:150px;width:100%;display:grid;place-items:center;font-family:var(--display);font-size:38px;color:var(--navy);line-height:1}
.award b{display:block;font-family:var(--display);font-weight:500;font-size:20px}
.award span{font-size:13px;color:var(--stone);line-height:1.4}
@media (max-width:980px){.awards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.awards{grid-template-columns:1fr}}

/* team */
.people{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media (max-width:1100px){.people{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.people{grid-template-columns:1fr 1fr;gap:12px}}
.person{display:block}
.person .ph{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);background:var(--paper-2)}
.person img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter .6s var(--ease),transform .9s var(--ease)}
.person:hover img{filter:none;transform:scale(1.03)}
.person b{display:block;font-family:var(--display);font-weight:500;font-size:20px;margin-top:14px}
.person b i{font-style:normal;font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--brass);margin-left:8px;white-space:nowrap;vertical-align:2px}
@media (max-width:420px){.person b i{display:block;margin-left:0;vertical-align:0;min-height:15px;line-height:15px}}
.person span{display:block;font-size:13px;color:var(--stone);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.dark .person span{color:var(--stone-2)}
/* homepage team: expanding panels (site.js cycles them; first ships open for no-JS) */
.crew{display:flex;gap:10px;height:clamp(520px,52vw,620px)}
.mate{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--radius);background:var(--ink-2);transition:flex-grow .6s var(--ease)}
.mate.is-on{flex-grow:5}
.mate-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos);filter:grayscale(1) contrast(1.02);transition:filter .6s var(--ease),transform .9s var(--ease)}
.mate.is-on .mate-ph{filter:none;transform:scale(1.02)}
.mate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,20,24,0) 30%,rgba(17,20,24,.66) 54%,rgba(17,20,24,.96) 100%);pointer-events:none}
.mate-tab{position:absolute;inset:0;z-index:2;width:100%;background:none;border:0;padding:0;color:var(--white);cursor:pointer;font:inherit;text-align:left}
.mate-tab:focus-visible{outline:2px solid var(--brass-2);outline-offset:-4px}
.mate-tab .vt{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font-family:var(--display);font-size:19px;transition:opacity .25s}
.mate-tab .vt i{font-style:normal;font-family:var(--body);color:var(--brass-2);margin-bottom:10px;display:inline-block;transform:rotate(90deg)}
.mate.is-on .mate-tab{pointer-events:none}
.mate.is-on .mate-tab .vt{opacity:0}
.mate-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:calc(clamp(22px,3vw,36px) + 70px) clamp(22px,3vw,36px) clamp(22px,3vw,36px);background:linear-gradient(180deg,rgba(17,20,24,0),rgba(17,20,24,.8) 70px,rgba(17,20,24,.9));opacity:0;transform:translateY(14px);transition:opacity .35s ease .15s,transform .45s var(--ease) .15s;pointer-events:none;text-shadow:0 1px 14px rgba(17,20,24,.7)}
.mate.is-on .mate-info{opacity:1;transform:none;pointer-events:auto}
.mate-info .r{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-2)}
.mate-info h3{font-size:clamp(30px,3.2vw,44px);line-height:1.04;margin:8px 0 0}
.mate-info h3 a{background-image:linear-gradient(var(--brass-2),var(--brass-2));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s var(--ease)}
.mate-info h3 a:hover,.mate-info h3 a:focus-visible{background-size:100% 2px}
.mate-info h3 small{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.82);margin-left:10px;white-space:nowrap;vertical-align:4px}
.mate-info .q{font-family:var(--display);font-style:italic;font-size:18px;line-height:1.45;margin:10px 0 0;max-width:46ch}
.mate-info>*{max-width:576px}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-dark)}
.facts3 b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.1;color:var(--brass-2)}
.facts3 span{display:block;font-size:12.5px;line-height:1.4;margin-top:5px;color:rgba(255,255,255,.84)}
.mate-foot{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin:18px 0 0;font-size:14px}
.mate-foot a{color:rgba(255,255,255,.88);border-bottom:1px solid rgba(215,180,107,.5)}
.mate-foot .bio{color:var(--brass-2);font-weight:600;border:0}
@media (max-width:1100px){
  .crew{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .mate,.mate.is-on{flex:0 0 84%;display:flex;flex-direction:column;scroll-snap-align:start;border:1px solid var(--line-dark)}
  .mate::after,.mate-tab{display:none}
  .mate-ph,.mate.is-on .mate-ph{position:relative;inset:auto;height:340px;flex:none;filter:none;transform:none}
  .mate-info{position:relative;opacity:1;transform:none;pointer-events:auto;text-shadow:none;padding:20px 20px 22px;background:none}
  .facts3{grid-template-columns:1fr;gap:8px;margin-top:16px;padding-top:14px}
  .facts3 div{display:flex;gap:12px;align-items:baseline}
  .facts3 b{flex:0 0 100px;font-size:19px}
  .facts3 span{margin-top:0}
}
@media (min-width:641px) and (max-width:1100px){.mate,.mate.is-on{flex-basis:calc(50% - 6px)}}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:var(--paper-2)}
.marquee-track{display:inline-flex;gap:40px;animation:marquee 90s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--display);font-size:20px;color:var(--ink-2);display:inline-flex;align-items:center;gap:40px}
.marquee-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* practice page */
.credbar{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.credbar .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:space-between}
.credbar .item{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-2)}
.credbar .item b{font-family:var(--display);font-size:24px;font-weight:500;color:var(--navy)}
.bullets{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.bullets li{position:relative;padding:16px 0 16px 34px;border-top:1px solid var(--line);font-size:16px}
.bullets li::before{content:"";position:absolute;left:0;top:26px;width:18px;height:1px;background:var(--brass)}
@media (max-width:760px){.bullets{grid-template-columns:1fr}}
.cta{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;background:radial-gradient(ellipse,rgba(185,146,74,.25),transparent 60%);pointer-events:none}
.cta .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;position:relative}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}}
.cta h2{margin-bottom:10px}
.cta .contact-lines{font-size:16px;line-height:1.8;color:rgba(255,255,255,.85)}
.cta .muted{color:rgba(255,255,255,.62)}   /* --stone is a light-ground grey; on navy it goes muddy */
.cta .contact-lines a:hover{color:var(--brass-2)}

/* slot-machine tagline: practice areas reel past, settling on the firm line */
.spin{display:flex;flex-wrap:wrap;align-items:baseline;gap:.34em;font-family:var(--display);
  font-size:clamp(21px,2.5vw,32px);line-height:1.15;letter-spacing:-.01em;margin-bottom:16px;color:rgba(255,255,255,.66)}
.spin-word{position:relative;font-style:italic;color:var(--brass-2)}
.spin-word.reeled{display:inline-block;overflow:hidden;height:1.15em}
.spin-word .reel{display:block;will-change:transform}
.spin-word .reel > span{display:block;height:1.15em;white-space:nowrap;line-height:.95em}
.spin-word.spinning{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the same reel at headline size: "Counsel for" over the reeling line */
/* .hero h1 sets max-width:14ch, which out-specifies a bare .spin-h1 and clipped
   the settled line; the reel needs its own width, so match that specificity. */
.hero h1.spin-h1{max-width:none}
.spin-h1{max-width:none;display:block}
.spin-h1 .spin-pre{display:block}
.spin-h1 .spin-word{font-style:italic;color:var(--white);max-width:none}
.spin-h1 .spin-word.reeled{display:block;overflow:hidden;height:1.08em;white-space:nowrap}
/* practice areas reel past in brass; the firm line lands in the headline's own white */
.spin-h1 .reel > span{color:var(--brass-2)}
.spin-h1 .reel > span:nth-last-child(2){color:var(--white)}
.spin-h1 .spin-word .reel{display:block;will-change:transform}
.spin-h1 .spin-word .reel > span{display:block;height:1.08em;white-space:nowrap;line-height:.86em}
.spin-h1 .spin-word.spinning{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
@media (max-width:520px){.spin{font-size:19px}}

/* chips (results filter) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.chip{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:500;background:transparent;cursor:pointer;color:var(--ink);transition:.25s}
.chip:hover,.chip.active{background:var(--ink);color:var(--white);border-color:var(--ink)}
.row.hidden{display:none}

/* bio */
.bio-hero{padding:150px 0 60px}
.bio-hero .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,5vw,80px);align-items:end}
@media (max-width:860px){.bio-hero .wrap{grid-template-columns:1fr}}
.bio-hero .ph{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius)}
.bio-hero img{width:100%;height:100%;object-fit:cover}
.bio-hero h1{font-size:clamp(38px,5vw,64px)}
.bio-hero .role{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--brass);margin-bottom:14px;display:block}
.bio-hero .contact{font-size:15px;color:var(--ink-2);line-height:1.8}
.bio-body .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(30px,5vw,80px)}
@media (max-width:860px){.bio-body .wrap{grid-template-columns:1fr}}
.bio-body p{font-size:17px}
.facts h3{font-size:14px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--body);font-weight:600;color:var(--stone);margin:0 0 10px}
.facts ul{list-style:none;margin:0 0 30px;padding:0}
.facts li{padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5}

/* generic content */
.prose{max-width:760px}
.prose h2{font-size:28px;margin-top:1.6em}
.prose ul{padding-left:20px}
.list-cols{columns:3;column-gap:40px;list-style:none;padding:0;margin:0}
.list-cols li{padding:9px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-size:15.5px}
@media (max-width:900px){.list-cols{columns:2}}
@media (max-width:560px){.list-cols{columns:1}}
.opinion{display:grid;grid-template-columns:1fr auto;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);align-items:center}
.opinion .topic{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--brass);margin-bottom:6px}
.opinion b{font-family:var(--display);font-weight:500;font-size:22px;display:block}
.opinion span{font-size:14px;color:var(--stone)}
@media (max-width:640px){.opinion{grid-template-columns:1fr}}

/* forms */
.form{display:grid;gap:16px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.form .two{grid-template-columns:1fr}}
.form label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--stone);margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;font:inherit;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:transparent}
.form textarea{min-height:150px;resize:vertical}
.form .note{font-size:13px;color:var(--stone)}
.form-ok{display:none;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.hp{position:absolute;left:-9999px}

/* footer */
.footer{background:var(--ink);color:rgba(255,255,255,.8);padding:70px 0 34px;font-size:14.5px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:50px}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer .cols{grid-template-columns:1fr}}
.footer img{height:30px;width:auto;margin-bottom:18px}
.footer h4{font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-2);margin-bottom:14px}
.footer a{display:block;padding:4px 0;color:rgba(255,255,255,.8)}
.footer a:hover{color:var(--brass-2)}
.footer .tag{font-family:var(--display);font-style:italic;font-size:18px;color:var(--white);margin-bottom:14px}
.footer .bottom{border-top:1px solid var(--line-dark);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--stone-2)}
.footer .bottom a{display:inline;padding:0;margin-left:18px;color:var(--stone-2)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}.reveal[data-delay="2"]{transition-delay:.2s}.reveal[data-delay="3"]{transition-delay:.3s}.reveal[data-delay="4"]{transition-delay:.4s}
.hero .reveal{transition-duration:1s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:var(--ink);padding:10px 14px;z-index:100}
.skip:focus{left:10px;top:10px}
.page-head{padding:160px 0 50px}
.page-head h1{max-width:16ch}
.page-head .lede{margin-top:10px}