.studio-page {
    --studio-width: 1220px;
    --studio-pad: max(1.5rem, calc((100vw - var(--studio-width)) / 2));
    background:
        linear-gradient(90deg, rgba(142, 211, 227, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, #04090f 0%, #081015 50%, #050a0e 100%);
    background-size: 5.5rem 100%, auto;
}

.studio-page main { padding-top: 5.6rem; }
.studio-page .brand-menu a[aria-current="page"] { color: var(--amber); }
.studio-page .brand-footer { background: #04080b; }
.studio-page.studio-page--portfolio main { padding-top: 0; }
.studio-page--portfolio .featured-work--page { padding-top: clamp(8rem, 10vw, 10rem); }
.studio-page--portfolio .brand-nav { background: rgba(4, 10, 14, 0.94); }

.studio-hero {
    position: relative;
    display: grid;
    min-height: min(78svh, 760px);
    grid-template-columns: minmax(0, 1.03fr) minmax(370px, 0.97fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
    padding: clamp(4rem, 8vw, 7rem) var(--studio-pad);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.studio-hero__copy { position: relative; z-index: 2; max-width: 690px; }
.studio-hero h1 {
    max-width: 11ch;
    margin: 0;
    color: #f5fbfd;
    font-size: clamp(3.2rem, 6.2vw, 6.5rem);
    line-height: 0.91;
    letter-spacing: 0;
    text-wrap: balance;
}
.studio-hero__lede { max-width: 54ch; margin: 1.5rem 0 0; color: var(--muted); font-size: clamp(1.04rem, 1.5vw, 1.25rem); line-height: 1.62; }
.studio-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.studio-hero__visual {
    position: relative;
    min-height: 420px;
    align-self: stretch;
}
.studio-hero__visual::before {
    position: absolute;
    inset: 12% 0 8%;
    border-top: 1px solid rgba(202, 237, 245, 0.13);
    border-bottom: 1px solid rgba(202, 237, 245, 0.13);
    content: "";
}

.service-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100%, 520px);
    aspect-ratio: 1.08;
    transform: translate(-50%, -50%);
}
.service-frame__screen {
    position: absolute;
    inset: 10% 8% 15%;
    border: 1px solid rgba(199, 235, 244, 0.24);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(217, 244, 249, 0.07), rgba(51, 93, 104, 0.04));
    box-shadow: inset 0 0 50px rgba(128, 217, 238, 0.05), 0 32px 65px rgba(0, 0, 0, 0.28);
}
.service-frame__screen::before { position: absolute; top: 0; right: 0; left: 0; height: 34px; border-bottom: 1px solid rgba(199, 235, 244, 0.15); content: ""; }
.service-frame__screen::after { position: absolute; top: 13px; left: 15px; width: 6px; height: 6px; border-radius: 50%; content: ""; background: var(--amber); box-shadow: 14px 0 rgba(169, 233, 248, 0.38), 28px 0 rgba(169, 233, 248, 0.18); }
.service-frame__blocks { position: absolute; inset: 23% 14% 23%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 7px; }
.service-frame__blocks i { display: block; border: 1px solid rgba(204, 239, 247, 0.25); border-radius: 5px; background: linear-gradient(145deg, rgba(241, 252, 255, 0.83), rgba(118, 174, 188, 0.5)); box-shadow: inset 0 1px rgba(255, 255, 255, 0.72), 0 8px 16px rgba(0, 0, 0, 0.2); }
.service-frame__blocks i:nth-child(1) { grid-column: 1 / 5; }
.service-frame__blocks i:nth-child(2) { grid-column: 5 / 7; }
.service-frame__blocks i:nth-child(3) { grid-column: 1 / 3; }
.service-frame__blocks i:nth-child(4) { grid-column: 3 / 7; }
.service-frame__blocks i:nth-child(5) { grid-column: 1 / 4; }
.service-frame__blocks i:nth-child(6) { grid-column: 4 / 7; }
.service-frame__blocks i:nth-child(7) { grid-column: 1 / 2; }
.service-frame__blocks i:nth-child(8) { grid-column: 2 / 7; }
.service-frame__label { position: absolute; right: 8%; bottom: 7%; color: var(--soft); font: 500 0.63rem "IBM Plex Mono", monospace; text-transform: uppercase; }

.editorial-section { padding: clamp(6rem, 10vw, 10rem) var(--studio-pad); }
.editorial-section--tint { background: #0b1216; }
.editorial-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr); align-items: end; gap: 3rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.editorial-heading h2 { max-width: 12ch; margin: 0; font-size: clamp(2.8rem, 5.2vw, 5.5rem); line-height: 0.94; letter-spacing: 0; text-wrap: balance; }
.editorial-heading > p { max-width: 42ch; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.58; }

.service-catalog { border-bottom: 1px solid var(--line); }
.about-services { scroll-margin-top: 5.5rem; }
.studio-page--about .service-catalog { padding-block: clamp(5.5rem, 8vw, 8rem); }
.studio-page--about .service-catalog .editorial-heading { margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.studio-page--about .service-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.studio-page--about .service-panel {
    display: flex;
    min-height: clamp(390px, 36vw, 470px);
    flex-direction: column;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(219, 245, 250, 0.035), rgba(219, 245, 250, 0));
}
.studio-page--about .service-panel__header { display: flex; align-items: center; justify-content: space-between; }
.service-panel__number { color: var(--amber); font: 600 0.68rem "IBM Plex Mono", monospace; }
.studio-page--about .service-panel__type { color: var(--soft); font: 500 0.62rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.studio-page--about .service-panel h3 {
    max-width: 10ch;
    margin: clamp(2.4rem, 5vw, 4.6rem) 0 0;
    color: var(--ice-bright);
    font-size: clamp(2.4rem, 4.4vw, 4.5rem);
    line-height: 0.92;
    text-wrap: balance;
}
.studio-page--about .service-panel__summary {
    max-width: 36ch;
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.5;
}
.studio-page--about .service-panel__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: auto 0 0;
    padding: 1.35rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
}
.studio-page--about .service-panel__list li {
    padding: 0.42rem 0.5rem 0.42rem 0;
    color: rgba(232, 246, 249, 0.76);
    font: 500 0.66rem/1.35 "IBM Plex Mono", monospace;
    text-transform: uppercase;
}
.studio-page--about .service-panel__link { width: fit-content; margin-top: 1.35rem; }
.studio-page--about .service-guidance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--line);
}
.studio-page--about .service-guidance p { margin: 0; color: var(--muted); line-height: 1.5; }
.studio-page--about .service-guidance strong { color: var(--ice-bright); }
.studio-page--about .service-guidance .text-link { flex: 0 0 auto; }
.mobile-call-button { display: none; }

.scope-layout { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(380px, 1.12fr); gap: clamp(3rem, 9vw, 9rem); }
.scope-layout h2 { max-width: 10ch; margin: 0; font-size: clamp(2.9rem, 5vw, 5.1rem); line-height: 0.94; }
.scope-layout__content > p { max-width: 54ch; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.scope-factors { display: grid; grid-template-columns: repeat(2, 1fr); margin: 2.2rem 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.scope-factors li { padding: 0.9rem 0; border-bottom: 1px solid var(--line); color: var(--ice-bright); font: 500 0.7rem "IBM Plex Mono", monospace; text-transform: uppercase; }

.compact-process { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; counter-reset: service-step; }
.compact-process li { display: grid; grid-template-columns: 52px minmax(210px, 0.7fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.7rem 0; border-bottom: 1px solid var(--line); counter-increment: service-step; }
.compact-process li::before { color: var(--amber); content: "0" counter(service-step); font: 600 0.68rem "IBM Plex Mono", monospace; }
.compact-process h3 { margin: 0; font-size: 1.3rem; }
.compact-process p { max-width: 56ch; margin: 0; color: var(--muted); line-height: 1.55; }
.studio-page--services .service-process { padding-block: clamp(5.5rem, 8vw, 8rem); }
.studio-page--services .service-process .editorial-heading { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.studio-page--services .service-process .editorial-heading h2 { max-width: 14ch; }
.studio-page--services .compact-process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid var(--line);
}
.studio-page--services .compact-process li {
    display: grid;
    min-height: 220px;
    grid-template-columns: 1fr;
    align-content: space-between;
    gap: 1rem;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border-right: 1px solid var(--line);
}
.studio-page--services .compact-process h3 { color: var(--ice-bright); font-size: clamp(1.55rem, 2.4vw, 2.2rem); }
.studio-page--services .compact-process p { max-width: 24ch; }

.studio-cta { display: grid; justify-items: center; padding: clamp(7rem, 12vw, 11rem) var(--studio-pad); color: #111719; background: var(--mint); text-align: center; }
.studio-cta .eyebrow { color: #754239; }
.studio-cta h2 { max-width: 10ch; margin: 0; font-size: clamp(3rem, 6.5vw, 6.5rem); line-height: 0.92; }
.studio-cta p { max-width: 53ch; margin: 1.4rem 0 0; font-size: 1.08rem; line-height: 1.55; }
.studio-cta .button--primary { margin-top: 2rem; color: #fff; background: #101719; border-color: #101719; }

.studio-page--about {
    background: #050b10;
}
.studio-page--about .about-hero {
    min-height: min(74svh, 720px);
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    padding-bottom: clamp(4.5rem, 8vw, 7rem);
}
.studio-page--about .about-hero__copy { max-width: 1040px; }
.studio-page--about .about-hero h1 {
    max-width: 16ch;
    font-size: clamp(3.4rem, 6.3vw, 6.5rem);
    line-height: 0.92;
}
.studio-page--about .about-hero .studio-hero__lede {
    max-width: 66ch;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.about-section-heading {
    display: grid;
    grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 6vw, 6rem);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}
.about-section-heading h2 {
    max-width: 13ch;
    margin: 0;
    color: var(--ice-bright);
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    line-height: 0.94;
}

.about-principles {
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: #071015;
}
.about-principles__list { border-top: 1px solid var(--line); }
.about-principles__list article {
    display: grid;
    grid-template-columns: 56px minmax(260px, 0.85fr) minmax(280px, 1fr);
    align-items: baseline;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: clamp(2rem, 3.5vw, 3rem) 0;
    border-bottom: 1px solid var(--line);
}
.about-principles__list span,
.about-difference__list span,
.about-name__number {
    color: var(--amber);
    font: 600 0.66rem "IBM Plex Mono", monospace;
    text-transform: uppercase;
}
.about-principles__list h3 {
    margin: 0;
    color: var(--ice-bright);
    font-size: clamp(1.75rem, 3vw, 3rem);
    line-height: 1;
}
.about-principles__list p {
    max-width: 43ch;
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.about-name {
    padding: clamp(6rem, 10vw, 9rem) var(--studio-pad);
    color: #101719;
    background: #dfeceb;
}
.about-name .eyebrow { color: #754239; }
.about-name__intro {
    display: grid;
    grid-template-columns: minmax(170px, 0.38fr) minmax(300px, 1fr) minmax(260px, 0.68fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.about-name__intro h2 {
    max-width: 14ch;
    margin: 0;
    color: #101719;
    font-size: clamp(2.7rem, 4.8vw, 5rem);
    line-height: 0.94;
}
.about-name__intro > p:last-child {
    max-width: 39ch;
    margin: 0;
    color: rgba(16, 23, 25, 0.7);
    font-size: 1.05rem;
    line-height: 1.55;
}
.about-name__intro strong { color: #8d4e1e; }
.about-name__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    border-top: 1px solid rgba(16, 39, 46, 0.2);
    border-bottom: 1px solid rgba(16, 39, 46, 0.2);
}
.about-name__reading {
    display: grid;
    align-content: center;
    gap: 1.35rem;
    min-height: clamp(300px, 31vw, 420px);
    padding: clamp(2rem, 4vw, 3.5rem);
}
.about-name__reading--snow { padding-left: 0; }
.about-name__reading--now { padding-right: 0; }
.about-name__phrase {
    margin: 0;
    color: #101719;
    font-size: clamp(2.6rem, 4.7vw, 5.2rem);
    font-weight: 800;
    line-height: 0.92;
    text-transform: uppercase;
}
.about-name__s { display: inline-block; color: #99541f; font: inherit; }
.about-name__meaning {
    max-width: 34ch;
    margin: 0;
    color: rgba(16, 23, 25, 0.68);
    font-size: 1rem;
    line-height: 1.5;
}
.about-name__shift {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
    border-right: 1px solid rgba(16, 39, 46, 0.18);
    border-left: 1px solid rgba(16, 39, 46, 0.18);
}
.about-name__shift-s {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(16, 39, 46, 0.28);
    border-radius: 5px;
    color: #fff;
    background: #99541f;
    font: 600 1.1rem "IBM Plex Mono", monospace;
}
.about-name__shift i {
    width: 1px;
    height: 76px;
    background: rgba(16, 39, 46, 0.28);
}
.about-name__shift small {
    color: rgba(16, 23, 25, 0.58);
    font: 600 0.58rem "IBM Plex Mono", monospace;
    text-transform: uppercase;
}
.studio-motion .about-name__stage.is-visible .about-name__shift-s {
    animation: about-s-travel 800ms 180ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

.about-difference {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: clamp(3rem, 9vw, 9rem);
    border-bottom: 1px solid var(--line);
}
.about-difference .about-section-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin: 0;
}
.about-difference__list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
}
.about-difference__list li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2.2rem) 0;
    border-bottom: 1px solid var(--line);
}
.about-difference__list p {
    max-width: 36ch;
    margin: 0;
    color: var(--ice-bright);
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    line-height: 1.15;
}
.about-cta h2 { max-width: 13ch; }

@keyframes about-s-travel {
    from { opacity: 0.55; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(20px); }
}

.studio-page--contact {
    --contact-header-height: 5.4rem;
    --contact-footer-height: 64px;
    display: flex;
    min-height: 100svh;
    min-height: 100dvh;
    flex-direction: column;
}
.studio-page--contact main { display: grid; flex: 1; padding-top: var(--contact-header-height); }
.contact-workspace {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: calc(100svh - var(--contact-header-height) - var(--contact-footer-height));
    min-height: calc(100dvh - var(--contact-header-height) - var(--contact-footer-height));
    grid-template-columns: minmax(340px, 0.88fr) minmax(540px, 1.12fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    padding: clamp(0.75rem, 2svh, 1.35rem) var(--studio-pad);
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 30%, rgba(169, 233, 248, 0.06), transparent 32%),
        linear-gradient(180deg, rgba(5, 12, 18, 0.18), rgba(10, 20, 25, 0.08));
}
.contact-stage {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: clamp(0.8rem, 1.8svh, 1.15rem);
}
.contact-threshold {
    position: relative;
    width: min(100%, 430px);
    height: clamp(210px, 31svh, 300px);
    overflow: visible;
    pointer-events: none;
}
.contact-threshold::before,
.contact-threshold::after {
    position: absolute;
    content: "";
    pointer-events: none;
}
.contact-threshold::after {
    right: -26%;
    bottom: 0;
    width: 75%;
    height: 34%;
    background: linear-gradient(92deg, rgba(219, 250, 255, 0.25), rgba(169, 233, 248, 0.08) 48%, transparent 84%);
    clip-path: polygon(0 23%, 100% 0, 100% 100%, 0 78%);
    filter: blur(10px);
    opacity: 0.7;
}
.contact-threshold__shell {
    position: absolute;
    inset: 0 auto 0 12%;
    width: min(74%, 315px);
    border: clamp(24px, 3.1vw, 38px) solid rgba(205, 237, 244, 0.88);
    border-bottom-width: clamp(18px, 2.4vw, 28px);
    border-radius: 48% 48% 10px 10px;
    background:
        radial-gradient(circle at 52% 34%, #f7feff 0 8%, #bff2ff 26%, #76cadd 50%, #173b4c 78%, #07131a 100%);
    box-shadow:
        inset 0 0 35px rgba(255, 255, 255, 0.5),
        0 0 30px rgba(169, 233, 248, 0.2),
        0 22px 40px rgba(0, 0, 0, 0.32);
}
.contact-threshold__shell::before {
    position: absolute;
    inset: calc(clamp(24px, 3.1vw, 38px) * -0.72);
    border: 1px solid rgba(235, 253, 255, 0.38);
    border-radius: 48% 48% 8px 8px;
    content: "";
    background:
        linear-gradient(102deg, transparent 46%, rgba(255, 255, 255, 0.28) 48%, transparent 51%),
        repeating-linear-gradient(90deg, transparent 0 31%, rgba(65, 118, 132, 0.17) 32% 32.5%, transparent 33% 65%);
    box-shadow: inset 10px 12px 22px rgba(255, 255, 255, 0.26), inset -12px -15px 24px rgba(37, 92, 108, 0.2);
}
.contact-threshold__interior {
    position: absolute;
    inset: 0;
    border-radius: 42% 42% 2px 2px;
    background: radial-gradient(circle at 52% 34%, #fff 0 7%, #dffbff 20%, #91e5f5 43%, rgba(54, 153, 180, 0.72) 68%, rgba(6, 22, 30, 0.9) 100%);
    box-shadow: inset 0 0 42px rgba(255, 255, 255, 0.48), 0 0 30px rgba(169, 233, 248, 0.42);
}
.contact-threshold__beam {
    position: absolute;
    right: -50%;
    bottom: -20%;
    width: 135%;
    height: 66%;
    background: linear-gradient(90deg, rgba(226, 251, 255, 0.38), rgba(169, 233, 248, 0.12) 58%, transparent);
    clip-path: polygon(0 24%, 100% 0, 100% 100%, 0 70%);
    filter: blur(7px);
    opacity: 0.78;
}
.contact-threshold__door {
    position: absolute;
    bottom: -7%;
    left: -29%;
    width: 42%;
    height: 96%;
    border: 1px solid rgba(239, 253, 255, 0.62);
    border-radius: 45% 18px 8px 8px;
    background:
        linear-gradient(100deg, rgba(244, 254, 255, 0.94), rgba(157, 216, 228, 0.94) 58%, rgba(75, 143, 160, 0.96));
    box-shadow:
        inset 7px 0 12px rgba(255, 255, 255, 0.38),
        10px 14px 24px rgba(0, 0, 0, 0.3),
        12px 0 28px rgba(169, 233, 248, 0.22);
    transform: perspective(500px) rotateY(-18deg);
    transform-origin: right center;
}
.contact-threshold__door::after {
    position: absolute;
    top: 49%;
    right: 11%;
    width: 3px;
    height: 18%;
    border-radius: 2px;
    content: "";
    background: rgba(13, 46, 56, 0.55);
    box-shadow: 0 0 0 1px rgba(221, 249, 255, 0.15);
}
.contact-intro, .contact-form-panel { position: relative; z-index: 1; }
.contact-intro { max-width: 540px; }
.contact-intro .eyebrow { margin-bottom: clamp(0.65rem, 1.5svh, 0.9rem); }
.contact-intro h1 {
    max-width: 10.5ch;
    margin: 0;
    color: #f5fbfd;
    font-size: clamp(3.25rem, 5.15vw, 5.65rem);
    line-height: 0.91;
    letter-spacing: 0;
    text-wrap: balance;
}
.contact-intro h1 span { display: block; color: var(--ice-bright); }
.contact-intro > p:not(.eyebrow) { max-width: 46ch; margin: clamp(0.85rem, 2svh, 1.2rem) 0 0; color: var(--muted); font-size: clamp(0.94rem, 1.1vw, 1.04rem); line-height: 1.48; }
.contact-methods { display: grid; max-width: 490px; margin-top: clamp(1rem, 2.2svh, 1.5rem); border-top: 1px solid var(--line); }
.contact-methods a { display: grid; min-height: 44px; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 0.8rem; padding: 0.58rem 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: border-color 220ms ease, color 220ms ease; }
.contact-methods a:hover, .contact-methods a:focus-visible { border-color: rgba(239, 185, 95, 0.55); color: var(--ice-bright); outline: none; }
.contact-methods span:first-child { color: var(--amber); font: 500 0.63rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.contact-methods span:last-child { overflow-wrap: anywhere; }
.contact-intro__note { max-width: 46ch !important; padding-left: 0.8rem; border-left: 2px solid rgba(239, 185, 95, 0.66); font-size: 0.78rem !important; line-height: 1.42 !important; }
.contact-intro__note span { color: var(--ice-bright); font-weight: 700; }

.contact-form-panel {
    padding: clamp(1.05rem, 1.7vw, 1.45rem) clamp(1.1rem, 2vw, 1.7rem);
    border-top: 1px solid rgba(210, 239, 247, 0.2);
    border-right: 1px solid rgba(210, 239, 247, 0.14);
    border-bottom: 1px solid rgba(210, 239, 247, 0.2);
    border-radius: 0 7px 7px 0;
    background: linear-gradient(120deg, rgba(10, 20, 26, 0.9), rgba(6, 13, 18, 0.68));
    box-shadow: inset 1px 0 rgba(239, 185, 95, 0.42);
}
.contact-form-panel::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 34%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--amber));
}
.contact-form-panel__header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: clamp(0.7rem, 1.5svh, 0.95rem); border-bottom: 1px solid var(--line); }
.contact-form-panel__header p { margin: 0 0 0.22rem; color: var(--amber); font: 600 0.62rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.contact-form-panel__header h2 { margin: 0; color: var(--ice-bright); font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.05; }
.contact-form-panel__header span { color: var(--soft); font: 500 0.6rem "IBM Plex Mono", monospace; text-transform: uppercase; }
.contact-form { display: grid; gap: clamp(0.55rem, 1.2svh, 0.72rem); margin-top: clamp(0.72rem, 1.6svh, 0.95rem); }
.contact-form .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.6rem, 1vw, 0.78rem); }
.contact-form .form-field { display: grid; gap: 0.28rem; }
.contact-form .form-field label, .contact-form .form-check label { color: rgba(235, 248, 251, 0.8); font-size: 0.74rem; font-weight: 600; transition: color 180ms ease; }
.contact-form .form-field label span:not(.form-field__required) { margin-left: 0.2rem; color: var(--soft); font-size: 0.68rem; font-weight: 500; }
.contact-form .form-field__required { margin-left: 0.12rem; color: var(--amber); font: 600 0.72rem "IBM Plex Mono", monospace; }
.contact-form .form-field input, .contact-form .form-field select, .contact-form .form-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(204, 239, 247, 0.19);
    border-radius: 5px;
    outline: none;
    color: var(--ink);
    background: rgba(2, 8, 12, 0.75);
    font-size: 0.86rem;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.contact-form .form-field textarea { height: clamp(78px, 10.5svh, 96px); min-height: 78px; resize: vertical; line-height: 1.38; }
.contact-form .form-field:focus-within label { color: var(--ice-bright); }
.contact-form .form-field input:hover, .contact-form .form-field select:hover, .contact-form .form-field textarea:hover { border-color: rgba(204, 239, 247, 0.32); }
.contact-form .form-field input:focus, .contact-form .form-field select:focus, .contact-form .form-field textarea:focus { border-color: rgba(169, 233, 248, 0.76); background: rgba(4, 13, 18, 0.92); box-shadow: 0 0 0 3px rgba(169, 233, 248, 0.09); }
.contact-form .form-field.is-complete input, .contact-form .form-field.is-complete select, .contact-form .form-field.is-complete textarea { border-color: rgba(158, 201, 178, 0.42); }
.contact-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(233, 111, 97, 0.12); }
.contact-form .form-field input::placeholder, .contact-form .form-field textarea::placeholder { color: rgba(224, 236, 242, 0.39); }
.contact-form__brief { display: grid; grid-template-columns: minmax(180px, 0.72fr) minmax(280px, 1.28fr); gap: clamp(0.6rem, 1vw, 0.78rem); }
.contact-form__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 0.46fr); align-items: center; gap: 1rem; }
.contact-form .form-check { display: flex; min-height: 44px; align-items: center; gap: 0.68rem; }
.contact-form .form-check input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--ice); }
.contact-form .form-check input[aria-invalid="true"] { outline: 2px solid var(--coral); outline-offset: 2px; }
.contact-form .button { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: 1rem; }
.contact-form .button:disabled { cursor: wait; opacity: 0.72; }
.contact-form__arrow { font-family: "IBM Plex Mono", monospace; transition: transform 180ms ease; }
.contact-form .button:hover .contact-form__arrow, .contact-form .button:focus-visible .contact-form__arrow { transform: translateX(3px); }
.form-status {
    display: flex;
    height: 44px;
    align-items: center;
    margin: 0;
    padding: 0.42rem 0.62rem;
    overflow: hidden;
    border-left: 2px solid var(--ice);
    color: var(--muted);
    background: rgba(169, 233, 248, 0.05);
    font-size: 0.74rem;
    line-height: 1.25;
}
.form-status[hidden] { display: flex; visibility: hidden; }
.form-status[data-state="loading"] { border-color: var(--amber); color: rgba(246, 232, 203, 0.9); }
.form-status[data-state="success"] { border-color: var(--mint); color: #dff8ea; }
.form-status[data-state="error"] { border-color: var(--coral); color: #ffd8d3; }
.contact-footer { min-height: var(--contact-footer-height); grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.5rem; padding: 0.55rem var(--studio-pad); }
.contact-footer nav { gap: 0.9rem; }
.contact-footer p { grid-column: auto; white-space: nowrap; }

.studio-motion [data-reveal] { opacity: 0.18; transform: translate3d(0, 22px, 0); }
.studio-motion [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 560ms ease, transform 760ms cubic-bezier(0.2, 0.72, 0.24, 1); }
.studio-motion .contact-threshold__shell { animation: contact-threshold-reveal 760ms 180ms cubic-bezier(0.2, 0.72, 0.24, 1) both; }
.studio-motion .contact-threshold__beam { animation: contact-threshold-beam 4.8s 1.1s ease-in-out infinite alternate; }

@keyframes contact-threshold-reveal {
    from { opacity: 0; transform: translate3d(-14px, 10px, 0) scale(0.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes contact-threshold-beam {
    from { opacity: 0.58; }
    to { opacity: 0.82; }
}

@media (max-width: 1024px) {
    .studio-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr); gap: 2rem; }
    .contact-workspace { grid-template-columns: minmax(300px, 0.72fr) minmax(500px, 1.28fr); gap: 2rem; }
    .contact-threshold { height: clamp(190px, 27svh, 245px); }
    .contact-intro h1 { font-size: clamp(3rem, 5.15vw, 4.2rem); }
    .contact-intro__note { display: none; }
}

@media (min-width: 861px) and (max-height: 780px) {
    .contact-workspace { gap: clamp(2rem, 4vw, 4rem); padding-block: 0.65rem; }
    .contact-intro .eyebrow { margin-bottom: 0.55rem; }
    .contact-intro h1 { font-size: clamp(3rem, 4.8vw, 4.35rem); }
    .contact-intro > p:not(.eyebrow) { margin-top: 0.75rem; line-height: 1.42; }
    .contact-methods { margin-top: 0.8rem; }
    .contact-methods a { min-height: 40px; padding-block: 0.45rem; }
    .contact-intro__note { display: none; }
    .contact-form-panel { padding-block: 0.88rem; }
    .contact-form-panel__header { padding-bottom: 0.62rem; }
    .contact-form { gap: 0.5rem; margin-top: 0.65rem; }
    .contact-form .form-field { gap: 0.22rem; }
    .contact-form .form-field textarea { height: 76px; min-height: 76px; }
    .form-status { height: 38px; padding-block: 0.3rem; }
}

@media (max-width: 820px) {
    .studio-page { background-size: 4.5rem 100%, auto; }
    .studio-hero { min-height: 0; grid-template-columns: 1fr; padding-top: 4rem; }
    .studio-hero h1 { max-width: 12ch; font-size: clamp(3.2rem, 10vw, 5.2rem); }
    .studio-hero__visual { min-height: 360px; }
    .editorial-heading, .scope-layout, .contact-layout { grid-template-columns: 1fr; }
    .editorial-heading { align-items: start; gap: 1.5rem; }
    .editorial-heading h2, .scope-layout h2 { max-width: 12ch; }
    .studio-page--about .service-panels { grid-template-columns: 1fr; }
    .studio-page--about .service-panel { min-height: 390px; }
    .studio-page--services .studio-hero { gap: 1.5rem; padding-bottom: 4rem; }
    .studio-page--services .studio-hero__visual { min-height: 300px; }
    .studio-page--services .compact-process { grid-template-columns: 1fr; }
    .studio-page--services .compact-process li { min-height: 0; grid-template-columns: 44px minmax(130px, 0.55fr) minmax(0, 1fr); align-items: start; }
    .studio-page--services .compact-process p { grid-column: 3; max-width: 36ch; }
    .compact-process li { grid-template-columns: 42px minmax(0, 1fr); }
    .compact-process p { grid-column: 2; }
    .studio-page--about .about-hero { grid-template-columns: 1fr; }
    .about-section-heading, .about-name__intro { grid-template-columns: 1fr; gap: 1.25rem; }
    .about-section-heading h2, .about-name__intro h2 { max-width: 14ch; }
    .about-principles__list article { grid-template-columns: 48px minmax(220px, 0.8fr) minmax(0, 1fr); }
    .about-name__stage { grid-template-columns: 1fr; }
    .about-name__reading { min-height: 0; padding: 3rem 0; }
    .about-name__shift {
        min-height: 76px;
        flex-direction: row;
        border: 0;
        border-top: 1px solid rgba(16, 39, 46, 0.18);
        border-bottom: 1px solid rgba(16, 39, 46, 0.18);
    }
    .about-name__shift i { width: min(32vw, 180px); height: 1px; }
    .about-difference { grid-template-columns: 1fr; gap: 3rem; }
    .contact-layout { padding-top: 0; }
    .contact-details { position: relative; top: auto; }
    .mobile-call-button {
        position: fixed;
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(1rem, env(safe-area-inset-bottom));
        z-index: 20;
        display: grid;
        width: 52px;
        height: 52px;
        place-items: center;
        border: 1px solid rgba(255, 239, 207, 0.72);
        border-radius: 7px;
        color: #101719;
        background: var(--amber);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
        text-decoration: none;
        transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
    }
    .mobile-call-button:focus-visible {
        border-color: #fff;
        outline: 3px solid rgba(169, 233, 248, 0.72);
        outline-offset: 3px;
    }
    .mobile-call-button:active { transform: translateY(1px); }
    body.menu-open .mobile-call-button { visibility: hidden; opacity: 0; pointer-events: none; }
}

@media (max-width: 860px) {
    .studio-page--contact main { padding-top: 4.8rem; }
    .contact-workspace {
        min-height: 0;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 2.5rem;
        padding: 3.5rem 1.5rem 4.5rem;
        overflow: visible;
    }
    .contact-intro { max-width: 620px; }
    .contact-intro h1 { max-width: 11ch; font-size: clamp(2.8rem, 8vw, 4.4rem); }
    .contact-intro__note { display: block; }
    .contact-stage { gap: 1.7rem; }
    .contact-threshold { width: min(100%, 410px); height: 270px; }
    .contact-threshold__shell { inset-inline: 17% auto; }
    .contact-form-panel { border-left: 1px solid rgba(210, 239, 247, 0.14); border-radius: 7px; box-shadow: inset 0 1px rgba(239, 185, 95, 0.42); }
    .contact-footer { min-height: 0; padding: 1.5rem; }
}

@media (max-width: 560px) {
    .studio-page main { padding-top: 4.8rem; }
    .studio-hero, .editorial-section, .studio-cta { padding-inline: 1.15rem; }
    .studio-hero { gap: 2rem; padding-top: 3.5rem; padding-bottom: 4.5rem; }
    .studio-hero h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
    .studio-hero__lede { font-size: 1rem; line-height: 1.52; }
    .studio-hero__visual { min-height: 280px; }
    .studio-actions {
        display: grid;
        width: 100%;
        max-width: 360px;
        grid-template-columns: 1fr;
    }
    .studio-actions .button { width: 100%; }
    .service-frame__blocks { gap: 4px; }
    .editorial-section { padding-block: 5.5rem; }
    .editorial-heading h2, .scope-layout h2 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
    .studio-page--services .service-panel { min-height: 370px; padding: 1.4rem; }
    .studio-page--services .service-panel h3 { margin-top: 2.6rem; font-size: clamp(2.35rem, 12vw, 3.35rem); }
    .studio-page--services .service-panel__list { grid-template-columns: 1fr; }
    .studio-page--services .service-guidance { align-items: start; flex-direction: column; gap: 0.8rem; }
    .studio-page--services .compact-process li { grid-template-columns: 36px minmax(0, 1fr); }
    .studio-page--services .compact-process h3, .studio-page--services .compact-process p { grid-column: 2; }
    .service-panel__body ul, .scope-factors { grid-template-columns: 1fr; }
    .compact-process li { gap: 1rem; }
    .studio-page--about .about-hero { min-height: 65svh; padding-top: 3.25rem; padding-bottom: 4rem; }
    .studio-page--about .about-hero h1 { max-width: 13ch; font-size: clamp(2.75rem, 13vw, 3.75rem); }
    .about-section-heading { margin-bottom: 2.75rem; }
    .about-section-heading h2 { font-size: clamp(2.45rem, 11.5vw, 3.35rem); }
    .about-name__intro h2 { max-width: 100%; font-size: clamp(2rem, 10.4vw, 3.2rem); }
    .about-name { padding: 4.75rem 1.15rem; }
    .about-name__intro { gap: 1rem; margin-bottom: 2.75rem; }
    .about-name__intro > p:last-child { font-size: 0.98rem; line-height: 1.5; }
    .about-name__reading { gap: 1rem; padding-block: 2.4rem; }
    .about-name__phrase { font-size: clamp(2.25rem, 10.5vw, 3rem); }
    .about-name__meaning { font-size: 0.95rem; }
    .about-name__shift { min-height: 66px; }
    .about-name__shift-s { width: 36px; height: 36px; }
    .about-principles__list article { grid-template-columns: 36px minmax(0, 1fr); gap: 0.9rem; padding: 1.8rem 0; }
    .about-principles__list h3 { font-size: clamp(1.65rem, 8vw, 2.25rem); overflow-wrap: anywhere; }
    .about-principles__list p { grid-column: 2; font-size: 0.98rem; }
    .about-difference { gap: 2.5rem; }
    .about-difference__list li { grid-template-columns: 36px minmax(0, 1fr); gap: 0.9rem; }
    .about-difference__list p { font-size: clamp(1.2rem, 5.8vw, 1.55rem); }
    .contact-workspace { gap: 2rem; padding: 2.55rem 1.15rem 3.75rem; }
    .contact-threshold { height: 225px; }
    .contact-threshold__shell { inset-inline-start: 18%; width: min(68%, 245px); border-width: 24px; border-bottom-width: 18px; }
    .contact-threshold__door { left: -27%; }
    .contact-intro h1 { font-size: clamp(2.65rem, 12.5vw, 3.8rem); }
    .contact-intro > p:not(.eyebrow) { line-height: 1.5; }
    .contact-form .form-grid { grid-template-columns: 1fr; }
    .contact-form-panel { padding: 1.05rem; }
    .contact-form-panel__header { align-items: start; }
    .contact-form-panel__header span { padding-top: 0.1rem; }
    .contact-form__brief, .contact-form__actions { grid-template-columns: 1fr; }
    .contact-form .form-field input, .contact-form .form-field select { min-height: 46px; }
    .contact-form .form-field textarea { height: 116px; min-height: 116px; }
    .form-status { height: auto; min-height: 60px; overflow: visible; }
    .contact-footer { grid-template-columns: 1fr; gap: 0.8rem; padding: 1.8rem 1.15rem; }
    .contact-footer p { grid-column: auto; white-space: normal; }
    .studio-cta h2 { font-size: clamp(2.8rem, 13vw, 4rem); }
    .studio-cta .button { width: min(100%, 350px); }
    .studio-page--services .studio-hero {
        gap: 1.1rem;
        padding-top: 2.25rem;
        padding-bottom: 3.35rem;
    }
    .studio-page--services .studio-hero h1 {
        max-width: 10ch;
        font-size: clamp(2.65rem, 13vw, 3.45rem);
        line-height: 0.93;
    }
    .studio-page--services .studio-hero__lede { max-width: 33ch; margin-top: 1.1rem; }
    .studio-page--services .studio-actions { gap: 0.55rem; margin-top: 1.45rem; }
    .studio-page--services .studio-hero__visual { min-height: 250px; }
    .studio-page--services .service-frame { width: min(90%, 280px); }
    .studio-page--services .editorial-section { padding-block: 4.5rem; }
    .studio-page--services .editorial-heading { gap: 1rem; margin-bottom: 2.25rem; }
    .studio-page--services .editorial-heading h2 { font-size: clamp(2.45rem, 11.5vw, 3.2rem); line-height: 0.96; }
    .studio-page--services .service-panel {
        min-height: 0;
        padding: 1.35rem;
    }
    .studio-page--services .service-panel h3 {
        max-width: 11ch;
        margin-top: 2.2rem;
        font-size: clamp(2.3rem, 11vw, 3rem);
    }
    .studio-page--services .service-panel__summary { margin-top: 1rem; font-size: 0.96rem; }
    .studio-page--services .service-panel__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 2rem;
        padding-top: 1rem;
    }
    .studio-page--services .service-panel__list li { padding-block: 0.36rem; font-size: 0.61rem; }
    .studio-page--services .service-panel__link { margin-top: 1rem; }
    .studio-page--services .service-guidance { padding-block: 1.15rem; }
    .studio-page--services .service-process .editorial-heading h2 { max-width: 11ch; }
    .studio-page--services .compact-process li { padding: 1.3rem; }
    .studio-page--services .compact-process h3 { font-size: 1.45rem; }
    .studio-page--services .compact-process p { font-size: 0.92rem; line-height: 1.45; }
    .studio-page--services .studio-cta { padding-block: 5rem; }
    .studio-page--services .studio-cta h2 { max-width: 11ch; font-size: clamp(2.65rem, 12vw, 3.45rem); }
    .studio-page--services .brand-footer { padding-bottom: max(5.75rem, calc(env(safe-area-inset-bottom) + 5rem)); }
}

/* Contact page: the inside of the home page igloo.
   The ice palette below is sampled straight from the WebGL igloo's brick material
   (assets/js/experience/keycaps.js -> createIceMaterial) so the walls in here read as the
   same frozen blocks, just lit from within instead of from the night sky outside. */
.studio-page--contact {
    --ice-spec: #f5ffff;
    --ice-bright: #dff2f6;
    --ice-light: #c2dee5;
    --ice-mid: #9dc3cd;
    --ice-deep: #6f9ba8;
    --ice-shade: #48717d;
    --ice-dark: #2f5460;
    --ice-seam: #1d3d49;
    --room-night: #04090f;
    --room-fog: #07121b;
    --room-warm: #efb95f;
    /* Brick proportions track the home page igloo's roughly 2:1 blocks. Pitch is kept in
       px rather than a share of the wall so a tall, scrolling mobile page does not stretch
       the courses into squares. */
    --brick: clamp(112px, 12.5vw, 190px);
    --course-pitch: clamp(58px, 8.2svh, 82px);
    --course-height: clamp(64px, 9.2svh, 92px);
    background: var(--room-night);
}

.studio-page--contact main {
    display: grid;
    padding-top: 0;
}

.igloo-room {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: calc(100svh - var(--contact-footer-height));
    min-height: calc(100dvh - var(--contact-footer-height));
    align-content: center;
    justify-items: center;
    padding: calc(var(--contact-header-height) + clamp(1rem, 3svh, 2.1rem)) var(--studio-pad) clamp(1.6rem, 4svh, 3rem);
    overflow: hidden;
    background: var(--room-night);
}

/* ---------- The interior shell ---------- */

.igloo-room__shell {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Standing inside the dome there is no outer silhouette to see — the wall simply wraps
   past every edge of the frame. Depth comes from the light falling off as the shell curves
   away from the apex, which is also what keeps the copy legible over the ice. */
.igloo-room__wall {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(132% 104% at 50% 2%,
            #eef9fb 0%,
            #cde5ec 15%,
            #a9cbd7 33%,
            #85aab9 54%,
            #5d8695 74%,
            #3e6673 90%,
            #2b4d59 100%);
}

/* One course of bricks. Each strip bows so the mortar lines read as arcs running around
   the inside of the dome, and the strips overlap so no seam gaps open between them. */
.igloo-course {
    position: absolute;
    left: -8%;
    width: 116%;
    height: var(--course-height);
    top: calc(var(--course) * var(--course-pitch) - 26px);
    border-radius: 50% / var(--arc, 30px);
    background-image:
        /* vertical mortar joints between bricks in this course */
        repeating-linear-gradient(90deg,
            rgba(240, 253, 255, 0.42) 0 1.5px,
            rgba(197, 231, 239, 0.14) 1.5px 5px,
            transparent 5px calc(var(--brick) - 5px),
            rgba(52, 92, 105, 0.34) calc(var(--brick) - 5px) calc(var(--brick) - 1.5px),
            rgba(29, 61, 73, 0.52) calc(var(--brick) - 1.5px) var(--brick)),
        /* frozen cloudiness and trapped bubbles, the CSS read of the ice shader */
        radial-gradient(58% 120% at 22% 34%, rgba(255, 255, 255, 0.2), transparent 62%),
        radial-gradient(44% 96% at 74% 68%, rgba(178, 226, 236, 0.16), transparent 66%),
        /* brick face shading: lit top lip falling to a shadowed underside */
        linear-gradient(180deg,
            rgba(245, 255, 255, 0.5) 0 5%,
            rgba(214, 240, 246, 0.2) 20%,
            rgba(150, 198, 210, 0.04) 58%,
            rgba(51, 91, 104, 0.24) 88%,
            rgba(29, 61, 73, 0.4) 100%),
        /* per-course tone drift */
        linear-gradient(0deg, rgba(233, 250, 255, var(--tone, 0.03)), rgba(233, 250, 255, var(--tone, 0.03)));
    background-position: var(--offset, 0) 0, 0 0, 0 0, 0 0, 0 0;
    box-shadow:
        inset 0 2px 0 rgba(245, 255, 255, 0.4),
        inset 0 -4px 9px rgba(35, 71, 84, 0.34);
}

/* Staggered joints per course, a tighter arc up top where the shell is closing in, and a
   little tone drift between courses so the wall never reads as repeating wallpaper. */
.igloo-course:nth-child(1)  { --offset: 0;                        --arc: 54px; --tone: 0.04; }
.igloo-course:nth-child(2)  { --offset: calc(var(--brick) / 2);   --arc: 50px; --tone: 0; }
.igloo-course:nth-child(3)  { --offset: calc(var(--brick) / 6);   --arc: 45px; --tone: 0.05; }
.igloo-course:nth-child(4)  { --offset: calc(var(--brick) * 0.62); --arc: 40px; --tone: 0.015; }
.igloo-course:nth-child(5)  { --offset: calc(var(--brick) * 0.18); --arc: 35px; --tone: 0.06; }
.igloo-course:nth-child(6)  { --offset: calc(var(--brick) * 0.72); --arc: 31px; --tone: 0.02; }
.igloo-course:nth-child(7)  { --offset: calc(var(--brick) * 0.28); --arc: 27px; --tone: 0.055; }
.igloo-course:nth-child(8)  { --offset: calc(var(--brick) * 0.8);  --arc: 24px; --tone: 0.01; }
.igloo-course:nth-child(9)  { --offset: calc(var(--brick) * 0.4);  --arc: 21px; --tone: 0.045; }
.igloo-course:nth-child(10) { --offset: calc(var(--brick) * 0.9);  --arc: 19px; --tone: 0.02; }
.igloo-course:nth-child(11) { --offset: calc(var(--brick) * 0.34); --arc: 17px; --tone: 0.05; }
.igloo-course:nth-child(12) { --offset: calc(var(--brick) * 0.76); --arc: 15px; --tone: 0.012; }
.igloo-course:nth-child(13) { --offset: calc(var(--brick) * 0.22); --arc: 14px; --tone: 0.042; }
.igloo-course:nth-child(14) { --offset: calc(var(--brick) * 0.68); --arc: 12px; --tone: 0.018; }
.igloo-course:nth-child(15) { --offset: calc(var(--brick) * 0.12); --arc: 11px; --tone: 0.05; }
.igloo-course:nth-child(16) { --offset: calc(var(--brick) * 0.56); --arc: 10px; --tone: 0.025; }

/* The keystone ring at the top of the dome, catching the most light. */
.igloo-room__crown {
    position: absolute;
    top: -20%;
    left: 50%;
    width: min(56vw, 720px);
    height: 42%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 72%, rgba(247, 255, 255, 0.34), rgba(198, 234, 242, 0.12) 46%, transparent 72%);
    filter: blur(14px);
    translate: -50% 0;
}

/* Concave shading: the shell darkens toward every rim as it curves away, and a soft pool
   of shadow sits behind the form so white copy stays readable against the lit ice. */
.igloo-room__concave {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(38% 46% at 50% 46%, rgba(5, 20, 28, 0.62) 0%, rgba(5, 20, 28, 0.4) 52%, transparent 82%),
        radial-gradient(96% 78% at 50% 34%, transparent 0 42%, rgba(9, 30, 40, 0.4) 78%, rgba(4, 13, 19, 0.82) 100%),
        linear-gradient(180deg, rgba(5, 17, 24, 0.34) 0%, transparent 20%, transparent 62%, rgba(4, 12, 18, 0.58) 100%);
}

/* Warm light spilling in from the entrance tunnel behind the viewer, the same amber the
   home page igloo's doorway throws onto the snow. */
.igloo-room__spill {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(52% 40% at 50% 96%, rgba(239, 185, 95, 0.16), transparent 68%),
        radial-gradient(38% 30% at 50% 100%, rgba(255, 226, 170, 0.14), transparent 72%);
    mix-blend-mode: screen;
}

/* Packed snow floor curving up to meet the wall, kept low and in shadow so it grounds the
   room without competing with the form. */
.igloo-room__floor {
    position: absolute;
    right: -14%;
    bottom: -7%;
    left: -14%;
    height: clamp(84px, 13svh, 150px);
    border-radius: 50% 50% 0 0 / 74% 74% 0 0;
    background:
        linear-gradient(180deg, rgba(206, 232, 239, 0.62) 0%, rgba(139, 176, 189, 0.5) 38%, rgba(72, 108, 122, 0.42) 100%);
    box-shadow: 0 -14px 34px rgba(168, 214, 228, 0.1);
}

/* ---------- Content ---------- */

.igloo-panel {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, 620px);
    gap: clamp(1.1rem, 2.5svh, 1.75rem);
}

.igloo-panel__head {
    display: grid;
    gap: clamp(0.6rem, 1.4svh, 0.9rem);
    text-align: center;
}

.igloo-panel__head h1 {
    max-width: none;
    margin: 0;
    color: #fbfeff;
    font-size: clamp(2.35rem, 4.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.42),
        0 14px 38px rgba(6, 24, 33, 0.5);
}

.igloo-panel__lead {
    max-width: 44ch;
    margin: 0 auto;
    color: rgba(243, 252, 254, 0.84);
    font-size: clamp(0.94rem, 1.15vw, 1.06rem);
    line-height: 1.5;
    text-shadow: 0 2px 14px rgba(6, 24, 33, 0.6);
}

.igloo-room .contact-form {
    display: grid;
    gap: clamp(0.7rem, 1.5svh, 1rem);
    margin: 0;
}

.igloo-room .contact-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.7rem, 1.5svh, 1rem);
}

/* Name and Email pair up; phone and the details slot each take the full wall width. */
.igloo-room .contact-form .form-field:nth-child(3),
.igloo-room .contact-form .form-field--message {
    grid-column: 1 / -1;
}

/* Carved slots. Every field is cut into the brick face rather than laid on top of it:
   shadow pooling along the top inner edge, a lit lip along the bottom where the cut
   catches the room light, and a bright hairline just under the outer edge. */
.igloo-room .contact-form .form-field {
    position: relative;
    display: block;
    min-width: 0;
    gap: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(11, 36, 47, 0.76) 0%, rgba(21, 55, 68, 0.6) 44%, rgba(46, 89, 103, 0.46) 100%);
    box-shadow:
        inset 0 6px 12px rgba(5, 22, 31, 0.7),
        inset 0 2px 0 rgba(4, 18, 26, 0.8),
        inset 0 -2px 0 rgba(230, 251, 255, 0.5),
        inset 4px 0 8px rgba(8, 30, 40, 0.42),
        inset -4px 0 8px rgba(8, 30, 40, 0.36),
        0 1px 0 rgba(243, 254, 255, 0.58),
        0 2px 6px rgba(5, 20, 28, 0.3);
    transition: box-shadow 220ms ease, background 220ms ease;
}

.igloo-room .contact-form .form-field::before,
.igloo-room .contact-form .form-field::after {
    display: none;
}

.igloo-room .contact-form .form-field__icon {
    position: absolute;
    top: 1.32rem;
    left: 1.1rem;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: rgba(216, 244, 250, 0.62);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke 200ms ease;
}

.igloo-room .contact-form .form-field label {
    position: absolute;
    top: 1.42rem;
    left: 2.95rem;
    color: rgba(226, 246, 251, 0.7);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    pointer-events: none;
    transition: top 200ms ease, font-size 200ms ease, color 200ms ease;
}

.igloo-room .contact-form .form-field__required {
    margin-left: 0.1rem;
    color: rgba(239, 185, 95, 0.9);
    font: inherit;
}

.igloo-room .contact-form .form-field__optional {
    margin-left: 0.3rem;
    color: rgba(212, 238, 245, 0.42);
    font-size: 0.72rem;
}

.igloo-room .contact-form .form-field input,
.igloo-room .contact-form .form-field textarea {
    width: 100%;
    min-height: 0;
    height: 64px;
    padding: 1.72rem 1.1rem 0.5rem 2.95rem;
    border: 0;
    border-radius: 13px;
    outline: none;
    color: #f7fdfe;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 0.95rem;
    caret-color: var(--ice);
}

.igloo-room .contact-form .form-field textarea {
    height: clamp(118px, 17svh, 158px);
    padding-top: 2.5rem;
    resize: vertical;
    line-height: 1.5;
}

.igloo-room .contact-form .form-field--message .form-field__icon,
.igloo-room .contact-form .form-field--message label {
    top: 1.42rem;
}

/* Floated state: filled, focused, or flagged complete by the form script. */
.igloo-room .contact-form .form-field input:focus + label,
.igloo-room .contact-form .form-field input:not(:placeholder-shown) + label,
.igloo-room .contact-form .form-field textarea:focus + label,
.igloo-room .contact-form .form-field textarea:not(:placeholder-shown) + label,
.igloo-room .contact-form .form-field.is-complete label {
    top: 0.62rem;
    color: rgba(212, 240, 247, 0.72);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.igloo-room .contact-form .form-field:focus-within {
    background:
        linear-gradient(180deg, rgba(8, 32, 43, 0.8) 0%, rgba(19, 53, 67, 0.64) 44%, rgba(50, 96, 112, 0.5) 100%);
    box-shadow:
        inset 0 6px 13px rgba(4, 19, 28, 0.74),
        inset 0 2px 0 rgba(3, 15, 22, 0.82),
        inset 0 -2px 0 rgba(236, 253, 255, 0.72),
        inset 4px 0 8px rgba(8, 30, 40, 0.42),
        inset -4px 0 8px rgba(8, 30, 40, 0.36),
        0 1px 0 rgba(246, 255, 255, 0.7),
        0 0 0 2px rgba(169, 233, 248, 0.85),
        0 0 26px rgba(169, 233, 248, 0.28);
}

.igloo-room .contact-form .form-field:focus-within .form-field__icon {
    stroke: var(--ice);
}

/* The shared contact-form rules further up this file style the input chrome directly and
   tie with these on specificity, so the carved look has to claim the focus/complete states
   explicitly rather than rely on source order. */
.igloo-room .contact-form .form-field input:focus,
.igloo-room .contact-form .form-field textarea:focus,
.igloo-room .contact-form .form-field.is-complete input,
.igloo-room .contact-form .form-field.is-complete textarea,
.igloo-room .contact-form .form-field input:hover,
.igloo-room .contact-form .form-field textarea:hover {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.igloo-room .contact-form .form-field input::placeholder,
.igloo-room .contact-form .form-field textarea::placeholder {
    color: transparent;
}

.igloo-room .contact-form :is(input, textarea)[aria-invalid="true"] {
    border: 0;
    box-shadow: none;
}

.igloo-room .contact-form .form-field:has([aria-invalid="true"]) {
    box-shadow:
        inset 0 4px 9px rgba(8, 28, 38, 0.62),
        inset 0 1px 0 rgba(6, 22, 30, 0.72),
        inset 0 -2px 0 rgba(233, 111, 97, 0.7),
        0 1px 0 rgba(240, 253, 255, 0.44),
        0 0 0 1px rgba(233, 111, 97, 0.44);
}

/* The send control reads as a brick pressed proud of the wall, the inverse of the slots. */
.igloo-room .contact-form__actions {
    display: block;
}

.igloo-room .contact-form .button {
    display: inline-flex;
    width: 100%;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-inline: 1.4rem;
    border: 0;
    border-radius: 13px;
    color: #07222c;
    background: linear-gradient(180deg, #f4fdff 0%, #d5f0f7 44%, #a9dced 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -3px 0 rgba(78, 138, 158, 0.44),
        0 8px 20px rgba(4, 18, 26, 0.42),
        0 0 26px rgba(169, 233, 248, 0.2);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 180ms ease, box-shadow 220ms ease, background 220ms ease;
}

.igloo-room .contact-form .button:hover,
.igloo-room .contact-form .button:focus-visible {
    color: #05191f;
    background: linear-gradient(180deg, #ffffff 0%, #e6f8fc 44%, #bfe9f6 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -3px 0 rgba(78, 138, 158, 0.4),
        0 10px 26px rgba(4, 18, 26, 0.46),
        0 0 34px rgba(169, 233, 248, 0.32);
    transform: translateY(-1px);
}

.igloo-room .contact-form .button:focus-visible {
    outline: 3px solid var(--ice);
    outline-offset: 3px;
}

.igloo-room .contact-methods a:focus-visible {
    outline: 2px solid var(--ice);
    outline-offset: 3px;
    border-radius: 5px;
}

.igloo-room .contact-form .button:active {
    box-shadow:
        inset 0 3px 7px rgba(28, 74, 90, 0.4),
        inset 0 1px 0 rgba(120, 172, 188, 0.5),
        0 3px 10px rgba(4, 18, 26, 0.34);
    transform: translateY(1px);
}

.igloo-room .contact-form .button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.igloo-room .form-status {
    display: flex;
    height: auto;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.9rem;
    border: 0;
    border-radius: 9px;
    color: rgba(238, 250, 253, 0.86);
    background: rgba(8, 30, 40, 0.52);
    box-shadow: inset 0 2px 5px rgba(6, 22, 30, 0.5), 0 1px 0 rgba(232, 251, 255, 0.28);
    font-size: 0.76rem;
    text-align: center;
}

.igloo-room .form-status[data-state="loading"] { color: #f7e8cb; }
.igloo-room .form-status[data-state="success"] { color: #dbf7ea; }
.igloo-room .form-status[data-state="error"] { color: #ffd9d4; }

/* Direct contact details sit in a shallow niche cut into the wall, which also guarantees
   the copy keeps its contrast wherever the ice happens to be lit behind it. */
.igloo-room .contact-methods {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 1.5rem;
    margin: 0;
    padding: clamp(0.58rem, 1.25svh, 0.88rem) clamp(0.9rem, 2vw, 1.4rem) clamp(0.45rem, 0.95svh, 0.7rem);
    border: 0;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(8, 30, 40, 0.72) 0%, rgba(14, 42, 54, 0.6) 100%);
    box-shadow:
        inset 0 5px 11px rgba(4, 19, 27, 0.66),
        inset 0 2px 0 rgba(4, 16, 23, 0.76),
        inset 0 -2px 0 rgba(228, 250, 255, 0.4),
        0 1px 0 rgba(240, 253, 255, 0.5);
}

.igloo-room .contact-methods__heading {
    grid-column: 1 / -1;
    margin: 0 0 0.35rem;
    color: rgba(224, 246, 252, 0.78);
    font: 600 0.62rem "IBM Plex Mono", monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 2px 10px rgba(4, 16, 23, 0.8);
}

.igloo-room .contact-methods a {
    display: grid;
    min-height: 44px;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 0.16rem;
    padding: 0.35rem 0;
    border: 0;
    color: #f4fbfd;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 2px 12px rgba(4, 16, 23, 0.85);
    transition: color 180ms ease;
}

.igloo-room .contact-methods span:first-child {
    color: var(--room-warm);
    font: 500 0.6rem "IBM Plex Mono", monospace;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.igloo-room .contact-methods span:last-child {
    font-size: 0.92rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.igloo-room .contact-methods a:hover,
.igloo-room .contact-methods a:focus-visible {
    color: var(--ice-bright);
    outline: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .studio-page--contact {
        --brick: clamp(96px, 30vw, 150px);
        --course-pitch: clamp(52px, 7svh, 68px);
        --course-height: clamp(58px, 7.9svh, 76px);
    }

    /* A tall, narrow frame stretches the shading ellipses far past the viewport, which
       drains the ice to near-black at the corners. Widen the falloff and ease the vignette
       so the walls stay lit the whole way down the scroll. */
    .igloo-room__wall {
        background:
            radial-gradient(184% 112% at 50% 4%,
                #eef9fb 0%,
                #cde5ec 16%,
                #a9cbd7 34%,
                #8fb3c1 54%,
                #7099a8 74%,
                #567f8d 90%,
                #446a77 100%);
    }

    .igloo-room__concave {
        background:
            radial-gradient(58% 22% at 50% 30%, rgba(5, 20, 28, 0.5) 0%, rgba(5, 20, 28, 0.3) 54%, transparent 84%),
            radial-gradient(150% 78% at 50% 28%, transparent 0 56%, rgba(9, 30, 40, 0.24) 84%, rgba(6, 20, 28, 0.4) 100%),
            linear-gradient(180deg, rgba(5, 17, 24, 0.3) 0%, transparent 16%, transparent 82%, rgba(5, 15, 22, 0.22) 100%);
    }

    .igloo-panel {
        width: min(100%, 560px);
    }
}

@media (max-width: 680px) {
    .igloo-room {
        padding-inline: 1.15rem;
    }

    .igloo-room .contact-form__fields {
        grid-template-columns: 1fr;
    }

    .igloo-panel__head h1 {
        font-size: clamp(2.3rem, 11vw, 3.1rem);
    }

    .igloo-room .contact-form .form-field textarea {
        height: clamp(150px, 26svh, 200px);
    }

    .igloo-room .contact-methods {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .igloo-room .contact-methods a + a {
        border-top: 1px solid rgba(206, 240, 248, 0.18);
    }
}

@media (max-width: 420px) {
    .studio-page--contact {
        --brick: clamp(62px, 17vw, 88px);
    }

    .igloo-room .contact-form .form-field input {
        height: 60px;
    }

    .igloo-room .contact-form .button {
        min-height: 56px;
        font-size: 0.92rem;
    }
}

/* Short landscape viewports: keep the whole form reachable without the dome crowding it. */
@media (max-height: 700px) and (min-width: 681px) {
    .igloo-room {
        align-content: start;
    }

    .igloo-panel {
        gap: 1.1rem;
    }

    .igloo-panel__head h1 {
        font-size: clamp(2rem, 3.4vw, 2.6rem);
    }

    .igloo-room .contact-form .form-field textarea {
        height: 120px;
    }
}

/* Contact interior v2: the WebGL layer is the exact final Home igloo seen from inside.
   These styles only compose the semantic form, its carved wall cuts, and the individual
   brick fallback used when WebGL is unavailable. */
.studio-page--contact {
    --contact-cut-shadow: rgba(7, 34, 42, 0.48);
    --contact-cut-side: rgba(8, 41, 50, 0.24);
    --contact-cut-lip: rgba(244, 255, 255, 0.72);
    --contact-cut-fill-top: rgba(25, 69, 78, 0.88);
    --contact-cut-fill-bottom: rgba(67, 111, 119, 0.84);
    background: #06101a;
}

.studio-page--contact main {
    display: grid;
    padding-top: 0;
}

.studio-page--contact .igloo-room {
    min-height: calc(100svh - var(--contact-footer-height));
    min-height: calc(100dvh - var(--contact-footer-height));
    align-content: center;
    padding: calc(var(--contact-header-height) + clamp(0.8rem, 2.6svh, 1.65rem)) var(--studio-pad) clamp(1.2rem, 3svh, 2rem);
    background: #06101a;
}

.studio-page--contact .igloo-room__shell {
    background:
        radial-gradient(90% 72% at 50% 16%, rgba(116, 184, 202, 0.2), transparent 62%),
        #06101a;
}

.studio-page--contact .igloo-room__shell::before,
.studio-page--contact .igloo-room__shell::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    pointer-events: none;
}

.studio-page--contact .igloo-room__shell::before {
    background:
        radial-gradient(ellipse at 50% 47%, transparent 0 36%, rgba(3, 13, 21, 0.12) 62%, rgba(2, 8, 14, 0.58) 100%),
        linear-gradient(180deg, rgba(2, 9, 16, 0.28) 0%, transparent 25%, transparent 68%, rgba(3, 12, 19, 0.32) 100%);
}

.studio-page--contact .igloo-room__shell::after {
    z-index: 3;
    background:
        radial-gradient(ellipse at 50% 105%, rgba(255, 203, 123, 0.13) 0%, rgba(222, 153, 73, 0.05) 28%, transparent 58%);
    mix-blend-mode: screen;
}

.igloo-room__canvas {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: none;
}

.contact-webgl-ready .igloo-room__canvas { opacity: 1; }
.contact-no-webgl .igloo-room__canvas,
.contact-webgl-recovering .igloo-room__canvas { visibility: hidden; }

/* The fallback is made from discrete rounded blocks, never full-width wallpaper bands. */
.igloo-room__wall {
    z-index: 0;
    display: grid;
    align-content: stretch;
    padding: clamp(1.15rem, 3vw, 2.6rem) 0;
    visibility: visible;
    opacity: 1;
    background:
        radial-gradient(110% 78% at 50% 8%, rgba(218, 245, 250, 0.34), transparent 54%),
        radial-gradient(96% 88% at 50% 44%, #4f7c89 0%, #274f5e 58%, #102d3a 100%);
    transition: none;
}

.js .igloo-room__wall {
    visibility: hidden;
    opacity: 0;
}

.js .contact-no-webgl .igloo-room__wall,
.no-js .igloo-room__wall {
    visibility: visible;
    opacity: 1;
}

.igloo-fallback-course {
    display: flex;
    width: 118%;
    min-width: 780px;
    justify-self: center;
    gap: clamp(5px, 0.55vw, 9px);
    transform: translateX(var(--fallback-stagger, 0));
}

.igloo-fallback-course:nth-child(1) { width: 72%; --fallback-stagger: -3%; }
.igloo-fallback-course:nth-child(2) { width: 84%; --fallback-stagger: 4%; }
.igloo-fallback-course:nth-child(3) { width: 98%; --fallback-stagger: -2%; }
.igloo-fallback-course:nth-child(4) { width: 110%; --fallback-stagger: 3%; }
.igloo-fallback-course:nth-child(5) { --fallback-stagger: -4%; }
.igloo-fallback-course:nth-child(6) { --fallback-stagger: 2%; }
.igloo-fallback-course:nth-child(7) { --fallback-stagger: -2%; }
.igloo-fallback-course:nth-child(8) { --fallback-stagger: 3%; }

.igloo-fallback-course i {
    display: block;
    min-width: 0;
    flex: 1 1 0;
    border-radius: clamp(6px, 0.65vw, 10px);
    background:
        radial-gradient(85% 110% at 24% 18%, rgba(248, 255, 255, 0.36), transparent 58%),
        radial-gradient(54% 84% at 76% 68%, rgba(180, 226, 235, 0.18), transparent 70%),
        radial-gradient(circle at 38% 63%, rgba(237, 253, 255, 0.1) 0 4%, transparent 4.8%),
        repeating-linear-gradient(118deg, rgba(246, 255, 255, 0.035) 0 1px, transparent 1px 8px),
        linear-gradient(145deg, #9ccbd1 0%, #588b99 48%, #2f6172 100%);
    box-shadow:
        inset 0 2px 0 rgba(247, 255, 255, 0.56),
        inset 0 -3px 5px rgba(34, 75, 87, 0.34),
        0 2px 5px rgba(10, 36, 45, 0.32);
}

.igloo-room__crown { z-index: 2; opacity: 0.48; }

.igloo-room__concave {
    z-index: 3;
    background:
        radial-gradient(68% 70% at 50% 47%, rgba(3, 16, 24, 0.36) 0%, rgba(3, 16, 24, 0.24) 52%, transparent 100%),
        radial-gradient(96% 78% at 50% 34%, transparent 0 42%, rgba(5, 23, 32, 0.34) 78%, rgba(3, 11, 17, 0.7) 100%),
        linear-gradient(180deg, rgba(3, 12, 18, 0.18) 0%, transparent 26%, transparent 67%, rgba(3, 11, 17, 0.42) 100%);
}

.igloo-room__spill {
    z-index: 4;
    opacity: 0.82;
    background:
        radial-gradient(52% 32% at 50% 100%, rgba(239, 185, 95, 0.15), transparent 70%),
        radial-gradient(34% 22% at 50% 100%, rgba(255, 226, 170, 0.1), transparent 74%);
}

.igloo-room__floor {
    z-index: 5;
    height: clamp(104px, 15svh, 154px);
    opacity: 0.92;
    background:
        radial-gradient(92% 126% at 50% 116%, rgba(248, 253, 253, 0.94) 0%, rgba(205, 227, 230, 0.86) 54%, rgba(125, 164, 174, 0.62) 100%),
        linear-gradient(180deg, rgba(188, 216, 222, 0.64), rgba(220, 236, 238, 0.92));
    box-shadow: 0 -18px 42px rgba(168, 214, 228, 0.14);
}

.igloo-panel {
    z-index: 6;
    isolation: isolate;
    width: min(100%, 560px);
    gap: clamp(0.8rem, 1.7svh, 1.15rem);
}

.igloo-panel::before {
    position: absolute;
    z-index: -1;
    inset: clamp(-1.2rem, -2.1vw, -1.65rem) clamp(-1.1rem, -2.4vw, -1.8rem);
    display: block;
    border: 1px solid rgba(205, 241, 248, 0.2);
    border-radius: 24px;
    content: "";
    background:
        linear-gradient(145deg, rgba(5, 24, 34, 0.7), rgba(8, 35, 45, 0.54));
    box-shadow:
        inset 0 1px 0 rgba(239, 253, 255, 0.12),
        0 28px 80px rgba(1, 8, 13, 0.34);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.igloo-panel__head { gap: clamp(0.4rem, 0.9svh, 0.62rem); }

.igloo-panel__head h1 {
    font-size: clamp(2.85rem, 4vw, 3.45rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    color: #f4fdff;
    text-shadow: 0 12px 34px rgba(1, 9, 14, 0.56);
}

.igloo-panel__lead {
    color: rgba(225, 246, 250, 0.82);
    font-size: clamp(0.92rem, 1.05vw, 1rem);
    font-weight: 500;
    line-height: 1.42;
    text-shadow: 0 2px 14px rgba(1, 9, 14, 0.54);
}

.igloo-room .contact-form {
    gap: clamp(0.62rem, 1.25svh, 0.82rem);
}

.igloo-room .contact-form__fields {
    grid-template-columns: 1fr;
    gap: clamp(0.62rem, 1.25svh, 0.82rem);
}

.igloo-room .contact-form .form-field:nth-child(3),
.igloo-room .contact-form .form-field--message { grid-column: 1 / -1; }

/* A shallow translucent cut: the wall remains visible, while the top/left edge falls into
   shadow and the bottom/right ice lip catches the same cold light as the real blocks. */
.igloo-room .contact-form .form-field {
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    transition: none;
}

.igloo-room .contact-form .form-field::before,
.igloo-room .contact-form .form-field::after {
    position: absolute;
    display: block;
    content: "";
    pointer-events: none;
}

.igloo-room .contact-form .form-field::before {
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--contact-cut-fill-top), var(--contact-cut-fill-bottom));
    box-shadow:
        inset 0 8px 13px var(--contact-cut-shadow),
        inset 4px 0 7px var(--contact-cut-side),
        inset -2px 0 2px rgba(232, 253, 255, 0.34),
        inset 0 -2px 2px var(--contact-cut-lip);
    transition: background 180ms ease, box-shadow 180ms ease;
}

.igloo-room .contact-form .form-field::after {
    z-index: 1;
    inset: 1px;
    border: 1px solid transparent;
    border-top-color: rgba(2, 16, 24, 0.58);
    border-left-color: rgba(2, 16, 24, 0.32);
    border-right-color: rgba(232, 251, 255, 0.16);
    border-bottom-color: rgba(240, 254, 255, 0.34);
    border-radius: 11px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.igloo-room .contact-form .form-field__icon {
    z-index: 3;
    top: 1.2rem;
    left: 0.95rem;
    width: 19px;
    height: 19px;
    stroke: rgba(220, 245, 249, 0.68);
    stroke-width: 1.45;
}

.igloo-room .contact-form .form-field label {
    z-index: 3;
    top: 1.25rem;
    left: 2.68rem;
    color: rgba(231, 248, 251, 0.78);
    font-size: 0.9rem;
    text-shadow: 0 1px 8px rgba(2, 15, 22, 0.42);
}

.igloo-room .contact-form .form-field input,
.igloo-room .contact-form .form-field textarea {
    position: relative;
    z-index: 2;
    height: 58px;
    padding: 1.55rem 0.95rem 0.35rem 2.68rem;
    border: 0;
    border-radius: 12px;
    color: #f8feff;
    background: transparent;
    box-shadow: none;
    font-size: 0.94rem;
}

.igloo-room .contact-form .form-field textarea {
    height: clamp(130px, 15.5svh, 146px);
    padding-top: 2.18rem;
    line-height: 1.46;
}

.igloo-room .contact-form .form-field--message .form-field__icon,
.igloo-room .contact-form .form-field--message label { top: 1.18rem; }

.igloo-room .contact-form .form-field input:focus + label,
.igloo-room .contact-form .form-field input:not(:placeholder-shown) + label,
.igloo-room .contact-form .form-field textarea:focus + label,
.igloo-room .contact-form .form-field textarea:not(:placeholder-shown) + label,
.igloo-room .contact-form .form-field.is-complete label {
    top: 0.48rem;
    color: rgba(220, 245, 250, 0.76);
    font-size: 0.68rem;
    letter-spacing: 0.045em;
}

.igloo-room .contact-form .form-field:focus-within { background: transparent; box-shadow: none; }

.igloo-room .contact-form .form-field:focus-within::before {
    background: linear-gradient(180deg, rgba(22, 67, 78, 0.9), rgba(73, 124, 133, 0.84));
    box-shadow:
        inset 0 7px 11px rgba(2, 16, 24, 0.48),
        inset 3px 0 5px rgba(2, 16, 24, 0.22),
        inset -1px 0 0 rgba(227, 250, 254, 0.38),
        inset 0 -1px 0 rgba(240, 254, 255, 0.7);
}

.igloo-room .contact-form .form-field:focus-within::after {
    border-color: rgba(159, 229, 244, 0.72);
    box-shadow: inset 0 0 0 1px rgba(159, 229, 244, 0.18);
}

.igloo-room .contact-form .form-field:focus-within .form-field__icon { stroke: #c9f4fb; }

.igloo-room .contact-form .form-field:has([aria-invalid="true"]) { box-shadow: none; }
.igloo-room .contact-form .form-field:has([aria-invalid="true"])::after {
    border-color: rgba(244, 136, 122, 0.78);
    box-shadow: inset 0 0 0 1px rgba(244, 136, 122, 0.18);
}

.igloo-room .contact-form__actions { display: block; }

/* The inverse of the wall cuts: one slightly proud keycap made from the Home ice palette. */
.igloo-room .contact-form .button {
    position: relative;
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 12px;
    color: #0a2a34;
    background:
        radial-gradient(90% 120% at 24% 12%, rgba(255, 255, 255, 0.5), transparent 56%),
        linear-gradient(150deg, #d9eef2 0%, #9ccbd1 48%, #78aab5 100%);
    box-shadow:
        inset 0 2px 0 rgba(248, 255, 255, 0.74),
        inset 0 -3px 0 rgba(55, 105, 119, 0.48),
        0 3px 0 rgba(28, 72, 84, 0.7),
        0 7px 16px rgba(3, 16, 23, 0.26);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    transition: background 180ms ease, box-shadow 180ms ease, transform 150ms ease;
}

.igloo-room .contact-form .button:hover,
.igloo-room .contact-form .button:focus-visible {
    color: #061e27;
    background:
        radial-gradient(90% 120% at 24% 12%, rgba(255, 255, 255, 0.68), transparent 58%),
        linear-gradient(150deg, #e7f7fa 0%, #b2d9df 48%, #89bbc5 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.84),
        inset 0 -3px 0 rgba(55, 105, 119, 0.44),
        0 3px 0 rgba(28, 72, 84, 0.68),
        0 8px 18px rgba(3, 16, 23, 0.3);
    transform: none;
}

.igloo-room .contact-form .button:focus-visible {
    outline: 2px solid #dffaff;
    outline-offset: 3px;
}

.igloo-room .contact-form .button:active {
    box-shadow: inset 0 3px 6px rgba(28, 74, 90, 0.34), inset 0 1px 0 rgba(224, 249, 253, 0.5), 0 1px 0 rgba(28, 72, 84, 0.68);
    transform: translateY(2px);
}

.igloo-room .contact-methods {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    margin: 0;
    padding: clamp(0.5rem, 1svh, 0.68rem) 0 0;
    border: 0;
    border-top: 1px solid rgba(200, 238, 245, 0.18);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.igloo-room .contact-methods__heading {
    grid-column: 1 / -1;
    margin: 0 0 0.25rem;
    color: rgba(202, 237, 243, 0.52);
    font-size: 0.56rem;
    letter-spacing: 0.13em;
}

.igloo-room .contact-methods a {
    min-height: 40px;
    gap: 0.08rem;
    padding: 0.25rem 0;
    color: rgba(231, 248, 251, 0.88);
    text-shadow: 0 2px 10px rgba(1, 9, 14, 0.48);
}

.igloo-room .contact-methods span:first-child {
    color: rgba(244, 188, 101, 0.86);
    font-size: 0.54rem;
}
.igloo-room .contact-methods span:last-child { font-size: 0.82rem; }

.igloo-room .form-status {
    min-height: 32px;
    padding: 0.4rem 0.75rem;
    border-radius: 7px;
    background: rgba(7, 29, 39, 0.42);
    box-shadow: inset 0 4px 8px rgba(2, 15, 22, 0.34), inset 0 -1px 0 rgba(228, 250, 254, 0.28);
}

@media (max-width: 680px) {
    .studio-page--contact .igloo-room {
        align-content: start;
        padding: calc(var(--contact-header-height) + 0.85rem) 1.1rem 1.4rem;
    }

    .igloo-panel {
        width: min(100%, 420px);
        gap: 0.8rem;
    }

    .igloo-panel::before { inset: -0.75rem -0.7rem; border-radius: 18px; }
    .igloo-panel__head { gap: 0.35rem; }
    .igloo-panel__head h1 { font-size: clamp(2.55rem, 11.5vw, 2.85rem); }
    .igloo-panel__lead { font-size: 0.9rem; }

    .igloo-room .contact-form,
    .igloo-room .contact-form__fields { gap: 0.62rem; }

    .igloo-room .contact-form__fields { grid-template-columns: 1fr; }
    .igloo-room .contact-form .form-field input { height: 58px; }
    .igloo-room .contact-form .form-field textarea { height: 150px; }
    .igloo-room .contact-form .button { min-height: 56px; }
    .igloo-room .contact-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .igloo-room .contact-methods a + a { border-top: 0; }
    .igloo-room__floor { height: 112px; }
}

@media (max-width: 360px) {
    .studio-page--contact .igloo-room { padding-inline: 0.9rem; }
    .igloo-room .contact-methods span:last-child { font-size: 0.76rem; }
}

@media (max-height: 760px) and (min-width: 681px) {
    .studio-page--contact .igloo-room {
        align-content: start;
        padding-top: calc(var(--contact-header-height) + 0.65rem);
    }

    .igloo-panel { gap: 0.7rem; }
    .igloo-panel__head { gap: 0.28rem; }
    .igloo-panel__head h1 { font-size: clamp(2.35rem, 3.4vw, 2.85rem); }
    .igloo-room .contact-form .form-field textarea { height: 112px; }
    .igloo-room .contact-methods { padding-top: 0.38rem; }
}

.contact-arrival-light {
    position: fixed;
    inset: 0;
    z-index: 120;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at var(--arrival-entry-x, 67%) var(--arrival-entry-y, 48%),
            rgba(255, 255, 255, 0.94) 0 7%,
            rgba(229, 252, 255, 0.78) 17%,
            rgba(125, 218, 233, 0.4) 33%,
            rgba(10, 42, 55, 0.66) 58%,
            rgba(2, 10, 17, 0.88) 100%);
    backdrop-filter: blur(1px) brightness(0.9) saturate(0.9);
    -webkit-backdrop-filter: blur(1px) brightness(0.9) saturate(0.9);
}

.contact-arrival-light::before {
    content: none;
}

.contact-arrival-light::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.3;
    background:
        repeating-radial-gradient(ellipse at var(--arrival-entry-x, 67%) var(--arrival-entry-y, 48%),
            transparent 0 5.7%,
            rgba(193, 242, 248, 0.2) 6.1%,
            rgba(119, 210, 225, 0.055) 6.45%,
            transparent 6.9% 11.2%),
        repeating-conic-gradient(from -7deg at var(--arrival-entry-x, 67%) var(--arrival-entry-y, 48%),
            transparent 0 14deg,
            rgba(191, 242, 249, 0.09) 14.4deg,
            transparent 15deg 29deg);
    transform: scale(0.44);
    transform-origin: var(--arrival-entry-x, 67%) var(--arrival-entry-y, 48%);
    -webkit-mask-image: radial-gradient(ellipse at var(--arrival-entry-x, 67%) var(--arrival-entry-y, 48%),
        transparent 0 8%, #000 17%, transparent 76%);
    mask-image: radial-gradient(ellipse at var(--arrival-entry-x, 67%) var(--arrival-entry-y, 48%),
        transparent 0 8%, #000 17%, transparent 76%);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

html.contact-arrival-pending .contact-arrival-light {
    visibility: visible;
    opacity: 1;
}

body.contact-arriving .contact-arrival-light {
    visibility: visible;
    animation: contact-arrival-fade 380ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
}

body.contact-arriving .contact-arrival-light::after {
    animation: contact-arrival-pull 320ms cubic-bezier(0.48, 0.02, 0.82, 0.38) both;
}

html.contact-arrival-pending .studio-page--contact [data-reveal],
body.contact-arriving [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

body.studio-motion.studio-page--contact .contact-card[data-reveal],
body.studio-motion.studio-page--contact .contact-card[data-reveal].is-visible {
    transform: none;
    transition: opacity 420ms ease;
}

@keyframes contact-arrival-fade {
    0% { visibility: visible; opacity: 1; }
    20% { opacity: 0.94; }
    100% { visibility: hidden; opacity: 0; }
}

@keyframes contact-arrival-pull {
    0% { opacity: 0.42; transform: scale(0.3); }
    42% { opacity: 0.28; }
    100% { opacity: 0; transform: scale(0.08); }
}

@media (prefers-reduced-motion: reduce) {
    .studio-motion [data-reveal] { opacity: 1; transform: none; }
    .studio-motion .contact-threshold__shell, .studio-motion .contact-threshold__beam { animation: none; }
    .contact-methods a, .contact-form .form-field label, .contact-form .form-field input, .contact-form .form-field select, .contact-form .form-field textarea, .contact-form__arrow { transition: none; }
    .igloo-room .contact-form .form-field, .igloo-room .contact-form .form-field label, .igloo-room .contact-form .form-field__icon, .igloo-room .contact-form .button { transition: none; }
    .mobile-call-button { transition: none; }
    .studio-motion .about-name__stage.is-visible .about-name__shift-s { animation: none; }
    body.contact-arriving .contact-arrival-light,
    body.contact-arriving .contact-arrival-light::before,
    body.contact-arriving .contact-arrival-light::after { display: none; }
}

/* Contact studio v3: an editorial project brief over the existing igloo interior. */
.studio-page--contact {
    --contact-ink: #f4fbfd;
    --contact-muted: rgba(211, 232, 237, 0.7);
    --contact-line: rgba(192, 229, 237, 0.16);
    --contact-accent: #86efff;
    --contact-accent-strong: #49d8ed;
    --contact-surface: rgba(7, 23, 33, 0.9);
    --contact-surface-deep: rgba(3, 14, 22, 0.94);
    background: #040d14;
}

.studio-page--contact .brand-nav {
    border-bottom-color: rgba(196, 231, 238, 0.11);
    background: rgba(5, 15, 23, 0.78);
    box-shadow: 0 18px 44px rgba(1, 8, 13, 0.14);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.studio-page--contact .igloo-room {
    align-content: center;
    justify-items: stretch;
    padding: calc(var(--contact-header-height) + clamp(2.6rem, 6svh, 5rem)) var(--studio-pad) clamp(3rem, 7svh, 5.5rem);
    background:
        radial-gradient(circle at 78% 29%, rgba(132, 229, 241, 0.18), transparent 31%),
        radial-gradient(circle at 49% -12%, rgba(178, 243, 250, 0.14), transparent 36%),
        radial-gradient(circle at 17% 81%, rgba(55, 126, 145, 0.2), transparent 39%),
        #040d14;
}

.studio-page--contact .igloo-room::before {
    content: none;
}

.studio-page--contact .igloo-room::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 35%, rgba(188, 244, 250, 0.09), transparent 30%),
        radial-gradient(ellipse 46% 60% at 78% 47%, rgba(89, 211, 229, 0.07), transparent 67%),
        linear-gradient(90deg, rgba(3, 11, 18, 0.48) 0%, rgba(3, 12, 19, 0.29) 43%, rgba(3, 12, 19, 0.15) 100%),
        linear-gradient(180deg, rgba(2, 9, 15, 0.16), transparent 32%, rgba(2, 9, 15, 0.36));
}

.studio-page--contact .igloo-room__shell {
    opacity: 0.98;
    filter: saturate(1.08) contrast(1.08) brightness(1.14);
}

.studio-page--contact .igloo-panel {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(100%, 1280px);
    margin: 0 auto;
    grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
    gap: clamp(3.5rem, 7.5vw, 7.5rem);
    align-items: center;
}

.studio-page--contact .igloo-panel::before { content: none; }

.studio-page--contact .igloo-panel > .contact-overview {
    grid-column: 1;
    grid-row: 1;
}

.studio-page--contact .igloo-panel > .contact-card {
    grid-column: 2;
    grid-row: 1;
}

.studio-page--contact .contact-overview {
    display: grid;
    gap: clamp(2.1rem, 4.2svh, 3.2rem);
    min-width: 0;
}

.studio-page--contact .igloo-panel__head {
    display: grid;
    width: fit-content;
    max-width: 100%;
    gap: 1rem;
    text-align: left;
}

.studio-page--contact .contact-eyebrow {
    display: flex;
    gap: 0.68rem;
    align-items: center;
    margin: 0;
    color: rgba(160, 233, 244, 0.82);
    font: 600 0.68rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.studio-page--contact .contact-eyebrow > span {
    width: 1.8rem;
    height: 1px;
    background: currentColor;
    box-shadow: 0 0 12px rgba(134, 239, 255, 0.45);
}

.studio-page--contact .igloo-panel__head h1 {
    max-width: none;
    margin: 0;
    color: var(--contact-ink);
    text-align: left;
    text-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

.studio-page--contact .contact-title {
    --contact-title-s-travel: 0.38em;
    display: grid;
    width: fit-content;
    font-family: "Space Grotesk", "Inter Tight", sans-serif;
}

.studio-page--contact .contact-title__lead {
    display: block;
    margin: 0 0 clamp(0.75rem, 1.5svh, 1rem) 0.08em;
    color: rgba(215, 245, 250, 0.76);
    font: 600 clamp(0.72rem, 0.9vw, 0.86rem)/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(134, 239, 255, 0.14);
}

.studio-page--contact .contact-title__brand {
    display: grid;
    gap: 0.18em;
    color: var(--contact-ink);
    font-size: clamp(4.1rem, 6.35vw, 6.15rem);
    font-weight: 600;
    line-height: 0.78;
    letter-spacing: -0.075em;
    text-transform: uppercase;
    white-space: nowrap;
}

.studio-page--contact .contact-title__switch {
    display: flex;
    width: max-content;
    align-items: baseline;
}

.studio-page--contact .contact-title__s-rail {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    line-height: inherit;
}

.studio-page--contact .contact-title__s-rail::after {
    display: block;
    padding-right: var(--contact-title-s-travel);
    visibility: hidden;
    content: "S";
}

.studio-page--contact .contact-title__s {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    color: var(--contact-ink);
    line-height: inherit;
    text-shadow: none;
    transform: translate3d(0, 0, 0);
    will-change: transform, color;
    animation:
        contact-title-s-shift 6.4s cubic-bezier(0.65, 0, 0.35, 1) infinite,
        contact-title-snow-color 6.4s linear infinite;
}

.studio-page--contact .contact-title__now {
    animation: contact-title-snow-color 6.4s linear infinite;
}

@keyframes contact-title-s-shift {
    0%, 34% { transform: translate3d(0, 0, 0); }
    44% { transform: translate3d(calc(var(--contact-title-s-travel) * 1.06), 0, 0); }
    48%, 82% { transform: translate3d(var(--contact-title-s-travel), 0, 0); }
    92% { transform: translate3d(calc(var(--contact-title-s-travel) * -0.06), 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes contact-title-snow-color {
    0%, 38%, 96%, 100% { color: var(--contact-ink); text-shadow: none; }
    48%, 82% {
        color: var(--contact-accent);
        text-shadow: 0 0 18px rgba(134, 239, 255, 0.28);
    }
}

.studio-page--contact .contact-title__message {
    display: grid;
    width: 100%;
    min-height: 1.6em;
    max-width: none;
    margin: 0;
    color: rgba(216, 237, 242, 0.64);
    font: 500 clamp(0.74rem, 0.86vw, 0.84rem)/1.55 "IBM Plex Mono", monospace;
    letter-spacing: 0.015em;
    text-align: right;
    text-transform: none;
}

.studio-page--contact .contact-title__message > span {
    grid-area: 1 / 1;
    justify-self: end;
    max-width: 100%;
    white-space: nowrap;
}

.studio-page--contact .contact-title__message-snow {
    color: rgba(134, 239, 255, 0.78);
    opacity: 0;
    animation: contact-title-message-snow 6.4s ease infinite;
}

@keyframes contact-title-message-snow {
    0%, 40%, 90%, 100% { opacity: 0; transform: translateY(0.25rem); }
    48%, 82% { opacity: 1; transform: translateY(0); }
}

.studio-page--contact .igloo-panel__lead {
    max-width: 35rem;
    margin: 0;
    color: var(--contact-muted);
    font-size: clamp(0.98rem, 1.25vw, 1.12rem);
    line-height: 1.65;
    text-align: left;
    text-shadow: none;
}

.studio-page--contact .contact-process {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--contact-line);
}

.studio-page--contact .contact-process li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--contact-line);
}

.studio-page--contact .contact-process li > span {
    padding-top: 0.14rem;
    color: rgba(134, 239, 255, 0.64);
    font: 500 0.62rem/1.3 "IBM Plex Mono", monospace;
    letter-spacing: 0.12em;
}

.studio-page--contact .contact-process strong {
    display: block;
    color: rgba(244, 251, 253, 0.94);
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.25;
}

.studio-page--contact .contact-process p {
    margin: 0.28rem 0 0;
    color: rgba(201, 225, 231, 0.57);
    font-size: 0.78rem;
    line-height: 1.45;
}

.studio-page--contact .contact-methods {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.studio-page--contact .contact-methods__heading {
    grid-column: 1 / -1;
    margin: 0 0 0.05rem;
    color: rgba(211, 232, 237, 0.48);
    font: 500 0.62rem/1.3 "IBM Plex Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.studio-page--contact .contact-methods a {
    display: grid;
    min-width: 0;
    min-height: 0;
    gap: 0.32rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(192, 229, 237, 0.1);
    border-radius: 12px;
    color: rgba(235, 248, 251, 0.92);
    background: rgba(190, 232, 239, 0.026);
    text-decoration: none;
    text-shadow: none;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

.studio-page--contact .contact-methods a:hover,
.studio-page--contact .contact-methods a:focus-visible {
    border-color: rgba(134, 239, 255, 0.3);
    background: rgba(134, 239, 255, 0.055);
    transform: translateY(-1px);
}

.studio-page--contact .contact-methods a:focus-visible {
    outline: 2px solid var(--contact-accent);
    outline-offset: 3px;
}

.studio-page--contact .contact-methods span:first-child {
    color: rgba(134, 239, 255, 0.7);
    font: 600 0.58rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.studio-page--contact .contact-methods span:last-child {
    min-width: 0;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-page--contact .contact-card {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: clamp(1.15rem, 2.1svh, 1.5rem);
    min-width: 0;
    padding: clamp(1.5rem, 3vw, 2.35rem);
    overflow: hidden;
    border: 1px solid rgba(202, 238, 245, 0.22);
    border-radius: 25px;
    background:
        radial-gradient(circle at 12% 0, rgba(112, 226, 242, 0.1), transparent 31%),
        linear-gradient(148deg, rgba(19, 44, 55, 0.9), var(--contact-surface) 46%, var(--contact-surface-deep));
    box-shadow:
        0 38px 96px rgba(0, 5, 10, 0.46),
        0 0 70px rgba(58, 200, 220, 0.075),
        inset 0 1px 0 rgba(229, 250, 253, 0.15),
        inset 0 0 0 1px rgba(95, 190, 205, 0.035);
    backdrop-filter: blur(28px) saturate(116%);
    -webkit-backdrop-filter: blur(28px) saturate(116%);
}

.studio-page--contact .contact-card::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(120deg, transparent 38%, rgba(255, 255, 255, 0.025) 52%, transparent 65%),
        linear-gradient(rgba(154, 227, 239, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 227, 239, 0.025) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.studio-page--contact .contact-card::after {
    position: absolute;
    z-index: 0;
    top: -1px;
    left: 12%;
    width: 76%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(149, 239, 252, 0.78), transparent);
    box-shadow: 0 0 24px rgba(96, 225, 244, 0.42);
}

.studio-page--contact .contact-card > * {
    position: relative;
    z-index: 1;
}

.studio-page--contact .contact-flow {
    --contact-flow-scale: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-page--contact .contact-flow[data-stage="goal"] { --contact-flow-scale: 0.5; }
.studio-page--contact .contact-flow[data-stage="send"] { --contact-flow-scale: 1; }

.studio-page--contact .contact-flow::before,
.studio-page--contact .contact-flow::after {
    position: absolute;
    z-index: 0;
    top: 0.47rem;
    right: 0.55rem;
    left: 0.55rem;
    height: 1px;
    content: "";
    pointer-events: none;
}

.studio-page--contact .contact-flow::before { background: rgba(177, 222, 231, 0.15); }

.studio-page--contact .contact-flow::after {
    background: linear-gradient(90deg, rgba(134, 239, 255, 0.72), rgba(81, 207, 227, 0.42));
    box-shadow: 0 0 12px rgba(86, 218, 237, 0.32);
    transform: scaleX(var(--contact-flow-scale));
    transform-origin: left center;
    transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.studio-page--contact .contact-flow li {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.45rem;
    justify-items: start;
    color: rgba(203, 229, 235, 0.42);
    transition: color 220ms ease;
}

.studio-page--contact .contact-flow li:nth-child(2) { justify-items: center; text-align: center; }
.studio-page--contact .contact-flow li:nth-child(3) { justify-items: end; text-align: right; }

.studio-page--contact .contact-flow li > span {
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    border: 1px solid rgba(174, 220, 229, 0.22);
    border-radius: 50%;
    color: transparent;
    background: #0a1d26;
    box-shadow: 0 0 0 4px rgba(10, 29, 38, 0.9);
    font-size: 0;
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.studio-page--contact .contact-flow li > span::after {
    width: 0.26rem;
    height: 0.26rem;
    border-radius: 50%;
    content: "";
    background: rgba(193, 229, 236, 0.26);
    transition: background 220ms ease, box-shadow 220ms ease;
}

.studio-page--contact .contact-flow strong {
    font: 600 0.58rem/1.2 "IBM Plex Mono", monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-page--contact .contact-flow[data-stage="details"] li:first-child,
.studio-page--contact .contact-flow[data-stage="goal"] li:nth-child(-n + 2),
.studio-page--contact .contact-flow[data-stage="send"] li { color: rgba(226, 247, 251, 0.82); }

.studio-page--contact .contact-flow[data-stage="details"] li:first-child > span,
.studio-page--contact .contact-flow[data-stage="goal"] li:nth-child(-n + 2) > span,
.studio-page--contact .contact-flow[data-stage="send"] li > span {
    border-color: rgba(134, 239, 255, 0.62);
    background: #0b2a35;
}

.studio-page--contact .contact-flow[data-stage="details"] li:first-child > span::after,
.studio-page--contact .contact-flow[data-stage="goal"] li:nth-child(-n + 2) > span::after,
.studio-page--contact .contact-flow[data-stage="send"] li > span::after {
    background: var(--contact-accent);
    box-shadow: 0 0 9px rgba(134, 239, 255, 0.65);
}

.studio-page--contact .contact-flow li[aria-current="step"] strong { color: var(--contact-accent); }

.studio-page--contact .contact-card__head {
    display: flex;
    gap: 1rem;
    align-items: end;
    justify-content: space-between;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(196, 232, 239, 0.13);
}

.studio-page--contact .contact-card__head > div {
    display: flex;
    gap: 0.72rem;
    align-items: baseline;
}

.studio-page--contact .contact-card__head span {
    color: var(--contact-accent);
    font: 500 0.58rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.12em;
}

.studio-page--contact .contact-card__head h2 {
    margin: 0;
    color: var(--contact-ink);
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    font-weight: 650;
    letter-spacing: -0.035em;
}

.studio-page--contact .contact-card__head > p {
    margin: 0 0 0.18rem;
    color: rgba(211, 232, 237, 0.46);
    font: 500 0.57rem/1.2 "IBM Plex Mono", monospace;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.studio-page--contact .contact-form {
    display: grid;
    gap: 0.85rem;
    width: 100%;
    max-width: none;
}

.studio-page--contact .contact-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.studio-page--contact .igloo-room .contact-form__fields > .form-field { grid-column: auto; }

.studio-page--contact .contact-form .form-field {
    min-width: 0;
    min-height: 66px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.studio-page--contact .contact-form .form-field::before {
    inset: 0;
    border-radius: inherit;
    background: rgba(2, 13, 21, 0.56);
    box-shadow:
        inset 0 1px 0 rgba(225, 248, 252, 0.05),
        0 0 0 1px rgba(196, 232, 239, 0.12);
    transform: none;
    transition: background 200ms ease, box-shadow 200ms ease;
}

.studio-page--contact .contact-form .form-field::after {
    inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.studio-page--contact .contact-form .form-field__icon {
    top: 1.32rem;
    left: 1rem;
    width: 17px;
    height: 17px;
    stroke: rgba(170, 213, 222, 0.62);
    transition: stroke 200ms ease;
}

.studio-page--contact .contact-form .form-field__icon--url {
    top: 1.45rem;
    width: 1.15rem;
    height: auto;
    color: rgba(170, 213, 222, 0.62);
    font: 600 0.48rem/1 "IBM Plex Mono", monospace;
    letter-spacing: -0.06em;
    text-align: center;
    transition: color 200ms ease;
}

.studio-page--contact .contact-form .form-field--website:focus-within .form-field__icon--url,
.studio-page--contact .contact-form .form-field--website.is-complete .form-field__icon--url {
    color: var(--contact-accent);
}

.studio-page--contact .contact-form .form-field label {
    top: 1.36rem;
    left: 2.72rem;
    color: rgba(218, 238, 242, 0.7);
    font-size: 0.83rem;
    letter-spacing: 0;
}

.studio-page--contact .contact-form .form-field label [data-message-label] {
    margin-left: 0;
    color: inherit;
    font: inherit;
}

.studio-page--contact .contact-form .form-field input,
.studio-page--contact .contact-form .form-field select,
.studio-page--contact .contact-form .form-field textarea {
    height: 66px;
    padding: 1.68rem 0.95rem 0.38rem 2.72rem;
    border: 0;
    border-radius: 12px;
    color: #f7fdff;
    background: transparent;
    box-shadow: none;
    caret-color: var(--contact-accent);
    font-size: 0.93rem;
}

.studio-page--contact .contact-form .form-field select {
    padding-right: 2.65rem;
    appearance: none;
    color-scheme: dark;
    cursor: pointer;
}

.studio-page--contact .contact-form .form-field select option {
    color: #edfafd;
    background: #0a1b24;
}

.studio-page--contact .contact-form .form-field--select label {
    top: 0.5rem;
    max-width: calc(100% - 5.1rem);
    overflow: hidden;
    color: rgba(180, 222, 230, 0.68);
    font-size: 0.61rem;
    letter-spacing: 0.045em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-page--contact .contact-form .form-field__chevron {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 1rem;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: rgba(177, 222, 231, 0.62);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transform: translateY(-50%);
    transition: stroke 180ms ease, transform 180ms ease;
}

.studio-page--contact .contact-form .form-field--select:focus-within .form-field__chevron {
    stroke: var(--contact-accent);
    transform: translateY(-50%) rotate(180deg);
}

.studio-page--contact .contact-form .form-field textarea {
    height: clamp(152px, 18svh, 182px);
    padding-top: 2.25rem;
    line-height: 1.5;
}

.studio-page--contact .igloo-room .contact-form__fields > .form-field--message {
    grid-column: 1 / -1;
}

.studio-page--contact .contact-question,
.studio-page--contact .contact-website {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    animation: contact-question-enter 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.studio-page--contact .contact-website[hidden],
.studio-page--contact .contact-question[hidden],
.studio-page--contact .contact-answer[hidden] { display: none; }

@keyframes contact-question-enter {
    from { opacity: 0; transform: translate3d(0, -5px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.studio-page--contact .contact-answer {
    position: relative;
    display: grid;
    width: calc(100% - 2.4rem);
    min-width: 0;
    grid-template-rows: auto 1fr auto;
    gap: 0.9rem;
    justify-self: end;
    margin-top: 0.25rem;
    padding: clamp(1.2rem, 2.2vw, 1.6rem);
    border: 1px solid rgba(134, 239, 255, 0.22);
    border-radius: 20px 6px 20px 20px;
    background:
        radial-gradient(circle at 92% 0, rgba(134, 239, 255, 0.13), transparent 42%),
        linear-gradient(145deg, rgba(12, 35, 45, 0.94), rgba(2, 14, 22, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(225, 250, 253, 0.09),
        0 16px 34px rgba(0, 7, 12, 0.24),
        0 0 28px rgba(61, 207, 228, 0.07);
    backdrop-filter: blur(20px) saturate(112%);
    -webkit-backdrop-filter: blur(20px) saturate(112%);
    animation: contact-answer-enter 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.studio-page--contact .contact-answer::before {
    position: absolute;
    top: -11px;
    right: 0.7rem;
    width: 24px;
    height: 18px;
    content: "";
    background: linear-gradient(145deg, rgba(15, 42, 52, 0.98), rgba(9, 29, 38, 0.98));
    clip-path: polygon(100% 0, 4% 100%, 100% 100%);
    filter: drop-shadow(1px -1px 0 rgba(134, 239, 255, 0.2));
}

.studio-page--contact .contact-answer::after {
    position: absolute;
    top: 0;
    right: 1rem;
    left: 1rem;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--contact-accent), transparent);
    box-shadow: 0 0 12px rgba(134, 239, 255, 0.45);
}

.studio-page--contact .contact-answer__head {
    display: grid;
    gap: 0.65rem;
}

.studio-page--contact .contact-answer__signal {
    width: fit-content;
    padding: 0.3rem 0.42rem;
    border: 1px solid rgba(134, 239, 255, 0.22);
    border-radius: 5px;
    color: rgba(134, 239, 255, 0.82);
    background: rgba(134, 239, 255, 0.06);
    font: 600 0.58rem/1 "IBM Plex Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.studio-page--contact .contact-answer strong {
    display: block;
    color: rgba(244, 252, 254, 0.94);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.studio-page--contact .contact-answer p {
    margin: 0;
    max-width: 43ch;
    color: rgba(214, 236, 241, 0.76);
    font-size: clamp(0.9rem, 1.15vw, 1rem);
    line-height: 1.58;
}

.studio-page--contact .contact-answer__footer {
    display: grid;
    gap: 0.55rem;
    justify-items: start;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(196, 232, 239, 0.11);
}

.studio-page--contact .contact-answer__footer > span {
    max-width: none;
    color: rgba(196, 224, 230, 0.48);
    font: 500 0.7rem/1.45 "IBM Plex Mono", monospace;
}

.studio-page--contact .contact-answer a {
    display: inline-flex;
    gap: 0.3rem;
    color: rgba(134, 239, 255, 0.82);
    font: 600 0.68rem/1.2 "IBM Plex Mono", monospace;
    text-decoration: none;
}

.studio-page--contact .contact-answer a[hidden] { display: none; }

.studio-page--contact .contact-answer a:hover,
.studio-page--contact .contact-answer a:focus-visible { color: #d7faff; }

@keyframes contact-answer-enter {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.studio-page--contact .contact-form__guidance {
    grid-column: 1 / -1;
    margin: -0.3rem 0 0;
    padding-inline: 0.15rem;
    color: rgba(198, 226, 232, 0.48);
    font-size: 0.67rem;
    line-height: 1.35;
}

.studio-page--contact .contact-form__reassurance {
    margin: -0.2rem 0 0;
    color: rgba(196, 224, 230, 0.48);
    font-size: 0.67rem;
    line-height: 1.4;
    text-align: center;
}

.studio-page--contact .contact-form .form-field--message .form-field__icon,
.studio-page--contact .contact-form .form-field--message label { top: 1.18rem; }

.studio-page--contact .contact-form .form-field input:focus + label,
.studio-page--contact .contact-form .form-field input:not(:placeholder-shown) + label,
.studio-page--contact .contact-form .form-field textarea:focus + label,
.studio-page--contact .contact-form .form-field textarea:not(:placeholder-shown) + label,
.studio-page--contact .contact-form .form-field.is-complete label {
    top: 0.5rem;
    color: rgba(180, 222, 230, 0.68);
    font-size: 0.61rem;
    letter-spacing: 0.045em;
}

@media (hover: hover) {
    .studio-page--contact .contact-form .form-field:hover::before {
        background: rgba(3, 17, 26, 0.64);
        box-shadow:
            inset 0 1px 0 rgba(225, 248, 252, 0.065),
            0 0 0 1px rgba(180, 226, 235, 0.2);
    }

    .studio-page--contact .contact-form .form-field:hover::after {
        border-color: rgba(154, 226, 239, 0.18);
    }

    .studio-page--contact .contact-form .form-field:hover .form-field__icon {
        stroke: rgba(191, 235, 243, 0.82);
    }
}

.studio-page--contact .contact-form .form-field:focus-within::before {
    background: rgba(3, 18, 27, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(225, 248, 252, 0.06),
        0 0 0 1px rgba(134, 239, 255, 0.48),
        0 0 0 4px rgba(73, 216, 237, 0.075),
        0 0 28px rgba(73, 216, 237, 0.06);
}

.studio-page--contact .contact-form .form-field:focus-within::after {
    border-color: rgba(134, 239, 255, 0.44);
    box-shadow: none;
}

.studio-page--contact .contact-form .form-field:focus-within .form-field__icon {
    stroke: var(--contact-accent);
}

.studio-page--contact .contact-form .form-field:has([aria-invalid="true"])::before {
    box-shadow: 0 0 0 1px rgba(244, 136, 122, 0.72), 0 0 0 4px rgba(244, 136, 122, 0.06);
}

.studio-page--contact .contact-form__actions { display: block; }

.studio-page--contact .contact-form .button {
    position: relative;
    width: 100%;
    min-height: 62px;
    padding-inline: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(225, 252, 255, 0.58);
    border-radius: 12px;
    color: #06232c;
    background: linear-gradient(120deg, #c4f8ff, #73e5f3 58%, #4fcfe2);
    box-shadow:
        0 16px 36px rgba(39, 191, 213, 0.19),
        0 0 28px rgba(63, 211, 231, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    transition: box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}

.studio-page--contact .contact-form .button::before {
    position: absolute;
    inset: 1px;
    border-radius: 10px;
    content: "";
    pointer-events: none;
    opacity: 0.66;
    background: linear-gradient(112deg, rgba(255, 255, 255, 0.42), transparent 34% 68%, rgba(6, 91, 106, 0.1));
    transition: opacity 180ms ease;
}

.studio-page--contact .contact-form .button > span {
    position: relative;
    z-index: 1;
}

.studio-page--contact .contact-form .button:hover,
.studio-page--contact .contact-form .button:focus-visible {
    color: #041d25;
    background: linear-gradient(120deg, #d1fbff, #89edf8 58%, #62d9e9);
    box-shadow:
        0 20px 42px rgba(39, 191, 213, 0.24),
        0 0 34px rgba(63, 211, 231, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    filter: saturate(1.05);
    transform: translateY(-2px);
}

.studio-page--contact .contact-form .button:hover::before,
.studio-page--contact .contact-form .button:focus-visible::before { opacity: 0.86; }

.studio-page--contact .contact-form .button:active {
    box-shadow: 0 8px 18px rgba(39, 191, 213, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transform: translateY(0);
}

.studio-page--contact .contact-form__arrow {
    font-size: 1.05rem;
    transition: transform 180ms ease;
}

.studio-page--contact .contact-form .button:hover .contact-form__arrow { transform: translate(2px, -2px); }

.studio-page--contact .form-status {
    min-height: 32px;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: rgba(2, 13, 20, 0.48);
    box-shadow: 0 0 0 1px rgba(196, 232, 239, 0.11);
}

@media (max-width: 980px) {
    .studio-page--contact .igloo-room {
        align-content: start;
        padding-top: calc(var(--contact-header-height) + 2.25rem);
    }

    .studio-page--contact .igloo-room::after {
        background: linear-gradient(180deg, rgba(4, 13, 20, 0.73), rgba(4, 13, 20, 0.38) 52%, rgba(4, 13, 20, 0.72));
    }

    .studio-page--contact .igloo-panel {
        width: min(100%, 760px);
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    .studio-page--contact .igloo-panel > .contact-overview {
        grid-column: 1;
        grid-row: 1;
    }

    .studio-page--contact .igloo-panel > .contact-card {
        grid-column: 1;
        grid-row: 2;
    }

    .studio-page--contact .contact-overview { gap: 1.75rem; }
    .studio-page--contact .igloo-panel__head h1 { max-width: none; }
    .studio-page--contact .contact-title__brand { font-size: clamp(4rem, 9vw, 5.3rem); }
    .studio-page--contact .contact-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .studio-page--contact .contact-process li {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        padding: 1rem;
        border: 1px solid var(--contact-line);
        border-right: 0;
    }
    .studio-page--contact .contact-process li:last-child { border-right: 1px solid var(--contact-line); }
}

@media (max-width: 680px) {
    .studio-page--contact .igloo-room {
        padding: calc(var(--contact-header-height) + 1.5rem) 1rem 2.5rem;
    }

    .studio-page--contact .igloo-panel {
        width: min(100%, 440px);
        gap: 1.6rem;
    }

    .studio-page--contact .contact-overview { gap: 1.45rem; }
    .studio-page--contact .igloo-panel__head { gap: 0.8rem; }
    .studio-page--contact .contact-eyebrow { font-size: 0.62rem; }
    .studio-page--contact .contact-title__lead { margin-bottom: 0.7rem; font-size: 0.66rem; }
    .studio-page--contact .contact-title__brand { font-size: clamp(2.95rem, 14.5vw, 4.15rem); }
    .studio-page--contact .igloo-panel__lead { font-size: 0.92rem; line-height: 1.58; }
    .studio-page--contact .contact-process { grid-template-columns: 1fr; }
    .studio-page--contact .contact-process li {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        padding: 0.82rem 0;
        border-width: 0 0 1px;
    }
    .studio-page--contact .contact-process li:last-child { border-right: 0; }
    .studio-page--contact .contact-process p { display: none; }
    .studio-page--contact .contact-methods { grid-template-columns: 1fr; gap: 0.55rem; }
    .studio-page--contact .contact-methods a { padding: 0.78rem 0.85rem; }
    .studio-page--contact .contact-card { gap: 1.1rem; padding: 1.1rem; border-radius: 18px; }
    .studio-page--contact .contact-card__head { padding-bottom: 0.95rem; }
    .studio-page--contact .contact-card__head > p { display: none; }
    .studio-page--contact .contact-form__fields { grid-template-columns: 1fr; gap: 0.65rem; }
    .studio-page--contact .contact-form .form-field input,
    .studio-page--contact .contact-form .form-field select { height: 60px; }
    .studio-page--contact .contact-form .form-field textarea { height: 150px; }
    .studio-page--contact .contact-answer {
        width: calc(100% - 0.85rem);
        min-height: 0;
        padding: 1.15rem;
        border-radius: 18px 5px 18px 18px;
    }
    .studio-page--contact .contact-flow strong { font-size: 0.52rem; letter-spacing: 0.055em; }
    .studio-page--contact .contact-form .button { min-height: 58px; }
}

@media (max-width: 360px) {
    .studio-page--contact .igloo-room { padding-inline: 0.82rem; }
    .studio-page--contact .contact-title__brand { font-size: 2.7rem; }
    .studio-page--contact .contact-card { padding: 0.9rem; }
}

@media (max-height: 760px) and (min-width: 981px) {
    .studio-page--contact .igloo-room {
        align-content: start;
        padding-top: calc(var(--contact-header-height) + 1.6rem);
    }
    .studio-page--contact .contact-title__brand { font-size: clamp(3.65rem, 5.4vw, 4.7rem); }
    .studio-page--contact .contact-overview { gap: 1.55rem; }
    .studio-page--contact .contact-process li { padding-block: 0.7rem; }
    .studio-page--contact .contact-card { gap: 1rem; padding-block: 1.45rem; }
    .studio-page--contact .contact-form .form-field textarea { height: 124px; }
}

@media (prefers-reduced-motion: reduce) {
    .studio-page--contact .contact-methods a,
    .studio-page--contact .contact-form .button,
    .studio-page--contact .contact-form__arrow { transition: none; }
    .studio-page--contact .contact-form .form-field::before,
    .studio-page--contact .contact-form .form-field::after,
    .studio-page--contact .contact-form .form-field__icon,
    .studio-page--contact .contact-form .form-field__chevron,
    .studio-page--contact .contact-form .button::before { transition: none; }
    .studio-page--contact .contact-flow::after,
    .studio-page--contact .contact-flow li,
    .studio-page--contact .contact-flow li > span,
    .studio-page--contact .contact-flow li > span::after { transition: none; }
    .studio-page--contact .contact-question,
    .studio-page--contact .contact-website,
    .studio-page--contact .contact-answer { animation: none; }
    .studio-page--contact .contact-title__s {
        animation: none;
        color: var(--contact-accent);
        text-shadow: 0 0 18px rgba(134, 239, 255, 0.28);
        transform: translate3d(var(--contact-title-s-travel), 0, 0);
        will-change: auto;
    }
    .studio-page--contact .contact-title__now {
        color: var(--contact-accent);
        text-shadow: 0 0 18px rgba(134, 239, 255, 0.28);
        animation: none;
    }
    .studio-page--contact .contact-title__message-snow { opacity: 1; transform: none; animation: none; }
}

/* Contact finish: a quiet ice interior and a legible frosted writing surface. */
.studio-page--contact .igloo-room::after {
    background:
        radial-gradient(ellipse at 24% 35%, rgba(112, 204, 219, 0.09), transparent 48%),
        linear-gradient(90deg, rgba(3, 14, 23, 0.82), rgba(5, 20, 30, 0.62) 48%, rgba(5, 20, 30, 0.48)),
        linear-gradient(180deg, rgba(2, 10, 17, 0.1), transparent 55%, rgba(2, 10, 17, 0.62));
}
.studio-page--contact .igloo-panel { width: min(100%, 1220px); gap: clamp(2.8rem, 5vw, 5rem); }
.studio-page--contact .contact-overview { gap: clamp(2.5rem, 5svh, 3.6rem); }
.studio-page--contact .contact-title__brand { font-weight: 500; letter-spacing: -0.065em; }
.studio-page--contact .contact-title__lead { color: #d3e5e9; letter-spacing: 0.28em; }
.studio-page--contact .contact-methods {
    grid-template-columns: 1fr;
    width: min(100%, 410px);
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(197, 233, 240, 0.25);
}
.studio-page--contact .contact-methods a {
    grid-template-columns: 4.5rem minmax(0, 1fr) 1rem;
    align-items: center;
    justify-items: start;
    gap: 0.8rem;
    min-height: 61px;
    padding: 0.9rem 0;
    border: 0;
    border-bottom: 1px solid rgba(197, 233, 240, 0.2);
    border-radius: 0;
    background: transparent;
    text-align: left;
}
.studio-page--contact .contact-methods a::after { content: '↗'; color: #a9e9f8; font-size: 1rem; }
.studio-page--contact .contact-methods span:first-child { color: #a9c6cf; font-size: 0.6rem; }
.studio-page--contact .contact-methods span:last-child { font-size: 0.95rem; font-weight: 500; }
.studio-page--contact .contact-methods a:hover { background: transparent; border-color: #b9eaf2; transform: none; }
.studio-page--contact .contact-card {
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-color: rgba(245, 253, 255, 0.76);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(243, 250, 251, 0.97), rgba(222, 238, 241, 0.96));
    color: #172e3a;
    box-shadow: 0 32px 90px rgba(0, 8, 16, 0.35), 0 3px 12px rgba(0, 8, 16, 0.12), inset 0 1px 0 #fff;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.studio-page--contact .contact-card::before {
    background: radial-gradient(ellipse at 0 0, rgba(255,255,255,0.7), transparent 60%);
    background-size: auto;
}
.studio-page--contact .contact-card::after {
    left: 8%; width: 84%; height: 1px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    box-shadow: none;
}
.studio-page--contact .contact-flow { padding-bottom: 1.25rem; border-bottom: 1px solid rgba(49, 87, 100, 0.17); }
.studio-page--contact .contact-flow::before, .studio-page--contact .contact-flow::after { top: 0.75rem; left: 0.8rem; right: 0.8rem; }
.studio-page--contact .contact-flow::before { background: #bcced2; }
.studio-page--contact .contact-flow::after { background: #498793; box-shadow: none; }
.studio-page--contact .contact-flow li { gap: 0.65rem; color: #617780; }
.studio-page--contact .contact-flow li > span {
    width: 1.6rem; height: 1.6rem; border-radius: 7px;
    color: #607a84; background: #eaf3f4; border-color: #bdcfd4;
    box-shadow: 0 0 0 5px #eaf3f4;
    font: 500 0.6rem "IBM Plex Mono", monospace;
}
.studio-page--contact .contact-flow li > span::after { display: none; }
.studio-page--contact .contact-flow[data-stage="details"] li:first-child,
.studio-page--contact .contact-flow[data-stage="goal"] li:nth-child(-n + 2),
.studio-page--contact .contact-flow[data-stage="send"] li,
.studio-page--contact .contact-flow li[aria-current="step"] strong { color: #234c59; }
.studio-page--contact .contact-flow[data-stage="details"] li:first-child > span,
.studio-page--contact .contact-flow[data-stage="goal"] li:nth-child(-n + 2) > span,
.studio-page--contact .contact-flow[data-stage="send"] li > span { background: #234c59; color: #fff; border-color: #234c59; }
.studio-page--contact .contact-form .form-field::before {
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(61, 98, 112, 0.2);
}
.studio-page--contact .contact-form .form-field label { color: #4b646e; font-weight: 500; }
.studio-page--contact .contact-form .form-field__icon { stroke: #63828e; }
.studio-page--contact .contact-form .form-field__icon--url { color: #63828e; }
.studio-page--contact .contact-form .form-field__chevron { stroke: #456a78; }
.studio-page--contact .contact-form .form-field input,
.studio-page--contact .contact-form .form-field select,
.studio-page--contact .contact-form .form-field textarea { color: #132f3c; caret-color: #176678; }
.studio-page--contact .contact-form .form-field select { color-scheme: light; }
.studio-page--contact .contact-form .form-field select option { color: #132f3c; background: #f3f9fa; }
.studio-page--contact .contact-form .form-field .form-field__required { color: #8b5824; }
.studio-page--contact .contact-form .form-field .form-field__optional { color: #637b83; }
.studio-page--contact .contact-form .form-field--select label { color: #4b646e; }
.studio-page--contact .contact-form .form-field:hover::before { background: rgba(255,255,255,0.78); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #8faeb9; }
.studio-page--contact .contact-form .form-field:focus-within::before { background: #fbfefe; box-shadow: 0 0 0 1px #468393, 0 0 0 4px rgba(54, 125, 142, 0.1); }
.studio-page--contact .contact-form .form-field:focus-within::after { border-color: #468393; box-shadow: none; }
.studio-page--contact .contact-form .form-field:focus-within .form-field__icon { stroke: #236375; }
.studio-page--contact .contact-form .form-field input:focus + label,
.studio-page--contact .contact-form .form-field input:not(:placeholder-shown) + label,
.studio-page--contact .contact-form .form-field textarea:focus + label,
.studio-page--contact .contact-form .form-field textarea:not(:placeholder-shown) + label,
.studio-page--contact .contact-form .form-field.is-complete label { color: #386674; }
.studio-page--contact .contact-form .form-field:has([aria-invalid="true"])::before { box-shadow: 0 0 0 1px #aa4f3d; }
.studio-page--contact .contact-form__guidance,
.studio-page--contact .contact-form__reassurance { color: #526a74; font-size: 0.72rem; line-height: 1.5; }
.studio-page--contact .contact-form__reassurance { text-align: left; }
.studio-page--contact .contact-form .button {
    justify-content: space-between;
    border: 1px solid #173b49; border-radius: 12px;
    color: #edfaff; background: linear-gradient(115deg, #1c4554, #0d2835);
    box-shadow: 0 8px 18px rgba(16, 51, 64, 0.15), inset 0 1px 0 rgba(255,255,255,0.13);
    font-size: 0.8rem; letter-spacing: 0.035em; font-weight: 600;
}
.studio-page--contact .contact-form .button::before { opacity: 0.15; }
.studio-page--contact .contact-form .button:hover,
.studio-page--contact .contact-form .button:focus-visible { color: #fff; background: linear-gradient(115deg, #275b6c, #153b4a); box-shadow: 0 10px 24px rgba(16,51,64,0.2); }
.studio-page--contact .form-status { color: #234d5c; background: #d8e9ed; box-shadow: 0 0 0 1px #a4bfc8; }
.studio-page--contact .form-status[data-state="error"] { color: #8d382c; background: #fae9e4; }
.studio-page--contact .contact-answer { border-color: #bed0d6; color: #243f4b; background: #f7fbfc; box-shadow: 0 8px 24px rgba(35,71,86,0.08); }
.studio-page--contact .contact-answer p,
.studio-page--contact .contact-answer__footer { color: #526a74; }
.studio-page--contact .contact-answer strong,
.studio-page--contact .contact-answer a,
.studio-page--contact .contact-answer__signal { color: #245d6e; }
@media (min-width: 681px) {
    .studio-page--contact .contact-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .studio-page--contact .contact-form .form-field--select label {
        max-width: calc(100% - 3.7rem);
        overflow: visible;
        white-space: normal;
        line-height: 1.25;
        font-size: 0.64rem;
    }
    .studio-page--contact .contact-form .form-field select { padding-top: 2.15rem; }
    .studio-page--contact .contact-form .form-field .form-field__optional { font-size: 0.62rem; margin-left: 0.2rem; }
}
@media (max-width: 980px) {
    .studio-page--contact .igloo-panel { width: min(100%, 680px); gap: 2.5rem; }
    .studio-page--contact .contact-overview { gap: 1.75rem; }
}
@media (max-width: 680px) {
    .studio-page--contact .igloo-panel { gap: 1.8rem; }
    .studio-page--contact .contact-card { padding: 1.25rem; border-radius: 16px; }
    .studio-page--contact .contact-methods a { min-height: 52px; padding-block: 0.75rem; }
    .studio-page--contact .contact-methods span:last-child { font-size: 0.85rem; }
    .studio-page--contact .contact-flow strong { font-size: 0.53rem; }
    .studio-page--contact .contact-form .form-field input,
    .studio-page--contact .contact-form .form-field textarea,
    .studio-page--contact .contact-form .form-field select { font-size: 16px; }
}
.studio-page--contact .contact-card,
.studio-page--contact .contact-form .form-field label,
.studio-page--contact .contact-form .form-field input,
.studio-page--contact .contact-form .form-field select,
.studio-page--contact .contact-form .form-field textarea { text-shadow: none; }
.studio-page--contact .contact-answer::before { background: #f7fbfc; filter: drop-shadow(1px -1px 0 #bed0d6); }
.studio-page--contact .contact-answer::after { background: linear-gradient(90deg, transparent, #91b9c4, transparent); box-shadow: none; }
.studio-page--contact .contact-answer__footer > span { color: #526a74; }
.studio-page--contact .contact-answer a:hover,
.studio-page--contact .contact-answer a:focus-visible { color: #123e4e; }
.studio-page--contact .contact-form .form-field:focus-within .form-field__chevron { stroke: #236375; }
.studio-page--contact .contact-form .form-field--website:focus-within .form-field__icon--url,
.studio-page--contact .contact-form .form-field--website.is-complete .form-field__icon--url { color: #236375; }
.studio-page--contact .form-status[data-state="loading"] { color: #6d5224; background: #f3edde; }
.studio-page--contact .form-status[data-state="success"] { color: #205746; background: #ddefe5; }
.studio-page--contact .contact-form .form-field select { position: relative; z-index: 2; }

/* Match the departure frame, then reveal the contact room without light streaks. */
.contact-arrival-light { background: #102633; backdrop-filter: none; -webkit-backdrop-filter: none; }
.contact-arrival-light::after { display: none; }
body.contact-arriving .contact-arrival-light { animation: contact-cinematic-arrival 850ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes contact-cinematic-arrival {
    0% { visibility: visible; opacity: 1; }
    100% { visibility: hidden; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body.contact-arriving .contact-arrival-light { display: none; animation: none; }
}