.work,.services .card{
  transition:border-color var(--duration-normal) var(--ease),
             box-shadow var(--duration-normal) var(--ease),
             transform var(--duration-normal) var(--ease);
}
.work:hover,.services .card:hover{
  border-color:var(--coral);
  box-shadow:var(--elev-2), 0 0 0 1px var(--coral-ghost);
  transform:translateY(-3px);
}
.work:focus-within{border-color:var(--line-bright)}

.btn{transition:transform var(--duration-fast) var(--ease),box-shadow var(--duration-normal) var(--ease),background var(--duration-normal) var(--ease),border-color var(--duration-normal) var(--ease)}
.btn-primary:hover{box-shadow:var(--glow-coral);transform:translateY(-1px)}
.btn-primary:active,.btn-ghost:active{transform:translateY(0) scale(.99)}
.btn-ghost:hover{border-color:var(--coral);color:var(--ink)}

.faq summary,.case summary{transition:color var(--duration-fast) var(--ease)}
.faq summary:hover,.case summary:hover{color:var(--coral)}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:3px}

.nav-links a:not(.nav-cta){position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--coral);transition:width var(--duration-normal) var(--ease)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active::after{width:100%}

.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:center;text-align:center;margin-top:clamp(2rem,4vw,3rem)}
.cta-row p{font-family:var(--display);font-weight:var(--w-semibold);font-size:var(--text-lg);color:var(--muted)}

.hero h1 .accent{text-shadow:0 0 30px oklch(64% 0.19 12 / .32)}
.btile--feature .btile-metric .n{text-shadow:0 0 34px oklch(64% 0.19 12 / .30)}

summary{cursor:pointer}

/* ── Theme toggle (Phase 10) ─────────────────────────────────── */
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
  border:1px solid var(--line-bright);border-radius:var(--r-pill);background:transparent;
  color:var(--muted);cursor:pointer;padding:0;
  transition:color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease),
             background var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease)}
.theme-toggle:hover{color:var(--ink);border-color:var(--coral);transform:translateY(-1px)}
.theme-toggle:active{transform:translateY(0) scale(.94)}
.theme-toggle svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-sun{display:none}
[data-theme="dark"] .theme-toggle .ic-sun{display:block}
[data-theme="dark"] .theme-toggle .ic-moon{display:none}
@media(prefers-reduced-motion:reduce){.theme-toggle:hover,.theme-toggle:active{transform:none}}
/* Narrow nav: only CTA + toggle remain (section links hidden ≤720px) — keep them tight so nothing clips at 320px. */
@media(max-width:720px){.nav-links{gap:.7rem}}
@media(max-width:520px){.brand{font-size:.98rem}.nav-cta{font-size:.7rem;padding:.55rem .85rem}}
@media(max-width:420px){.theme-toggle{width:36px;height:36px}}
/* Tiniest screens (≤374px): brand + full CTA + toggle can't coexist — drop the redundant nav CTA
   (hero + closing section keep prominent CTAs), keep brand + theme toggle. */
@media(max-width:374px){.nav-cta{display:none}}

@media(prefers-reduced-motion:reduce){
  .work,.services .card,.btn{transition:none}
  .work:hover,.services .card:hover,.btn-primary:hover,.btn-primary:active{transform:none}
}