/* The Contact page: the director's. Tokens only from design\system.css. */
.page-contact {
  --tint: linear-gradient(0deg, rgb(10 34 84 / 0.2), rgb(10 34 84 / 0.2));
  --star: #FBBC04; /* a demo keeps the real colors of what it shows: review stars */
  --c-error: color-mix(in srgb, var(--c-spark) 45%, var(--c-paper));
}

/* ---------- #hero: an owner's phone in her hands; her message, read by the team, and its reply on its screen ---------- */
/* The photo is drawn larger than the band, so its screen shows 220 px wide or more: --px is where the phone's middle
   stands, --pw the photo's drawn width. */
.ct-hero { --pw: clamp(1320px, 106vw, 1720px); --px: 66%; position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; display: grid; align-items: center; min-height: clamp(720px, 92svh, 900px); padding: calc(var(--header-h) + clamp(2rem, 5vh, 3.5rem)) 0 clamp(3rem, 7vh, 5rem); background: var(--c-ink); }
.ct-hero__photo { position: absolute; inset: 0; z-index: -2; margin: 0; isolation: isolate; }
.ct-hero__photo > img { position: absolute; left: calc(var(--px) - var(--pw) * 0.48); top: calc(50% + 1.75rem - var(--pw) * 0.2753); width: var(--pw); height: calc(var(--pw) / 1.5); max-width: none; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); }
/* the deep-ocean grade on the photo, under its screen */
.ct-hero__photo::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgb(10 34 84 / 0.34), rgb(10 34 84 / 0.34)); }
.ct-hero__photo .screen { z-index: 1; border-radius: 20px; }
.ct-hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgb(2 11 25 / 0.96) 0%, rgb(2 11 25 / 0.86) 26%, rgb(2 11 25 / 0.4) 44%, rgb(2 11 25 / 0) 56%),
  linear-gradient(180deg, rgb(2 11 25 / 0.55) 0%, rgb(2 11 25 / 0) 18%, rgb(2 11 25 / 0) 90%, var(--c-ink) 100%); }
.ct-hero__in { position: relative; z-index: 1; }
.ct-hero__words { max-width: 520px; }
.ct-hero__title { font: 600 var(--fs-display)/var(--lh-tight) var(--font-display); letter-spacing: -0.035em; color: var(--c-on-ink); }
.ct-hero__title .quiet { display: block; }
.ct-hero__line { margin: 1.25rem 0 2rem; max-width: 30rem; color: var(--c-on-ink-soft); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; }
.ct-hero__write { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; margin-top: 1rem; color: var(--c-brand-on-ink); font: 600 var(--fs-ui)/1.2 var(--font-ui); text-decoration: none; }
.ct-hero__write:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ct-hero__write svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-hero__stop { position: absolute; z-index: 2; left: calc(var(--px) + 170px); bottom: clamp(2rem, 6vh, 3.5rem); }

/* the phone's screen, designed at 220 x 478: a dark messages screen */
.ct-phone { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--c-trench) 0%, var(--c-deep) 38%, var(--c-ink) 100%); color: var(--c-on-ink); font: 400 15px/1.35 var(--font-ui); }
.ct-phone__notch { position: absolute; z-index: 1; left: 50%; top: 0; width: 108px; height: 21px; margin-left: -54px; border-radius: 0 0 12px 12px; background: #000; }
.ct-phone__top { display: flex; align-items: center; gap: 10px; padding: 32px 14px 11px; border-bottom: 1px solid rgb(5 187 252 / 0.16); }
.ct-phone__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgb(5 187 252 / 0.14); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.4); }
.ct-phone__av svg { width: 20px; height: 20px; fill: none; stroke: var(--c-brand-on-ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ct-phone__who { display: grid; gap: 2px; min-width: 0; }
.ct-phone__who b { font: 600 15px/1.2 var(--font-display); color: var(--c-on-ink); }
.ct-phone__who span { font: 500 13px/1.2 var(--font-ui); color: var(--c-on-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-msgs { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 10px; opacity: calc(1 - var(--kit-out, 0)); }
.ct-msgs [hidden] { display: none !important; }
.ct-msgs [data-kit-msg] { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 8px)); }
.ct-msg { max-width: 84%; margin: 0; padding: 9px 12px; border-radius: 16px; font: 500 15px/1.35 var(--font-ui); }
.ct-msg--me { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--c-brand); color: var(--c-on-brand); }
.ct-msg--them { align-self: flex-start; border-bottom-left-radius: 5px; background: rgb(12 36 72 / 0.95); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.2); color: var(--c-on-ink); }
.ct-seen { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; margin: -3px 2px 0 0; font: 600 13px/1.2 var(--font-ui); color: var(--c-accent-on-ink); }
.ct-seen svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ct-typing { display: inline-flex; gap: 5px; padding: 12px 13px; }
.ct-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-on-ink-soft); animation: ct-dot 1.1s infinite ease-in-out; }
.ct-typing i:nth-child(2) { animation-delay: 0.15s; }
.ct-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ct-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 30% { transform: translateY(-4px); opacity: 1; } }
.ct-phone__bar { display: flex; align-items: center; justify-content: space-between; height: 38px; margin: 0 10px 18px; padding: 0 5px 0 14px; border-radius: 19px; background: rgb(12 36 72 / 0.75); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.16); color: var(--c-on-ink-soft); font: 500 14px/1 var(--font-ui); }
.ct-phone__bar i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-brand); }
.ct-phone__bar svg { width: 15px; height: 15px; fill: none; stroke: var(--c-on-brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); }

/* ---------- #form: the kit's form in three steps, its choices shown as what they bring ---------- */
.ct-form__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ct-form__head { position: sticky; top: calc(var(--header-h) + 2.5rem); }
.ct-box { padding: clamp(1.4rem, 3vw, 2.4rem); }
.ct-marks { display: flex; gap: 0.6rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.ct-marks li { flex: 1; display: flex; align-items: center; gap: 0.55rem; min-width: 0; padding-bottom: 0.8rem; border-bottom: 2px solid rgb(5 187 252 / 0.14); color: var(--c-on-ink-soft); font: 600 var(--fs-small)/1.25 var(--font-ui); transition: color var(--dur-fast), border-color var(--dur-fast); }
.ct-marks span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-trench); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.25); color: var(--c-on-ink); font: 700 0.8125rem/1 var(--font-ui); }
.ct-marks [aria-current="step"] { color: var(--c-on-ink); border-bottom-color: var(--c-brand); }
.ct-marks [aria-current="step"] span { background: var(--c-brand); box-shadow: 0 0 14px -2px rgb(5 187 252 / 0.8); color: var(--c-on-brand); }
.ct-marks [data-kit-past] { border-bottom-color: rgb(24 224 194 / 0.6); }
.ct-marks [data-kit-past] span { background: var(--c-accent); box-shadow: none; color: var(--c-ink); }
.ct-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-q { margin-bottom: 1.25rem; padding: 0; font: 600 clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--c-on-ink); }

.ct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ct-tile { position: relative; display: grid; gap: 0.9rem; padding: 1rem; border-radius: var(--radius-m); background: rgb(7 24 51 / 0.72); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.16); cursor: pointer; transition: box-shadow var(--dur-fast), background-color var(--dur-fast); }
.ct-tile:hover { background: rgb(12 36 72 / 0.8); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.45); }
.ct-tile input, .ct-num input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ct-tile:has(input:focus-visible), .ct-num:has(input:focus-visible) { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.ct-tile[data-kit-on] { background: rgb(12 36 72 / 0.92); box-shadow: inset 0 0 0 2px var(--c-brand), 0 0 26px -8px rgb(5 187 252 / 0.7); }
.ct-tile__name { font: 600 1.0625rem/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--c-on-ink); }
.ct-tile[data-kit-on] .ct-tile__name { color: var(--c-brand-on-ink); }
.ct-pic { display: flex; align-items: center; gap: 0.6rem; min-height: 54px; padding: 0.55rem 0.7rem; border-radius: var(--radius-s); background: rgb(2 11 25 / 0.62); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.14); }
.ct-pic__ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(24 224 194 / 0.14); color: var(--c-accent-on-ink); }
.ct-pic__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-pic__ic--star { color: var(--star); font-size: 17px; line-height: 1; }
.ct-pic__t { display: grid; gap: 1px; min-width: 0; }
.ct-pic__t b { font: 600 0.875rem/1.2 var(--font-ui); color: var(--c-on-ink); }
.ct-pic__t span { font: 500 0.8125rem/1.2 var(--font-ui); color: var(--c-on-ink-soft); }
.ct-pic__stars { flex: none; color: var(--star); font-size: 0.9375rem; letter-spacing: 0.04em; }
.ct-pic--all { gap: 0.4rem; }
.ct-pic__rise { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; }
.ct-pic__rise svg { width: 24px; height: 24px; fill: none; stroke: var(--c-brand-on-ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgb(5 187 252 / 0.6)); }

.ct-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.ct-num { position: relative; display: grid; place-items: center; gap: 0.25rem; padding: 1.15rem 0.4rem; border-radius: var(--radius-m); background: rgb(7 24 51 / 0.72); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.2); cursor: pointer; transition: box-shadow var(--dur-fast), background-color var(--dur-fast); }
.ct-num:hover { box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.5); }
.ct-num b { font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--font-display); letter-spacing: -0.02em; color: var(--c-on-ink); font-variant-numeric: tabular-nums; }
.ct-num span { font: 500 0.8125rem/1.2 var(--font-ui); color: var(--c-on-ink-soft); }
.ct-num[data-kit-on] { background: var(--c-brand); box-shadow: var(--glow); }
.ct-num[data-kit-on] b, .ct-num[data-kit-on] span { color: var(--c-on-brand); }
.ct-tiles .ct-error, .ct-nums .ct-error { grid-column: 1 / -1; }
.ct-error { margin-top: 0.35rem; color: var(--c-error); font: 600 var(--fs-small)/1.35 var(--font-ui); }

.ct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ct-field--wide { grid-column: 1 / -1; }
.ct-field label { display: block; margin-bottom: 0.45rem; color: var(--c-on-ink); font: 600 var(--fs-ui)/1.3 var(--font-ui); }
.ct-field label span { color: var(--c-on-ink-soft); font-weight: 500; }
.ct-field input, .ct-field textarea { box-sizing: border-box; width: 100%; height: 52px; padding: 0 1rem; border: 0; border-radius: var(--radius-s); background: rgb(2 11 25 / 0.66); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.24); color: var(--c-on-ink); font: 500 1rem/1.3 var(--font-ui); transition: box-shadow var(--dur-fast); }
.ct-field textarea { height: auto; min-height: 100px; padding: 0.8rem 1rem; resize: vertical; }
.ct-field input::placeholder { color: var(--c-on-ink-soft); opacity: 0.7; }
.ct-field input:focus, .ct-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.8), 0 0 0 4px rgb(5 187 252 / 0.16); }
.ct-field [aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--c-error); }
.ct-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-top: 1.6rem; }
[data-kit-sending] .ct-nav [type="submit"] { opacity: 0.7; pointer-events: none; }
.ct-legal { margin-top: 1rem; color: var(--c-on-ink-soft); font-size: var(--fs-small); text-align: right; }
.ct-legal a { color: var(--c-brand-on-ink); font-weight: 600; }

/* ---------- #skip: the plan chat in glass over a hair salon at work, the line rising beside the button ---------- */
.ct-skip__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ct-skip__words { position: relative; z-index: 1; padding-bottom: 4.5rem; }
.ct-skip__words h2 { font-size: var(--fs-h2); }
.ct-skip__words .part__line { margin-bottom: clamp(1.5rem, 3vw, 2.1rem); }
/* flat under the button, rising up-right past the words' edge toward the chat (its arrow clear of the words) */
.ct-skip__rise { position: absolute; z-index: -1; left: calc(100% - 100px); bottom: 0; width: 180px; height: 120px; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 0 7px rgb(5 187 252 / 0.6)); }
.ct-skip__media { position: relative; margin: 0 0 2.5rem; }
.ct-skip__photo { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-l); overflow: hidden; background: var(--c-deep); box-shadow: 0 0 0 1px rgb(5 187 252 / 0.12), var(--shadow-l); }
.ct-skip__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(2 11 25 / 0) 50%, rgb(2 11 25 / 0.45) 100%), var(--tint); }
.ct-skip__photo img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 30% 30%; }
.ct-skip__media .ct-skip__chat { position: absolute; z-index: 1; right: clamp(1rem, 3vw, 2rem); bottom: -2.5rem; width: min(300px, 44%); }
.ct-skip__stop { position: absolute; z-index: 2; left: 14px; top: 14px; }

@media (min-width: 900px) and (max-width: 1199.98px) {
  .ct-hero { --px: 71%; }
  .ct-hero__words { max-width: 440px; }
  .ct-hero__stop { left: auto; right: var(--gutter); }
}

@media (max-width: 1023.98px) {
  .ct-form__in { grid-template-columns: minmax(0, 1fr); }
  .ct-form__head { position: static; }
}

@media (max-width: 899.98px) {
  .ct-hero { --pw: 1340px; --px: 50%; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: calc(var(--header-h) + 1.75rem) 0 0; }
  .ct-hero__in { order: 1; }
  .ct-hero__photo { order: 2; position: relative; inset: auto; z-index: 0; height: 590px; margin-top: 1.5rem; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px); mask-image: linear-gradient(180deg, transparent 0, #000 18px); }
  .ct-hero__photo > img { top: calc(26px - var(--pw) * 0.0973); -webkit-mask-image: none; mask-image: none; }
  .ct-hero__shade { background: linear-gradient(180deg, rgb(2 11 25 / 0) calc(100% - 64px), var(--c-ink) 100%); z-index: 1; }
  .ct-hero__words { max-width: none; }
  .ct-hero__stop { left: auto; right: var(--gutter); top: auto; bottom: 2rem; }
  .ct-skip__in { grid-template-columns: minmax(0, 1fr); }
  .ct-skip__words { padding-bottom: 3.5rem; }
  .ct-skip__rise { left: calc(100% - 196px); }
  .ct-skip__media { margin-bottom: 0; }
  /* the chat pulled up over the photo's lower half (more than half of it on the photo), the face clear above it */
  .ct-skip__media .ct-skip__chat { position: relative; right: auto; bottom: auto; width: min(320px, 90%); margin: -250px auto 0; }
}

@media (max-width: 760px) {
  .ct-tiles { grid-template-columns: minmax(0, 1fr); }
  .ct-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-fields { grid-template-columns: minmax(0, 1fr); }
  .ct-marks li { font-size: 0.8125rem; }
  .ct-nav .button { flex: 1; }
  .ct-legal { text-align: left; }
  .ct-skip__photo { aspect-ratio: 4 / 5; }
  .ct-skip__photo img { object-position: 38% 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-typing i { animation: none; }
}