/* Tik4 creative studio — shared visual language, native RTL, no animation library. */
:root, [data-theme="light"] { --t4-paper: #f5f9fa; --t4-soft: #eaf2f5; --t4-line: #dce6e9; --t4-studio-radius: 22px; }
[data-theme="dark"] { --t4-paper: #10212b; --t4-soft: #203944; --t4-line: #344c56; }
.t4-site { overflow-wrap: break-word; }
.t4-site svg { flex-shrink: 0; }
.t4-studio-kicker { color: var(--t4-blue); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.t4-quiet-link { color: var(--t4-ink); font-size: 13px; font-weight: 650; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--t4-line); transition: border-color .2s, color .2s; }
.t4-quiet-link:hover { color: var(--t4-blue); border-color: var(--t4-blue); }
.t4-conversation-button svg { width: 24px; height: 24px; }
.t4-site .t4-conversation-button { gap: 13px; padding: 16px 22px; border-radius: 12px; }
/* Reference navigation: six real page links in a two-column menu. */
.t4-header-inner { gap: 30px; min-height: 100px; }
.t4-header .t4-brand-mark { width: 45px; height: 52px; }
.t4-header .t4-brand div > span { color: var(--t4-blue); }
.t4-header .nav-primary { font-size: 14px; }
.t4-header .nav-primary > ul { gap: 23px; }
.t4-header .nav-primary > ul > li > a { font-weight: 650; }
.t4-header-navigation { display: flex; align-items: center; justify-content: center; }
.t4-header .menu-header > li > ul { width: 700px; max-width: min(700px, 82vw); grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 18px; padding: 28px; border-radius: 24px; inset-inline-start: -16px; top: calc(100% - 4px); box-shadow: 0 22px 45px rgb(16 46 60 / 12%); }
.t4-header .t4-mega-link { align-items: center; gap: 18px; padding: 16px 12px; min-height: 100px; border-radius: 14px; }
.t4-mega-icon { width: 58px; height: 58px; border-radius: 17px; background: var(--service-color); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 4%); }
.t4-mega-icon svg { width: 32px; height: 32px; transition: transform .35s var(--t4-ease); }
.t4-mega-link:hover .t4-mega-icon svg { transform: translateY(-2px) rotate(-5deg); }
.t4-header .t4-mega-link > span:last-child > span:first-child { font-size: 16px; font-weight: 750; line-height: 1.7; }
.t4-header .t4-mega-link > span:last-child > span:last-child:not(:first-child) { font-size: 12px; line-height: 1.9; color: var(--t4-muted); }
.t4-submenu-toggle span { margin: 0 !important; }
.t4-site .t4-header-actions .t4-theme-button { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.t4-theme-button svg { position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; transition: opacity .2s; }
.t4-theme-sun, [data-theme="dark"] .t4-theme-moon { opacity: 0; }
.t4-theme-moon, [data-theme="dark"] .t4-theme-sun { opacity: 1; }
.t4-mobile-panel .t4-mega-link { align-items: center; gap: 14px; padding: 13px 12px; }
.t4-mobile-panel .t4-mega-icon { width: 42px; height: 42px; border-radius: 12px; }
.t4-mobile-panel .t4-mega-icon svg { width: 26px; height: 26px; }
/* Hero: a living illustration canvas alongside confident Persian typography. */
.t4-studio-hero { display: grid; grid-template-columns: .9fr 1.13fr; gap: 0 60px; align-items: center; padding-top: 68px; }
.t4-studio-hero-copy { position: relative; z-index: 2; }
.t4-studio-hero h1 { font-weight: 900; font-size: clamp(44px, 4.8vw, 70px); line-height: 1.58; letter-spacing: -.045em; margin: 0; }
.t4-type-window { position: relative; color: var(--t4-blue); white-space: nowrap; }
.t4-type-window svg { position: absolute; bottom: -3px; inset-inline: 0; width: 100%; height: 16px; stroke: var(--t4-teal); stroke-width: 3; stroke-linecap: round; }
.t4-studio-lead { font-size: 14px; color: var(--t4-muted); line-height: 2.15; max-width: 410px; margin-top: 26px; }
.t4-studio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.t4-hero-signature { display: flex; align-items: center; gap: 12px; color: var(--t4-muted); font-size: 11px; margin-top: 34px; }
.t4-signature-line { width: 38px; height: 1px; background: var(--t4-teal); }
.t4-studio-canvas { position: relative; min-width: 0; background: #f5f9fa; border: 1px solid var(--t4-line); border-radius: 28px 28px 90px 28px; padding: 20px 0 24px; color: #244653; transform: perspective(1400px) rotateX(var(--canvas-x, 0deg)) rotateY(var(--canvas-y, 0deg)); transition: transform .6s var(--t4-ease); }
.t4-canvas-topline, .t4-canvas-bottomline { display: flex; align-items: center; justify-content: space-between; padding-inline: 24px; font-size: 10px; }
.t4-canvas-topline { padding-bottom: 12px; }
.t4-canvas-bottomline { margin-top: 5px; padding-inline-end: 58px; }
.t4-canvas-dots { display: inline-flex; gap: 5px; direction: ltr; }
.t4-canvas-dots i { width: 5px; height: 5px; border: 1px solid #8babb9; border-radius: 50%; }
.t4-canvas-dots i:last-child { background: #08a4a7; border-color: #08a4a7; }
.t4-canvas-image { overflow: hidden; }
.t4-canvas-image img { display: block; width: 100%; height: 445px; object-fit: cover; object-position: center; transform: translateY(var(--hero-shift, 0px)) scale(1.04); }
.t4-canvas-label { position: absolute; display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 12px; background: white; border: 1px solid #e0e9ed; box-shadow: 0 8px 24px rgb(16 46 60 / 7%); font-size: 11px; color: #102e3c; transform: translateY(var(--label-shift, 0px)); }
.t4-canvas-label svg { width: 25px; height: 25px; color: #0078b8; }
.t4-label-design { top: 96px; inset-inline-start: -25px; }
.t4-label-growth { bottom: 80px; inset-inline-end: -22px; }
.t4-signal { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.t4-signal b { width: 5px; height: 12px; background: #08a4a7; border-radius: 3px; transform-origin: bottom; }
.t4-signal b:nth-child(2) { height: 18px; }.t4-signal b:nth-child(3) { height: 24px; }
.t4-tiny-loop { width: 35px; height: 18px; border: 2px solid #08a4a7; border-radius: 50%; transform: rotate(-28deg); position: relative; }
.t4-tiny-loop::after { content: ''; position: absolute; width: 35px; height: 18px; border: 2px solid #0078b8; border-radius: 50%; transform: rotate(60deg); inset: -2px; }
.t4-hero-bottom { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--t4-line); padding: 45px 0 26px; color: var(--t4-muted); font-size: 11px; }
.t4-scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.t4-scroll-track { width: 17px; height: 27px; border: 1px solid var(--t4-muted); border-radius: 10px; display: flex; justify-content: center; padding: 5px; }
.t4-scroll-track i { display: block; width: 3px; height: 6px; background: var(--t4-blue); border-radius: 5px; }
/* Scroll narrative. Content remains readable without JavaScript. */
.t4-manifesto { padding-block: 115px 105px; position: relative; }
.t4-manifesto h2 { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.9; font-weight: 750; letter-spacing: -.02em; max-width: 1000px; }
.t4-manifesto h2 span { transition: color .4s; color: var(--t4-ink); }
.t4-motion-enabled .t4-manifesto h2 span { color: var(--t4-muted); }
.t4-motion-enabled .t4-manifesto h2 span.is-lit { color: var(--t4-blue); }
.t4-manifesto-note { display: flex; align-items: center; justify-content: flex-end; gap: 25px; margin-top: 28px; font-size: 12px; color: var(--t4-muted); }
.t4-connection-mark { display: flex; direction: ltr; }
.t4-connection-mark i { width: 40px; height: 40px; border: 1.5px solid var(--t4-blue); border-radius: 12px; transform: rotate(35deg); margin-inline-start: -13px; }
.t4-connection-mark i:nth-child(2) { border-color: var(--t4-teal); border-radius: 50%; }
.t4-studio-story { background: #102e3c; color: #f3f8fa; border-radius: 42px 42px 0 0; padding-block: 70px 50px; position: relative; }
.t4-story-heading { display: flex; align-items: flex-end; gap: 25px; justify-content: space-between; padding-bottom: 42px; border-bottom: 1px solid #36505b; }
.t4-story-heading .t4-studio-kicker { color: #75d4d2; }
.t4-story-heading h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.6; font-weight: 800; }
.t4-story-heading > p { color: #afc5cd; font-size: 12px; margin-inline-start: auto; }
.t4-motion-toggle { font-size: 10px; color: #d9e7ed; border: 1px solid #58717b; border-radius: 30px; padding: 9px 15px; align-self: flex-end; min-height: 40px; }
.t4-story-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; position: relative; }
.t4-story-chapter { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; padding-block: 65px; scroll-margin-top: 140px; }
.t4-chapter-label { display: flex; align-items: center; gap: 15px; color: #a5c3cd; font-size: 12px; margin-bottom: 26px; }
.t4-chapter-label > span { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #43616e; border-radius: 50%; color: #80d9d4; font-size: 12px; }
.t4-story-chapter h3 { font-weight: 800; font-size: clamp(31px, 3vw, 44px); line-height: 1.75; }
.t4-chapter-text { color: #bed0d7; font-size: 13px; line-height: 2.3; margin-top: 20px; }
.t4-chapter-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 24px 0; }
.t4-chapter-tags li { font-size: 10px; color: #d7e5ea; border: 1px solid #365560; border-radius: 30px; padding: 5px 12px; }
.t4-story-link { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; width: fit-content; font-size: 12px; color: #7addd5; min-height: 44px; }
.t4-link-line { width: 32px; height: 2px; border-radius: 3px; background: currentColor; transition: width .3s; }
.t4-story-link:hover .t4-link-line { width: 55px; }
.t4-story-secondary { font-size: 11px; color: #bed0d7; width: fit-content; border-bottom: 1px solid #43616e; margin-top: 10px; }
.t4-story-art-column { min-width: 0; padding-block: 65px; }
.t4-story-art { position: sticky; top: 140px; background: #f5f9fa; border-radius: 24px; overflow: hidden; color: #173c4b; box-shadow: 0 20px 40px rgb(0 0 0 / 8%); }
.t4-story-art-top { display: flex; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #e1eaed; font-size: 10px; }
.t4-story-scenes { display: grid; position: relative; }
.t4-story-scene { grid-area: 1/1; opacity: 0; visibility: hidden; transform: translateY(18px) scale(.98); transition: opacity .55s, transform .8s var(--t4-ease), visibility .55s; margin: 0; }
.t4-story-scene.is-active { opacity: 1; visibility: visible; transform: none; }
.t4-story-scene img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; }
.t4-story-scene figcaption { text-align: center; font-size: 11px; padding: 17px 16px 8px; }
.t4-story-dots { display: flex; justify-content: space-between; gap: 12px; padding: 15px 22px 23px; }
.t4-story-dots a { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 10px; color: #6c8791; min-height: 40px; }
.t4-story-dots i { display: block; height: 3px; background: #dbe7eb; border-radius: 3px; position: relative; overflow: hidden; }
.t4-story-dots a[aria-current] { color: #0078b8; }
.t4-story-dots a[aria-current] i::after { content: ''; position: absolute; inset: 0; background: #08a4a7; transform: scaleX(var(--chapter-progress, 0)); transform-origin: right; }
.t4-chapter-mobile-image { display: none; }
/* A keyboard, touch and pointer operated design comparison. */
.t4-design-lab { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 70px; padding-block: 115px; }
.t4-lab-copy h2 { font-size: clamp(30px, 3vw, 43px); line-height: 1.7; font-weight: 800; }
.t4-lab-copy > p:not(.t4-studio-kicker) { font-size: 13px; line-height: 2.2; color: var(--t4-muted); margin-block: 22px 30px; }
.t4-lab-copy label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.t4-lab-copy output { color: var(--t4-blue); font-size: 14px; }
.t4-lab-copy input[type="range"] { direction: ltr; width: 100%; height: 34px; cursor: ew-resize; accent-color: var(--t4-blue); margin-top: 10px; }
.t4-lab-range-labels { display: flex; justify-content: space-between; direction: ltr; font-size: 10px; color: var(--t4-muted); margin-bottom: 22px; }
.t4-lab-browser { min-width: 0; border: 1px solid var(--t4-line); border-radius: 18px; overflow: hidden; background: var(--t4-surface); box-shadow: 0 18px 50px rgb(16 46 60 / 7%); }
.t4-lab-browser-bar { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; color: var(--t4-muted); font-size: 10px; border-bottom: 1px solid var(--t4-line); }
.t4-lab-screen { position: relative; aspect-ratio: 1.5; direction: rtl; }
.t4-lab-layer { position: absolute; inset: 0; padding: 24px; }
.t4-lab-wire { color: #91a6b0; background: #f5f8fa; background-image: linear-gradient(#dce6eb70 1px, transparent 1px), linear-gradient(90deg, #dce6eb70 1px, transparent 1px); background-size: 16px 16px; }
.t4-wire-nav { display: flex; align-items: center; gap: 16px; }
.t4-wire-nav b { width: 56px; height: 16px; border: 1px solid; margin-inline-end: auto; }.t4-wire-nav i { width: 30px; height: 3px; background: #bacbd2; }
.t4-wire-content { display: flex; gap: 25px; height: 66%; margin-top: 25px; align-items: center; }
.t4-wire-content > div { width: 45%; }.t4-wire-content > span { width: 55%; height: 100%; border: 1px solid; }.t4-wire-content svg { width: 100%; height: 100%; }
.t4-wire-content b { display: block; width: 90%; height: 12px; border: 1px solid; margin-bottom: 12px; }.t4-wire-content b:nth-child(2) { width: 70%; }.t4-wire-content p { height: 4px; width: 95%; background: #c8d5dc; margin-top: 9px; }.t4-wire-content i { display: block; margin-top: 18px; width: 70px; height: 25px; border: 1px solid; border-radius: 3px; }
.t4-wire-cards { display: flex; gap: 12px; margin-top: 20px; }.t4-wire-cards i { width: 33%; height: 28px; border: 1px solid; }
.t4-lab-finished { background: #f5f9fa; color: #102e3c; clip-path: inset(0 calc(100% - var(--design-reveal)) 0 0); }
.t4-demo-nav { display: flex; align-items: center; gap: 15px; font-size: 12px; font-weight: 800; color: #0078b8; }.t4-demo-nav span { margin-inline-end: auto; }.t4-demo-nav i { width: 28px; height: 3px; border-radius: 4px; background: #83a8b8; }
.t4-demo-hero { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 12px; height: 73%; margin-top: 12px; }.t4-demo-hero small { font-size: 7px; color: #43788d; }.t4-demo-hero strong { display: block; font-size: clamp(15px, 1.6vw, 25px); line-height: 1.85; margin-top: 8px; }.t4-demo-hero span { display: block; font-size: 7px; margin-top: 10px; }.t4-demo-hero b { display: block; width: fit-content; border-radius: 5px; background: #0078b8; color: white; padding: 7px 13px; font-size: 8px; margin-top: 15px; }.t4-demo-hero img { width: 100%; height: 95%; object-fit: cover; border-radius: 60px 8px 8px; }
.t4-demo-bottom { display: flex; gap: 5px; justify-content: space-between; font-size: 7px; border-top: 1px solid #dce6e9; padding-top: 12px; }
.t4-lab-divider { position: absolute; inset-block: 0; left: var(--design-reveal); border-left: 2px solid #08a4a7; pointer-events: none; }.t4-lab-divider > span { display: flex; gap: 4px; position: absolute; top: 50%; left: -17px; width: 32px; height: 38px; border-radius: 20px; background: white; border: 1px solid #08a4a7; align-items: center; justify-content: center; }.t4-lab-divider i { width: 2px; height: 12px; background: #08a4a7; }
.t4-lab-caption { padding: 12px 20px; border-top: 1px solid var(--t4-line); font-size: 10px; text-align: center; color: var(--t4-muted); }
/* The visual rhythm continues through real projects and products. */
.t4-home .t4-work-band { background: var(--t4-soft); padding-block: 80px; }
.t4-home .t4-work-grid { gap: 40px; }
.t4-home .t4-work-grid > .t4-project-card:only-child { display: grid; grid-template-columns: 1.6fr 1fr; grid-column: 1/-1; align-items: center; gap: 50px; }
.t4-home .t4-work-grid > .t4-project-card:only-child .t4-project-caption { display: block; border: 0; }.t4-home .t4-work-grid > .t4-project-card:only-child h3 { font-size: 30px; margin-bottom: 12px; }
.t4-card-arrow { display: none; }.t4-text-link { gap: 0; border-bottom: 1px solid var(--t4-line); }.t4-text-link:hover { color: var(--t4-blue); border-color: var(--t4-blue); }
.t4-home .t4-products-section { padding-top: 100px; }.t4-home .t4-products-section .t4-product-card, .t4-home .t4-products-section .t4-standard-product { border: 0; background: transparent; }.t4-home .t4-product-cover { border: 1px solid var(--t4-line); border-radius: 18px; }.t4-home .t4-product-info { padding-inline: 2px; }
.t4-service-visual.t4-illustrated-visual { min-height: 0; aspect-ratio: 1.4; border-radius: 22px 22px 80px 22px; background: #f5f9fa; border: 1px solid var(--t4-line); }
.t4-service-visual.t4-illustrated-visual img { width: 100%; max-width: none; height: 100%; object-fit: cover; }.t4-service-visual-orbit, .t4-service-visual-star { display: none; }
.t4-site .t4-service-hero-layout { grid-template-columns: 1fr 1.1fr; gap: 55px; }.t4-service-hero h1 { font-size: clamp(32px, 3.3vw, 50px); }
.t4-services-overview { padding-block: 30px 80px; }.t4-services-overview-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px; }.t4-service-landing-card { border-bottom: 1px solid var(--t4-line); padding-bottom: 25px; }.t4-service-landing-card img { aspect-ratio: 1.8; width: 100%; object-fit: cover; border-radius: 18px; }.t4-service-landing-card h2 { font-size: 25px; font-weight: 800; margin-top: 18px; }.t4-service-landing-card p { font-size: 13px; color: var(--t4-muted); margin-block: 10px; }
.t4-footer-invitation { position: relative; }.t4-invitation-button .t4-conversation-orb { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; border: 1px solid #547c89; border-radius: 30px; background: #164351; transition: border-radius .4s, background .4s; }.t4-conversation-orb svg { width: 45px; height: 45px; color: #74dbd4; }.t4-invitation-button:hover .t4-conversation-orb { border-radius: 50%; background: #215d68; }
/* Product reference: right section rail / central content / left purchase column. */
.single-product .t4-page-header { padding-block: 30px 28px; margin-bottom: 40px; }.single-product .t4-page-title { font-size: clamp(25px, 2.5vw, 37px); }
.t4-product-layout { display: grid; grid-template-columns: 86px minmax(0,1fr) 330px; gap: 30px; align-items: start; }
.t4-product-rail { min-width: 0; position: sticky; top: 125px; display: flex; flex-direction: column; gap: 14px; }
.t4-product-section-nav, .t4-product-rail > div { display: flex; flex-direction: column; border: 1px solid var(--t4-line); border-radius: 19px; overflow: hidden; background: var(--t4-surface); }
.t4-product-section-nav a { display: flex; flex-direction: column; align-items: center; gap: 9px; min-height: 86px; padding: 14px 6px; text-align: center; font-size: 10px; line-height: 1.8; transition: color .2s, background .2s; }.t4-product-section-nav a > span:first-child { width: 25px; height: 25px; }.t4-product-section-nav a:is(.-active, [aria-current="true"]) { background: var(--t4-blue-soft); color: var(--t4-blue); }.t4-product-section-nav a:hover { background: var(--t4-soft); }
.t4-product-rail > div { position: static; border-style: dashed; }.t4-product-rail > div > :is(a,button) { min-height: 80px; padding: 14px 6px; }
.t4-product-reading { min-width: 0; }.t4-product-reading > section { scroll-margin-top: 130px; margin-bottom: 50px; }.t4-product-reading .wp-content { font-size: 14px; line-height: 2.4; }.t4-product-reading h2 { font-size: 26px; font-weight: 800; line-height: 1.8; margin-bottom: 25px; }.t4-product-reading > section > :first-child { margin-top: 0; }.t4-product-reading .woocommerce-product-attributes { font-size: 12px; width: 100%; }.t4-product-reading #comments { padding-top: 30px; border-top: 1px solid var(--t4-line); }
.t4-product-purchase { min-width: 0; border-inline-start: 1px dashed var(--t4-line); padding-inline-start: 25px; position: sticky; top: 125px; }
.t4-purchase-inner { display: flex; flex-direction: column; gap: 24px; }.t4-purchase-image { position: relative; border-radius: 20px; overflow: hidden; background: var(--t4-soft); }.t4-purchase-image img { display: block; width: 100%; height: auto; }.t4-product-purchase .productGallerySwiper { width: 100%; }.t4-product-purchase .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; opacity: 1 !important; }.t4-product-purchase .woocommerce-product-gallery__trigger { z-index: 3 !important; }
.t4-purchase-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }.t4-purchase-price::before { content: ''; position: absolute; width: 3px; border-radius: 5px; height: 100%; inset-inline-start: -27px; background: var(--t4-teal); }.t4-purchase-price .product-single__price { font-size: 27px; font-weight: 850; color: var(--t4-blue); line-height: 1.7; }.t4-purchase-price del { display: block; color: var(--t4-muted); font-size: 16px; font-weight: 500; }.t4-purchase-price ins { text-decoration: none; }.t4-discount { background: #ffedf1; color: #b8294b; border-radius: 13px; min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.t4-purchase-actions { display: flex; flex-direction: column; gap: 12px; }.t4-product-purchase .btn { min-height: 52px; border-radius: 12px; font-size: 13px; }.t4-product-purchase .summary { width: 100% !important; float: none !important; margin: 0; }.t4-product-purchase .summary form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }.t4-product-purchase .summary .single_add_to_cart_button { flex: 1; min-height: 52px; padding: 14px 18px; background: var(--t4-blue); color: white; border-radius: 12px; font-size: 12px; }.t4-product-purchase .summary .quantity input { min-height: 52px; width: 65px; }.t4-product-purchase .summary :is(.woocommerce-product-details__short-description,.product_meta) { font-size: 11px; line-height: 2; margin-block: 15px; color: var(--t4-muted); }.t4-product-purchase .summary form.variations_form { display: block; }.t4-product-purchase .summary table.variations { width: 100%; font-size: 12px; }.t4-product-purchase .summary select { max-width: 100%; }.t4-purchase-status { font-size: 11px; line-height: 1.9; color: var(--t4-muted); }.t4-purchase-status:empty { display: none; }
.t4-product-extras { margin-top: 80px; }.t4-product-extras > section { margin-top: 50px; }
.t4-product-empty-section { color: var(--t4-muted); font-size: 13px; padding: 24px; border: 1px dashed var(--t4-line); border-radius: 12px; }
/* Combine with the document's existing 115px scroll padding only once. */
.t4-product-reading > section { scroll-margin-top: 20px; }
.t4-contact-illustration { display: block; width: 100%; border-radius: 16px 16px 50px 16px; }.t4-error-illustration { position: relative; max-width: 460px; }.t4-error-illustration img { border-radius: 20px; }.t4-error-illustration > span { position: absolute; left: 20px; bottom: 10px; font-size: 80px; font-weight: 900; line-height: 1; color: #0078b8; }.t4-empty-illustration { display: block; width: min(320px, 80%); margin: 0 auto 25px; border-radius: 20px; }.t4-docs-archive .t4-empty-state { grid-column: 1/-1; }
.t4-product-gallery-pagination { display: flex; justify-content: center; padding: 13px; gap: 5px; }.t4-product-gallery-pagination .swiper-pagination-bullet { width: 20px; height: 5px; border-radius: 5px; background: var(--t4-blue); }.t4-site .t4-marketplace-button { background: #fff2e7; color: #b15b14; border-color: #fff2e7; }.t4-lab-screen { touch-action: pan-y; cursor: ew-resize; }.t4-blog-pagination { display: flex; justify-content: center; gap: 15px; padding-top: 45px; }.t4-about-illustration { border-radius: 22px 22px 80px 22px; }
/* Motion reacts to the reader; no scroll hijacking or content lock. */
@media (prefers-reduced-motion: no-preference) {
 .t4-motion-enabled .t4-scroll-track i { animation: t4-scroll-tick 2.4s ease-in-out infinite; }
 .t4-motion-enabled .t4-canvas-label { transition: transform .7s var(--t4-ease); }
 .t4-motion-enabled .t4-canvas-image img { will-change: transform; }
 .t4-motion-enabled .t4-work-grid .t4-project-image { transform: translateY(var(--project-shift, 0px)); }
}
@keyframes t4-scroll-tick { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(7px); opacity: 1; } }
.t4-motion-paused *, .t4-motion-paused *::before, .t4-motion-paused *::after { animation-play-state: paused !important; }.t4-motion-paused .t4-studio-canvas, .t4-motion-paused .t4-canvas-image img, .t4-motion-paused .t4-canvas-label { transform: none; }.t4-motion-paused .t4-story-scene { transition: none; }
@media (max-width: 1399px) {
 .t4-header .nav-primary > ul { gap: 18px; }.t4-header .nav-primary { font-size: 13px; }.t4-header-inner { gap: 23px; }.t4-header-actions > .btn-primary > span:last-child:not(:first-child) { display: none; }.t4-header-actions > .btn-primary { width: 42px; min-width: 42px; padding: 10px; }.t4-header .t4-brand p { display: none; }
 .t4-studio-hero { gap: 0 40px; }.t4-canvas-image img { height: 400px; }.t4-studio-hero h1 { font-size: 61px; }.t4-story-grid { gap: 55px; }.t4-product-layout { grid-template-columns: 78px minmax(0,1fr) 295px; gap: 24px; }
}
@media (max-width: 1179px) {
 .t4-header .nav-primary { display: none !important; }.t4-header [data-t4-menu-trigger] { display: inline-flex !important; }.t4-header-navigation { flex: 1; }.t4-header-inner { min-height: 84px; }.t4-header .t4-brand p { display: block; }.t4-header-actions > .btn-primary > span:last-child:not(:first-child) { display: inline; }.t4-header-actions > .btn-primary { width: auto; }
 .t4-studio-hero h1 { font-size: 52px; }.t4-studio-hero { gap: 0 35px; padding-top: 50px; }.t4-canvas-image img { height: 350px; }.t4-studio-lead { font-size: 13px; }.t4-label-design { inset-inline-start: -13px; }.t4-label-growth { inset-inline-end: -10px; }.t4-studio-actions { gap: 12px 18px; }.t4-site .t4-conversation-button { padding: 14px 18px; font-size: 12px; }.t4-quiet-link { font-size: 12px; }
 .t4-story-grid { gap: 40px; grid-template-columns: 1fr 1.1fr; }.t4-story-chapter { min-height: 650px; }.t4-story-art { top: 120px; }.t4-story-scene img { aspect-ratio: 1.2; }.t4-design-lab { gap: 35px; }.t4-product-layout { grid-template-columns: 72px minmax(0,1fr) 265px; gap: 19px; }.t4-product-purchase { padding-inline-start: 18px; }.t4-purchase-price::before { inset-inline-start: -20px; }.t4-purchase-price .product-single__price { font-size: 23px; }
}
@media (max-width: 900px) {
 .t4-studio-hero { grid-template-columns: 1fr 1fr; gap: 0 25px; }.t4-studio-hero h1 { font-size: 43px; }.t4-canvas-image img { height: 320px; }.t4-canvas-label { font-size: 9px; padding: 9px 11px; }.t4-canvas-topline,.t4-canvas-bottomline { padding-inline: 18px; font-size: 9px; }.t4-studio-actions { flex-direction: column; align-items: flex-start; }.t4-manifesto { padding-block: 75px; }.t4-story-grid { gap: 28px; }.t4-story-chapter h3 { font-size: 30px; }.t4-story-chapter { min-height: 650px; }.t4-chapter-tags { gap: 6px; }.t4-chapter-tags li { font-size: 9px; }.t4-story-art-top { padding-inline: 16px; }.t4-story-heading > p { display: none; }.t4-design-lab { grid-template-columns: 1fr; gap: 40px; padding-block: 75px; }.t4-lab-copy { max-width: 560px; }.t4-lab-browser { width: 100%; }.t4-demo-hero strong { font-size: 32px; }
 .t4-product-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 28px; }.t4-product-rail { grid-column: 1/-1; position: relative; top: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 15px; }.t4-product-section-nav { flex-direction: row; overflow-x: auto; }.t4-product-section-nav a { flex: 1 0 78px; min-height: 76px; }.t4-product-rail > div { flex-direction: row; }.t4-product-rail > div > :is(a,button) { min-width: 62px; min-height: 76px; }.t4-product-purchase { top: 110px; }.t4-product-reading h2 { font-size: 23px; }
 .t4-site .t4-service-hero-layout { gap: 30px; }
}
@media (max-width: 639px) {
 .t4-header-inner { min-height: 76px; gap: 8px; }.t4-header .t4-brand-mark { width: 32px; height: 39px; }.t4-header .t4-brand p { display: none; }.t4-header-actions > .btn-primary > span:last-child:not(:first-child) { display: none; }.t4-header-actions > .btn-primary { width: 36px; min-width: 36px; padding: 9px; }.t4-site .t4-header-actions .btn-square { min-width: 34px; width: 34px; padding: 7px; }.t4-header-actions { gap: 0; }.t4-header .t4-brand { gap: 7px; }.t4-header .t4-brand div > span { font-size: 17px; }
 .t4-studio-hero { grid-template-columns: minmax(0,1fr); padding-top: 35px; gap: 34px; }.t4-studio-hero h1 { font-size: clamp(43px, 10vw, 58px); line-height: 1.6; }.t4-studio-kicker { font-size: 11px; margin-bottom: 20px; }.t4-studio-lead { font-size: 13px; max-width: 370px; margin-top: 23px; }.t4-studio-actions { flex-direction: row; align-items: center; gap: 10px 22px; }.t4-studio-actions .btn { font-size: 11px; }.t4-hero-signature { margin-top: 24px; }.t4-studio-canvas { margin-inline: 7px; border-radius: 20px 20px 65px 20px; padding-top: 15px; }.t4-canvas-image img { height: auto; aspect-ratio: 1.25; object-fit: cover; }.t4-label-design { top: 60px; inset-inline-start: -12px; }.t4-label-growth { bottom: 55px; inset-inline-end: -12px; }.t4-canvas-bottomline { margin-top: 10px; padding-inline-end: 40px; }.t4-hero-bottom { padding: 0 0 24px; gap: 12px; font-size: 10px; }.t4-hero-bottom > span { display: none; }.t4-hero-bottom > a { width: 100%; justify-content: space-between; flex-direction: row-reverse; }.t4-scroll-track { flex-shrink: 0; }
 .t4-manifesto { padding-block: 64px; }.t4-manifesto h2 { font-size: 26px; line-height: 2; }.t4-manifesto-note { justify-content: flex-start; padding-inline-start: 10px; gap: 30px; margin-top: 30px; }.t4-manifesto-note p { font-size: 11px; }.t4-connection-mark i { width: 32px; height: 32px; }
 .t4-studio-story { border-radius: 25px 25px 0 0; padding-block: 45px 20px; }.t4-story-heading { align-items: flex-end; gap: 12px; padding-bottom: 30px; }.t4-story-heading h2 { font-size: 35px; }.t4-motion-toggle { font-size: 9px; white-space: nowrap; padding: 9px 11px; }.t4-story-grid { display: block; }.t4-story-art-column { display: none; }.t4-story-chapter { min-height: 0; padding-block: 40px; border-bottom: 1px solid #36505b; scroll-margin-top: 100px; }.t4-story-chapter:last-child { border: 0; }.t4-chapter-label { margin-bottom: 20px; }.t4-chapter-mobile-image { display: block; width: 100%; border-radius: 18px; margin-bottom: 26px; }.t4-story-chapter h3 { font-size: 32px; }.t4-chapter-text { font-size: 13px; line-height: 2.3; }.t4-chapter-tags { margin-block: 21px 16px; }.t4-chapter-tags li { font-size: 10px; }.t4-story-link { font-size: 12px; }
 .t4-design-lab { padding-block: 65px; gap: 30px; }.t4-lab-copy h2 { font-size: 30px; }.t4-lab-copy > p:not(.t4-studio-kicker) { font-size: 12px; }.t4-lab-layer { padding: 15px; }.t4-lab-browser-bar { padding: 13px; font-size: 9px; }.t4-demo-hero strong { font-size: 19px; }.t4-demo-hero small { font-size: 6px; }.t4-demo-hero span { font-size: 6px; margin-top: 5px; }.t4-demo-hero b { font-size: 6px; padding: 5px 9px; margin-top: 10px; }.t4-demo-nav { font-size: 10px; }.t4-demo-bottom { font-size: 6px; padding-top: 8px; }.t4-wire-content { margin-top: 15px; gap: 15px; }.t4-wire-content b { height: 9px; margin-bottom: 9px; }.t4-wire-content i { height: 18px; margin-top: 12px; }.t4-wire-cards { margin-top: 12px; }.t4-wire-cards i { height: 20px; }.t4-lab-caption { font-size: 9px; }
 .t4-home .t4-work-band { padding-block: 55px; }.t4-home .t4-work-grid > .t4-project-card:only-child { display: block; }.t4-home .t4-work-grid > .t4-project-card:only-child h3 { font-size: 23px; }.t4-home .t4-products-section { padding-top: 60px; }.t4-services-overview-grid { grid-template-columns: minmax(0,1fr); }.t4-site .t4-service-hero-layout { grid-template-columns: minmax(0,1fr); }.t4-service-visual.t4-illustrated-visual { border-radius: 20px 20px 65px 20px; }.t4-invitation-button .t4-conversation-orb { width: 68px; height: 68px; border-radius: 22px; }.t4-conversation-orb svg { width: 34px; height: 34px; }
 .single-product .t4-page-header { padding-block: 24px; margin-bottom: 26px; }.single-product .t4-page-title { font-size: 25px; }.t4-product-layout { display: flex; flex-direction: column; gap: 28px; }.t4-product-purchase { order: -2; position: relative; top: auto; border: 0; padding: 0; width: 100%; }.t4-purchase-inner { gap: 20px; }.t4-purchase-image { max-width: 440px; width: 100%; margin-inline: auto; }.t4-product-rail { order: -1; display: flex; flex-direction: column; width: 100%; gap: 10px; position: sticky; top: 76px; z-index: 4; background: var(--t4-paper); padding-block: 8px; }.t4-product-section-nav { border-radius: 13px; }.t4-product-section-nav a { min-height: 68px; padding: 10px 7px; font-size: 9px; gap: 6px; }.t4-product-section-nav a > span:first-child { width: 22px; height: 22px; }.t4-product-rail > div { justify-content: space-evenly; border-radius: 13px; }.t4-product-rail > div > :is(a,button) { min-height: 44px; flex-direction: row; gap: 6px; padding: 9px 6px; }.t4-product-rail > div > :is(a,button) > span:first-child { width: 18px; height: 18px; }.t4-product-rail > div > :is(a,button) > span:first-child > span { width: 18px; height: 18px; }.t4-product-reading { width: 100%; }.t4-product-reading > section { scroll-margin-top: 110px; margin-bottom: 35px; }.t4-purchase-price::before { display: none; }.t4-purchase-price .product-single__price { font-size: 29px; }.t4-product-reading .wp-content { font-size: 13px; }.t4-product-reading h2 { font-size: 23px; }.t4-product-extras { margin-top: 45px; }
}
@media (max-width: 359px) {
 .t4-header .t4-brand div { display: none; }.t4-studio-actions { gap: 8px 12px; }.t4-site .t4-conversation-button { padding: 13px; font-size: 10px; }.t4-conversation-button svg { width: 21px; height: 21px; }.t4-studio-actions .t4-quiet-link { font-size: 10px; }.t4-studio-hero h1 { font-size: 42px; }.t4-demo-hero strong { font-size: 16px; }.t4-demo-bottom { font-size: 5px; }.t4-lab-layer { padding: 12px; }.t4-demo-hero small { display: none; }.t4-manifesto h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
 .t4-studio-canvas, .t4-canvas-image img, .t4-canvas-label, .t4-story-scene { transform: none !important; transition: none !important; }.t4-motion-toggle { display: none; }.t4-scroll-track i { animation: none !important; }
}

/* Shared transparent vector artwork. The existing internal grids stay intact. */
.t4-service-visual.t4-illustrated-visual { background: transparent; border-color: transparent; overflow: visible; }
.t4-service-visual.t4-illustrated-visual img { object-fit: contain; }
.t4-about-illustration, .t4-contact-illustration, .t4-empty-illustration, .t4-error-illustration img { aspect-ratio: 3 / 2; height: auto; object-fit: contain; }
.t4-service-landing-card img { object-fit: contain; }