/* ══════════════════════════════════════════════════════════════════
   STOBOX — contact v3 — page-specific styles
   Loads after /css/v3-system.css. Adds the dark hero shell, contact
   form, side info cards, and HubSpot meeting embed styling.
   ══════════════════════════════════════════════════════════════════ */

/* ── HERO (mirrors index-v3 / engagement-v3 shell) ────────────── */
.hero{
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: calc(100vh - 52px);
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
  color: var(--bg);
}
.hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: 0 0;
  mask-image: linear-gradient(to bottom, transparent, black 8%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 75%, transparent);
  pointer-events: none;
  z-index: 1;
}
.hero::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, rgba(10,14,44,0.55) 70%, var(--bg-dark) 100%);
  pointer-events: none;
  z-index: 1;
}
@keyframes bg-drift-a{
  0%   { transform: translate3d(0,    0,    0) scale(1.10) }
  50%  { transform: translate3d(-4%,  -3%,  0) scale(1.20) }
  100% { transform: translate3d(0,    0,    0) scale(1.10) }
}
.hero .sec-bg-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  display: block;
  animation: bg-drift-a 22s ease-in-out infinite;
}
@keyframes glow-breathe{
  0%, 100%{ opacity: 0.55; filter: blur(70px) }
  50%     { opacity: 1;    filter: blur(90px) }
}
.hero-glow{
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  top: -10%;
  left: 35%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(99,91,255,0.45) 0%,
      rgba(99,91,255,0.20) 30%,
      rgba(99,91,255,0.05) 60%,
      transparent 80%);
  pointer-events: none;
  z-index: 1;
  animation: glow-breathe 7s ease-in-out infinite;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}

.hero-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 80px var(--gutter) 60px;
  position: relative;
  z-index: 2;
}

.hero-eye{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-hi);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.hero-eye::before{
  content: '';
  width: 24px; height: 2px;
  background: var(--accent-hi);
}

.hero h1{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 116px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--bg);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.hero h1 em{
  font-style: italic;
  color: var(--accent-hi);
}

.hero-sub{
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 64ch;
  margin-bottom: 32px;
}
.hero-sub strong{ color: var(--bg); font-weight: 600 }

/* Hero ribbon — full-bleed dark band on bottom edge of hero */
.hero-ribbon{
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--bg-dark-2);
  position: relative;
  z-index: 3;
  padding: 0 var(--gutter);
}
.ribbon-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ribbon-item{
  padding: 26px 28px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ribbon-item:last-child{ border-right: 0 }
.ribbon-key{
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.ribbon-val{
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  color: var(--bg);
  line-height: 1;
  letter-spacing: -0.022em;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.ribbon-unit{
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
@media (max-width: 1100px){
  .ribbon-inner{ grid-template-columns: repeat(2, 1fr) }
  .ribbon-item:nth-child(2n){ border-right: 0 }
  .ribbon-item:nth-child(-n+2){ border-bottom: 1px solid rgba(255,255,255,0.08) }
}
@media (max-width: 600px){
  .ribbon-item{ padding: 16px 18px }
  .ribbon-val{ font-size: 22px }
}

/* ── MAIN: contact split layout ──────────────────────────────── */
.contact-main{
  padding: 90px var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.contact-grid{
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 1000px){
  .contact-grid{ grid-template-columns: 1fr; gap: 48px }
}

/* ── Left column: copy + contact details + team ───────────────── */
.ct-left .eye{ margin-bottom: 22px }
.ct-left .stitle{ font-size: clamp(34px, 3.8vw, 56px); margin-bottom: 22px }
.ct-left .slead{ margin-bottom: 36px }

.ct-details{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
.ct-d-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-2);
}
.ct-d-item svg{
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}
.ct-d-item a{
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.ct-d-item a:hover{ color: var(--accent); border-bottom-color: var(--accent) }

.ct-sla{
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  padding: 16px 18px;
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  margin-bottom: 36px;
}
.ct-sla strong{ color: var(--ink); font-weight: 600 }

.ct-team-label{
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.ct-team{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 28px;
  margin-bottom: 36px;
}
.ct-member{
  display: flex;
  align-items: center;
  gap: 18px;
}
.ct-avatar{
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-3);
  border: 1px solid var(--rule);
}
.ct-avatar img{ width: 100%; height: 100%; object-fit: cover }
.ct-m-info{ display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.ct-m-name{
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.014em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.ct-m-role{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.ct-m-li{
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  transition: color var(--t-fast);
}
.ct-m-li:hover{ color: var(--accent-lo) }

.ct-social{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ct-social a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 1px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.ct-social a:hover{ border-color: var(--accent); color: var(--accent) }

@media (max-width: 600px){
  .ct-team{ grid-template-columns: 1fr }
}

/* ── Right column: tabs + form / meeting embed ────────────────── */
.ct-form-block{
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 36px 32px;
}
.ct-tabs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 18px;
  border: 1px solid var(--rule);
  background: var(--rule);
  position: relative;
}
.ct-tab{
  background: var(--bg);
  border: 0;
  padding: 18px 22px;
  font-family: var(--body);
  letter-spacing: -0.005em;
  color: var(--ink-3);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  transition: background var(--t-base) var(--ease),
              color var(--t-fast);
}
.ct-tab + .ct-tab{ border-left: 1px solid var(--rule) }
.ct-tab-title{
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--ink);
}
.ct-tab-sub{
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ct-tab:hover{ background: var(--bg-2) }
.ct-tab:hover .ct-tab-title{ color: var(--ink) }
.ct-tab.ct-tab-active{
  background: var(--accent);
  color: var(--bg);
}
.ct-tab.ct-tab-active .ct-tab-title{ color: var(--bg) }
.ct-tab.ct-tab-active .ct-tab-sub{ color: rgba(255,255,255,0.78) }
.ct-tab:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 2;
}

/* Compass alt path — sits beneath tabs as a third option */
.ct-alt{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  margin-bottom: 32px;
  border: 1px solid var(--rule);
  background: var(--accent-bg);
  text-decoration: none;
  position: relative;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base);
}
.ct-alt::before{
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--accent);
  transition: width var(--t-base) var(--ease);
}
.ct-alt:hover{
  background: rgba(99,91,255,0.12);
  border-color: var(--accent-bd);
}
.ct-alt:hover::before{ width: 6px }
.ct-alt-eye{
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ct-alt-row{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ct-alt-title{
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.ct-alt-meta{
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.ct-alt-arrow{
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  color: var(--accent);
  align-self: end;
  transition: transform var(--t-base) var(--ease);
}
.ct-alt:hover .ct-alt-arrow{ transform: translateX(4px) }
@media (max-width: 600px){
  .ct-tabs{ grid-template-columns: 1fr }
  .ct-tab + .ct-tab{ border-left: 0; border-top: 1px solid var(--rule) }
  .ct-tab-title{ font-size: 16px }
  .ct-alt-title{ font-size: 18px }
}

.ct-pane{ display: none }
.ct-pane.ct-pane-active{ display: block }

/* ── Meeting embed wrap ───────────────────────────────────────── */
.meeting-embed-wrap{
  margin: 0 -8px;
}
.meetings-iframe-container{
  min-height: 660px;
  border: 1px solid var(--rule);
}

/* ── Form: v3 inputs ──────────────────────────────────────────── */
.ct-form{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ct-row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px){
  .ct-row-2{ grid-template-columns: 1fr }
}

.ct-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ct-label{
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ct-field input,
.ct-field select,
.ct-field textarea{
  font-family: var(--body);
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  border-radius: 1px;
  width: 100%;
  transition: border-color var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder{ color: var(--ink-4) }
.ct-field input:hover,
.ct-field select:hover,
.ct-field textarea:hover{ border-color: var(--ink-5) }
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus{
  outline: none;
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.ct-field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b70' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.ct-field textarea{
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
  font-family: var(--body);
}

.ct-consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  padding: 6px 0;
}
.ct-consent input{
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.ct-consent a{
  color: var(--accent);
  border-bottom: 1px solid var(--accent-bd);
}
.ct-consent a:hover{ color: var(--accent-lo); border-bottom-color: var(--accent-lo) }

/* Honeypot — completely hidden */
.ct-hp{
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.ct-submit{
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--bg);
  background: var(--accent);
  padding: 14px 22px;
  border-radius: 1px;
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base);
  align-self: flex-start;
}
.ct-submit::after{
  content: '→';
  transition: transform var(--t-base) var(--ease);
}
.ct-submit:hover:not(:disabled){
  background: var(--accent-lo);
  border-color: var(--accent-lo);
}
.ct-submit:hover:not(:disabled)::after{ transform: translateX(3px) }
.ct-submit:disabled{ opacity: .55; cursor: wait }

.ct-status{
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.55;
  padding: 0;
  min-height: 20px;
}
.ct-status.ok{
  color: var(--accent-lo);
  background: var(--accent-bg);
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
}
.ct-status.err{
  color: #991b1b;
  background: rgba(220, 38, 38, 0.08);
  padding: 12px 14px;
  border-left: 3px solid #dc2626;
}

@media (max-width: 600px){
  .ct-form-block{ padding: 24px 20px }
  .meetings-iframe-container{ min-height: 720px }
}