#expertises *{box-sizing:border-box} #expertises h2.ex-family{font-size:1.4em;line-height:1.25;margin:2em 0 .8em;padding:.1em 0 .1em .7em;border-left:5px solid var(--ex-accent)} #expertises .ex-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px} #expertises .ex-grid li{margin:0;padding:0;list-style:none} #expertises .ex-card{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;text-align:left;text-transform:none;letter-spacing:normal;font-family:inherit;font-size:1em;line-height:1.3;color:var(--ex-ink);background:#fff;border:1px solid var(--ex-line);border-top:5px solid var(--ex-accent);border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:0 1px 3px rgba(31,45,61,.12);transition:box-shadow .15s ease,transform .15s ease} #expertises .ex-card:hover{box-shadow:0 6px 16px rgba(31,45,61,.2);transform:translateY(-2px)} #expertises .ex-card:hover .ex-name{color:var(--ex-accent);text-decoration:underline} #expertises .ex-card:focus-visible{outline:3px solid var(--ex-accent);outline-offset:3px} #expertises .ex-thumb{display:block;aspect-ratio:4/3;background-color:var(--ex-tint);background-image:var(--img,none);background-size:cover;background-position:center} #expertises .ex-name{display:block;padding:.8em .9em .9em;font-weight:700;font-size:1.05em;line-height:1.3} #expertises .ex-pop{width:min(740px,92vw);max-height:86vh;margin:auto;padding:0;border:0;border-radius:10px;background:#fff;color:var(--ex-ink);overflow:auto;box-shadow:0 10px 40px rgba(20,33,61,.35)} #expertises .ex-pop::backdrop{background:rgba(20,33,61,.6)} #expertises .ex-pop-head{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:1em;padding:1em 1.3em;background:#fff;border-top:6px solid var(--ex-accent);border-bottom:1px solid var(--ex-line)} #expertises .ex-pop-head h3{margin:0;font-size:1.35em;line-height:1.25} #expertises .ex-close{flex:none;width:44px;height:44px;margin:-4px -8px 0 0;padding:0;font-family:inherit;font-size:2em;line-height:1;text-transform:none;color:var(--ex-ink);background:#fff;border:1px solid var(--ex-line);border-radius:50%;cursor:pointer;box-shadow:none} #expertises .ex-close:hover{border-color:var(--ex-accent);color:var(--ex-accent)} #expertises .ex-close:focus-visible{outline:3px solid var(--ex-accent);outline-offset:2px} #expertises .ex-pop-body{padding:1.1em 1.3em 1.6em;line-height:1.6;max-width:70ch} #expertises .ex-pop-body p{margin:0 0 .8em} #expertises .ex-fig{margin:1em 0} #expertises .ex-fig img{max-width:100%;height:auto} #expertises .ex-pillar{margin:1.2em 0;padding-left:.9em;border-left:4px solid var(--ex-accent)} #expertises .ex-pillar h4{margin:0 0 .3em;font-size:1.1em;color:var(--ex-accent)} #expertises .ex-more{display:inline-block;margin-top:.6em;font-weight:700;color:var(--ex-accent);text-decoration:underline} @media (prefers-reduced-motion:reduce){ #expertises .ex-card{transition:none} #expertises .ex-card:hover{transform:none} } @media (prefers-reduced-motion:no-preference){ #expertises .ex-pop:popover-open{animation:ex-in .18s ease-out} @keyframes ex-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} }