/* Each service page opens in its card's colour: Workshops in Find it blue, Projects in Crack it plum */
.ip-sec.dark.ip-hero.tone-find { --tone: var(--ha-phase-mine); }
.ip-sec.dark.ip-hero.tone-solve { --tone: var(--ha-phase-solve); }
.ip-sec.dark.ip-hero:is(.tone-find, .tone-solve) { background: var(--tone); }
body.ha-inner main .ip-hero:is(.tone-find, .tone-solve) :is(h1, h1 .lead) { color: var(--ha-paper); }
.ip-hero:is(.tone-find, .tone-solve) .ip-lede { color: var(--ha-paper); }
.ip-hero:is(.tone-find, .tone-solve) .ip-btn:not(.fill) { --sq-fill: var(--tone); --sq-line: rgba(247, 241, 238, .55); }
.ip-hero:is(.tone-find, .tone-solve) .ip-hero-media { box-shadow: 0 2px 4px rgba(var(--ha-ink-rgb), .18), 0 36px 64px -30px rgba(var(--ha-ink-rgb), .7); }
.ip-hero:is(.tone-find, .tone-solve) .ip-cap { color: var(--ha-paper); }
/* Projects shows the website and app on devices, sitting straight on the plum */
.ip-hero .ip-hero-media.devices { aspect-ratio: 7 / 4; border-radius: 0; box-shadow: none; overflow: visible; }
.ip-hero .ip-hero-media.devices img { object-fit: contain; }
/* The same raised finish as the homepage cards */
.ip-media { box-shadow: 0 1px 2px rgba(var(--ha-ink-rgb), .08), 0 26px 50px -28px rgba(var(--ha-ink-rgb), .45); }
/* The day plan keeps its reserved height, but the days sit at the top instead of stretching to fill it */
.os-days { align-content: start; }