/* ==========================================================================
   NEMA X — Contact Page
   Two sections: 01 Contact (studio index + a large rotate-only globe) and
   02 Project Inquiry (the form). Scoped entirely to template-contact.php
   (inc/setup.php gates the enqueue by is_page_template()) — nothing here
   reaches any other template. Reuses existing tokens/.dark/.eyebrow/.reveal
   rather than inventing a parallel design language.
   ========================================================================== */

.ctp-hero{
  min-height:clamp(560px, 74vh, 860px);
  display:flex; align-items:center;
  padding:var(--pad-lead) 0;
}
.ctp-grid{
  display:grid; grid-template-columns:1fr; gap:var(--s-7);
  align-items:center; width:100%;
}
@media (min-width:900px){
  .ctp-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(40px,5vw,80px); }
}

.ctp-copy{ max-width:560px; }
.ctp-heading{
  font-family:var(--f-display); font-weight:400; font-size:clamp(30px,4.2vw,52px);
  line-height:var(--lh-mega); letter-spacing:var(--ls-head); margin-top:var(--s-3);
  text-wrap:balance;
}
.ctp-intro{
  color:var(--on-dark-soft); font-size:15px; line-height:var(--lh-body);
  max-width:46ch; margin-top:var(--s-4);
}

/* ---- Studio index — a quiet technical dl, label(mono)/value(body) rows,
   not a card. Matches the "STUDIO / MAIL / PHONE / COORDINATES" structure
   requested — one dedicated "Open in Maps" affordance below it rather than
   the whole address underlined. ---- */
.ctp-index{
  margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:16px;
}
.ctp-index-row{ display:grid; grid-template-columns:110px 1fr; gap:16px; align-items:baseline; }
.ctp-index-row dt{
  font-family:var(--f-mono); font-size:10px; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--stamp-on-dark);
}
.ctp-index-row dd{ display:flex; flex-direction:column; gap:2px; color:var(--on-dark); font-size:14px; line-height:var(--lh-read); }
.ctp-index-lead{ color:var(--paper); }
.ctp-index-row dd a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line-dark); width:fit-content; transition:border-color var(--i3) var(--ease-instrument); }
.ctp-index-row dd a:hover, .ctp-index-row dd a:focus-visible{ border-color:var(--stamp-on-dark); }

/* ---- CTA row — two restrained text CTAs, no boxed buttons. Studio
   Location is secondary (dim at rest, sharpens on hover); Start a Project
   reuses the Footer's own .colophon-cta component verbatim (mono label +
   arrow-right icon, underline draws in on hover) so the two strongest CTAs
   on the site share one visual language instead of two. ---- */
.ctp-cta-row{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:clamp(24px,3vw,36px); margin-top:var(--s-5);
}
@media (max-width:539px){
  .ctp-cta-row{ flex-direction:column; align-items:flex-start; gap:18px; }
}

.ctp-maps-link{
  font-family:var(--f-mono); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--on-dark); text-decoration:underline; text-underline-offset:3px;
  opacity:.68; transition:opacity var(--i2) var(--ease-instrument);
}
.ctp-maps-link:hover, .ctp-maps-link:focus-visible{ opacity:1; }
.ctp-maps-link-arrow{ display:inline-block; transition:transform var(--i2) var(--ease-instrument); }
.ctp-maps-link:hover .ctp-maps-link-arrow, .ctp-maps-link:focus-visible .ctp-maps-link-arrow{ transform:translate(1px,-1px); }

.ctp-primary-cta{ font-size:13px; }

/* ---- Section transition ---- */
.ctp-divider{ height:1px; background:var(--line-dark); transform-origin:left; }
.ctp-divider.reveal{ transform:scaleX(0); opacity:1; transition:transform var(--i5) var(--ease-instrument); }
.ctp-divider.reveal.is-visible{ transform:scaleX(1); }

/* ---- Globe ----
   Three admin-editable size presets, each its own responsive clamp() so
   "Small/Medium/Large" stay meaningfully different at every breakpoint;
   the canvas itself resizes in JS (contact-globe.js's resize(), reading
   .ctp-globe-wrap's actual rendered width), so these custom properties
   only ever bound the wrap, never the drawing. */
.ctp-globe-area{ display:flex; justify-content:center; }
.ctp-globe-wrap{
  position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  width:clamp(320px, 38vw, 480px); /* medium — default */
}
.ctp-globe-wrap--small{ width:clamp(280px, 32vw, 400px); }
.ctp-globe-wrap--large{ width:clamp(360px, 42vw, 540px); }
@media (max-width:640px){
  .ctp-globe-wrap,
  .ctp-globe-wrap--small,
  .ctp-globe-wrap--large{ width:clamp(280px, 70vw, 340px); }
}
.ctp-globe-canvas{ cursor:grab; touch-action:none; width:100%; height:100%; }
.ctp-globe-canvas:active{ cursor:grabbing; }

/* A quiet annotation, not a UI tooltip — matches the Archive globe's own
   .globe-tooltip language exactly (no fill, no border, no shadow). */
.ctp-globe-hint{
  position:absolute; pointer-events:none; transform:translate(-50%,-140%);
  font-family:var(--f-mono); font-size:10px; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--paper); white-space:nowrap; z-index:2; text-align:center;
  padding-bottom:2px; border-bottom:1px solid var(--stamp-on-dark);
}
.ctp-globe-hint-coords{ display:block; color:var(--on-dark-soft); font-size:9px; letter-spacing:var(--ls-tight); margin-top:2px; }

@media (max-width:640px){
  .ctp-index-row{ grid-template-columns:90px 1fr; }
}

/* ==========================================================================
   Inquiry form — reuses the homepage Project Inquiry form's exact field/
   button/state classes (.field, .chips, .chip, .btn-mono, .field-error,
   .contact-success*) so assets/js/contact.js and inc/ajax-contact.php work
   completely unmodified here. Those shared classes default to light-section
   colors (assets/css/system.css / pages/home.css); every rule below only
   adapts their color values for this page's dark background — never
   touches layout/behavior, and since this stylesheet loads nowhere else,
   none of it can bleed into the homepage's own (light) presentation of the
   same classes.
   ========================================================================== */
.ctp-form-section{ padding:var(--pad-beat) 0 var(--pad-standard); }
.ctp-form-inner{ max-width:960px; }
.ctp-form-heading{
  font-family:var(--f-display); font-weight:400; font-size:clamp(24px,3vw,34px);
  line-height:var(--lh-mega); letter-spacing:var(--ls-head); margin-top:var(--s-3); margin-bottom:var(--s-6);
}

.ctp-form-grid{ display:grid; grid-template-columns:1fr; column-gap:40px; }
@media (min-width:768px){
  .ctp-form-grid{ grid-template-columns:1fr 1fr; }
}
.ctp-field--full{ grid-column:1/-1; }

.ctp-form .hp-field{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.ctp-form .submit-row{ display:flex; align-items:center; gap:20px; margin-top:var(--s-3); }

.ctp-form .field label{ color:var(--on-dark-soft); }
.ctp-form .field input,
.ctp-form .field textarea{
  color:var(--paper); border-bottom-color:var(--line-dark); font-family:var(--f-body);
}
.ctp-form .field input::placeholder,
.ctp-form .field textarea::placeholder{ color:var(--on-dark-soft); opacity:.6; }
.ctp-form .field input:focus,
.ctp-form .field textarea:focus{ border-color:var(--stamp-on-dark); }

.ctp-form .chip{ border-color:var(--line-dark); color:var(--on-dark); }
.ctp-form .chip[aria-pressed="true"]{ border-color:var(--stamp-on-dark); color:var(--stamp-on-dark); background:rgba(222,130,103,.10); }
.ctp-form .chip-icon{ --icon-size:14px; flex-shrink:0; opacity:.6; }
.ctp-form .chip[aria-pressed="true"] .chip-icon{ opacity:1; }

.ctp-form .field-error{ color:var(--stamp-on-dark); }

.ctp-form .contact-trust{ color:var(--on-dark-soft); }

.ctp-form .btn-mono{ border-color:var(--paper); color:var(--paper); display:inline-flex; align-items:center; gap:10px; }
.ctp-form .btn-mono:hover{ background:var(--paper); color:var(--ink); }
.ctp-submit-arrow{ --icon-size:14px; }

.contact-success{ max-width:52ch; }
.contact-success .eyebrow{ margin-bottom:var(--s-3); }
.contact-success-ref{ font-family:var(--f-display); font-weight:400; font-style:italic; font-size:clamp(22px,2.8vw,28px); letter-spacing:var(--ls-read); }
.contact-success-message{ color:var(--on-dark-soft); font-size:15px; line-height:var(--lh-body); margin-top:var(--s-3); font-variant-numeric:oldstyle-figures; }