/* =========================================================
Contact Us Interactive Page
Desktop-first, cleaned up breakpoints:
- Base rules below = DESKTOP (laptop/desktop/wide-desktop merged)
- One TABLET override: 768px–1024px
- One MOBILE override: max-width 767px
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}

/* ------------------------------
Page Fonts
------------------------------ */
@font-face {
font-family: "Galano";
src: url("../-global-assets/fonts/GalanoGrotesqueRegular.otf")
format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Galano";
src: url("../-global-assets/fonts/GalanoGrotesque-Medium.ttf")
format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Galano";
src: url("../-global-assets/fonts/GalanoGrotesqueDEMO-Bold.ttf")
format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Yummy Foodies";
src: url("../-global-assets/fonts/Yummy-Foodies.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* ------------------------------
Root Tokens
------------------------------ */
.contact-us-main {
--page-background: radial-gradient(
118.38% 101.85% at 50% 0%,
#01243c 0%,
#001827 46%,
#000000 100%
);
--glow-gradient: linear-gradient(62deg, #02bcdd, #06d1e5, #64eda8, #d0f88d);
--cyan: #05c8df;
--cyan-soft: rgba(5, 200, 223, 0.72);
--cyan-shadow: rgba(5, 200, 223, 0.34);
--white: #ffffff;
--ink: #031b2e;
--blue: #079edf;
--red: #f31c23;
--font-display: "Yummy Foodies";
--font-body: "Galano";
}

a {
text-decoration: none !important;
}

/* ------------------------------
Page Base
------------------------------ */
.contact-us-page {
min-height: 100svh;
margin: 0;
overflow: hidden;
background: #000000;
color: #ffffff;
font-family: "Galano";
}

/* =========================================================
DESKTOP (default — no media query)
========================================================= */

.contact-us-main {
position: relative;
height: calc(100svh - 58px);
min-height: 0;
overflow: hidden;
background: var(--page-background);
}

.contact-stage {
position: relative;
width: 100%;
height: 105%;
min-height: 0;
overflow: hidden;
isolation: isolate;
background: var(--page-background);
}

/* Background / table / telephone image layer */
.contact-stage__scene {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}

.contact-stage__scene-image {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: auto;
display: block;
user-select: none;
pointer-events: none;
object-position: center bottom;
}

.contact-stage__scene-image.scene-captcha {
width: 100%;
left: 50%;
transform: translateX(-50%);
}

/* ------------------------------
Shared Interactive Hotspots
------------------------------ */
.contact-hotspot,
.contact-telephone-hotspot {
position: absolute;
z-index: 8;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}

.contact-hotspot[hidden],
.contact-telephone-hotspot[hidden] {
display: none;
}

.contact-hotspot__glow {
position: absolute;
inset: -45%;
z-index: -1;
border-radius: 999px;
background: var(--glow-gradient);
filter: blur(12px);
opacity: 0.5 !important;
animation: contactGlowPulse 1.9s ease-in-out infinite;
}

.contact-hotspot__icon {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.contact-hotspot__arrow {
position: relative;
z-index: 2;
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 999px;
background: #032239;
color: #ffffff;
font-size: 24px;
font-weight: 700;
line-height: 1;
}

.contact-hotspot__arrow svg {
display: block;
width: 42%;
height: 42%;
fill: currentColor;
}

.contact-hotspot:focus-visible,
.contact-telephone-hotspot:focus-visible,
.contact-choice:focus-visible,
.contact-card:focus-visible {
outline: 3px solid rgba(100, 237, 168, 0.9);
outline-offset: 5px;
}

/* Disclaimer icon on ringing screen */
.contact-hotspot--disclaimer {
width: 45px;
height: 45px;
left: 62%;
top: 52%;
}

.contact-hotspot--disclaimer .contact-hotspot__glow {
inset: -18%;
filter: blur(8px);
opacity: 0.3;
}

/* Emoji / arrow next icon */
.contact-hotspot--next {
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
left: 52%;
top: 52%;
display: grid;
place-items: center;
border-radius: 999px;
isolation: isolate;
background: transparent;
}

.contact-hotspot--next .contact-hotspot__glow {
inset: -26%;
z-index: 0;
filter: blur(15px);
opacity: 0.64;
}

.contact-hotspot--next::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background: #031f35;
box-shadow:
inset 0 -3px 7px rgba(0, 0, 0, 0.28),
0 4px 12px rgba(0, 0, 0, 0.24);
}

.contact-hotspot--next .contact-hotspot__icon {
position: relative;
z-index: 2;
width: 68%;
height: 68%;
}

@media (max-width: 1024px) {
.contact-hotspot--next .contact-hotspot__icon {
width: 60%;
height: 60%;
}
}

@media (min-width: 1025px) {
.contact-hotspot--next::before {
inset: -2.5px;
background: #02253d;
transform: translateY(-6px);
}

.contact-hotspot--next .contact-hotspot__icon {
width: 62%;
height: 62%;
transform: translateY(-5px);
}
}

/* Invisible clickable telephone area */
.contact-telephone-hotspot {
left: 39%;
right: 39%;
bottom: 7%;
height: 31%;
border-radius: 40%;
}

/* ------------------------------
Character Layer
------------------------------ */
.contact-character {
position: absolute;
z-index: 0;
left: 13%;
bottom: 0;
width: min(25vw, 330px);
max-height: 52%;
object-fit: contain;
object-position: left bottom;
pointer-events: none;
user-select: none;
}

/* ------------------------------
Callout Bubble
------------------------------ */
.contact-callout {
position: absolute;
z-index: 6;
left: 50%;
top: 40%;
width: 310px;
max-height: min(300px, 30vh);
transform: translate(-50%, -50%);
pointer-events: none;
overflow: visible;
}

.contact-callout[hidden] {
display: none;
}

.contact-callout__image {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.36));
user-select: none;
}

.contact-callout__text {
position: absolute;
inset: 10% 10% 12%;
display: flex;
place-items: center;
text-align: center;
justify-content: center;
color: var(--ink);
font-family: var(--font-display);
font-size: 24px;
line-height: 1.25;
letter-spacing: 0.01em;
white-space: pre-line;
top: 0;
}

.contact-callout__text {
position: absolute;
left: 15%;
right: 14%;
top: 3%;
bottom: 0%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.25;
white-space: pre-line;
}

/* ------------------------------
Captcha Card
------------------------------ */
.contact-captcha-card {
position: absolute;
z-index: 7;
left: 50%;
top: 34%;
width: min(28vw, 550px);
transform: translate(-50%, -50%);
padding: clamp(18px, 5vw, 20px) clamp(18px, 6vw, 20px);
border-radius: 26px;
background: #ffffff;
color: var(--ink);
text-align: center;
max-height: 35%;
box-shadow:
0 10px 0 rgba(0, 0, 0, 0.18),
0 18px 28px rgba(0, 0, 0, 0.32),
inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.contact-captcha-card[hidden] {
display: none;
}

.contact-captcha-card__title,
.contact-captcha-card__question {
margin: 0;
font-family: var(--font-display);
color: var(--ink);
}

.contact-captcha-card__title {
font-size: 30px;
line-height: 1;
margin-top: 0px;
margin-bottom: 16px;
}

.contact-captcha-card__question {
font-size: 22px;
line-height: 1.2;
}

.contact-captcha-card__hint {
margin: 14px 0 18px;
font-family: var(--font-body);
font-size: 18px;
color: rgba(3, 27, 46, 0.62);
}

.contact-captcha-card__actions,
.contact-retry-choices {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(18px, 8vw, 42px);
}

/* ------------------------------
Choice Buttons
------------------------------ */
.contact-choice {
min-width: clamp(70px, 20vw, 80px);
min-height: clamp(34px, 5vw, 40px);
border: 0;
border-radius: 12px;
color: #ffffff;
font-family: var(--font-body);
font-size: 20px;
font-weight: 800;
line-height: 1;
cursor: pointer;
box-shadow:
inset 0 -5px 0 rgba(0, 0, 0, 0.18),
0 4px 10px rgba(0, 0, 0, 0.28);
transition:
transform 180ms ease,
filter 180ms ease;
}

.contact-choice:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}

.contact-choice--blue {
background: linear-gradient(180deg, #10b9f0 0%, #048fd0 100%);
}

.contact-choice--red {
background: linear-gradient(180deg, #ff2630 0%, #dd1118 100%);
}

/* Retry buttons sit visually inside the wrong-answer callout */
.contact-retry-choices {
position: absolute;
z-index: 9;
left: 32%;
top: 38%;
transform: translate(-50%, 0);
gap: 28px;
display: flex;
justify-content: center;
/*width: min(84vw, 380px);*/
flex-direction: row;
}

.contact-retry-choices[hidden] {
display: none;
}

.contact-retry-choices .contact-choice {
min-width: 70px;
min-height: 35px;
font-size: 18px;
}

/* ------------------------------
Confetti Layer
------------------------------ */
.contact-confetti {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
overflow: hidden;
}

.contact-confetti[hidden] {
display: none;
}

.contact-confetti span {
position: absolute;
top: -10%;
width: 7px;
height: 14px;
border-radius: 2px;
opacity: 0.9;
animation: contactConfettiFall 2.8s linear forwards;
}

/* ------------------------------
Cards Screen
------------------------------ */
.contact-cards-screen {
position: absolute;
inset: 0;
z-index: 10;
display: grid;
align-content: start;
justify-items: center;
padding: clamp(96px, 18vh, 145px) clamp(12px, 4vw, 32px) 24px;
background: var(--page-background);
}

.contact-cards-screen[hidden] {
display: none;
}

.contact-cards-screen__title {
margin: 0 0 20px;
/*color: #ffffff;*/
font-family: var(--font-body);
font-size: 40px;
font-weight: 700;
line-height: 1.1;
text-align: center;
}

.contact-cards-screen__title {
background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 22%,
#64eda8 52%,
#d0f88d 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
display: inline-block;
}

.contact-cards {
display: grid;
width: min(88vw, 1160px);
grid-template-columns: repeat(5, minmax(120px, 1fr));
gap: clamp(14px, 1.4vw, 22px);
}

.contact-card {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr clamp(68px, 10vh, 86px);
align-items: center;
min-height: clamp(210px, 38vh, 295px);
overflow: hidden;
border: 2px solid transparent;
border-radius: 10px;
appearance: none;
background: radial-gradient(
99.4% 99.4% at 50% 14.07%,
#033658 1.42%,
#02253d 33.27%,
#000 100%
);
box-shadow: 0px 0px 5px 3px rgba(3, 192, 223, 0.5);
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
font: inherit;
text-decoration: none;
text-align: left;
transition:
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 320ms ease,
box-shadow 320ms ease,
color 320ms ease,
background 320ms ease;
will-change: transform;
}

.contact-card__icon-wrap {
display: grid;
place-items: center;
height: 100%;
align-self: stretch;
opacity: 0.78;
}

.contact-card__icon {
width: clamp(58px, 6vw, 94px);
height: clamp(58px, 6vw, 94px);
object-fit: contain;
filter: grayscale(100%) brightness(0.65);
opacity: 0.8;
transition: all 0.25s ease;
}

.contact-card__label {
display: grid;
place-items: center;
min-height: 100%;
padding: 0 12px;
font-family: var(--font-body);
font-size: clamp(15px, 1.35vw, 22px);
font-weight: 700;
line-height: 1.08;
text-transform: uppercase;
text-align: center;
background-color: rgba(2, 37, 61, 1);
}

.contact-card:hover,
.contact-card:focus-visible,
.contact-card.is-active {
transform: scale(1.055);
border: 2px solid rgba(5, 200, 223, 0.72);
box-shadow: none;
color: #fff;
}

.contact-card:hover .contact-card__icon {
transform: scale(1.15);
filter: brightness(0) saturate(100%) invert(72%) sepia(96%) saturate(700%)
hue-rotate(110deg) brightness(108%) drop-shadow(0 0 12px #64eda8);
opacity: 1;
}

.contact-card:hover .contact-card__label {
color: #fff;
}

.contact-card:hover .contact-card__icon,
.contact-card:focus-visible .contact-card__icon,
.contact-card.is-active .contact-card__icon {
filter: none;
opacity: 1;
transform: scale(1.08);
}

/* ------------------------------
Screen State Positioning (desktop)
JS updates data-screen on .contact-stage
------------------------------ */

.contact-stage[data-screen="ringing-callout"] .contact-callout {
left: 72%;
top: 30%;
/* width: min(18vw, 400px); */
}

.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
font-size: 30px;
line-height: 1.16;
}

.contact-stage[data-screen="intro"] .contact-callout {
left: 48%;
top: 40%;
width: clamp(260px, 23vw, 400px);
}

.contact-stage[data-screen="you-are-human"] .contact-callout {
left: 48%;
top: 38%;
width: clamp(270px, 25vw, 410px);
}

.contact-stage[data-screen="our-aim"] .contact-callout {
left: 46%;
top: 40%;
width: clamp(260px, 22vw, 400px);
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout {
left: 46%;
top: 40%;
width: clamp(260px, 22vw, 400px);
}

.contact-stage[data-screen="ready-experience"] .contact-callout {
left: 46%;
top: 40%;
width: clamp(260px, 22vw, 400px);
}

.contact-stage[data-screen="glad-found-us"] .contact-callout {
left: 48%;
top: 38%;
width: clamp(345px, 24vw, 455px);
}

.contact-stage[data-screen="glad-found-us"] .contact-callout__text {
font-size: clamp(25px, 1.85vw, 35px);
}

.contact-stage[data-screen="intro"] .contact-callout__text {
font-size: 30px;
line-height: 1.18;
top: 10%;
}

.contact-stage[data-screen="you-are-human"] .contact-callout__text {
font-size: 30px;
line-height: 1.18;
top: 15%;
}

.contact-stage[data-screen="our-aim"] .contact-callout__text {
font-size: clamp(28px, 2vw, 38px);
line-height: 1.18;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout__text {
font-size: clamp(28px, 2vw, 38px);
line-height: 1.18;
}

.contact-stage[data-screen="ready-experience"] .contact-callout__text {
font-size: clamp(28px, 2vw, 38px);
line-height: 1.18;
}

.contact-stage[data-screen="intro"] .contact-stage__scene-image {
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: auto;
max-width: none;
}

.contact-stage[data-screen="glad-found-us"] .contact-stage__scene-image {
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: auto;
max-width: none;
}

.contact-stage[data-screen="you-are-human"] .contact-stage__scene-image {
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: auto;
max-width: none;
}

.contact-stage[data-screen="our-aim"] .contact-stage__scene-image {
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: auto;
max-width: none;
}

.contact-stage[data-screen="love-to-mentor"] .contact-stage__scene-image {
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: auto;
max-width: none;
}

.contact-stage[data-screen="ready-experience"] .contact-stage__scene-image {
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: auto;
max-width: none;
}

.contact-stage[data-screen="wrong-retry"] .contact-stage__scene-image {
left: 50%;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-stage__scene-image {
left: 50%;
}

.contact-stage[data-screen="verified-human"] .contact-stage__scene-image {
left: 50%;
}

.contact-stage[data-screen="select-spot"] .contact-stage__scene-image {
left: 50%;
}

/*.contact-stage[data-screen="wrong-retry"] .contact-callout {*/
/*  left: 52%;*/
/*  top: 35%;*/
/*  width: min(42vw, 560px);*/
/*}*/

.contact-stage[data-screen="wrong-retry"] .contact-callout {
left: 32%;
top: 29%;
width: min(25vw, 600px);
}

.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
inset: 12% 10% 24%;
font-size: 22px;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-callout {
left: 35%;
top: 33%;
width: min(24vw, 330px);
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 36%;
top: 36%;
width: min(21vw, 460px);
}

.contact-stage[data-screen="verified-human"] .contact-callout__text {
top: 10%;
bottom: 10%;
line-height: 1.25;
font-size: 30px;
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 38%;
top: 36%;
width: min(25vw, 560px);
}

/* ------------------------------
Emoji / Circle Controls (desktop)
Keep each slide separate so later edits do not affect another slide.
------------------------------ */
.contact-stage[data-screen="intro"] .contact-hotspot--next {
left: 52%;
top: 52%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="intro"] .contact-hotspot--next::before {
inset: -2.5px;
transform: translateY(-6px);
}

.contact-stage[data-screen="intro"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 62%;
height: 62%;
transform: translateY(-5px);
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
left: 52%;
top: 52%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next::before {
inset: -2.5px;
transform: translateY(-6px);
}

.contact-stage[data-screen="glad-found-us"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 62%;
height: 62%;
transform: translateY(-5px);
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 52%;
top: 52%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next::before {
inset: -2.5px;
transform: translateY(-6px);
}

.contact-stage[data-screen="you-are-human"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 62%;
height: 62%;
transform: translateY(-5px);
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 39%;
top: 46%;
width: clamp(44px, 2.7vw, 54px);
height: clamp(44px, 2.7vw, 54px);
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next::before {
inset: -2.5px;
transform: translateY(-6px);
}

.contact-stage[data-screen="verified-human"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 58%;
height: 58%;
transform: translateY(-5px);
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 42%;
top: 49.5%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next::before {
inset: -2.5px;
transform: translateY(-6px);
}

.contact-stage[data-screen="select-spot"]
.contact-hotspot--next
.contact-hotspot__arrow {
font-size: 23px;
font-weight: 400;
transform: translateY(-5px);
}

.contact-stage[data-screen="select-spot"]
.contact-hotspot--next
.contact-hotspot__arrow
svg {
width: 40%;
height: 40%;
}

.contact-stage[data-screen="select-spot"]
.contact-callout:has(+ .contact-hotspot--next)
.contact-callout__text {
top: 50%;
transform: translate(0%, -35%);
font-size: 30px;
}

/* ------------------------------
Wrong Dead End callout labels
------------------------------ */
.contact-stage[data-screen="wrong-dead-end"] .contact-callout__text {
position: absolute;
inset: -6% 0% 10%;
bottom: 0%;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top,
.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
position: absolute;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-family: "Yummy Foodies";
font-weight: 400;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 8%;
width: 55%;
font-size: 24px;
line-height: 1.25;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 94%;
left: 58%;
width: 35%;
font-size: 24px;
line-height: 1;
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 52%;
top: 52%;
}

/* =========================================================
TABLET: 768px – 1024px
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
.contact-stage {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
isolation: isolate;
background: var(--page-background);
}

.contact-us-main {
height: calc(100svh - 85px);
}

.contact-stage__scene-image.scene-captcha {
width: 110%;
left: 50%;
transform: translateX(-50%);
}

.contact-hotspot--disclaimer {
left: 72%;
top: 72%;
}

.contact-hotspot--next {
left: 62%;
top: 82%;
}

/* ------------------------------
Emoji / Circle Controls (tablet)
Keep each slide separate so later edits do not affect another slide.
------------------------------ */
.contact-stage[data-screen="intro"] .contact-hotspot--next {
left: 60%;
top: 80%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="intro"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="intro"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
left: 62%;
top: 81%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="glad-found-us"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 62%;
top: 80%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="you-are-human"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-callout {
width: min(42vw, 520px);
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 36%;
top: 36%;
width: min(40vw, 500px);
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 36%;
top: 36%;
width: min(40vw, 500px);
}

.contact-captcha-card {
top: 52%;
width: 60%;
padding: 6%;
}

.contact-stage[data-screen="ringing-callout"] .contact-callout {
left: 58%;
top: 55%;
width: min(32vw, 500px);
}

.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
top: -5%;
bottom: 8%;
font-size: clamp(22px, 3vw, 31px);
line-height: 1.16;
}

.contact-stage[data-screen="intro"] .contact-callout {
left: 55%;
top: 76%;
width: 32%;
}

.contact-stage[data-screen="you-are-human"] .contact-callout {
left: 55%;
top: 75%;
width: 36%;
}

.contact-stage[data-screen="our-aim"] .contact-callout {
left: 55%;
top: 76%;
width: 32%;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout {
left: 55%;
top: 76%;
width: 32%;
}

.contact-stage[data-screen="ready-experience"] .contact-callout {
left: 55%;
top: 76%;
width: 32%;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout {
top: 76%;
width: 35%;
left: 53%;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout__text {
font-size: clamp(20px, 2.75vw, 29px);
}

.contact-stage[data-screen="intro"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="you-are-human"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="our-aim"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="ready-experience"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout {
left: 52%;
top: 42%;
width: 45%;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
top: 30px;
}

.contact-retry-choices {
position: absolute;
z-index: 9;
left: 48%;
top: 60%;
transform: translateX(-50%);
gap: 20px;
display: flex;
justify-content: center;
width: min(80vw, 360px);
flex-direction: row;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-callout {
left: 50%;
top: 50%;
/*width: min(50vw, 520px);*/
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 60%;
top: 70%;
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 60%;
top: 70%;
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 70%;
top: 75%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="verified-human"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 70%;
top: 75%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="select-spot"]
.contact-hotspot--next
.contact-hotspot__arrow {
font-size: 24px;
transform: none;
}

.contact-stage[data-screen="wrong-retry"] .contact-hotspot--next {
left: 70%;
top: 75%;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-hotspot--next {
left: 70%;
top: 75%;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 20%;
width: 55%;
font-size: 26;
line-height: 1.02;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 68%;
left: 58%;
width: 38%;
font-size: clamp(22px, 4.8vw, 30px);
}

.contact-cards {
width: min(88vw, 620px);
grid-template-columns: 1fr;
gap: 16px;
}

.contact-card {
grid-template-columns: 72px 1fr;
grid-template-rows: auto;
min-height: 90px;
gap: 0px;
margin: 10px 0;
border-radius: 8px;
background: linear-gradient(
90deg,
rgba(0, 18, 31, 0.82) 0 25%,
rgba(1, 47, 76, 0.86) 25% 100%
);
}

.contact-card__icon {
width: 35px;
height: 35px;
}

.contact-card__label {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 18px;
text-align: left;
font-size: 24px;
}

.contact-callout__text {
position: absolute;
left: 10%;
right: 10%;
top: 0%;
bottom: 5%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.25;
white-space: pre-line;
}
}

/* =========================================================
MOBILE: up to 767px
========================================================= */
@media (max-width: 767px) {
.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
inset: 0% 10% 24%;
font-size: 20px;
}

.contact-stage[data-screen="select-spot"]
.contact-callout:has(+ .contact-hotspot--next)
.contact-callout__text {
top: 54%;
transform: translate(0%, -72%);
font-size: clamp(20px, 6vw, 30px);
}

.contact-callout__text {
position: absolute;
left: 10%;
right: 10%;
top: 0%;
bottom: 0%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.25;
white-space: pre-line;
font-size: 22px;
}

.contact-us-main {
height: calc(100svh - 42px);
}

.contact-hotspot--disclaimer {
width: clamp(28px, 11vw, 44px);
height: clamp(28px, 11vw, 44px);
left: 80%;
top: 50%;
}

.contact-hotspot--disclaimer .contact-hotspot__glow {
inset: -18%;
filter: blur(8px);
opacity: 0.3;
}

.contact-hotspot--next {
width: clamp(42px, 13vw, 58px);
height: clamp(42px, 13vw, 58px);
left: 70%;
top: 58%;
}

/* ------------------------------
Emoji / Circle Controls (mobile)
Keep each slide separate so later edits do not affect another slide.
------------------------------ */
.contact-stage[data-screen="intro"] .contact-hotspot--next {
left: 70%;
top: 57%;
width: clamp(42px, 13vw, 58px);
height: clamp(42px, 13vw, 58px);
}

.contact-stage[data-screen="intro"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="intro"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
left: 70%;
top: 58%;
width: clamp(42px, 13vw, 58px);
height: clamp(42px, 13vw, 58px);
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="glad-found-us"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 70%;
top: 59%;
width: clamp(42px, 13vw, 58px);
height: clamp(42px, 13vw, 58px);
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="you-are-human"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-telephone-hotspot {
left: 23%;
right: 20%;
bottom: 5%;
height: 28%;
}

.contact-character {
left: -5px;
bottom: 10px;
width: clamp(140px, 52vw, 235px);
max-height: 42%;
}

.contact-captcha-card {
width: min(82vw, 360px);
top: 52%;
border-radius: 22px;
max-height: none;
}

.contact-captcha-card__title {
margin-top: 0;
margin-bottom: 8px;
}

.contact-retry-choices {
position: absolute;
z-index: 9;
left: 35%;
top: 52%;
transform: translateX(-50%);
gap: clamp(14px, 5vw, 24px);
display: flex;
justify-content: center;
width: min(70vw, 280px);
flex-direction: row;
flex-wrap: wrap;
}

.contact-retry-choices .contact-choice {
min-width: 65px;
min-height: 36px;
font-size: 16px;
}

.contact-cards-screen {
padding: clamp(74px, 18vh, 120px) clamp(12px, 4vw, 32px) 24px;
}

.contact-cards-screen__title {
font-size: 24px;
}

.contact-cards-screen__subtitle {
margin: 1px 0 40px;
text-align: center;
font-size: 14px;
color: #fff;
line-height: 1.5;
}

.contact-cards {
width: min(92vw, 460px);
grid-template-columns: 1fr;
gap: clamp(12px, 2.8vh, 16px);
}

.contact-card {
grid-template-columns: 25% 1fr;
grid-template-rows: auto;
min-height: clamp(46px, 12vh, 58px);
border-radius: 8px;
background: linear-gradient(
90deg,
rgba(0, 18, 31, 0.82) 0 25%,
rgba(1, 47, 76, 0.86) 25% 100%
);
}

.contact-card__icon {
width: clamp(58px, 6vw, 94px);
height: clamp(58px, 6vw, 94px);
filter: grayscale(100%) brightness(0.65);
opacity: 0.8;
}

.contact-card__label {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 20px;
text-align: left;
width: 100%;
}

.contact-stage__scene-image.scene-ringing {
width: 250%;
left: 50%;
transform: translateX(-50%);
}

.contact-stage__scene-image.scene-captcha {
width: 200%;
left: 50%;
transform: translateX(-50%);
bottom: 2%;
}

.contact-stage[data-screen="ringing-callout"] .contact-callout {
top: 33%;
width: 60%;
left: 50%;
}

.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
top: -6%;
bottom: 8%;
font-size: clamp(17px, 5.1vw, 25px);
line-height: 1.18;
}

.contact-stage[data-screen="intro"] .contact-callout {
width: 66%;
top: 53%;
left: 56%;
}

.contact-stage[data-screen="you-are-human"] .contact-callout {
width: 75%;
top: 53%;
left: 60%;
}
.contact-stage[data-screen="you-are-human"] .contact-callout__text {
font-size: clamp(25px, 2vw, 38px);
line-height: 1.18;
}
.contact-stage[data-screen="our-aim"] .contact-callout {
width: 66%;
top: 53%;
left: 56%;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout {
width: 66%;
top: 53%;
left: 56%;
}

.contact-stage[data-screen="ready-experience"] .contact-callout {
width: 66%;
top: 53%;
left: 56%;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout {
top: 52%;
width: 70%;
left: 59%;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout__text {
font-size: clamp(15px, 4.6vw, 22px);
}

.contact-stage[data-screen="intro"] .contact-callout__text {
inset: 14% 12% 18%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout__text {
inset: 8% 12% 18%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
}

.contact-stage[data-screen="you-are-human"] .contact-callout__text {
inset: 14% 10% 18%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.2;
}

.contact-stage[data-screen="wrong-retry"] .contact-stage__scene-image {
bottom: 2%;
left: 50%;
transform: translateX(-40%);
width: 170%;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-stage__scene-image {
bottom: 2%;
left: 50%;
transform: translateX(-40%);
width: 170%;
}

.contact-stage[data-screen="verified-human"] .contact-stage__scene-image {
width: 170%;
left: 50%;
transform: translateX(-40%);
bottom: 2%;
}

.contact-stage[data-screen="select-spot"] .contact-stage__scene-image {
left: 50%;
transform: translateX(-40%);
width: 170%;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout {
top: 50%;
width: min(70vw, 400px);
left: 35%;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-callout {
top: 40%;
width: min(70vw, 360px);
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 16%;
width: 60%;
font-size: 18px;
line-height: 1.1;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 80%;
left: 58%;
width: 48%;
font-size: 18px;
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 70%;
top: 43%;
width: clamp(42px, 13vw, 58px);
height: clamp(42px, 13vw, 58px);
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="verified-human"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 70%;
top: 43%;
width: clamp(42px, 13vw, 58px);
height: clamp(42px, 13vw, 58px);
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="select-spot"]
.contact-hotspot--next
.contact-hotspot__arrow {
font-size: 24px;
transform: none;
}

.contact-stage[data-screen="wrong-retry"] .contact-hotspot--next {
left: 70%;
top: 43%;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-hotspot--next {
left: 70%;
top: 43%;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 16%;
width: 60%;
font-size: 18px;
line-height: 1.1;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 82%;
left: 58%;
width: 48%;
font-size: 18px;
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 50%;
top: 40%;
width: min(78vw, 500px);
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 50%;
top: 40%;
width: min(78vw, 500px);
}

.contact-cards-screen__subtitle {
margin: 1px 0 30px;
text-align: center;
font-size: 14px;
color: #fff;
line-height: 1.5;
}

.contact-stage[data-screen="verified-human"] .contact-callout__text {
top: -3%;
bottom: 10%;
line-height: 1.25;
font-size: 30px;
}
}

/* ------------------------------
Motion
------------------------------ */
@keyframes contactGlowPulse {
0%,
100% {
opacity: 0.5;
transform: scale(0.8);
}
50% {
opacity: 0.9;
transform: scale(1.08);
}
}

@keyframes contactIconFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}

@keyframes contactConfettiFall {
0% {
transform: translate3d(0, -20%, 0) rotate(0deg);
}
100% {
transform: translate3d(var(--x-drift, 18px), 115vh, 0) rotate(540deg);
}
}

@media (prefers-reduced-motion: reduce) {
.contact-hotspot__glow,
.contact-hotspot__icon,
.contact-confetti span {
animation: none;
}

.contact-card,
.contact-choice {
transition: none;
}
}

.contact-cards-screen__subtitle {
margin: 1px 0 50px;
text-align: center;
font-size: 24px;
color: #fff;
line-height: 1.5;
}

/* =========================================================
Responsive Slide Controls
Each screen is intentionally separate, even when values match.
========================================================= */

/* ------------------------------
Tablet: 768px to 1024px
------------------------------ */
@media (min-width: 768px) and (max-width: 1024px) {
.contact-stage[data-screen="ringing-callout"] .contact-callout {
left: 58%;
top: 55%;
width: min(32vw, 500px);
}

.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
top: -5%;
bottom: 8%;
font-size: clamp(22px, 3vw, 31px);
line-height: 1.16;
}

.contact-stage[data-screen="intro"] .contact-callout {
left: 55%;
top: 74%;
width: min(35vw, 340px);
}

.contact-stage[data-screen="intro"] .contact-callout__text {
font-size: clamp(21px, 2.8vw, 30px);
line-height: 1.12;
}

.contact-stage[data-screen="intro"] .contact-hotspot--next {
left: 61%;
top: 79%;
width: 54px;
height: 54px;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout {
left: 55%;
top: 72%;
width: min(35vw, 340px);
}

.contact-stage[data-screen="glad-found-us"] .contact-callout__text {
font-size: clamp(17px, 2.6vw, 23px);
line-height: 1.12;
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
left: 62%;
top: 77%;
width: 54px;
height: 54px;
}

.contact-stage[data-screen="you-are-human"] .contact-callout {
left: 55%;
top: 73%;
width: min(35vw, 340px);
}

.contact-stage[data-screen="you-are-human"] .contact-callout__text {
font-size: clamp(18px, 2.6vw, 23px);
line-height: 1.12;
top: -9%;
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 60%;
top: 77%;
width: 54px;
height: 54px;
}

.contact-stage[data-screen="our-aim"] .contact-callout {
left: 55%;
top: 62%;
width: min(46vw, 430px);
}

.contact-stage[data-screen="our-aim"] .contact-callout__text {
font-size: clamp(17px, 2.1vw, 23px);
line-height: 1.12;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout {
left: 55%;
top: 62%;
width: min(46vw, 430px);
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout__text {
font-size: clamp(17px, 2.1vw, 23px);
line-height: 1.12;
}

.contact-stage[data-screen="ready-experience"] .contact-callout {
left: 55%;
top: 62%;
width: min(46vw, 430px);
}

.contact-stage[data-screen="ready-experience"] .contact-callout__text {
font-size: clamp(17px, 2.1vw, 23px);
line-height: 1.12;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout {
left: 48%;
top: 58%;
width: min(50vw, 430px);
}

.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
font-size: clamp(18px, 2.3vw, 23px);
line-height: 1.12;
inset: -14% 12% 14%;
}

.contact-stage[data-screen="wrong-retry"] .contact-hotspot--next {
left: 70%;
top: 72%;
width: 54px;
height: 54px;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-callout {
left: 48%;
top: 56%;
width: min(50vw, 430px);
}

.contact-stage[data-screen="wrong-dead-end"] .contact-hotspot--next {
left: 70%;
top: 72%;
width: 54px;
height: 54px;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 18%;
width: 58%;
font-size: clamp(18px, 3vw, 26px);
line-height: 1.08;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
left: 57%;
top: 86%;
width: 42%;
font-size: clamp(22px, 3.5vw, 34px);
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 55%;
top: 65%;
width: min(35vw, 340px);
}

.contact-stage[data-screen="verified-human"] .contact-callout__text {
font-size: clamp(18px, 2.6vw, 23px);
line-height: 1.12;
top: -7%;
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 61%;
top: 68%;
width: 54px;
height: 54px;
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 55%;
top: 62%;
width: min(42vw, 400px);
}

.contact-stage[data-screen="select-spot"] .contact-callout__text {
font-size: clamp(20px, 6vw, 26px)!important;
line-height: 1.12;
top: 38% !important;
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 63%;
top: 65%;
width: 54px;
height: 54px;
}

.contact-cards-screen {
align-content: center;
padding: clamp(124px, 12vh, 150px) clamp(12px, 4vw, 32px)
clamp(72px, 7vh, 100px);
}

.contact-cards-screen__title {
font-size: clamp(24px, 8vw, 42px);
line-height: 1.05;
/* max-width: 240px; */
margin-left: auto;
margin-right: auto;
}

.contact-cards-screen__subtitle {
margin: 4px 0 44px;
font-size: clamp(15px, 2.5vw, 20px);
}

.contact-cards {
width: min(88vw, 720px);
gap: 22px;
}

.contact-card {
grid-template-columns: 22% 1fr;
min-height: 96px;
}

.contact-card__label {
font-size: clamp(18px, 3.4vw, 24px);
line-height: 1.08;
}

.contact-card__icon {
width: clamp(60px, 5vw, 54px);
height: clamp(60px, 5vw, 54px);
}

.contact-captcha-card {
top: 52%;
width: 60%;
padding: 6%;
}
}

/* ------------------------------
Mobile: up to 767px
------------------------------ */
@media (max-width: 767px) {
.contact-stage[data-screen="ringing-callout"] .contact-callout {
left: 50%;
top: 42%;
width: 52%;
}

.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
top: -12%;
bottom: 8%;
font-size: clamp(17px, 5.8vw, 25px);
line-height: 1.18;
}

.contact-stage[data-screen="intro"] .contact-callout {
left: 60%;
top: 52%;
width: min(66vw, 350px);
}

.contact-stage[data-screen="intro"] .contact-callout__text {
font-size: clamp(18px, 6vw, 35px);
line-height: 1.1;
}

.contact-stage[data-screen="intro"] .contact-hotspot--next {
left: 70%;
top: 57%;
width: clamp(44px, 13vw, 56px);
height: clamp(44px, 13vw, 56px);
}

.contact-stage[data-screen="glad-found-us"] .contact-callout {
left: 60%;
top: 53%;
width: min(66vw, 350px);
}

.contact-stage[data-screen="glad-found-us"] .contact-callout__text {
font-size: clamp(20px, 5.5vw, 30px);
line-height: 1.1;
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
left: 70%;
top: 58%;
width: clamp(44px, 13vw, 56px);
height: clamp(44px, 13vw, 56px);
}

.contact-stage[data-screen="you-are-human"] .contact-callout {
left: 58%;
top: 53%;
width: min(66vw, 350px);
}

.contact-stage[data-screen="you-are-human"] .contact-callout__text {
font-size: clamp(20px, 6vw, 30px);
line-height: 1.1;
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 69%;
top: 57%;
width: clamp(44px, 13vw, 56px);
height: clamp(44px, 13vw, 56px);
}

.contact-stage[data-screen="our-aim"] .contact-callout {
left: 54%;
top: 46%;
width: min(66vw, 350px);
}

.contact-stage[data-screen="our-aim"] .contact-callout__text {
font-size: clamp(15px, 4.4vw, 20px);
line-height: 1.1;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout {
left: 54%;
top: 46%;
width: min(66vw, 350px);
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout__text {
font-size: clamp(15px, 4.4vw, 20px);
line-height: 1.1;
}

.contact-stage[data-screen="ready-experience"] .contact-callout {
left: 54%;
top: 46%;
width: min(66vw, 350px);
}

.contact-stage[data-screen="ready-experience"] .contact-callout__text {
font-size: clamp(15px, 4.4vw, 20px);
line-height: 1.1;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout {
left: 50%;
top: 56%;
width: min(80vw, 390px);
}

.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
inset: 9% 12% 38%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: clamp(20px, 5.5vw, 36px);
line-height: 1.1;
}

.contact-retry-choices {
left: 50%;
top: 57.2%;
width: min(70vw, 320px);
gap: clamp(18px, 6vw, 28px);
transform: translateX(-50%);
flex-wrap: nowrap;
}

.contact-stage[data-screen="wrong-retry"] .contact-hotspot--next {
left: 70%;
top: 46%;
width: clamp(44px, 13vw, 56px);
height: clamp(44px, 13vw, 56px);
}

.contact-stage[data-screen="wrong-dead-end"] .contact-callout {
left: 50%;
/* top: 59%; */
top: clamp(50%, calc(50% + (100vh - 667px) * 0.352), 59%);
width: min(70vw, 360px);
}

.contact-stage[data-screen="wrong-dead-end"] .contact-hotspot--next {
left: 70%;
top: 46%;
width: clamp(44px, 13vw, 56px);
height: clamp(44px, 13vw, 56px);
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 8%;
width: 60%;
font-size: clamp(13px, 5.5vw, 23px);
line-height: 1.08;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
left: 58%;
top: 71%;
width: 48%;
font-size: clamp(18px, 5.5vw, 35px);
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 54%;
top: 60%;
width: min(66vw, 350px);
}

.contact-stage[data-screen="verified-human"] .contact-callout__text {
font-size: clamp(17px, 5.5vw, 30px);
line-height: 1.1;
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 68%;
top: 62%;
width: clamp(44px, 13vw, 56px);
height: clamp(44px, 13vw, 56px);
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 54%;
top: 56%;
width: min(75vw, 400px);
}

.contact-stage[data-screen="select-spot"] .contact-callout__text {
font-size: clamp(20px, 6vw, 30px);
line-height: 1.1;
left: 13%;
right: 12%;
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 68%;
top: 59%;
width: clamp(44px, 13vw, 56px);
height: clamp(44px, 13vw, 56px);
}

.contact-cards-screen {
padding: clamp(120px, 18vh, 150px) 18px 90px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 100%;
}

.contact-cards-screen__title {
font-size: clamp(26px, 8vw, 32px);
line-height: 1.05;
}

.contact-cards-screen__subtitle {
margin: 2px auto 44px;
font-size: clamp(18px, 5.5vw, 28px);
line-height: 1.35;
max-width: 300px;
}

.contact-cards {
width: min(90vw, 420px);
grid-template-columns: 1fr;
gap: 30px;
}

.contact-card {
grid-template-columns: 22% 1fr;
min-height: 64px;
}

.contact-card__icon-wrap {
opacity: 1;
}

.contact-card__icon {
width: clamp(34px, 9vw, 46px);
height: clamp(34px, 9vw, 46px);
filter: brightness(0) invert(82%);
opacity: 0.9;
}

.contact-card__label {
font-size: clamp(16px, 5.5vw, 20px);
line-height: 1.1;
letter-spacing: 0.05em;
}
}


/* ------------------------------
Short Mobile: up to 430px wide and 700px tall
------------------------------ */
@media (max-width: 430px) and (max-height: 700px) {
.contact-stage[data-screen="ringing-callout"] .contact-callout {
top: 25%;
width: 45%;
}

.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
font-size: clamp(15px, 4.3vw, 18px);
}

.contact-stage[data-screen="intro"] .contact-callout {
top: 42%;
}

.contact-stage[data-screen="intro"] .contact-hotspot--next {
top: 47%;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout {
left: 60%;
top: 40%;
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
left: 70%;
top: 47%;
}
.contact-stage[data-screen="you-are-human"] .contact-callout {
left: 58%;
top: 42%;
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 69%;
top: 47%;
}
.contact-stage[data-screen="verified-human"] .contact-callout {
left: 54%;
top: 52%;
}
.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 68%;
top: 55%;
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 54%;
top: 52%;
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 68%;
top: 56%;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout {
left: 50%;
top: 47%;
width: min(82vw, 360px);
}

.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
inset: 18% 12% 44%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.contact-retry-choices {
left: 50%;
top: 49%;
width: min(72vw, 300px);
gap: clamp(18px, 6vw, 28px);
transform: translateX(-50%);
flex-wrap: nowrap;
}

.contact-cards {
gap: 16px;
}

.contact-cards-screen__title {
font-size: clamp(20px, 6.4vw, 25px);
line-height: 1;
}

.contact-card {
height: 52px;
min-height: 52px;
max-height: 52px;
margin: 0;
}

.contact-card__label {
font-size: clamp(12px, 3.4vw, 14px);
line-height: 1.04;
}

.contact-card__icon {
width: clamp(28px, 7.5vw, 34px);
height: clamp(28px, 7.5vw, 34px);
}
}

/* ==========================================================
Smooth Transition
========================================================== */

#contactSceneImage,
#contactCallout,
#contactCharacter,
#contactNextIconButton,
#contactCardsScreen,
#contactCaptchaCard {
transition:
opacity 0.25s ease,
transform 0.25s ease;
}


/* ipad mini only */

@media only screen and (width: 768px) and (height: 1024px) {
.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 80%;
}
.contact-cards-screen__title {
max-width: 100%;
}
.contact-cards-screen__subtitle {
margin: 4px 0 20px;
}
.contact-cards {
gap: 15px;
}
.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
top: -14%;
}
}

@media only screen and (min-width: 768px) and (max-width: 1368px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
.contact-cards-screen {
align-content: center;
padding: clamp(40px, 6vh, 64px) clamp(12px, 4vw, 32px);
}

.contact-stage[data-screen="select-spot"] .contact-callout__text {
left: 20%;
}
.contact-cards-screen__title {
font-size: 40px;
line-height: 1.1;
max-width: 100%;
}

.contact-cards-screen__subtitle {
margin: 6px 0 clamp(36px, 5vh, 56px);
font-size: clamp(14px, 1.6vw, 18px);
}

.contact-cards {
width: min(88vw, 1160px);
grid-template-columns: repeat(5, minmax(120px, 1fr));
gap: clamp(14px, 1.4vw, 22px);
}

.contact-card {
grid-template-columns: 1fr;
grid-template-rows: 1fr clamp(68px, 10vh, 86px);
min-height: clamp(210px, 38vh, 295px);
background: radial-gradient(
99.4% 99.4% at 50% 14.07%,
#033658 1.42%,
#02253d 33.27%,
#000 100%
);
box-shadow: 0px 0px 5px 3px rgba(3, 192, 223, 0.5);
}

.contact-card__icon-wrap {
grid-column: 1;
grid-row: 1;
height: 100%;
background: radial-gradient(
99.4% 99.4% at 50% 14.07%,
#033658 1.42%,
#02253d 33.27%,
#000 100%
);
opacity: 0.78;
}

.contact-card__label {
grid-column: 1;
grid-row: 2;
display: grid;
place-items: center;
min-height: 100%;
padding: 0 12px;
text-align: center;
font-size: clamp(15px, 1.35vw, 22px);
line-height: 1.08;
background-color: rgba(2, 37, 61, 1);
}

.contact-card__icon {
width: clamp(58px, 6vw, 94px);
height: clamp(58px, 6vw, 94px);
}

.contact-stage[data-screen="ringing-callout"] .contact-callout {
left: 74%;
top: 38%;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-callout {
left: 40%;
top: 40%;
width: min(30vw, 350px);
}

.contact-stage[data-screen="wrong-dead-end"] .contact-hotspot--next {
left: 52%;
top: 52%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 14%;
width: 55%;
font-size: 22px;
line-height: 1.25;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
left: 58%;
top: clamp(75%, calc(145.27% - 6.86vh), 89%);
width: 35%;
font-size: 22px;
line-height: 1;
}

.contact-stage[data-screen="intro"] .contact-callout {
left: 50%;
top: 57%;
width: clamp(260px, 23vw, 400px);
}

.contact-stage[data-screen="intro"] .contact-callout__text {
font-size: clamp(28px, 2vw, 38px);
line-height: 1.18;
}

.contact-stage[data-screen="intro"] .contact-hotspot--next {
left: 56%;
top: 63%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}
.contact-hotspot--disclaimer {
  left: 72%;
  top: 72%;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout {
left: 50%;
top: 57%;
width: clamp(345px, 24vw, 455px);
}

.contact-stage[data-screen="glad-found-us"] .contact-callout__text {
font-size: clamp(25px, 1.85vw, 35px);
top: -8%;
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
left: 56%;
top: clamp(64%, calc(55.96vh + 82px), 66%);
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="you-are-human"] .contact-callout {
left: 50%;
top: 57%;
width: clamp(345px, 24vw, 455px);
}

.contact-stage[data-screen="you-are-human"] .contact-callout__text {
font-size: clamp(28px, 2vw, 38px);
line-height: 1.18;
top: -5%;
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 56%;
top: calc(50.94% + 123.5px);
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="our-aim"] .contact-callout {
left: 46%;
top: 40%;
width: clamp(260px, 22vw, 400px);
}

.contact-stage[data-screen="our-aim"] .contact-callout__text {
font-size: clamp(28px, 2vw, 38px);
line-height: 1.18;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout {
left: 46%;
top: 40%;
width: clamp(260px, 22vw, 400px);
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout__text {
font-size: clamp(28px, 2vw, 38px);
line-height: 1.18;
}

.contact-stage[data-screen="ready-experience"] .contact-callout {
left: 46%;
top: 40%;
width: clamp(260px, 22vw, 400px);
}

.contact-stage[data-screen="ready-experience"] .contact-callout__text {
font-size: clamp(28px, 2vw, 38px);
line-height: 1.18;
}

.contact-captcha-card {
top: 285px;
transform: translate(-50%, 0);
width: min(32vw, 560px);
padding: 2%;
}

/* TEST ONLY: pull the captcha card up a bit on shorter tablet-landscape screens */
@media only screen and (min-width: 768px) and (max-width: 1368px) and (max-height: 820px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
.contact-captcha-card {
top: 250px;
}
}

/* TEST ONLY: pull the captcha card up further on very short landscape screens (e.g. Surface Duo) */
@media only screen and (min-width: 768px) and (max-width: 1368px) and (max-height: 730px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
.contact-captcha-card {
top: 215px;
}
}


.contact-captcha-card__title {
font-size: 40px;
}
.contact-captcha-card__question {
font-size: 26px;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout {
left: 40%;
top: 40%;
width: min(32vw, 600px);
}
.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
/* top: -8%; */
top: clamp(-18%, -14%, -10%);
}

.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
font-size: 22px;
line-height: 1.2;
inset: 12% 10% 24%;
}

.contact-stage[data-screen="wrong-retry"] .contact-hotspot--next {
left: 52%;
top: 52%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-retry-choices {
position: absolute;
z-index: 9;
left: 40%;
top: 45%;
transform: translate(-50%, 0);
gap: 28px;
display: flex;
justify-content: center;
flex-direction: row;
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 47%;
top: 47%;
width: min(25vw, 460px);
}

.contact-stage[data-screen="verified-human"] .contact-callout__text {
font-size: 24px;
top: -3%;
bottom: 4%;
line-height: 1.35;
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 53%;
top: 54%;
width: clamp(44px, 2.7vw, 54px);
height: clamp(44px, 2.7vw, 54px);
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 50%;
top: 48%;
width: min(28vw, 560px);
}

.contact-stage[data-screen="select-spot"] .contact-callout__text {
font-size: 24px !important;
line-height: 1.25;
top: 50% !important;
transform: translate(0%, -50%);
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 56%;
top: 56%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}
}

/* Only tall landscape tablets */
@media only screen and (min-width: 768px) and (max-width: 1368px) and (min-height: 900px) and (max-height: 1100px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 75%;
}
}

@media (width: 1024px) and (height: 768px) and (orientation: landscape) {
.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
top: 8%;
}
.contact-stage[data-screen="glad-found-us"] .contact-callout {
width: 290px;
}
.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
top: 65%;
}
.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 58%;
top: 66%;
}
.contact-stage[data-screen="you-are-human"] .contact-callout {
width: 325px;
left: 52%;
}
.contact-stage[data-screen="you-are-human"] .contact-callout__text {
top: 0%;
}
.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 8%;
}
.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 83%;
}
.contact-stage[data-screen="verified-human"] .contact-callout__text {
top: 6%;
}
.contact-stage[data-screen="select-spot"] .contact-callout__text {
top: 52% !important;
left: 14%;
}

.contact-captcha-card__title {
font-size: 35px;
}
.contact-captcha-card__question {
font-size: 20px;
}
}

/* Surface Pro 7 Landscape */
@media only screen and (width: 1368px) and (height: 912px) and (orientation: landscape) {
.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 82%;
}
}
/* Nest Hub Max only */
@media only screen and (width: 1280px) and (height: 800px) and (orientation: landscape) {
.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
top: 64%;
}
.contact-stage[data-screen="glad-found-us"] .contact-callout {
top: 55%;
width: 320px;
}
.contact-stage[data-screen="you-are-human"] .contact-callout {
top: 55%;
}
.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 55%;
top: 65%;
}
.contact-retry-choices {
top: 47%;
}
}
/* Wide + short mobile screens for example- surface duo */
@media only screen and (min-width: 500px) and (max-width: 767px) and (max-height: 750px) and (orientation: portrait) {
.contact-stage[data-screen="intro"] .contact-stage__scene-image,
.contact-stage[data-screen="glad-found-us"] .contact-stage__scene-image,
.contact-stage[data-screen="you-are-human"] .contact-stage__scene-image {
width: 100%;
height: 86vh;
}
.contact-stage[data-screen="intro"] .contact-callout {
left: 60%;
top: 32%;
}
.contact-stage[data-screen="intro"] .contact-hotspot--next {
top: 44%;
}
.contact-stage[data-screen="glad-found-us"] .contact-callout {
left: 60%;
top: 32%;
}
.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
top: 44%;
}
.contact-stage[data-screen="you-are-human"] .contact-callout {
left: 60%;
top: 32%;
}
.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
top: 44%;
}
.contact-stage[data-screen="wrong-retry"] .contact-callout {
left: 48%;
top: 29%;
}
.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
top: 30%;
}
.contact-retry-choices {
left: 48%;
top: 36%;
}
.contact-stage[data-screen="wrong-dead-end"] .contact-callout {
top: 30%;
}
.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 33%;
}
.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 104%;
}
.contact-stage[data-screen="verified-human"] .contact-callout {
left: 50%;
top: 33%;
}
.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 66%;
top: 42%;
}
.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 68%;
top: 42%;
}
.contact-stage[data-screen="select-spot"] .contact-callout {
left: 52%;
top: 30%;
}
.contact-stage[data-screen="select-spot"]
.contact-callout:has(+ .contact-hotspot--next)
.contact-callout__text {
top: 65%;
}
.contact-cards {
gap: 20px;
}
.contact-cards-screen__subtitle {
margin: 16px;
}
.contact-cards-screen__title {
margin: 2px;
margin-top: -12px;
}
.contact-stage[data-screen="ringing-callout"] .contact-callout {
left: 67%;
top: 28%;
width: 45%;
}
.contact-stage__scene-image.scene-ringing {
width: 190%;
}
}



/* iPhone SE / short 375px mobile */
@media (min-width: 375px) and (max-width: 390px) and (max-height: 700px) {
body
.contact-stage[data-screen="wrong-dead-end"]
.contact-callout
.contact-callout__text
.callout-bottom {
top: 82% !important;
}
}
.contact-flow-content {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.contact-mobile-copy {
display: none;
}

@media (max-width: 767px) {
.contact-mobile-copy:not([hidden]) {
position: absolute;
top: 2%;
left: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 30%;
padding: 20px 28px;
text-align: center;
pointer-events: none;
}

.contact-mobile-copy p {
margin: 0;
font-family: var(--font-body);
font-size: clamp(36px, 10vw, 52px);
font-weight: 700;
line-height: 1.15;

background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 22%,
#64eda8 52%,
#d0f88d 100%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
}

/* TEST ONLY: Welcome banner styling — hidden on desktop */
.contact-test-copy {
display: none;
}

@media (max-width: 767px),
(min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (hover: none) and (pointer: coarse),
(min-width: 768px) and (max-width: 1368px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
.contact-test-copy {
position: absolute;
top: clamp(90px, 11vh, 130px);
left: 0;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 20px 28px;
text-align: center;
pointer-events: none;
}

.contact-test-copy__headline {
margin: 0 0 8px;
font-family: var(--font-body);
font-size: clamp(24px, 12vw, 40px);
font-weight: 700;
line-height: 1.15;
background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 22%, #64eda8 52%, #d0f88d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.contact-test-copy__subtext {
margin: 0;
font-family: var(--font-body);
font-size: clamp(16px, 5.5vw, 28px);
font-weight: 400;
color: #ffffff;
}
}

/* TEST ONLY: double the welcome banner text size specifically for tablet landscape */
@media (min-width: 768px) and (max-width: 1368px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
.contact-test-copy__headline {
font-size: clamp(32px, 6vw, 44px);
}

.contact-test-copy__subtext {
font-size: clamp(18px, 3.5vw, 24px);
}
}

/* TEST ONLY: hide the welcome banner once the final cards screen is showing */
.contact-stage:has(#contactCardsScreen:not([hidden])) .contact-test-copy {
display: none !important;
}

/* =========================================================
SURFACE DUO ONLY (540 x 720) — exact match, scoped strictly.
This is an EXPERIMENT: it duplicates the iPad Mini tablet
block (768-1024px) verbatim, unchanged, to test whether the
same proportions/positions work at 540x720 as-is.
========================================================= */
@media (width: 540px) and (height: 720px) {
.contact-stage {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
isolation: isolate;
background: var(--page-background);
}

.contact-us-main {
height: calc(100svh - 42px);
}

.contact-stage__scene-image.scene-captcha {
width: 110%;
left: 50%;
transform: translateX(-50%);
}

.contact-hotspot--disclaimer {
left: 72% !important;
top: 72% !important;
}

.contact-hotspot--next {
left: 62%;
top: 82%;
}

.contact-stage[data-screen="intro"] .contact-hotspot--next {
left: 60%;
top: 80%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="intro"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="intro"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next {
left: 62%;
top: 81%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="glad-found-us"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="glad-found-us"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next {
left: 62%;
top: 80%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="you-are-human"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="you-are-human"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-callout {
width: min(42vw, 520px);
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 36%;
top: 36%;
width: min(40vw, 500px);
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 36%;
top: 36%;
width: min(40vw, 500px);
}

.contact-captcha-card {
top: 52%;
width: 60%;
padding: 6%;
}

.contact-stage[data-screen="ringing-callout"] .contact-callout {
left: 58%;
top: 55%;
width: min(32vw, 500px);
}

.contact-stage[data-screen="ringing-callout"] .contact-callout__text {
top: -5%;
bottom: 8%;
font-size: clamp(22px, 3vw, 31px);
line-height: 1.16;
}

.contact-stage[data-screen="intro"] .contact-callout {
left: 62%;
top: 48%;
width: 60%;
}

.contact-stage[data-screen="you-are-human"] .contact-callout {
left: 55%;
top: 75%;
width: 36%;
}

.contact-stage[data-screen="our-aim"] .contact-callout {
left: 55%;
top: 76%;
width: 32%;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout {
left: 55%;
top: 76%;
width: 32%;
}

.contact-stage[data-screen="ready-experience"] .contact-callout {
left: 55%;
top: 76%;
width: 32%;
}

.contact-stage[data-screen="glad-found-us"] .contact-stage__scene-image {
width: 100%;
max-width: none;
left: 0;
bottom: 0;
transform: none;
position: absolute;
}

.contact-stage[data-screen="glad-found-us"] .contact-callout__text {
font-size: clamp(20px, 2.75vw, 29px);
}

.contact-stage[data-screen="intro"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="you-are-human"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="our-aim"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="love-to-mentor"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="ready-experience"] .contact-callout__text {
font-size: clamp(22px, 3vw, 32px);
line-height: 1.18;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout {
left: 52%;
top: 42%;
width: 45%;
}

.contact-stage[data-screen="wrong-retry"] .contact-callout__text {
top: 30px;
}

.contact-retry-choices {
position: absolute;
z-index: 9;
left: 48%;
top: 60%;
transform: translateX(-50%);
gap: 20px;
display: flex;
justify-content: center;
width: min(80vw, 360px);
flex-direction: row;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-callout {
left: 50%;
top: 50%;
}

.contact-stage[data-screen="verified-human"] .contact-callout {
left: 60%;
top: 70%;
}

.contact-stage[data-screen="select-spot"] .contact-callout {
left: 60%;
top: 70%;
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next {
left: 70%;
top: 75%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="verified-human"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="verified-human"]
.contact-hotspot--next
.contact-hotspot__icon {
width: 60%;
height: 60%;
transform: none;
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next {
left: 70%;
top: 75%;
width: clamp(48px, 3vw, 60px);
height: clamp(48px, 3vw, 60px);
}

.contact-stage[data-screen="select-spot"] .contact-hotspot--next::before {
inset: 0;
transform: none;
}

.contact-stage[data-screen="select-spot"]
.contact-hotspot--next
.contact-hotspot__arrow {
font-size: 24px;
transform: none;
}

.contact-stage[data-screen="wrong-retry"] .contact-hotspot--next {
left: 70%;
top: 75%;
}

.contact-stage[data-screen="wrong-dead-end"] .contact-hotspot--next {
left: 70%;
top: 75%;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-top {
top: 20%;
width: 55%;
font-size: 26px;
line-height: 1.02;
}

.contact-stage[data-screen="wrong-dead-end"] .callout-bottom {
top: 68%;
left: 58%;
width: 38%;
font-size: clamp(22px, 4.8vw, 30px);
}

.contact-cards {
width: min(88vw, 620px);
grid-template-columns: 1fr;
gap: 16px;
}

.contact-card {
grid-template-columns: 72px 1fr;
grid-template-rows: auto;
min-height: 90px;
gap: 0px;
margin: 10px 0;
border-radius: 8px;
background: linear-gradient(
90deg,
rgba(0, 18, 31, 0.82) 0 25%,
rgba(1, 47, 76, 0.86) 25% 100%
);
}

.contact-card__icon {
width: 35px;
height: 35px;
}

.contact-card__label {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 18px;
text-align: left;
font-size: 24px;
}

.contact-callout__text {
position: absolute;
left: 10%;
right: 10%;
top: 0%;
bottom: 5%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.25;
white-space: pre-line;
}

/* ===== SCREEN 1: ringing — Duo-specific proportions ===== */

.contact-stage[data-screen="ringing"] .contact-test-copy__headline {
font-size: clamp(28px, 7vw, 40px);
margin-bottom: 8px;
}

.contact-stage[data-screen="ringing"] .contact-test-copy__subtext {
font-size: clamp(15px, 3.2vw, 18px);
}

.contact-stage[data-screen="ringing"] .contact-flow-content {
width: 100%;
height: 100%;
position: relative;
}

.contact-stage[data-screen="ringing"] .contact-stage__scene-image {
width: 100%;
max-width: none;
left: 0;
bottom: 0;
transform: none;
position: absolute;
}

.contact-stage[data-screen="ringing"] .contact-telephone-hotspot {
width: 30%;
height: 22%;
left: 42%;
bottom: 12%;
position: absolute;
}

}