@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  --bg:#fff;
  --surface:#fff;
  --ink:#292929;
  --muted:#777;
  --rule:#e7e7e7;
  --brand:#00bcb7;
  --brand-dark:#008f8b;
  --soft:#ededed;
  --night:#0d1114;
  --header-h:7rem;
  --max:82.5rem;
  --ease:cubic-bezier(.215,.61,.355,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --hero-x:50%;
  --hero-y:50%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:7rem}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:"Plus Jakarta Sans","Noto Sans TC",sans-serif;
  font-size:16px;
  line-height:1.75;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  background:var(--night);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .55s var(--ease-out);
}
body.is-leaving::after{transform:scaleY(1)}
body.dark-mode{--bg:#1c1c1d;--surface:#242425;--ink:#f4f4f4;--muted:#aaa;--rule:#39393a;--soft:#29292a}
a{color:inherit;text-decoration:none}
img{max-width:100%}
main{overflow:clip;background:var(--bg)}
.wrap{width:min(calc(100% - 4rem),var(--max));margin-inline:auto}
.skip{z-index:1000}

/* The source theme uses an edge-to-edge transparent navigation over its page header. */
.site-header{
  position:absolute;
  inset:0 0 auto;
  z-index:100;
  border:0!important;
  background:transparent!important;
  color:var(--ink);
  transition:transform .45s var(--ease),background .35s ease,box-shadow .35s ease,color .35s ease;
}
.site-header.is-fixed{
  position:fixed;
  background:color-mix(in srgb,var(--bg) 91%,transparent)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.08);
  backdrop-filter:blur(18px);
}
.site-header.is-hidden{transform:translateY(-110%)}
.page-about .site-header:not(.is-fixed),.page-ai-matters .site-header:not(.is-fixed){color:#fff}
.nav{width:min(calc(100% - 4rem),calc(var(--max) + 20rem));min-height:var(--header-h);gap:2rem}
.brand{
  display:block;
  flex:0 0 205px;
  width:205px;
  height:64px;
  overflow:hidden;
  color:transparent!important;
  background:url("tagdigital-logo.png") left center/contain no-repeat;
  transition:transform .4s var(--ease-out);
}
.brand:hover{transform:translateY(-2px)}
.brand>*{visibility:hidden}
.nav-links{gap:1.9rem;font-size:1rem;font-weight:400}
.nav-links a{
  position:relative;
  padding:.75rem 0;
  border:0!important;
  white-space:nowrap;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:.45rem;
  height:2px;
  border-radius:1px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .36s var(--ease-out);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:inherit}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav-links .button{min-height:0;padding:.75rem 1.1rem;border:1px solid currentColor!important;border-radius:999px!important;background:transparent!important;color:inherit!important;text-transform:none;letter-spacing:0}
.native-tools{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.native-tool{
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
  cursor:pointer;
  transition:background .25s ease,transform .3s var(--ease-out);
}
.native-tool:hover{background:color-mix(in srgb,currentColor 10%,transparent);transform:scale(1.08)}
.native-tool svg{width:1.45rem;height:1.45rem;stroke:currentColor;fill:none;stroke-width:1.7}
.menu{border:0!important;border-radius:999px!important;background:var(--ink)!important;color:var(--bg)!important;padding:.75rem 1rem}

.scroll-progress{position:fixed;z-index:1000;left:0;top:0;width:var(--scroll-progress,0%);height:3px;background:var(--brand);pointer-events:none}

/* Search overlay mirrors the live theme's full-screen modal treatment. */
.native-search{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  padding:2rem;
  background:rgba(15,17,19,.96);
  color:#fff;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.native-search.open{opacity:1;visibility:visible}
.native-search-inner{width:min(100%,52rem)}
.native-search-label{display:block;margin-bottom:1rem;color:#a8b0b3;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.native-search-row{display:flex;align-items:center;border-bottom:2px solid #fff}
.native-search input{width:100%;padding:1rem 0;border:0;outline:0;background:transparent;color:#fff;font:600 clamp(2rem,5vw,4.5rem)/1.1 "Plus Jakarta Sans",sans-serif}
.native-search input::placeholder{color:#65686a}
.native-search-close{position:absolute;top:2rem;right:2rem;width:3rem;height:3rem;border:1px solid #555;border-radius:50%;background:transparent;color:#fff;font-size:1.5rem;cursor:pointer}
.native-search-results{display:grid;gap:.6rem;margin-top:1.5rem}
.native-search-results a{padding:.75rem 0;border-bottom:1px solid #343638;color:#aeb3b5}
.native-search-results a:hover{color:#fff}

/* Shared source-style page headers. */
.page-hero{
  position:relative;
  isolation:isolate;
  width:100%;
  max-width:none!important;
  min-height:39rem;
  margin:0;
  padding:clamp(10rem,15vw,14rem) max(2rem,calc((100vw - var(--max))/2)) clamp(6rem,10vw,9rem);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr);
  gap:clamp(3rem,9vw,10rem);
  align-items:end;
  overflow:hidden;
  border-radius:0 0 42px 42px;
  background:#e9e9e9;
}
body.dark-mode .page-hero{background:#252526}
.page-hero>*{position:relative;z-index:2}
.page-hero .eyebrow{
  align-self:end;
  margin:0 0 1.2rem;
  color:var(--brand-dark);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.page-hero h1{
  grid-column:1;
  margin:0;
  max-width:12ch!important;
  color:var(--ink);
  font-size:clamp(3.4rem,6.3vw,6.7rem)!important;
  font-weight:700;
  line-height:.92!important;
  letter-spacing:-.065em!important;
  text-transform:uppercase;
}
.page-hero h1 span{position:relative;color:inherit!important}
.page-hero h1 span::after{content:none!important}
.page-hero p{
  grid-column:2;
  max-width:35rem;
  margin:0;
  color:#777;
  font-size:clamp(1rem,1.25vw,1.22rem);
  line-height:1.7;
}
.page-hero p+p{margin-top:1rem}
.page-hero .status-key{grid-column:2;margin-top:1.5rem}

/* Native image hero from tag.one/about-us. */
.page-about .page-hero{
  min-height:100svh;
  padding-block:calc(var(--header-h) + 4rem) 5.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  border-radius:0;
  color:#fff;
  text-align:center;
  background:#0c1511 url("native/about-hero.webp") var(--hero-x) var(--hero-y)/cover no-repeat;
}
.page-about .page-hero::before{content:"";position:absolute;inset:0;z-index:0;background:rgba(0,12,8,.42)}
.page-about .page-hero .eyebrow{color:#9de2dc}
.page-about .page-hero h1{max-width:15ch!important;color:#fff;font-size:clamp(3rem,5vw,5.7rem)!important;line-height:1.02!important;text-transform:none}
.page-about .page-hero p{grid-column:auto;max-width:55rem;margin-top:1.4rem;color:rgba(255,255,255,.82);font-size:clamp(1rem,1.35vw,1.28rem);letter-spacing:.035em}

/* Native AI particle-cluster colour field from tag.one/ai-matters. */
.page-ai-matters .page-hero{
  min-height:100svh;
  padding-top:calc(var(--header-h) + 5rem);
  align-items:center;
  border-radius:0;
  color:#fff;
  background:
    radial-gradient(circle at 18% -5%,rgba(29,130,183,.95),rgba(29,130,183,0) 43%),
    radial-gradient(circle at 38% 106%,rgba(247,86,24,.95),rgba(255,124,143,0) 43%),
    radial-gradient(circle at 100% 10%,rgba(252,180,120,.78),rgba(228,171,100,0) 47%),
    linear-gradient(330deg,#0c1c3b 0%,#151f3e 58%,#251a2c 100%);
}
.page-ai-matters .page-hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(3,12,28,.2),transparent 70%);pointer-events:none}
.page-ai-matters .page-hero .eyebrow{color:#fcb478}
.page-ai-matters .page-hero h1{max-width:9ch!important;color:#fff;font-size:clamp(4rem,8.2vw,9.4rem)!important;font-weight:700;line-height:.9!important;text-transform:none}
.page-ai-matters .page-hero h1 span::after{content:""!important;position:absolute;left:0;right:0;bottom:-.04em;height:.065em;background:linear-gradient(90deg,#fcb478,#ff7c8f)}
.page-ai-matters .page-hero p{align-self:end;color:rgba(255,255,255,.75);font-size:clamp(1rem,1.25vw,1.2rem)}
.cluster-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* Page-specific editorial accents based on the source subpage system. */
.page-work .page-hero,.page-news .page-hero{background:#e8e8e8}
.page-services .page-hero::after,.page-products .page-hero::after,.page-handheld-culture .page-hero::after{
  content:"";
  position:absolute;
  right:4vw;
  top:17%;
  z-index:0;
  width:24vw;
  max-width:31rem;
  aspect-ratio:4/3;
  border-radius:30px;
  background:url("native/showcase-yellow.jpg") center/cover;
  opacity:.13;
  transform:rotate(5deg);
}
.page-products .page-hero::after{background-image:url("native/showcase-purple.jpg");transform:rotate(-4deg)}
.page-handheld-culture .page-hero::after{background-image:url("native/showcase-green.jpg");transform:rotate(5deg)}

.subnav{position:relative;z-index:4;border:0;background:#fff}
.subnav .wrap{justify-content:center;padding-block:1.5rem}
.subnav a{padding:.55rem .9rem;border:0;border-radius:0;color:#777;font-size:.88rem;font-weight:500}
.subnav a:hover{color:var(--ink)}

/* Spacious, clean content rhythm from the source Elementor pages. */
.section{position:relative;padding:clamp(5.5rem,9vw,9rem) 0;border:0!important;background:var(--bg)}
.section+.section{border-top:1px solid var(--rule)!important}
.section-head{grid-template-columns:minmax(11rem,3fr) minmax(0,9fr);gap:clamp(2rem,7vw,8rem);margin-bottom:clamp(3rem,6vw,6rem)}
.section .kicker{padding-top:.55rem;color:var(--brand-dark);font-size:.71rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.section h2{max-width:14ch;font-size:clamp(2.8rem,5vw,5.6rem);font-weight:650;line-height:.99;letter-spacing:-.055em}
.intro-grid{grid-template-columns:7fr 5fr;gap:clamp(3rem,9vw,9rem)}
.intro-lead{font-size:clamp(2rem,4vw,4.3rem);font-weight:600;line-height:1.1;letter-spacing:-.045em}
.prose{color:var(--muted);font-size:1.05rem}

.card-grid,.service-streams,.platform-index,.news-grid{gap:1.4rem}
.card,.stream,.platform,.news-card,.case,.product-card,.contact-panel,.recognition,.playground-stage{
  position:relative;
  overflow:hidden;
  border:0!important;
  border-radius:28px!important;
  background:var(--soft)!important;
  box-shadow:none!important;
  transform:perspective(900px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));
  transition:transform .55s var(--ease-out),background .3s ease;
}
.card::after,.stream::after,.platform::after,.news-card::after,.case::after,.product-card::after,.contact-panel::after,.recognition::after,.playground-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(350px circle at var(--spot-x,-200px) var(--spot-y,-200px),rgba(0,188,183,.13),transparent 55%);
}
.card{min-height:19rem;padding:2rem}
.card .num,.stream>span,.platform small,.product-body small,.case .meta,.news-card time{color:var(--brand-dark);font-size:.68rem;font-weight:700;letter-spacing:.13em}
.card h3{margin-top:auto;font-size:1.65rem}
.card p,.stream p,.platform p,.news-card p,.case p,.product-body p{color:var(--muted)}

.stream{min-height:30rem;padding:0 2rem 2.2rem}
.stream::before,.case::before{
  content:"";
  display:block;
  width:calc(100% + 4rem);
  height:15rem;
  margin:0 -2rem 2rem;
  background:center/cover no-repeat;
  transition:transform .8s var(--ease-out),filter .5s ease;
}
.stream:nth-child(3n+1)::before,.case:nth-child(3n+1)::before{background-image:url("native/showcase-yellow.jpg")}
.stream:nth-child(3n+2)::before,.case:nth-child(3n+2)::before{background-image:url("native/showcase-green.jpg")}
.stream:nth-child(3n)::before,.case:nth-child(3n)::before{background-image:url("native/showcase-purple.jpg")}
.stream:hover::before,.case:hover::before{transform:scale(1.045)}
.stream h3{margin:.8rem 0 1rem;font-size:1.65rem}
.stream ul{color:var(--muted)}

.case-grid{gap:1.4rem}
.case{min-height:34rem;padding:0 2rem 2.2rem}
.case::before{width:calc(100% + 4rem);height:20rem;margin:0 -2rem 2rem}
.case h3{margin:1.2rem 0 .8rem;font-size:2rem}

.product-grid{gap:1.4rem}
.product-card{background:var(--surface)!important;box-shadow:0 0 0 1px var(--rule)!important}
.product-visual{overflow:hidden;border:0;background:#ececec}
.product-visual img{transition:transform .85s var(--ease-out)}
.product-card:hover .product-visual img{transform:scale(1.035)}
.product-visual.placeholder{background:linear-gradient(145deg,#00bcb7,#0b746f);color:#fff}
.product-body{padding:2rem}
.tags span,.status-pill{border:1px solid var(--rule);background:transparent;color:var(--ink);font-weight:600}
.status-pill.history{color:#8d554a}

.platform-index{grid-template-columns:repeat(3,1fr)}
.platform{min-height:15rem;padding:1.7rem}
.platform h3{font-size:1.45rem}
.news-grid{gap:1.4rem}
.news-card{min-height:22rem;padding:2rem}
.news-card h2,.news-card h3{font-size:1.7rem}
.client-cloud span{border:0;border-radius:999px;background:var(--soft);padding:.7rem 1rem}
.recognition{padding:1.7rem;border-top:0!important}
.recognition strong{color:var(--brand-dark)}

.feature-list{border-color:var(--rule)}
.feature{padding:2.4rem 0;border-color:var(--rule)}
.feature>span{color:var(--brand-dark)}
.feature h3{font-size:1.55rem}
.feature p{color:var(--muted)}
.timeline{border-color:var(--rule)}
.milestone::before{background:var(--brand)}
.milestone time{color:var(--brand-dark)}
.evidence-note{border-left-color:var(--brand);background:var(--soft)}
.quote{border-left-color:var(--brand)}

.experience-playground{gap:0;border-radius:32px;overflow:hidden;background:var(--night);color:#fff}
.playground-copy{padding:clamp(2rem,5vw,5rem)}
.playground-stage{border-radius:0!important;background:#181d20!important;padding:clamp(2rem,5vw,5rem)}
.mode-control{border-color:#565b5d;color:#fff;background:transparent}
.mode-control[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#061110}

.band{
  position:relative;
  overflow:hidden;
  border-radius:40px;
  background:#151515;
  padding:clamp(3rem,7vw,7rem);
}
.band::before{content:"";position:absolute;width:25rem;aspect-ratio:1;border-radius:50%;right:-8rem;top:-13rem;background:radial-gradient(circle,#00bcb7,transparent 68%);opacity:.42}
.band>*{position:relative;z-index:1}
.band .button{border-radius:999px!important}
.button{border-radius:999px!important;background:var(--ink);border-color:var(--ink);transition:transform .35s var(--ease-out),background .3s ease,color .3s ease}
.button:hover{background:var(--brand);border-color:var(--brand);color:#061110;transform:translateY(-3px)}

footer{
  position:relative;
  min-height:28rem;
  margin-top:0;
  padding:clamp(5rem,9vw,8rem) 0 3rem;
  background:#171717;
  color:#fff;
  border-radius:42px 42px 0 0;
}
footer::before{
  content:"Got a PROJECT in mind?";
  display:block;
  width:min(calc(100% - 4rem),var(--max));
  margin:0 auto clamp(5rem,9vw,8rem);
  max-width:11ch;
  color:#fff;
  font-size:clamp(3.4rem,8vw,8.5rem);
  font-weight:650;
  line-height:.84;
  letter-spacing:-.075em;
}
.footer-grid{padding-top:2rem;border-top:1px solid #3a3a3a;color:#aaa}
.footer-links a{color:#fff}
.back-to-top{position:absolute;right:2rem;bottom:2rem;display:grid;place-items:center;width:3rem;height:3rem;border:0;border-radius:50%;background:#f3f3f3;color:#777;font-size:1.25rem;cursor:pointer}

.reveal{opacity:0;transform:translateY(42px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
@media(max-width:1240px){
  .nav{width:min(calc(100% - 2.5rem),var(--max))}
  .brand{flex-basis:170px;width:170px;height:56px}
  .nav-links{gap:1rem;font-size:.86rem}
  .nav-links .button{display:none}
}
@media(max-width:900px){
  :root{--header-h:5.8rem}
  .wrap{width:min(calc(100% - 2rem),var(--max))}
  .nav{width:calc(100% - 2rem)}
  .brand{flex-basis:158px;width:158px;height:50px}
  .menu{display:block;margin-left:auto}
  .native-tools{order:2}.menu{order:3}
  .nav-links{
    position:absolute;
    left:1rem;
    right:1rem;
    top:calc(var(--header-h) - .3rem);
    display:none;
    align-items:stretch;
    gap:0;
    padding:.8rem 1rem;
    border:1px solid var(--rule);
    border-radius:22px;
    background:color-mix(in srgb,var(--bg) 96%,transparent);
    color:var(--ink);
    box-shadow:0 22px 60px rgba(0,0,0,.17);
    backdrop-filter:blur(18px);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.7rem .2rem}
  .page-hero{width:100%;min-height:34rem;padding:9rem 1.5rem 5rem;grid-template-columns:1fr;gap:2rem;border-radius:0 0 28px 28px}
  .page-hero h1,.page-hero p,.page-hero .status-key{grid-column:1}
  .page-hero p{max-width:42rem}
  .page-about .page-hero,.page-ai-matters .page-hero{min-height:100svh;border-radius:0}
  .page-about .page-hero{background-size:auto 100%;animation:none}
  .page-ai-matters .page-hero{align-content:center}
  .page-ai-matters .page-hero h1{font-size:clamp(3.5rem,15vw,7rem)!important}
  .page-services .page-hero::after,.page-products .page-hero::after,.page-handheld-culture .page-hero::after{right:-6rem;top:28%;width:22rem;opacity:.08}
  .section-head,.intro-grid,.band,.contact-grid{grid-template-columns:1fr}
  .service-streams,.platform-index,.recognition-grid,.news-grid,.card-grid{grid-template-columns:1fr}
  .stream,.case{min-height:auto}
  .case-grid,.product-grid{grid-template-columns:1fr}
  .feature{grid-template-columns:3rem 1fr}.feature p{grid-column:2}
  footer::before{width:calc(100% - 2rem)}
}
@media(max-width:560px){
  .native-tools .search-trigger{display:none}
  .page-hero h1{font-size:clamp(2.8rem,14vw,4.8rem)!important}
  .page-about .page-hero h1{font-size:clamp(2.7rem,12vw,4.4rem)!important}
  .page-about .page-hero{background-position:62% center}
  .section{padding-block:4.5rem}
  .section h2{font-size:clamp(2.45rem,12vw,4rem)}
  .stream::before,.case::before{height:13rem}
  footer{border-radius:28px 28px 0 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* 2026 content and motion system: product, solution and work heroes. */
.page-services .site-header:not(.is-fixed),
.page-products .site-header:not(.is-fixed),
.page-work .site-header:not(.is-fixed){color:#fff}
.kinetic-hero{
  min-height:100svh;
  align-items:end;
  border-radius:0;
  color:#fff;
  background:
    radial-gradient(circle at 78% 24%,rgba(0,188,183,.26),transparent 34%),
    radial-gradient(circle at 92% 78%,rgba(99,91,255,.22),transparent 36%),
    linear-gradient(135deg,#0a1216 0%,#102a2c 52%,#10141a 100%);
}
.kinetic-hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to right,#000,transparent 86%)}
.page-services .kinetic-hero::after,.page-products .kinetic-hero::after{display:none}
.kinetic-hero .eyebrow{color:#83ddd4}
.kinetic-hero h1{max-width:10ch!important;color:#fff}
.kinetic-hero p{position:relative;z-index:4;align-self:end;max-width:31rem;padding:1.25rem;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(5,12,15,.44);color:rgba(255,255,255,.76);backdrop-filter:blur(12px)}
.kinetic-hero-art{position:absolute;top:16%;right:5vw;z-index:2;width:min(45vw,42rem);aspect-ratio:1;animation:hero-drift 10s ease-in-out infinite}
.kinetic-core{position:absolute;left:50%;top:50%;display:grid;width:10.5rem;aspect-ratio:1;place-items:center;align-content:center;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.36);border-radius:50%;background:radial-gradient(circle at 35% 30%,#22d8c5,#087f79 53%,#063c3b);box-shadow:0 0 90px rgba(0,188,183,.3);text-align:center}
.kinetic-core b{font-size:2.7rem;letter-spacing:-.08em}.kinetic-core small{font-size:.55rem;letter-spacing:.16em}
.kinetic-orbit{position:absolute;inset:9%;border:1px solid rgba(255,255,255,.2);border-radius:50%;animation:orbit-spin 18s linear infinite}
.kinetic-orbit::before,.kinetic-orbit::after{content:"";position:absolute;width:.7rem;aspect-ratio:1;border-radius:50%;background:#77e8db;box-shadow:0 0 24px #00bcb7}.kinetic-orbit::before{left:5%;top:25%}.kinetic-orbit::after{right:8%;bottom:18%}
.kinetic-orbit--two{inset:23%;border-style:dashed;animation-direction:reverse;animation-duration:12s}
.kinetic-node{position:absolute;padding:.58rem .72rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(8,20,24,.72);font-size:.58rem;font-weight:800;letter-spacing:.12em}.kinetic-node.n1{left:1%;top:20%}.kinetic-node.n2{right:0;top:31%}.kinetic-node.n3{left:7%;bottom:17%}.kinetic-node.n4{right:3%;bottom:10%}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes hero-drift{50%{transform:translate3d(0,-14px,0) rotate(1deg)}}

/* Animated product-stack hero. */
.kinetic-hero--products{background:radial-gradient(circle at 78% 30%,rgba(104,81,205,.36),transparent 35%),radial-gradient(circle at 92% 80%,rgba(0,188,183,.22),transparent 38%),linear-gradient(145deg,#100f1d,#1d1b3a 56%,#0b1b1c)}
.product-hero-stack{position:absolute;top:16%;right:4vw;z-index:2;width:min(46vw,45rem);height:66%;perspective:1200px}
.ph-card{position:absolute;width:47%;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:22px;background:#1a1b24;box-shadow:0 30px 80px rgba(0,0,0,.38);animation:card-float 7s ease-in-out infinite}
.ph-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.ph-card span{display:block;padding:.7rem 1rem;color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.15em}.ph-1{left:3%;top:4%;transform:rotate(-7deg)}.ph-2{right:0;top:14%;animation-delay:-1.2s;transform:rotate(6deg)}.ph-3{left:10%;bottom:1%;animation-delay:-2.6s;transform:rotate(4deg)}.ph-4{right:4%;bottom:8%;animation-delay:-3.8s;transform:rotate(-5deg)}
@keyframes card-float{50%{translate:0 -12px;filter:brightness(1.08)}}

/* Animated work reel. */
.page-work .kinetic-hero{background:radial-gradient(circle at 80% 32%,rgba(245,180,68,.2),transparent 38%),radial-gradient(circle at 22% 100%,rgba(0,188,183,.2),transparent 37%),linear-gradient(145deg,#111516,#22201d 55%,#11191a)}
.work-hero-reel{position:absolute;top:13%;right:4vw;z-index:2;width:min(48vw,48rem);height:65%;transform:rotate(-4deg)}
.work-hero-reel figure{position:absolute;width:43%;margin:0;overflow:hidden;border-radius:19px;background:#171717;box-shadow:0 28px 70px rgba(0,0,0,.38);animation:reel-shift 9s ease-in-out infinite}
.work-hero-reel img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.work-hero-reel span{display:block;padding:.65rem .85rem;color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.15em}.work-hero-reel figure:nth-child(1){left:0;top:0}.work-hero-reel figure:nth-child(2){right:4%;top:8%;animation-delay:-2s}.work-hero-reel figure:nth-child(3){left:8%;bottom:0;animation-delay:-4s}.work-hero-reel figure:nth-child(4){right:0;bottom:5%;animation-delay:-6s}
@keyframes reel-shift{50%{transform:translateY(-14px) rotate(1deg)}}

/* About: founder and original Awards & Accolades artwork. */
.founder-panel{display:grid;grid-template-columns:minmax(12rem,3fr) minmax(0,9fr);gap:clamp(2rem,7vw,7rem);align-items:start;padding:clamp(2rem,5vw,5rem);border-radius:34px;background:var(--soft)}
.founder-monogram{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 26%,#34d8ca,#087f79 56%,#07504d);color:#fff;font-size:clamp(3rem,7vw,6rem);font-weight:800;letter-spacing:-.08em;box-shadow:0 24px 70px rgba(0,127,121,.22)}
.awards-intro{max-width:55rem;margin:-2rem 0 3rem;color:var(--muted);font-size:1.1rem}
.award-logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.award-logo-grid article{display:grid;min-height:14rem;place-items:center;padding:1.4rem;border:1px solid var(--rule);border-radius:24px;background:#fff;text-align:center;transition:transform .35s var(--ease-out),box-shadow .35s ease}
.award-logo-grid article:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(0,0,0,.08)}
.award-logo-grid img{width:100%;height:8rem;object-fit:contain}.award-logo-grid span{color:var(--muted);font-size:.77rem;font-weight:700}

/* AI Matters: test cards and accountable operating flow. */
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.principle-card{display:flex;min-height:28rem;flex-direction:column;padding:2rem;border-radius:28px;background:#11191b;color:#fff}
.principle-card>span{color:#79ded5;font:700 .72rem/1 ui-monospace,monospace}.principle-card h3{margin:auto 0 .8rem;font-size:2rem}.principle-card p{color:#abb5b6}.principle-card strong{padding-top:1rem;border-top:1px solid #384143;color:#79ded5;font-size:.72rem;letter-spacing:.04em}
.ai-loop{display:grid;grid-template-columns:repeat(11,auto);align-items:stretch;gap:.55rem}
.ai-loop article{display:flex;min-width:0;flex-direction:column;padding:1.2rem;border:1px solid var(--rule);border-radius:18px;background:var(--soft)}
.ai-loop article span{color:var(--brand-dark);font-size:.66rem;font-weight:800}.ai-loop article h3{margin:1.8rem 0 .5rem;font-size:1.1rem;line-height:1.1}.ai-loop article p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.5}.ai-loop i{align-self:center;color:var(--brand);font-style:normal;font-size:1.4rem}
.control-stack{display:grid;gap:.7rem;margin-top:2rem}.control-stack div{display:flex;justify-content:space-between;gap:2rem;padding:1rem 1.25rem;border-radius:14px;background:#121a1c;color:#fff}.control-stack span{color:#77ddd4;font-size:.65rem;font-weight:800;letter-spacing:.14em}.control-stack strong{font-size:.78rem;font-weight:600;color:#c2cacc;text-align:right}
.founder-view{display:grid;grid-template-columns:5fr 7fr;gap:clamp(3rem,9vw,9rem)}.founder-view h2{margin-top:1rem}.source-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}.source-actions .button{font-size:.78rem}

/* Solutions diagrams. */
.delivery-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;position:relative}.delivery-flow article{min-height:15rem;padding:1.25rem;border-radius:20px;background:var(--soft)}.delivery-flow span{color:var(--brand-dark);font-size:.68rem;font-weight:800}.delivery-flow h3{margin:3rem 0 .55rem;font-size:1.25rem}.delivery-flow p{margin:0;color:var(--muted);font-size:.82rem}.workflow-pulse{height:3px;margin-top:1rem;overflow:hidden;border-radius:3px;background:#dbe6e3}.workflow-pulse span{display:block;width:24%;height:100%;background:linear-gradient(90deg,transparent,var(--brand),transparent);animation:pulse-track 3.4s linear infinite}@keyframes pulse-track{from{transform:translateX(-100%)}to{transform:translateX(520%)}}
.architecture-map{display:grid;gap:.75rem;padding:clamp(1.2rem,4vw,3rem);border-radius:30px;background:#11191b;color:#fff}.architecture-users{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}.architecture-users strong{margin-right:auto;font-size:1.3rem}.architecture-users span{padding:.45rem .7rem;border:1px solid #41494a;border-radius:999px;color:#bdc5c6;font-size:.72rem}.architecture-layer{display:flex;justify-content:space-between;gap:1.5rem;padding:1.15rem 1.3rem;border-radius:13px}.architecture-layer b{font-size:.72rem;letter-spacing:.12em}.architecture-layer span{font-size:.78rem}.l-experience{background:#d7ed7d;color:#14211d}.l-workflow{background:#00bcb7;color:#061412}.l-ai{background:#665bde}.l-data{background:#2a5f74}.l-governance{background:#2b3032}
.capability-layout{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,7vw,7rem);align-items:center}.capability-chart{display:grid;gap:1rem}.capability-chart>div{display:grid;grid-template-columns:9rem 1fr 2rem;gap:1rem;align-items:center}.capability-chart span{font-size:.78rem;font-weight:700}.capability-chart i{height:.65rem;overflow:hidden;border-radius:999px;background:#e1e5e3}.capability-chart i::after{content:"";display:block;width:var(--value);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#83ded5);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}.capability-chart.is-visible i::after{transform:scaleX(1)}.capability-chart b{color:var(--brand-dark);font-size:.75rem}

/* Products and client records. */
.tpi-partner{display:grid;grid-template-columns:12rem 1fr auto;gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(2rem,5vw,4rem);border-radius:32px;background:#11191b;color:#fff}.tpi-mark{display:grid;aspect-ratio:1;place-items:center;border-radius:28px;background:linear-gradient(145deg,#35d7c7,#087f79);font-size:4rem;font-weight:800;letter-spacing:-.08em}.tpi-partner h2{margin:.5rem 0 1rem}.tpi-partner p{max-width:52rem;color:#b6c0c1}.tpi-partner .button{white-space:nowrap;background:#fff;color:#11191b}
.client-logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}.client-logo-grid article{display:grid;min-height:9.5rem;place-items:center;align-content:center;gap:.85rem;padding:1rem;border:1px solid var(--rule);border-radius:18px;background:#fff;text-align:center;transition:transform .3s var(--ease-out),border-color .3s ease}.client-logo-grid article:hover{transform:translateY(-4px);border-color:var(--brand)}.client-logo-grid img{width:3.9rem;height:3.9rem;object-fit:contain}.client-logo-grid img.client-logo-wide{width:min(8.5rem,100%);height:3.9rem}.client-logo-grid img.client-logo-ink{filter:brightness(0) saturate(100%)}.client-logo-grid img.client-logo-china-reading{object-position:center 68%}.client-logo-grid span{color:#4c5451;font-size:.72rem;font-weight:700;line-height:1.25}

@media(max-width:1100px){
  .delivery-flow{grid-template-columns:repeat(3,1fr)}
  .ai-loop{grid-template-columns:repeat(3,1fr)}.ai-loop i{display:none}
  .client-logo-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){
  .kinetic-hero{align-content:end;padding-bottom:4.5rem}.kinetic-hero-art,.product-hero-stack,.work-hero-reel{top:12%;right:-3rem;width:78vw;height:45%;opacity:.72}.kinetic-hero p{background:rgba(5,12,15,.72)}
  .principle-grid,.award-logo-grid{grid-template-columns:1fr}.principle-card{min-height:22rem}
  .founder-panel,.founder-view,.capability-layout,.tpi-partner{grid-template-columns:1fr}.founder-monogram{width:min(12rem,55vw)}.tpi-mark{width:9rem}.tpi-partner .button{justify-self:start}
  .delivery-flow{grid-template-columns:repeat(2,1fr)}
  .control-stack div,.architecture-layer{flex-direction:column}.control-stack strong{text-align:left}
  .client-logo-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .kinetic-hero-art,.product-hero-stack,.work-hero-reel{right:-6rem;width:105vw;height:41%;opacity:.58}.kinetic-hero h1{font-size:clamp(3rem,14vw,4.8rem)!important}
  .delivery-flow,.ai-loop{grid-template-columns:1fr}.delivery-flow article{min-height:11rem}.delivery-flow h3{margin-top:2rem}
  .client-logo-grid{grid-template-columns:repeat(2,1fr)}.client-logo-grid article{min-height:8.5rem}
  .capability-chart>div{grid-template-columns:6.8rem 1fr 1.6rem;gap:.55rem}
}