/* Our services: pick a service on the left and its panel on the right says what changes for the
   team, shows it in a small interface illustration, lists what we build, names the real projects
   behind it and opens the contact form with that service already chosen. Without script every
   panel is shown, one after another. */
.cap-section{padding:clamp(80px,9vw,140px) 0 clamp(80px,9vw,140px);background:var(--paper);color:var(--ink);scroll-margin-top:0}

/* Heading row: the title on the left, the promise and a way into the process on the right */
.cap-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:clamp(28px,5vw,96px);margin-bottom:clamp(44px,5vw,80px)}
.cap-eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3)}
.cap-intro h2{font-size:clamp(40px,4.6vw,68px);line-height:1.04;letter-spacing:-.05em;font-weight:600;margin-top:20px}
.cap-intro h2 span{color:var(--teal-ink)}
.cap-intro-side p{font-size:clamp(1.0625rem,.98rem + .35vw,1.25rem);line-height:1.5;color:var(--ink-2);max-width:40ch}
.cap-intro-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;font-weight:600;color:var(--ink);text-decoration:none}
.cap-intro-link span{transition:transform .3s var(--ease)}
.cap-intro-link:hover{text-decoration:underline;text-underline-offset:5px}
.cap-intro-link:hover span{transform:translate(2px,2px)}

/* Body: the menu of services beside the stage */
.cap-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.6vw,56px);align-items:start}
.cap-section:not(.cap-js) .cap-body{grid-template-columns:1fr}
.cap-menu{position:sticky;top:calc(var(--header-h) + 28px)}
.cap-tabs{display:grid;gap:6px}
.cap-tabs[hidden]{display:none}
.cap-tab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;width:100%;padding:22px 24px;border:0;border-radius:22px;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:background-color .35s var(--ease),transform .2s var(--ease)}
.cap-tab-name{grid-column:1;font-size:clamp(1.5rem,1.1rem + 1vw,2rem);font-weight:600;line-height:1.1;letter-spacing:-.035em;color:var(--ink-3);transition:color .35s var(--ease)}
.cap-tab-line{grid-column:1;margin-top:6px;font-size:var(--fs-small);line-height:1.4;color:var(--ink-3);transition:color .35s var(--ease)}
.cap-tab-go{grid-column:2;grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--teal-pale);color:var(--night);font-size:20px;opacity:0;transform:translateX(-10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cap-tab:hover .cap-tab-name{color:var(--ink)}
.cap-tab:active{transform:scale(.985)}
.cap-tab[aria-selected="true"]{background:var(--navy)}
.cap-tab[aria-selected="true"] .cap-tab-name{color:#fff}
.cap-tab[aria-selected="true"] .cap-tab-line{color:var(--on-dark-2)}
.cap-tab[aria-selected="true"] .cap-tab-go{opacity:1;transform:none}
.cap-tab:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px;border-radius:22px}
@media (hover:hover){.cap-tab[aria-selected="false"]:hover{background:rgba(19,69,92,.07)}}
.cap-support{margin-top:clamp(24px,3vw,40px);padding:0 24px;font-size:var(--fs-small);line-height:1.5;color:var(--ink-2);max-width:44ch}
.cap-support a{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.cap-support a:hover{text-decoration-color:currentColor}

/* The stage: with script, the panels share one cell so the stage keeps the tallest panel's height */
.cap-stage{display:grid;gap:20px;min-width:0}
.cap-js .cap-stage{gap:0}
.cap-js .cap-panel{grid-area:1 / 1;visibility:hidden;opacity:0}
.cap-js .cap-panel.is-active{visibility:visible;opacity:1}
.cap-panel{--panel-ink:#fff;--panel-text:#D3DEE3;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);min-width:0;padding:clamp(24px,3.4vw,48px);border-radius:clamp(24px,2.6vw,34px);background:var(--navy);color:var(--panel-ink)}
.cap-panel-name{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em;color:var(--teal-pale)}
.cap-js .cap-panel-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cap-outcome{font-size:clamp(1.75rem,1.2rem + 1.3vw,2.375rem);font-weight:600;line-height:1.1;letter-spacing:-.035em;color:#fff;max-width:19ch}
.cap-copy{font-size:var(--fs-body);line-height:1.5;color:var(--panel-text);max-width:54ch}
.cap-figure{margin:6px 0 0}
.cap-figure figcaption{margin-top:10px;font-size:13px;color:var(--on-dark-2)}

/* Interface illustrations: a light window on the navy field, readable at every width */
.cap-ui{background:#F2F8F8;color:var(--ink);border-radius:18px;padding:clamp(14px,1.8vw,22px);font-variant-numeric:tabular-nums}
.cap-ui-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;line-height:1.3}
.cap-ui-top strong{font-weight:600}
.cap-pill{flex-shrink:0;padding:4px 10px;border-radius:99px;background:#E1ECEC;color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap}
.cap-pill-ok{background:#D5EEE3;color:#185E45}

.cap-route{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:22px 0 20px;padding:0;list-style:none}
.cap-route::before,.cap-route::after{content:"";position:absolute;top:16px;left:12.5%;height:3px;border-radius:2px}
.cap-route::before{right:12.5%;background:#D3E2E3}
.cap-route::after{right:37.5%;background:var(--teal-ink);transform-origin:left center}
.cap-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;line-height:1.25;color:var(--ink-3);text-align:center}
.cap-node i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid #C5D7D8;background:#fff;font-size:14px;font-style:normal;font-weight:600}
.cap-done{color:var(--ink-2)}
.cap-done i{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.cap-done i::before,.cap-tick::before{content:"";width:11px;height:6px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.cap-tick{display:grid;place-items:center;width:16px;height:16px}
.cap-now{color:var(--ink);font-weight:600}
.cap-now i{border-color:var(--teal-ink);color:var(--teal-ink);box-shadow:0 0 0 6px rgba(29,108,116,.14)} /* taste-skill-ignore: interface fragment, current-step ring */
.cap-next{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px 20px;padding:12px 16px;border-radius:12px;background:#fff}
.cap-next-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--teal-soft);color:var(--teal-ink);font-weight:600}
.cap-next small,.cap-next-meta small{display:block;font-size:13px;color:var(--ink-3);line-height:1.3}
.cap-next strong{font-size:15px;font-weight:600;line-height:1.3}
.cap-next-meta b{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}

.cap-rota-grid{display:grid;grid-template-columns:72px repeat(7,minmax(0,1fr));gap:5px;margin-top:16px;align-items:center}
.cap-rota-grid>span{font-size:13px;color:var(--ink-3);text-align:center}
.cap-rota-grid>b{font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.cap-rota-grid>i{display:grid;place-items:center;height:32px;border-radius:8px;font-size:13px;font-style:normal;font-weight:600}
.cap-rota-grid .d{background:#CDE5E6;color:#1C565F}
.cap-rota-grid .n{background:#24505F;color:#E9F5F6}
.cap-rota-grid .o{background:#E6EEEE;color:#7D9799}
.cap-rota-grid .l{background:#F4DFAE;color:#6B4A00}
.cap-request{display:flex;align-items:center;gap:10px;margin-top:14px;padding:11px 14px;border-radius:12px;background:#fff;font-size:14px;color:var(--ink-2)}
.cap-request-dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:#D49A1A}
.cap-request-state{position:relative;display:grid;margin-left:auto}
.cap-request-state b{grid-area:1 / 1;padding:4px 10px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap;text-align:center}
.cap-wait{background:#F6E7C4;color:#6B4A00;opacity:0}
.cap-ok{background:#D5EEE3;color:#185E45}

.cap-search{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px var(--teal-ink);color:var(--teal-ink)} /* taste-skill-ignore: interface fragment, focused input */
.cap-search svg{flex-shrink:0}
.cap-query{overflow:hidden;white-space:nowrap;font-size:15px;color:var(--ink)}
.cap-caret{width:2px;height:18px;margin-left:-6px;background:var(--teal-ink)}
.cap-hit{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 14px;border-radius:12px;background:#fff}
.cap-hit>div{min-width:0}
.cap-hit strong{display:block;font-size:15px;font-weight:600;line-height:1.3}
.cap-hit small{display:block;font-size:13px;color:var(--ink-3);line-height:1.35}
.cap-hit .cap-pill{margin-left:auto}
.cap-doc{display:grid;align-content:center;gap:4px;flex-shrink:0;width:28px;height:34px;padding:0 6px;border-radius:6px;background:var(--teal-soft)}
.cap-doc i{display:block;height:2px;border-radius:1px;background:var(--teal-ink);opacity:.6}
.cap-doc i:last-child{width:60%}

.cap-flow{display:grid;grid-template-columns:minmax(0,.85fr) auto minmax(0,1.15fr);align-items:center;gap:14px}
.cap-records,.cap-report{padding:14px 16px;border-radius:12px;background:#fff}
.cap-record{display:flex;align-items:center;gap:9px;padding:9px 0 0;font-size:14px;color:var(--ink-2)}
.cap-record i{flex-shrink:0;width:9px;height:12px;border-radius:2px;background:var(--teal-soft)}
.cap-record b{margin-left:auto;color:var(--teal-ink)}
.cap-arrow{font-size:24px;color:var(--teal-ink)}
.cap-total{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px}
.cap-total strong{font-size:36px;font-weight:600;line-height:1;letter-spacing:-.04em}
.cap-total span{font-size:13px;color:var(--ink-3)}
.cap-bar{display:grid;grid-template-columns:52px minmax(0,1fr) 22px;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--ink-2)}
.cap-bar>i{display:block;height:10px;border-radius:5px;background:#E3EDED;overflow:hidden}
.cap-bar>i>i{display:block;height:100%;border-radius:5px;background:var(--teal);transform-origin:left center}
.cap-bar>b{text-align:right;font-weight:600}
.cap-bar-a>i>i{width:100%}.cap-bar-b>i>i{width:80%}.cap-bar-c>i>i{width:60%}

/* What we build, the projects behind it, and the next step */
.cap-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;margin-top:8px}
.cap-label{margin-bottom:10px;font-size:var(--fs-small);font-weight:600;color:var(--teal-pale)}
.cap-list,.cap-proof{margin:0;padding:0;list-style:none}
.cap-list li{position:relative;padding-left:26px;margin-top:8px;font-size:16px;line-height:1.4;color:#fff}
.cap-list li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;border-left:2px solid var(--teal-pale);border-bottom:2px solid var(--teal-pale);transform:rotate(-45deg)}
.cap-proof li{display:grid;gap:3px;margin-top:10px}
.cap-proof a,.cap-proof-name{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.cap-proof-name{text-decoration:none}
.cap-proof a:hover{text-decoration-color:currentColor}
.cap-proof a span{transition:transform .3s var(--ease)}
.cap-proof a:hover span{transform:translate(2px,-2px)}
.cap-proof li>span:last-child{font-size:14px;line-height:1.45;color:var(--panel-text)}
.cap-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;min-height:52px;margin-top:auto;padding:0 26px;border-radius:999px;background:var(--teal-pale);color:var(--night);font-size:var(--fs-body);font-weight:600;text-decoration:none;transition:background-color .3s var(--ease),transform .2s var(--ease)}
.cap-cta span{transition:transform .3s var(--ease)}
.cap-cta:hover{background:#fff}
.cap-cta:hover span{transform:translateX(3px)}
.cap-cta:active{transform:scale(.97)}
.cap-panel a:focus-visible{outline:3px solid var(--teal-pale);outline-offset:4px;border-radius:6px}
.cap-panel .cap-cta:focus-visible{border-radius:999px}

/* Motion: the section settles in once, a chosen panel rises in part by part, and its illustration
   acts out its moment. With reduced motion everything is shown in its finished state. */
@media (prefers-reduced-motion:no-preference){
  .cap-js .cap-intro>*,.cap-js .cap-tab,.cap-js .cap-support,.cap-js .cap-stage{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease),background-color .35s var(--ease)}
  .cap-js.is-seen .cap-intro>*,.cap-js.is-seen .cap-tab,.cap-js.is-seen .cap-support,.cap-js.is-seen .cap-stage{opacity:1;transform:none}
  .cap-js.is-seen .cap-intro>:nth-child(2){transition-delay:.08s}
  .cap-js.is-seen .cap-tab:nth-child(1){transition-delay:.14s}
  .cap-js.is-seen .cap-tab:nth-child(2){transition-delay:.2s}
  .cap-js.is-seen .cap-tab:nth-child(3){transition-delay:.26s}
  .cap-js.is-seen .cap-tab:nth-child(4){transition-delay:.32s}
  .cap-js.is-seen .cap-support{transition-delay:.4s}
  .cap-js.is-seen .cap-stage{transition-delay:.2s}
  .cap-js.is-seen .cap-tab:active{transform:scale(.985);transition-delay:0s}

  .cap-panel.is-entering>*{animation:cap-rise .6s var(--ease) both}
  .cap-panel.is-entering>.cap-copy{animation-delay:.06s}
  .cap-panel.is-entering>.cap-figure{animation-delay:.12s}
  .cap-panel.is-entering>.cap-detail{animation-delay:.18s}
  .cap-panel.is-entering>.cap-cta{animation-delay:.24s}

  .cap-panel.is-playing .cap-route::after{animation:cap-grow 1s .25s var(--ease) both}
  .cap-panel.is-playing .cap-node i{animation:cap-pop .45s var(--ease) both}
  .cap-panel.is-playing .cap-node:nth-child(2) i{animation-delay:.35s}
  .cap-panel.is-playing .cap-node:nth-child(3) i{animation-delay:.75s}
  .cap-panel.is-playing .cap-node:nth-child(4) i{animation-delay:.95s}
  .cap-panel.is-playing .cap-next{animation:cap-rise .6s 1s var(--ease) both}

  .cap-panel.is-playing .cap-rota-grid>i{animation:cap-pop .4s var(--ease) both}
  .cap-panel.is-playing .cap-rota-grid>i:nth-child(n+17){animation-delay:.08s}
  .cap-panel.is-playing .cap-rota-grid>i:nth-child(n+25){animation-delay:.16s}
  .cap-panel.is-playing .cap-rota-grid>i:nth-child(n+33){animation-delay:.24s}
  .cap-panel.is-playing .cap-request{animation:cap-rise .6s .5s var(--ease) both}
  .cap-panel.is-playing .cap-wait{animation:cap-hold 2.2s .5s both}
  .cap-panel.is-playing .cap-ok{animation:cap-show .4s 2.2s var(--ease) both}
  .cap-panel.is-playing .cap-rota-grid .l{animation:cap-pop .4s .16s var(--ease) both,cap-glow 1.2s 2.2s ease-out}

  .cap-panel.is-playing .cap-query{animation:cap-type 1.1s .3s steps(18,end) both}
  .cap-panel.is-playing .cap-hit{animation:cap-rise .55s 1.45s var(--ease) both}
  .cap-panel.is-playing .cap-hit-2{animation-delay:1.6s}
  .cap-panel.is-active .cap-caret{animation:cap-blink 1.1s steps(1,end) infinite}

  .cap-panel.is-playing .cap-record{animation:cap-rise .45s var(--ease) both}
  .cap-panel.is-playing .cap-record:nth-child(3){animation-delay:.12s}
  .cap-panel.is-playing .cap-record:nth-child(4){animation-delay:.24s}
  .cap-panel.is-playing .cap-arrow{animation:cap-nudge .6s .45s var(--ease) both}
  .cap-panel.is-playing .cap-bar>i>i{animation:cap-grow .9s .6s var(--ease) both}
  .cap-panel.is-playing .cap-bar-b>i>i{animation-delay:.72s}
  .cap-panel.is-playing .cap-bar-c>i>i{animation-delay:.84s}
}
@keyframes cap-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cap-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cap-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes cap-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes cap-blink{50%{opacity:0}}
@keyframes cap-nudge{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes cap-hold{0%,92%{opacity:1}100%{opacity:0}}
@keyframes cap-show{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes cap-glow{0%{box-shadow:0 0 0 0 rgba(212,154,26,.55)}100%{box-shadow:0 0 0 10px rgba(212,154,26,0)}} /* taste-skill-ignore: interface fragment, request pulse */

/* Tablet and phone: the services stack above the stage, and the support line closes the section */
@media (max-width:960px){
  .cap-intro{grid-template-columns:1fr;gap:20px}
  .cap-body{display:flex;flex-direction:column;gap:16px}
  .cap-menu{display:contents}
  .cap-tabs{order:1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap-stage{order:2;width:100%}
  .cap-support{order:3;padding:0;margin-top:12px}
  .cap-tab{padding:16px 18px;border-radius:18px;background:rgba(19,69,92,.06)}
  .cap-tab-name{font-size:1.25rem}
  .cap-tab-line{font-size:13px}
  .cap-tab-go{display:none}
  .cap-js .cap-panel{grid-area:auto}
  .cap-js .cap-panel:not(.is-active){display:none}
}
@media (max-width:640px){
  .cap-intro h2{font-size:clamp(34px,10vw,44px)}
  .cap-tabs{grid-template-columns:1fr 1fr;gap:8px}
  .cap-tab{padding:14px}
  .cap-tab-name{font-size:1.0625rem;letter-spacing:-.02em}
  .cap-tab-line{display:none}
  .cap-panel{padding:24px 20px 26px;border-radius:24px}
  .cap-detail{grid-template-columns:1fr;gap:18px}
  .cap-ui{padding:14px}
  .cap-node{font-size:12px}
  .cap-node i{width:30px;height:30px;font-size:13px}
  .cap-route::before,.cap-route::after{top:14px}
  .cap-next{grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;padding:10px 12px}
  .cap-next-meta:nth-of-type(2){display:none}
  .cap-rota-grid{grid-template-columns:56px repeat(7,minmax(0,1fr));gap:3px}
  .cap-rota-grid>b{font-size:12px}
  .cap-rota-grid>span{font-size:12px}
  .cap-rota-grid>i{height:28px;font-size:12px;border-radius:6px}
  .cap-request{font-size:13px;padding:10px 12px}
  .cap-hit .cap-pill{display:none}
  .cap-flow{grid-template-columns:1fr;gap:8px}
  .cap-arrow{justify-self:center;transform:rotate(90deg);font-size:20px;line-height:1}
  .cap-panel.is-playing .cap-arrow{animation:none}
}
@media (max-width:360px){.cap-tabs{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cap-tab,.cap-tab-go,.cap-cta,.cap-cta span,.cap-intro-link span,.cap-proof a span{transition:none}}