.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: 0.2em 0.8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: "";
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}@font-face{font-family:'Jost';font-style:normal;font-weight:400 700;font-display:swap;src:url(//tutto-systems.com/wp-content/themes/tutto-motion/assets/fonts/jost-var.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:italic;font-weight:400 700;font-display:swap;src:url(//tutto-systems.com/wp-content/themes/tutto-motion/assets/fonts/jost-italic.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url(//tutto-systems.com/wp-content/themes/tutto-motion/assets/fonts/dm-mono-300.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(//tutto-systems.com/wp-content/themes/tutto-motion/assets/fonts/dm-mono-400.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(//tutto-systems.com/wp-content/themes/tutto-motion/assets/fonts/dm-mono-500.woff2) format('woff2')}:root{
--tan-100:#faeade;--tan-200:#f2d8c4;--tan-300:#ebc6ab;--tan-400:#e4b592;--tan-500:#d49d74;--tan-600:#b8804f;
--cream-50:#fffaf6;--cream-100:#fff3ea;--cream-200:#f7e8dc;--cream-300:#ecdcce;
--ink-1000:#000000;--ink-800:#1a1613;--ink-600:#3d3631;--ink-400:#6b615a;--ink-200:#a79c94;
--white:#ffffff;
--bg-page:var(--cream-100);--surface-card:var(--cream-50);--text-body:var(--ink-1000);--text-muted:var(--ink-600);--text-faint:var(--ink-400);
--border-hairline:var(--ink-1000);--border-soft:var(--tan-300);
--accent:var(--tan-400);--accent-hover:var(--tan-500);--accent-press:var(--tan-600);--focus-ring:var(--ink-1000);
--font-display:'Jost',system-ui,sans-serif;--font-body:'Jost',system-ui,sans-serif;--font-mono:'DM Mono',ui-monospace,monospace;
--ease:cubic-bezier(.61,1,.88,1);
--wrap:1440px;--gutter:20px;
}
[data-theme="inverse"]{
--bg-page:var(--ink-1000);--surface-card:var(--ink-1000);--text-body:var(--cream-100);--text-muted:var(--tan-300);--text-faint:var(--ink-200);
--border-hairline:var(--white);--border-soft:var(--ink-600);--focus-ring:var(--white);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream-100);color:var(--ink-1000);font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:where(h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd){margin:0;padding:0}
:where(ul,ol){list-style:none}
img,video,svg{max-width:100%}
a{color:inherit;text-decoration:none;transition:color 300ms var(--ease)}
a:hover{color:var(--tan-600)}
[data-theme="inverse"] a:hover{color:var(--tan-400)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--tan-400);color:var(--ink-1000)}
.t-wrap{max-width:var(--wrap);width:100%;margin:0 auto}
.t-section{background:var(--cream-100);padding:clamp(56px,9vw,120px) var(--gutter);border-bottom:1px solid var(--ink-1000)}
.t-section--tight{padding:clamp(32px,4.5vw,64px) var(--gutter)}
.t-section--inverse{background:var(--ink-1000);color:var(--cream-100);border-bottom:0}
.t-grid{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
.t-grid--split{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.t-grid--split-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.t-grid--cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(24px,3vw,40px)}
.t-grid--center{align-items:center}
.t-sticky{position:sticky;top:110px}
.t-eyebrow{display:block;font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.t-eyebrow--accent{color:var(--tan-300)}
.t-eyebrow--faint{color:var(--ink-400)}
.t-data{font-family:var(--font-mono);font-size:10px;font-weight:300;letter-spacing:-.1px;color:var(--ink-400)}
.t-label{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.t-h1{font-family:var(--font-display);font-size:clamp(36px,7vw,112px);font-weight:700;line-height:1.02;letter-spacing:-.02em;text-wrap:pretty}
.t-h1--sub{font-size:clamp(34px,6vw,112px)}
.t-h2{font-family:var(--font-display);font-size:clamp(32px,4.4vw,72px);font-weight:700;line-height:1.05;letter-spacing:-.02em;text-wrap:pretty}
.t-h3{font-family:var(--font-display);font-size:clamp(24px,2.6vw,34px);font-weight:600;line-height:1.2}
.t-h4{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2}
.t-body{font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1.5}
.t-body--muted{color:var(--text-muted)}
.t-m0{max-width:38ch}.t-m1{max-width:44ch}.t-m2{max-width:46ch}.t-m3{max-width:54ch}.t-m4{max-width:56ch}
.t-accent{color:var(--tan-400)}
.t-stack{display:grid;gap:8px} .t-line{display:block;overflow:hidden;padding:.1em 0 .16em;margin:-.1em 0 -.16em}
.t-line > span{display:block;transition:transform 800ms var(--ease)}
.tm-js .t-line > span{transform:translateY(125%)}
.tm-js .t-line > span.is-in{transform:translateY(0)}
.t-reveal{transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.tm-js .t-reveal{opacity:0;transform:translateY(18px)}
.tm-js .t-reveal.is-in{opacity:1;transform:none} .t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 22px;border:1px solid transparent;border-radius:50px;background:var(--tan-400);color:var(--ink-1000);font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1;cursor:pointer;transition:background-color 300ms var(--ease),color 300ms var(--ease),border-color 300ms var(--ease)}
.t-btn:hover{background:var(--tan-500);color:var(--ink-1000)}
.t-btn:active{background:var(--tan-600)}
.t-btn--lg{min-height:48px;padding:0 28px}
.t-btn--sm{min-height:36px;padding:0 18px;font-size:16px}
.t-btn--secondary{background:transparent;border-color:var(--border-hairline);color:var(--text-body)}
.t-btn--secondary:hover{background:var(--tan-400);border-color:var(--tan-400);color:var(--ink-1000)}
.t-hero .t-btn--secondary{border-color:var(--tan-400);color:var(--cream-100)}
.t-btn--ghost{background:transparent;border-color:transparent;padding:0;min-height:40px;color:var(--text-body)}
.t-btn--ghost:hover{background:transparent;color:var(--tan-600);text-decoration:underline}
.t-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--tan-400);color:var(--ink-1000);font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase} .t-card{border:1px solid var(--ink-1000);border-radius:10px;padding:clamp(24px,3vw,40px);background:var(--cream-50)}
.t-card--accent{background:var(--tan-400);color:var(--ink-1000)}
.t-card--inverse{background:var(--ink-1000);color:var(--cream-100)}
.t-card--pad-sm{padding:clamp(20px,2.5vw,28px)} .t-header{position:sticky;top:0;z-index:60;background:var(--cream-100);border-bottom:1px solid var(--ink-1000)}
.t-header__row{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.t-logo{display:flex;align-items:center;gap:10px}
.t-logo img{width:38px;height:38px;object-fit:contain;mix-blend-mode:multiply} .t-logo__name{display:flex;align-items:baseline;gap:0}
.t-logo__word{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1;letter-spacing:.18em}
.t-logo__sub{font-family:var(--font-display);font-size:18px;font-weight:300;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-600)}
.t-logo__sub::before{content:"-";font-weight:700;color:inherit} .t-footer .t-logo__name::before{content:"";flex:0 0 auto;width:30px;height:30px;margin-right:10px;background:url(https://tutto-systems.com/wp-content/themes/tutto-motion/assets/tutto-mark.png) center/contain no-repeat;filter:invert(1);opacity:.92}
@media (max-width:640px){.t-footer .t-logo__name::before{width:26px;height:26px;margin-right:8px}} .t-footer .t-logo__word{color:var(--cream-100)}
.t-footer .t-logo__sub::before{color:var(--cream-100)}
.t-nav{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.t-nav a{padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color 300ms var(--ease)}
.t-nav a:hover,.t-nav .current-menu-item > a,.t-nav a[aria-current="page"]{border-color:var(--tan-400)}
.t-header__end{display:flex;align-items:center;gap:10px}
.t-progress{height:2px;background:var(--cream-300)}
.t-progress__bar{height:2px;width:0;background:var(--ink-1000)}
.t-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;border:1px solid var(--ink-1000);border-radius:50px;background:transparent;cursor:pointer}
.t-burger span{display:block;height:1.5px;background:var(--ink-1000)} .t-menu{position:fixed;inset:0;z-index:70;background:var(--cream-100);display:none;flex-direction:column;padding:var(--gutter);opacity:0;transform:translateY(-12px);transition:opacity 300ms var(--ease),transform 400ms var(--ease)}
.t-menu.is-mounted{display:flex}
.t-menu.is-open{opacity:1;transform:none}
.t-menu__top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--ink-1000)}
.t-menu__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--ink-1000);border-radius:50px;background:transparent;cursor:pointer;font-family:var(--font-mono);font-size:18px;line-height:1}
.t-menu__nav{display:flex;flex-direction:column;margin-top:8px}
.t-menu__nav a{padding:18px 0;border-bottom:1px solid var(--cream-300);font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink-1000)}
.t-menu__nav a:last-child{border-bottom:0;display:flex;align-items:center;gap:12px}
.t-menu__nav a:last-child::before{content:"";display:block;width:24px;height:2px;background:var(--tan-400)}
.t-menu.is-open .t-menu__nav a{animation:t-menu-in 520ms var(--ease) both}
.t-menu.is-open .t-menu__nav a:nth-child(2){animation-delay:40ms}
.t-menu.is-open .t-menu__nav a:nth-child(3){animation-delay:80ms}
.t-menu.is-open .t-menu__nav a:nth-child(4){animation-delay:120ms}
.t-menu.is-open .t-menu__nav a:nth-child(5){animation-delay:160ms}
.t-menu.is-open .t-menu__nav a:nth-child(6){animation-delay:200ms}
.t-menu.is-open .t-menu__nav a:nth-child(7){animation-delay:240ms}
.t-menu__foot{margin-top:auto;display:flex;gap:20px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--cream-300);font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600)}
.t-menu__foot > :last-child{margin-left:auto}
@keyframes t-menu-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:979px){
.t-nav,.t-header__end .t-btn{display:none}
.t-burger{display:flex}
} .t-hero{position:relative;background:var(--ink-1000);color:var(--cream-100)}
.t-hero__inner{position:relative;min-height:min(760px,86vh);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,4vw,56px) var(--gutter) clamp(16px,2vw,26px);overflow:hidden}
.t-hero__media{position:absolute;inset:0;transform-origin:50% 40%}
.t-hero__media video,.t-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.t-hero__scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.12));pointer-events:none}
.t-hero__top{position:relative;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.t-hero__body{position:relative;padding:clamp(20px,3vw,44px) 0 0}
.t-hero__body .t-h1{max-width:17ch;color:var(--white)}
.t-hero__lede{margin:clamp(16px,2vw,26px) 0 0;max-width:54ch;color:var(--cream-100)}
.t-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:clamp(20px,2.4vw,28px) 0 clamp(26px,3.4vw,44px)}
.t-hero__foot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-top:1px solid var(--white);padding-top:16px;margin-top:clamp(14px,2vw,24px)}
.t-hero__cue{width:1px;height:44px;overflow:hidden;background:rgba(255,255,255,.22)}
.t-hero__cue span{display:block;width:1px;height:44px;background:var(--tan-400);animation:t-cue 2200ms var(--ease) infinite}
@keyframes t-cue{from{transform:translateY(-100%)}to{transform:translateY(100%)}} .t-phero{background:var(--ink-1000);color:var(--cream-100);padding:clamp(56px,9vw,120px) var(--gutter)}
.t-phero .t-h1{margin:16px 0 0;max-width:20ch;color:var(--white)}
.t-phero__lede{margin:clamp(20px,3vw,36px) 0 0;max-width:56ch} .t-marquee{border-bottom:1px solid var(--ink-1000);background:var(--cream-100);overflow:hidden;padding:11px 0}
.t-marquee__track{display:flex;width:max-content;white-space:nowrap;will-change:transform;animation:t-marquee 44s linear infinite}
.t-marquee__track span{padding-right:40px;font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
@keyframes t-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .t-rows{display:grid}
.t-row{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--ink-1000)}
.t-row:last-child{border-bottom:1px solid var(--ink-1000)}
.t-row__key{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400)} .t-index{margin:clamp(28px,4vw,48px) 0 0;display:grid;gap:4px;border-top:1px solid var(--ink-1000)}
.t-index__item{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--cream-300);opacity:.35;transition:opacity 400ms var(--ease)}
.t-index__item:last-child{border-bottom-color:var(--ink-1000)}
.t-index__item.is-active{opacity:1}
.t-index__rule{display:block;flex:none;width:24px;height:2px;margin-bottom:12px;background:var(--ink-1000);transition:width 400ms var(--ease)}
.t-index__item.is-active .t-index__rule{width:56px}
.t-index__name{font-family:var(--font-display);font-size:clamp(26px,3vw,48px);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.t-plate{margin:clamp(24px,3vw,40px) 0 0;display:grid;gap:14px}
.t-plate__head{display:flex;justify-content:space-between;gap:16px;font-family:var(--font-mono);font-size:10px;font-weight:300;letter-spacing:-.1px;color:var(--ink-400)}
.t-plate__detail{margin:0;min-height:4.5em;max-width:38ch;transition:opacity 300ms var(--ease)}
.t-plate__meta{display:grid;gap:10px;border-top:1px solid var(--cream-300);padding-top:14px}
.t-plate__meta > div{display:flex;justify-content:space-between;gap:16px;font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.t-plate__meta span:first-child{color:var(--ink-400)} .t-rail{display:grid;grid-template-columns:2px 1fr;gap:clamp(20px,3vw,40px)}
.t-rail__track{background:var(--cream-300);position:relative}
.t-rail__fill{position:absolute;top:0;left:0;width:2px;height:0;background:var(--ink-1000)}
.t-rail__steps{display:grid;gap:clamp(32px,6vw,88px)}
.t-rail__num{display:block;font-family:var(--font-display);font-size:clamp(48px,7vw,112px);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--tan-400)} .t-ref{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,4vw,56px);align-items:center}
.t-ref--first{padding-bottom:clamp(40px,6vw,72px);border-bottom:1px solid var(--ink-1000)}
.t-ref--second{padding-top:clamp(40px,6vw,72px)}
.t-shot{position:relative;width:100%;aspect-ratio:4/3;border:1px solid var(--ink-1000);border-radius:10px;overflow:hidden;background:var(--cream-200)}
.t-shot img{width:100%;height:100%;object-fit:cover;display:block}
.t-shot__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400)} .t-faq{display:grid;border-top:1px solid var(--ink-1000)}
.t-faq__item{border-bottom:1px solid var(--ink-1000)}
.t-faq__btn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2}
.t-faq__sign{font-family:var(--font-mono);font-size:24px;font-weight:300;transition:transform 300ms var(--ease)}
.t-faq__item.is-open .t-faq__sign{transform:rotate(45deg)}
.t-faq__body{overflow:hidden;max-height:0;opacity:0;transition:max-height 400ms var(--ease),opacity 300ms var(--ease)}
.t-faq__item.is-open .t-faq__body{opacity:1}
.t-faq__body p{margin:0 0 22px;max-width:54ch;color:var(--ink-600)} .t-flow{position:relative;width:100%;aspect-ratio:564/410;border:1px solid var(--ink-1000);border-radius:10px;overflow:hidden;background:var(--cream-50)}
.t-flow__dots{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle,var(--tan-300) 1px,transparent 1px);background-size:32px 32px}
.t-flow svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.t-flow__pulse{animation:t-flow 4s linear infinite}
@keyframes t-flow{from{stroke-dashoffset:200}to{stroke-dashoffset:-200}}
.t-flow__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border:1px solid var(--ink-1000);border-radius:10px;background:var(--ink-1000);font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.02em;color:var(--cream-100)}
.t-flow__hub::after{content:"";position:absolute;inset:-8px;border:2px solid var(--tan-400);border-radius:14px;animation:t-hub 3s var(--ease) infinite}
@keyframes t-hub{0%,100%{opacity:.35}50%{opacity:0}}
.t-flow__node{position:absolute;transform:translate(-50%,-50%);z-index:1;display:grid;justify-items:center;gap:8px}
.t-flow__node > b{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--ink-1000);border-radius:10px;background:var(--cream-50)}
.t-flow__node > b svg{position:static;width:22px;height:22px}
.t-flow__node > span{font-family:var(--font-mono);font-size:10px;font-weight:300;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600);white-space:nowrap} .t-price{display:grid;gap:14px;height:100%}
.t-price__amount{font-family:var(--font-display);font-size:clamp(34px,4vw,56px);font-weight:700;line-height:1;letter-spacing:-.02em}
.t-price__list{display:grid;gap:10px;border-top:1px solid currentColor;padding-top:16px;margin-top:4px}
.t-price__list li{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase} .t-form{display:grid;gap:16px;max-width:560px}
.t-field{display:grid;gap:8px}
.t-field label{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-600)}
.t-field input,.t-field textarea,.t-field select{width:100%;padding:12px 14px;border:1px solid var(--ink-1000);border-radius:10px;background:var(--cream-50);font-family:var(--font-body);font-size:18px;font-weight:700;color:var(--ink-1000)}
.t-field textarea{min-height:140px;resize:vertical}
.wpcf7 form .wpcf7-response-output{border:1px solid var(--ink-1000);border-radius:10px;padding:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border:1px solid transparent;border-radius:50px;background:var(--tan-400);color:var(--ink-1000);font-family:var(--font-body);font-size:18px;font-weight:700;cursor:pointer;transition:background-color 300ms var(--ease)}
.wpcf7-submit:hover{background:var(--tan-500)} .t-prose{max-width:62ch;display:grid;gap:20px}
.t-prose h2{font-family:var(--font-display);font-size:clamp(24px,2.6vw,34px);font-weight:600;line-height:1.2;margin-top:20px}
.t-prose h3{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2}
.t-prose p,.t-prose li{font-size:18px;font-weight:700;line-height:1.5;color:var(--ink-600)}
.t-prose ul{display:grid;gap:8px;padding-left:20px;list-style:disc}
.t-prose a{text-decoration:underline} .t-footer{background:var(--ink-1000);color:var(--cream-100);padding:clamp(40px,6vw,80px) var(--gutter) 24px}
.t-footer__row{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(24px,4vw,56px);align-items:start}
.t-footer__nav{display:grid;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.t-footer__legal{max-width:var(--wrap);margin:clamp(32px,4vw,56px) auto 0;padding-top:16px;border-top:1px solid var(--white);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10px;font-weight:300;letter-spacing:-.1px;color:var(--ink-200)}
.t-footer__legal a:hover{color:var(--tan-400)}
@media (prefers-reduced-motion:reduce){
*{animation-duration:1ms !important;transition-duration:1ms !important}
.tm-js .t-reveal{opacity:1;transform:none}
.tm-js .t-line > span{transform:none}
} .t-blink{width:6px;height:6px;border-radius:999px;background:var(--tan-400);animation:t-blink 1400ms steps(1,end) infinite}
@keyframes t-blink{0%,45%{opacity:1}50%,100%{opacity:.15}}
.t-wave{margin:26px 0;display:flex;align-items:flex-end;gap:5px;height:72px}
.t-wave span{flex:1;height:100%;background:var(--tan-400);transform-origin:50% 100%;animation:t-wave 1600ms cubic-bezier(.61,1,.88,1) infinite}
@keyframes t-wave{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}} .t-rail-h{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:0 var(--gutter) clamp(40px,6vw,72px);border-bottom:1px solid var(--ink-1000);background:var(--cream-100)}
.t-rail-h__track{max-width:var(--wrap);margin:0 auto;display:flex;gap:20px;width:max-content}
.t-rail-h__card{scroll-snap-align:start;width:min(86vw,360px);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:16px}
.t-consent{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1.5;min-height:44px}
.t-consent input[type="checkbox"]{width:20px;height:20px;margin-top:4px;accent-color:var(--tan-400);flex:none}
.wpcf7 .wpcf7-list-item{margin:0}
.wpcf7-not-valid-tip{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tan-600)} .t-shot--auto{aspect-ratio:auto}
.t-shot--auto img{height:auto;object-fit:contain}@media (max-width: 979px) { .t-sticky { position: static; top: auto; }
.t-grid { gap: clamp(28px, 6vw, 44px); }
.t-grid--center { align-items: start; } .t-hero__inner {
min-height: 0;
padding: 24px var(--gutter) 20px;
}
.t-hero__body { padding-top: 28px; }
.t-hero__cta { margin: 22px 0 28px; }
.t-hero__cta .t-btn { width: 100%; }
.t-hero__foot { margin-top: 24px; }
.t-h1 { font-size: clamp(34px, 9vw, 56px); }
.t-h1--sub { font-size: clamp(32px, 8.5vw, 52px); }
.t-h2 { font-size: clamp(28px, 7.5vw, 44px); }
.t-h3 { font-size: clamp(22px, 5.5vw, 28px); } .t-m0, .t-m1, .t-m2, .t-m3, .t-m4,
.t-hero__lede, .t-phero__lede, .t-prose { max-width: 100%; }
.t-h1, .t-h2, .t-hero__body .t-h1 { max-width: 100% !important; }
.t-section, .t-phero { padding: clamp(40px, 10vw, 64px) var(--gutter); }
.t-section--tight { padding: clamp(32px, 8vw, 48px) var(--gutter); }
.t-row { grid-template-columns: 36px 1fr; gap: 14px; padding: 22px 0; }
.t-index__name { font-size: clamp(28px, 8vw, 40px); }
.t-rail { grid-template-columns: 2px 1fr; gap: 20px; }
.t-rail__steps { gap: clamp(32px, 9vw, 56px); }
.t-rail__num { font-size: clamp(44px, 13vw, 72px); }
.t-faq__btn { font-size: 20px; padding: 18px 0; }
.t-price__amount { font-size: clamp(30px, 8vw, 40px); }
.t-footer__row { gap: 32px; }
.t-footer__legal { flex-direction: column; gap: 8px; }
} @media (max-width: 719px) {
.t-flow {
aspect-ratio: auto;
padding: 28px 20px 30px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 12px;
place-items: center;
}
.t-flow > svg { display: none; }
.t-flow__node > b svg { display: block; width: 22px; height: 22px; }
.t-flow__dots { opacity: .35; }
.t-flow__hub {
position: static;
transform: none;
grid-column: 1 / -1;
width: 76px;
height: 76px;
margin-bottom: 4px;
}
.t-flow__node {
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
}
.t-flow__node > span { white-space: normal; text-align: center; } .t-flow__node { padding-top: 16px; }
.t-flow__node::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 16px;
background: var(--tan-300);
}
.t-flow__node { position: relative !important; } .t-flow__node > b {
position: relative;
animation: t-node-pulse 4s cubic-bezier(.61,1,.88,1) infinite;
}
.t-flow__node > b::after {
content: "";
position: absolute;
inset: -5px;
border: 2px solid var(--tan-400);
border-radius: 14px;
opacity: 0;
animation: t-node-ring 4s cubic-bezier(.61,1,.88,1) infinite;
}
.t-flow__node:nth-child(4) > b,
.t-flow__node:nth-child(4) > b::after { animation-delay: 0s; }
.t-flow__node:nth-child(5) > b,
.t-flow__node:nth-child(5) > b::after { animation-delay: .66s; }
.t-flow__node:nth-child(6) > b,
.t-flow__node:nth-child(6) > b::after { animation-delay: 1.32s; }
.t-flow__node:nth-child(7) > b,
.t-flow__node:nth-child(7) > b::after { animation-delay: 1.98s; }
.t-flow__node:nth-child(8) > b,
.t-flow__node:nth-child(8) > b::after { animation-delay: 2.64s; }
.t-flow__node:nth-child(9) > b,
.t-flow__node:nth-child(9) > b::after { animation-delay: 3.3s; }
@keyframes t-node-pulse {
0%, 12%, 100% { background: var(--cream-50); }
5%            { background: var(--tan-200); }
}
@keyframes t-node-ring {
0%   { opacity: .9; transform: scale(.94); }
14%  { opacity: 0;  transform: scale(1.12); }
100% { opacity: 0;  transform: scale(1.12); }
}
}
@media (max-width: 479px) {
.t-logo img { width: 32px; height: 32px; }
.t-logo__word { font-size: 16px; letter-spacing: .12em; }
.t-logo__sub { font-size: 12px; }
.t-header__row { gap: 10px; }
.t-hero__top { gap: 12px; }
.t-hero__foot .t-data { display: none; }
.t-card { padding: 22px 20px; }
.t-menu__nav a { font-size: 24px; padding: 16px 0; }
.t-rail-h__card { width: min(88vw, 320px); }
}.ts-ablauf {
--ts-cream: #fff3ea;
--ts-ink: #000000;
--ts-ink-muted: #3d3631;
--ts-ink-hint: #6b615a;
--ts-tan: #e4b592;
--ts-hairline: #ecdcce;
position: relative;
background: var(--ts-cream);
}
.ts-ablauf *,
.ts-ablauf *::before,
.ts-ablauf *::after {
box-sizing: border-box;
} .ts-ablauf__pin {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
min-height: 100svh;
background: var(--ts-cream);
overflow: hidden;
} .ts-stage {
container-type: size;
position: relative;
width: 100%;
max-width: 1920px;
aspect-ratio: 3 / 1;
font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
font-synthesis: none;
color: var(--ts-ink);
}
.ts-mono {
font-family: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
font-weight: 500;
font-size: 0.677cqw;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ts-kicker {
position: absolute;
left: 5.521cqw;
top: 3.021cqw;
color: var(--ts-ink-muted);
}
.ts-counter-slot {
position: absolute;
right: 5.521cqw;
top: 3.021cqw;
width: 6.25cqw;
height: 1cqw;
}
.ts-counter {
position: absolute;
right: 0;
top: 0;
color: var(--ts-ink-muted);
opacity: 0;
visibility: hidden;
white-space: nowrap;
}
.ts-counter--rest {
opacity: 1;
visibility: visible;
color: var(--ts-ink-hint);
}
.ts-rule {
position: absolute;
left: 5.521cqw;
width: 88.958cqw;
height: 1px;
background: var(--ts-hairline);
}
.ts-rule--top {
top: 5cqw;
}
.ts-rule--bottom {
top: 28.75cqw;
}
.ts-footmark,
.ts-footnote {
position: absolute;
top: 29.792cqw;
color: var(--ts-ink-hint);
}
.ts-footmark {
left: 5.521cqw;
}
.ts-footnote {
right: 5.521cqw;
} .ts-rail-track,
.ts-rail-fill {
position: absolute;
z-index: 1;
left: 5.521cqw;
width: 88.958cqw;
}
.ts-rail-track {
top: 12.083cqw;
height: 1px;
background: var(--ts-hairline);
}
.ts-rail-fill {
top: 12.031cqw;
height: 2px;
background: var(--ts-ink);
}
.ts-rail-head {
position: absolute;
z-index: 1;
left: 5.521cqw;
top: 11.771cqw;
width: 0.625cqw;
height: 0.625cqw;
margin-left: -0.313cqw;
opacity: 0;
visibility: hidden;
}
.ts-rail-head > i {
display: block;
width: 100%;
height: 100%;
background: var(--ts-ink);
transform: rotate(45deg);
} .ts-station {
position: absolute;
z-index: 3;
top: 10.417cqw;
width: 3.333cqw;
height: 3.333cqw;
margin-left: -1.667cqw;
}
.ts-box {
position: relative;
width: 100%;
height: 100%;
border: 1px solid var(--ts-hairline);
background: var(--ts-cream);
overflow: hidden;
}
.ts-box__fill {
position: absolute;
inset: 0;
background: var(--ts-ink);
}
.ts-box__icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--ts-ink-hint);
}
.ts-box__icon svg {
display: block;
width: 1.354cqw;
height: 1.354cqw;
}
.ts-label {
position: absolute;
z-index: 2;
top: 15cqw;
width: 10.625cqw;
margin-left: -5.313cqw;
text-align: center;
white-space: nowrap;
color: var(--ts-ink-hint);
font-family: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
font-weight: 500;
font-size: 0.677cqw;
letter-spacing: 0.14em;
text-transform: uppercase;
} .ts-drop {
position: absolute;
z-index: 1;
top: 15.938cqw;
width: 1px;
height: 1.979cqw;
background: var(--ts-tan);
}
.ts-stmt {
position: absolute;
z-index: 2;
top: 18.854cqw;
width: 31.25cqw;
opacity: 0;
visibility: hidden;
}
.ts-stmt p {
margin: 0;
font-size: 1.771cqw;
font-weight: 500;
line-height: 1.28;
letter-spacing: -0.01em;
color: var(--ts-ink-muted);
}
.ts-stmt em {
font-style: normal;
font-weight: 600;
color: var(--ts-ink);
}
.ts-stmt__rule {
margin-top: 1.146cqw;
width: 1.875cqw;
height: 2px;
background: var(--ts-tan);
} .ts-ablauf__stack {
display: none;
position: relative;
padding: 56px 24px 64px;
}
.ts-stack__chrome {
display: flex;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px solid var(--ts-hairline);
color: var(--ts-ink-muted);
}
.ts-stack__list {
position: relative;
margin: 0;
padding: 40px 0 0 0;
list-style: none;
} .ts-stack__track,
.ts-stack__fill {
position: absolute;
left: 23px;
width: 1px;
}
.ts-stack__track {
top: 40px;
bottom: 24px;
background: var(--ts-hairline);
}
.ts-stack__fill {
top: 40px;
width: 2px;
height: 0;
background: var(--ts-ink);
}
.ts-step {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 48px 1fr;
gap: 18px;
padding-bottom: 38px;
}
.ts-step:last-child {
padding-bottom: 0;
}
.ts-step__box {
position: relative;
width: 48px;
height: 48px;
border: 1px solid var(--ts-hairline);
background: var(--ts-cream);
overflow: hidden;
}
.ts-step__fill {
position: absolute;
inset: 0;
background: var(--ts-ink);
}
.ts-step__icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--ts-ink-hint);
}
.ts-step__icon svg {
display: block;
width: 20px;
height: 20px;
}
.ts-step__label {
display: block;
margin: 6px 0 8px;
color: var(--ts-ink-hint);
font-family: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ts-step__text {
margin: 0;
font-size: 19px;
font-weight: 500;
line-height: 1.4;
color: var(--ts-ink-muted);
}
.ts-step__text em {
font-style: normal;
font-weight: 600;
color: var(--ts-ink);
}
@media (max-width: 899px) {
.ts-ablauf__pin {
display: none;
}
.ts-ablauf__stack {
display: block;
}
} @media (prefers-reduced-motion: reduce) {
.ts-ablauf__pin {
min-height: 0;
padding: 48px 0;
}
}