/*
Theme Name: Ashley Vaughn
Version: 0.5.3
Description: Custom website for Ashley Vaughn, Attorney at Law.
Author: Dan Gilroy Design
Text Domain: ashley-vaughn
*/
/* Breakpoints: 1100px rail wraps; 860px header and grids stack; 640px phone. */
/* Colors are the logo's navy and green, with darker shades and light tints of each. Logo green #7a9c6a is decorative only (3.09:1 on white). */

/* FONTS: self-hosted Latin subsets from Google Fonts, SIL Open Font License (assets/fonts/OFL-*.txt). Pages download only the faces their design uses. */
@font-face{font-family:'Schibsted Grotesk';src:url(assets/fonts/schibsted-grotesk-latin.woff2) format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url(assets/fonts/literata-latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap} /* the variable file: opsz 7 to 72 (the browser picks the display cut at display sizes), wght 400 to 900 */
@font-face{font-family:'Literata';src:url(assets/fonts/literata-italic-latin.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* TOKENS */
:root{--av-navy:#3e4a75;--av-navy-deep:#26304f;--av-ink:#1f2540;--av-mist:#dfe3f0;--av-green:#7a9c6a;--av-green-text:#4d6b40;--av-green-light:#c9dcbf;--av-green-tint:#eef3ea;--av-rule:rgba(62,74,117,.2);--av-ground:#ebf1e6;--av-width:1240px;--av-gutter:clamp(20px,5vw,72px);--av-space:clamp(72px,9vw,128px);--av-header-h:140px}
.av-design-a{--av-hero-bg:#232a45;--av-display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;--av-body:'Literata',Georgia,serif;--av-display-weight:600;--av-ui-weight:600;--av-track:-.02em;--av-headline:'Literata',Georgia,serif;--av-headline-weight:600;--av-headline-track:-.012em;--av-body-size:18px;--av-btn-dark-bg:var(--av-green-light);--av-btn-dark-fg:var(--av-ink);--av-hero-tel:#fff}

/* BASE */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:20px}
body{margin:0;background:#fff;color:var(--av-ink);font-family:var(--av-body);font-size:var(--av-body-size);line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
/* Headline type (h1 to h3, the situation lines, the directory and Contact rows, the courts line) is Literata's display cut in design A [Dan 2026-10-12: the grotesk read basic at display sizes; the serif matches the logo's wordmark and the body]; labels, buttons, the nav and label-sized headings stay in the grotesk (--av-display). */
h1,h2,h3{margin:0;font-family:var(--av-headline);font-weight:var(--av-headline-weight);letter-spacing:var(--av-headline-track);line-height:1.08;color:var(--av-navy)}
p,ul,ol,dl,dd,figure{margin:0}
button{font:inherit}
:focus-visible{outline:3px solid var(--av-navy);outline-offset:4px}
.av-dark :focus-visible{outline-color:#fff}
.av-container{max-width:calc(var(--av-width) + 2 * var(--av-gutter));margin-inline:auto;padding-inline:var(--av-gutter)}
.av-section{padding-block:var(--av-space)}
.av-skip{position:absolute;left:12px;top:-80px;z-index:60;background:#fff;color:var(--av-ink);padding:10px 14px}
.av-skip:focus{top:10px}
.av-lede{font-size:clamp(18px,1.45vw,21px);line-height:1.6;max-width:36ch}

/* BUTTONS AND LINKS */
html:not(.av-js) a[data-u]{display:none} /* email links are built by email.js; without JavaScript they would go nowhere */
.av-button{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;background:var(--av-navy);color:#fff;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:16px;line-height:1.2;text-decoration:none;border-radius:3px}
.av-button:hover{background:var(--av-navy-deep)}
.av-button-dark{background:var(--av-btn-dark-bg);color:var(--av-btn-dark-fg)}
.av-button-dark:hover{background:var(--av-green-tint);color:var(--av-ink)}
/* Arrow buttons: the arrow slides on hover and focus (the reduced-motion rule stops the transition). */
.av-button-arrow{gap:10px}
.av-button-arrow svg{flex-shrink:0;transition:transform .25s ease}
.av-button-arrow:hover svg,.av-button-arrow:focus-visible svg{transform:translateX(4px)}
.av-text-link-arrow{display:inline-flex;align-items:center;gap:8px;text-decoration-thickness:1px;transition:text-decoration-thickness .2s}
.av-text-link-arrow svg{flex-shrink:0;transition:transform .25s ease}
.av-text-link-arrow:hover,.av-text-link-arrow:focus-visible{text-decoration-thickness:2px;color:var(--av-navy-deep)}
.av-text-link-arrow:hover svg,.av-text-link-arrow:focus-visible svg{transform:translateX(4px)}
.av-text-link{font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:16px;color:var(--av-navy)}
.av-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:32px}
.av-tel{font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:18px;color:var(--av-hero-tel)}

/* EMAIL NOTICE [proposed 2026-10-19] (av_email_notice in functions.php, opened by email.js): a white panel on a navy veil with a light-green top edge; the points as lines with a short green dash; "I understand. Email Ashley" as the navy button, Cancel as a text button. The padding sits on the inner div so a click on the dialog itself is a click on the veil. */
.av-notice{width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);margin:auto;padding:0;border:0;border-radius:3px;background:#fff;color:var(--av-ink);box-shadow:0 24px 60px rgba(16,21,38,.35);overflow:auto}
.av-notice::backdrop{background:rgba(31,37,64,.64)}
.av-notice-inner{padding:clamp(28px,4vw,44px);border-top:6px solid var(--av-green-light)}
.av-notice-title{font-size:clamp(26px,2.4vw,32px);line-height:1.15;text-wrap:balance}
.av-notice-points{margin:22px 0 0;padding:0;list-style:none;font-size:17px;line-height:1.55}
.av-notice-points li{position:relative;padding-left:30px}
.av-notice-points li+li{margin-top:14px}
.av-notice-points li::before{content:'';position:absolute;left:0;top:.76em;width:16px;height:2px;background:var(--av-green)}
.av-notice-more{margin-top:20px;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:15px;color:var(--av-navy)}
.av-notice-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
.av-notice-cancel{min-height:44px;padding:0 4px;border:0;background:none;color:var(--av-navy);font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer}
.av-notice-cancel:hover{text-decoration-thickness:2px}

/* HEADER: sticky; navy (or transparent over the homepage hero) at the top, white with the navy logo once scrolled (menu.js adds .is-scrolled and swaps the logo). The hero pulls up under it by --av-header-h. */
.av-header{position:sticky;top:0;z-index:50;background:var(--av-navy);color:#fff;transition:background-color .25s ease,box-shadow .25s ease}
.av-header-over{background:transparent}
.home .av-hero{margin-top:calc(-1 * var(--av-header-h))}
.av-header.is-scrolled{background:#fff;color:var(--av-navy);box-shadow:0 1px 0 rgba(62,74,117,.16)}
.av-header.is-scrolled :focus-visible{outline-color:var(--av-navy)}
.av-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.av-brand{display:block;width:160px;flex-shrink:0}
.av-brand img{width:160px;height:96px}
.av-nav{display:flex;align-items:center;gap:40px;font-family:var(--av-display);font-size:19px;font-weight:var(--av-ui-weight);letter-spacing:-.008em}
.av-primary-menu{list-style:none;margin:0;padding:0;display:flex;gap:36px}
.av-nav a{position:relative;display:block;padding-block:10px;text-decoration:none}
/* A green bar slides in under a link on hover and focus, and stays under the current page. */
.av-primary-menu a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--av-green-light);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.av-primary-menu a:hover::after,.av-primary-menu a:focus-visible::after,.av-primary-menu a[aria-current]::after{transform:scaleX(1)}
.av-header.is-scrolled .av-primary-menu a::after{background:var(--av-green)}
/* Practice Areas opens the four practice areas on hover and on keyboard focus (focus-within); the parent link still goes to the directory. */
.av-primary-menu>li{position:relative}
.av-primary-menu>.menu-item-has-children>a{padding-right:18px}
.av-primary-menu>.menu-item-has-children>a::before{content:'';position:absolute;right:0;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.75}
.av-primary-menu .sub-menu{position:absolute;top:100%;left:-18px;z-index:5;min-width:250px;margin:0;padding:10px 0;list-style:none;background:#fff;color:var(--av-navy);border-radius:3px;box-shadow:0 14px 36px rgba(31,37,64,.2);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.av-primary-menu>li:hover>.sub-menu,.av-primary-menu>li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
@media(min-width:861px){.av-primary-menu>li.av-sub-closed>.sub-menu{opacity:0;visibility:hidden}} /* Escape closes it (menu.js) until the pointer or focus leaves the item (WCAG 1.4.13) */
.av-primary-menu .sub-menu a{display:block;padding:10px 20px;font-size:17px;color:var(--av-navy)}
.av-primary-menu .sub-menu a::after{display:none}
.av-primary-menu .sub-menu a:hover,.av-primary-menu .sub-menu a:focus-visible,.av-primary-menu .sub-menu a[aria-current]{background:var(--av-green-tint)}
.av-primary-menu .sub-menu :focus-visible{outline-color:var(--av-navy)}
.av-nav .av-nav-phone{display:inline-flex;align-items:center;gap:9px;font-size:20px;color:var(--av-green-light)}
.av-nav .av-nav-phone svg{flex-shrink:0}
.av-nav .av-nav-phone:hover,.av-nav .av-nav-phone:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
.av-header.is-scrolled .av-nav-phone{color:var(--av-green-text)}
.av-menu-toggle{display:none}

/* HOME HERO (shared) */
.av-hero{position:relative;background:var(--av-navy);color:#fff}
.av-hero>.av-container{position:relative;z-index:1}
.av-hero h1{color:#fff;font-size:clamp(42px,5.4vw,80px);line-height:1.03}
.av-hero .av-lede{color:var(--av-mist)}
.av-hero-photo{position:absolute;top:0;left:0;right:0;overflow:hidden}
.av-hero-photo img{width:100%;height:100%;object-fit:cover}
.av-hero-photo::after{content:'';position:absolute;inset:0}

/* HOME HERO A: headline over the sky, skyline above the stage rail */
.av-hero-a{background:var(--av-hero-bg);padding-block:calc(var(--av-header-h) + clamp(32px,5vw,72px)) clamp(56px,7vw,96px)}
/* Height tracks the layout so the skyline lands between the headline and the stage rail (measured 961 to 1920px). */
.av-hero-a .av-hero-photo{--av-ph:min(calc(32.45vw + 440px),1000px);height:var(--av-ph)}
/* Near-black shade darkens behind the text only; the skyline band between the headline and the rail stays clear. */
.av-hero-a .av-hero-photo::after{background:linear-gradient(180deg,rgba(16,21,38,.62) 0%,rgba(16,21,38,.38) 30%,rgba(16,21,38,.08) 48%,rgba(16,21,38,0) 56%,rgba(35,42,69,0) 63%,rgba(35,42,69,.82) 84%,var(--av-hero-bg) 100%),linear-gradient(90deg,rgba(16,21,38,.6) 0%,rgba(16,21,38,.25) 45%,rgba(16,21,38,.28) 62%,rgba(16,21,38,.5) 100%)}
.av-hero-a h1{max-width:18ch;font-size:clamp(42px,5vw,70px);font-weight:500;letter-spacing:-.015em} /* 70px keeps the serif headline on three lines at 1440 [Dan 2026-10-12] */
.av-hero-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:start}
.av-hero-head .av-actions{margin-top:28px}
.av-stages{margin-top:clamp(80px,12.5vw,190px)}
.av-stages h2{font-family:var(--av-display);font-weight:var(--av-display-weight);font-size:clamp(20px,1.6vw,23px);letter-spacing:-.005em;color:var(--av-green-light)}
.av-rail{list-style:none;padding:0;margin-top:28px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 28px;position:relative}
.av-rail::before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:var(--av-green)}
.av-rail>li{position:relative;padding-top:34px}
.av-rail>li::before{content:'';position:absolute;left:0;top:0;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--av-hero-bg,var(--av-navy));border:2px solid var(--av-green);transition:background-color .3s}
.av-rail>li:last-child::before{background:var(--av-green)}
.av-rail h3{position:relative;font-family:var(--av-display);font-weight:var(--av-display-weight);font-size:19px;letter-spacing:-.005em;line-height:1.25;color:#fff;transition:color .45s,opacity .45s}
.av-rail ul{list-style:none;padding:0;margin-top:12px;font-size:16px;line-height:1.5;color:var(--av-mist);transition:color .45s,opacity .45s}
.av-rail ul li+li{margin-top:8px}
/* The note and the pause button share one row under the rail [Dan 2026-10-10]. */
.av-stages-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(36px,4vw,56px);padding-top:20px;border-top:1px solid rgba(255,255,255,.22)}
.av-stages-note{margin:0;font-style:italic;font-size:17px;color:var(--av-mist)}
.av-stages-note span{display:block}
/* LAYERED SKY (design A hero): the photo split into a cut-out foreground over a slowly drifting cloud layer.
   The stage reproduces object-fit:cover (3:2, 72% vertical position) so both layers line up with the photo crop. */
.av-sky-stage{--av-sw:max(100vw,calc(var(--av-ph) * 1.5));--av-sh:calc(var(--av-sw) / 1.5);position:absolute;left:50%;top:calc((var(--av-ph) - var(--av-sh)) * .72);width:var(--av-sw);height:var(--av-sh);margin-left:calc(var(--av-sw) / -2);filter:brightness(.84) saturate(1.1)}
/* Foreground: dusk without JavaScript; otherwise the art inc/design.php picked for Portland's time of day (--av-fg). */
.av-sky-fg{position:absolute;inset:0;background:url(assets/images/sky/hero-foreground-dusk.webp) 0 0/100% 100% no-repeat}
[data-av-sky] .av-sky-fg{background-image:var(--av-fg)}
.av-sky{position:absolute;left:0;top:0;width:100%;height:54.25%;overflow:hidden;opacity:0;transition:opacity .6s}
.av-sky-on.is-ready .av-sky{opacity:1}
/* Hidden strips don't fetch their image; rail.js loads it after the foreground, then sets .is-ready. */
.av-sky-on:not(.is-ready) .av-sky-strip{display:none}
.av-sky-strip{position:absolute;top:0;left:0;width:240%;height:100%;background:url(assets/images/sky/hero-sky-dusk.webp) left top/33.3333% 100% repeat-x;animation:av-sky-drift 80s linear infinite;will-change:transform}
.av-sky-on.is-paused .av-sky-strip{animation-play-state:paused}
/* Three copies of the tile (each 80% of the stage width); moving one copy's width loops seamlessly. */
@keyframes av-sky-drift{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
/* TIME OF DAY (inc/design.php sets data-av-sky). Day and dawn are bright skies under white text, so they use a coloured
   shade (--av-shade: blue for day, indigo for dawn) instead of near-black. The band from 57% shades the trees under
   "Help at any stage" (it sits at 63 to 71% of the photo between 961 and 2560px). Contrast measured at 960 to 1920px.
   Cloud loops: day and dawn 240 s, dusk and night 80 s (Dan asked for slower). */
[data-av-sky=day] .av-sky-strip{background-image:url(assets/images/sky/hero-sky-day.webp)}
[data-av-sky=dawn] .av-sky-strip{background-image:url(assets/images/sky/hero-sky-dawn.webp)}
[data-av-sky=night] .av-sky-strip{background-image:url(assets/images/sky/hero-sky-night.webp)}
/* Day and dawn: one wide tile from the licensed Shutterstock panorama (3017 x 926, so 117.83% of the stage; the strip holds
   three). 240 s per tile, about 7 px a second at 1440 (Dan asked for slower twice). */
[data-av-sky=day] .av-sky-strip,[data-av-sky=dawn] .av-sky-strip{width:353.5%;animation-duration:240s}
[data-av-sky=day]{--av-shade:12,44,112}
[data-av-sky=dawn]{--av-shade:46,38,82}
[data-av-sky=day] .av-sky-stage{filter:brightness(.84) saturate(1.2)}
[data-av-sky=dawn] .av-sky-stage{filter:brightness(.84) saturate(1.1)}
/* Dawn: lighter, warmer shade than day so the pink horizon shows (it had contrast to spare). */
@media(min-width:861px){[data-av-sky=dawn] .av-hero-a .av-hero-photo::after{background:linear-gradient(180deg,rgba(var(--av-shade),.52) 0%,rgba(var(--av-shade),.44) 30%,rgba(var(--av-shade),.34) 44%,rgba(var(--av-shade),.06) 52%,rgba(var(--av-shade),0) 56%,rgba(35,42,69,0) 60%,rgba(35,42,69,.26) 66%,rgba(35,42,69,.42) 74%,rgba(35,42,69,.8) 87%,var(--av-hero-bg) 100%),linear-gradient(90deg,rgba(var(--av-shade),.34) 0%,rgba(var(--av-shade),.04) 45%,rgba(var(--av-shade),.4) 62%,rgba(var(--av-shade),.58) 100%)}}
@media(min-width:861px) and (max-width:1100px){[data-av-sky=dawn] .av-hero-a .av-hero-photo::after{background:linear-gradient(180deg,rgba(var(--av-shade),.52) 0%,rgba(var(--av-shade),.44) 30%,rgba(var(--av-shade),.34) 44%,rgba(var(--av-shade),.06) 52%,rgba(var(--av-shade),0) 56%,rgba(35,42,69,0) 60%,rgba(35,42,69,.26) 66%,rgba(35,42,69,.42) 74%,rgba(35,42,69,.8) 87%,var(--av-hero-bg) 100%),linear-gradient(90deg,rgba(var(--av-shade),.34) 0%,rgba(var(--av-shade),.04) 40%,rgba(var(--av-shade),.46) 62%,rgba(var(--av-shade),.54) 100%)}}
/* Night: the photo is already dark, so a lighter shade keeps the navy sky and the city lights. */
[data-av-sky=night] .av-sky-stage{filter:brightness(.95) saturate(1.05)}
@media(min-width:861px){[data-av-sky=night] .av-hero-a .av-hero-photo::after{background:linear-gradient(180deg,rgba(16,21,38,.35) 0%,rgba(16,21,38,.2) 30%,rgba(16,21,38,0) 48%,rgba(35,42,69,0) 63%,rgba(35,42,69,.82) 84%,var(--av-hero-bg) 100%),linear-gradient(90deg,rgba(16,21,38,.35) 0%,rgba(16,21,38,.1) 45%,rgba(16,21,38,.15) 62%,rgba(16,21,38,.3) 100%)}}
@media(min-width:861px){[data-av-sky=day] .av-hero-a .av-hero-photo::after{background:linear-gradient(180deg,rgba(var(--av-shade),.6) 0%,rgba(var(--av-shade),.5) 30%,rgba(var(--av-shade),.4) 44%,rgba(var(--av-shade),.08) 52%,rgba(var(--av-shade),0) 56%,rgba(35,42,69,0) 57%,rgba(35,42,69,.36) 63%,rgba(35,42,69,.46) 71%,rgba(35,42,69,.8) 87%,var(--av-hero-bg) 100%),linear-gradient(90deg,rgba(var(--av-shade),.46) 0%,rgba(var(--av-shade),.06) 45%,rgba(var(--av-shade),.38) 62%,rgba(var(--av-shade),.56) 100%)}}
/* 861 to 1100px: the phone link sits just above the hills on the right, so the right side is shaded more. */
@media(min-width:861px) and (max-width:1100px){[data-av-sky=day] .av-hero-a .av-hero-photo::after{background:linear-gradient(180deg,rgba(var(--av-shade),.6) 0%,rgba(var(--av-shade),.5) 30%,rgba(var(--av-shade),.4) 44%,rgba(var(--av-shade),.08) 52%,rgba(var(--av-shade),0) 56%,rgba(35,42,69,0) 57%,rgba(35,42,69,.36) 63%,rgba(35,42,69,.46) 71%,rgba(35,42,69,.8) 87%,var(--av-hero-bg) 100%),linear-gradient(90deg,rgba(var(--av-shade),.46) 0%,rgba(var(--av-shade),.06) 40%,rgba(var(--av-shade),.56) 62%,rgba(var(--av-shade),.62) 100%)}}
.av-stages{position:relative}
.av-sky-toggle{flex-shrink:0;padding:7px 14px;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:var(--av-mist);font-family:var(--av-display);font-size:13px;font-weight:500;line-height:1.2;cursor:pointer}
.av-sky-toggle:hover{border-color:#fff;color:#fff}
/* Stage rail animation (desktop, played once by assets/js/rail.js; skipped with reduced motion) */
.av-rail.is-animating::before{background:rgba(255,255,255,.22)}
.av-rail-fill{position:absolute;left:0;top:6px;height:2px;background:var(--av-green);transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.av-rail-dot{position:absolute;left:0;top:0;z-index:2;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(201,220,191,.3),0 0 18px 4px rgba(201,220,191,.35);transition:transform .6s cubic-bezier(.65,0,.35,1)}
.av-rail.is-animating>li::before{background:var(--av-hero-bg,var(--av-navy))}
.av-rail.is-animating>li.is-done::before,.av-rail.is-animating>li.is-active::before{background:var(--av-green)}
/* Spotlight: stages ahead of the dot dim; the stage it reaches is full white with a green underline. Dimmed text stays above 4.5:1. */
.av-rail.is-animating>li h3,.av-rail.is-animating>li ul{opacity:.62}
.av-rail.is-animating>li.is-done h3,.av-rail.is-animating>li.is-done ul,.av-rail.is-animating>li.is-active h3,.av-rail.is-animating>li.is-active ul{opacity:1}
.av-rail h3::after{content:'';position:absolute;left:0;bottom:-9px;width:44px;height:3px;background:var(--av-green-light);transform:scaleX(0);transform-origin:left center;transition:transform .45s}
.av-rail>li.is-active h3::after{transform:scaleX(1)}
.av-rail>li.is-active ul{color:#fff}

/* HOME HERO D: full-width photograph */

/* HOME PRACTICE AREAS A: on light green, the lead practice area in a panel in the hero's deep navy (the lawyer's situation large, the button under it, the name and description beside) with two green blocks behind it, then the other three in a row, each with its name above its situation line. av_situation on each practice-area page holds the lines. */
.av-services-a{background:var(--av-ground)}
.av-services-title{font-size:clamp(34px,3.6vw,54px);max-width:22ch;margin-bottom:clamp(36px,4.5vw,64px)}
.av-when{font-family:var(--av-headline);font-weight:var(--av-headline-weight);letter-spacing:var(--av-headline-track);line-height:1.1;color:var(--av-navy)}
.av-service-name a{text-decoration:none}
.av-service-name a:hover{text-decoration:underline;text-decoration-thickness:2px}
.av-panel-wrap{position:relative;--av-block:24px}
/* Light-green blocks behind the panel, showing at the top left and bottom right [Dan 2026-10-10]. */
.av-panel-wrap::before,.av-panel-wrap::after{content:'';position:absolute;z-index:0;pointer-events:none;background:var(--av-green-light)}
.av-panel-wrap::before{top:calc(-1 * var(--av-block));left:calc(-1 * var(--av-block));width:46%;height:58%}
.av-panel-wrap::after{right:calc(-1 * var(--av-block));bottom:calc(-1 * var(--av-block));width:58%;height:52%}
/* Reveal, once, as each part scrolls into view [Dan 2026-10-10]: the panel settles up into place and the green blocks slide out from behind it (about 1.4 s); the three practice areas fade and rise when the row itself arrives (about 1 s, staggered). assets/js/reveal.js adds .is-in to the section (panel) and to the row; without JavaScript (no .av-js) or with reduced motion everything is simply shown. */
.av-js .av-services-a .av-situation-panel{transform:translateY(24px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.av-js .av-services-a .av-panel-wrap::before{transform:translate(var(--av-block),var(--av-block));transition:transform 1s cubic-bezier(.2,.7,.2,1) .4s}
.av-js .av-services-a .av-panel-wrap::after{transform:translate(calc(-1 * var(--av-block)),calc(-1 * var(--av-block)));transition:transform 1s cubic-bezier(.2,.7,.2,1) .55s}
.av-js .av-services-a.is-in .av-situation-panel,.av-js .av-services-a.is-in .av-panel-wrap::before,.av-js .av-services-a.is-in .av-panel-wrap::after{transform:none}
.av-js .av-situation-row .av-service{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.av-js .av-situation-row .av-service:nth-child(2){transition-delay:.18s}
.av-js .av-situation-row .av-service:nth-child(3){transition-delay:.36s}
.av-js .av-situation-row.is-in .av-service{opacity:1;transform:none}
.av-situation-panel{position:relative;z-index:1;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto 1fr;grid-template-areas:"when body" "button body";gap:32px clamp(32px,5vw,80px);align-items:start;padding:clamp(32px,5vw,64px);background:var(--av-hero-bg,var(--av-navy));color:#fff}
/* Clouds from the hero's dusk sky, greyed and soft-light at 70% over the deep navy, so they change its lightness and not its hue (the panel stays the hero's navy). Measured over every pixel of the sky image: the lightest possible backdrop leaves white at 9:1 and mist at 7:1. */
.av-situation-panel::before{content:'';position:absolute;inset:0;z-index:-1;background:url(assets/images/sky/hero-sky-dusk.webp) center/cover no-repeat;filter:grayscale(1);opacity:.7;mix-blend-mode:soft-light;pointer-events:none}
.av-situation-panel .av-when{grid-area:when;margin:0;font-size:clamp(34px,3.6vw,54px);line-height:1.05;max-width:13ch;color:#fff}
.av-panel-body{grid-area:body}
.av-situation-panel .av-service-name{font-size:clamp(22px,2vw,28px);color:#fff}
.av-panel-body p{margin-top:16px;font-size:clamp(18px,1.4vw,20px);line-height:1.55;max-width:40ch;color:var(--av-mist)}
.av-situation-panel .av-button{grid-area:button;justify-self:start;align-self:start}
.av-situation-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(28px,4vw,56px);margin-top:clamp(44px,5vw,72px)}
.av-situation-row .av-service-name{font-family:var(--av-display);font-size:clamp(18px,1.45vw,20px);font-weight:var(--av-ui-weight);letter-spacing:-.005em;line-height:1.3;color:var(--av-green-text)}
.av-situation-row .av-when{margin-top:12px;font-size:clamp(22px,1.9vw,27px);line-height:1.15}
.av-situation-row .av-service p:not(.av-when){margin-top:10px;font-size:17px;line-height:1.55;max-width:44ch}

/* HOME PRACTICE AREAS D: navy panel for the lead practice area, then three columns */

/* HOME ABOUT (shared): the portrait runs to the left edge and stays in view (sticky, viewport height) while the record beside it scrolls; the record sits in the page grid */
.av-about{background:#fff}
.av-about-grid{display:grid;grid-template-columns:minmax(var(--av-gutter),1fr) repeat(12,minmax(0,calc(var(--av-width) / 12))) minmax(var(--av-gutter),1fr)}
.av-about-photo{grid-column:1/7;align-self:start;position:sticky;top:var(--av-header-h);height:min(calc(100vh - var(--av-header-h)),100%)} /* sticks under the header, as the directory photo does [Dan 2026-10-11] */
.av-about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.av-about-body{grid-column:8/14;padding-block:var(--av-space)}
.av-about h2{font-size:clamp(36px,3.6vw,52px);letter-spacing:-.02em;max-width:22ch}
.av-nowrap{white-space:nowrap}
.av-about-intro{margin-top:28px;font-size:clamp(18px,1.45vw,20px);max-width:42ch}
.av-about-intro p+p{margin-top:16px}
/* Courts: where she is licensed, large, with her status under it; then the states she has appeared in, with theirs. */
.av-courts{margin-top:40px;font-size:clamp(18px,1.45vw,20px);line-height:1.5;max-width:40ch}
.av-courts strong{display:block;margin-bottom:4px;font-family:var(--av-headline);font-weight:var(--av-headline-weight);font-size:clamp(28px,2.4vw,34px);letter-spacing:var(--av-headline-track);line-height:1.1;color:var(--av-navy)}
.av-courts-others{display:block;margin-top:16px}
.av-courts-home-note,.av-courts-note{display:block;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:15px;line-height:1.5;color:var(--av-green-text)}
.av-courts-note{margin-top:8px}
.av-facts{margin-top:36px;border-top:1px solid var(--av-rule)}
.av-facts div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding-block:15px;border-bottom:1px solid var(--av-rule)}
.av-facts dt{padding-top:2px;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:15px;color:var(--av-green-text)}
.av-facts dd{font-size:17px;line-height:1.5}
.av-about .av-text-link{margin-top:30px}
/* Reveal, once, when the section scrolls into view [Dan 2026-10-10] (design A; reveal.js adds .is-in): the portrait slides in from the left edge, the heading and introduction rise after it, then the courts line, the credential rows and the link follow. Without JavaScript or with reduced motion everything is simply shown. */
.av-js .av-design-a .av-about-photo{opacity:0;transform:translateX(-72px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.av-js .av-design-a .av-about-body>:not(.av-facts),.av-js .av-design-a .av-facts>div{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.av-js .av-design-a .av-about-body>h2{transition-delay:.25s}
.av-js .av-design-a .av-about-body>.av-about-intro{transition-delay:.4s}
.av-js .av-design-a .av-about-body>.av-courts{transition-delay:.55s}
.av-js .av-design-a .av-about-body>.av-courts-note{transition-delay:.62s}
.av-js .av-design-a .av-facts>div:nth-child(1){transition-delay:.75s}
.av-js .av-design-a .av-facts>div:nth-child(2){transition-delay:.85s}
.av-js .av-design-a .av-facts>div:nth-child(3){transition-delay:.95s}
.av-js .av-design-a .av-facts>div:nth-child(4){transition-delay:1.05s}
.av-js .av-design-a .av-about-body>.av-text-link{transition-delay:1.15s}
.av-js .av-design-a .av-about.is-in .av-about-photo,.av-js .av-design-a .av-about.is-in .av-about-body>:not(.av-facts),.av-js .av-design-a .av-about.is-in .av-facts>div{opacity:1;transform:none}

/* WORKING WITH ASHLEY: on light green, four points (a green label and one sentence each) in a white panel beside the heading, with light-green blocks behind it mirroring the practice-areas panel (bottom left and top right). */
.av-working{background:var(--av-ground)}
.av-panel-wrap-light::before{top:auto;bottom:calc(-1 * var(--av-block));left:calc(-1 * var(--av-block));width:40%;height:50%}
.av-panel-wrap-light::after{bottom:auto;top:calc(-1 * var(--av-block));right:calc(-1 * var(--av-block));width:52%;height:46%}
.av-working-panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,5vw,80px);align-items:start;padding:clamp(32px,5vw,64px);background:#fff}
.av-working h2{font-size:clamp(36px,3.6vw,52px);letter-spacing:-.02em;max-width:10ch}
.av-working-text{font-size:clamp(18px,1.4vw,20px);line-height:1.55;max-width:48ch}
.av-working-text p+p{margin-top:16px}
.av-working-text+.av-points{margin-top:32px}
.av-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px clamp(28px,4vw,56px)}
.av-points dt{font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:clamp(18px,1.45vw,20px);line-height:1.3;color:var(--av-green-text)}
.av-points dd{margin-top:10px;font-size:clamp(18px,1.4vw,20px);line-height:1.55;max-width:34ch}
/* Reveal, once [Dan 2026-10-10] (design A; reveal.js adds .is-in to the section): the panel settles, the blocks slide out from behind it, the heading and points follow. */
.av-js .av-design-a .av-working-panel{transform:translateY(24px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.av-js .av-design-a .av-panel-wrap-light::before{transform:translate(var(--av-block),calc(-1 * var(--av-block)));transition:transform 1s cubic-bezier(.2,.7,.2,1) .4s}
.av-js .av-design-a .av-panel-wrap-light::after{transform:translate(calc(-1 * var(--av-block)),var(--av-block));transition:transform 1s cubic-bezier(.2,.7,.2,1) .55s}
.av-js .av-design-a .av-working h2,.av-js .av-design-a .av-working-text,.av-js .av-design-a .av-points>div{opacity:0;transform:translateY(16px);transition:opacity .7s ease .3s,transform .7s cubic-bezier(.2,.7,.2,1) .3s}
.av-js .av-design-a .av-points>div:nth-child(2){transition-delay:.45s}
.av-js .av-design-a .av-points>div:nth-child(3){transition-delay:.6s}
.av-js .av-design-a .av-points>div:nth-child(4){transition-delay:.75s}
.av-js .av-design-a .av-working.is-in .av-working-panel,.av-js .av-design-a .av-working.is-in .av-panel-wrap-light::before,.av-js .av-design-a .av-working.is-in .av-panel-wrap-light::after{transform:none}
.av-js .av-design-a .av-working.is-in h2,.av-js .av-design-a .av-working.is-in .av-working-text,.av-js .av-design-a .av-working.is-in .av-points>div{opacity:1;transform:none}

/* ABOUT PAGE (page-about-ashley.php) [Dan 2026-10-11]: a full-width hero from the page's featured image (the landscape frame: Ashley at the left, the shingled wall as copy space) with her name, title line, the email button and the phone over the wall; the header floats over it as on the homepage (header.php adds .av-header-over). A light navy shade sits behind the copy and under the header (the wall itself measures white at 10:1 or better). Then the biography beside the record (courts, credentials and the award) in a sticky rail; "What you can expect" as a panel on the green (it reuses the Working with Ashley panel, blocks and reveal) with a label on each point. Without a featured image the hero is the interior pages' navy band (.av-page-hero). */
.av-bio-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--av-navy-deep);color:#fff}
.av-under-header{margin-top:calc(-1 * var(--av-header-h))}
.av-bio-hero-photo{position:absolute;inset:0;z-index:0}
.av-bio-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.av-bio-hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(38,48,79,0) 45%,rgba(38,48,79,.32) 100%),linear-gradient(180deg,rgba(38,48,79,.3) 0%,rgba(38,48,79,0) 24%)}
.av-bio-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center;min-height:clamp(560px,50vw,780px);padding-block:calc(var(--av-header-h) + 32px) 56px}
.av-bio-hero-copy{grid-column:2}
.av-bio-hero h1{max-width:12ch;color:#fff;font-size:clamp(38px,4.6vw,68px);letter-spacing:-.025em;line-height:1.02}
.av-bio-hero-title{margin-top:14px;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:clamp(17px,1.3vw,20px);line-height:1.3;color:var(--av-green-light)}
.av-bio-hero .av-actions{margin-top:34px}
.av-bio-hero.av-page-hero .av-bio-hero-grid{grid-template-columns:1fr;min-height:0;padding-block:0}
.av-bio-hero.av-page-hero .av-bio-hero-copy{grid-column:1}
/* The biography at a reading measure with its first paragraph as the opener; the record in a rail beside it, each credential's label above its text. */
.av-bio-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);align-items:start}
.av-bio-text{max-width:68ch;font-size:19px;line-height:1.7}
.av-bio-text>p:first-child{font-size:clamp(20px,1.7vw,24px);line-height:1.5;color:var(--av-navy)}
.av-bio-more{padding-top:0}
.av-bio-aside{position:sticky;top:calc(var(--av-header-h) + 24px)}
.av-bio-aside .av-courts{margin-top:0}
.av-bio-aside .av-facts div{grid-template-columns:1fr;gap:3px}
/* Reveal, once (design A; reveal.js gives the section .is-in when the rail arrives): the courts block, its note and the credential rows rise in turn. */
.av-js .av-design-a .av-bio-aside>.av-courts,.av-js .av-design-a .av-bio-aside>.av-courts-note,.av-js .av-design-a .av-bio-aside .av-facts>div{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.av-js .av-design-a .av-bio-aside>.av-courts-note{transition-delay:.1s}
.av-js .av-design-a .av-bio-aside .av-facts>div:nth-child(1){transition-delay:.22s}
.av-js .av-design-a .av-bio-aside .av-facts>div:nth-child(2){transition-delay:.32s}
.av-js .av-design-a .av-bio-aside .av-facts>div:nth-child(3){transition-delay:.42s}
.av-js .av-design-a .av-bio-aside .av-facts>div:nth-child(4){transition-delay:.52s}
.av-js .av-design-a .av-bio.is-in .av-bio-aside>.av-courts,.av-js .av-design-a .av-bio.is-in .av-bio-aside>.av-courts-note,.av-js .av-design-a .av-bio.is-in .av-bio-aside .av-facts>div{opacity:1;transform:none}
/* What you can expect: each point opens with a label (a <strong> at the start of its list item in the editor), set like the homepage's Working with Ashley points; a nested list breaks a long point into short lines. */
.av-expect-panel{display:block}
.av-expect-panel h2{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.015em;max-width:none}
.av-expect-panel ul{list-style:none;margin:32px 0 0;padding:0;columns:2;column-gap:clamp(32px,4vw,64px)}
.av-expect-panel li{break-inside:avoid;margin:0 0 26px;font-size:17px;line-height:1.55;max-width:38ch}
.av-expect-panel li>strong:first-child{display:block;margin-bottom:5px;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:clamp(18px,1.45vw,20px);line-height:1.3;color:var(--av-green-text)}
.av-expect-panel li ul{columns:auto;margin:8px 0 0}
.av-expect-panel li li{position:relative;margin:0 0 7px;padding-left:18px;font-size:16px;line-height:1.5}
.av-expect-panel li li::before{content:'';position:absolute;left:0;top:.7em;width:9px;height:2px;background:var(--av-green)}
.av-js .av-design-a .av-expect-panel ul{opacity:0;transform:translateY(16px);transition:opacity .7s ease .45s,transform .7s cubic-bezier(.2,.7,.2,1) .45s}
.av-js .av-design-a .av-working.is-in .av-expect-panel ul{opacity:1;transform:none}

/* CONTACT BAND: the hero's deep navy with its greyed clouds, and the faint Mt. Tabor skyline along the bottom, so the page closes where it opened. The email and phone are the largest things in it. */
.av-contact-band{position:relative;isolation:isolate;overflow:hidden;background:var(--av-hero-bg,var(--av-navy));color:#fff;padding-block:clamp(64px,8vw,112px) calc(clamp(64px,8vw,112px) + clamp(90px,11vw,170px))}
.av-contact-band::before{content:'';position:absolute;inset:0;z-index:0;background:url(assets/images/sky/hero-sky-dusk.webp) center/cover no-repeat;filter:grayscale(1);opacity:.7;mix-blend-mode:soft-light;pointer-events:none}
.av-contact-band::after{content:'';position:absolute;left:0;right:0;bottom:0;z-index:0;height:clamp(150px,19vw,290px);background:url(assets/images/sky/hero-foreground-dusk-1280.webp) center 64%/cover no-repeat;opacity:.2;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%);mask-image:linear-gradient(to bottom,transparent,#000 45%);pointer-events:none}
/* With a contact photo (Firm details): the photo fills the band under a navy shade, darker behind the text; the clouds and skyline are off. Shade depths set from a pixel check of the licensed gatehouse photo (see implementation/services-variants-2026-10-10/qa.md). */
.av-contact-photo::before{background:linear-gradient(180deg,rgba(35,42,69,.9) 0%,rgba(35,42,69,.78) 55%,rgba(35,42,69,.45) 100%),var(--av-contact-photo) center/cover no-repeat;filter:none;opacity:1;mix-blend-mode:normal}
.av-contact-photo::after{display:none}
.av-contact-band>.av-container{position:relative;z-index:1}
.av-contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.av-contact-band h2{color:#fff;font-size:clamp(32px,3.4vw,50px);max-width:12ch}
.av-contact-lines{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px}
.av-contact-lines .av-contact-phone{font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:clamp(22px,2.4vw,34px);letter-spacing:-.015em;line-height:1.2;color:var(--av-green-light);text-decoration:none}
.av-contact-lines .av-contact-phone:hover,.av-contact-lines .av-contact-phone:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.av-contact-address{margin-top:30px;font-size:17px;color:var(--av-mist)}
.av-public-note{margin-top:36px;padding-top:22px;border-top:2px solid var(--av-green);font-size:16px;line-height:1.6;color:var(--av-mist);max-width:52ch}
/* Reveal, once, on the homepage [Dan 2026-10-10]: the heading, then the email and phone, then the address and the note. */
.av-js .home.av-design-a .av-contact-band h2,.av-js .home.av-design-a .av-contact-lines a,.av-js .home.av-design-a .av-contact-address,.av-js .home.av-design-a .av-public-note{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.av-js .home.av-design-a .av-contact-lines a:nth-child(1){transition-delay:.2s}
.av-js .home.av-design-a .av-contact-lines a:nth-child(2){transition-delay:.3s}
.av-js .home.av-design-a .av-contact-address{transition-delay:.45s}
.av-js .home.av-design-a .av-public-note{transition-delay:.55s}
.av-js .home.av-design-a .av-contact-band.is-in h2,.av-js .home.av-design-a .av-contact-band.is-in .av-contact-lines a,.av-js .home.av-design-a .av-contact-band.is-in .av-contact-address,.av-js .home.av-design-a .av-contact-band.is-in .av-public-note{opacity:1;transform:none}

/* FOOTER: one row across the container, Home, About, the logo, Practice Areas, Contact, with equal space between neighbours (Home at the left edge, Contact at the right) [Dan 2026-10-11]; a hairline; then the copyright, legal links when published, and a quiet credit. */
.av-footer{padding-block:32px 26px;background:var(--av-ground);font-family:var(--av-display);font-size:16px;color:var(--av-ink)}
.av-footer-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.av-footer-brand{display:block;width:104px}
.av-footer-brand img{width:104px;height:auto}
.av-footer-links a,.av-footer-legal a{font-weight:var(--av-ui-weight);color:var(--av-navy);text-decoration:none}
.av-footer-links a:hover,.av-footer-links a:focus-visible,.av-footer-legal a:hover,.av-footer-legal a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
.av-footer-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;margin-top:22px;padding-top:14px;border-top:1px solid var(--av-rule);font-size:13px;color:var(--av-green-text)}
.av-footer-copy a{color:inherit;text-decoration:none} /* the name links home [Dan 2026-10-12] */
.av-footer-copy a:hover,.av-footer-copy a:focus-visible{text-decoration:underline}
.av-footer-legal ul{list-style:none;margin:0;padding:0;display:flex;gap:8px 20px}
.av-footer-legal a{font-size:13px}
.av-footer-credit a{color:inherit;text-decoration:none} /* full strength: at 75% opacity the 13px credit measured 3.1:1 on the ground (axe, 2026-10-11); it is 5.35:1 now */
.av-footer-credit a:hover,.av-footer-credit a:focus-visible{text-decoration:underline}

/* INTERIOR PAGES */
.av-page-hero{background:var(--av-navy);color:#fff;padding-block:clamp(36px,5vw,72px) clamp(56px,7vw,96px)}
.av-page-hero h1{color:#fff;font-size:clamp(40px,5vw,72px);max-width:16ch}
.av-page-hero .av-lede{margin-top:22px;max-width:52ch;color:var(--av-mist)}
.av-page-layout{display:flex;gap:clamp(48px,8vw,140px);align-items:flex-start;padding-block:var(--av-space)}
.av-page-content{flex:1;min-width:0;max-width:68ch}
.av-prose{line-height:1.75}
.av-prose p{margin-bottom:22px}
.av-prose h2{font-size:clamp(28px,2.8vw,40px);margin:44px 0 20px}
.av-prose h3{font-size:24px;margin:30px 0 14px}
.av-prose ul{padding-left:22px;margin-bottom:22px}
.av-prose li{margin-bottom:10px;padding-left:4px}
.av-prose li::marker{color:var(--av-green-text)}
.av-prose a{color:var(--av-navy)}
/* Links in running text: on hover and keyboard focus they turn the darker green and the underline thickens (the nav and footer's 2px). The public note in the dark contact band goes white instead. */
.av-prose a,.av-expect-panel a,.av-contact-note a,.av-public-note a{transition:color .2s ease,text-decoration-thickness .2s ease}
.av-prose a:hover,.av-prose a:focus-visible,.av-expect-panel a:hover,.av-expect-panel a:focus-visible,.av-contact-note a:hover,.av-contact-note a:focus-visible{color:var(--av-green-text);text-decoration-thickness:2px}
.av-public-note a:hover,.av-public-note a:focus-visible{color:#fff;text-decoration-thickness:2px}
/* Practice-area pages [Dan 2026-10-12, two rounds]: no hero, no back link. The content column opens with the title and the situation line in navy; an h3 in the content is a green label over its list (the Contract page's grouped list), and a definition list with the class av-line-groups sets short lines under labels in two columns (Co-Counseling's states and case types). The aside is a panel on the light green with the light-green blocks behind it (the directory's device) holding three things [Dan 2026-10-12]: the seated rail portrait flush at the top (3:4, anchored to the top), one full-width Hire button, and the four as dash rows with arrows, the current page's without its arrow. Sticky under the header; 697px tall at 1440 so it fits beneath it. */
.av-service-layout{padding-top:clamp(40px,5vw,64px)}
.av-service-head{margin-bottom:clamp(36px,4vw,52px)}
.av-service-head h1{font-size:clamp(38px,4.2vw,58px);max-width:14ch}
.av-service-when{margin:16px 0 0;font-size:clamp(22px,2.1vw,30px);line-height:1.2;max-width:34ch}
.av-service-head .av-lede{margin:16px 0 0;font-size:clamp(18px,1.4vw,21px);color:var(--av-ink)}
/* Legal pages [Dan 2026-10-16, option C]: no title band. The title on white as on the practice-area pages, then each h2 section as a row (av_doc_rows): the heading at the left, its text beside it at a reading measure, a hairline above each row. Rows stack under 861px. */
.av-doc{padding-block:clamp(40px,5vw,64px) var(--av-space)}
.av-doc-head{margin-bottom:clamp(36px,4vw,52px)}
.av-doc-head h1{font-size:clamp(38px,4.2vw,58px);max-width:14ch}
.av-doc-head .av-lede{margin:16px 0 0;font-size:clamp(18px,1.4vw,21px);color:var(--av-ink);max-width:52ch}
.av-doc-lead{max-width:62ch;margin-bottom:clamp(28px,3vw,40px)}
.av-doc-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:12px clamp(32px,5vw,80px);padding-block:clamp(28px,3vw,36px) clamp(6px,1vw,14px);border-top:1px solid var(--av-rule)}
.av-doc-row h2{margin:0 0 22px;font-size:clamp(22px,1.9vw,26px);line-height:1.25;max-width:19ch;text-wrap:balance}
.av-doc-body{max-width:62ch}
/* STAGE STRIP [Dan 2026-10-15]: the homepage's case stages under the situation line, the stages this work touches lit (filled green dot, navy name) and the rest muted (hollow dot, grey name). Six across on the homepage rail's line when the column has room; under 540px of column, a compact grid with the dot before each name. */
.av-strip{--av-strip-gap:14px;container-type:inline-size;margin-top:clamp(26px,2.6vw,34px)}
.av-strip-label{margin:0 0 14px;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:15px;line-height:1.3;color:var(--av-green-text)}
.av-strip-list{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 var(--av-strip-gap);margin:0;padding:0;list-style:none}
.av-strip-list::before{content:'';position:absolute;left:0;right:0;top:5px;height:2px;background:var(--av-rule)}
.av-strip-list li{position:relative;margin:0;padding:22px 0 0;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:14.5px;line-height:1.3;letter-spacing:-.003em;color:#646b7d}
.av-strip-list li::before{content:'';position:absolute;left:0;top:0;z-index:1;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #8c93a8}
.av-strip-list li.is-on{color:var(--av-navy)}
.av-strip-list li.is-on::before{background:var(--av-green-text);border-color:var(--av-green-text)}
.av-strip-list li.is-joined::after{content:'';position:absolute;left:0;right:calc(-1 * var(--av-strip-gap));top:5px;height:2px;background:var(--av-green-text)}
@container (max-width:639px){.av-strip-list{--av-strip-gap:10px}.av-strip-list li{font-size:14px}} /* about 1024 wide: keeps "Strategy and" on one line */
@container (max-width:539px){.av-strip-list{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px 18px}.av-strip-list::before,.av-strip-list li.is-joined::after{display:none}.av-strip-list li{padding:0 0 0 20px}.av-strip-list li::before{top:.22em}}
.av-service-content h3{margin:30px 0 12px;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:clamp(18px,1.45vw,20px);letter-spacing:-.005em;line-height:1.3;color:var(--av-green-text)}
.av-service-content h2+h3{margin-top:0}
.av-line-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(28px,4vw,56px);margin:30px 0 34px}
.av-line-groups dt{margin-bottom:10px;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:clamp(18px,1.45vw,20px);letter-spacing:-.005em;line-height:1.3;color:var(--av-green-text)}
.av-line-groups dd{position:relative;margin:0 0 7px;padding-left:18px;font-size:17px;line-height:1.5}
.av-line-groups dd::before{content:'';position:absolute;left:0;top:.7em;width:9px;height:2px;background:var(--av-green)}
.av-service-aside{position:sticky;top:calc(var(--av-header-h) + 24px);width:300px;flex-shrink:0;margin-left:auto} /* at the container's right edge, so the blocks sit in the gutter */
.av-aside-panel{position:relative;z-index:1;background:var(--av-ground);padding-bottom:22px}
.av-aside-panel.av-no-photo{padding-top:22px}
.av-aside-photo{margin:0 0 22px}
.av-aside-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}
.av-aside-body{padding-inline:22px}
.av-aside-button{width:100%;justify-content:space-between;min-height:50px;padding:0 20px;font-size:15px}
.av-aside-nav{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--av-rule)}
.av-aside-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 12px;padding:12px 0;border-bottom:1px solid var(--av-rule);font-family:var(--av-display);font-size:15px;line-height:1.3;color:var(--av-navy);text-decoration:none;transition:color .2s}
.av-aside-row .av-entry-mark{align-self:center;width:14px;margin-top:0;font-size:15px}
.av-aside-row .av-entry-arrow svg{width:18px;height:18px}
.av-aside-row:hover{color:var(--av-navy-deep)}
.av-aside-row:hover .av-entry-arrow svg{transform:translateX(4px)}
.av-aside-row[aria-current]{font-weight:var(--av-ui-weight);color:var(--av-green-text)}
.av-aside-row[aria-current] .av-entry-mark{background:var(--av-green-text)}
.av-aside-row[aria-current] .av-entry-arrow{visibility:hidden}
/* PHOTO SECTION (the Practice areas directory and the Contact page) [Dan 2026-10-12, three rounds]: no title band. One section on the light green: the page's featured image fills the left; at the right, the H1, the editor content if any, then a white panel with the two light-green blocks behind it (the Working with Ashley device) holding hairline rows: a short green dash, the row's text, and a green arrow pinned at the right. On the directory a row is a practice area (the name as the link with the lawyer's situation line beneath; no descriptions, no numerals [Dan: a tell]); on Contact the rows are the email link, the phone and the address (no arrow), with the public note under the panel. Hover tints a linked row the light green and slides the arrow. The whole row is the click target (the link's ::after covers it). Fits a 1440 x 900 viewport under the header. */
.av-photo-section{background:var(--av-ground)}
.av-photo-grid{display:grid;grid-template-columns:minmax(var(--av-gutter),1fr) repeat(12,minmax(0,calc(var(--av-width) / 12))) minmax(var(--av-gutter),1fr)}
.av-photo-col{grid-column:1/6;position:relative;margin:0;min-height:560px}
.av-photo-col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.av-photo-body{grid-column:6/14;padding:clamp(56px,6vw,80px) 0 clamp(56px,6vw,80px) clamp(40px,5vw,72px)}
.av-photo-section:not(.av-has-photo) .av-photo-body{grid-column:2/14;padding-left:0}
.av-photo-head{margin-bottom:clamp(28px,3vw,40px)}
.av-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* the directory's H1 [Dan 2026-10-13]: off the page, in the outline */
.av-photo-head h1{font-size:clamp(30px,2.8vw,40px)}
.av-photo-head .av-lede{margin-top:14px;max-width:44ch;font-size:clamp(17px,1.35vw,19px);line-height:1.5}
.av-photo-intro{max-width:60ch;margin:-12px 0 32px}
.av-rows-panel{position:relative;z-index:1;background:#fff;padding:clamp(6px,.8vw,10px) clamp(22px,2.6vw,36px)}
.av-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 clamp(14px,1.8vw,24px);padding:clamp(18px,2vw,24px) clamp(12px,1.4vw,18px);margin-inline:calc(-1 * clamp(12px,1.4vw,18px));border-top:1px solid var(--av-rule);transition:background-color .2s}
.av-row:first-child{border-top:0}
.av-row:not(.av-row-static):hover{background:var(--av-green-tint)}
.av-row-static{grid-template-columns:auto minmax(0,1fr)}
html:not(.av-js) .av-row-email{display:none} /* the email link is built by email.js */
.av-entry-mark{align-self:start;width:20px;height:2px;margin-top:.55em;font-size:clamp(23px,2vw,28px);background:var(--av-green)}
.av-entry-name,.av-row-value{margin:0;font-family:var(--av-headline);font-weight:var(--av-headline-weight);letter-spacing:var(--av-headline-track);font-size:clamp(23px,2vw,28px);line-height:1.15;color:var(--av-navy)}
.av-row-address{font-family:var(--av-display);font-size:clamp(18px,1.5vw,21px);line-height:1.4;font-weight:var(--av-ui-weight);letter-spacing:-.005em}
/* Contact sits on white with the panel on the light green (the rail's palette), so the page ends where the green footer begins; the panel and its blocks get room above and below [Dan 2026-10-12]. */
.av-contact-page{background:#fff}
.av-contact-page .av-photo-intro{margin-bottom:0}
.av-contact-page .av-panel-wrap{margin-block:clamp(44px,4.5vw,60px) clamp(48px,5vw,64px)}
.av-contact-page .av-contact-note{margin-top:0}
.av-contact-page .av-rows-panel{background:var(--av-ground)}
.av-contact-page .av-row:not(.av-row-static):hover{background:#fff}
.av-contact-note{max-width:52ch;margin-top:36px;font-size:16px;line-height:1.6;color:var(--av-ink)}
.av-entry-link{color:var(--av-navy);text-decoration:none}
.av-entry-link::after{content:'';position:absolute;inset:0}
.av-entry-link:focus-visible{outline:none}
.av-entry-link:focus-visible::after{outline:3px solid var(--av-navy);outline-offset:-3px}
.av-row:hover .av-entry-link{color:var(--av-navy-deep)}
.av-entry-when{margin-top:4px;max-width:60ch;font-size:clamp(16px,1.2vw,17px);line-height:1.5;color:var(--av-ink)}
.av-entry-arrow{display:flex;color:var(--av-green-text)}
.av-entry-arrow svg{width:22px;height:22px;transition:transform .25s ease}
.av-row:hover .av-entry-arrow svg{transform:translateX(5px)}
/* Reveal, once (reveal.js gives the section .is-in): the photo arrives from the left edge, the heading rises, the panel settles up into place while the green blocks slide out from behind it, and the rows rise in turn; without JavaScript or with reduced motion everything is simply shown. */
.av-js .av-photo-col{opacity:0;transform:translateX(-72px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.av-js .av-photo-head,.av-js .av-photo-intro,.av-js .av-row{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.av-js .av-photo-head{transition-delay:.15s}
.av-js .av-photo-intro{transition-delay:.25s}
.av-js .av-rows-panel{opacity:0;transform:translateY(24px);transition:opacity .8s ease .25s,transform .9s cubic-bezier(.2,.7,.2,1) .25s}
.av-js .av-photo-section .av-panel-wrap::before{transform:translate(var(--av-block),var(--av-block));transition:transform 1s cubic-bezier(.2,.7,.2,1) .55s}
.av-js .av-photo-section .av-panel-wrap::after{transform:translate(calc(-1 * var(--av-block)),calc(-1 * var(--av-block)));transition:transform 1s cubic-bezier(.2,.7,.2,1) .7s}
.av-js .av-row:nth-child(1){transition-delay:.45s}
.av-js .av-row:nth-child(2){transition-delay:.57s}
.av-js .av-row:nth-child(3){transition-delay:.69s}
.av-js .av-row:nth-child(4){transition-delay:.81s}
.av-js .av-photo-section.is-in .av-photo-col,.av-js .av-photo-section.is-in .av-photo-head,.av-js .av-photo-section.is-in .av-photo-intro,.av-js .av-photo-section.is-in .av-rows-panel,.av-js .av-photo-section.is-in .av-row{opacity:1;transform:none}
.av-js .av-photo-section.is-in .av-panel-wrap::before,.av-js .av-photo-section.is-in .av-panel-wrap::after{transform:none}
main.av-container.av-section h1{font-size:clamp(40px,5vw,64px);margin-bottom:24px}


/* RESPONSIVE */
@media(max-width:1100px){
 .av-hero-a .av-hero-photo{--av-ph:calc(1183px - 34.5vw)}
 .av-rail{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}
 .av-rail::before{display:none}
 .av-rail>li{padding-top:22px;border-top:2px solid var(--av-green)}
 .av-rail>li::before{top:-8px}
 .av-service-aside{width:260px}
 .av-aside-body{padding-inline:18px}
 .av-bio-hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,3fr)}
}
@media(max-width:860px){
 .av-doc-row{grid-template-columns:1fr}
 .av-doc-row h2{max-width:none;margin-bottom:0}
 .av-header,.av-header-over{background:var(--av-navy)}
 .av-header.is-scrolled{background:#fff}
 .home .av-hero{margin-top:0}
 .av-header-inner{flex-wrap:wrap;gap:16px;padding-block:16px}
 .av-primary-menu a::after{display:none}
 .av-nav a:hover,.av-nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px}
 .av-header.is-scrolled .av-menu-toggle{color:var(--av-navy)}
 .av-header.is-scrolled .av-nav{border-top-color:rgba(62,74,117,.25)}
 .av-header.is-scrolled .av-nav a{border-bottom-color:rgba(62,74,117,.15)}
 .av-primary-menu>.menu-item-has-children>a{padding-right:0}
 .av-primary-menu>.menu-item-has-children>a::before{display:none}
 .av-primary-menu .sub-menu{position:static;min-width:0;padding:0 0 4px 18px;background:transparent;color:inherit;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
 .av-primary-menu .sub-menu a{padding:9px 0;font-size:15px;color:inherit;border-bottom:1px solid rgba(255,255,255,.1)}
 .av-primary-menu .sub-menu a:hover,.av-primary-menu .sub-menu a[aria-current]{background:none;text-decoration:underline}
 .av-header.is-scrolled .av-primary-menu .sub-menu a{border-bottom-color:rgba(62,74,117,.1)}
 .av-js .av-menu-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;color:#fff;font-family:var(--av-display);font-weight:var(--av-ui-weight);font-size:16px;cursor:pointer}
 .av-nav{width:100%;flex-direction:column;align-items:stretch;gap:0;font-size:18px;border-top:1px solid rgba(255,255,255,.25)}
 .av-primary-menu{flex-direction:column;gap:0}
 .av-nav a{padding-block:13px;border-bottom:1px solid rgba(255,255,255,.15)}
 .av-js .av-nav{display:none}
 .av-js .av-nav.av-open{display:flex}
 .av-hero-a{padding-top:0}
 .av-hero-photo{position:relative}
 .av-hero-a .av-hero-photo{--av-ph:calc(100vw / 1.5);height:auto;aspect-ratio:3/2;margin-bottom:28px}
 .av-hero-a .av-hero-photo::after{background:linear-gradient(180deg,rgba(35,42,69,0) 55%,var(--av-hero-bg) 100%)}
 .av-sky-strip{background-image:url(assets/images/sky/hero-sky-dusk-1024.webp)}
 [data-av-sky=day] .av-sky-strip{background-image:url(assets/images/sky/hero-sky-day-1024.webp)}
 [data-av-sky=dawn] .av-sky-strip{background-image:url(assets/images/sky/hero-sky-dawn-1024.webp)}
 [data-av-sky=night] .av-sky-strip{background-image:url(assets/images/sky/hero-sky-night-1024.webp)}
 .av-hero-head,.av-about-grid,.av-contact-grid{grid-template-columns:1fr}
 .av-hero-head{gap:24px}
 .av-stages{margin-top:clamp(48px,8vw,72px)}
 .av-situation-panel{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"when" "body" "button";gap:24px}
 .av-working-panel{grid-template-columns:1fr;gap:24px}
 .av-situation-row{grid-template-columns:1fr;gap:36px 0}
 .av-about-grid{display:block}
 .av-about-photo{position:static;height:auto}
 .av-about-photo img{position:static;height:auto;aspect-ratio:4/3;object-position:50% 25%}
 .av-about-body{padding:48px var(--av-gutter) var(--av-space)}
 .av-js .av-design-a .av-about-photo{transform:translateX(-24px)}
 .av-js .av-design-a .av-about.is-in .av-about-photo{transform:none}
 .av-page-layout{flex-direction:column;gap:48px}
 .av-service-aside{position:static;width:100%}
 .av-photo-grid{display:block}
 .av-photo-col{min-height:0}
 .av-photo-col img{position:static;height:auto;aspect-ratio:4/3;object-position:50% 15%}
 .av-photo-body{padding:40px var(--av-gutter) var(--av-space)}
 .av-js .av-photo-col{transform:translateX(-24px)}
 .av-js .av-photo-section.is-in .av-photo-col{transform:none}
 .av-under-header{margin-top:0}
 .av-bio-hero-photo{position:relative;aspect-ratio:4/3}
 .av-bio-hero-photo img{object-position:15% 50%}
 .av-bio-hero-photo::after{background:linear-gradient(180deg,rgba(38,48,79,0) 78%,rgba(38,48,79,.85) 100%)}
 .av-bio-hero-grid{grid-template-columns:1fr;min-height:0;padding-block:36px 52px}
 .av-bio-hero-copy{grid-column:1}
 .av-bio-layout{grid-template-columns:1fr;gap:52px}
 .av-bio-aside{position:static}
}
@media(max-width:640px){
 body{font-size:17px}
 .av-brand,.av-brand img{width:124px}
 .av-brand img{height:74px}
 .av-footer-links{justify-content:center;gap:10px 26px}
 .av-footer-brand-item{order:-1;flex-basis:100%;display:flex;justify-content:center;margin-bottom:6px}
 .av-footer-foot{justify-content:center;text-align:center}
 .av-hero h1{font-size:clamp(34px,10vw,46px)}
 .av-actions{margin-top:24px}
 .av-rail{grid-template-columns:1fr;gap:0;margin-top:24px;padding-left:28px}
 .av-rail::before{display:block;left:6px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
 .av-rail>li{padding:0 0 26px;border-top:0}
 .av-rail>li:last-child{padding-bottom:0}
 .av-rail>li::before{left:-28px;top:5px}
 .av-rail h3{font-size:18px}
 .av-rail ul{margin-top:6px}
 .av-rail ul li+li{margin-top:2px}
 .av-situation-panel{padding:28px var(--av-gutter)}
 .av-working-panel{padding:28px var(--av-gutter)}
 .av-points{grid-template-columns:1fr;gap:26px}
 .av-expect-panel ul{columns:1}
 .av-bio-hero-photo{aspect-ratio:4/5}
 .av-bio-hero-photo img{object-position:22% 50%}
 .av-bio-hero h1{font-size:clamp(34px,10vw,46px)}
 .av-contact-lines .av-contact-phone{font-size:22px}
 .av-panel-wrap{--av-block:12px}
 .av-situation-panel .av-when{font-size:clamp(30px,8.5vw,36px)}
 .av-service .av-when{font-size:22px}
 .av-about-photo img{aspect-ratio:1/1;object-position:50% 22%}
 .av-about h2{font-size:clamp(28px,7.7vw,34px)}
 .av-courts strong{font-size:26px}
 .av-facts div{grid-template-columns:1fr;gap:2px}
 .av-page-hero h1{font-size:clamp(36px,10vw,48px)}
 .av-service-head h1,.av-doc-head h1{font-size:clamp(34px,9.5vw,44px)}
 .av-service-when{font-size:clamp(21px,6vw,24px)}
 .av-photo-col img{aspect-ratio:1/1;object-position:50% 12%}
 .av-photo-head h1{font-size:clamp(30px,8.5vw,36px)}
 .av-rows-panel{padding-inline:var(--av-gutter)}
 .av-row{gap:0 14px;padding:18px 0;margin-inline:0}
 .av-entry-name,.av-row-value{font-size:clamp(21px,5.8vw,24px)}
 .av-row-address{font-size:18px}
 .av-entry-mark{width:14px;font-size:clamp(21px,5.8vw,24px)}
 .av-entry-arrow svg{width:18px;height:18px}
 .av-line-groups{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.av-sky-toggle{display:none}.av-js .av-services-a .av-situation-panel,.av-js .av-services-a .av-panel-wrap::before,.av-js .av-services-a .av-panel-wrap::after,.av-js .av-situation-row .av-service,.av-js .av-design-a .av-about-photo,.av-js .av-design-a .av-about-body>:not(.av-facts),.av-js .av-design-a .av-facts>div,.av-js .av-design-a .av-bio-aside>.av-courts,.av-js .av-design-a .av-bio-aside>.av-courts-note,.av-js .av-design-a .av-bio-aside .av-facts>div,.av-js .av-design-a .av-working-panel,.av-js .av-design-a .av-panel-wrap-light::before,.av-js .av-design-a .av-panel-wrap-light::after,.av-js .av-design-a .av-working h2,.av-js .av-design-a .av-working-text,.av-js .av-design-a .av-points>div,.av-js .av-design-a .av-expect-panel ul,.av-js .home.av-design-a .av-contact-band h2,.av-js .home.av-design-a .av-contact-lines a,.av-js .home.av-design-a .av-contact-address,.av-js .home.av-design-a .av-public-note,.av-js .av-photo-col,.av-js .av-photo-head,.av-js .av-photo-intro,.av-js .av-rows-panel,.av-js .av-photo-section .av-panel-wrap::before,.av-js .av-photo-section .av-panel-wrap::after,.av-js .av-row{opacity:1;transform:none}}