/* ============================================================
   YAW STUDIO — Contact page
   Width-first layout · form sooner · visible CTA
   ============================================================ */

/* CMS theme injects huge section padding — keep studio pages compact */
.page-contact section[id],
.page-about section[id],
.page-services section[id],
.page-work section[id],
.page-contact .sec,
.page-about .sec{
  padding-block:0;
}

/* ---- short hero ---- */
.page-contact .contact-hero.st-hero{
  min-height:min(42vh,360px);
  max-height:min(48vh,420px);
}
.page-contact .contact-hero .st-hero-inner{
  padding:clamp(88px,11vh,120px) var(--st-pad, clamp(16px,3.5vw,40px)) clamp(28px,4vh,44px);
  max-width:min(40rem,94vw);
}
.page-contact .contact-hero .st-hero-title{
  font-size:clamp(24px,3.8vw,40px);
  line-height:.96;
}
.page-contact .contact-hero .st-hero-lead{
  font-size:clamp(14px,1.3vw,16px);
  line-height:1.5;
  max-width:48ch;
  margin-top:12px;
}
.page-contact .st-hero-actions{
  display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:18px;align-items:center;
}
.page-contact .st-cta-ghost{
  background:transparent;border-bottom-color:rgba(242,240,236,.28);
  color:rgba(242,240,236,.72);
}
.page-contact .st-cta-ghost:hover{border-bottom-color:rgba(224,27,24,.7);color:#F2F0EC}

/* ---- desk: types | form ---- */
.page-contact .contact-desk{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  align-items:stretch;
  border-top:1px solid rgba(255,255,255,.06);
  max-width:1360px;
  margin:0 auto;
  width:100%;
}
/* Preview shells must not break the two-column desk */
.page-contact .contact-desk > .section-preview-shell{
  min-width:0;
  display:contents;
}
.page-contact .contact-types{
  padding:clamp(32px,5vh,56px) clamp(18px,2.8vw,32px) clamp(40px,6vh,64px) var(--st-pad, clamp(16px,3.5vw,40px));
  background:#060708;
  border-right:1px solid rgba(255,255,255,.07);
  /* Page scrolls as one surface — no inner white scrollbar */
  position:relative;
  max-height:none;
  overflow:visible;
}
.page-contact .contact-types-inner{max-width:28rem}
.page-contact .contact-types .st-kicker{margin-bottom:10px}
.page-contact .contact-types-title{
  margin:0 0 20px;font-family:var(--disp);font-variation-settings:"wdth" 114;
  font-weight:900;font-size:clamp(20px,2.4vw,30px);
  letter-spacing:-.03em;text-transform:uppercase;line-height:1.05;
}
.page-contact .contact-type-grid{
  display:grid;grid-template-columns:1fr;gap:10px;
}
.page-contact .contact-type{
  appearance:none;text-align:left;cursor:pointer;
  background:rgba(8,9,10,.7);border:1px solid rgba(255,255,255,.08);
  border-left:3px solid transparent;
  padding:14px 14px 14px 12px;color:inherit;
  transition:border-color .35s,background .35s,box-shadow .35s;
}
.page-contact .contact-type:hover{border-color:rgba(255,255,255,.2)}
.page-contact .contact-type:focus-visible{
  outline:2px solid rgba(224,27,24,.55);outline-offset:3px;
}
.page-contact .contact-type.is-active{
  border-color:rgba(224,27,24,.55);
  border-left-color:var(--brand-red,#E01B18);
  background:rgba(224,27,24,.1);
  box-shadow:0 0 20px rgba(224,27,24,.12);
}
.page-contact .contact-type.is-active .contact-type-d{color:rgba(242,240,236,.62)}
.page-contact .contact-type-k{
  display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:rgba(242,240,236,.28);margin-bottom:4px;margin-right:8px;
}
.page-contact .contact-type.is-active .contact-type-k{color:rgba(255,255,255,.9)}
.page-contact .contact-type-t{
  display:inline;font-family:var(--disp);font-variation-settings:"wdth" 112;
  font-weight:900;font-size:13px;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.3;
}
.page-contact .contact-type-d{
  display:block;margin-top:8px;
  font-family:var(--read);font-size:13px;line-height:1.45;
  color:rgba(242,240,236,.42);
}

/* ---- form ---- */
.page-contact .contact-form-sec{
  padding:clamp(32px,5vh,56px) var(--st-pad, clamp(16px,3.5vw,40px)) clamp(44px,7vh,72px);
  border-top:0;
  background:#050607;
}
.page-contact .contact-form-shell{max-width:none;position:relative}
.page-contact .contact-form-inner{max-width:48rem;margin:0 auto}
.page-contact .contact-field-primary select{font-size:16px;padding:14px 28px 14px 12px;background-color:rgba(224,27,24,.08);border:1px solid rgba(224,27,24,.45);border-radius:4px}
.page-contact .contact-field-primary select:focus{border-color:var(--brand-red,#E01B18);background-color:rgba(224,27,24,.12)}
.page-contact .contact-form-sec .st-kicker{margin-bottom:10px}
.page-contact .contact-form-title{
  margin:0 0 10px;font-family:var(--disp);font-variation-settings:"wdth" 114;
  font-weight:900;font-size:clamp(22px,2.8vw,34px);
  letter-spacing:-.035em;text-transform:uppercase;line-height:1.05;
}
.page-contact .contact-form-lead{
  margin:0 0 24px;font-family:var(--read);font-size:14px;
  line-height:1.55;color:rgba(242,240,236,.48);max-width:52ch;
}
.page-contact .contact-fields{
  display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;
}
.page-contact .contact-fields-dense{grid-template-columns:1fr 1fr}
.page-contact .contact-field{
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.page-contact .contact-field-wide,
.page-contact .contact-chips{grid-column:1 / -1}
.page-contact .contact-field-half{grid-column:span 1}
@media(min-width:981px){
  .page-contact .contact-fields > .contact-field-half:nth-last-child(2),
  .page-contact .contact-fields > .contact-field-half:last-child{
    grid-column:span 1;
  }
}
.page-contact .contact-field label span,
.page-contact .contact-chips legend span{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,240,236,.4);
}
.page-contact .contact-field abbr{
  text-decoration:none;color:var(--brand-red,#E01B18);border:0;
}
.page-contact .contact-field input,
.page-contact .contact-field textarea,
.page-contact .contact-field select{
  appearance:none;width:100%;
  background:rgba(255,255,255,.03);
  border:0;border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0;padding:10px 0;color:var(--ink-f,#F2F0EC);
  font-family:var(--read);font-size:15px;line-height:1.4;
  transition:border-color .3s,background .3s;
}
.page-contact .contact-field select{
  background-image:linear-gradient(45deg,transparent 50%,rgba(242,240,236,.45) 50%),
    linear-gradient(135deg,rgba(242,240,236,.45) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:28px;
}
.page-contact .contact-field select option{background:#0A0A0B;color:#F2F0EC}
.page-contact .contact-field input:focus,
.page-contact .contact-field textarea:focus,
.page-contact .contact-field select:focus{
  outline:none;border-bottom-color:var(--brand-red,#E01B18);
  background:rgba(224,27,24,.05);
}
.page-contact .contact-field input[readonly]{
  color:rgba(242,240,236,.55);cursor:default;
}
.page-contact .contact-field textarea{resize:vertical;min-height:72px}
.page-contact .contact-field.is-invalid input,
.page-contact .contact-field.is-invalid textarea,
.page-contact .contact-field.is-invalid select{
  border-bottom-color:rgba(224,27,24,.85);
}
.page-contact .contact-help{
  margin:0;font-family:var(--read);font-size:12px;line-height:1.4;
  color:rgba(242,240,236,.34);
}
.page-contact .contact-error{
  margin:0;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.9);
}
.page-contact .contact-chip-grid{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;
}
.page-contact .contact-chip{display:inline-flex;align-items:center;cursor:pointer}
.page-contact .contact-chip input{
  position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
}
.page-contact .contact-chip span{
  display:inline-block;padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(242,240,236,.48);
  transition:border-color .3s,color .3s,background .3s;
}
.page-contact .contact-chip:hover span{border-color:rgba(255,255,255,.28);color:rgba(242,240,236,.72)}
.page-contact .contact-chip input:focus-visible + span{
  outline:2px solid rgba(224,27,24,.55);outline-offset:2px;
}
.page-contact .contact-chip input:checked + span{
  border-color:rgba(224,27,24,.7);
  color:#F2F0EC;background:rgba(224,27,24,.14);
}
.page-contact .contact-chips{border:0;padding:0;margin:0}
.page-contact .contact-chips legend{padding:0;margin:0 0 6px}

.page-contact .contact-extra{
  margin:20px 0 0;padding:16px 0 0;
  border:0;border-top:1px solid rgba(224,27,24,.28);
  animation:contactReveal .4s ease both;
}
.page-contact .contact-extra[hidden]{display:none!important}
.page-contact .contact-extra legend{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.8);padding:0 0 12px;
}
.page-contact .contact-hp{
  position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;
}

/* ---- submit: visible accent CTA ---- */
.page-contact .contact-submit{
  margin-top:24px;
  display:grid;grid-template-columns:1fr auto;
  gap:16px 24px;align-items:end;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.page-contact .contact-submit-note{
  margin:0 0 6px;font-family:var(--read);font-size:13px;
  color:rgba(242,240,236,.48);max-width:42ch;line-height:1.45;
}
.page-contact .contact-privacy{
  margin:0;font-family:var(--read);font-size:12px;
  color:rgba(242,240,236,.34);max-width:46ch;line-height:1.45;
}
.page-contact .contact-privacy a{
  color:rgba(242,240,236,.6);border-bottom:1px solid rgba(255,255,255,.6);
  text-decoration:none;transition:color .25s,border-color .25s;
}
.page-contact .contact-privacy a:hover,
.page-contact .contact-privacy a:focus-visible{
  color:#fff;border-bottom-color:#fff;
}
.page-contact .contact-form-status{
  margin:8px 0 0;font-family:var(--read);font-size:13px;
  color:rgba(255,255,255,.95);max-width:42ch;
}
.page-contact .contact-send-btn{
  appearance:none;cursor:pointer;border:0;
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--disp);font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  color:#F7F4F0 !important;
  background:#000 !important;
  padding:16px 24px;border-radius:4px;
  box-shadow:none;
  transition:transform .3s,box-shadow .3s,filter .3s;
}
.page-contact .contact-send-btn .arr{display:inline-block;transition:transform .3s}
.page-contact .contact-send-btn:hover{
  transform:translateY(-1px);
  background: #000;
  box-shadow:none;
}
.page-contact .contact-send-btn:hover .arr{transform:translateX(4px)}
.page-contact .contact-send-btn:focus-visible{
  outline:2px solid rgba(224,27,24,.7);outline-offset:3px;
}
.page-contact .contact-send-btn.is-loading{opacity:.65;pointer-events:none}
.page-contact .contact-send-btn .btn-label{margin-right:2px}

/* ---- success ---- */
.page-contact .contact-success{
  padding:clamp(20px,3vh,32px) 0;
  animation:contactReveal .5s ease both;
}
.page-contact .contact-success-title{
  margin:0 0 12px;font-family:var(--disp);font-variation-settings:"wdth" 114;
  font-weight:900;font-size:clamp(26px,4vw,44px);
  letter-spacing:-.04em;text-transform:uppercase;line-height:.95;
}
.page-contact .contact-success-lead{
  margin:0 0 22px;font-family:var(--read);font-size:15px;
  line-height:1.55;color:rgba(242,240,236,.52);max-width:40ch;
}
.page-contact .contact-success-actions{display:flex;flex-wrap:wrap;gap:12px 16px}
.page-contact .contact-form-shell.is-success #contactFormPanel{display:none}
.page-contact .contact-form-shell.is-success #contactSuccess{display:block}

/* ---- info band (direct + field) ---- */
.page-contact .contact-info-band{
  padding:clamp(32px,5vh,56px) var(--st-pad, clamp(16px,3.5vw,40px));
  border-top:1px solid rgba(255,255,255,.05);background:#070809;
}
.page-contact .contact-info-grid{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:clamp(24px,4vw,56px);max-width:1100px;margin:0 auto;
  align-items:start;
}
.page-contact .contact-direct-title,
.page-contact .contact-field-note-title{
  margin:0 0 14px;font-family:var(--disp);font-variation-settings:"wdth" 114;
  font-weight:900;font-size:clamp(18px,2.4vw,28px);
  letter-spacing:-.03em;text-transform:uppercase;
}
.page-contact .contact-direct-meta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin:0;max-width:none;
}
.page-contact .contact-direct-meta dt{
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(242,240,236,.3);margin:0 0 5px;
}
.page-contact .contact-direct-meta dd{
  margin:0;font-family:var(--read);font-size:15px;
  color:rgba(242,240,236,.78);
}
.page-contact .contact-direct-meta a{
  color:inherit;text-decoration:none;border-bottom:1px solid rgba(224,27,24,.5);
}
.page-contact .contact-direct-meta a:hover{border-bottom-color:var(--brand-red,#E01B18)}
.page-contact .contact-muted{color:rgba(242,240,236,.32);font-style:italic}
.page-contact .contact-field-note{
  padding:0;border:0;background:transparent;text-align:left;
  border-left:1px solid rgba(224,27,24,.35);padding-left:clamp(16px,2.5vw,28px);
}
.page-contact .contact-field-note-inner{max-width:none;margin:0}
.page-contact .contact-field-note p{
  margin:0 0 10px;font-family:var(--read);font-size:14px;
  line-height:1.55;color:rgba(242,240,236,.48);
}
.page-contact .contact-field-note p:last-child{margin-bottom:0}

/* ---- process: horizontal ---- */
.page-contact .contact-next{
  padding:clamp(28px,4.5vh,48px) var(--st-pad, clamp(16px,3.5vw,40px));
  border-top:1px solid rgba(255,255,255,.05);
}
.page-contact .contact-next-inner{max-width:1180px;margin:0 auto}
.page-contact .contact-next-head{margin-bottom:18px}
.page-contact .contact-next-title{
  margin:0;font-family:var(--disp);font-variation-settings:"wdth" 114;
  font-weight:900;font-size:clamp(18px,2.4vw,28px);
  letter-spacing:-.03em;text-transform:uppercase;
}
.page-contact .contact-next-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px 16px;
}
.page-contact .contact-next-steps li{
  display:block;padding:12px 0 0;
  border-top:1px solid rgba(224,27,24,.35);
}
.page-contact .contact-next-steps li > span{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  color:rgba(255,255,255,.8);margin-bottom:8px;
}
.page-contact .contact-next-steps h3{
  margin:0;font-family:var(--disp);font-variation-settings:"wdth" 114;
  font-weight:900;font-size:13px;
  letter-spacing:-.02em;text-transform:uppercase;
}
.page-contact .contact-next-steps p{
  margin:6px 0 0;font-family:var(--read);font-size:12px;
  color:rgba(242,240,236,.45);line-height:1.4;
}

.page-contact .partner-cta{
  min-height:min(48vh,420px);
}
.page-contact .partner-cta-inner{
  padding:clamp(48px,7vh,80px) var(--st-pad, clamp(16px,3.5vw,40px)) clamp(40px,6vh,64px);
}

@keyframes contactReveal{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

@media(max-width:980px){
  .page-contact .contact-desk{grid-template-columns:1fr}
  .page-contact .contact-desk > .section-preview-shell{display:block}
  .page-contact .contact-types{
    position:static;max-height:none;overflow:visible;border-right:0;
    border-bottom:1px solid rgba(255,255,255,.06);
    padding-right:var(--st-pad, 16px);
  }
  .page-contact .contact-types-inner{max-width:none}
  .page-contact .contact-type-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-contact .contact-form-inner{max-width:none}
  .page-contact .contact-fields{grid-template-columns:1fr 1fr}
  .page-contact .contact-field-half{grid-column:span 1!important}
  .page-contact .contact-info-grid{grid-template-columns:1fr}
  .page-contact .contact-field-note{
    border-left:0;padding-left:0;border-top:1px solid rgba(224,27,24,.3);padding-top:18px;
  }
  .page-contact .contact-direct-meta{grid-template-columns:1fr 1fr 1fr}
  .page-contact .contact-next-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-contact .contact-submit{grid-template-columns:1fr}
}
@media(max-width:720px){
  .page-contact .contact-hero.st-hero{
    min-height:min(38vh,300px);max-height:none;
  }
  .page-contact .contact-fields,
  .page-contact .contact-fields-dense{grid-template-columns:1fr}
  .page-contact .contact-type-grid{grid-template-columns:1fr}
  .page-contact .contact-direct-meta{grid-template-columns:1fr}
  .page-contact .contact-next-steps{grid-template-columns:1fr 1fr}
  .page-contact .contact-hero .st-hero-title{font-size:clamp(22px,7vw,30px)}
}
@media(prefers-reduced-motion:reduce){
  .page-contact .contact-type,
  .page-contact .contact-extra,
  .page-contact .contact-success,
  .page-contact .contact-send-btn{
    transition:none!important;animation:none!important;
  }
}