/* Components for the rebuilt agency pages. Uses tokens from cadig.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ice);color:var(--navy);font-size:1.0625rem;line-height:1.6}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.display{font-variation-settings:"wdth" 70;font-weight:800;line-height:.95;letter-spacing:-.01em;margin:0;text-wrap:balance}
.lede{font-size:1.2rem;color:var(--ink-soft);max-width:36rem;margin:0}
.textlink{font-weight:600;text-underline-offset:3px;color:var(--navy)}
.textlink:hover{color:var(--blue)}

.btn{display:inline-block;text-decoration:none;font-weight:600;padding:.85rem 1.3rem;border-radius:3px;border:2px solid var(--navy);color:var(--navy)}
.btn-solid{background:var(--navy);color:var(--white)}
.btn-solid:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}
.actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* hero */
.hero{padding:clamp(3.5rem,8vw,6.5rem) 0 0}
.hero h1{font-size:clamp(3.4rem,9.5vw,8.6rem);max-width:11ch}
.hero-lede{display:grid;grid-template-columns:minmax(0,34rem) auto;gap:2rem;align-items:end;justify-content:space-between;margin-top:2.25rem}
.page-top{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,3.5rem);border-bottom:10px solid var(--blue);background:var(--ice)}
.page-top h1{font-size:clamp(2.9rem,7vw,6rem);max-width:14ch}
.page-top .lede{margin-top:1.5rem}
.crumb{display:inline-block;margin-bottom:1.1rem;font-size:.95rem;color:var(--steel);text-decoration:none}
.crumb:hover{color:var(--blue)}

/* roster */
.roster{background:var(--navy)}
.hero .roster{margin-top:clamp(3rem,6vw,4.5rem);border-top:10px solid var(--blue)}
.roster ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.roster li{border-right:1px solid rgba(255,255,255,.12)}
.roster li:last-child{border-right:0}
.roster a{display:block;text-decoration:none;color:var(--white);height:100%}
.portrait{background:var(--blue);aspect-ratio:4/5;overflow:hidden;max-width:100%}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(1.04);mix-blend-mode:multiply;transition:filter .35s ease}
.roster a:hover .portrait img,.roster a:focus-visible .portrait img{filter:none;mix-blend-mode:normal}
.who{padding:1rem 1.1rem 1.4rem}
.who strong{display:block;font-variation-settings:"wdth" 75;font-weight:750;font-size:1.3rem;line-height:1.15}
.who span{display:block;margin-top:.35rem;font-size:.92rem;line-height:1.45;color:#B9C7D4}
.who em{display:block;margin-top:.8rem;font-style:normal;font-size:.9rem;font-weight:600;color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* blocks */
section.block{padding:clamp(4rem,8vw,6.5rem) 0}
section.block.tight{padding-top:clamp(2.5rem,5vw,3.5rem)}
.block h2{font-size:clamp(2.4rem,5vw,3.9rem);max-width:16ch}
.white{background:var(--white)}
.intro{display:grid;grid-template-columns:5fr 6fr;gap:3rem;align-items:start}
.intro p{margin:0;color:var(--ink-soft);max-width:36rem}
.intro p+p{margin-top:1rem}

.services{margin:3rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.services li{padding:1.75rem 2rem 1.9rem 0;border-bottom:1px solid var(--rule)}
.services li:nth-child(odd){border-right:1px solid var(--rule)}
.services li:nth-child(even){padding-left:2rem}
.services h3{margin:0 0 .4rem;font-size:1.35rem;font-weight:700;font-variation-settings:"wdth" 85}
.services p{margin:0;color:var(--steel)}
.services ul{margin:.8rem 0 0;padding-left:1.1rem;color:var(--steel)}
.services ul li{padding:0;border:0!important;margin:.2rem 0}

.steps{margin:3rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:step}
.steps>li{counter-increment:step;border-top:3px solid var(--navy);padding-top:1.1rem}
.steps>li::before{content:counter(step);display:block;font-variation-settings:"wdth" 70;font-weight:800;font-size:2.6rem;line-height:1;color:var(--blue);margin-bottom:.6rem}
.steps h3{margin:0 0 .35rem;font-size:1.2rem;font-weight:700}
.steps p{margin:0;color:var(--steel);font-size:.98rem}

.work{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.work a{display:block;background:var(--ice);padding:2rem;text-decoration:none;transition:background .2s}
.white .work a{background:var(--white)}
.work a:hover{background:var(--white)}
.white .work a:hover{background:var(--ice)}
.work .kind{font-size:.88rem;color:var(--blue-deep);font-weight:600}
.work h3{margin:.3rem 0 .5rem;font-size:1.7rem;font-variation-settings:"wdth" 75;font-weight:750;line-height:1.1}
.work p{margin:0;color:var(--steel)}
.work .go{display:inline-block;margin-top:1rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--navy)}

.clients{margin-top:2.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.clients h3{margin:0 0 .35rem;font-size:1.15rem;font-weight:700}
.clients p{margin:0;color:var(--steel);font-size:.98rem}

.notice{margin-top:2.5rem;padding:1.25rem 1.5rem;border-left:4px solid var(--blue);background:var(--white);color:var(--ink-soft);max-width:48rem}
.notice strong{color:var(--navy)}

/* contact */
.contact{background:var(--navy);color:var(--white)}
.contact .intro p{color:var(--on-navy)}
.contact h2{color:var(--white)}
.people{margin:2.5rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.15)}
.people li{padding:1.2rem 1.25rem 1.3rem 0;border-bottom:1px solid rgba(255,255,255,.15);min-width:0}
.people strong{display:block;font-weight:700}
.people small{display:block;color:#8EA0B1;font-size:.88rem;margin-top:.1rem}
.people a{display:block;color:var(--on-navy);text-decoration:none;font-size:.95rem;margin-top:.2rem;overflow-wrap:anywhere}
.people a:hover{color:var(--white);text-decoration:underline}

/* contact page: light version of the people list */
.directory{margin:2.5rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:0;border-top:1px solid var(--rule)}
.directory li{display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:start;padding:1.4rem 1.5rem 1.4rem 0;border-bottom:1px solid var(--rule);min-width:0}
.directory img{width:72px;height:90px;object-fit:cover;border-radius:2px}
.directory strong{display:block;font-size:1.15rem;font-variation-settings:"wdth" 80}
.directory small{display:block;color:var(--steel);font-size:.9rem;margin:.1rem 0 .4rem}
.directory a{display:block;font-size:.95rem;color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.directory a:hover{color:var(--blue);text-decoration:underline}
.checklist{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.75rem;max-width:40rem}
.checklist li{padding-left:1.6rem;position:relative;color:var(--ink-soft)}
.checklist li::before{content:"";position:absolute;left:0;top:.62em;width:.9rem;height:3px;background:var(--blue)}

/* team page */
.team-list{margin:0;padding:0;list-style:none}
.team-list>li{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid var(--rule)}
.team-list>li:first-child{padding-top:0}
.team-list .portrait{border-radius:2px}
.team-list h2{font-size:clamp(2.2rem,4vw,3.2rem);max-width:none}
.team-list .role{margin:.5rem 0 1rem;color:var(--blue-deep);font-weight:600}
.team-list p{margin:0 0 1rem;color:var(--ink-soft);max-width:40rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.25rem;padding:0;list-style:none}
.tags li{font-size:.85rem;padding:.3rem .65rem;border:1px solid var(--rule);border-radius:2px;color:var(--ink-soft);background:var(--white)}

/* profile */
.profile-top{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,4.5rem);border-bottom:10px solid var(--blue)}
.profile-grid{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.profile-photo{aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--navy);border-radius:2px}
.profile-photo img{width:100%;height:100%;object-fit:cover}
.profile-top h1{font-size:clamp(3rem,7vw,5.6rem)}
.profile-top .role{margin:.75rem 0 1.5rem;color:var(--blue-deep);font-weight:600;font-size:1.1rem}
.profile-top .bio p{margin:0 0 1rem;color:var(--ink-soft);max-width:40rem;font-size:1.1rem}
.reach{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.25rem;font-weight:600}
.reach a{text-decoration:none;color:var(--navy);border-bottom:2px solid var(--blue);padding-bottom:1px;overflow-wrap:anywhere}
.reach a:hover{color:var(--blue)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.facts h2{font-size:1.4rem;font-variation-settings:"wdth" 85;font-weight:700;line-height:1.2;margin:0 0 .6rem;max-width:none}
.facts p{margin:0;color:var(--steel)}
.facts a{display:inline-block;margin-top:.75rem}
.looks{margin:2rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;border-top:1px solid var(--rule)}
.looks li{padding:1rem 0 1rem 1.6rem;border-bottom:1px solid var(--rule);position:relative;color:var(--ink-soft)}
.looks li::before{content:"";position:absolute;left:0;top:1.62em;width:.9rem;height:3px;background:var(--blue)}
blockquote.pull{margin:3rem 0 0;padding:0 0 0 1.5rem;border-left:4px solid var(--blue);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;font-variation-settings:"wdth" 85;font-weight:600;max-width:46rem}
blockquote.pull cite{display:block;margin-top:.75rem;font-size:1rem;font-style:normal;font-weight:500;color:var(--steel)}
.questions{margin:2rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem}
.questions li{padding:1rem 0;border-top:1px solid var(--rule);color:var(--ink-soft)}
.layers{margin:2.5rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.layers li{background:var(--white);padding:1.4rem}
.layers h3{margin:0 0 .4rem;font-size:1.15rem;font-weight:700}
.layers p{margin:0;color:var(--steel);font-size:.95rem}
.roster ul.others{grid-template-columns:repeat(4,1fr)}

/* responsive */
@media (max-width:960px){
  .roster>ul{grid-template-columns:repeat(5,minmax(11rem,1fr));overflow-x:auto;scroll-snap-type:x mandatory}
  .roster li{scroll-snap-align:start}
  .roster ul.others{grid-template-columns:repeat(4,minmax(11rem,1fr));overflow-x:auto}
  .intro{grid-template-columns:1fr;gap:1.25rem}
  .steps,.layers{grid-template-columns:1fr 1fr}
  .clients{grid-template-columns:1fr 1fr}
  .people{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr;gap:1.75rem}
}
@media (max-width:760px){
  .hero-lede{grid-template-columns:1fr}
  .services,.looks,.questions{grid-template-columns:1fr}
  .services li:nth-child(odd){border-right:0}
  .services li:nth-child(even){padding-left:0}
  .work{grid-template-columns:1fr}
  .steps,.clients,.layers,.people{grid-template-columns:1fr}
  .profile-grid,.team-list>li{grid-template-columns:1fr}
  .profile-photo{max-width:340px}
  .team-list .portrait{max-width:300px}
}