/* CR. Amanya theme — page/component styles (rules used on 1–2 templates) + utilities + responsive hardening. */
@layer components {
/* ============ PUBLICATIONS listing ============ */ .pub-tabs{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.pub-tabs button{padding:0.55rem 1.1rem;border:1px solid var(--line);background:#fff;font:inherit;font-size:0.85rem;font-weight:600;color:var(--ink);cursor:pointer;transition:all .25s}
.pub-tabs button:hover{border-color:var(--blue);color:var(--blue)}
.pub-tabs button.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.pub-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.pub-toolbar .rail-search{min-width:min(320px,100%)}
.pub-empty{display:none;padding:clamp(2rem,4vw,3rem);border:1px solid var(--line);background:#fff;text-align:center;color:var(--grey);font-size:0.95rem;margin-top:1.6rem}
.pub-empty.is-visible{display:block}
.pub-card.is-hidden{display:none}
/* The pager is real now: paginate_links() emits .page-numbers, with .current
on the page you are on and .dots for the gap, so the original design's
hand-written .is-current is carried over onto those classes. */
.pub-pager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:1.4rem;border-top:1px solid var(--line)}
.pub-pager-count{margin:0;font-size:0.82rem;color:var(--grey)}
.pub-pager-links{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem}
.pub-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 0.7rem;border:1px solid var(--line);background:#fff;font-size:0.9rem;font-weight:600;color:var(--ink);transition:all .25s}
.pub-pager a.page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.pub-pager .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pub-pager .page-numbers.dots{min-width:1.6rem;padding:0;border-color:transparent;background:none;color:var(--grey)}
.pub-pager .prev,.pub-pager .next{gap:0.45rem;font-size:0.76rem;letter-spacing:0.1em;text-transform:uppercase}
/* Filter chips: links, not buttons, so every filter is a URL that can be
shared, bookmarked and crawled. */
.pub-chip{display:inline-block;padding:0.5rem 0.95rem;border:1px solid var(--line);background:#fff;font-size:0.82rem;font-weight:600;line-height:1.3;color:var(--ink);transition:all .25s}
.pub-chip:hover{border-color:var(--blue);color:var(--blue)}
.pub-chip.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
/* Rendered by PHP when it applies, rather than hidden and toggled. */
.pub-empty.is-visible{display:block;padding:3rem 0;text-align:center;color:var(--grey)}
@media (max-width:620px){
.pub-pager{justify-content:center;text-align:center}
.pub-pager-links{justify-content:center}
.pub-pager .prev span,.pub-pager .next span{display:none}
}
/* premium listing additions */
/* Gutters are set on the listing's own two containers rather than on
.media-grid--compact, which single.php and single-service.php also use
for their related-insight rows. */
.pub-featured{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,3.4vw,3.2rem);row-gap:clamp(2.4rem,3.5vw,3.2rem);margin-top:1.6rem}
#pub-grid{column-gap:clamp(2rem,3.4vw,3.2rem);row-gap:clamp(2.6rem,4vw,3.6rem)}
.pub-card--lg .media-card-title{font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.32}
/* A backstop, not the trim. craa_card_excerpt() ends the text on a sentence
inside a three-line budget; this only catches a narrow column or enlarged
type, and sits at four lines so it never re-cuts a sentence the trim just
finished cleanly. */
.pub-ex{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;font-size:0.92rem;line-height:1.55;color:#3d4145;margin-top:0.5rem}
.pub-label{font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-right:0.6rem}
.pub-select{padding:0.55rem 0.9rem;border:1px solid var(--line);background:#fff;font:inherit;font-size:0.85rem;font-weight:600;color:var(--ink);cursor:pointer}
.res-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.res-card{background:#fff;padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:0.8rem;transition:box-shadow .3s ease}
.res-card:hover{box-shadow:0 14px 34px rgba(8,20,35,0.08)}
.res-title{font-size:1.12rem;font-weight:700;letter-spacing:-0.005em}
.res-card:hover .res-title{color:var(--blue)}
.res-copy{font-size:0.9rem;line-height:1.6;color:#3d4145}
/* ============ FAQ accordion ============ */ .faq-group{margin-top:clamp(2rem,3.5vw,2.8rem)}
.faq-group:first-child{margin-top:0}
.faq-list{border-top:1px solid var(--line);margin-top:0.9rem}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;width:100%;text-align:left;background:none;border:0;padding:1.1rem 0.2rem;font:inherit;font-size:1.05rem;font-weight:600;color:var(--ink);cursor:pointer;transition:color .2s}
.faq-q:hover{color:var(--blue)}
.faq-chev{font-size:1.2rem;color:var(--grey);transition:transform .3s ease,color .2s;flex:none}
.faq-item.is-open .faq-chev{transform:rotate(90deg);color:var(--blue)}
.faq-item.is-open .faq-q{color:var(--blue)}
.faq-a{display:none;padding:0 0.2rem 1.3rem;max-width:75ch}
.faq-a p{font-size:0.96rem;line-height:1.7;color:#3d4145;margin:0}
.faq-item.is-open .faq-a{display:block}
.faq-item.is-hidden{display:none}
.faq-group.is-hidden{display:none}
/* ============ CONFIRMATION ============ */ .cf-badge{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--blue);margin-left:auto}
.cf-badge.is-fail{font-size:1.3rem;font-weight:300;background:#8a3b34}
.cf-box{border:1px solid var(--line);background:#fff;margin-top:1.6rem}
.cf-row{display:flex;justify-content:space-between;gap:1rem;padding:0.9rem 1.3rem;border-top:1px solid var(--line);font-size:0.92rem;color:#3d4145}
.cf-row:first-child{border-top:0}
.cf-row span:last-child{text-align:right;color:var(--ink);font-weight:500}
.cf-row.total{background:var(--mist);color:var(--ink)}
.cf-row.total b{font-size:1.2rem;font-weight:700}
.cf-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.cf-state{display:none}
.cf-state.is-active{display:block}
/* ============ FIND A LAWYER ============ */ .fl-bar{display:flex;gap:0.8rem;flex-wrap:wrap;align-items:center;margin-top:clamp(1.8rem,3.5vw,2.6rem);padding:1rem;background:#fff;border:1px solid var(--line)}
.fl-bar input[type=search]{flex:1.4;min-width:220px;border:1px solid var(--line);padding:0.75rem 1rem;font:inherit;font-size:0.92rem;outline:none}
.fl-bar input[type=search]:focus{border-color:var(--blue)}
.fl-bar select{flex:1;min-width:170px;border:1px solid var(--line);padding:0.75rem 2.4rem 0.75rem 1rem;font:inherit;font-size:0.88rem;color:var(--ink);outline:none;appearance:none;background:#fff url("data:image/svg+xml;utf8,") no-repeat right 1rem center}
.fl-bar select:focus{border-color:var(--blue)}
.fl-count{margin-top:1.2rem;font-size:0.85rem;color:var(--grey)}
.fl-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(1.4rem,2.2vw,2.1rem);row-gap:clamp(2.2rem,3.4vw,3.2rem);margin-top:clamp(1.8rem,2.8vw,2.4rem)}
.lw-card{display:flex;flex-direction:column;background:#fff;text-decoration:none;color:inherit;transition:box-shadow .3s,transform .3s}
.lw-card:hover{box-shadow:0 18px 40px rgba(8,20,35,0.09);transform:translateY(-2px)}
.lw-photo{display:block;aspect-ratio:3/3.5;overflow:hidden;background:var(--mist)}
.lw-photo span{display:block;width:100%;height:100%;background-size:cover;background-position:center top}
.lw-body{display:flex;flex-direction:column;flex:1;gap:0.3rem;padding:1.35rem 1.4rem 1.2rem}
.lw-name{font-size:1.05rem;font-weight:700;letter-spacing:-0.005em}
.lw-card:hover .lw-name{color:var(--blue)}
.lw-role{font-size:0.92rem;font-weight:400;line-height:1.45;color:var(--grey);margin-top:0.3rem}
.lw-foot{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-top:auto;padding-top:0.95rem;border-top:1px solid var(--line)}
.lw-place{display:inline-flex;align-items:center;gap:0.45rem;min-width:0;font-size:0.8rem;color:var(--grey);line-height:1.3}
.lw-pin{flex:none;color:var(--gold)}
.lw-foot .arr{flex:none;font-size:1.05rem;line-height:1;color:var(--blue);transition:transform .25s}
.lw-card:hover .lw-foot .arr{transform:translateX(3px)}
/* The filter bar is a real form now, so it has a submit button and a clear link. */
/* Partner profile: the firm, the positioning line, the independence note. */
.lp-firm{font-size:clamp(1rem,1.3vw,1.2rem);font-weight:600;color:var(--blue);margin-top:0.35rem}
.lp-firm a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.lp-meta{font-size:var(--fs-small);color:var(--grey);margin-top:0.5rem}
.lp-statement{margin:clamp(2rem,4vw,3rem) 0 0;padding:1.3rem 0 1.3rem 1.4rem;border-left:3px solid var(--gold);background:var(--mist);font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.4;color:var(--ink);max-width:40em}
.lp-independence{margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;border-top:1px solid var(--line);font-size:var(--fs-small);line-height:1.65;color:var(--grey)}
.fl-bar button[type="submit"]{flex:none;margin-left:auto}
.fl-bar .more-link{flex:none}
.u-gnet{font-weight:500;color:var(--grey);text-transform:none;letter-spacing:0}
/* Shown only while the partner directory is empty — an honest note beats six
invented cards reading "firm to supply". */
.u-gnote{padding:1.4rem 1.6rem;border:1px solid var(--line);background:#fff;margin-top:1.2rem}
.u-gacc{background:#fff;margin-top:clamp(2rem,3.5vw,2.6rem)}
.u-m0{margin:0}
/* The empty state is rendered by PHP when it applies, not hidden by JavaScript. */
.fl-empty.u-show{display:block}
.fl-empty{display:none;padding:3rem 1rem;text-align:center;color:var(--grey);font-size:0.95rem}
.lw-card.is-hidden{display:none}
.lw-photo--net{display:flex;align-items:center;justify-content:center;position:relative;background:var(--navy)}
.lw-net-mark{font-size:2.6rem;font-weight:300;letter-spacing:0.05em;color:rgba(255,255,255,0.35)}
/* ============ LAWYER PROFILE ============ */ .lp-hero{background:var(--navy);color:#fff}
.lp-hero-grid{display:grid;grid-template-columns:1.5fr 1fr;align-items:stretch;min-height:430px}
.lp-hero-body{display:flex;flex-direction:column;justify-content:flex-end;gap:0.9rem;padding:clamp(6.5rem,10vw,8.5rem) clamp(1.5rem,3vw,3rem) clamp(2.5rem,4vw,3.5rem) 0}
.lp-chip{align-self:flex-start;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);padding:0.4rem 0.8rem}
.lp-name{font-size:clamp(2rem,3.4vw,3rem);font-weight:300;letter-spacing:-0.015em;line-height:1.12}
.lp-cred{font-size:0.95rem;line-height:1.6;color:rgba(255,255,255,0.75);max-width:56ch}
.lp-links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:0.4rem}
.lp-links a{font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#fff;opacity:0.85}
.lp-links a:hover{opacity:1;color:#fff}
.lp-portrait{position:relative;overflow:hidden;background:#0b2d4f}
.lp-portrait span{position:absolute;inset:0;background-size:cover;background-position:center top}
.lp-sec{margin-top:clamp(2.4rem,4vw,3.2rem);padding-top:clamp(1.6rem,2.6vw,2rem);border-top:1px solid var(--line)}
.lp-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.lp-sec h2{font-size:0.82rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin:0 0 1.1rem}
.lp-chips{display:flex;gap:0.5rem;flex-wrap:wrap}
.lp-chips a,.lp-chips span{font-size:0.82rem;font-weight:600;color:var(--ink);border:1px solid var(--line);padding:0.5rem 0.9rem;background:#fff;transition:all .25s}
.lp-chips a:hover{border-color:var(--blue);color:var(--blue)}
.lp-list{list-style:none;margin:0;padding:0}
.lp-list li{position:relative;padding:0.55rem 0 0.55rem 1.4rem;font-size:0.95rem;line-height:1.6;color:#3d4145}
.lp-list li::before{content:"";position:absolute;left:0;top:1.05rem;width:14px;height:2px;background:var(--blue)}
.lp-list li strong{color:var(--ink)}
/* ============ LAWYER PROFILE v2 — light masthead + ledgers ============ */ .lm{background:var(--mist);padding:calc(104px + clamp(2rem,4vw,3rem)) 0 clamp(2.4rem,4vw,3.2rem)}
.lm-grid{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.6rem,3vw,2.8rem);align-items:end}
.lm-photo{width:clamp(180px,16vw,230px);aspect-ratio:3/4;background-size:cover;background-position:center top;background-color:#dfe3e8}
.lm-role{font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue)}
.lm-name{font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:300;letter-spacing:-0.015em;line-height:1.1;margin-top:0.6rem}
.lm-cred{font-size:0.92rem;line-height:1.6;color:var(--grey);max-width:56ch;margin-top:0.8rem}
.lm-links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.1rem}
.lm-links a{font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue)}
.lm-rail{border-left:1px solid #d9dee4;padding-left:clamp(1.2rem,2vw,1.8rem);display:flex;flex-direction:column;gap:1.1rem;min-width:200px}
.lm-fact-label{font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey)}
.lm-fact-value{font-size:clamp(1rem,1.2vw,1.12rem);font-weight:300;margin-top:0.2rem}
.lpx-year{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:0.9rem 0;border-top:1px solid var(--line)}
.lpx-year:first-child{border-top:0}
.lpx-year b{font-size:0.95rem;font-weight:700;color:var(--blue)}
.lpx-year div{font-size:0.95rem;line-height:1.6;color:#3d4145}
.lpx-year div strong{color:var(--ink)}
/* ============ SEARCH RESULTS ============ */ .sr-bar{display:flex;max-width:42rem;margin-top:1.8rem}
.sr-bar input{flex:1;border:1px solid var(--line);border-right:0;padding:1rem 1.2rem;font:inherit;font-size:1rem;outline:none}
.sr-bar input:focus{border-color:var(--blue)}
.sr-bar button{border:0;background:var(--blue);color:#fff;font:inherit;font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:0 1.8rem;cursor:pointer;transition:background .25s}
.sr-bar button:hover{background:var(--blue-bright)}
.sr-tabs{display:flex;gap:0;flex-wrap:wrap;margin-top:clamp(1.8rem,3vw,2.4rem);border-bottom:1px solid var(--line)}
.sr-tabs button{border:0;background:none;font:inherit;font-size:0.85rem;font-weight:600;color:var(--grey);padding:0.9rem 1.3rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.sr-tabs button:hover{color:var(--blue)}
.sr-tabs button.is-active{color:var(--blue);border-bottom-color:var(--blue)}
.sr-list{margin-top:0.4rem}
.sr-row{display:block;padding:1.5rem 0.2rem;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.sr-type{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue)}
.sr-title{display:block;font-size:1.18rem;font-weight:600;letter-spacing:-0.005em;margin-top:0.4rem;transition:color .2s}
.sr-row:hover .sr-title{color:var(--blue)}
.sr-ex{display:block;font-size:0.95rem;line-height:1.65;color:#3d4145;margin-top:0.45rem;max-width:75ch}
.sr-ex mark{background:none;color:var(--blue);font-weight:600}
.sr-meta{display:block;font-size:0.82rem;color:var(--grey);margin-top:0.5rem}
.sr-row.is-hidden{display:none}
.sr-empty{display:none;padding:3rem 0.2rem;color:var(--grey);font-size:0.95rem}
.sr-none{padding:3rem 0.2rem;color:var(--grey);font-size:0.95rem}
.sr-none-title{font-size:1.05rem;font-weight:600;color:var(--ink);margin:0}
.sr-none a{color:var(--blue)}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 0.5rem;border:1px solid var(--line);border-radius:3px;text-decoration:none;color:var(--grey);font-size:0.85rem;letter-spacing:0}
.pg:hover{color:var(--blue);border-color:var(--blue)}
.pg.is-current{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
/* ============ FIXED-FEE SERVICES (shop) ============ */ .sv-tools{display:flex;gap:0.8rem;flex-wrap:wrap;align-items:center;margin-top:0.4rem;padding:1rem;background:#fff}
.sv-tools input[type=search]{flex:1.4;min-width:200px;border:1px solid var(--line);padding:0.75rem 1rem;font:inherit;font-size:0.92rem;outline:none}
.sv-tools input[type=search]:focus{border-color:var(--blue)}
.sv-tools select{flex:1;min-width:180px;border:1px solid var(--line);padding:0.75rem 2.4rem 0.75rem 1rem;font:inherit;font-size:0.88rem;outline:none;appearance:none;background:#fff url("data:image/svg+xml;utf8,") no-repeat right 1rem center}
.sv-count{margin-top:1.1rem;font-size:0.85rem;color:var(--grey)}
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.sv-card{display:flex;flex-direction:column;background:#fff;transition:box-shadow .3s,transform .3s}
.sv-thumb{display:block;aspect-ratio:4/2.95;overflow:hidden;background:var(--mist)}
.sv-thumb span{display:block;width:100%;height:100%;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(0.22,0.61,0.36,1)}
.sv-card:hover .sv-thumb span{transform:scale(1.05)}
.sv-body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.4rem}
.sv-card:hover{box-shadow:0 18px 40px rgba(8,20,35,0.09);transform:translateY(-2px)}
.sv-cat{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue)}
.sv-name{font-size:1.12rem;font-weight:600;letter-spacing:-0.005em;line-height:1.4;margin-top:0.55rem}
.sv-fee{margin-top:auto;padding-top:1.4rem}
.sv-fee-label{display:block;font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey)}
.sv-price{display:block;font-size:clamp(1.4rem,1.8vw,1.7rem);font-weight:300;letter-spacing:-0.01em;color:var(--blue);margin-top:0.25rem}
.sv-price--quote{font-size:1.05rem;color:var(--grey);font-weight:400;margin-top:0.45rem}
.sv-add{display:block;width:100%;text-align:center;margin-top:1.1rem;border:1px solid var(--blue);background:transparent;color:var(--blue);font:inherit;font-size:0.78rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0.7rem 1rem;cursor:pointer;transition:background .25s,color .25s;text-decoration:none}
.sv-add:hover{background:var(--blue);color:#fff}
.sv-card.is-hidden{display:none}
.sv-empty{display:none;padding:2.6rem 0.2rem;color:var(--grey);font-size:0.95rem}
.cart-card{background:var(--navy);color:#fff;padding:1.6rem}
.cart-card .kicker-strong{color:#fff}
.cart-lines{margin-top:1rem;border-top:1px solid rgba(255,255,255,0.18)}
.cart-line{display:flex;justify-content:space-between;gap:1rem;padding:0.7rem 0;border-bottom:1px solid rgba(255,255,255,0.12);font-size:0.88rem}
.cart-line button{border:0;background:none;color:rgba(255,255,255,0.55);cursor:pointer;font-size:1rem;line-height:1}
.cart-line button:hover{color:#fff}
.cart-total{display:flex;justify-content:space-between;padding:0.9rem 0 0;font-weight:700;font-size:1.05rem}
.cart-empty-note{margin-top:1rem;font-size:0.88rem;color:rgba(255,255,255,0.6)}
.cart-checkout{display:block;text-align:center;margin-top:1.2rem;background:#fff;color:var(--navy);font-size:0.8rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.9rem;text-decoration:none;transition:opacity .2s}
.cart-checkout:hover{opacity:0.88}
.cart-checkout.is-disabled{opacity:0.35;pointer-events:none}
/* Live WooCommerce cart lines (the panel used to be a second, JS-only cart). */
.cart-line-name{flex:1}
.cart-line-fee{white-space:nowrap;font-variant-numeric:tabular-nums}
.cart-line a.cart-line-x{color:rgba(255,255,255,0.55);font-size:1rem;line-height:1;text-decoration:none}
.cart-line a.cart-line-x:hover{color:#fff}
.cart-card .woocommerce-Price-amount,.cart-card bdi{color:#fff}
/* ── Client / partner marquee ────────────────────────────────────────────────
The track holds the logo list twice and slides by exactly -50%, so the loop
restarts on an identical frame with no visible jump. Duration comes from the
template as --craa-marquee-time, scaled to how many logos there are, so the
speed stays constant as the firm adds or removes partners. */
/* Expertise: three-practice columns (reference/craa-home-v3.html). Replaces the
rotating showcase; the .xp-* styles stay so expertise-carousel.php still
renders correctly if the design is reverted. */
/* A statement meant to hold one line. `.statement` caps at 22em (~40 characters
in the display face), which is a paragraph measure; this releases it so a
short line stays a single line instead of breaking after a few words. */
.statement--line{max-width:none}
.xd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.xd-col{display:flex;flex-direction:column;background:transparent;min-width:0}
.xd-head{position:relative;display:block;aspect-ratio:4/2.35;overflow:hidden;background:var(--navy)}
.xd-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(0.22,0.61,0.36,1)}
.xd-col:hover .xd-img{transform:scale(1.04)}
.xd-scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(6,18,32,0) 38%,rgba(6,18,32,0.82));pointer-events:none}
.xd-name{position:absolute;left:1.35rem;right:1.35rem;bottom:1.15rem;z-index:4;color:#fff;font-size:1.16rem;font-weight:600;letter-spacing:-0.005em;line-height:1.3}
.xd-name small{display:block;font-size:0.68rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.72);margin-bottom:0.4rem}
.xd-list{display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem 0 0;min-width:0}
.xd-item{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.25rem 1.35rem;text-decoration:none;background:#fff;transition:background-color .22s ease,box-shadow .22s ease}
.xd-item-title{font-size:0.92rem;font-weight:500;color:var(--ink);line-height:1.25;letter-spacing:-0.003em;transition:color .22s ease}
.xd-item-meta{font-size:0.76rem;color:var(--grey);white-space:nowrap;transition:color .22s ease}
/* Whole block goes CRAA blue. Keyboard focus gets the same treatment — these
are links, and a hover-only state leaves keyboard users without feedback.
The lift is tinted blue rather than grey so it reads as one object. */
.xd-item:hover,
.xd-item:focus-visible{background:var(--blue);box-shadow:0 10px 26px rgba(15,71,126,0.26);outline:none}
.xd-item:hover .xd-item-title,
.xd-item:focus-visible .xd-item-title{color:#fff}
/* Kept clearly secondary, but still ~5:1 against the blue. */
.xd-item:hover .xd-item-meta,
.xd-item:focus-visible .xd-item-meta{color:rgba(255,255,255,0.72)}
.xd-foot{margin:auto 0 0;padding-top:0.75rem;display:inline-flex}
.xd-item--empty{display:none}
/*
* Row-for-row alignment across the three columns.
*
* Without this each column is an independent flex stack, so a title that wraps
* to two lines pushes everything below it down and the columns end at three
* different heights. Subgrid hands row sizing to the parent grid: every
* column's row 2 is as tall as the tallest row 2 in the whole row, so the
* articles line up and all three footers land on one line.
*
* --xd-rows is written by the template: 1 image + n articles + 1 footer.
* .xd-list becomes display:contents so the items are grid children rather than
* a nested flex box, which is what lets them take part in the subgrid.
*
* Progressive: browsers without subgrid keep the flex stack above, which looks
* exactly as it does today.
*/
@supports (grid-template-rows: subgrid) {
@media (min-width:1001px) {
.xd-grid{row-gap:0.5rem}
.xd-col{display:grid;grid-template-rows:subgrid;grid-row:span var(--xd-rows,6);row-gap:0.5rem}
.xd-list{display:contents}
.xd-item{align-items:start}
/* Empty slots hold their row open so short columns still align. */
.xd-item--empty{display:block;background:transparent;padding:0;pointer-events:none}
/* row-gap governs the space between article rows, so it cannot also
separate the two bands of practices. The footer row carries that. */
.xd-foot{margin:0;align-self:end;padding-bottom:1.5rem}
}
}
.xd-col:hover .blinds rect{transform:scaleY(1)}
.xd-col:hover .blinds rect:nth-child(1){transition-delay:0s}
.xd-col:hover .blinds rect:nth-child(2){transition-delay:.04s}
.xd-col:hover .blinds rect:nth-child(3){transition-delay:.08s}
.xd-col:hover .blinds rect:nth-child(4){transition-delay:.12s}
.xd-col:hover .blinds rect:nth-child(5){transition-delay:.16s}
.xd-col:hover .blinds rect:nth-child(6){transition-delay:.2s}
.xd-col:hover .blinds rect:nth-child(7){transition-delay:.24s}
.xd-col:hover .blinds rect:nth-child(8){transition-delay:.28s}
@media (max-width:1000px){.xd-grid{grid-template-columns:1fr}}
.logo-marquee{position:relative;margin-top:clamp(2.5rem,5vw,4rem);padding-top:2.4rem;border-top:1px solid var(--line);overflow:hidden}
/* The band is a label over a strip of logos. Its spacing was inherited from
when the Recognition reviews sat above the marquee inside the same section;
with the reviews now in the footer, the section head margin and the
marquee's own margin stacked into roughly 7rem of nothing. */
/* The cards carry their own weight; the band does not need a full section below them. */
.section--who{padding-bottom:35px}
.section--partners{padding-block:clamp(2.2rem,4.5vw,3.6rem);padding-top:30px}
.section--partners .section-head{margin-bottom:0}
.section--partners .logo-marquee{margin-top:1.1rem;padding-top:1.6rem}
.logo-track{display:flex;align-items:center;gap:clamp(2.5rem,5vw,4.5rem);width:max-content;animation:craa-marquee var(--craa-marquee-time,60s) linear infinite}
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track{animation-play-state:paused}
.logo-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.logo-item img{max-height:65px;width:auto;max-width:180px;object-fit:contain}
/* The text fallback used before any logo is uploaded. */
.logo-track--static{animation:none;width:auto;flex-wrap:wrap;justify-content:space-between;gap:0.6rem 2.4rem}
.logo-track--static .logo-item{font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#9AA4AE}
/* Fade the edges so logos enter and leave rather than being cut off. */
.logo-marquee::before,.logo-marquee::after{content:"";position:absolute;top:2.4rem;bottom:0;width:clamp(2rem,6vw,6rem);z-index:1;pointer-events:none}
.logo-marquee::before{left:0;background:linear-gradient(90deg,var(--white),transparent)}
.logo-marquee::after{right:0;background:linear-gradient(270deg,var(--white),transparent)}
@keyframes craa-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Motion is decorative here: hold it still and wrap into rows instead. */
@media (prefers-reduced-motion: reduce){
.logo-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
/* The second pass exists only to make the slide seamless. Standing still it
would just show every logo twice. */
.logo-track > [aria-hidden="true"]{display:none}
.logo-marquee::before,.logo-marquee::after{display:none}
}
/* Single fixed-fee service page. */
.sv-fee--detail{display:flex;align-items:baseline;gap:0.8rem;margin-bottom:1.4rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.sv-fee--detail .sv-price{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;letter-spacing:-0.02em}
.sv-fee--detail .sv-price--quote{font-size:1.05rem;font-weight:500;color:var(--grey)}
.sv-actions{display:flex;flex-wrap:wrap;gap:0.8rem;margin-top:1.8rem}
.sv-actions .btn-outline{margin-top:0;min-width:0}
.sv-name a{color:inherit;text-decoration:none}
.sv-name a:hover{color:var(--blue)}
/* "How it works" is a numbered explanation, not navigation. */
.pd-nav--steps .steps{list-style:none;margin:0;padding:0;counter-reset:craastep}
.pd-nav--steps .steps li{counter-increment:craastep;display:flex;align-items:center;gap:0.9rem;padding:0.68rem 1.4rem;font-size:0.92rem;color:var(--ink);border-bottom:1px solid var(--line)}
.pd-nav--steps .steps li:last-child{border-bottom:0}
.pd-nav--steps .steps li::before{content:counter(craastep);flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:0.72rem;font-weight:700;display:grid;place-items:center}
@media (max-width:920px){
.pub-featured{grid-template-columns:1fr}
.res-cards{grid-template-columns:1fr}
}
@media print{
.chrome,.site-footer,.cf-actions,.pd-aside{display:none!important}
}
@media (max-width:1100px){
.fl-grid{grid-template-columns:repeat(3,1fr)}
.sv-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:800px){
.fl-grid{grid-template-columns:1fr 1fr;column-gap:1.1rem;row-gap:1.9rem}
}
@media (max-width:520px){
.fl-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
.lm-grid{grid-template-columns:1fr}
.lm-rail{border-left:0;padding-left:0;border-top:1px solid #d9dee4;padding-top:1.2rem;flex-direction:row;flex-wrap:wrap;gap:1.6rem}
}
@media (max-width:640px){
.sv-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
.sv-row{grid-template-columns:1fr auto;grid-template-areas:"a b" "a c"}
}
/* ---- responsive hardening (packaging pass): collapse remaining multi-column blocks, allow long content to wrap ---- */
.cr-media-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:1rem;align-items:stretch;margin-top:clamp(2rem,4vw,3rem)}
.cr-media-card{background:transparent;position:relative;display:block;min-height:380px}
.pd-grid>*,.fl-grid>*,.sv-grid>*,.partners-stack>*,.principles>*{min-width:0}
@media (max-width:760px){
.partners-stack,.gal--posters,.principles,.cr-media-grid{grid-template-columns:1fr}
.partner-feature,.pf-body,.gal-panel,.principle{min-width:0;overflow-wrap:anywhere}
.byline{flex-wrap:wrap}
.byline .art-share{margin-left:0;width:100%}
}
/* ---- template-scoped fidelity overrides ---- */
body.tpl-practice-areas .pa-title{margin-top:0}
/* ---- template-scoped fidelity overrides (generated): pages finalized with an earlier variant of a shared component keep their exact look (later variant stays the shared default) ---- */
body.tpl-home /* ============ PRACTICE AREAS listing ============ */ .pa-grid{grid-template-columns:1fr 1fr;gap:0.3rem}
body.tpl-home .pa-body{padding:1.4rem 1.5rem 1.6rem}
body.tpl-home .pa-title{font-size:var(--fs-card);font-weight:500}
body.tpl-who-we-are /* ============ PRACTICE AREAS listing ============ */ .pa-grid{grid-template-columns:1fr 1fr;gap:0.3rem}
body.tpl-who-we-are .pa-body{padding:1.4rem 1.5rem 1.6rem}
body.tpl-who-we-are .pa-title{font-size:var(--fs-card);font-weight:500}
body.tpl-the-team /* ============ PRACTICE AREAS listing ============ */ .pa-grid{grid-template-columns:1fr 1fr;gap:0.3rem}
body.tpl-the-team .pa-body{padding:1.4rem 1.5rem 1.6rem}
body.tpl-the-team .pa-title{font-size:var(--fs-card);font-weight:500}
body.tpl-find-a-lawyer .chips-label{font-size:0.82rem;font-weight:700;letter-spacing:0.12em;color:var(--ink)}
}
@layer utilities {
/* utilities (generated from inline-style consolidation) */
.u-mt-06{margin-top:0.6rem}.u-mt-08{margin-top:0.8rem}.u-mt-09{margin-top:0.9rem}.u-mt-10{margin-top:1rem}
.u-mt-12{margin-top:1.2rem}.u-mt-14{margin-top:1.4rem}.u-mt-16{margin-top:1.6rem}.u-mt-22{margin-top:2.2rem}
.u-white{color:#fff}.u-ink{color:var(--ink)}.u-grey{color:var(--grey)}.u-blue{color:var(--blue)}
.u-w600{font-weight:600}.u-w700{font-weight:700}.u-tt-none{text-transform:none}.u-static{position:static}
.u-full{min-width:0;width:100%}
.u-btn-invert{background:transparent;color:var(--blue);border:1px solid var(--blue)}
/* generated utilities (freq>=3) */
.u-g53896a{margin-top:0}
.u-g880a4e{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.u-g0695ff{background:#fff}
.u-g0b64b3{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.u-g9f43fd{margin-top:clamp(2rem,3.5vw,2.8rem);padding:1.4rem 1.6rem;border:1px solid var(--line);background:var(--mist)}
.u-gacedea{margin:0;font-size:0.8rem;line-height:1.6;color:var(--grey)}
.u-gb6ab9d{top:auto;bottom:0.8rem;left:0.8rem;right:auto}
.u-g9441a6{color:var(--blue);font-weight:600}
.u-g716a8d{top:auto;bottom:1rem;left:1rem;right:auto}
.u-gc9acd8{top:auto;bottom:1rem;right:1rem}
.u-g92df5c{width:26px;height:26px;margin:0 auto 0.5rem;display:block}
.u-gcc3888{max-width:26em}
.u-gc451fd{position:relative}
.u-gfa9aec{display:block}
.u-g662ae7{font-size:0.55em;font-weight:600;letter-spacing:0.06em;vertical-align:0.28em;margin-right:0.3em}
.u-g290ebd{width:22px;height:22px;color:var(--blue)}
}
/* Current-page indication (added with the nav walker) */
@layer components {
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-parent > a,
.nav-list > li.current-menu-ancestor > a { font-weight: 600; }
.nav-list .sub a[aria-current="page"] { font-weight: 600; }
.nav-list > li.current-menu-item > a::after,
.nav-list > li.current-menu-parent > a::after,
.nav-list > li.current-menu-ancestor > a::after {
content: "";
display: block;
height: 2px;
margin-top: 3px;
background: currentColor;
opacity: .55;
}
.nav-list > li > a.btn-appoint::after { content: none; }
}
@layer components {
/* ============ FILTER DROP-DOWNS (Find a Lawyer) ============ */
/* The native select stays in the form and stays the thing that submits; it is
hidden only once the script has built the listbox over it, so with no
JavaScript the plain select is still sitting there, visible and working. */
.fsel{position:relative;flex:1;min-width:170px}
.fsel.is-on>select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}
.fsel-btn{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;width:100%;border:1px solid var(--line);background:#fff;padding:0.75rem 1rem;font:inherit;font-size:0.88rem;line-height:1.3;color:var(--grey);text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.fsel-btn:hover{border-color:#b9c2cc}
.fsel-btn:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,61,112,0.12)}
.fsel.has-value .fsel-btn{color:var(--ink);border-color:#b9c2cc}
.fsel.is-open .fsel-btn{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,61,112,0.12)}
.fsel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsel-arr{flex:none;color:var(--grey);transition:transform .2s}
.fsel.is-open .fsel-arr{transform:rotate(180deg);color:var(--blue)}
.fsel-list{display:none;position:absolute;z-index:40;top:calc(100% + 5px);left:0;right:0;max-height:19rem;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:0.35rem 0;list-style:none;background:#fff;border:1px solid var(--line);box-shadow:0 20px 46px rgba(8,20,35,0.16)}
.fsel.is-open .fsel-list{display:block;animation:fselIn .16s ease-out}
.fsel--still .fsel-list{animation:none}
@keyframes fselIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@supports not selector(::-webkit-scrollbar){
.fsel-list{scrollbar-width:thin;scrollbar-color:#c6cfd8 #f2f4f7}
}
.fsel-list::-webkit-scrollbar{width:5px}
.fsel-list::-webkit-scrollbar-track{background:#f2f4f7}
.fsel-list::-webkit-scrollbar-thumb{background:#c6cfd8}
.fsel-list::-webkit-scrollbar-thumb:hover{background:#aab6c2}
/* The gold edge marks the current choice; it is 2px of a colour used nowhere
else in this control, so it reads at a glance down a long list. */
.fsel-opt{padding:0.55rem 1rem 0.55rem calc(1rem - 2px);border-left:2px solid transparent;font-size:0.86rem;line-height:1.28;color:var(--ink);cursor:pointer;outline:none;transition:background .12s}
.fsel-opt:hover{background:var(--mist)}
.fsel-opt:focus{background:var(--mist);border-left-color:#c6cfd8}
.fsel-opt[aria-selected="true"]{font-weight:600;color:var(--blue);border-left-color:var(--gold);background:rgba(21,61,112,0.04)}
/* The "all / any" row resets the filter, so it is set apart from the terms. */
.fsel-opt--any{color:var(--grey);border-bottom:1px solid var(--line);margin-bottom:0.3rem;padding-bottom:0.65rem}
.fsel-opt--any[aria-selected="true"]{color:var(--blue)}
/* "Nigeria — Lagos": the country is context, the city is the choice. */
.fsel-pre{color:var(--grey);font-weight:400}
.fsel-opt[aria-selected="true"] .fsel-pre{color:var(--blue);opacity:0.68}
@media (max-width:620px){
.fsel{flex:1 1 100%}
.fsel-list{max-height:15rem}
}
}
@layer components {
/* ============ LAWYER PROFILE — SPLIT (single-staff.php) ============ */
/* Two columns, the left one sticky. The page scrolls normally: the portrait
holds the viewport only while the panel beside it still has something to
show, then releases so the closing band and the footer are reached the
ordinary way. No nested scroller, so no trapped scroll on a phone. */
/* --sp-top is the solid header's height: a 44px mark plus 1.05rem of padding
above and below it. The portrait parks under it, not behind it. */
/* min-height keeps a thin record — a profile with only an education line —
from ending halfway up the screen: the split always reaches the bottom of
the viewport, so the portrait fills its column and the panel's white runs
all the way down rather than stopping short over the navy.
align-items is stretch so the panel grows into that height; the portrait
opts out with its own align-self:start, which position:sticky needs. */
.sp-split{--sp-top:4.9rem;display:grid;grid-template-columns:minmax(0,41%) minmax(0,59%);align-items:stretch;min-height:100vh;background:var(--navy)}
.sp-photo{position:sticky;top:var(--sp-top);align-self:start;height:calc(100vh - var(--sp-top));overflow:hidden;background:var(--navy)}
.sp-photo-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.sp-photo--none{display:flex;align-items:center;justify-content:center}
.sp-photo-mark{font-family:var(--font-display);font-size:clamp(4rem,7vw,7rem);font-weight:300;letter-spacing:0.06em;color:rgba(255,255,255,0.22)}
.sp-panel{min-width:0;background:var(--white)}
/* --- identity block --- */
/* The strings artwork rides as a background image, so the block still
carries no decorative markup. Anchored right, because that is where the
drawing is densest; the left of it crops away behind the name. */
.sp-id{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:clamp(7rem,11vw,9.5rem) clamp(1.6rem,4.5vw,4rem) clamp(5rem,7.5vw,6.5rem)}
.sp-id::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("../img/sp-strings.svg") no-repeat right center/cover;opacity:0.55;-webkit-mask-image:linear-gradient(to bottom,transparent 0 35%,#000 49%);mask-image:linear-gradient(to bottom,transparent 0 35%,#000 49%)}
.sp-id>*{position:relative;z-index:1}
.sp-name{font-family:var(--font-display);font-size:clamp(2.1rem,3.6vw,3.3rem);font-weight:300;letter-spacing:-0.015em;line-height:1.1;margin:0;text-wrap:balance}
.sp-name b{font-weight:700}
.sp-role{margin:1.1rem 0 0;font-size:0.98rem;font-weight:700;line-height:1.45}
.sp-titles{margin:0.1rem 0 0;padding:0;list-style:none}
.sp-titles li{font-size:0.98rem;font-weight:600;line-height:1.45;color:rgba(255,255,255,0.88)}
/* --- the positioning line --- */
/* The single accent moment on the page: it is the one thing in gold, and it
straddles the join so the navy block and the white below are read as one
composition rather than two stacked bands. */
.sp-say{position:relative;z-index:2;margin:clamp(-3.4rem,-4vw,-2.2rem) clamp(2rem,9%,6rem) 0 0;padding:clamp(1.6rem,2.8vw,2.4rem) clamp(1.6rem,4.5vw,4rem);background:var(--gold)}
.sp-say p{margin:0;font-family:var(--font-display);font-style:italic;font-size:clamp(1.09rem,1.8vw,1.52rem);line-height:1.35;color:var(--ink);max-width:28em}
.sp-say--todo{background:var(--mist)}
/* --- contact --- */
/* --- contact, inside the navy block --- */
/* Sits on the identity block's ground, so every colour here is a tint of
white rather than the blue it used on a white card. */
.sp-contact{margin-top:clamp(1.8rem,3vw,2.5rem)}
/* Side by side: two short values that belong together, and stacking them
pushed the buttons well down the block. They wrap on a narrow panel. */
.sp-fields{display:flex;flex-wrap:wrap;gap:0.9rem clamp(2rem,4vw,3.5rem);margin:0 0 1.2rem}
.sp-field{margin:0;min-width:0}
.sp-lbl{display:block;font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:0.3rem}
.sp-val{font-size:0.98rem;font-weight:600;color:#fff;text-decoration:none;word-break:break-word}
.sp-val:hover{text-decoration:underline;text-underline-offset:3px}
.sp-office{margin:0 0 1.2rem}
.sp-office a{font-size:0.98rem;font-weight:600;color:rgba(255,255,255,0.88)}
.sp-office a:hover{color:#fff}
.sp-social{display:flex;flex-wrap:wrap;gap:1.2rem;margin:0 0 1.2rem}
.sp-social a{font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.65)}
.sp-social a:hover{color:#fff}
.sp-acts{display:flex;flex-wrap:wrap;gap:0.7rem;margin:1.5rem 0 0}
/* --- the record --- */
.sp-body{padding:clamp(2.6rem,5vw,4rem) clamp(1.6rem,4.5vw,4rem) clamp(3.2rem,6vw,5rem);background:var(--white)}
.sp-sec{margin-top:clamp(2.4rem,4vw,3.2rem);padding-top:clamp(1.8rem,2.8vw,2.2rem);border-top:1px solid #dfe2e5}
.sp-sec:first-child{margin-top:0;padding-top:0;border-top:0}
.sp-h{font-size:0.92rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--blue);margin:0 0 1.2rem}
.sp-prose,.sp-rte{font-size:0.97rem;line-height:1.72;color:#3d4145}
.sp-prose p,.sp-rte p{margin:0 0 1rem}
.sp-prose p:last-child,.sp-rte p:last-child{margin-bottom:0}
.sp-prose ul,.sp-rte ul{margin:0 0 1rem;padding-left:1.2rem}
.sp-prose li,.sp-rte li{margin-bottom:0.4rem}
.sp-rte a,.sp-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
/* Subheads the firm typed into the biography itself. They are