.page-contact [hidden] {
display: none !important;
}.ct-vh {
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}.ct-hero__glow {
position: absolute;
inset: auto -15% -35% 35%;
height: 85%;
background: radial-gradient(closest-side, rgba(123, 44, 240, 0.32), transparent);
pointer-events: none;
}.ct-hero__main {
align-self: end;
display: grid;
gap: clamp(16px, 2vw, 26px);
}.ct-hero__title .accent {
position: relative;
}.ct-hero__row {
display: grid;
gap: clamp(36px, 5vw, 56px);
align-items: end;
}.ct-hero__copy {
display: grid;
justify-items: start;
gap: 26px;
}.ct-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 30px;
}.ct-hero__actions .link {
color: var(--fg-2);
}@media (min-width: 1024px) {
.ct-hero__row {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
column-gap: clamp(48px, 6vw, 120px);
}
}.ct-resume {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
min-height: 48px;
padding: 6px 6px 6px 16px;
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc-lime) 50%, transparent);
background: color-mix(in srgb, var(--dc-lime) 7%, transparent);
color: var(--fg-2);
transition: background-color 0.35s var(--ease-out);
}.ct-resume b {
color: var(--fg);
}.ct-resume__go {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: var(--dc-lime);
color: var(--dc-purple-black);
font-size: 0.8125rem;
font-weight: 700;
}.ct-resume__go .icon {
width: 14px;
height: 14px;
}.ct-resume:hover {
background: color-mix(in srgb, var(--dc-lime) 14%, transparent);
}.ct-sheet {
--rx: 0deg;
--ry: 0deg;
position: relative;
width: 100%;
max-width: 640px;
justify-self: end;
perspective: 1400px;
}.ct-sheet__under {
position: absolute;
inset: 14px -12px -14px 16px;
border-radius: var(--radius-md);
background: rgba(247, 246, 249, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
transform: rotate(2.4deg);
}.ct-sheet__paper {
transform: rotate(-1.2deg) rotateX(var(--rx)) rotateY(var(--ry));
transform-origin: 50% 60%;
box-shadow: 0 50px 90px -40px rgba(5, 2, 10, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05);
will-change: transform;
}.ct-sheet__body {
padding: clamp(20px, 2.2vw, 30px);
}.ct-sheet__label {
font-size: 0.6875rem;
color: var(--fg-3);
}.ct-sheet__line {
min-height: 2.5em;
margin: 14px 0 22px;
font-size: clamp(1.3rem, 0.95rem + 1.1vw, 2rem);
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.025em;
color: var(--fg);
}.ct-sheet__prefix {
color: var(--fg-3);
}.ct-sheet__typed {
color: var(--dc-purple);
}.ct-sheet__caret {
display: inline-block;
width: 3px;
height: 0.95em;
margin-left: 3px;
vertical-align: -0.1em;
background: var(--dc-purple);
animation: ctCaret 1s steps(2) infinite;
}@keyframes ctCaret {
50% { opacity: 0; }
}.ct-sheet__maps {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
padding-top: 16px;
border-top: 1px dashed var(--line-2);
color: var(--fg-3);
}.ct-sheet__maps .t-mono {
font-size: 0.6875rem;
}.ct-sheet__arrow .icon {
width: 16px;
height: 16px;
color: var(--dc-purple);
}.ct-sheet__intent {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 11px;
border-radius: var(--radius-sm);
background: var(--dc-purple);
color: #fff;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}.ct-sheet__maps .illus {
margin-left: auto;
}@media (max-width: 1023px) {
.ct-sheet {
justify-self: stretch;
max-width: 560px;
}
}.ct-build {
display: grid;
gap: 32px;
}@media (min-width: 1024px) {
.ct-build {
grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
column-gap: clamp(40px, 5vw, 96px);
align-items: start;
}.ct-card {
position: sticky;
top: calc(var(--header-h) + 28px);
}
}.no-js .ct-build {
display: block;
max-width: 900px;
}.no-js .ct-card {
display: none;
}.ct-form {
position: relative;
min-width: 0;
}.ct-hp {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}.ct-progress {
display: none;
margin-bottom: clamp(28px, 3.5vw, 44px);
}.is-stepped .ct-progress {
display: block;
}.ct-progress__steps {
display: flex;
flex-wrap: wrap;
gap: 4px 26px;
}.ct-progress__step {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-3);
transition: color 0.3s var(--ease-out);
}.ct-progress__n {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--line-2);
letter-spacing: 0.04em;
transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}.ct-progress__step.is-current {
color: var(--fg);
}.ct-progress__step.is-current .ct-progress__n,
.ct-progress__step.is-done .ct-progress__n {
background: var(--accent);
color: var(--bg);
box-shadow: none;
}.ct-progress__step.is-done {
color: var(--fg-2);
}.ct-progress__step:disabled {
cursor: default;
opacity: 0.55;
}.ct-progress__step:not(:disabled):hover {
color: var(--fg);
}.ct-progress .segbar {
margin-top: 10px;
}.ct-alert {
margin-bottom: 28px;
padding: 14px 18px;
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px rgba(255, 143, 143, 0.6);
background: rgba(255, 122, 122, 0.08);
color: var(--fg);
}.ct-step {
padding-bottom: clamp(40px, 5vw, 64px);
}.ct-step + .ct-step {
padding-top: clamp(32px, 4vw, 48px);
border-top: 1px solid var(--line);
}.is-stepped .ct-step {
padding: 0;
border: 0;
}.is-stepped .ct-step:not(.is-active) {
display: none;
}.ct-step__head {
display: grid;
justify-items: start;
gap: 10px;
margin-bottom: clamp(24px, 3vw, 36px);
}.ct-step__n {
color: var(--accent);
}.ct-step__n span {
color: var(--fg-3);
}.ct-step__title {
font-family: var(--font-heading);
font-weight: 900;
font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.9rem);
line-height: 0.95;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--fg);
}.ct-step__title:focus {
outline: none;
}.ct-step__hint {
color: var(--fg-3);
}.ct-step__picked {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin-top: 4px;
}.ct-step__picked-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-sm);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc-lime) 55%, transparent);
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg);
}.ct-step__change {
min-height: 44px;
padding-inline: 4px;
font-weight: 700;
color: var(--accent);
text-decoration: underline;
text-underline-offset: 4px;
}.ct-intents {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}@media (min-width: 768px) {
.ct-intents {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}.ct-intent {
position: relative;
display: block;
cursor: pointer;
}.ct-intent__box {
--trace: 0;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto 1fr auto auto;
height: 100%;
min-height: 188px;
padding: 18px 18px 20px;
border-radius: 14px;
background-color: var(--panel);
box-shadow: inset 0 0 0 1px var(--line-2);
transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), transform 0.5s var(--ease-expo);
}.ct-intent__box::after {
content: "";
position: absolute;
inset: 0;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(from 210deg, var(--dc-lime) calc(var(--trace) * 1turn), transparent 0);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
pointer-events: none;
transition: --trace 0.9s var(--ease-expo);
}@property --trace {
syntax: "<number>";
inherits: false;
initial-value: 0;
}.ct-intent__n {
grid-column: 1;
grid-row: 1;
color: var(--fg-3);
}.ct-glyph {
grid-column: 1 / -1;
width: 46px;
height: 46px;
margin: 18px 0 20px;
color: var(--fg-2);
overflow: visible;
transition: color 0.4s var(--ease-out);
}.ct-intent__label {
grid-column: 1 / -1;
font-family: var(--font-heading);
font-size: clamp(1.1rem, 0.9rem + 0.55vw, 1.45rem);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ct-intent__hint {
grid-column: 1 / -1;
margin-top: 8px;
font-size: 0.875rem;
line-height: 1.4;
color: var(--fg-3);
}.ct-intent__tick {
grid-column: 2;
grid-row: 1;
align-self: start;
margin: -4px -4px 0 0;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--line-2);
color: transparent;
transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.5s var(--ease-expo);
}.ct-intent__tick .icon {
width: 15px;
height: 15px;
}.ct-intent:hover .ct-intent__box {
--trace: 1;
background-color: color-mix(in srgb, var(--dc-lime) 5%, transparent);
}.ct-intent:hover .ct-glyph {
color: var(--fg);
}.ct-vh:checked + .ct-intent__box {
--trace: 1;
background-color: color-mix(in srgb, var(--dc-lime) 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc-lime) 60%, transparent);
}.ct-vh:checked + .ct-intent__box .ct-glyph {
color: var(--dc-lime);
}.ct-vh:checked + .ct-intent__box .ct-intent__tick {
background: var(--dc-lime);
color: var(--dc-purple-black);
box-shadow: none;
transform: scale(1.08);
}.ct-intent:active .ct-intent__box {
transform: scale(0.985);
}.ct-vh:focus-visible + .ct-intent__box,
.ct-vh:focus-visible + .ct-chip__box {
outline: 2px solid var(--dc-lime);
outline-offset: 3px;
}@media (max-width: 599px) {
.ct-intent__box {
min-height: 164px;
padding: 14px 14px 16px;
}.ct-glyph {
width: 38px;
height: 38px;
margin: 12px 0 14px;
}.ct-intent__hint {
font-size: 0.8125rem;
}
}.ct-g {
transform-box: fill-box;
transform-origin: 50% 100%;
}.ct-intent:hover .ct-g,
.ct-vh:checked + .ct-intent__box .ct-g {
animation: ctLift 1.6s var(--ease-in-out) infinite;
}.ct-intent:hover .ct-g--2,
.ct-vh:checked + .ct-intent__box .ct-g--2 { animation-delay: 0.12s; }.ct-intent:hover .ct-g--3,
.ct-vh:checked + .ct-intent__box .ct-g--3 { animation-delay: 0.24s; }@keyframes ctLift {
0%, 60%, 100% { transform: none; }
30% { transform: translateY(-3px); }
}input[value="grow"] + .ct-intent__box .ct-g {
animation-name: ctGrow !important;
}@keyframes ctGrow {
0%, 100% { transform: scaleY(1); }
45% { transform: scaleY(0.55); }
}input[value="design"] + .ct-intent__box .ct-g--1 {
transform-origin: 50% 50%;
animation-name: ctOrbit !important;
}input[value="design"] + .ct-intent__box .ct-g--2 {
transform-origin: 50% 50%;
animation-name: ctTurn !important;
}@keyframes ctOrbit {
0%, 100% { transform: none; }
50% { transform: translate(3px, 3px); }
}@keyframes ctTurn {
0%, 100% { transform: none; }
50% { transform: rotate(45deg) scale(0.86); }
}input[value="automate"] + .ct-intent__box .ct-g {
transform-origin: 50% 50%;
animation: none;
}.ct-intent:hover input[value="automate"] + .ct-intent__box .ct-g,
input[value="automate"]:checked + .ct-intent__box .ct-g {
animation: ctSpin 2.6s linear infinite;
}@keyframes ctSpin {
to { transform: rotate(360deg); }
}input[value="ai"] + .ct-intent__box .ct-g {
transform-origin: 50% 50%;
animation-name: ctPulse !important;
}@keyframes ctPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.84); opacity: 0.55; }
}input[value="unsure"] + .ct-intent__box .ct-g {
animation-name: ctHop !important;
}@keyframes ctHop {
0%, 55%, 100% { transform: none; }
25% { transform: translateY(-5px); }
}.ct-build.is-offscreen .ct-g {
animation-play-state: paused !important;
}.ct-qset {
display: grid;
gap: 4px;
}.ct-qset + .ct-qset {
margin-top: 26px;
padding-top: 26px;
border-top: 1px dashed var(--line);
}.ct-qset__name {
margin-bottom: 10px;
color: var(--accent);
}.is-stepped .ct-qset:not(.is-active) {
display: none;
}.is-stepped .ct-qset + .ct-qset {
margin: 0;
padding: 0;
border: 0;
}.is-stepped .ct-qset__name {
display: none;
}.ct-group {
min-width: 0;
margin: 0 0 26px;
padding: 0;
border: 0;
}.ct-group__legend {
float: left;
width: 100%;
margin-bottom: 14px;
padding: 0;
font-weight: 700;
color: var(--fg);
}.ct-group__legend span {
font-weight: 400;
color: var(--fg-3);
}.ct-chips {
clear: both;
display: flex;
flex-wrap: wrap;
gap: 8px;
}.ct-chip {
position: relative;
cursor: pointer;
}.ct-chip__box {
display: inline-flex;
align-items: center;
min-height: 46px;
padding: 10px 18px;
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--line-2);
font-size: 0.95rem;
line-height: 1.2;
color: var(--fg-2);
transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), padding 0.45s var(--ease-expo);
}.ct-chip__mark {
display: inline-grid;
place-items: center;
width: 0;
overflow: hidden;
transition: width 0.45s var(--ease-expo), margin 0.45s var(--ease-expo);
}.ct-chip__mark .icon {
width: 15px;
height: 15px;
flex-shrink: 0;
}.ct-chip:hover .ct-chip__box {
box-shadow: inset 0 0 0 1px var(--fg-3);
color: var(--fg);
}.ct-vh:checked + .ct-chip__box {
background: var(--dc-lime);
box-shadow: none;
color: var(--dc-purple-black);
font-weight: 700;
}.ct-vh:checked + .ct-chip__box .ct-chip__mark {
width: 16px;
margin-right: 8px;
}.ct-chips--sm .ct-chip__box {
min-height: 44px;
padding: 9px 15px;
font-size: 0.9rem;
}.ct-fields {
display: grid;
gap: 24px 16px;
}@media (min-width: 768px) {
.ct-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.ct-field--email,
.ct-field--budget,
.ct-field--timeline,
.ct-field--message {
grid-column: 1 / -1;
}
}.ct-field {
min-width: 0;
}.ct-field.ct-group {
margin: 0;
}.ct-field__label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
font-weight: 700;
color: var(--fg);
}.ct-field__req {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fg-3);
}.ct-group__legend .ct-field__req {
margin-left: 10px;
}.ct-field__foot {
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 8px;
}.ct-count {
margin-left: auto;
font-size: 0.625rem;
color: var(--fg-3);
white-space: nowrap;
}.ct-err {
margin-top: 8px;
font-size: 0.875rem;
color: #ffadad;
}.ct-field__foot .ct-err {
margin-top: 0;
}.ct-err:empty {
display: none;
}.ct-intents .ct-err {
grid-column: 1 / -1;
}.ct-form .input {
min-height: 58px;
}.ct-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 20px;
margin-top: clamp(32px, 4vw, 48px);
padding-top: 24px;
border-top: 1px solid var(--line);
}.ct-nav__hint {
margin-left: auto;
font-size: 0.6875rem;
color: var(--fg-3);
}.ct-nav__next,
.ct-nav__send {
margin-left: auto;
}.ct-nav__hint + .ct-nav__next,
.ct-nav__hint + .ct-nav__next + .ct-nav__send {
margin-left: 0;
}.ct-nav__back {
padding: 6px 24px 6px 6px;
}.ct-nav__back .btn__arrow--in,
.ct-nav__next .btn__arrow--in {
transform: translateX(-170%);
}.ct-nav__back .btn__arrow--in {
transform: translateX(170%);
}@media (hover: hover) {
.ct-nav__next:hover .btn__arrow {
transform: translateX(170%);
}.ct-nav__back:hover .btn__arrow {
transform: translateX(-170%);
}.ct-nav__next:hover .btn__arrow--in,
.ct-nav__back:hover .btn__arrow--in {
transform: none;
}
}.ct-nav__send.is-busy {
pointer-events: none;
opacity: 0.7;
}@media (max-width: 1023px), (pointer: coarse) {
.ct-nav__hint {
display: none;
}
}.ct-privacy {
margin-top: 18px;
font-size: 0.875rem;
color: var(--fg-3);
}.ct-privacy .link {
margin-left: 6px;
color: var(--fg-2);
font-weight: 500;
}.ct-done {
position: relative;
display: grid;
justify-items: start;
gap: 22px;
padding: clamp(28px, 4vw, 56px);
border-radius: 16px;
background: color-mix(in srgb, var(--dc-lime) 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc-lime) 45%, transparent);
}.ct-done:focus {
outline: none;
}.ct-done__kicker {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--dc-lime);
}.ct-done__tick {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--dc-lime);
color: var(--dc-purple-black);
}.ct-done__tick .icon {
width: 16px;
height: 16px;
}.ct-done__title {
font-family: var(--font-heading);
font-weight: 900;
font-size: min(clamp(3rem, 1.6rem + 4.4vw, 7rem), calc((100vw - var(--gutter) * 2) / 6.4));
line-height: 0.88;
letter-spacing: -0.016em;
text-transform: uppercase;
color: var(--fg);
}.ct-done__ref {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
color: var(--fg-3);
}.ct-done__ref b {
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--fg);
}.ct-done__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 30px;
margin-top: 8px;
}.ct-card__paper {
box-shadow: 0 50px 100px -50px rgba(5, 2, 10, 0.95);
}.ct-card__toggle {
display: none;
}.ct-card__body {
position: relative;
padding: clamp(18px, 1.8vw, 26px);
}.ct-card__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 6px 18px;
font-size: 0.625rem;
color: var(--fg-3);
}.ct-card__meta b {
margin-left: 6px;
font-weight: 500;
color: var(--fg);
}.ct-card__sentence {
margin: 18px 0 18px;
padding-bottom: 20px;
border-bottom: 1px dashed var(--line-2);
font-size: clamp(1.3rem, 0.95rem + 0.8vw, 1.8rem);
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.025em;
color: var(--fg);
text-wrap: pretty;
}.ct-slot {
color: var(--dc-purple);
background: linear-gradient(transparent 64%, rgba(197, 244, 61, 0.75) 64%, rgba(197, 244, 61, 0.75) 92%, transparent 92%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}.ct-slot.is-new {
animation: ctInk 0.9s var(--ease-expo);
}@keyframes ctInk {
from { background-size: 0 100%; }
to { background-size: 100% 100%; }
}.ct-slot {
background-repeat: no-repeat;
background-size: 100% 100%;
}.ct-blank {
display: inline-block;
width: 4.2em;
height: 0.9em;
vertical-align: -0.08em;
border-bottom: 2px solid var(--line-2);
}.ct-card__rows > div {
display: grid;
grid-template-columns: 8.2em minmax(0, 1fr);
gap: 12px;
align-items: baseline;
padding: 9px 0;
border-bottom: 1px solid var(--line);
}.ct-card__rows dt {
font-family: var(--font-mono);
font-size: 0.625rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
}.ct-card__rows dd {
font-size: 0.9375rem;
line-height: 1.4;
color: var(--fg);
overflow-wrap: anywhere;
}.ct-card__rows dd.is-empty {
color: var(--fg-3);
}.ct-card__rows [data-ct-row="message"] dd {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}.ct-card__rows .is-via dd {
color: var(--dc-purple);
}.ct-card__rows > div.is-new dd {
animation: ctFlash 1.1s var(--ease-out);
}@keyframes ctFlash {
from { background-color: rgba(197, 244, 61, 0.6); }
to { background-color: rgba(197, 244, 61, 0); }
}.ct-card__foot {
display: flex;
align-items: center;
gap: 14px;
margin-top: 16px;
font-size: 0.625rem;
color: var(--fg-3);
}.ct-card__foot b {
font-weight: 500;
color: var(--fg);
}.ct-card__meter {
position: relative;
flex: 1;
height: 3px;
border-radius: 3px;
background: var(--line);
overflow: hidden;
}.ct-card__meter i {
position: absolute;
inset: 0;
background: var(--dc-purple);
transform: scaleX(var(--p, 0));
transform-origin: left;
transition: transform 0.6s var(--ease-expo);
}.ct-card__stamp {
position: absolute;
top: 58px;
right: 18px;
display: grid;
justify-items: center;
gap: 2px;
padding: 8px 14px;
border: 2px solid var(--dc-purple);
border-radius: 8px;
color: var(--dc-purple);
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
background: color-mix(in srgb, var(--dc-off-white) 88%, transparent);
opacity: 0;
transform: rotate(-9deg) scale(1.5);
transition: opacity 0.35s var(--ease-out), transform 0.7s var(--ease-expo);
pointer-events: none;
}.ct-card__stamp b {
font-size: 0.625rem;
letter-spacing: 0.1em;
}.is-sent .ct-card__stamp {
opacity: 1;
transform: rotate(-9deg);
}.is-sent .ct-card__status .pulse {
background: var(--dc-lime);
}@media (max-width: 1023px) {
.ct-card {
position: sticky;
bottom: 10px;
z-index: 5;
}.ct-card__status {
display: none;
}.ct-card__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
margin-left: auto;
margin-right: -8px;
padding: 0 10px;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg);
}.ct-card__toggle b {
font-weight: 500;
color: var(--dc-purple);
}.ct-card__toggle svg {
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
transition: transform 0.4s var(--ease-expo);
}.ct-card.is-open .ct-card__toggle svg {
transform: rotate(180deg);
}.ct-card .ui__bar {
min-height: 46px;
}.ct-card__body {
padding: 12px 16px 14px;
}.ct-card__meta {
display: none;
}.ct-card__sentence {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
font-size: 1.05rem;
}.ct-card__more {
display: none;
}.ct-card.is-open .ct-card__sentence {
display: block;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--line-2);
}.ct-card.is-open .ct-card__more {
display: block;
max-height: 46vh;
overflow: auto;
overscroll-behavior: contain;
}.ct-card__stamp {
top: 8px;
right: 12px;
padding: 4px 10px;
font-size: 0.6875rem;
}.ct-card__stamp b {
display: none;
}
}.ct-lines {
border-top: 1px solid var(--line-2);
}.ct-line {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
border-bottom: 1px solid var(--line-2);
isolation: isolate;
}.ct-line::before {
content: "";
position: absolute;
inset: 0 calc(var(--gutter) * -0.5);
z-index: -1;
background: var(--dc-purple);
transform: scaleY(0);
transform-origin: 50% 100%;
transition: transform 0.6s var(--ease-expo);
}.ct-line__link {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 15rem) 52px;
align-items: center;
gap: 24px;
padding-block: clamp(24px, 2.8vw, 42px);
color: var(--fg);
transition: color 0.4s var(--ease-out);
}.ct-line__label {
font-size: 0.6875rem;
color: var(--fg-3);
transition: color 0.4s var(--ease-out);
}.ct-line__label b {
margin-left: 6px;
font-weight: 500;
color: var(--accent);
}.ct-line__value {
font-family: var(--font-heading);
font-weight: 900;
font-size: min(3.3rem, calc((100vw - var(--gutter) * 2) / 15.5));
line-height: 1;
letter-spacing: -0.01em;
text-transform: uppercase;
white-space: nowrap;
transition: transform 0.7s var(--ease-expo);
}.ct-line__note {
font-size: 0.9375rem;
color: var(--fg-3);
transition: color 0.4s var(--ease-out);
}.ct-line__arrow {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--line-2);
transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), transform 0.7s var(--ease-expo);
}.ct-line__arrow .icon {
width: 18px;
height: 18px;
}.ct-line__copy {
min-height: 44px;
margin-left: 18px;
padding: 0 18px;
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--line-2);
font-size: 0.6875rem;
color: var(--fg-2);
transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}.ct-line__copy:hover {
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--accent);
}.ct-line__copy.is-copied {
background: var(--accent);
box-shadow: none;
color: #fff;
}@media (hover: hover) {
.ct-line:has(.ct-line__link:hover)::before {
transform: scaleY(1);
}.ct-line__link:hover {
color: #fff;
}.ct-line__link:hover .ct-line__label,
.ct-line__link:hover .ct-line__note {
color: rgba(255, 255, 255, 0.8);
}.ct-line__link:hover .ct-line__label b {
color: var(--dc-lime);
}.ct-line__link:hover .ct-line__value {
transform: translateX(14px);
}.ct-line__link:hover .ct-line__arrow {
background: var(--dc-lime);
color: var(--dc-purple-black);
box-shadow: none;
transform: rotate(45deg);
}.ct-line:has(.ct-line__link:hover) .ct-line__copy {
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
}.ct-line__link:focus-visible {
outline-offset: -2px;
}.ct-line--mail .ct-line__value {
font-size: min(2.9rem, calc((100vw - var(--gutter) * 2) / 17));
}@media (min-width: 1280px) {
.ct-line {
grid-template-columns: minmax(0, 1fr) 118px;
}.ct-line__copy {
justify-self: end;
}.ct-line--mail .ct-line__value {
font-size: min(2.9rem, calc((100vw - var(--gutter) * 2 - 600px) / 17.5));
}
}@media (max-width: 1279px) {
.ct-line__link {
grid-template-columns: minmax(0, 1fr) 44px;
grid-template-areas: "label arrow" "value value" "note note";
gap: 10px 16px;
}.ct-line__label { grid-area: label; }
.ct-line__value { grid-area: value; }
.ct-line__note { grid-area: note; font-size: 0.875rem; }.ct-line__arrow {
grid-area: arrow;
width: 44px;
height: 44px;
}.ct-line__value {
font-size: min(3.3rem, calc((100vw - var(--gutter) * 2) / 12));
}.ct-line--mail {
grid-template-columns: minmax(0, 1fr);
}.ct-line__copy {
justify-self: start;
margin: -10px 0 22px;
}
}.ct-clock {
--cols: 64px minmax(0, 3fr) minmax(0, 5.2fr) 7.5rem;
position: relative;
}.ct-clock__axis {
display: grid;
grid-template-columns: var(--cols);
gap: clamp(16px, 2vw, 32px);
padding-bottom: 12px;
border-bottom: 1px solid var(--line-2);
}.ct-clock__axis::before {
content: "";
grid-column: 1 / 3;
}.ct-clock__axis > span:first-child {
grid-column: 3;
grid-row: 1;
}.ct-clock__axis > span {
position: relative;
grid-column: 3;
grid-row: 1;
justify-self: start;
margin-left: calc(var(--x) * 100%);
transform: translateX(calc(var(--x) * -100%));
font-family: var(--font-mono);
font-size: 0.625rem;
letter-spacing: 0.12em;
color: var(--fg-3);
}.ct-zones__list {
position: relative;
}.ct-zone {
--p: 1;
position: relative;
display: grid;
grid-template-columns: var(--cols);
gap: clamp(16px, 2vw, 32px);
align-items: center;
padding-block: clamp(16px, 1.6vw, 24px);
border-bottom: 1px solid var(--line);
}.ct-zone .locmark {
gap: 12px;
}.ct-zone__place {
display: grid;
gap: 8px;
min-width: 0;
}.ct-zone__name {
font-family: var(--font-heading);
font-weight: 900;
font-size: clamp(1.25rem, 0.8rem + 1.5vw, 2.5rem);
line-height: 1;
text-transform: uppercase;
color: var(--fg);
}.ct-zone__name em {
display: inline-block;
margin-left: 8px;
padding: 4px 8px;
border-radius: var(--radius-sm);
background: var(--dc-lime);
color: var(--dc-purple-black);
font-family: var(--font-mono);
font-size: 0.625rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.16em;
vertical-align: 0.5em;
}.ct-zone__meta {
font-size: 0.6875rem;
color: var(--fg-3);
}.ct-zone__track {
position: relative;
height: 34px;
border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px var(--line);
background: color-mix(in srgb, var(--fg) 2%, transparent);
}.ct-zone__track::before {
content: "";
position: absolute;
inset: 11px 0;
background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(100% / 24));
-webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
opacity: 0.7;
}.ct-zone__day {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, transparent 20%, rgba(197, 244, 61, 0.09) 30%, rgba(197, 244, 61, 0.16) 50%, rgba(197, 244, 61, 0.09) 70%, transparent 80%);
}.ct-zone__mark {
position: absolute;
top: -7px;
bottom: -7px;
left: calc(var(--t) * var(--p) * 100%);
width: 2px;
margin-left: -1px;
border-radius: 2px;
background: var(--fg-2);
}.ct-zone__mark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
background: var(--fg);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--fg) 16%, transparent);
}.ct-zone.is-hq .ct-zone__mark,
.ct-zone.is-hq .ct-zone__mark::after {
background: var(--dc-lime);
}.ct-zone.is-hq .ct-zone__mark::after {
box-shadow: 0 0 0 5px rgba(197, 244, 61, 0.22), 0 0 24px rgba(197, 244, 61, 0.55);
}.ct-zone.is-hq::before {
content: "";
position: absolute;
inset: 0 calc(var(--gutter) * -0.4);
z-index: -1;
background: linear-gradient(90deg, rgba(197, 244, 61, 0.07), transparent 70%);
}.ct-zone__time {
justify-self: end;
font-family: var(--font-mono);
font-size: clamp(1.3rem, 0.9rem + 1vw, 2.2rem);
font-weight: 500;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
color: var(--fg);
}.ct-zone.is-hq .ct-zone__time {
color: var(--dc-lime);
}.ct-zone.is-you {
border-bottom-style: dashed;
}.ct-zone.is-you .locmark__iso {
text-transform: uppercase;
color: #a77bff;
}.ct-zone.is-you .locmark__dot {
background: var(--dc-purple-bright);
box-shadow: 0 0 0 4px rgba(123, 44, 240, 0.3);
}.ct-zone.is-you .ct-zone__name {
color: var(--fg-2);
}.ct-zone.is-you .ct-zone__mark,
.ct-zone.is-you .ct-zone__mark::after {
background: var(--dc-purple-bright);
}.ct-zone.is-you .ct-zone__track {
box-shadow: inset 0 0 0 1px rgba(123, 44, 240, 0.55);
}.ct-clock__now {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}.ct-clock__now path {
fill: none;
stroke: var(--dc-lime);
stroke-width: 1.2;
stroke-dasharray: 2 6;
opacity: 0.55;
}.ct-zones__alt {
margin-top: 22px;
}@media (max-width: 767px) {
.ct-clock__axis {
display: none;
}.ct-zone {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "loc place time" "track track track";
gap: 14px 14px;
padding-block: 18px 20px;
}.ct-zone .locmark { grid-area: loc; align-self: start; padding-top: 4px; }
.ct-zone__place { grid-area: place; }
.ct-zone__time { grid-area: time; align-self: start; }
.ct-zone__track { grid-area: track; height: 26px; }.ct-zone__track::before {
inset: 8px 0;
}.ct-zone__name em {
vertical-align: 0.2em;
}
}@media (min-width: 768px) {
.ct-zones__list {
border-top: 0;
}
}.ct-promise__grid {
display: grid;
gap: clamp(48px, 6vw, 72px);
}.ct-promise__head {
display: grid;
align-content: start;
justify-items: start;
gap: 24px;
}.ct-promise__title {
font-size: min(var(--fs-h2), calc((100vw - var(--gutter) * 2) / 9.4));
}.ct-promise__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 28px;
margin-top: 12px;
}.ct-promise__actions .link {
color: var(--fg);
}.ct-promise__body {
position: relative;
padding-left: 64px;
}.ct-promise__spine {
position: absolute;
top: 20px;
bottom: 60px;
left: 19px;
width: 2px;
background: var(--line-2);
}.ct-promise__spine i {
position: absolute;
inset: 0;
background: var(--dc-lime);
transform: scaleY(var(--s, 1));
transform-origin: 50% 0;
}.ct-promise__item {
position: relative;
padding-bottom: clamp(28px, 4.4vh, 56px);
}.ct-promise__item:last-child {
padding-bottom: 0;
}.ct-promise__tick {
position: absolute;
top: -2px;
left: -64px;
width: 40px;
height: 40px;
}.ct-promise__tick svg {
width: 100%;
height: 100%;
overflow: visible;
}.ct-promise__tick circle {
fill: var(--bg);
stroke: var(--line-2);
stroke-width: 1.5;
transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out);
}.ct-promise__tick path {
fill: none;
stroke: var(--dc-purple-black);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.7s var(--ease-expo) 0.1s;
}.ct-promise__item.is-on .ct-promise__tick circle {
fill: var(--dc-lime);
stroke: var(--dc-lime);
}.ct-promise__item.is-on .ct-promise__tick path {
stroke-dashoffset: 0;
}.ct-promise__n {
margin-bottom: 10px;
color: var(--fg-3);
}.ct-promise__text {
font-family: var(--font-heading);
font-weight: 900;
font-size: clamp(1.7rem, 6.4vw, 2.8rem);
line-height: 0.94;
letter-spacing: -0.012em;
text-transform: uppercase;
color: var(--fg);
transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-expo);
}.ct-promise__note {
max-width: 34em;
margin-top: 14px;
color: var(--fg-2);
transition: opacity 0.6s var(--ease-out);
}.ct-promise.is-armed .ct-promise__item:not(.is-on) .ct-promise__text {
opacity: 0.34;
transform: translateX(-10px);
}.ct-promise.is-armed .ct-promise__item:not(.is-on) .ct-promise__note {
opacity: 0.45;
}@media (min-width: 1024px) {
.ct-promise {
display: grid;
align-items: center;
min-height: 100vh;
min-height: 100svh;
padding-block: calc(var(--header-h) + 32px) 56px;
}.ct-promise__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: clamp(40px, 5vw, 96px);
align-items: center;
}.ct-promise__text {
font-size: min(4.3rem, calc((100vw - var(--gutter) * 2) * 0.49 / 12.4), 7.2vh);
}.ct-promise__text .line {
white-space: nowrap;
}.ct-promise__title {
font-size: min(var(--fs-h2), calc((100vw - var(--gutter) * 2) * 0.36 / 9.4));
}.ct-promise__title .line {
white-space: nowrap;
}
}