/* Neutralise the original CSS entrance states; GSAP owns these now. */
html.js-ready.gs [data-portrait-in],
html.js-ready.gs [data-words] [data-w],
html.js-ready.gs [data-words] [data-chipi],
html.js-ready.gs [data-mask] [data-mask-in],
html.js-ready.gs [data-chat] [data-c1],
html.js-ready.gs [data-chat] [data-cmsg],
html.js-ready.gs [data-chat] [data-cb],
html.js-ready.gs [data-pop]{opacity:1;transform:none;transition:none}
html.js-ready.gs [data-hero-zoom],
html.js-ready.gs [data-hero-photo],
html.js-ready.gs [data-reveal]{opacity:1;transform:none}
html.js-ready.gs [data-clip]{clip-path:none;transition:none}
html.gs [data-rtrack]{transition:none}
/* ---- Revisions ---- */
/* Selected Work: keep the title inside the content margins */
@media (min-width:1024px){
  [data-work-h2] [data-mask-in]{font-size:min(clamp(3rem,6.6vw,7.5rem),calc((100vw - var(--sb-w) - var(--gutter) * 3) / 12.7))!important}
}
/* What I Do: centred title block */
#services > h2{text-align:center}
#services > span[data-reveal]:first-child{display:flex!important;width:fit-content;margin-left:auto!important;margin-right:auto!important}
/* What I Do: brand colours on hover */
[data-svc][data-wide][aria-labelledby="svc-1"]:hover,
[data-svc][data-wide][aria-labelledby="svc-1"]:focus{background:#21759B!important;color:#FFFFFF!important}
[data-svc][data-wide][aria-labelledby="svc-2"]:hover,
[data-svc][data-wide][aria-labelledby="svc-2"]:focus{background:#146EF5!important;color:#FFFFFF!important}
/* ---- Selected Work on touch / narrow screens ---- */
[data-hscroll][data-native]{--wc:min(440px,82vw)}
@media (max-width:767px){[data-hscroll][data-native]{--wc:min(340px,86vw)}}
[data-hscroll][data-native] [data-hs-track]{touch-action:pan-x pan-y!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-left:calc((100% - var(--wc)) / 2)!important;padding-right:calc((100% - var(--wc)) / 2)!important}
[data-hscroll][data-native] [data-wcard]{scroll-snap-align:center!important}
/* ---- What I Do: tech cards inside the sentence ---- */
#services > p[data-words]{margin-bottom:24px!important}
[data-tech]{position:relative;display:inline-flex}
[data-tech-btn]{appearance:none;-webkit-appearance:none;margin:0;padding:0;font:inherit;cursor:pointer;display:inline-grid;place-items:center;width:1.5em;height:1.05em;border-radius:999px;border:2px solid #17232B;color:#17232B;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
[data-tech-btn]:hover,[data-tech][data-open] [data-tech-btn]{transform:translate(-2px,-2px);box-shadow:3px 3px 0 #17232B}
[data-tech-btn]:focus-visible{outline:3px solid #094368;outline-offset:3px}
[data-tech-btn] svg{width:.62em;height:.62em;display:block;fill:currentColor}
[data-tech-card]{position:absolute;z-index:40;left:50%;top:calc(100% + 16px);width:min(340px,calc(100vw - 32px));margin-left:calc(min(340px,100vw - 32px) / -2);visibility:hidden;opacity:0;display:flex;flex-direction:column;gap:12px;padding:16px;text-align:left;white-space:normal;font:400 15px/1.5 var(--font-body);letter-spacing:0;color:#17232B;background:#FFFFFF;border:2px solid #17232B;border-radius:16px;box-shadow:6px 6px 0 #17232B;cursor:default}
[data-tech-card][data-up]{top:auto;bottom:calc(100% + 16px)}
[data-tech-card]::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
[data-tech-card][data-up]::before{top:auto;bottom:-18px}
[data-tech-arrow]{display:block;position:absolute;top:-9px;left:var(--ax,50%);width:14px;height:14px;margin-left:-7px;background:#FFFFFF;border:2px solid #17232B;border-right:0;border-bottom:0;transform:rotate(45deg)}
[data-tech-card][data-up] [data-tech-arrow]{top:auto;bottom:-9px;border:2px solid #17232B;border-left:0;border-top:0}
[data-tech-head]{display:flex;align-items:center;gap:12px}
[data-tech-logo]{flex:none;width:40px;height:40px;display:grid;place-items:center;border:2px solid #17232B;border-radius:10px;color:#FFFFFF}
[data-tech-logo] svg{width:22px;height:22px;display:block;fill:currentColor}
[data-tech-head] strong{font:800 20px/1.1 var(--font-display);letter-spacing:-0.02em}
[data-tech-list]{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
[data-tech-tag]{display:inline-block;padding:5px 10px;background:#EAF3F7;border:2px solid #17232B;border-radius:999px;font:600 12px/1.25 var(--font-body)}

/* ---- Process: text only on mobile and tablet ---- */
@media (max-width:1023px){[data-illo]{display:none!important}}

/* touch: taps pass through an open card, so the icons underneath stay tappable */
@media (hover:none){[data-tech-card]{pointer-events:none}}

/* Selected Work: card text left-aligned */
[data-wcard] h3,[data-wcard] p{text-align:left!important}
[data-wcard] [style*="justify-content:space-between"]{text-align:left!important;justify-content:space-between!important}

/* Process: mobile cleanup */
@media (max-width:767px){
#process{padding:48px 14px!important}
#process [data-timeline]{padding-left:42px!important}
#process [data-timeline],#process [data-timeline] *{text-align:left!important}
#process [data-step] [data-step-dot]{left:-42px!important;top:22px!important;width:30px!important;height:30px!important;font-size:12px!important}
#process [data-timeline]>div[aria-hidden]{left:14px!important}
#process [data-timeline]>[data-line-fill]{left:13px!important}
#process [data-step]{padding-bottom:28px!important}
#process [data-step-card]{padding:18px!important;gap:14px!important;box-shadow:4px 4px 0 #17232B!important;border-radius:16px!important}
#process [data-step-card] h3{font-size:28px!important;margin:0!important;align-self:stretch!important;width:100%!important}
#process [data-step-card] h3 span{margin-left:0!important}
#process [data-step-card]>div{align-items:stretch!important}
#process [data-step-card] p{font-size:15px!important;line-height:1.5!important}
}

[data-tech-desc]{display:block;margin:0;font:400 14px/1.45 var(--font-body);color:#3A464D}

/* Process: 40px outer margin top/bottom */
#process{margin-top:40px!important;margin-bottom:40px!important}

/* Process: step badges, tidy */
#process [data-step-card] span[style*="border-radius:999px"],#process [data-step-card] span[style*="border-radius: 999px"]{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-width:128px;padding:7px 12px!important;font:800 11px/1 var(--font-display)!important;letter-spacing:.09em!important;text-transform:uppercase;white-space:nowrap}
#process [data-step-card] [style*="gap:8px"],#process [data-step-card] [style*="gap: 8px"]{gap:10px!important}

/* Process mobile: body text left, title centered */
@media (max-width:767px){
#process [data-step-card] h3,#process [data-step-card] h3 span{text-align:center!important}
}

/* Reviews mobile: one card, centered, small peek on both sides */
@media (max-width:767px){
#reviews [role="region"]{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:4px 0 14px!important}
#reviews [data-rtrack]{--rw:calc(100vw - 64px)!important;margin-left:32px}
#reviews [data-rtrack] article{min-height:320px!important}
}

/* Process: pinned box on desktop (40px top/bottom gap, steps run inside, shrinks after step 4) */
@media (min-width:1024px){
#process{height:calc(100vh - 80px)!important;box-sizing:border-box!important;overflow:hidden!important;padding-top:48px!important;padding-bottom:48px!important;margin-top:0!important;margin-bottom:0!important}
.pin-spacer:has(>#process){margin-bottom:40px!important}
#services{margin-bottom:40px!important}
#process [data-stack]{height:100%!important}
#process [data-psticky]{position:relative!important;top:auto!important}
#process [data-tlwrap]{height:100%!important;overflow:hidden!important}
#process [data-tlinner]{will-change:transform}
}

/* What I Do (touch devices): centered popup with blurred backdrop */
[data-tech-overlay]{position:fixed;inset:0;z-index:9998;background:rgba(23,35,43,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .25s ease}
[data-tech-overlay][data-on]{opacity:1}
[data-tech-card][data-modal]{position:fixed!important;inset:0!important;margin:auto!important;width:min(340px,calc(100vw - 40px))!important;height:fit-content!important;max-height:calc(100dvh - 40px);overflow:auto;z-index:9999!important;pointer-events:auto!important}
[data-tech-card][data-modal]::before,[data-tech-card][data-modal] [data-tech-arrow]{display:none!important}
[data-tech-close]{display:none}
[data-tech-card][data-modal] [data-tech-close]{display:grid;place-items:center;position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;border:2px solid #17232B;border-radius:50%;background:#FFFFFF;color:#17232B;font:800 20px/1 var(--font-display);cursor:pointer}
[data-tech-card][data-modal] [data-tech-head]{padding-right:40px}
html[data-tech-lock]{overflow:hidden}

/* Process mobile: fix short paragraphs centering (step 3) and the break before "After launch" */
@media (max-width:767px){
#process [data-step-card] [style*="gap: 8px"],#process [data-step-card] [style*="gap:8px"]{align-items:stretch!important}
#process [data-step-card] p{align-self:stretch!important;margin-left:0!important;margin-right:0!important;width:auto!important}
#process [data-reveal][style*="margin-top: -48px"],#process [data-reveal][style*="margin-top:-48px"]{padding-left:42px!important;text-align:left!important}
#process [data-reveal][style*="margin-top: -48px"]>span[aria-hidden],#process [data-reveal][style*="margin-top:-48px"]>span[aria-hidden]{left:14px!important}
#process [data-reveal][style*="margin-top: -48px"] a,#process [data-reveal][style*="margin-top:-48px"] a{margin-left:-42px!important}
}

/* Selected Work: soft shadow + thin border so every website screen stays visible on any card background */
[data-wcard] img[data-device]{box-sizing:border-box;border:2px solid rgba(255,255,255,.72);border-radius:8px;box-shadow:0 0 0 1px rgba(23,35,43,.28),0 18px 36px -10px rgba(23,35,43,.45),0 6px 14px rgba(23,35,43,.22)}

/* Hero (desktop and up): bigger portrait (head stays where it was, the lower body runs off the bottom edge) and bigger tagline */
@media (min-width:1024px){
[data-hero-photo]{height:104%!important;bottom:-18%!important}
[data-hero] nav[aria-label="Hero"]{grid-template-columns:minmax(max-content,1fr) minmax(16px,calc(max(100svh,860px) * 1.04 * .709 + 32px)) minmax(max-content,1fr)!important}
[data-hero-center] [data-mask-in]{font-size:clamp(2.6rem,5.4vw,6.2rem)!important}
}