/* How We Work: a linked service diagram and five permanent cards. */
.hww-page { --engine-muted: #bac6d9; --engine-blue: #79afff; }
.hww-page ::selection { background: var(--cerulean); color: var(--white); }
.hww-page h1, .hww-page h2, .hww-page h3 { letter-spacing: -.015em; line-height: 1.12; }
.hww-page a { text-underline-offset: .22em; }
.engine { background: var(--presentation-bg); color: var(--paper); }
.engine-pin { max-width: 1440px; margin-inline: auto; padding: 3rem var(--gutter); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5%; }
.engine-heading h1 { font-size: clamp(2.7rem,4.6vw,4.4rem); max-width: 14ch; }
.engine-heading > p { font-size: 1.15rem; line-height: 1.55; max-width: 36ch; margin-top: 1.5rem; color: var(--engine-muted); }
.engine-heading .engine-instruction { font-size: 1rem; margin-top: 2rem; }
.engine-skip { display: inline-flex; gap: .75rem; align-items: center; color: var(--paper); min-height: 44px; margin-top: .5rem; }
.engine-skip:hover { color: var(--engine-blue); }
.engine-machine { min-width: 0; }
.engine-drawing { display: block; width: 100%; overflow: visible; }
.engine-mobile { display: none; }
.engine-wheel { cursor: pointer; outline: none; }
.engine-hit { fill: transparent; }
.engine-rotor { fill: #455671; transform-box: fill-box; transform-origin: center; transition: fill 180ms ease-out; }
.engine-wheel:hover .engine-rotor, .engine-wheel:focus .engine-rotor { fill: var(--cerulean); }
.engine-wheel text { fill: var(--white); stroke: var(--presentation-bg); stroke-width: 7px; paint-order: stroke; stroke-linejoin: round; font: 600 22px var(--font-body); pointer-events: none; }
.engine-focus { fill: none; stroke: var(--white); stroke-width: 2; opacity: 0; pointer-events: none; }
.engine-wheel:focus-visible .engine-focus { opacity: 1; }
.engine-return { stroke: #455671; stroke-width: 9; fill: none; }
.engine-centre > circle:first-child { fill: var(--paper); }
.engine-centre path { fill: none; stroke: var(--ink); stroke-width: 3; }
.engine-centre > circle:last-child { fill: var(--cerulean); }
.engine-pause { display: block; margin-left: auto; border: 0; background: none; color: var(--engine-muted); font-size: .9rem; padding: .65rem; min-height: 44px; text-decoration: underline; text-underline-offset: .25em; }
.engine-pause[hidden] { display: none; }
.engine-pause:hover { color: var(--white); }
.engine-running .engine-rotor { animation: engine-turn var(--duration) linear infinite; }
.engine-running .engine-wheel:nth-of-type(even) .engine-rotor { animation-direction: reverse; }
.engine-paused .engine-rotor, .engine-wheel:hover .engine-rotor, .engine-wheel:focus .engine-rotor { animation-play-state: paused; }
@keyframes engine-turn { to { transform: rotate(360deg); } }
.hww-services { background: var(--paper); padding-block: 4rem; scroll-margin-top: 85px; }
.service-card { scroll-margin-top: 95px; }
.hww-page .service-card h2 { font-size: var(--fs-h3); line-height: 1.15; margin-bottom: .75rem; }
.service-card .service-lead { color: var(--cerulean-700); font-weight: 600; margin-bottom: .8rem; }
.service-body { font-size: var(--fs-body); }
.service-body p + p { margin-top: .8rem; }
.service-card .service-handoff { margin-top: 1.25rem; color: var(--ink); }
.service-card:target, .service-card:focus { outline: 2px solid var(--cerulean); outline-offset: 4px; }
.hww-terms { background: color-mix(in srgb, var(--cerulean) 10%, var(--white)); color: var(--ink); scroll-margin-top: 85px; }
.hww-commitments { list-style: none; padding-block: 4rem; display: grid; gap: 2.5rem; }
.hww-commitment { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5%; }
.hww-page .hww-commitment h2 { font-size: clamp(1.5rem,2.3vw,2.1rem); line-height: 1.15; }
.hww-commitment p { font-size: var(--fs-body); line-height: 1.6; }
.hww-commitment p + p { margin-top: .8rem; }
@media (min-width: 760px) { .service-card:last-child { grid-column: 1 / -1; } .service-card:last-child .service-body { max-width: 76ch; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .service-card { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
 .service-card::before { transform-origin: left center; transition: transform 220ms var(--ease); }
 .service-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(26,31,46,.08); }
 .service-card:hover::before { transform: scaleX(1.6); }
}
.hww-questions { background: var(--white); padding-block: 5rem 6rem; }
.hww-questions-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 6%; }
.hww-questions h2 { font-size: clamp(2rem,3vw,3rem); }
.hww-faq details { background: var(--paper); margin-bottom: .7rem; padding: 1.25rem 1.5rem; }
.hww-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem; min-height: 35px; }
.hww-faq summary::-webkit-details-marker { display: none; }
.hww-faq summary span { width: 16px; height: 16px; position: relative; flex: 0 0 16px; }
.hww-faq summary span::before, .hww-faq summary span::after { content: ''; position: absolute; top: 7px; left: 0; width: 16px; height: 2px; background: currentColor; }
.hww-faq summary span::after { transform: rotate(90deg); }
.hww-faq details[open] summary span::after { transform: rotate(0); }
.hww-faq details p { margin-top: 1rem; font-size: 1rem; line-height: 1.7; }
.hww-faq summary:hover { color: var(--cerulean-700); }
.hww-page .cta { padding-block: 6rem; }
.hww-page .cta__heading { font-size: clamp(2.1rem,4vw,3.5rem); }
.hww-page .cta[data-reveal] { opacity: 1; transform: none; }

@media (min-width: 1500px) { .engine-pin { padding-inline: 5rem; } }
@media (max-width: 1000px) { .engine-pin { grid-template-columns: .9fr 1.1fr; gap: 3%; } .engine-heading h1 { font-size: clamp(2rem,4vw,2.6rem); } .engine-desktop .engine-wheel text { font-size: 30px; } }
@media (max-width: 700px) {
 .engine-pin { display: block; padding: 2rem 22px 1rem; }
 .engine-heading h1 { font-size: 2.4rem; max-width: 16ch; }
 .engine-heading h1 br { display: none; }
 .engine-heading > p { font-size: 1rem; margin-top: 1rem; }
 .engine-heading .engine-instruction { margin-top: 1.25rem; }
 .engine-machine { max-width: 440px; margin: 1.5rem auto 0; }
 .engine-desktop { display: none; }
 .engine-mobile { display: block; }
 .engine-wheel text { font-size: 26px; stroke-width: 6px; }
 .hww-services, .hww-commitments { padding-block: 2.5rem; }
 .hww-commitment { grid-template-columns: 1fr; gap: .8rem; }
 .hww-questions { padding-block: 3rem; }
 .hww-questions-layout { grid-template-columns: 1fr; gap: 2rem; }
 .hww-faq details { padding: 1rem; }
 .hww-faq summary { font-size: 1rem; }
 .hww-page .cta { padding-block: 4rem; }
}
@media (max-width: 360px) { .engine-heading h1 { font-size: 2rem; } }
@media (prefers-reduced-motion: reduce) { .engine-rotor { animation: none !important; transition: none; } }