/* Contact inherits the homepage's graphite, steel and blue lighting. */
.contact-page{background:#101317;color:#f2f2ed;color-scheme:dark}
.contact-page #main{display:block}
.contact-page .header,.contact-page .footer{background:#101317}
.contact-page .header-inner{min-height:76px}
.contact-page .brand{width:123px;height:70px}
.contact-studio{position:relative;isolation:isolate;overflow:clip;background:linear-gradient(145deg,#101317 30%,#121e32 74%,#101317 100%)}
.contact-studio::selection,.contact-studio ::selection{background:#0649ef;color:#fff}
.contact-studio a:focus-visible{outline:3px solid #a8c3ff;outline-offset:6px}
.contact-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;padding-block:clamp(48px,6vw,86px) 76px;min-height:680px;isolation:isolate}
.contact-stage h1{grid-column:1;position:relative;z-index:2;font-family:var(--display);font-weight:700;font-size:clamp(3rem,4.7vw,4.5rem);line-height:1.05;letter-spacing:-.015em;max-width:19ch;text-wrap:balance}
.contact-stage h1 em{display:block;color:#6995ff;font-weight:700;font-style:italic;padding-block:.04em .07em}
.contact-introduction{grid-column:1;position:relative;z-index:2;max-width:53ch;margin-top:28px}
.contact-introduction>p{font-size:1.125rem;line-height:1.65;color:#c7d1df;text-wrap:pretty}
.contact-introduction .contact-action{margin-top:28px}
.contact-introduction .button{justify-content:center;min-width:190px;min-height:54px;background:#0649ef;border-color:#0649ef;box-shadow:0 12px 30px #02081542}
.contact-introduction .button:hover{background:#245fff;border-color:#245fff}
.contact-visual{position:absolute;left:50.5%;right:0;top:8%;bottom:4%;z-index:1;pointer-events:none;isolation:isolate;display:grid;align-items:center}
.contact-light{position:absolute;inset:-10% -20% -12% -8%;z-index:-2;background:radial-gradient(ellipse at 66% 50%,#1457db5e 0%,#1c3d6726 43%,transparent 69%)}
.contact-floor{position:absolute;left:4%;right:-20%;top:67%;height:27%;z-index:-1;background:radial-gradient(ellipse at 53% 35%,#365f9540,transparent 67%);transform:skewY(-9deg)}
.contact-floor:after{content:'';position:absolute;left:13%;right:6%;top:18%;height:1px;background:linear-gradient(90deg,transparent,#81a9e64a,transparent)}
.contact-unit{width:100%;margin-left:0;transform:translateY(12px);filter:drop-shadow(10px 32px 18px #02060b85)}
.contact-unit img{display:block;width:100%;height:auto;max-width:none}
.contact-notes{position:relative;background:linear-gradient(180deg,#10131700,#101317 80%);padding-block:14px 76px}
.contact-notes-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(40px,9vw,140px);padding-top:42px;border-top:1px solid #68788d45}
.contact-notes p{color:#b8c4d5;font-size:1.1rem;line-height:1.7;max-width:65ch;text-wrap:pretty}
.contact-notes p:last-child{font-size:1.4rem;line-height:1.55;color:#e0e7f0}
@media(min-width:1500px){.contact-stage{min-height:730px}.contact-visual{left:49%;right:0}}
@media(max-width:950px){.contact-stage{column-gap:24px;grid-template-columns:1.1fr 1fr}.contact-stage h1{font-size:clamp(2.8rem,5.6vw,3.8rem)}.contact-visual{left:52%;right:0}.contact-introduction>p{font-size:1.05rem}.contact-notes-layout{gap:42px}}
@media(max-width:680px){.contact-page .header-inner{min-height:83px}.contact-page .brand{width:101px;height:72px}.contact-stage{display:flex;flex-direction:column;padding-block:40px 44px;min-height:0}.contact-stage h1{max-width:20ch;font-size:clamp(2.6rem,10.5vw,3.8rem);line-height:1.06}.contact-stage h1 br{display:none}.contact-visual{position:relative;inset:auto;width:100%;height:auto;min-height:240px;aspect-ratio:3/2;margin:12px 0 4px}.contact-unit{width:100%;margin-left:0;transform:none}.contact-light{inset:-32% -20%}.contact-floor{top:72%;left:-5%;right:-5%}.contact-introduction{margin-top:14px;max-width:55ch}.contact-introduction>p{font-size:1.075rem}.contact-introduction .contact-action{margin-top:25px}.contact-introduction .button{min-width:190px}.contact-notes{padding-block:0 46px}.contact-notes-layout{grid-template-columns:1fr;gap:26px;padding-top:32px}.contact-notes p{font-size:1.025rem}.contact-notes p:last-child{font-size:1.25rem}}
@media(prefers-reduced-motion:no-preference){
  .contact-unit{animation:contact-unit-arrive 1150ms cubic-bezier(.16,1,.3,1) both}
  .contact-light{animation:contact-light-arrive 1400ms cubic-bezier(.16,1,.3,1) both}
  .contact-introduction .button{transition:background 180ms ease,border-color 180ms ease,transform 180ms cubic-bezier(.16,1,.3,1),box-shadow 180ms ease}
  .contact-introduction .button:hover:not(:focus-visible){transform:translateY(-3px);box-shadow:0 16px 36px #02081566}
  .contact-introduction .button:active:not(:focus-visible){transform:translateY(-1px) scale(.98)}
  @keyframes contact-unit-arrive{from{translate:34px 18px;opacity:.65}to{translate:0 0;opacity:1}}
  @keyframes contact-light-arrive{from{opacity:.2}to{opacity:1}}
  @supports(animation-timeline:view()){
    .contact-visual{animation:contact-depth linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes contact-depth{from{translate:0 16px}to{translate:0 -28px}}
  }
}
