/* ============================================================
   CONTACT PAGE (/contact) — ENQUIRY DESK
   Scoped to this route only. Loaded in addition to main.css.
   Reuses the finalized system verbatim (--sp-N scale, color
   tokens, .sec-head document chrome, .contact-grid/.contact-mod
   routing cards, .btn system). Every new class is prefixed .ct-
   so it can never collide with a shared/other-page component.
   No new colors, fonts, or spacing primitives are introduced.
   ============================================================ */

/* Section rhythm: vertical padding lives on the section wrapper, never on
   the .canvas inside it (preserves the canvas horizontal-only padding
   invariant established site-wide). */
.ct-block{padding:var(--sp-7) 0;scroll-margin-top:90px;}
.ct-block-top{padding-top:var(--sp-6);}
.ct-block + .ct-block{border-top:1px solid var(--border-hairline);}

/* ---- SEC 01 — DIRECT CHANNELS (quick-contact strip) ----
   The one-glance answer to "how do I reach Stravex". An engineered,
   bordered register echoing .cap-table / .contact-grid, but as compact
   info cells (not tall clickable cards) so it reads as a data strip, not
   a menu — deliberately distinct from the routing cards below it. */
.ct-quickbar{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid var(--border-hairline);
  background:linear-gradient(180deg,rgba(18,29,56,.5),rgba(10,17,36,.28));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
.ct-quickbar::before{content:"DIR. 01 — CONTACT REGISTER";position:absolute;top:-9px;left:24px;z-index:1;
  background:var(--surface-primary);padding:0 10px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;color:var(--text-faint);}
.ct-quick{position:relative;display:flex;flex-direction:column;gap:8px;
  padding:30px 20px;border-left:1px solid var(--border-hairline);min-height:132px;
  transition:background-color var(--dur-hover) ease;}
.ct-quick:first-child{border-left:none;}
.ct-quick:hover{background-color:rgba(61,106,255,.045);}
.ct-quick-label{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);}
/* -0.015em keeps a 30-char address (sales@stravextechnologies.com) on one line inside
   the 5-up cell at desktop; it wraps gracefully only once the strip itself stacks. */
.ct-quick-val{font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.35;
  color:var(--text-primary);letter-spacing:-0.015em;overflow-wrap:anywhere;
  transition:color var(--dur-hover) ease;}
a.ct-quick-val:hover,a.ct-quick-val:focus-visible{color:var(--accent-signal);}
.ct-quick-val-2{font-size:14px;color:var(--text-secondary);}
a.ct-quick-val-2{color:var(--text-secondary);}
.ct-quick-sub{margin-top:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--text-faint);line-height:1.5;}

/* ---- Shared section intro (used above routing + form) ---- */
.ct-lead{max-width:var(--measure-prose);margin-top:var(--sp-2);}
.ct-section-head{margin-bottom:var(--sp-5);}
.ct-section-head h2{font-size:clamp(24px,2.5vw,34px);margin-bottom:var(--sp-2);}

/* ---- SEC 03 — SEND AN ENQUIRY (form + reassurance rail) ---- */
.ct-form-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--sp-6);align-items:start;}

.ct-form-panel{position:relative;border:1px solid var(--border-mid);padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:linear-gradient(180deg,rgba(10,17,36,.86),rgba(6,10,22,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 70px -34px rgba(0,0,0,.65);}
.ct-form-panel::before{content:"FORM. 01 — STRUCTURED ENQUIRY";position:absolute;top:-9px;left:22px;
  background:var(--surface-primary);padding:0 10px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;color:var(--text-faint);}

.ct-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-4);}
.ct-field{display:flex;flex-direction:column;gap:9px;min-width:0;}
.ct-field-full{grid-column:1/-1;}
.ct-label{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);display:flex;align-items:baseline;gap:8px;}
.ct-label .opt{color:var(--text-faint);letter-spacing:.08em;font-size:9.5px;}
.ct-label .req{color:var(--accent-signal);font-size:12px;line-height:0;}

/* Inputs: machined, sharp, dark. Focus is the only place blue appears here —
   a brand-hover hairline plus a soft brand ring, matching the site focus token. */
.ct-input,.ct-select,.ct-textarea{width:100%;font-family:var(--font-body);font-size:15px;
  color:var(--text-primary);background:var(--color-bg-secondary);
  border:1px solid var(--border-mid);border-radius:2px;padding:13px 14px;line-height:1.4;
  transition:border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease,background-color var(--dur-hover) ease;
  -webkit-appearance:none;appearance:none;}
.ct-input::placeholder,.ct-textarea::placeholder{color:var(--text-faint);}
.ct-input:hover,.ct-select:hover,.ct-textarea:hover{border-color:var(--border-strong,var(--color-border-strong));}
.ct-input:focus,.ct-select:focus,.ct-textarea:focus{outline:none;border-color:var(--color-brand-hover);
  background:rgba(8,16,30,.9);box-shadow:0 0 0 3px rgba(61,106,255,.16);}
.ct-textarea{resize:vertical;min-height:132px;}
/* Native select chevron drawn as a mono caret so it matches the type system. */
.ct-select-wrap{position:relative;}
.ct-select{padding-right:38px;cursor:pointer;}
.ct-select-wrap::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;
  border-right:1.5px solid var(--text-faint);border-bottom:1.5px solid var(--text-faint);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:border-color var(--dur-hover) ease;}
.ct-select-wrap:focus-within::after{border-color:var(--color-brand-hover);}
.ct-select option{background:var(--color-panel);color:var(--text-primary);}
.ct-select:invalid{color:var(--text-faint);}

.ct-form-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border-hairline);}
.ct-form-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--text-faint);
  line-height:1.6;max-width:40ch;}
.ct-form .btn-primary{white-space:nowrap;}
/* Inline submit status — polite region, reserves no jumpy layout (appears in the foot row). */
.ct-form-status{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;line-height:1.5;
  color:var(--accent-signal);flex-basis:100%;margin:0;}
.ct-form-status[hidden]{display:none;}
.ct-field-error .ct-input,.ct-field-error .ct-select,.ct-field-error .ct-textarea{border-color:rgba(201,151,58,.7);}
.ct-field-msg{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--accent-alert);
  text-transform:uppercase;min-height:0;}

/* Reassurance rail — trust/guidance, NOT a duplicate contact directory. */
.ct-assure{display:flex;flex-direction:column;gap:1px;background:var(--border-hairline);
  border:1px solid var(--border-hairline);}
.ct-assure-item{background:var(--surface-primary);padding:22px 22px;display:flex;flex-direction:column;gap:8px;}
.ct-assure-item .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-signal);}
.ct-assure-item strong{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em;}
.ct-assure-item p{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0;max-width:none;}

/* ---- SEC 04 — COMPANY RECORD (full directory + connect + QR) ---- */
.ct-record{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--sp-6);align-items:start;}
.ct-dir{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-hairline);
  border:1px solid var(--border-hairline);}
.ct-dir-item{background:var(--surface-primary);padding:24px 24px;display:flex;flex-direction:column;gap:10px;
  transition:background-color var(--dur-hover) ease;}
.ct-dir-item:hover{background-color:var(--surface-secondary);}
.ct-dir-item .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);}
.ct-dir-item .v{font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--text-primary);line-height:1.5;letter-spacing:-0.005em;word-break:break-word;}
.ct-dir-item a.v{transition:color var(--dur-hover) ease;}
.ct-dir-item a.v:hover,.ct-dir-item a.v:focus-visible{color:var(--accent-signal);}
.ct-dir-item .v-2{font-size:14px;color:var(--text-secondary);font-weight:400;}
a.ct-dir-line{display:block;}

.ct-connect{border:1px solid var(--border-hairline);background:linear-gradient(180deg,rgba(18,29,56,.42),rgba(10,17,36,.24));
  padding:26px 24px;display:flex;flex-direction:column;gap:var(--sp-3);}
.ct-connect .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);}
.ct-social{display:flex;flex-direction:column;gap:2px;}
.ct-social a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--border-hairline);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--text-secondary);transition:color var(--dur-hover) ease;}
.ct-social a:last-child{border-bottom:none;}
.ct-social a:hover,.ct-social a:focus-visible{color:var(--accent-signal);}
.ct-social a .go{color:var(--text-faint);transition:transform var(--dur-hover) ease,color var(--dur-hover) ease;}
.ct-social a:hover .go{transform:translate(3px,-3px);color:var(--accent-signal);}
.ct-qr{display:flex;gap:16px;align-items:center;margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border-hairline);}
.ct-qr-glyph{flex:none;width:52px;height:52px;border:1px solid var(--border-mid);display:grid;
  grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:2px;padding:6px;background:var(--color-bg-secondary);}
.ct-qr-glyph i{background:var(--text-faint);border-radius:0;}
.ct-qr-note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-faint);line-height:1.6;margin:0;}

/* ---- SEC 05 — WHAT HAPPENS NEXT (4-step process) ---- */
.ct-process{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);counter-reset:step;}
.ct-step{position:relative;padding-top:var(--sp-3);border-top:1px solid var(--border-mid);}
/* Connector: a hairline + arrow between steps, drawn from each step except the last. */
.ct-step:not(:last-child)::after{content:"";position:absolute;top:-1px;right:calc(var(--sp-4) / -2);width:var(--sp-4);height:1px;background:var(--border-hairline);}
.ct-step-idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--accent-signal);
  display:block;margin-bottom:14px;}
.ct-step strong{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--text-primary);
  letter-spacing:-0.01em;margin-bottom:8px;}
.ct-step p{font-size:13.5px;line-height:1.65;color:var(--text-secondary);margin:0;max-width:none;}

/* ============ RESPONSIVE ============
   Quick-bar column counts are chosen so a 30-char email
   (sales@stravextechnologies.com) never wraps inside a cell: the 5-up only
   fits emails at ≥1400px, so it steps down to 3-up (1024–1399) then 2-up
   then 1-up. Each breakpoint fully re-declares the cell borders (reset +
   set) so the divider logic can't cross-contaminate between column counts. */
@media (max-width:1399px){
  .ct-quickbar{grid-template-columns:repeat(3,1fr);}
  .ct-quick{border-left:1px solid var(--border-hairline);border-top:none;}
  .ct-quick:nth-child(3n+1){border-left:none;}
  .ct-quick:nth-child(n+4){border-top:1px solid var(--border-hairline);}
}
@media (max-width:1180px){
  .ct-form-layout{grid-template-columns:1fr;gap:var(--sp-5);}
  .ct-assure{flex-direction:row;gap:1px;}
  .ct-assure-item{flex:1;}
  .ct-record{grid-template-columns:1fr;gap:var(--sp-5);}
  /* Process collapses to a vertical timeline: a hairline rail down the left,
     a node square per step (on the rail, left of the number), connectors become
     vertical. Five horizontal steps don't split evenly (5 is prime) — a stacked
     timeline reads cleaner than a ragged 3+2 grid and matches the intent.
     The node is anchored to .ct-step (left edge / on the rail), NOT to the
     number, so it never overlaps the "01" label. */
  .ct-process{grid-template-columns:1fr;gap:0;}
  .ct-step{border-top:none;padding:2px 0 var(--sp-5) var(--sp-5);}
  .ct-step:last-child{padding-bottom:0;}
  .ct-step::after{content:"";display:block;position:absolute;left:6px;top:20px;bottom:0;width:1px;height:auto;right:auto;background:var(--border-mid);}
  .ct-step:last-child::after{display:none;}
  .ct-step::before{content:"";position:absolute;left:0;top:2px;width:13px;height:13px;border:1px solid var(--accent-signal);background:var(--surface-primary);z-index:1;}
  .ct-step-idx{position:static;}
}
@media (max-width:1023px){
  .ct-quickbar{grid-template-columns:repeat(2,1fr);}
  .ct-quick{border-left:1px solid var(--border-hairline);border-top:none;}
  .ct-quick:nth-child(odd){border-left:none;}
  .ct-quick:nth-child(n+3){border-top:1px solid var(--border-hairline);}
}
@media (max-width:767px){
  .ct-block{padding:var(--sp-6) 0;}
  .ct-hero-actions{flex-direction:column;align-items:stretch;}
  .ct-hero-actions .btn{width:100%;justify-content:center;}
  .ct-quickbar{grid-template-columns:1fr;}
  .ct-quick{border-left:none!important;border-top:1px solid var(--border-hairline);min-height:0;padding:22px 20px;}
  .ct-quick:first-child{border-top:none;}
  .ct-quick-sub{margin-top:6px;}
  .ct-form-grid{grid-template-columns:1fr;}
  .ct-form-panel{padding:var(--sp-4) var(--sp-3) var(--sp-3);}
  .ct-assure{flex-direction:column;}
  .ct-dir{grid-template-columns:1fr;}
  .ct-form-foot .btn{width:100%;justify-content:center;}
  .ct-success{padding:var(--sp-4) var(--sp-3);}
}

/* ============================================================
   ENQUIRY-CENTER ADDITIONS (hero CTA · channel icons ·
   Firebase form states · success panel). Same tokens, same
   idiom — no new colors, gradients, or glass.
   ============================================================ */

/* ---- Hero primary CTA (form is now the primary action) ---- */
.ct-hero-actions{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5);}
.ct-hero-alt{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-primary);text-shadow:0 1px 3px rgba(0,0,0,0.8);display:inline-flex;align-items:center;gap:8px;transition:color var(--dur-hover) ease;}
.ct-hero-alt:hover,.ct-hero-alt:focus-visible{color:var(--accent-signal);}

/* ---- Channel icons (thin-line, matched to the /products glyph weight) ---- */
.ct-quick-icon{width:22px;height:22px;color:var(--text-faint);margin-bottom:4px;
  transition:color var(--dur-hover) ease;}
.ct-quick:hover .ct-quick-icon{color:var(--accent-signal);}

/* ---- Routing cards: down-cue instead of the outward ↗ (they jump to the form,
        no longer open a mail client) ---- */
.contact-mod .mod-arrow{font-size:15px;}

/* ---- Submit button loading state + inline spinner ---- */
.ct-form .btn-primary[aria-busy="true"]{opacity:.9;cursor:progress;pointer-events:none;animation:none;}
.ct-spin{width:13px;height:13px;border:1.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  display:inline-block;animation:ctspin .7s linear infinite;}
@keyframes ctspin{to{transform:rotate(360deg);}}
html.reduced-motion .ct-spin{animation:none;}

/* ---- Network / submit error ---- */
.ct-form-error{flex-basis:100%;margin:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;
  line-height:1.6;color:var(--accent-alert);border-left:2px solid rgba(201,151,58,.6);padding-left:12px;}
.ct-form-error[hidden]{display:none;}
.ct-form-error a{color:var(--accent-signal);}

/* ---- Success panel (replaces the form panel on a stored submission) ---- */
.ct-success[hidden]{display:none;}
.ct-success{position:relative;border:1px solid var(--border-mid);padding:var(--sp-6) var(--sp-5);
  background:linear-gradient(180deg,rgba(10,17,36,.86),rgba(6,10,22,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 70px -34px rgba(0,0,0,.65);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3);max-width:640px;}
.ct-success::before{content:"FORM. 01 — RECEIVED";position:absolute;top:-9px;left:22px;
  background:var(--surface-primary);padding:0 10px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;color:var(--text-faint);}
.ct-success-mark{width:46px;height:46px;border:1px solid var(--accent-signal);display:flex;align-items:center;justify-content:center;
  color:var(--accent-signal);box-shadow:0 0 0 4px rgba(61,106,255,.1);}
.ct-success-mark svg{width:24px;height:24px;}
.ct-success h3{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-0.015em;color:var(--text-primary);margin:0;}
.ct-success p{font-size:15px;line-height:1.65;color:var(--text-secondary);margin:0;max-width:52ch;}
.ct-success-meta{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:var(--sp-2);
  padding-top:var(--sp-3);border-top:1px solid var(--border-hairline);}
.ct-success-meta span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:var(--text-faint);
  display:flex;align-items:baseline;gap:10px;}
.ct-success-meta span b{color:var(--accent-signal);font-weight:500;}
.ct-success-again{margin-top:var(--sp-3);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-signal);display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:none;padding:0;transition:opacity var(--dur-hover) ease;}
.ct-success-again:hover{opacity:.7;}

/* ---- File Upload Progress Bar ---- */
.cr-progress-wrap{margin-top:var(--sp-2);display:flex;flex-direction:column;gap:6px;}
.cr-progress-wrap[hidden]{display:none !important;}
.cr-progress-bar-bg{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.cr-progress-bar-fill{height:100%;width:0%;background:var(--accent-signal);transition:width 0.2s ease;}
.cr-progress-text{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:.04em;}


/* Contact restructure — two-column main (contact info 45% / form 55%). Reuses existing
   .ct-quick cards, .ct-form-panel, tokens. Additive; no component restyle. */
.ct-two-col{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:var(--sp-6);align-items:start;}
.ct-info-col,.ct-form-col{min-width:0;}
.ct-info-stack{display:flex;flex-direction:column;gap:var(--sp-2);}
.ct-info-stack .ct-quick{border:1px solid var(--border-hairline);padding:20px 22px;min-height:0;}
@media (max-width:1023px){
  .ct-two-col{gap:var(--sp-4);}
}
@media (max-width:767px){
  .ct-two-col{grid-template-columns:1fr;gap:var(--sp-5);}
}