/* Photography leads the directory; colour supports the content. */
.expertise-overview-hero { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 85% 35%,#36563880,transparent 64%),var(--deep); padding-top:150px; }
.expertise-flow { position:absolute; z-index:-1; width:min(76vw,980px); right:-14%; top:-30%; color:#bdce7840; pointer-events:none; }
.expertise-flow svg { width:100%; animation:expertise-drift 21.666667s ease-in-out infinite alternate; }
@keyframes expertise-drift { from { transform:translateY(-2%) rotate(-8deg); } to { transform:translateY(6%) rotate(10deg); } }
.expertise-overview-hero h1 { font-size:clamp(40px,5.8vw,88px); margin-top:28px; }
.expertise-overview-hero h1 em { overflow-wrap:normal; }
.expertise-overview-intro { display:flex; margin:32px 0 44px; }
.expertise-overview-intro p { font-size:17px; }
.expertise-overview-intro a { display:inline-block; margin-top:25px; }
.expertise-overview-intro .button { display:inline-flex; margin-top:0; }
.expertise-jump-links a span { color:var(--yellow); }
.expertise-directory { background:var(--paper); }
.expertise-section-photo { margin:0 14px 52px 0; }
.expertise-card { position:relative; background:#edf1e7; border:0; border-top:3px solid #8ac326; transition:opacity .85s var(--ease) var(--reveal-delay,0ms),translate 1.1s var(--ease) var(--reveal-delay,0ms),transform .6s var(--ease),background .4s; }
.expertise-card h3 { margin-top:24px; }
.expertise-card-action { align-items:center; }
.expertise-card-action>span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--green); color:var(--yellow); }
.expertise-card:hover,.expertise-card:focus-visible { background:#e3ebd9; }
.expertise-card.reveal { opacity:1; transition:translate 1.1s var(--ease) var(--reveal-delay,0ms),transform .6s var(--ease),background .4s; }
.expertise-card.reveal.pending,.expertise-card.reveal.visible { opacity:1; }
.expertise-support-directory { background:var(--green); color:var(--paper); }
.expertise-support-directory h2 em,.expertise-support-directory .expertise-directory-heading .eyebrow { color:var(--yellow); }
.expertise-support-directory .expertise-directory-heading>p { color:#cfddd2; }
.expertise-support-directory .expertise-card { background:#f4f3e8; color:var(--ink); border-top-color:var(--yellow); }
.expertise-support-directory .expertise-card:hover { background:#e8eddc; }
.expertise-guidance { background:#f0f1e8; align-items:center; }
.expertise-team-photo { margin-bottom:40px; }
.expertise-team-photo figcaption { font-size:12px; color:var(--muted); margin-top:10px; }
.expertise-guidance aside { background:var(--paper); padding:40px; border:0; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .expertise-card:hover { transform:translateY(-5px); }
}
@media(max-width:800px) {
  .expertise-overview-hero { padding-top:135px; }
  .expertise-overview-intro { display:block; }
  .expertise-overview-intro .button { margin-top:24px; }
  .expertise-flow { width:150vw; right:-80%; top:-5%; opacity:.65; }
  .expertise-overview-hero h1 { font-size:clamp(32px,7.5vw,60px); }
  .expertise-guidance aside { padding:28px; }
}
/* Two moments in one image, with a coloured layer behind the frame. */
.photo-story { position:relative; }
.photo-frame { position:relative; isolation:isolate; display:block; padding:0; border:0; width:100%; text-align:left;  background:transparent; }
.photo-frame::before { content:""; position:absolute; z-index:-1; inset:14px -14px -14px 14px; border-radius:54px 8px 54px 8px; background:var(--green); opacity:1; transform:rotate(-.7deg); }
.photo-story-support .photo-frame::before { background:var(--yellow); transform:rotate(.7deg); }
.photo-window { position:relative; display:block; overflow:hidden; border-radius:54px 8px 54px 8px; height:clamp(320px,36vw,560px); }
.photo-window img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; opacity:1; }
.photo-window .photo-alternate { opacity:1; clip-path:inset(0 var(--swipe-hidden,100%) 0 0); }
.photo-scroll .photo-window::after { content:""; position:absolute; z-index:2; top:0; bottom:0; left:calc(100% - var(--swipe-hidden,100%)); width:3px; transform:translateX(-50%); background:var(--yellow); box-shadow:0 0 0 1px var(--green); pointer-events:none; visibility:hidden; }
.photo-scroll.is-swiping .photo-window::after { visibility:visible; }
.photo-story-support .photo-window { height:clamp(320px,36vw,560px); }
.photo-story-daniel { margin-right:14px; }
.photo-story-daniel .photo-window { height:auto; aspect-ratio:4/3; }
.photo-story-daniel .photo-window img { object-position:center 28%; }
.photo-story-daniel figcaption { margin-top:28px; }
@media(max-width:800px) {
  .photo-window { height:auto; aspect-ratio:4/3; border-radius:30px 6px; }
  .photo-story-support .photo-window { height:auto; aspect-ratio:4/3; }
  .photo-story-support .photo-window img { object-position:64% center; }
  .photo-frame::before { inset:10px -10px -10px 10px; border-radius:30px 6px; }
}
.motion-paused .expertise-flow svg { animation:none; }
.motion-paused .expertise-card,.motion-paused .photo-window img,.motion-paused .photo-frame::before { transition:none; transform:none; }
@media(prefers-reduced-motion:reduce) {
  .expertise-flow svg { animation:none; }
  .expertise-card,.photo-window img,.photo-frame::before { transition:none; transform:none; }
}