/* Aventure Law — built from the Figma design (1440 px frames). Soleil -> Figtree, Garamond -> EB Garamond. */
:root{
  --navy:#2c3950; --text:#f3f3f4; --paper:#f3f3f4; --ink:#000;
  --yellow:#fbf330; --teal:#23879b;
  --sans:'Figtree','Helvetica Neue',Arial,sans-serif;
  --serif:'EB Garamond',Garamond,Georgia,serif;
  --side:340px; --pad:124px; --colw:845px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--serif);font-size:20px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul{margin:0;padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--paper);color:var(--ink);padding:8px 14px;font-family:var(--sans);font-size:16px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* ---------- layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) var(--side);grid-template-areas:"main side";min-height:100vh}
.main{grid-area:main;display:flex;flex-direction:column;min-width:0;background:var(--navy) url(/assets/bg.jpg) center top/cover no-repeat;padding-top:100px}
.is-home .layout{background:var(--navy) url(/assets/bg.jpg) left top/cover no-repeat}
.is-home .main{background:none;padding-top:159px}
.col{padding:0 32px 0 var(--pad);max-width:calc(var(--pad) + var(--colw) + 32px)}
.col-foot{margin-top:auto;padding-top:120px;padding-bottom:64px}

/* ---------- side nav ---------- */
.side{grid-area:side;background:var(--paper);color:var(--ink)}
.is-home .side{background:none;color:var(--text)}
.side-in{position:sticky;top:0;padding:108px 0 40px 49px}
.logo{display:inline-block}
.logo img{width:220px;height:auto}
.menu{display:none}
.side nav{margin-top:50px;padding-left:40px}
.side nav li{line-height:22px}
.side nav li+li{margin-top:34px}
.side nav a{font-family:var(--sans);font-size:20px;line-height:22px;text-decoration:none;font-weight:400}
.side nav a[aria-current="page"]{font-weight:700}
.side nav a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--teal)}
.is-home .side nav a:hover{text-decoration-color:var(--yellow)}

/* ---------- shared type ---------- */
.h-page{font-family:var(--sans);font-size:35px;line-height:55px;color:var(--text)}
.h-bold{font-weight:700;font-size:40px}
.rule{width:156px;height:3px;border:0;background:var(--yellow);margin:0}

/* ---------- home ---------- */
.values{display:grid;grid-template-columns:repeat(3,252px);margin-left:18px}
.values li{position:relative;display:flex;flex-direction:column;align-items:center;font-family:var(--sans);font-size:20px;line-height:49px;letter-spacing:.05em;text-transform:uppercase}
.values li+li::before{content:"";position:absolute;left:0;top:8px;height:82px;width:3px;background:#fff}
.values img{width:42px;height:42px;object-fit:contain}
.lead{margin-top:40px;font-size:21px;line-height:32px}
.values+.sr+.lead{margin-top:40px}
.lead+.rule{margin-top:39px}
.rule+.lead{margin-top:32px}
.h-sec{font-family:var(--sans);font-size:35px;line-height:55px;margin-top:100px}
.areas h3{font-family:var(--sans);font-weight:700;font-size:25px;line-height:45px;color:#fff;margin-top:31px}
.areas h3:first-child{margin-top:5px}
.areas p{font-size:21px;line-height:33px}

/* ---------- about ---------- */
.about-intro{margin-top:10px;font-size:16px;line-height:31px}
.h-team{margin-top:62px}
.person{margin-top:6px}
.person+.person{margin-top:80px}
.person-head{display:flex;align-items:flex-end;gap:22px}
.photo{position:relative;margin:0;flex:none;width:152px}
.photo img{width:152px;height:188px;object-fit:cover;filter:none}
.photo::before,.photo::after{content:"";position:absolute;width:28px;height:23px;border:4px solid var(--teal)}
.photo::before{left:0;top:0;border-right:0;border-bottom:0}
.photo::after{right:0;bottom:0;border-left:0;border-top:0}
.person h3{display:inline-block;font-size:32px;line-height:45px;padding-bottom:2px;border-bottom:3px solid var(--yellow);color:#fff}
.role{font-family:var(--sans);font-weight:300;font-size:18px;line-height:30px;margin-top:2px}
.bio{margin-top:22px;font-size:16px;line-height:31px;text-align:justify;hyphens:auto}
.bio+.rule{margin-top:42px}
.rule+.bio{margin-top:22px}
.quals{display:grid;grid-template-columns:410px 1fr;margin:60px 0 0 61px}
.quals h4{font-family:var(--sans);font-size:24px;line-height:45px}
.quals ul{margin-top:2px}
.quals li{display:flex;flex-direction:column;margin-top:13px}
.quals li b{font-family:var(--sans);font-weight:400;font-size:16px;line-height:22px}
.quals li.strong b{font-weight:700}
.quals li span{font-size:13px;line-height:20px;opacity:.85}

/* ---------- practice areas ---------- */
.pa{margin-top:117px}
.pa-row+.pa-row{margin-top:80px}
.pa-row.is-open+.pa-row{margin-top:56px}
.pa-toggle{all:unset;display:flex;align-items:center;gap:0;cursor:pointer;font-family:var(--sans);font-size:28px;line-height:55px;color:var(--text)}
.pa-static .pa-toggle{cursor:default}
.pa-icon{position:relative;display:flex;align-items:center;justify-content:center;width:82px;height:67px;margin-right:50px;padding-bottom:10px;border-bottom:3px solid var(--text)}
.pa-icon img{width:46px;height:46px;object-fit:contain}
.pa-row.is-open .pa-icon,.pa-toggle:hover .pa-icon,.pa-toggle:focus-visible .pa-icon{border-bottom-color:var(--yellow)}
.chev{margin-left:20px;transition:transform .25s ease}
.pa-row.is-open .chev{transform:rotate(90deg)}
.pa-text{padding:6px 0 4px 132px;max-width:820px}
.pa-text p{font-size:20px;line-height:30px}

/* ---------- testimonials ---------- */
.cards{margin-top:35px;max-width:779px}
.card{border:1px solid var(--text);border-radius:24px;padding:26px 45px 30px}
.card+.card{margin-top:24px}
.card h2{font-family:var(--sans);font-weight:500;font-size:20px;line-height:28px;color:#fff}
.card-role{font-family:var(--sans);font-weight:300;font-size:11px;line-height:18px;padding-bottom:10px;width:156px;border-bottom:3px solid var(--yellow)}
.card blockquote{margin:12px 0 0}
.card blockquote p{font-size:14px;line-height:17px;text-align:justify}

/* ---------- contact ---------- */
.contact-intro{margin-top:10px;font-size:16px;line-height:26px}
.cform{position:relative;display:flex;flex-direction:column;gap:22px;margin-top:73px}
.cform label{display:block}
.cform input,.cform textarea{width:100%;font-family:var(--serif);font-size:20px;line-height:30px;color:var(--text);background:transparent;border:3px solid var(--text);border-radius:29.5px;padding:12px 46px;outline:none}
.cform textarea{height:186px;resize:vertical;border-radius:29.5px}
.cform ::placeholder{color:var(--text);opacity:.7}
.cform input:focus,.cform textarea:focus{border-color:var(--yellow)}
.cform button{align-self:center;margin-top:18px;width:274px;height:49px;border:0;border-radius:36.5px;background:var(--paper);color:var(--teal);font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:.04em;cursor:pointer}
.cform button:hover{background:#fff}
.cform button[disabled]{opacity:.6;cursor:wait}
.cform-status{text-align:center;font-size:16px;line-height:24px;min-height:24px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- footer ---------- */
.foot{max-width:839px;font-family:var(--sans);font-weight:300;font-size:11px;line-height:16px;color:var(--text)}
.foot-logo{width:180px;height:auto}
.foot-rule{height:1px;background:var(--teal);margin-top:18px}
.foot-row{display:flex;justify-content:space-between;gap:24px;margin-top:10px}
.foot-contact{display:flex;flex-direction:column;gap:6px}
.foot-contact a{text-decoration:none}
.foot-contact a:hover{text-decoration:underline}
.foot-contact > a,.foot-phones{display:flex;align-items:center;gap:15px}
.foot-contact img{width:17px;height:17px}
.foot-phones i{display:inline-block;width:1px;height:13px;background:var(--teal);margin:0 -4px}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.foot-social{display:flex;gap:12px}
.foot-social img{height:16px;width:auto}
.foot-cities{display:flex;gap:22px;letter-spacing:.04em}

/* ---------- responsive ---------- */
@media (max-width:1200px){:root{--pad:64px;--side:300px}}
@media (max-width:900px){
  :root{--pad:20px}
  body{font-size:18px}
  .layout{grid-template-columns:1fr;grid-template-areas:"side" "main"}
  .is-home .layout{background-position:center top}
  .side{position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(0,0,0,.08)}
  .is-home .side{background:rgba(44,57,80,.94);box-shadow:0 1px 0 rgba(255,255,255,.08)}
  .side-in{position:static;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:14px 20px}
  .logo img{width:170px}
  .menu{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;color:inherit}
  .menu span{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s}
  .side nav{display:none;width:100%;margin:6px 0 4px;padding-left:0}
  .side.open nav{display:block}
  .side nav li+li{margin-top:0}
  .side nav a{display:block;padding:12px 0;font-size:18px}
  .side.open .menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .side.open .menu span:nth-child(2){opacity:0}
  .side.open .menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .main,.is-home .main{padding-top:44px}
  .col{padding:0 20px}
  .col-foot{padding-top:80px;padding-bottom:40px}
  .h-page{font-size:30px;line-height:44px}
  .values{grid-template-columns:repeat(3,1fr);margin-left:0}
  .values li{font-size:13px;line-height:36px;letter-spacing:.03em}
  .values li+li::before{height:64px;width:2px}
  .lead,.areas p{font-size:18px;line-height:30px}
  .card blockquote p{text-align:left;font-size:15px;line-height:21px}
  .h-sec{margin-top:64px;font-size:30px}
  .areas h3{font-size:22px;line-height:36px}
  .person-head{align-items:flex-end;gap:16px}
  .photo,.photo img{width:110px}
  .photo img{height:136px}
  .person h3{font-size:26px;line-height:36px}
  .bio{text-align:left}
  .quals{grid-template-columns:1fr;gap:28px;margin:40px 0 0}
  .pa{margin-top:48px}
  .pa-row+.pa-row{margin-top:24px}
  .pa-toggle{font-size:21px;line-height:30px}
  .pa-icon{width:60px;height:56px;margin-right:20px;flex:none}
  .pa-icon img{width:38px;height:38px}
  .chev{width:30px;height:30px;margin-left:8px;flex:none}
  .pa-text{padding:12px 0 0 80px}
  .pa-text p{font-size:18px;line-height:28px}
  .card{padding:22px 22px 24px}
  .cform{margin-top:40px;gap:16px}
  .cform input,.cform textarea{padding:10px 24px;font-size:18px}
  .foot-row{flex-direction:column;align-items:flex-start}
  .foot-right{align-items:flex-start}
  .foot-cities{flex-wrap:wrap;gap:6px 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
