/* ==========================================================================
   Juris Digital, redesign concept, version 2
   Their current homepage content, word for word and in their order, set in the
   version 1 system. Loaded after style.css: only what version 2 adds or changes.
   ========================================================================== */

/* ---------- type: Lexend (Google Fonts, SIL OFL 1.1, see fonts/LEXEND-OFL.txt), self-hosted ----------
   One family throughout, one variable file per subset, weights 300 to 700. "Lexend Display" is the same
   file for headings, declared from 500 up, so every heading rule written at 400 is drawn at Medium (the
   browser clamps a variable face to its declared range) and bold still reaches 700. Lexend has no italic,
   so italic emphasis turns upright and keeps its colour. */
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend Display"; src: url("../fonts/lexend-latin-ext.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lexend Display"; src: url("../fonts/lexend-latin.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --serif: "Lexend Display", "Lexend", system-ui, sans-serif;
  --sans: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* the hero headline's fit (see .hero2 .hero__title): "revenue you want." is 8.27em at the hero's
     tracking, so --fit is that plus 3.5%; the cap sets it at 754px, 3.3% inside the 780px line */
  --fit: 8.56;
  --fit-max: 5.7rem;
  font-synthesis: none;
}
/* Lexend is spaced wide for reading; display sizes take it in, the hero a touch more */
:is(h1, h2) { letter-spacing: -.035em; }
.hero2 .hero__title { letter-spacing: -.045em; }
.file__foot { font-style: normal; }

/* their headings are full sentences, so they sit a step below version 1's */
h2 { font-size: clamp(2rem, 3.5vw, 3.125rem); line-height: 1.08; }
/* their bold emphasis, set in colour */
h2 em { font-style: normal; color: var(--counsel-ink); }
.kicker { margin-bottom: 18px; font-size: .9375rem; font-weight: 500; color: var(--counsel-ink); }
:is(.folio, .footer2) :focus-visible { outline-color: var(--g1); }
.insight__link svg { width: 18px; height: 18px; transition: transform 260ms var(--ease-out); }

/* ---------- hero ---------- */
.hero2 { --band: clamp(96px, 10vw, 148px); --tail: 0px; position: relative; padding-top: clamp(40px, 6vw, 88px); background: var(--ground); }
.hero2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--band); background: var(--brief); }
.hero2__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px clamp(40px, 5vw, 80px); align-items: end; padding-bottom: var(--tail); }
.hero2__copy { padding-bottom: calc(var(--band) - var(--tail) + 32px); }
/* the largest size at which every morph word still shares line two with "you want.": a cap at the top,
   and on phones a size that keeps "revenue you want." inside the gutters (--fit is the face's width of
   that line in ems, plus a little room; the Lexend values are set with the type above) */
.hero2 .hero__title { font-size: clamp(min(3rem, calc((100vw - 32px) / var(--fit, 8.1))), 6.6vw, var(--fit-max, 6rem)); }
/* the masks leave room below for descenders (g, y), and the hidden start sits below that room */
.hero2 .hero__title .line { padding-block: .08em .26em; margin-block: -.08em -.26em; }
.js:not(.reduce) .hero2 .hero__title .line > span { transform: translateY(145%); }

/* the morphing word (morph.js): torph sets it as an inline block of letters */
.hero__title.is-stacked .morph-tail { display: block; }
/* the changing word in the band's dark teal */
.hero2 .hero__title .morph { color: var(--brief); }
/* letters arriving in the morph can start left of the line, so its reveal mask clips only up and down */
@supports (overflow: clip) {
  .hero2 .hero__title .line { overflow: visible; overflow-y: clip; }
}

/* ---------- version 2's hero accents (user, 26 Oct 2026; version 3 keeps its hero as it was) ---------- */
/* the changing word in counsel teal, #087C80 (the user removed the lime marker, 26 Oct 2026) */
.hero2--v2 .hero__title .morph { color: var(--counsel); }
/* a little more ground between the buttons and the band */
@media (min-width: 1081px) {
  .hero2--v2 .hero2__copy { padding-bottom: calc(var(--band) - var(--tail) + clamp(44px, 4vw, 56px)); }
}
/* the seal (markup from build_hero_mark.py): the Juris shield as fine rings with the J left solid among them,
   cropped by the hero's top right, stopping at the band, and fading out toward the headline */
.hero2__mark {
  --mw: clamp(440px, 60vw, 880px);
  position: absolute; z-index: 0; inset: 0 0 var(--band); overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 72px), radial-gradient(ellipse 58% 100% at 100% 0, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 72px), radial-gradient(ellipse 58% 100% at 100% 0, #000 30%, transparent 100%);
  mask-composite: intersect;
}
/* the shield's centre sits just inside the content's top right corner (so it keeps to the video on wide screens),
   and what shows is its round foot and the J's hook, with its tip clear of the top fade */
.hero2__mark svg {
  --edge: max(var(--gutter), (100% - var(--wrap)) / 2);
  position: absolute; top: calc(120px - var(--mw) / 2); right: calc(var(--edge) + 24px - var(--mw) / 2);
  width: var(--mw); height: auto; overflow: visible;
}
/* one column: smaller, and right of the headline and lede; on phones the headline fills the width, so it is left out */
@media (max-width: 1080px) {
  .hero2__mark { --mw: clamp(320px, 46vw, 480px); }
  .hero2__mark svg { top: calc(72px - var(--mw) / 2); right: calc(var(--edge) - var(--mw) / 2); }
}
@media (max-width: 640px) {
  .hero2__mark { display: none; }
}
.hero2__rings { fill: none; stroke: var(--counsel); stroke-width: 1; opacity: .22; }
.hero2__rings path { vector-effect: non-scaling-stroke; }
.hero2__j { fill: var(--counsel); opacity: .1; }
.morph-sr { -webkit-user-select: none; user-select: none; }
.hero2 .hero__side { max-width: 560px; margin-top: clamp(24px, 3vw, 36px); padding: 0; }

.vcard { position: relative; display: block; aspect-ratio: 1; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--brief); color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.vcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 36, 43, 0) 42%, rgba(3, 36, 43, .86) 100%); }
.vcard__copy { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 24px 84px; }
.vcard__brand { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(3, 36, 43, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .8125rem; font-weight: 600; }
.vcard__headline { font-family: var(--serif); font-size: clamp(2rem, 3.1vw, 2.75rem); line-height: 1; letter-spacing: -.02em; }
.vcard__play { position: absolute; z-index: 1; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px; background: var(--retain); color: var(--brief); font-size: .9375rem; font-weight: 600; transition: background-color .2s var(--ease-out), transform 160ms var(--ease-out); }
.vcard__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brief); color: var(--retain); }
.vcard__icon svg { width: 16px; height: 16px; margin-left: 2px; }
.vcard:active .vcard__play { transform: scale(.97); }
.vcard:focus-visible { outline-offset: 4px; }
.vcard__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: .875rem; color: var(--on-dark-2); }
.vcard__cap span:last-child { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .vcard:hover .vcard__img { transform: scale(1.03); }
  .vcard:hover .vcard__play { background: var(--retain-hi); }
}

/* ---------- overview ---------- */
.overview { background: var(--brief); color: var(--on-dark); padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 88px); }
.overview__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px clamp(40px, 5vw, 80px); align-items: start; }
.overview__statement { max-width: 30ch; font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.28; letter-spacing: -.01em; color: #fff; text-wrap: pretty; }
.overview__stats li + li { border-top: 1px solid var(--rule-dark); }
.overview__stats a { display: block; padding: 22px 0; color: inherit; text-decoration: none; }
.overview__stats li:first-child a { padding-top: 0; }
.overview__num { display: block; font-family: var(--serif); font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -.03em; color: #fff; }
.overview__label { display: block; margin-top: 8px; color: var(--on-dark); }
.overview__who { display: inline-block; margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--on-dark-2); text-decoration: underline; text-decoration-color: var(--rule-dark); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.overview__awards { margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--rule-dark); }
.overview__awards a { display: block; }
/* the label on the left, the marks running right to left beside it (26-27 Oct 2026, user). One copy is about 1,100px,
   so three copies cover the widest track with room to spare; the rail moves one copy's width (a third) per loop, at
   about 30px a second. It holds while the pointer is over it or a mark has keyboard focus; there is no pause button,
   at the user's request. Reduced motion and ?static show one still row. */
.awards2 { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.awards2__label { flex: none; font-size: .875rem; font-weight: 500; color: var(--on-dark-2); }
.awards2__track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.awards2__rail { display: flex; width: max-content; animation: awards2-run 38s linear infinite; }
.awards2__list { flex: none; display: flex; align-items: center; gap: clamp(64px, 6vw, 96px); padding-right: clamp(64px, 6vw, 96px); }
.awards2__list img { height: var(--h); width: auto; opacity: .92; }
.awards2:is(:hover, :focus-within) .awards2__rail { animation-play-state: paused; }
@keyframes awards2-run { to { transform: translateX(calc(-100% / 3)); } }
:root.reduce .awards2__rail { animation: none; width: auto; }
:root.reduce .awards2__list[aria-hidden] { display: none; }
:root.reduce .awards2__list { flex: 1; flex-wrap: wrap; justify-content: space-between; gap: 24px 32px; padding-right: 0; }
:root.reduce .awards2__track { -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .awards2__rail { animation: none; width: auto; }
  .awards2__list[aria-hidden] { display: none; }
  .awards2__list { flex: 1; flex-wrap: wrap; justify-content: space-between; gap: 24px 32px; padding-right: 0; }
  .awards2__track { -webkit-mask-image: none; mask-image: none; }
}
.overview :focus-visible { outline-color: var(--g1); }
@media (hover: hover) and (pointer: fine) {
  .overview__stats a:hover .overview__who { color: #fff; text-decoration-color: currentColor; }
}
/* version 2's band (user, 26 Oct 2026: "reduce this spacing", "keep some and fix layout", then "now i have empty
   space here"; version 3 keeps its band as it was). The teal band starts inside the hero, beside the video's foot and
   caption. The statement takes the left column with room above it; the right column carries the video's foot, its
   caption and, under a hairline each, the two results, each figure with its words beside it, set compactly so the
   column ends with the statement: the two columns finish together (the statement sits on the stack's foot, never
   closer than --ov-in to the band's top) and the awards run under both. DOM order is unchanged.
   --ov-band matches .hero2's --band (the overview is the hero's next sibling, so it can't inherit it). */
@media (min-width: 1081px) {
  .hero2--v2 + .overview { --ov-band: clamp(96px, 10vw, 148px); --ov-in: clamp(48px, 4.5vw, 64px); padding-top: 0; }
  .hero2--v2 + .overview .overview__grid { align-items: end; }
  .hero2--v2 + .overview .overview__statement { position: relative; z-index: 1; margin-top: calc(var(--ov-in) - var(--ov-band)); }
  .hero2--v2 + .overview .overview__stats { padding-top: clamp(12px, 1.1vw, 16px); }
  .hero2--v2 + .overview .overview__stats li,
  .hero2--v2 + .overview .overview__stats li + li { border-top: 1px solid var(--rule-dark); }
  .hero2--v2 + .overview .overview__stats a,
  .hero2--v2 + .overview .overview__stats li:first-child a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(16px, 1.6vw, 24px); padding: clamp(10px, .9vw, 13px) 0; }
  .hero2--v2 + .overview .overview__num { grid-row: span 2; font-size: clamp(2rem, 3vw, 2.75rem); }
  .hero2--v2 + .overview .overview__label { align-self: end; margin-top: 0; text-wrap: balance; }
  .hero2--v2 + .overview .overview__who { justify-self: start; align-self: start; margin-top: 4px; }
  .hero2--v2 + .overview .overview__awards { margin-top: clamp(40px, 4vw, 56px); }
}

/* ---------- success stories: five case files, stepping from their darkest teal to their brightest ----------
   Each opens to its case study: the latest results, the attorney's own words and what we did. From 1100px
   with JS they share one row and one is open at a time (v2.js); below that, and without JS, they are full
   cards in a swipe row. The section sits on white so the attorneys' quotes below read as their own section. */
.stories { background: var(--paper); padding: var(--section) 0; }
.stories__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.stories__aside { display: flex; align-items: center; gap: 24px; }
.stories__all { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--counsel-ink); text-decoration: none; }
.stories__nav { display: none; gap: 10px; }
.js .stories__nav { display: flex; }
.stories__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule); color: var(--ink); transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), opacity .2s var(--ease-out), transform 160ms var(--ease-out); }
.stories__btn svg { width: 20px; height: 20px; }
.stories__btn:active { transform: scale(.94); }
.stories__btn:disabled { opacity: .35; cursor: default; transform: none; }

.cases { --case-gap: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 460px); gap: var(--case-gap); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--rule) transparent; container-type: inline-size; }
.js .cases { scrollbar-width: none; }
.js .cases::-webkit-scrollbar { display: none; }
/* --soft is the quieter text on each step, kept at 4.5:1 or better on its own teal */
.case { --soft: var(--on-dark-2); position: relative; display: flex; min-width: 0; border-radius: var(--r-l); background: var(--docket); color: #fff; overflow: hidden; scroll-snap-align: start; }
.case:nth-child(2) { background: #04333D; }
.case:nth-child(3) { background: #06474F; }
.case:nth-child(4) { --soft: var(--on-dark); background: #075E63; }
.case:nth-child(5) { --soft: #fff; background: #087C80; }
.case :focus-visible { outline-color: var(--g1); }
.case__face { display: none; }
.case__body { display: flex; flex-direction: column; gap: 24px; width: 100%; padding: clamp(24px, 2.8vw, 36px); }
.case__body:focus { outline: none; }
.case__body:focus-visible { outline: 2px solid var(--g1); outline-offset: -8px; border-radius: var(--r-l); }
.case__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 36px; }
.case__logo { width: auto; max-width: 100%; height: 26px; }
.case__logo--tac { height: 22px; }
.case__logo--vantage, .case__logo--moses-rooth { height: 34px; }
.case__tag { font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--soft); }
.case__title { font-family: var(--serif); font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 400; line-height: 1.16; letter-spacing: -.015em; color: #fff; text-wrap: pretty; }
.case mark, .cq__hl { color: inherit; background: var(--shield-h) no-repeat 0 96% / 100% 2px; padding-bottom: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.case__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; padding-top: 20px; border-top: 1px solid var(--rule-dark); }
/* the figure reads first, its label under it */
.case__stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.case__stats dd { margin: 0; font-family: var(--serif); font-size: clamp(1.75rem, 2.5vw, 2.375rem); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
.case__stats dt { font-size: .8125rem; line-height: 1.4; color: var(--soft); }
.case__quote { padding-left: 18px; border-left: 2px solid var(--retain); }
.case__quote blockquote p { font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.case__quote figcaption { margin-top: 10px; font-size: .875rem; font-weight: 600; color: var(--soft); }
.case__proof { display: grid; gap: 10px; }
.case__proof li { display: flex; gap: 10px; font-size: 1rem; line-height: 1.45; }
.case__proof svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--retain); }
.case__scope { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rule-dark); font-size: .9375rem; line-height: 1.5; }
.case__scope span { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.case__more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: -4px; font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 5px; transition: text-decoration-color .2s var(--ease-out); }
.stories__all svg, .case__more svg { width: 18px; height: 18px; transition: transform 260ms var(--ease-out); }

/* one row, one open: the open file takes the free width; its contents keep the open width throughout, so
   nothing re-wraps while the panels move, and they fade in once there is room for them */
@media (min-width: 1100px) {
  .js .cases { --face: clamp(96px, 8.4vw, 120px); display: flex; margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .js .case { flex: 0 0 var(--face); transition: flex-grow .7s var(--ease-in-out); }
  .js .case.is-open { flex-grow: 1; }
  .js .case__face { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; padding: 22px 16px 22px 18px; color: #fff; text-align: left; cursor: pointer; visibility: visible; transition: opacity .3s var(--ease-out) .32s, visibility 0s, background-color .2s var(--ease-out); }
  .js .case__face:focus-visible { outline-offset: -6px; border-radius: var(--r-l); }
  .case__n { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--soft); font-variant-numeric: tabular-nums; }
  .case__open { position: absolute; top: 16px; right: 14px; width: 32px; height: 32px; padding: 7px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; transition: transform .3s var(--ease-out), background-color .2s var(--ease-out); }
  /* the firm's name runs up the spine, ending above its headline figure */
  .case__name { flex: 1; min-height: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--serif); font-size: 1.375rem; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
  .case__metric { display: block; font-size: .75rem; line-height: 1.35; color: var(--soft); }
  .case__metric b { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
  .js .case__body { flex: none; width: calc(100cqw - 4 * (var(--face) + var(--case-gap))); opacity: 0; transform: translateY(8px); transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
  .js .case.is-open .case__face { opacity: 0; visibility: hidden; transition: opacity .15s var(--ease-out), visibility 0s .15s; }
  .js .case.is-open .case__body { opacity: 1; transform: none; transition: opacity .45s var(--ease-out) .38s, transform .6s var(--ease-out) .38s; }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .js .case__face:hover { background: rgba(255, 255, 255, .05); }
  .js .case__face:hover .case__open { transform: rotate(90deg); background: rgba(255, 255, 255, .1); }
}
/* reduced motion: the panels change at once and the contents cross-fade */
.reduce .case { transition: none; }
.reduce .case__face { transition: opacity .2s, visibility 0s; }
.reduce .case.is-open .case__face { transition: opacity .2s, visibility 0s .2s; }
.reduce .case__body, .reduce .case.is-open .case__body { transform: none; transition: opacity .2s; }
@media (hover: hover) and (pointer: fine) {
  .stories__btn:not(:disabled):hover { border-color: var(--counsel); background: var(--ground); }
  .case__more:hover { text-decoration-color: currentColor; }
  :is(.stories__all, .case__more, .insight__link):hover svg { transform: translateX(4px); }
}

/* ---------- happy attorneys: on the page's ground, the quotes as white cards ---------- */
.happy { padding: var(--section) 0; }
.happy__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.happy__rating { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--ink-2); }
.happy__rating strong { font-weight: 600; color: var(--ink); }
.happy__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
.hq { display: flex; flex-direction: column; gap: 28px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-l); background: var(--paper); box-shadow: 0 0 0 1px rgba(3, 36, 43, .06); }
.hq blockquote { flex: 1; }
.hq__head { margin-bottom: 14px; font-family: var(--serif); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.hq blockquote p:not(.hq__head) { font-size: 1rem; color: var(--ink-2); }
.hq figcaption { display: flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 600; }
.hq figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ---------- nice to meet you: their mark, holding the outcome the copy points to ----------
   On the deep teal, so it stands apart from the attorneys' quotes above and the services below. The Juris
   shield (logo.svg) at section size: its outline and J band drawn in the logo's gradient, its inner shield
   solid, with the TAC figure inside. v2.js draws the lines once, the first time it comes into view. */
/* tighter than the other sections: the shield already gives this one its height */
.meet { background: var(--brief); color: var(--on-dark); padding: clamp(56px, 6vw, 88px) 0; }
.meet__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px clamp(40px, 6vw, 96px); align-items: center; }
.meet .kicker { display: flex; align-items: center; gap: 10px; color: var(--on-dark-2); }
.kicker__mark { flex: none; width: 16px; height: 16px; fill: url(#crest-g); }
.meet h2 { color: #fff; }
.meet h2 em { color: transparent; background: var(--shield-h); -webkit-background-clip: text; background-clip: text; }
.meet .lede { max-width: 54ch; margin-top: 24px; color: var(--on-dark); }
.meet :focus-visible { outline-color: var(--g1); }
.crest { justify-self: center; display: grid; justify-items: center; gap: 22px; width: min(100%, 380px); color: #fff; text-decoration: none; }
.crest:focus-visible { outline-offset: 10px; border-radius: 12px; }
.crest__mark { position: relative; display: block; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.crest__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: url(#crest-g); stroke-width: .22; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .3s var(--ease-out); }
/* the inner shield of the mark: 30 of its 60 units, from (14.8, 14.9) */
.crest__core { position: absolute; left: 24.667%; top: 24.833%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50.167%; height: 50%; padding-bottom: 7%; border-radius: 0 0 50% 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); color: var(--brief); text-align: center; transform-origin: 50% 40%; }
.crest__num { font-family: var(--serif); font-size: 13.5cqw; line-height: 1; letter-spacing: -.04em; }
.crest__label { margin-top: 1.4cqw; font-size: max(.75rem, 3cqw); font-weight: 600; line-height: 1.2; }
.crest__cap { display: grid; justify-items: center; gap: 10px; max-width: 30ch; text-align: center; }
.crest__title { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.crest__more { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; color: var(--retain-hi); }
.crest__more svg { width: 18px; height: 18px; transition: transform 260ms var(--ease-out); }
/* drawn once: the shield, then its band, then the figure lands inside (transitions on the drawn state only) */
/* a dash a little longer than the path: the browser's length estimate can leave the last few pixels undrawn */
.js:not(.reduce) .crest__lines path { stroke-dasharray: 1.02 1.02; stroke-dashoffset: 1.02; }
.js:not(.reduce) .crest__core { opacity: 0; transform: scale(.9); }
.js:not(.reduce) .crest__cap { opacity: 0; transform: translateY(12px); }
.js:not(.reduce) .crest.is-drawn .crest__shield { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-in-out); }
.js:not(.reduce) .crest.is-drawn .crest__band { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-in-out) .3s; }
.js:not(.reduce) .crest.is-drawn .crest__core { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) .75s, transform .8s var(--ease-out) .75s; }
.js:not(.reduce) .crest.is-drawn .crest__cap { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) .95s, transform .7s var(--ease-out) .95s; }
@media (hover: hover) and (pointer: fine) {
  .crest:hover .crest__lines { stroke-width: .32; }
  .crest:hover .crest__more svg { transform: translateX(4px); }
}

/* ---------- our services: the section and its head (the bento board itself is in services.css) ---------- */
.svcs { background: var(--paper); padding: var(--section) 0; }
.svcs__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.svcs__head .lede { max-width: 52ch; }

/* ---------- the testimonial cards ---------- */
.cq-wrap { padding: clamp(64px, 8vw, 112px) 0; }
/* version 2 (26 Oct 2026): the testimonials sit on white, closing the section above them, not on a grey band of their own */
.cq-wrap--paper { background: var(--paper); }
/* after "Our services" the bento's foot padding is this section's top, trimmed so the card has the same room above as below */
.svcs + .cq-wrap--paper { padding-top: 0; margin-top: calc(clamp(64px, 8vw, 112px) - var(--section)); }
/* between "In our own words" (the dark Screening room) and the questions (white): the card keeps its own room above, and the questions' padding is the room below */
.cq-wrap--flip.cq-wrap--paper { padding: clamp(64px, 8vw, 112px) 0 0; }
.cq { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: var(--brief); color: #fff; }
.cq--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.cq--flip .cq__photo { order: 2; }
.cq__photo { position: relative; min-height: 100%; }
.cq__photo img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.cq__link { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--retain); color: var(--brief); transition: background-color .2s var(--ease-out), transform 160ms var(--ease-out); }
.cq__link svg { width: 22px; height: 22px; }
.cq__link:active { transform: scale(.95); }
.cq__link:focus-visible { outline-color: var(--g1); }
.cq__body { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: clamp(32px, 5vw, 72px); }
.cq blockquote p { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.375rem); line-height: 1.24; letter-spacing: -.015em; color: var(--on-dark); text-wrap: pretty; }
.cq__hl { color: #fff; background-size: 100% 3px; }
.cq figcaption { font-size: .9375rem; font-weight: 600; color: var(--on-dark-2); }
@media (hover: hover) and (pointer: fine) { .cq__link:hover { background: var(--retain-hi); } }

/* ---------- portfolio: the bold piece of this version ---------- */
.folio { background: var(--docket); color: var(--on-dark); padding: var(--section) 0; }
.folio h2 { color: var(--on-dark-2); }
.folio h2 em { color: #fff; }
.folio .kicker, .folio .lede { color: var(--on-dark-2); }
/* the heading block centred, kicker, heading and lede one below the other (user, 26 Oct 2026) */
.folio__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; margin-bottom: clamp(44px, 5vw, 72px); text-align: center; }
.folio__head h2 { max-width: 20em; margin-inline: auto; text-wrap: balance; }
.folio__head .lede { max-width: 40em; margin-inline: auto; text-wrap: pretty; }
/* ten of their sites, one at a time (user, 26 Oct 2026: "just show top 10 projects"; the old filter and the strip
   of 116 are gone). Each site sits in one frame of our own with its address (their screenshots came with two or
   three different browser frames drawn in; folio_screens.py crops those off), in a pool of the brand's teal, with
   its phone view tucked over the corner. Beside it: the practice areas, the figures they publish set large, any
   other feature as a tag, and for the two firms quoted on the page, the line of the quote the page highlights. */
.folio__viewer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 376px); gap: 32px clamp(28px, 3vw, 40px); align-items: start; }
/* the side panel is a card of its own (user, 27 Oct 2026: "can we put this section in a card as well?"): the frame's
   surface, ring and shadow. It was a bare column, 320px wide and 40-80px from the frame. */
.folio__side { padding: clamp(24px, 2.4vw, 34px); border-radius: var(--r-m); background: var(--brief); box-shadow: 0 0 0 1px rgba(233, 242, 241, .12), 0 48px 80px -40px rgba(0, 0, 0, .8); }
/* beside the frame, its top and foot level with the frame's (the margin matches the stage's foot padding, which only
   makes room for the phone). The count sits top right, the button and the arrows share the foot, and a stretchy row
   between keeps at least 28px above them, so the controls stay put as the sites change. From 1280px every site fits
   the frame's height (a name over 30 characters is set smaller, see v2.js); narrower, the frame is too short for
   some, so the card stacks under it. */
@media (min-width: 1280px) {
  .folio__side { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: repeat(5, auto) minmax(28px, 1fr) auto; column-gap: 8px; align-self: stretch; margin-bottom: clamp(28px, 3vw, 40px); }
  .folio__side > .folio__nav { display: contents; }
  .folio__area { grid-area: 1 / 1; }
  .folio__side .folio__pos { grid-area: 1 / 2 / 2 / 4; align-self: start; justify-self: end; min-width: 0; font-size: .8125rem; line-height: 1.38; }
  .folio__name { grid-area: 2 / 1 / 3 / -1; }
  .folio__stats { grid-area: 3 / 1 / 4 / -1; }
  .folio__tags { grid-area: 4 / 1 / 5 / -1; }
  .folio__quote { grid-area: 5 / 1 / 6 / -1; }
  .folio__side > .folio__visit { grid-area: 7 / 1; justify-self: start; margin-top: 0; }
  .folio__side [data-folio-prev] { grid-area: 7 / 2; align-self: center; }
  .folio__side [data-folio-next] { grid-area: 7 / 3; align-self: center; }
  .folio__name.is-long { font-size: clamp(1.5rem, 1.8vw, 1.75rem); line-height: 1.12; }
}
.folio__stage { position: relative; isolation: isolate; padding: 0 clamp(28px, 3.5vw, 48px) clamp(28px, 3vw, 40px) 0; }
.folio__stage::before { content: ""; position: absolute; z-index: -1; inset: 4% 4% -6% -4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 124, 128, .5), rgba(8, 124, 128, 0)); filter: blur(24px); pointer-events: none; }
.folio__frame { overflow: hidden; border-radius: var(--r-m); background: var(--brief); box-shadow: 0 0 0 1px rgba(233, 242, 241, .12), 0 48px 80px -40px rgba(0, 0, 0, .8); }
.folio__chrome { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 12px; height: clamp(30px, 2.6vw, 38px); padding: 0 14px; background: #0B3C47; }
.folio__dots { display: flex; gap: 6px; }
.folio__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(233, 242, 241, .22); }
.folio__addr { overflow: hidden; padding: 3px 18px; border-radius: 999px; background: rgba(233, 242, 241, .08); font-size: .75rem; line-height: 1.5; color: var(--on-dark-2); text-overflow: ellipsis; white-space: nowrap; }
.folio__desk { display: block; width: 100%; height: auto; aspect-ratio: 936 / 553; object-fit: cover; object-position: top; background: #fff; }
/* the phone view in an iPhone 15 Pro (user, 26 Oct 2026: their own images draw a white phone round each site, which
   with our ring "looks awful"): a titanium band, a black bezel and the Dynamic Island, traced from Magic UI's MIT
   iPhone (viewBox 433 x 882). folio_phone_screens.py cuts each site out of their phone and sets it under an iOS
   status bar; it sits in the frame's screen (21.25, 19.25, 389.5 x 843.5, corner 55.75), a black screen behind it,
   so a swap goes dark and lights up with the next site while the phone stays put. */
.folio__phone { position: absolute; right: 0; bottom: 0; width: clamp(88px, 15%, 168px); aspect-ratio: 433 / 882; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)) drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.folio__phone[hidden] { display: none; }
.folio__phone::before, .folio__mob { position: absolute; left: 4.85%; top: 2.13%; width: 90.05%; height: 95.75%; border-radius: 14.3% / 6.6%; }
.folio__phone::before { content: ""; background: #000; }
.folio__mob { object-fit: cover; object-position: top; }
.folio__device { position: absolute; inset: 0; width: 100%; height: 100%; }
.folio__desk, .folio__mob, .folio__side > * { transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.is-swapping :is(.folio__desk, .folio__mob) { opacity: 0; transition: none; }
.folio__side.is-swapping > :not(.folio__nav) { opacity: 0; transform: translateY(6px); transition: none; }
.folio__area { margin-bottom: 12px; font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: var(--retain); }
.folio__area[hidden] { display: none; }
.folio__name { font-family: var(--serif); font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.08; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
/* the figures: the number large, its words beneath */
.folio__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 24px; }
.folio__stats li { display: grid; align-content: start; gap: 6px; padding-top: 16px; padding-bottom: 4px; border-top: 1px solid var(--rule-dark); font-size: .875rem; line-height: 1.35; color: var(--on-dark-2); }
.folio__stats li:nth-child(n+3) { margin-top: 12px; }
.folio__stats b { font-family: var(--serif); font-size: clamp(1.875rem, 2.6vw, 2.5rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; color: #fff; }
.folio__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.folio__tags li { padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(233, 242, 241, .2); font-size: .8125rem; color: var(--on-dark-2); }
.folio__tags b { font-weight: 600; color: #fff; }
.folio__stats:empty, .folio__tags:empty { display: none; }
.folio__quote { margin: 24px 0 0; padding-left: 18px; border-left: 2px solid var(--retain); }
.folio__quote[hidden] { display: none; }
.folio__quote p { font-family: var(--serif); font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.38; letter-spacing: -.01em; color: #fff; text-wrap: pretty; }
.folio__quote footer { margin-top: 10px; font-size: .8125rem; font-weight: 600; color: var(--on-dark-2); }
/* the panel's one action: a white pill, the arrow in a lime disc that nudges out on hover */
.folio__visit { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; margin-top: 32px; padding: 6px 6px 6px 24px; border-radius: 999px; background: #fff; color: var(--docket); font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; text-decoration: none; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .6); transition: background-color .2s var(--ease-out), transform 160ms var(--ease-out); }
.folio__visit-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--retain); color: var(--docket); transition: background-color .2s var(--ease-out); }
.folio__visit-icon svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.folio__visit:active { transform: scale(.97); }
.folio__visit:focus-visible { outline-offset: 3px; }
.folio__nav { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.folio__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule-dark); color: #fff; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform 160ms var(--ease-out); }
.folio__btn svg { width: 20px; height: 20px; }
.folio__btn:active { transform: scale(.94); }
.folio__pos { min-width: 7ch; font-size: .9375rem; font-variant-numeric: tabular-nums; text-align: center; color: var(--on-dark-2); }
/* all ten in one row, no scrolling */
.folio__thumbs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 4vw, 56px); }
.folio__thumb { display: block; width: 100%; border-radius: 8px; overflow: hidden; background: var(--brief); opacity: .42; transition: opacity .2s var(--ease-out), box-shadow .2s var(--ease-out), transform 200ms var(--ease-out); }
.folio__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.folio__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--docket), 0 0 0 4px var(--retain); }
.folio__thumb:active { transform: scale(.97); }
.folio__more { display: flex; justify-content: flex-end; margin-top: 24px; }
.folio__more a { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; color: #fff; text-decoration: underline; text-decoration-color: var(--retain); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.folio__more svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .folio__btn:hover { border-color: rgba(233, 242, 241, .5); background: rgba(233, 242, 241, .08); }
  .folio__visit:hover { background: var(--paper); }
  .folio__visit:hover .folio__visit-icon { background: var(--retain-hi, var(--retain)); }
  .folio__visit:hover .folio__visit-icon svg { transform: translate(2px, -2px); }
  .folio__thumb:hover { opacity: .85; }
}
:root.reduce .folio * { transition: none !important; }

/* ---------- why choose us ---------- */
.why { padding: var(--section) 0; }
.why__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.why__head { position: sticky; top: calc(var(--masthead-h) + 32px); }
.why__head .lede { margin-top: 20px; }
.reasons { border-top: 1px solid var(--rule); }
.reason { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 24px; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.reason__icon, .insight__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--paper); color: var(--counsel-ink); box-shadow: inset 0 0 0 1px var(--rule); }
.reason__icon svg, .insight__icon svg { width: 24px; height: 24px; }
.reason__icon { grid-row: span 2; }
.reason h3, .insight h3 { font-family: var(--serif); font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
.reason p { margin-top: 10px; max-width: 60ch; color: var(--ink-2); }

/* ---------- in our own words ---------- */
.partner { background: var(--paper); padding: var(--section) 0; }
.partner__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.partner__head .lede { margin-top: 20px; }

/* ---------- answers ---------- */
.faq .lede a, .insights__head .lede a { color: var(--counsel-ink); text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(8, 124, 128, .35); }
.qa__a p:has(+ .qa__list) { padding-bottom: 12px; }
.qa__list { max-width: 62ch; padding: 0 0 16px 1.25em; list-style: disc; font-size: 1rem; color: var(--ink-2); }
.qa__list li + li { margin-top: 6px; }
.qa__list li::marker { color: var(--counsel); }
.qa__list strong { font-weight: 600; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { :is(.faq, .insights__head) .lede a:hover { text-decoration-color: currentColor; } }

/* ---------- thought leadership ---------- */
.insights { padding: var(--section) 0; }
/* centred, kicker, heading and lede one below the other, as the portfolio's (user, 26 Oct 2026: "same centre align") */
.insights__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; margin-bottom: clamp(44px, 5vw, 72px); text-align: center; }
.insights__head h2 { max-width: 20em; margin-inline: auto; text-wrap: balance; }
.insights__head .lede { max-width: 40em; margin-inline: auto; text-wrap: pretty; }
.insights__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.insight { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--r-l); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-soft); }
.insight:nth-child(-n+2) { grid-column: span 3; }
.insight__icon { margin-bottom: 4px; background: var(--ground); box-shadow: none; }
.insight p { flex: 1; font-size: .9375rem; color: var(--ink-2); }
.insight__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9375rem; font-weight: 600; color: var(--counsel-ink); text-decoration: underline; text-decoration-color: rgba(8, 124, 128, .35); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.insight__link svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .insight__link:hover { text-decoration-color: currentColor; } }

/* ---------- video dialog ---------- */
html.vmodal-open { overflow: hidden; }
.vmodal { width: min(100vw - 32px, 1100px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-l); background: #000; color: #fff; overflow: visible; }
.vmodal::backdrop { background: rgba(3, 36, 43, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vmodal[open] { animation: vmodal-in 340ms var(--ease-out); }
.vmodal[open]::backdrop { animation: vmodal-fade 340ms var(--ease-out); }
.vmodal__frame { aspect-ratio: 16 / 9; border-radius: inherit; overflow: hidden; }
.vmodal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vmodal__close { position: absolute; right: 0; bottom: calc(100% + 10px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(233, 242, 241, .14); color: #fff; transition: background-color .2s var(--ease-out), transform 160ms var(--ease-out); }
.vmodal__close svg { width: 20px; height: 20px; }
.vmodal__close:active { transform: scale(.94); }
.vmodal__close:focus-visible { outline-color: var(--g1); }
@media (hover: hover) and (pointer: fine) { .vmodal__close:hover { background: rgba(233, 242, 241, .26); } }
@keyframes vmodal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes vmodal-fade { from { opacity: 0; } }

/* ---------- footer ---------- */
/* ---------- call to action: its own section above the footer (their footer's call to action, word for word) ---------- */
/* the insights section above already ends in --section padding, so this one only pads its foot */
.cta2 { padding: 0 0 clamp(56px, 7vw, 104px); }
.cta2__panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6.4vw, 96px); border-radius: var(--r-l); background: var(--brief); color: var(--on-dark); }
/* explosive growth as a blast (26 Oct 2026, chose "shield shockwave"; a growth line breaking a dotted plateau was
   tried and rejected). It replaced the Juris mark outline (.cta2__mark at min(42%, 520px), stroke url(#g-shield) at
   .55). The mark sits at 81% across, 52% down; the drawing is 47% of the panel wide (43% at 1100px and below, where
   the copy wraps wider), which keeps the outermost ring clear of the copy at every width, and the panel crops the
   outer rings top, right and foot. */
.cta2__blast { position: absolute; z-index: -1; left: 81%; top: 52%; width: 47%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.cta2__blast svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cta2__glow { fill: url(#g-blast-glow); }
.cta2__core { fill: url(#g-shield); transform-box: fill-box; transform-origin: center; }
/* each ring is the shield scaled about its centre (--s), with a stroke that stays the same width at any scale */
.cta2__ring { fill: none; stroke: url(#g-shield); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: var(--o); transform-box: fill-box; transform-origin: center; transform: scale(var(--s)); }
.cta2__ring--far { stroke-width: 1.3; stroke-dasharray: 10 9; }
/* the one beat, the first time the panel is in view: the mark lands, then the rings burst out of it one after
   another (--d) and settle. At rest with reduced motion and ?static. */
.js:not(.reduce) .cta2__blast:not(.is-drawn) .cta2__core { opacity: 0; transform: scale(.8); }
.js:not(.reduce) .cta2__blast:not(.is-drawn) .cta2__glow { opacity: 0; }
.js:not(.reduce) .cta2__blast:not(.is-drawn) .cta2__ring { opacity: 0; transform: scale(1); }
.cta2__blast.is-drawn .cta2__core { transition: opacity .3s ease-out, transform .5s var(--ease-out); }
.cta2__blast.is-drawn .cta2__glow { transition: opacity .9s ease-out .15s; }
.cta2__blast.is-drawn .cta2__ring { transition: opacity .45s ease-out var(--d), transform 1.3s var(--ease-out) var(--d); }
.cta2__copy { max-width: 56%; }
.cta2__title { font-size: clamp(2.375rem, 4.6vw, 4.25rem); line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.cta2__title em { font-style: normal; color: var(--retain); }
.cta2 p { margin: clamp(20px, 2vw, 28px) 0 clamp(28px, 2.6vw, 36px); max-width: 48ch; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; color: var(--on-dark); }
.cta2 .btn { color: var(--brief); }
.cta2 :focus-visible { outline-color: var(--g1); }
@media (max-width: 1100px) { .cta2__blast { width: 43%; } }
/* below 900px the copy takes the full panel and only a scrap of the drawing would show, so it goes */
@media (max-width: 900px) {
  .cta2__copy { max-width: 640px; }
  .cta2__blast { display: none; }
}

.footer2 { background: var(--docket); color: var(--on-dark-2); padding: clamp(56px, 6vw, 88px) 0 32px; font-size: .875rem; }
.footer2 a { color: var(--on-dark-2); text-decoration: none; transition: color .2s; }
/* the footer is the site map and the bar; the call to action moved to its own section */
.footer2__top { display: block; }
.footer2__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.footer2__cols h2 { margin-bottom: 14px; font-family: var(--sans); font-size: .8125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: #fff; }
.footer2__cols li + li { margin-top: 9px; }
.footer2__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--rule-dark); }
.footer2__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.footer2__brand img { width: 160px; height: auto; }
.footer2__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.footer2 .footer2__phone { font-size: 1rem; font-weight: 600; color: #fff; }
.footer2__social { display: flex; gap: 6px; }
.footer2__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-dark); color: var(--on-dark); transition: background-color .2s, color .2s; }
.footer2__social svg { width: 20px; height: 20px; }
.footer2__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 24px; font-size: .8125rem; }
.footer2__legal ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer2__legal strong { font-weight: 600; color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
  .footer2 a:hover { color: #fff; }
  .footer2__social a:hover { background: rgba(233, 242, 241, .08); }
}

/* ---------- intro (the shared loader hands over to these) ---------- */
.js:not(.reduce) .hero2__media { opacity: 0; transform: translateY(32px); }
.is-intro .hero2__media { opacity: 1 !important; transform: none !important; transition: opacity .9s var(--ease-out) .45s, transform 1.1s var(--ease-out) .45s; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero2__grid { grid-template-columns: 1fr; }
  .hero2__copy { padding-bottom: 0; }
  .hero2__media { width: 100%; max-width: 520px; }
  .overview__grid, .meet__grid, .svcs__head, .folio__head, .why__grid, .partner__grid, .insights__head { grid-template-columns: 1fr; }
  .overview__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .overview__stats li + li { border-top: 0; padding-left: 24px; border-left: 1px solid var(--rule-dark); }
  .overview__stats a { padding: 0; }
  .why__head { position: static; }
  .happy__list { grid-template-columns: 1fr; max-width: 680px; }
  .insights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight, .insight:nth-child(-n+2) { grid-column: auto; }
  .insight:last-child { grid-column: 1 / -1; }
}
/* the portfolio stacks below 1280px: beside a frame this short, some sites' cards outgrow its height (it stacked
   from 900px before the side became a card) */
@media (max-width: 1279px) {
  .folio__viewer { grid-template-columns: 1fr; }
  .folio__side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 16px; }
  .folio__side > :not(.folio__visit, .folio__nav) { grid-column: 1 / -1; }
  .folio__visit { justify-self: start; }
  .folio__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .folio__stats li:nth-child(n+3) { margin-top: 0; }
}
@media (max-width: 900px) {
  .folio__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cq, .cq--flip { grid-template-columns: 1fr; }
  .cq--flip .cq__photo { order: 0; }
  .cq__photo img { aspect-ratio: 4 / 3; object-position: 50% 22%; }
  .footer2__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights__list { grid-template-columns: 1fr; }
  .insight:last-child { grid-column: auto; }
}
@media (max-width: 640px) {
  .hero2 { --band: 88px; }
  .overview__stats { grid-template-columns: 1fr; gap: 0; }
  .overview__stats li + li { padding: 20px 0 0; margin-top: 20px; border-left: 0; border-top: 1px solid var(--rule-dark); }
  .overview__awards { padding-top: 28px; }
  .awards2 { flex-direction: column; align-items: flex-start; gap: 20px; }
  .awards2__track { align-self: stretch; }
  .reason { grid-template-columns: 1fr; padding: 28px 0; }
  .reason__icon { grid-row: auto; margin-bottom: 16px; }
  .folio__side { grid-template-columns: 1fr; }
  .folio__nav { margin-top: 20px; }
  .folio__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folio__stats li:nth-child(n+3) { margin-top: 12px; }
  .folio__thumbs { gap: 8px; }
  .folio__more { justify-content: flex-start; }
  .insight { padding: 24px; }
  .footer2__bar { align-items: flex-start; flex-direction: column; }
  .footer2__legal { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .case__stats { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 4px; }
  .case__stats div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; }
  .case__stats div + div { border-top: 1px solid var(--rule-dark); }
  .case__stats dd { grid-area: 1 / 1; font-size: 1.75rem; }
  .case__stats dt { grid-area: 1 / 2; }
}
@media (max-width: 420px) {
  .vcard__copy { padding: 16px 20px 76px; }
  .vcard__play { left: 20px; bottom: 20px; }
  .footer2__cols { gap: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vmodal[open], .vmodal[open]::backdrop { animation: none; }
  .vcard__img { transition: none; }
}
.reduce .vmodal[open], .reduce .vmodal[open]::backdrop { animation: none; }