/* Vale & Ostrander — Swiss-grid law firm template
   Re-theme from the variables below. */
:root{
  --paper:#ffffff;
  --ink:#0a0a0a;
  --red:#e10600;        /* signal red: index bars, accents */
  --gray:#5c5c5c;       /* secondary text */
  --rule:#0a0a0a;       /* structural rules */
  --hair:#dcdcdc;       /* light dividers */
  --tint:#f3f3f1;       /* alt section bg */
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --max:1360px; --gap:24px; --pad:40px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.bar{display:block;width:calc((100% - 11*var(--gap))/12);min-width:40px;height:8px;background:var(--red)}
.label{font:600 13px/1.2 var(--font);letter-spacing:.02em;text-transform:none}
.small{font-size:14px;color:var(--gray)}

/* header */
header.site{border-bottom:2px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:30}
header.site .g{align-items:center;height:76px}
.brand{grid-column:1/5;text-decoration:none;font:600 22px/1 var(--font);letter-spacing:-.02em;display:flex;align-items:center;gap:12px}
.brand i{display:block;width:10px;height:30px;background:var(--red)}
.brand sup{font-size:11px;font-weight:600;letter-spacing:.08em;margin-left:2px;vertical-align:top}
nav.main{grid-column:6/13;display:flex;justify-content:flex-end;gap:36px;align-items:center}
nav.main a{text-decoration:none;font-weight:500;font-size:15px;padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-color:var(--red)}
nav.main a.cta{background:var(--ink);color:#fff;padding:12px 18px;border:0}
nav.main a.cta:hover{background:var(--red)}
.burger{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:220px;padding:18px 20px;font:500 16px/1 var(--font);text-decoration:none;background:var(--ink);color:#fff;border:2px solid var(--ink);cursor:pointer}
.btn::after{content:"→";font-size:18px}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* hero */
.hero{position:relative;padding:72px 0 0}
.cols{position:absolute;inset:0;pointer-events:none}
.cols .g{height:100%}
.cols span{border-left:1px solid #efefef;height:100%}
.cols span:last-child{border-right:1px solid #efefef}
.hero .wrap{position:relative}
.hero .meta{grid-column:1/13;display:flex;gap:24px;align-items:center;margin-bottom:44px}
.hero h1{grid-column:1/12;font-weight:600;font-size:clamp(48px,7.6vw,124px);line-height:.95;letter-spacing:-.045em}
.hero h1 span{color:var(--red)}
.hero .row{margin-top:64px;padding-top:24px;border-top:2px solid var(--rule);align-items:start}
.hero .facts{grid-column:1/4;display:grid;gap:6px}
.hero .lede{grid-column:5/9;font-size:20px;line-height:1.5}
.hero .actions{grid-column:10/13;display:grid;gap:12px}
.hero .actions .btn{width:100%}
.band{margin-top:72px;position:relative}
.band img{width:100%;height:520px;object-fit:cover;filter:grayscale(1) contrast(1.15)}
.band .cap{position:absolute;left:var(--pad);bottom:0;background:var(--paper);padding:20px 24px 0 0;max-width:520px}
.band .cap .bar{width:80px;margin-bottom:14px}

/* stats */
.stats{border-bottom:2px solid var(--rule)}
.stats .g>div{grid-column:span 3;padding:44px 0 40px;border-left:1px solid var(--hair);padding-left:24px}
.stats .g>div:first-child{border-left:0;padding-left:0}
.stats b{display:block;font-weight:600;font-size:clamp(44px,4.4vw,72px);line-height:1;letter-spacing:-.04em}
.stats b em{font-style:normal;color:var(--red)}

/* sections */
section{padding:120px 0}
.head{margin-bottom:64px;align-items:end}
.head .t{grid-column:1/8}
.head .t .bar{margin-bottom:28px}
.head h2{font-weight:600;font-size:clamp(36px,4.2vw,64px);line-height:1;letter-spacing:-.035em}
.head p{grid-column:9/13;color:var(--gray)}
.tint{background:var(--tint)}

/* practice list */
.plist{border-top:2px solid var(--rule)}
.prow{text-decoration:none;padding:30px 0;border-bottom:1px solid var(--hair);align-items:baseline;position:relative;transition:background .2s}
.prow::before{content:"";position:absolute;left:0;top:-1px;height:8px;width:0;background:var(--red);transition:width .35s}
.prow:hover::before,.prow:focus-visible::before{width:calc((100% - 11*var(--gap))/12)}
.prow .n{grid-column:1/2;font-weight:600;color:var(--red)}
.prow h3{grid-column:2/7;font-weight:500;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.02em;line-height:1.1}
.prow p{grid-column:7/12;color:var(--gray);font-size:16px}
.prow .arr{grid-column:12/13;justify-self:end;font-size:24px;transition:transform .2s}
.prow:hover .arr{transform:translateX(6px);color:var(--red)}

/* people */
.people{row-gap:56px}
.person{grid-column:span 3;text-decoration:none}
.person .ph{position:relative;overflow:hidden;background:#ddd}
.person img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.1);transition:transform .6s}
.person:hover img{transform:scale(1.03)}
.person .ph::after{content:"";position:absolute;left:0;bottom:0;height:8px;width:0;background:var(--red);transition:width .35s}
.person:hover .ph::after{width:100%}
.person h3{font-weight:600;font-size:21px;margin-top:18px;letter-spacing:-.01em}
.person p{color:var(--gray);font-size:15px;margin-top:2px}

/* results */
.results{border-top:2px solid var(--rule)}
.res{grid-column:span 4;padding:36px 24px 40px 0;border-bottom:1px solid var(--hair)}
.res b{display:block;font-weight:600;font-size:48px;letter-spacing:-.04em;line-height:1}
.res .k{display:inline-block;margin:18px 0 10px;font-weight:600;font-size:13px;background:var(--ink);color:#fff;padding:4px 8px}
.res p{color:var(--gray);font-size:16px;max-width:360px}
.disclaim{grid-column:1/13;margin-top:28px;font-size:13px;color:var(--gray)}

/* quote */
.quote{background:var(--ink);color:#fff}
.quote blockquote{grid-column:3/12;margin:0;font-weight:500;font-size:clamp(28px,3.2vw,48px);line-height:1.15;letter-spacing:-.025em}
.quote .bar{grid-column:1/2;width:100%;margin-top:14px}
.quote cite{grid-column:3/12;margin-top:32px;font-style:normal;color:#aaa;font-size:15px}

/* insights */
.ins{grid-column:span 4;text-decoration:none;border-top:2px solid var(--rule);padding-top:20px}
.ins .small{display:flex;justify-content:space-between}
.ins h3{font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-.015em;margin:16px 0 0}
.ins:hover h3{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:5px}

/* contact */
.contact .info{grid-column:1/5}
.contact .info h2{font-weight:600;font-size:clamp(36px,4vw,60px);letter-spacing:-.035em;line-height:1}
.contact .info dl{margin:40px 0 0;display:grid;gap:22px}
.contact .info dt{font-weight:600;font-size:13px}
.contact .info dd{margin:2px 0 0;color:var(--gray)}
form.consult{grid-column:6/13;display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;border-top:8px solid var(--red);padding-top:36px}
form.consult .full{grid-column:1/-1}
label{display:block;font-weight:600;font-size:13px;margin-bottom:8px}
input,select,textarea{width:100%;font:400 17px var(--font);color:var(--ink);background:var(--paper);border:0;border-bottom:2px solid var(--ink);padding:10px 0;border-radius:0}
textarea{min-height:120px;border:2px solid var(--ink);padding:12px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--gray)}
.check input{width:20px;height:20px;accent-color:var(--red);margin-top:2px}
.err{color:var(--red);font-size:13px;min-height:1em;margin-top:6px}
.ok{grid-column:1/-1;display:none;background:var(--ink);color:#fff;padding:28px}
.ok.show{display:block}

/* footer */
footer.site{background:var(--ink);color:#fff;padding:80px 0 32px}
footer.site .big{grid-column:1/8;font-weight:600;font-size:clamp(40px,5vw,80px);letter-spacing:-.045em;line-height:.95}
footer.site .big span{color:var(--red)}
footer.site .col{grid-column:span 2;font-size:15px;color:#bbb}
footer.site .col:nth-of-type(2){grid-column:9/11}
footer.site .col h4{color:#fff;font-size:13px;font-weight:600;margin-bottom:14px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer.site a{text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .base{grid-column:1/13;margin-top:72px;padding-top:20px;border-top:1px solid #333;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:#888}

/* inner pages */
.phead{padding:80px 0 56px;border-bottom:2px solid var(--rule);position:relative}
.phead .crumb{grid-column:1/13;font-size:14px;color:var(--gray);margin-bottom:40px}
.phead .crumb a{text-decoration:none}
.phead h1{grid-column:1/10;font-weight:600;font-size:clamp(48px,7vw,112px);letter-spacing:-.045em;line-height:.95}
.phead p{grid-column:1/7;margin-top:36px;font-size:20px}
.phead .bar{grid-column:1/2;width:100%;margin-bottom:28px}
.toc{position:sticky;top:100px;grid-column:1/4;align-self:start;border-top:2px solid var(--rule);padding-top:16px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:flex;gap:14px;text-decoration:none;padding:7px 0;font-size:15px;color:var(--gray)}
.toc a b{color:var(--red);font-weight:600;width:22px}
.toc a:hover,.toc a.on{color:var(--ink)}
.areas{grid-column:5/13}
.area{padding:0 0 72px;margin-bottom:72px;border-bottom:1px solid var(--hair);scroll-margin-top:110px}
.area:last-child{border-bottom:0;margin-bottom:0}
.area .bar{margin-bottom:24px;width:64px}
.area h2{font-weight:600;font-size:clamp(32px,3.4vw,48px);letter-spacing:-.03em;line-height:1.05}
.area>p{margin-top:20px;font-size:19px;max-width:720px}
.area .two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.area h4{font-size:13px;font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px}
.area ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--gray);font-size:16px}
.area ul li::before{content:"";display:inline-block;width:10px;height:2px;background:var(--red);vertical-align:middle;margin-right:12px}
.area .lead{margin-top:32px;display:flex;align-items:center;gap:16px;font-size:15px}
.area .lead img{width:56px;height:56px;object-fit:cover;filter:grayscale(1)}
.filters{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--ink);width:max-content;max-width:100%;margin-bottom:56px}
.filters button{background:var(--paper);border:0;border-right:2px solid var(--ink);padding:14px 20px;font:500 15px var(--font);cursor:pointer;color:var(--ink)}
.filters button:last-child{border-right:0}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff}
.person[hidden]{display:none}
.person details{margin-top:12px;border-top:1px solid var(--hair)}
.person summary{cursor:pointer;padding:10px 0;font-size:14px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.person summary::-webkit-details-marker{display:none}
.person summary::after{content:"+";color:var(--red);font-size:18px;line-height:1}
.person details[open] summary::after{content:"–"}
.person details p{font-size:15px;color:var(--gray);margin:0 0 8px}

@media (max-width:1100px){
  nav.main{gap:22px}
  .person{grid-column:span 4}
}
@media (max-width:900px){
  :root{--pad:24px;--gap:16px}
  nav.main{display:none}
  nav.main.open{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:2px solid var(--ink);padding:8px var(--pad) 24px}
  nav.main.open a{padding:16px 0;border-bottom:1px solid var(--hair);font-size:20px}
  nav.main.open a.cta{margin-top:16px;text-align:center;border:0}
  .burger{display:block;grid-column:12/13;justify-self:end;background:var(--ink);color:#fff;border:0;width:48px;height:48px;font:600 13px var(--font);cursor:pointer}
  .brand{grid-column:1/11}
  .hero h1{grid-column:1/13}
  .hero .facts,.hero .lede,.hero .actions,.head .t,.head p,.contact .info,form.consult,.prow p,footer.site .big,.phead h1,.phead p,.toc,.areas{grid-column:1/13}
  .hero .lede{margin:24px 0}
  .head p{margin-top:20px}
  .band img{height:360px}
  .stats .g>div{grid-column:span 6;border-left:0;padding-left:0;border-top:1px solid var(--hair)}
  .prow h3{grid-column:2/12}
  .prow p{grid-column:2/12;margin-top:8px}
  .prow .arr{grid-row:1}
  .person{grid-column:span 6}
  .res{grid-column:span 6}
  .quote blockquote,.quote cite{grid-column:1/13}
  .quote .bar{display:none}
  .ins{grid-column:1/13;margin-bottom:32px}
  .contact .info{margin-bottom:48px}
  footer.site .col,footer.site .col:nth-of-type(2){grid-column:span 6;margin-top:40px}
  .toc{position:static;margin-bottom:48px}
  section{padding:88px 0}
}
@media (max-width:560px){
  .hero{padding-top:48px}
  .hero .meta{flex-wrap:wrap;gap:12px;margin-bottom:28px}
  .person,.res{grid-column:1/13}
  form.consult{grid-template-columns:1fr}
  .area .two{grid-template-columns:1fr}
  footer.site .base{flex-direction:column}
  .band .cap{position:static;padding:20px 0 0}
  .btn{min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}