/* R3 owner-approved polish (docs/OWNER-POLISH-R3.md): arrow-free CTAs,
   purposeful motion, and the current-work showcase. Loaded after the V3 and
   sitewide styles on every public page.
   Guardrails: content is fully visible without JS; any "hidden before
   reveal" state only exists under html.motion-ok, which motion.js adds after
   its observer is running; focus always reveals; reduced motion removes all
   of it. The measured sticky stack/panel wrappers are never animated; only
   inner visuals move. Reveals use the individual `translate` property so
   they never fight hover `transform` lifts. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--reveal-distance:28px}

/* ---- Arrow-free CTAs: the gap that used to separate a glyph is gone. ---- */
.button{gap:10px;align-items:center;justify-content:center;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s,color .35s}
.button:hover,.button:focus-visible{transform:translateY(-2px);box-shadow:0 14px 32px #2457f540}
body:not(.subpage) .button:hover,body:not(.subpage) .button:focus-visible{background:#ffffff;box-shadow:0 14px 34px #b4caff33}
.subpage .button:hover,.subpage .button:focus-visible{background:#3b6bff}
.button:active{transform:translateY(0);transition-duration:.1s}

/* Text links: an underline that draws in replaces the decorative arrow. */
.text-link,.textlink,.work-case{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease),color .3s}
.text-link{border-bottom-color:transparent;background-size:100% 1px}
.text-link:hover,.text-link:focus-visible{background-size:0 1px;animation:bt-underline .6s var(--ease) forwards}
.textlink,.work-case{text-decoration:none!important;padding-bottom:2px}
.textlink:hover,.textlink:focus-visible,.work-case:hover,.work-case:focus-visible{background-size:100% 1px}
@keyframes bt-underline{from{background-size:0 1px}to{background-size:100% 1px}}

/* Header navigation feedback (layout-neutral). */
.navigation nav>a:not(:last-child){background:linear-gradient(#a9c0ff,#a9c0ff) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size .4s var(--ease),color .3s}
.navigation nav>a:not(:last-child):hover,.navigation nav>a:not(:last-child):focus-visible{background-size:100% 1px;color:#fff}
.navigation nav>a:last-child{transition:background-color .3s,border-color .3s,color .3s}
.navigation nav>a:last-child:hover,.navigation nav>a:last-child:focus-visible{background:#f4f7ff;color:#10234b;border-color:#f4f7ff}

/* Cards, price cards, service cards: lift and edge light on hover/focus. */
.subpage .card,body:not(.subpage) #services .card,body:not(.subpage) #pricing .card{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.subpage .card:hover,.subpage .card:focus-within,body:not(.subpage) #services .card:hover,body:not(.subpage) #services .card:focus-visible,body:not(.subpage) #pricing .card:hover{transform:translateY(-5px);box-shadow:0 22px 48px #03081866;border-color:#7f9cff}
.subpage details:not(.navigation):not(.services-menu)>summary{transition:color .3s}
.subpage details:not(.navigation):not(.services-menu)>summary:hover{color:#a9c0ff}
.subpage form input,.subpage form textarea,.subpage form select{transition:border-color .25s,box-shadow .25s}
.subpage form input:focus,.subpage form textarea:focus,.subpage form select:focus{box-shadow:0 0 0 4px #2457f526}

/* Homepage stack: inner visuals only (the sticky panel wrappers stay still). */
.project picture,.editorial-screen picture{display:block}
.subpage .editorial-screen img{height:auto;aspect-ratio:16/10}
.project img{transition:transform 1.4s var(--ease)}
.project:hover img{transform:scale(1.03)}
.workspace{transition:box-shadow .5s var(--ease)}
.workspace:hover{box-shadow:0 28px 70px #0006}

/* ---- Coordinated entrances (CSS only: run once, never hide content). ---- */
@keyframes bt-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:none}}
@keyframes bt-rise-soft{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes bt-visual-in{from{opacity:0;translate:0 40px;scale:.96}to{opacity:1;translate:none;scale:1}}
body:not(.subpage) .hero>.eyebrow,body:not(.subpage) .hero h1,body:not(.subpage) .hero-bottom .intro,body:not(.subpage) .hero-bottom .actions,body:not(.subpage) .hero-bottom .index{animation:bt-rise 1s var(--ease) both}
body:not(.subpage) .hero>.eyebrow{animation-delay:.05s}
body:not(.subpage) .hero h1{animation-delay:.15s}
body:not(.subpage) .hero h1 em{display:inline-block;animation:bt-rise 1.1s var(--ease) .35s both}
body:not(.subpage) .hero-bottom .intro{animation-delay:.45s}
body:not(.subpage) .hero-bottom .actions{animation-delay:.6s}
body:not(.subpage) .hero-bottom .index{animation-delay:.75s}
/* Form pages: only Contact's copy column enters; the form itself and the
   Get Started wizard (#get-started) stay completely static. */
.subpage .hero>div:first-child>*,.subpage #contact.formpage>div>*{animation:bt-rise .95s var(--ease) both}
.subpage .hero>div:first-child>:nth-child(2),.subpage #contact.formpage>div>:nth-child(2){animation-delay:.1s}
.subpage .hero>div:first-child>:nth-child(3),.subpage #contact.formpage>div>:nth-child(3){animation-delay:.22s}
.subpage .hero>div:first-child>:nth-child(n+4),.subpage #contact.formpage>div>:nth-child(n+4){animation-delay:.34s}
.subpage .hero>:nth-child(2){animation:bt-visual-in 1.2s var(--ease) .3s both}
/* While the first-visit intro overlay is up, hold the entrance until it clears. */
html.intro-active .hero *,html.intro-active .hero>*,html.intro-active #contact.formpage>div>*{animation-play-state:paused!important}

/* ---- Scroll reveals (motion.js marks targets and adds .is-in once). ---- */
html.motion-ok [data-reveal]{opacity:0;translate:0 var(--reveal-distance);transition:opacity .8s var(--ease) calc(var(--i,0) * 90ms),translate .95s var(--ease) calc(var(--i,0) * 90ms)}
html.motion-ok [data-reveal].is-in,html.motion-ok [data-reveal]:focus-within{opacity:1;translate:none}

/* ---- Current work showcase (homepage + /work/). ---- */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.works{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:120px 5vw 60px;color:#c1cce0}
.works-head{max-width:780px;margin-bottom:64px}
.works-head h2{font-size:clamp(40px,5.2vw,78px);font-weight:400;letter-spacing:-.06em;line-height:1;color:#f4f7ff;margin:18px 0 22px}
.works-lede{color:#b6c3dc;font-size:16px;line-height:1.7;max-width:620px;margin:0}
.works-list{list-style:none;margin:0;padding:0;display:grid;gap:130px}
.work-item{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:center}
.work-item:nth-child(even) .work-visual{order:2}
.work-visual{position:relative;padding:0 0 44px;perspective:1400px}
.frame-desktop{margin:0;border-radius:14px;overflow:hidden;background:#0d1b35;border:1px solid #3d5078;box-shadow:0 40px 90px #000a;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.frame-bar{display:flex;align-items:center;gap:14px;height:34px;padding:0 14px;background:#101f3c;border-bottom:1px solid #2c3d61}
.frame-dots{flex:none;width:44px;height:10px;background:radial-gradient(circle at 5px 5px,#6f7f9e 3.5px,transparent 4px),radial-gradient(circle at 21px 5px,#6f7f9e 3.5px,transparent 4px),radial-gradient(circle at 37px 5px,#6f7f9e 3.5px,transparent 4px)}
.frame-url{flex:1;max-width:340px;margin:0 auto;padding:4px 14px;border-radius:20px;background:#0a1630;color:#9fb0d0;font-size:11px;letter-spacing:.03em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-screen{overflow:hidden;background:#e9edf4}
.frame-screen picture,.frame-screen img{display:block;width:100%;height:auto}
.frame-screen img{transform-origin:50% 0;transition:transform 1.6s var(--ease)}
.frame-phone{position:absolute;right:-22px;bottom:0;width:21%;min-width:118px;margin:0;padding:7px;border-radius:26px;background:#0a1224;border:1px solid #4b5f88;box-shadow:0 30px 60px #000c;transition:transform .8s var(--ease)}
.frame-phone .frame-screen{border-radius:19px}
.work-item:nth-child(even) .frame-phone{right:auto;left:-22px}
.work-item:hover .frame-desktop,.work-item:focus-within .frame-desktop{transform:translateY(-6px);box-shadow:0 52px 110px #000c}
.work-item:hover .frame-desktop img{transform:scale(1.025)}
.work-item:hover .frame-phone,.work-item:focus-within .frame-phone{transform:translateY(-14px) rotate(-1.5deg)}
.work-item:nth-child(even):hover .frame-phone,.work-item:nth-child(even):focus-within .frame-phone{transform:translateY(-14px) rotate(1.5deg)}
html.motion-ok .work-visual.is-in .frame-desktop{animation:bt-frame-in 1.15s var(--ease) both}
html.motion-ok .work-visual.is-in .frame-phone{animation:bt-phone-in 1.1s var(--ease) .28s both}
@keyframes bt-frame-in{from{opacity:.001;translate:0 50px;rotate:x 9deg}to{opacity:1;translate:none;rotate:x 0deg}}
@keyframes bt-phone-in{from{opacity:.001;translate:0 70px}to{opacity:1;translate:none}}
.work-num{display:block;font-size:12px;letter-spacing:.2em;color:#7f93b8}
.work-copy .eyebrow{color:#a8bce4;margin:14px 0 0}
.work-copy h3{font-size:clamp(30px,3.1vw,48px);font-weight:400;letter-spacing:-.05em;line-height:1.05;color:#f4f7ff;margin:10px 0 16px}
.work-desc{color:#b6c3dc;font-size:15px;line-height:1.7;margin:0}
.work-links{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:28px}
.work-visit{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:40px;background:#f4f7ff;color:#10234b!important;font-weight:600;font-size:13px;text-decoration:none!important;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s}
.work-visit:hover,.work-visit:focus-visible{transform:translateY(-2px);background:#fff;box-shadow:0 14px 34px #b4caff33}
.work-case{color:#afc4ff;font-size:13px}
.works-note{margin:90px 0 0;font-size:12px;color:#8fa2c4;max-width:640px}
.subpage .works{padding-top:40px}

/* ---- Mobile: its own lighter motion and a stacked composition. ---- */
@media (max-width: 700px){:root{--reveal-distance:14px}
.works{padding:80px 20px 40px}.works-head{margin-bottom:44px}.works-list{gap:80px}
.work-item{grid-template-columns:1fr;gap:34px}.work-item:nth-child(even) .work-visual{order:0}
.work-visual{padding:0 0 30px;perspective:none}.frame-bar{height:28px}.frame-url{font-size:10px}
.frame-phone,.work-item:nth-child(even) .frame-phone{width:31%;min-width:0;right:10px;left:auto;bottom:0;padding:5px;border-radius:18px}.frame-phone .frame-screen{border-radius:13px}
html.motion-ok .work-visual.is-in .frame-desktop{animation-name:bt-rise-soft;animation-duration:.8s}
html.motion-ok .work-visual.is-in .frame-phone{animation-name:bt-rise-soft;animation-duration:.8s;animation-delay:.18s}
.work-item:hover .frame-desktop img{transform:none}
body:not(.subpage) .hero>.eyebrow,body:not(.subpage) .hero h1,body:not(.subpage) .hero-bottom .intro,body:not(.subpage) .hero-bottom .actions{animation-name:bt-rise-soft;animation-duration:.8s}
.subpage .hero>:nth-child(2){animation-name:bt-rise-soft;animation-duration:.9s}}

/* ---- Reduced motion: no transforms, transitions, animations or hidden states. ---- */
@media (prefers-reduced-motion: reduce){html.motion-ok [data-reveal],[data-reveal],.hero>*,.hero *,.subpage .hero>*,.subpage .hero>div>*,#contact.formpage>div>*,.frame-desktop,.frame-phone,.frame-screen img,.project img,.workspace,.button,.text-link,.textlink,.work-visit,.work-case,.card,.navigation nav>a{animation:none!important;transition:none!important;transform:none!important;translate:none!important;rotate:none!important;scale:none!important;opacity:1!important}}

/* ---- R4: real product profiles (text-led, no app screens) ---- */
.products{display:grid;gap:14px}
.product{background:#f0f3f8;color:#10234b;border-radius:10px;padding:22px 24px;box-shadow:0 22px 60px #0004}
.product-head{display:flex;align-items:center;gap:14px}
.product-icon,.product-mark{width:44px;height:44px;border-radius:10px;flex-shrink:0}
.product-mark{display:inline-flex;align-items:center;justify-content:center;background:#10234b;color:#f4f7ff;font-weight:700;font-size:20px;letter-spacing:-.04em}
.product h3{font-size:24px;letter-spacing:-.04em;font-weight:500;margin:0;color:#10234b}
.product-status{display:inline-block;margin-top:4px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#3d5a8c}
.product-line{font-size:15px;margin:14px 0 10px;color:#10234b}
.product-caps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.product-caps li{font-size:11px;padding:6px 10px;border-radius:30px;background:#fff;border:1px solid #d3dcea;color:#25354d}
.product-note{font-size:11px;color:#b9c8e4;margin:4px 0 0}
.subpage .product-note{color:#52617a}
/* R4 parent visual finding: the profile section's intro paragraph sat flush under its h2 on mobile. Local to these two sections only. */
.subpage #products>h2+.lead,.subpage #work>h2+.lead{margin-top:18px}
.subpage #products .product-profiles,.subpage #work .product-profiles{margin-top:28px}
.web-heading .text-link+.text-link{margin-left:24px}

/* ---- R4: homepage enquiry forms (static; never revealed/animated) ---- */
.home-enquiry{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px 48px;margin-top:70px;align-items:start}
.home-enquiry-copy h3{font-size:26px;font-weight:400;letter-spacing:-.04em;margin:0 0 12px}
.home-enquiry-copy p{color:#b6c3dc;font-size:14px;line-height:1.7;max-width:360px}
.home-enquiry form{background:#f7f9fc;color:#25354d;border-radius:16px;padding:26px;grid-column:2}
.home-enquiry label{display:block;font-weight:600;color:#10234b;font-size:14px;margin-bottom:16px}
.home-enquiry label span{font-weight:400;color:#52617a}
.home-enquiry input:not([type=checkbox]):not([type=radio]),.home-enquiry select,.home-enquiry textarea{display:block;width:100%;border:1px solid #64748b;border-radius:7px;padding:11px;background:#fff;color:#10234b;margin-top:7px;min-height:46px;min-width:0;font:inherit}
.home-enquiry textarea{resize:vertical}
.home-enquiry-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.home-enquiry .button{background:#2457f5;color:#fff;border:1px solid #678afe}
.home-enquiry .button:disabled{opacity:.55;cursor:not-allowed}
.home-enquiry [role=status]{min-height:1.4em;margin:12px 0 0;color:#10234b;font-size:14px}
.home-enquiry .hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
@media (max-width: 900px){.home-enquiry{grid-template-columns:1fr}.home-enquiry form{grid-column:auto}}
@media (max-width: 700px){.home-enquiry{margin-top:44px}.home-enquiry form{padding:20px}.home-enquiry-row{grid-template-columns:1fr}.product{padding:18px}.web-heading .text-link+.text-link{margin-left:18px}}
@media (prefers-reduced-motion: reduce){.product,.home-enquiry *{animation:none!important;transition:none!important;transform:none!important}}