@font-face { font-family:"Lemon Milk Editorial"; src:url("/assets/lemon-milk-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Lemon Milk Editorial"; src:url("/assets/lemon-milk-medium-italic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
.brand-page { min-height:100svh; display:flex; flex-direction:column; position:relative; isolation:isolate; background:#020512; }
.page-atmosphere { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:radial-gradient(ellipse at 85% 15%,rgba(23,63,163,.24),transparent 60%); }
.page-atmosphere::before { content:""; position:absolute; top:0; left:0; width:100%; height:clamp(240px,45svh,540px); background:url("/assets/chromatic-airbrush.webp") center 60% / cover no-repeat; opacity:.45; mask-image:linear-gradient(#000,transparent); -webkit-mask-image:linear-gradient(#000,transparent); }
/* Contact artwork is composed separately for wide and narrow screens. The
   native picture loads only one small WebP, with no rendering loop or embed. */
.contact-page > .page-atmosphere { background:#020512; }
.contact-page > .page-atmosphere::before { content:none; }
.contact-page .page-atmosphere picture { display:block; width:100%; height:1400px; }
.contact-page > .page-atmosphere::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 70%,#020512 100%); }
.contact-page .page-atmosphere img { display:block; width:100%; height:100%; object-fit:fill; }
@media (min-width:901px) {
  /* Stretch only the quiet blue field to follow the copy. Preserve the warm
     spectrum as a compact band below it, using the same lightweight artwork. */
  .contact-page .page-atmosphere picture {
    height:calc(var(--contact-blue-depth,760px) + 420px);
    border-style:solid; border-color:transparent;
    border-width:var(--contact-blue-depth,760px) 0 170px;
    border-image:url("/assets/contact-gradient-desktop.webp") 390 0 260 0 fill stretch;
  }
  .contact-page .page-atmosphere img { visibility:hidden; height:0; }
  .contact-page > .page-atmosphere::after { background:linear-gradient(transparent 85%,#020512 100%); }
}
.page-masthead { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(28px,4vw,60px) var(--nav-inset); }
.page-masthead img { display:block; width:clamp(160px,18vw,230px); height:auto; }
.page-eyebrow { font:500 .75rem/1.6 var(--brand-font); letter-spacing:.12em; text-transform:uppercase; color:#b5c0d7; }
.page-content { width:100%; max-width:1700px; margin:auto; padding:clamp(65px,9vw,160px) clamp(24px,6vw,112px); }
.page-title { margin:24px 0 38px; max-width:15ch; font:400 clamp(2.15rem,5.8vw,6.5rem)/1.22 "Lemon Milk Editorial",var(--brand-font); letter-spacing:-.035em; text-wrap:balance; overflow-wrap:break-word; }
.page-copy { max-width:60ch; margin:0; font:400 clamp(1rem,1.35vw,1.3rem)/1.85 var(--body-font); color:#b5c0d7; text-wrap:pretty; }
.page-copy + .page-copy { margin-top:24px; }
.page-copy strong { color:inherit; }
.page-rule { width:70px; height:2px; margin:0 0 32px; background:linear-gradient(90deg,#f7931a,rgba(247,147,26,0)); }
.page-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 var(--nav-inset); padding:28px 0 max(28px,env(safe-area-inset-bottom)); border-top:1px solid rgba(176,197,238,.15); font-size:.75rem; color:#8c9ab5; }
.page-footer img { width:150px; height:auto; }
.not-found .page-content { text-align:center; max-width:1000px; padding-top:48px; padding-bottom:70px; }
.not-found .page-atmosphere::before { opacity:.85; height:72svh; background-position:center top; }
.page-emblem { width:100px; margin:0 auto 34px; }
.not-found .page-title { max-width:none; margin:8px 0 22px; font-size:clamp(4.5rem,12vw,9rem); }
.not-found .page-copy { margin-inline:auto; }
.not-found .contact-link { display:inline-flex; margin-top:32px; }
.contact-page .contact-layout {
  background:transparent; overflow:visible; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.88fr);
  align-items:start; gap:clamp(48px,8vw,135px);
  padding-top:calc(var(--nav-clearance) + clamp(48px,6svh,85px));
  padding-bottom:100px;
}
.contact-layout .contact-intro { min-width:0; padding-top:24px; }
.contact-layout .page-eyebrow { color:#dce7ff; }
.contact-layout .page-title { font-size:clamp(2.6rem,4.7vw,5.5rem); margin-bottom:28px; max-width:13ch; }
.contact-layout .page-copy { color:#dce7ff; max-width:none; font-size:clamp(1rem,1.35vw,1.25rem); line-height:1.8; }
.contact-layout:focus { outline:none; }
.contact-panel { min-width:0; width:100%; padding:clamp(28px,3vw,48px); }
.contact-panel h2 { font:400 clamp(1.35rem,2vw,1.85rem)/1.5 "Lemon Milk Editorial",var(--brand-font); letter-spacing:-.025em; }
.contact-panel .contact-form-intro { margin:8px 0 30px; font:400 .95rem/1.7 var(--body-font); color:#c2cce1; }
.inquiry-form { display:grid; gap:22px; }
.form-field { display:grid; gap:9px; min-width:0; }
.form-field label { display:flex; align-items:baseline; justify-content:space-between; gap:12px; color:#e3eaff; font:400 .67rem/1.7 "Lemon Milk Editorial",var(--brand-font); letter-spacing:.07em; text-transform:uppercase; }
.field-optional { color:#b2bfd9; font:400 .73rem/1.7 var(--body-font); text-transform:none; letter-spacing:0; }
.form-field input {
  display:block; width:100%; min-width:0; min-height:52px; padding:12px 15px;
  color:#eef2fc; background:rgba(5,9,32,.65); border:1px solid rgba(186,204,248,.3);
  border-radius:10px; outline:0; font:400 1rem/1.6 var(--body-font);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.form-field input:hover { border-color:rgba(201,220,255,.6); }
.form-field input:focus-visible { border-color:#d4e4ff; box-shadow:0 0 0 3px rgba(148,183,255,.2); background:rgba(5,9,32,.82); }
.form-field input[aria-invalid="true"] { border-color:#ffc99c; }
.form-field input:autofill { box-shadow:0 0 0 100px #121d46 inset; -webkit-text-fill-color:#eef2fc; caret-color:#eef2fc; }
.form-field input:-webkit-autofill { box-shadow:0 0 0 100px #121d46 inset; -webkit-text-fill-color:#eef2fc; caret-color:#eef2fc; }
.field-error { color:#ffe0c6; font:400 .78rem/1.6 var(--body-font); }
.form-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.form-actions { margin-top:8px; }
.form-actions .contact-link { width:100%; cursor:pointer; }
.form-actions .contact-link:disabled { opacity:.65; cursor:wait; }
.form-status,.form-note { margin:0; color:#d5def0; font:400 .83rem/1.7 var(--body-font); }
.form-status { border-top:1px solid rgba(204,219,255,.2); padding-top:18px; }
.form-status:focus { outline:none; }
.form-status[data-state="error"] { color:#ffe0c6; }
.field-error[hidden],.form-status[hidden] { display:none; }
@media (max-width:1100px) and (min-width:901px) {
  .contact-page .contact-layout { gap:42px; padding-inline:4vw; }
  .contact-layout .page-title { font-size:4.7vw; }
}
@media (max-width:900px) {
  .contact-page .page-atmosphere picture { height:1400px; }
  .contact-page .contact-layout { grid-template-columns:1fr; max-width:720px; gap:110px; padding-top:calc(var(--nav-clearance) + 54px); padding-bottom:70px; }
  .contact-layout .contact-intro { padding-top:0; }
  .contact-layout .page-title { max-width:15ch; font-size:clamp(2.4rem,6.5vw,3.6rem); }
  .contact-layout .page-copy { max-width:38ch; font-size:1.05rem; }
  .contact-panel { padding:32px; }
}
@media (max-width:760px) {
  .page-masthead { padding-top:max(26px,env(safe-area-inset-top)); }
  .page-masthead .page-eyebrow { font-size:.7rem; }
  .page-content { padding-block:60px 80px; }
  .page-footer { align-items:flex-start; flex-direction:column; gap:16px; }
  .page-emblem { width:82px; }
}
@media (max-width:480px) {
  .contact-page .contact-layout { padding-inline:24px; gap:96px; padding-top:calc(var(--nav-clearance) + 48px); }
  .contact-layout .page-title { font-size:clamp(2rem,8.6vw,2.6rem); margin-top:20px; margin-bottom:22px; }
  .contact-layout .page-copy { font-size:1rem; }
  .contact-panel { padding:26px 22px; }
  .contact-panel .contact-form-intro { font-size:.9rem; margin-bottom:26px; }
  .inquiry-form { gap:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .form-field input { transition:none; }
}