/* Tik4 — one point, a living experience. Homepage-only composition. */
.t4-home {
  --a-space: clamp(76px, 8vw, 128px);
  --a-title: clamp(36px, 4vw, 58px);
  --a-line: 1px solid var(--t4-line);
  --a-rhythm: cubic-bezier(.22,.7,.3,1);
}
.t4-home .t4-main { padding-bottom: 0; }
.t4-a-kicker { display: flex; align-items: center; gap: 12px; color: var(--t4-blue); font-size: 12px; font-weight: 600; line-height: 2; margin: 0 0 24px; }
.t4-a-seed { width: 8px; height: 8px; background: var(--t4-teal); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb,var(--t4-teal),transparent 90%); }
.t4-a-hero { position: relative; padding-top: 32px; }
.t4-a-hero-top { display: flex; justify-content: space-between; align-items: center; }
.t4-a-hero-top .t4-a-kicker { margin: 0; }
.t4-a-edition { font-size: 13px; font-weight: 650; color: var(--t4-muted); }
.t4-a-hero-grid { display: grid; grid-template-columns: 1fr 1.16fr; align-items: center; gap: 0; min-height: min(690px,calc(100svh - 230px)); padding-block: 34px 28px; }
.t4-a-hero-copy { position: relative; z-index: 1; padding-bottom: 15px; }
.t4-a-hero h1 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.45; font-weight: 900; letter-spacing: -.045em; margin: 0 0 22px; }
.t4-a-hero h1 em { color: var(--t4-blue); font-style: normal; }
.t4-a-word { position: relative; }
.t4-a-spark { position: relative; z-index: 0; display: inline-block; color: var(--t4-blue); }
.t4-a-spark::after { content: ""; position: absolute; z-index: -1; inset-inline: -2% -8%; bottom: .08em; height: .16em; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--t4-blue) 12%, var(--t4-teal) 88%, transparent); transform: rotate(-6deg) skewX(-18deg); }
.t4-a-type-dot { display: inline-block; width: .115em; height: .115em; background: var(--t4-teal); border-radius: 50%; vertical-align: .1em; margin-inline-start: .04em; }
.t4-a-hero-lead { font-size: clamp(15px,1.25vw,18px); line-height: 2.2; margin: 0 0 16px; }
.t4-a-hero-lead strong { font-weight: 600; }
.t4-a-hero-detail { color: var(--t4-muted); font-size: 13px; line-height: 2.2; margin: 0; }
.t4-a-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; }
.t4-home .t4-a-primary { border-radius: 100px; min-height: 54px; padding-inline: 24px; gap: 12px; }
.t4-a-button-dot { height: 9px; width: 9px; background: #bdebf2; border-radius: 50%; box-shadow: 0 0 0 5px #ffffff15; transition: box-shadow .25s; }
.t4-a-primary:hover .t4-a-button-dot { box-shadow: 0 0 0 8px #ffffff25; }
.t4-a-portfolio { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding-inline: 22px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--t4-blue), transparent 62%); background: color-mix(in srgb, var(--t4-surface) 82%, var(--t4-blue-soft)); color: var(--t4-ink); font-size: 13px; font-weight: 650; box-shadow: inset 0 1px 0 #fff, 0 10px 22px -16px #0078b866; transition: background .2s, color .2s, border-color .2s, transform .25s var(--t4-ease); }
.t4-a-portfolio svg { display: block; flex: 0 0 auto; transition: transform .25s var(--t4-ease); }
.t4-a-portfolio:hover { background: linear-gradient(120deg, color-mix(in srgb, var(--t4-blue-soft), white 20%), color-mix(in srgb, var(--t4-surface), var(--t4-teal) 8%)); color: var(--t4-blue); border-color: color-mix(in srgb, var(--t4-blue), transparent 35%); box-shadow: 0 16px 28px -18px #0078b8aa, inset 0 1px 0 #fff; transform: translateY(-2px); }
.t4-a-portfolio:hover svg { transform: translateX(-4px); color: var(--t4-teal); }
.t4-a-link { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; min-height: 44px; padding-block: 8px; border-bottom: 1px solid color-mix(in srgb,var(--t4-ink),transparent 65%); transition: color .2s,border-color .2s; }
.t4-a-link:hover { color: var(--t4-blue); border-color: var(--t4-blue); }
.t4-a-hero { isolation: isolate; }
.t4-a-hero::before { content: ""; position: absolute; inset: -20px 0 40px; z-index: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(circle, #9fd4e2 1px, transparent 1.4px), radial-gradient(circle, #ffffff 1px, transparent 1.2px); background-size: 92px 92px, 140px 140px; background-position: calc(12px + var(--hx, 0px)) calc(8px + var(--hy, 0px)), calc(40px - var(--hx, 0px)) calc(24px - var(--hy, 0px)); mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 72%); }
.t4-a-hero-grid, .t4-a-hero-top, .t4-a-hero-foot { position: relative; z-index: 1; }
.t4-a-hero-art { position: relative; z-index: 2; min-width: 0; margin: 0 -34px 0 -26px; --mx: 0px; --my: 0px; }
.t4-a-hero-art > svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.t4-a-hero-art::before { content: ""; position: absolute; inset: 8% 4% 12%; z-index: 0; background: radial-gradient(ellipse at 48% 46%, #7ad7e266, #08a4a722 42%, transparent 70%); filter: blur(8px); pointer-events: none; transform: translate(var(--mx), var(--my)); }
.t4-a-hero-art::after { content: ""; position: absolute; z-index: 0; width: 220px; height: 220px; border-radius: 50%; left: calc(58% + var(--mx)); top: calc(42% + var(--my)); transform: translate(-50%, -50%); background: radial-gradient(circle, #b7f3ff55, transparent 68%); filter: blur(2px); pointer-events: none; }
.t4-a-hero-art [data-stage-rider] { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .t4-a-hero-art [data-orbit] { transform-box: view-box; transform-origin: 430px 348px; }
  .t4-a-hero-art [data-orbit="outer"] { animation: t4-stage-orbit 52s linear infinite; }
  .t4-a-hero-art [data-orbit="mid"] { animation: t4-stage-orbit 31s linear infinite reverse; }
  .t4-a-hero-art [data-orbit="inner"] { animation: t4-stage-orbit 18s linear infinite; }
  .t4-a-hero-art [data-orbit="dust"] { animation: t4-stage-orbit 24s linear infinite reverse; }
  .t4-a-hero-art [data-float="design"], .t4-a-hero-art [data-float="rider"] { animation: t4-stage-float 6.2s ease-in-out infinite; }
  .t4-a-hero-art [data-float="code"] { animation: t4-stage-float 7.4s ease-in-out infinite reverse; }
  .t4-a-hero-art [data-float="search"] { animation: t4-stage-float 5.6s .35s ease-in-out infinite; }
  .t4-a-hero-art [data-pulse] { transform-box: fill-box; transform-origin: center; animation: t4-stage-pulse 2.8s ease-in-out infinite; }
  .t4-a-hero-art [data-chart-bar] { transform-box: fill-box; transform-origin: center bottom; animation: t4-chart-rise 3.8s ease-in-out infinite; }
  .t4-a-hero-art [data-chart-bar="b"] { animation-duration: 4.7s; animation-delay: .4s; }
  .t4-a-hero-art [data-chart-bar="c"] { animation-duration: 3.1s; animation-delay: .75s; }
  .t4-a-hero-art [data-chart-bar="d"] { animation-duration: 5.2s; animation-delay: .2s; }
  .t4-a-hero-art::before { animation: t4-stage-glow 6s ease-in-out infinite; }
}
@keyframes t4-stage-orbit { to { transform: rotate(360deg); } }
@keyframes t4-stage-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes t4-stage-pulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.45); } }
@keyframes t4-stage-glow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes t4-chart-rise { 0%, 100% { transform: scaleY(.38); } 50% { transform: scaleY(1); } }
.t4-a-hero-art figcaption { display: flex; justify-content: space-between; align-items: center; padding-inline: 75px 60px; margin-top: -8px; color: var(--t4-muted); font-size: 10px; }
.t4-a-art-index { color: var(--t4-blue); }
.t4-a-hero-foot { display: flex; justify-content: space-between; align-items: center; padding-block: 24px; border-block: var(--a-line); font-size: 11px; color: var(--t4-muted); }
.t4-a-hero-foot > a { display: flex; align-items: center; gap: 12px; min-height: 30px; color: var(--t4-ink); }
.t4-a-scroll-meter { display: flex; align-items: flex-start; width: 12px; height: 25px; border: 1px solid var(--t4-muted); border-radius: 12px; padding: 4px; }
.t4-a-scroll-meter i { height: 5px; width: 2px; flex-shrink: 0; background: var(--t4-blue); border-radius: 2px; }
.t4-a-intro { padding-block: var(--a-space); display: grid; grid-template-columns: .36fr 1fr; gap: 20px 40px; }
.t4-a-intro .t4-a-kicker { padding-top: 18px; color: var(--t4-ink); font-size: clamp(22px, 2.4vw, 34px); font-weight: 900; letter-spacing: -.03em; line-height: 1.4; }
.t4-a-intro .t4-a-kicker::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--t4-blue); box-shadow: 0 0 0 7px color-mix(in srgb, var(--t4-blue) 16%, transparent); }
.t4-a-intro h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.55; font-weight: 900; margin: 0; letter-spacing: -.04em; }
.t4-a-intro h2 span { color: var(--t4-blue); }
.t4-a-intro > p:last-child { grid-column: 2; color: var(--t4-muted); font-size: 13px; line-height: 2.2; margin: 0; }
/* Assembly: the complete narrative is visible throughout the short pinned scene. */
.t4-a-sequence { background: #102e3c; color: #f3f9fa; position: relative; border-radius: 36px 36px 0 0; }
.t4-a-sequence-sticky { padding-block: 42px 52px; }
.t4-a-sequence-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.t4-a-sequence-head .t4-a-kicker { color: #66d0d2; margin: 0; }
.t4-a-motion { border: 1px solid #6b8d9b; border-radius: 30px; min-height: 40px; font-size: 11px; padding: 8px 18px; color: #e2f2f4; }
.t4-a-motion[hidden] { display: none; }
.t4-a-motion:hover { background: #214959; }
.t4-a-sequence-grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: 40px; align-items: center; }
.t4-a-sequence-copy h2 { font-size: clamp(32px,3vw,44px); line-height: 1.6; font-weight: 800; margin: 0 0 15px; letter-spacing: -.025em; }
.t4-a-sequence-copy h2 span { color: #66d0d2; }
.t4-a-sequence-intro { color: #c0d2d9; font-size: 12px; line-height: 2.1; margin: 0 0 23px; }
.t4-a-stages { list-style: none; padding: 0; margin: 0; }
.t4-a-stages li { display: flex; align-items: flex-start; gap: 17px; padding-block: 13px; padding-inline: 8px 20px; border-top: 1px solid #36505d; border-radius: 18px; position: relative; transform-origin: 70% 50%; transition: transform .5s var(--a-rhythm), background .4s, box-shadow .4s; }
.t4-a-stages li > span { color: #9dbbc8; font-size: 11px; padding-top: 5px; font-variant-numeric: tabular-nums; transition: color .35s; }
.t4-a-stages h3 { margin: 0 0 2px; font-size: 17px; font-weight: 650; transition: color .35s; }
.t4-a-stages p { color: #bdd0d8; font-size: 11px; line-height: 2; margin: 0; }
.t4-a-stages li::after { position: absolute; content: ''; inset-inline-end: 14px; top: 25px; width: 6px; height: 6px; border: 1px solid #7599a8; border-radius: 50%; transition: transform .4s var(--a-rhythm), background .3s, border-color .3s, box-shadow .3s; }
.t4-a-stages li.is-current { z-index: 1; transform: scale(1.03); background: linear-gradient(to left, #1b4c60, #14364400 86%); box-shadow: inset -3px 0 0 #68d9d6, 0 16px 30px -18px #021018; }
.t4-a-stages li.is-current::after { border-color: #68d9d6; background: #68d9d6; box-shadow: 0 0 0 6px #68d9d622; transform: scale(1.35); }
.t4-a-stages li.is-current > span { color: #8be4e2; }
.t4-a-stages li.is-current h3 { color: #f4fffe; }
.t4-a-assembly { min-width: 0; }
.t4-a-assembly-art { width: 100%; }
.t4-a-assembly-art > svg { width: 100%; height: auto; display: block; overflow: visible; }
.t4-a-assembly-caption { display: flex; justify-content: space-between; color: #bdd0d8; font-size: 10px; padding: 0 32px 18px; }
.t4-a-steps { position: relative; margin-inline: 8px; padding-top: 2px; }
.t4-a-steps-track { position: absolute; top: 6px; height: 2px; inset-inline: calc(100% / 8); background: #36505d; border-radius: 2px; overflow: hidden; }
.t4-a-steps-track i { display: block; height: 100%; width: 100%; background: linear-gradient(to left, #bffffc, #62d3d1); transform: scaleX(0); transform-origin: right; }
.t4-a-steps ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.t4-a-steps li { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; min-width: 0; }
.t4-a-step-mark { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #6d8c9a; background: #102e3c; box-shadow: 0 0 0 4px #102e3c; position: relative; z-index: 1; transition: transform .4s var(--a-rhythm), background .3s, border-color .3s, box-shadow .3s; }
.t4-a-step-title { color: #8eacb8; font-size: 11px; font-weight: 600; line-height: 1.7; max-width: 9.2em; transition: color .4s, text-shadow .4s; }
.t4-a-steps li.is-done .t4-a-step-mark { border-color: #68d9d6; background: #68d9d6; }
.t4-a-steps li.is-done .t4-a-step-title { color: #9fe8e6; }
.t4-a-steps li.is-current .t4-a-step-mark { border-color: #e7fffd; background: #7cf0ed; box-shadow: 0 0 0 4px #102e3c, 0 0 0 9px #68d9d638; transform: scale(1.18); }
.t4-a-steps li.is-current .t4-a-step-title { color: #f4fffe; text-shadow: 0 0 16px #68d9d688; }
.t4-a-services { padding-block: var(--a-space) 40px; scroll-margin-top: 115px; }
.t4-a-services-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 50px; }
.t4-a-services h2, .t4-a-lab h2, .t4-a-products h2#t4-products-title { font-size: var(--a-title); line-height: 1.55; font-weight: 850; letter-spacing: -.03em; margin: 0; }
.t4-a-services-heading > p { font-size: 13px; line-height: 2.1; color: var(--t4-muted); margin-bottom: 10px; }
.t4-a-service-row { display: grid; grid-template-columns: 38px 1.2fr 1fr 142px 44px; align-items: center; gap: 24px; border-top: var(--a-line); min-height: 154px; padding-inline: 14px; margin-inline: -14px; border-radius: 20px; color: inherit; text-decoration: none; position: relative; }
.t4-a-service-row:last-child { border-bottom: var(--a-line); }
.t4-a-service-row:hover, .t4-a-service-row:focus-visible { background: color-mix(in srgb, var(--t4-blue-soft), transparent 30%); color: inherit; }
.t4-a-service-row:hover h3, .t4-a-service-row:focus-visible h3 { color: var(--t4-blue); }
.t4-a-service-number { color: var(--t4-muted); font-size: 11px; align-self: start; padding-top: 43px; }
.t4-a-service-name h3 { font-size: clamp(20px,1.9vw,26px); font-weight: 750; line-height: 1.8; margin: 0 0 7px; letter-spacing: -.02em; transition: color .25s; }
.t4-a-service-name p { font-size: 10px; color: var(--t4-muted); margin: 0; }
.t4-a-service-description { color: var(--t4-muted); font-size: 13px; line-height: 2.2; max-width: 285px; margin: 0; }
.t4-a-service-object img { width: 142px; height: 125px; object-fit: contain; transition: transform .4s var(--a-rhythm); }
.t4-a-service-row:hover .t4-a-service-object img { transform: rotate(-5deg) scale(1.08); }
.t4-a-service-open { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--t4-ink); border: 1px solid var(--t4-line); border-radius: 50%; background: var(--t4-surface); transition: color .2s, border-color .2s, background .2s; }
.t4-a-service-open svg { display: block; }
.t4-a-service-row:hover .t4-a-service-open, .t4-a-service-row:focus-visible .t4-a-service-open { color: #fff; border-color: var(--t4-blue); background: var(--t4-blue); }
.t4-a-services-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px; }
/* A real vector outline/finish comparison, retaining the existing range + drag control. */
.t4-a-lab { padding-block: 65px var(--a-space); display: grid; grid-template-columns: .7fr 1fr; gap: 70px; align-items: center; }
.t4-a-lab-copy > p:not(.t4-a-kicker) { font-size: 13px; line-height: 2.2; color: var(--t4-muted); margin-block: 20px 30px; }
.t4-a-lab label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.t4-a-range { display: flex; align-items: center; gap: 15px; font-size: 10px; color: var(--t4-muted); direction: ltr; }
.t4-a-range span { white-space: nowrap; }
.t4-a-range input { width: 100%; min-width: 0; accent-color: var(--t4-blue); cursor: ew-resize; height: 28px; }
.t4-a-lab output { color: var(--t4-blue); font-size: 11px; display: inline-block; margin-top: 10px; margin-inline-end: 14px; }
.t4-a-lab small { font-size: 10px; color: var(--t4-muted); }
.t4-home .t4-a-lab-browser { border: 0; box-shadow: none; background: transparent; border-radius: 0; transform: none; overflow: visible; }
.t4-home .t4-a-lab-screen { aspect-ratio: 800/680; min-height: 0; padding: 0; background: transparent; overflow: hidden; position: relative; }
.t4-a-sketch, .t4-a-finished { position: absolute; inset: 0; }
.t4-a-sketch svg, .t4-a-finished svg { width: 100%; height: 100%; }
.t4-a-sketch svg :is(path,rect,circle) { fill: none !important; stroke: #8ca7b2 !important; stroke-width: 1 !important; stroke-dasharray: none; }
.t4-a-sketch [data-art-piece="care"] { opacity: .4; }
.t4-a-finished { clip-path: inset(0 calc(100% - var(--design-reveal)) 0 0); }
.t4-a-divider { position: absolute; left: var(--design-reveal); top: 9%; bottom: 7%; width: 1px; background: var(--t4-blue); pointer-events: none; }
.t4-a-divider span { position: absolute; top: 50%; left: -13px; width: 27px; height: 42px; border-radius: 20px; background: var(--t4-surface); border: 1px solid var(--t4-blue); }
.t4-a-divider span::after { content: ''; position: absolute; inset: 13px 9px; border-inline: 1px solid var(--t4-blue); }
/* Real WordPress work, products and editorial content. */
.t4-home .t4-a-work { background: var(--t4-soft); padding-block: var(--a-space); border-radius: 36px 36px 0 0; }
.t4-a-work .t4-section-heading { align-items: center; margin-bottom: 55px; }
.t4-a-work .t4-section-heading h2 { font-size: var(--a-title); line-height: 1.55; }
.t4-a-work h2 span { color: var(--t4-blue); }
.t4-a-work .t4-project-image { border-radius: 22px; }
.t4-home .t4-a-work .t4-work-grid > .t4-project-card:only-child { grid-template-columns: 1.45fr 1fr; gap: 70px; }
.t4-home .t4-a-work .t4-work-grid > .t4-project-card:only-child .t4-project-image { aspect-ratio: 1.55; }
.t4-a-work .t4-project-caption h3 { overflow-wrap: anywhere; }
.t4-home .t4-a-products { padding-block: 110px var(--a-space); overflow: visible; }
.t4-a-product-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.t4-a-product-intro h2 span { color: var(--t4-blue); }
.t4-a-product-lead { font-size: 13px; color: var(--t4-muted); line-height: 2.2; margin-top: 24px; }
.t4-a-modules { overflow: visible; min-height: 280px; }
.t4-a-product-intro { overflow: visible; }
.t4-a-modules svg { width: 100%; height: auto; display: block; overflow: visible; }
.t4-a-products-caption { display: flex; justify-content: space-between; padding-block: 18px; border-block: var(--a-line); font-size: 11px; margin-bottom: 38px; }
.t4-a-products-caption > :last-child { color: var(--t4-muted); }
.t4-home .t4-a-products .t4-product-grid { gap: 28px; }
.t4-home .t4-a-products .t4-product-grid article, .t4-home .t4-a-products .t4-standard-product { border: 0; background: transparent; }
.t4-a-products .t4-product-info h2 { line-height: 1.9; }
.t4-a-products .t4-standard-product img { border-radius: 16px; }
.t4-home .t4-a-journal { padding-block: var(--a-space); }
.t4-a-journal .t4-post-card:only-child { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px 45px; align-items: start; }
.t4-a-journal .t4-post-card:only-child .t4-post-image { grid-row: 1/6; margin: 0; aspect-ratio: 1.8; }
.t4-a-journal .t4-post-card:only-child .t4-post-meta { margin-top: 20px; }
.t4-a-journal .t4-post-card:only-child h3 { font-size: 27px; }
.t4-a-journal .t4-post-card:only-child .t4-post-excerpt { max-width: 520px; }
.t4-home .t4-footer-invitation { position: relative; border-bottom-color: var(--t4-line); }
.t4-home .t4-footer-invitation::before { content: ''; position: absolute; width: 90px; height: 90px; border: 20px solid var(--t4-teal); border-radius: 50%; opacity: .12; left: 29%; bottom: 22%; pointer-events: none; }
[data-theme="dark"] .t4-a-hero h1 em, [data-theme="dark"] .t4-a-intro h2 span, [data-theme="dark"] .t4-a-product-intro h2 span { color: #50b9ef; }
/* Pinned enhancement is selected by CSS before paint: JS cannot change section height. */
@media (min-width: 1024px) and (min-height: 740px) and (prefers-reduced-motion: no-preference) {
  .t4-atelier-js .t4-a-sequence { height: 225svh; }
  .t4-atelier-js .t4-a-sequence-sticky { position: sticky; top: 100px; padding-block: 30px; }
  .t4-atelier-js .t4-a-sequence-head { margin-bottom: 18px; }
  .t4-atelier-js .t4-a-assembly-art > svg { height: min(500px,calc(100svh - 330px)); }
  .t4-atelier-js .t4-a-assembly-art { max-width: 670px; margin-inline: auto; }
}
@media (min-width: 1600px) { .t4-a-hero-grid { min-height: 700px; } }
@media (max-width: 1179px) {
  .t4-a-hero-grid { grid-template-columns: 1fr 1fr; min-height: 620px; }
  .t4-a-hero h1 { font-size: clamp(42px, 4.6vw, 56px); }
  .t4-a-hero-art { margin-inline: -15px -25px; }
  .t4-a-hero-art figcaption { padding-inline: 50px 30px; }
  .t4-a-art-note { display: none; }
  .t4-a-sequence-grid { gap: 20px; }
  .t4-a-service-row { grid-template-columns: 28px 1.1fr 1fr 98px 44px; gap: 18px; }
  .t4-a-service-object img { width: 98px; height: 100px; }
  .t4-a-service-name h3 { font-size: 21px; }
  .t4-a-lab { gap: 35px; }
}
@media (max-width: 1023px) {
  .t4-a-hero-grid { min-height: 540px; gap: 10px; }
  .t4-a-hero-art { margin-inline: -10px; }
  .t4-a-hero h1 { font-size: clamp(38px, 5.4vw, 52px); }
  .t4-a-hero-lead { font-size: 14px; }
  .t4-a-hero-detail { font-size: 12px; }
  .t4-a-actions { gap: 18px; }
  .t4-home .t4-a-primary, .t4-a-portfolio { padding-inline: 20px; font-size: 12px; }
  .t4-a-intro { grid-template-columns: .2fr 1fr; gap: 20px; }
  .t4-a-sequence-grid { grid-template-columns: 1fr 1fr; }
  .t4-a-sequence-copy h2 { font-size: 29px; }
  .t4-a-stages h3 { font-size: 15px; }
  .t4-a-stages li { gap: 12px; }
  .t4-a-stages li::after { display: none; }
  .t4-a-sequence-sticky { padding-block: 35px; }
  .t4-a-service-row { grid-template-columns: 25px 1.25fr 1fr 44px; min-height: 140px; }
  .t4-a-service-object { display: none; }
  .t4-a-service-name p { max-width: 220px; line-height: 2; }
  .t4-a-service-name h3 { font-size: 19px; }
  .t4-a-product-intro { gap: 25px; }
  .t4-home .t4-a-work .t4-work-grid > .t4-project-card:only-child { gap: 35px; }
}
@media (max-width: 639px) {
  .t4-home { --a-space: 68px; --a-title: 34px; }
  .t4-a-hero { padding-top: 24px; }
  .t4-a-hero-top .t4-a-kicker { font-size: 10px; gap: 10px; }
  .t4-a-edition { display: none; }
  .t4-a-hero-grid { display: flex; flex-direction: column; padding-block: 27px 22px; gap: 12px; min-height: 0; }
  .t4-a-hero-copy { align-self: stretch; padding: 0; }
  .t4-a-hero h1 { font-size: clamp(36px, 10.4vw, 58px); line-height: 1.45; margin-bottom: 20px; }
  .t4-a-hero-lead { font-size: 13px; margin-bottom: 14px; }
  .t4-a-hero-detail { font-size: 11px; }
  .t4-a-actions { margin-top: 24px; gap: 20px; }
  .t4-a-link { font-size: 11px; }
  .t4-home .t4-a-primary, .t4-a-portfolio { font-size: 11px; min-height: 48px; padding-inline: 19px; }
  .t4-a-hero-art { width: calc(100% + 28px); margin: 2px -14px 0; }
  .t4-a-hero-art figcaption { justify-content: center; padding: 0; margin-top: -4px; font-size: 9px; }
  .t4-a-hero-foot { padding-block: 16px; font-size: 10px; }
  .t4-a-hero-foot > span { display: none; }
  .t4-a-intro { display: block; }
  .t4-a-intro .t4-a-kicker { padding: 0; margin-bottom: 18px; font-size: 22px; }
  .t4-a-intro h2 { font-size: 30px; line-height: 1.7; }
  .t4-a-intro > p:last-child { font-size: 12px; margin-top: 22px; }
  .t4-a-intro > p:last-child br { display: none; }
  .t4-a-sequence { border-radius: 22px 22px 0 0; }
  .t4-a-sequence-head { margin-bottom: 30px; }
  .t4-a-sequence-head .t4-a-kicker { font-size: 11px; }
  .t4-a-motion { font-size: 10px; padding-inline: 14px; }
  .t4-a-sequence-grid { display: flex; flex-direction: column; gap: 10px; }
  .t4-a-sequence-copy { width: 100%; }
  .t4-a-sequence-copy h2 { font-size: 31px; }
  .t4-a-sequence-intro { font-size: 11px; margin-bottom: 26px; }
  .t4-a-stages h3 { font-size: 16px; }
  .t4-a-stages li { padding-block: 16px; gap: 17px; }
  .t4-a-stages p { font-size: 10px; }
  .t4-a-assembly { width: 100%; margin-top: 14px; }
  .t4-a-assembly-caption { padding: 0 12px 14px; }
  .t4-a-steps { margin-inline: 0; }
  .t4-a-step-title { font-size: 10px; }
  .t4-a-services { padding-bottom: 30px; }
  .t4-a-services-heading { display: block; margin-bottom: 30px; }
  .t4-a-services-heading > p { font-size: 12px; margin-top: 22px; }
  .t4-a-service-row { grid-template-columns: 22px 1fr 40px; gap: 0 12px; padding-block: 23px; min-height: 0; }
  .t4-a-service-number { padding-top: 8px; }
  .t4-a-service-name h3 { font-size: 19px; }
  .t4-a-service-name p { font-size: 9px; }
  .t4-a-service-description { grid-column: 2; font-size: 11px; margin-top: 12px; max-width: none; }
  .t4-a-service-open { grid-column: 3; grid-row: 1; align-self: start; margin-top: 2px; width: 40px; height: 40px; }
  .t4-a-services-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .t4-a-lab { display: flex; flex-direction: column; padding-top: 35px; gap: 25px; }
  .t4-a-lab-copy, .t4-a-lab-browser { width: 100%; }
  .t4-a-lab-copy > p:not(.t4-a-kicker) { font-size: 12px; }
  .t4-a-lab label { font-size: 11px; }
  .t4-a-work .t4-section-heading { gap: 22px; align-items: flex-start; margin-bottom: 35px; }
  .t4-home .t4-a-work .t4-work-grid > .t4-project-card:only-child { display: block; }
  .t4-home .t4-a-work .t4-work-grid > .t4-project-card:only-child h3 { font-size: 23px; margin-block: 22px 0; }
  .t4-a-work .t4-work-grid { display: block; }
  .t4-a-work .t4-project-card + .t4-project-card { margin-top: 35px; }
  .t4-a-work .t4-project-image { aspect-ratio: 1.55 !important; }
  .t4-home .t4-a-products { padding-top: 65px; }
  .t4-a-product-intro { display: block; }
  .t4-a-product-lead { font-size: 12px; }
  .t4-a-modules { margin-block: 10px; }
  .t4-a-products-caption { font-size: 10px; margin-bottom: 27px; }
  .t4-home .t4-a-products .t4-product-grid { grid-template-columns: minmax(0,1fr); gap: 38px; }
  .t4-a-journal .t4-post-card:only-child { display: block; }
  .t4-a-journal .t4-post-card:only-child h3 { font-size: 22px; }
  .t4-home .t4-footer-invitation::before { display: none; }
}
@media (max-width: 359px) {
  .t4-a-hero h1 { font-size: 34px; }
  .t4-a-hero .t4-a-actions { gap: 12px; }
  .t4-a-hero .t4-a-link { font-size: 10px; }
  .t4-home .t4-a-primary, .t4-a-portfolio { padding-inline: 15px; font-size: 10px; gap: 9px; }
  .t4-a-intro h2 { font-size: 26px; }
  .t4-a-stages p { font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .t4-atelier-js .t4-a-service-row { opacity: 0; visibility: hidden; transform: translateY(18px); pointer-events: none; transition: opacity .26s var(--a-rhythm), transform .3s var(--a-rhythm), background .25s, box-shadow .25s, color .25s, visibility 0s linear .3s; }
  .t4-atelier-js .t4-a-service-row.is-in { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .26s var(--a-rhythm), transform .3s var(--a-rhythm), background .25s, box-shadow .25s, color .25s, visibility 0s; }
  .t4-atelier-js .t4-a-service-row.is-in:hover, .t4-atelier-js .t4-a-service-row.is-in:focus-visible { transform: translateY(-5px) scale(1.018); z-index: 1; box-shadow: 0 16px 34px #102e3c10; }
}
@media (prefers-reduced-motion: reduce) {
  .t4-home *, .t4-home *::before, .t4-home *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .t4-a-service-row:hover .t4-a-service-object img { transform: none; }
  .t4-a-stages li.is-current { transform: none; }
  .t4-a-step-title { color: #d7f6f4; text-shadow: none; }
  .t4-a-steps-track i { transform: none; }
}

/* Portfolio showcase — a dark screening room with a live preview stage. */
.t4-home .t4-a-showcase { --sc-night: #0b1f29; position: relative; isolation: isolate; padding-block: var(--a-space, 110px); color: #e6eff2; background: radial-gradient(900px 480px at 88% 0%, rgb(0 120 184 / 34%), transparent 62%), radial-gradient(700px 420px at 0% 100%, rgb(8 164 167 / 26%), transparent 60%), var(--sc-night); border-radius: 40px 40px 0 0; }
[data-theme="dark"] .t4-home .t4-a-showcase { --sc-night: #081820; }
.t4-a-showcase .t4-section-heading { align-items: flex-end; margin-bottom: clamp(32px, 4vw, 56px); }
.t4-a-showcase .t4-eyebrow { color: #7fe0de; }
.t4-a-showcase .t4-section-heading h2 { color: #fff; font-size: var(--a-title, clamp(34px, 4vw, 58px)); line-height: 1.5; }
.t4-a-showcase h2 span { background: linear-gradient(100deg, #7fe0de, #4cb4ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t4-showcase-aside { display: grid; justify-items: start; gap: 18px; max-width: 360px; }
.t4-showcase-aside p { margin: 0; color: #aac1c8; font-size: 14px; line-height: 2; }
.t4-showcase-all { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 99px; color: #fff; font-size: 13.5px; font-weight: 750; transition: background .3s, color .3s, border-color .3s; }
.t4-showcase-all:hover { border-color: #fff; background: #fff; color: #0b1f29; }
.t4-showcase-all svg { transition: transform .3s var(--t4-ease); }
.t4-showcase-all:hover svg { transform: translateX(-4px); }

.t4-showcase { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.t4-showcase-stage { position: sticky; top: calc(var(--t4-header-clearance, 120px) + 4px); padding: 12px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 32px; background: rgb(255 255 255 / 4%); box-shadow: 0 40px 80px -40px rgb(0 0 0 / 60%); }
.t4-showcase-chrome { display: flex; align-items: center; gap: 7px; padding: 6px 10px 14px; }
.t4-showcase-chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 20%); }
.t4-showcase-chrome i:first-child { background: #7fe0de; }
.t4-showcase-chrome span { flex: 1; overflow: hidden; margin-inline-start: 12px; padding: 5px 14px; border-radius: 99px; background: rgb(255 255 255 / 7%); color: #9ab3ba; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; direction: rtl; }
.t4-showcase-screens { position: relative; overflow: hidden; aspect-ratio: 16 / 10.4; border-radius: 22px; background: #10303e; }
.t4-showcase-screen { position: absolute; inset: 0; display: block; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.1s var(--t4-ease); pointer-events: none; }
.t4-showcase-screen.is-active { opacity: 1; transform: none; pointer-events: auto; }
.t4-showcase-screen :is(img, .t4-image-placeholder) { display: block; width: 100%; height: 100%; object-fit: cover; }
.t4-showcase-caption { position: absolute; inset: auto 0 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 60px 22px 20px; background: linear-gradient(0deg, rgb(8 24 32 / 82%), transparent); pointer-events: none; }
.t4-showcase-count { color: rgb(255 255 255 / 70%); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.t4-showcase-count b { color: #fff; font-size: 30px; font-weight: 850; }
.t4-showcase-open { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 99px; background: #fff; color: #0b1f29; font-size: 13.5px; font-weight: 800; pointer-events: auto; transition: background .3s, transform .35s var(--t4-ease); }
.t4-showcase-open:hover { background: #7fe0de; transform: translateY(-2px); }
.t4-showcase-open svg { transition: transform .3s var(--t4-ease); }
.t4-showcase-open:hover svg { transform: translateX(-4px); }

.t4-showcase-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.t4-showcase-item { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) 42px; align-items: center; gap: 14px; overflow: hidden; padding: 18px 20px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 24px; color: rgb(255 255 255 / 62%); transition: background .35s, border-color .35s, color .35s, transform .45s var(--t4-ease); }
.t4-showcase-item:hover { color: #fff; transform: translateX(-4px); }
.t4-showcase-item.is-active { border-color: rgb(127 224 222 / 35%); background: rgb(255 255 255 / 7%); color: #fff; }
.t4-showcase-num { color: transparent; font-size: 34px; font-weight: 850; line-height: 1; -webkit-text-stroke: 1px rgb(255 255 255 / 35%); transition: color .35s, -webkit-text-stroke-color .35s; }
.t4-showcase-item.is-active .t4-showcase-num { color: #7fe0de; -webkit-text-stroke-color: #7fe0de; }
.t4-showcase-copy { display: grid; gap: 2px; min-width: 0; }
.t4-showcase-copy small { color: #7fe0de; font-size: 11.5px; font-weight: 700; opacity: .8; }
.t4-showcase-copy strong { overflow: hidden; font-size: 17px; font-weight: 850; line-height: 1.7; white-space: nowrap; text-overflow: ellipsis; }
.t4-showcase-excerpt { display: -webkit-box; overflow: hidden; max-height: 0; margin-top: 0; color: #aac1c8; font-size: 12.5px; line-height: 1.95; -webkit-line-clamp: 2; -webkit-box-orient: vertical; opacity: 0; transition: max-height .5s var(--t4-ease), opacity .4s, margin .4s; }
.t4-showcase-item.is-active .t4-showcase-excerpt { max-height: 60px; margin-top: 4px; opacity: 1; }
.t4-showcase-arrow { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; transition: background .3s, color .3s, border-color .3s, transform .45s var(--t4-ease); }
.t4-showcase-item.is-active .t4-showcase-arrow { border-color: #fff; background: #fff; color: #0b1f29; transform: rotate(-12deg); }
.t4-showcase-timer { position: absolute; inset-inline: 20px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--t4-teal), #7fe0de); transform: scaleX(0); transform-origin: right; }
.t4-showcase.is-playing .t4-showcase-item.is-active .t4-showcase-timer { animation: t4-showcase-timer var(--showcase-delay, 5s) linear forwards; }
@keyframes t4-showcase-timer { to { transform: scaleX(1); } }

@media (max-width: 1023px) {
  .t4-showcase { grid-template-columns: minmax(0, 1fr); }
  .t4-showcase-stage { position: relative; top: auto; }
  .t4-a-showcase .t4-section-heading { align-items: flex-start; }
}
@media (max-width: 767px) {
  .t4-home .t4-a-showcase { border-radius: 28px 28px 0 0; }
  .t4-showcase-stage { padding: 8px; border-radius: 24px; }
  .t4-showcase-screens { border-radius: 18px; }
  .t4-showcase-caption { padding: 40px 14px 14px; }
  .t4-showcase-count b { font-size: 22px; }
  .t4-showcase-open { min-height: 40px; padding: 0 16px; font-size: 12.5px; }
  .t4-showcase-item { grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 10px; padding: 14px; border-radius: 20px; }
  .t4-showcase-num { font-size: 26px; }
  .t4-showcase-arrow { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .t4-showcase-screen { transition: opacity .2s; transform: none; }
}
.t4-a-br-m { display: none; }
@media (max-width: 767px) { .t4-a-br-m { display: inline; } }
@media (max-width: 479px) { .t4-a-hero h1 { font-size: clamp(30px, 9vw, 36px); } }