:root{
  --bg:#050914;
  --bg2:#08111f;
  --panel:#0d1422;
  --panel2:#101827;
  --border:#22304a;
  --text:#f6f8ff;
  --muted:#aab3c5;
  --muted2:#7f8aa3;
  --blue:#4f7cff;
  --blue2:#72a1ff;
  --page-max:1180px;
  --content-max:1044px;
  --gutter:68px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-width:1180px}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 78% 7%,rgba(43,88,210,.23),transparent 34%),
    linear-gradient(180deg,#050914 0%,#07101c 100%);
  overflow-x:auto;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* Page shell */
.nav,
.hero,
.content,
.footer,
.legal{
  width:var(--page-max);
  max-width:var(--page-max);
  margin-left:auto;
  margin-right:auto;
}

/* Header */
.nav{
  min-height:104px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px var(--gutter);
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(5,9,20,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.brand img{
  width:184px;
  height:auto;
  display:block;
}

.navlinks{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:15px;
  color:#fff;
}

.navlinks a{
  color:#fff;
  display:inline-flex;
  align-items:center;
  line-height:1;
  opacity:.92;
}


.navlinks a.active{
  color:var(--blue2);
  position:relative;
  opacity:1;
}

.navlinks a.active::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-16px;
  width:28px;
  height:2px;
  border-radius:999px;
  background:var(--blue);
}

.navlinks a:hover{
  color:var(--blue2);
  opacity:1;
}





/* Hero */
.hero{
  position:relative;
  min-height:385px;
  padding:62px var(--gutter) 54px;
  overflow:hidden;
}

.hero::before{
  content:"CONTACT GAUSSIQ";
  display:block;
  margin:0 0 22px;
  color:var(--blue2);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:14px;
  font-weight:700;
}

.hero::after{
  content:"";
  position:absolute;
  right:var(--gutter);
  top:46px;
  width:560px;
  height:285px;
  background:
    radial-gradient(circle at 58% 52%,rgba(79,124,255,.36),transparent 26%),
    radial-gradient(circle at 72% 46%,rgba(0,134,255,.22),transparent 26%),
    url("../images/hero-wave.svg");
  background-repeat:no-repeat;
  background-size:760px auto;
  background-position:center;
  opacity:.62;
  pointer-events:none;
}

.hero h1{
  position:relative;
  z-index:2;
  max-width:520px;
  margin:0 0 24px;
  font-size:54px;
  line-height:1.08;
  letter-spacing:-.052em;
  color:#fff;
}

.hero p{
  position:relative;
  z-index:2;
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}

/* Contact card wrapper */
.content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:0 var(--gutter) 34px;
  align-items:stretch;
}

.form,
.info{
  min-height:560px;
  background:linear-gradient(180deg,rgba(16,24,39,.86),rgba(9,16,28,.86));
  border:1px solid var(--border);
  padding:44px 42px;
}

.form{
  border-radius:14px 0 0 14px;
  border-right:0;
}

.info{
  border-radius:0 14px 14px 0;
  display:flex;
  flex-direction:column;
  gap:0;
}

.form h2,
.info h2{
  margin:0 0 30px;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.03em;
  color:#fff;
}

/* Form */
input,
textarea,
select{
  width:100%;
  margin:0 0 22px;
  padding:16px 18px;
  background:rgba(13,20,34,.9);
  border:1px solid #2c3b59;
  border-radius:7px;
  color:#fff;
  font:inherit;
  font-size:15px;
  outline:none;
}

textarea{
  min-height:118px;
  resize:vertical;
}

input::placeholder,
textarea::placeholder{
  color:#8f9ab0;
}

select{
  color:#c4cada;
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(79,124,255,.85);
  box-shadow:0 0 0 3px rgba(79,124,255,.14);
}

button{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:linear-gradient(135deg,#356bff,#4f7cff);
  color:#fff;
  padding:16px 24px;
  border-radius:8px;
  font-weight:600;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 40px rgba(79,124,255,.25);
  cursor:pointer;
  font:inherit;
}

button::after{
  content:"→";
  margin-left:auto;
}

/* Other ways to connect - updated HTML version */
.contact-method{
  display:flex;
  align-items:flex-start;
  gap:22px;
  padding:26px 0;
  border-bottom:1px solid rgba(34,48,74,.88);
}

.contact-method:first-of-type{
  padding-top:0;
}

.contact-method:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.contact-method > img{
  width:62px;
  height:62px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  flex:0 0 62px;
  object-fit:contain;
  display:block;
}

.contact-method h3{
  margin:0 0 6px;
  font-size:17px;
  line-height:1.3;
  font-weight:700;
  color:#fff;
}

.contact-method a{
  display:block;
  margin:0 0 8px;
  font-size:16px;
  line-height:1.4;
  color:var(--blue2);
}

.contact-method a:hover{
  text-decoration:underline;
}

.contact-method p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
  max-width:330px;
}

.contact-method p + p{
  margin-top:8px;
}

/* Fallback: if the old paragraph-only HTML is still being used */
.info > p{
  display:block;
  position:relative;
  margin:0;
  padding:0 0 24px 86px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
  border-bottom:1px solid rgba(34,48,74,.88);
}

.info > p + p{
  padding-top:26px;
}

.info > p:last-child{
  border-bottom:0;
}

.info > p::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:62px;
  height:62px;
  border:1px solid var(--blue);
  border-radius:50%;
  background:rgba(79,124,255,.08);
  box-shadow:0 0 26px rgba(79,124,255,.12);
}

.info > p + p::before{
  top:26px;
}

/* Homepage-matched footer */
.footer{
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr 1.2fr;
  gap:44px;
  padding:72px var(--gutter) 42px;
  color:var(--text);
}

.footer-brand img{
  width:168px;
  height:auto;
  display:block;
  margin:0 0 14px;
}

.footer p{
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
  max-width:270px;
  margin:0;
}

.footer h4{
  font-size:14px;
  color:#fff;
  margin:12px 0 16px;
  font-weight:700;
}

.footer a{
  display:block;
  color:#d7dcea;
  margin:0 0 12px;
  font-size:14px;
}

.footer a:hover{
  color:var(--blue2);
}

.socials{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.socials a{
  margin:0;
}

.socials img{
  width:38px;
  height:38px;
  display:block;
}

.legal{
  width:1044px;
  max-width:1044px;
  padding:18px 0 36px;
  display:flex;
  justify-content:space-between;
  color:var(--muted2);
  font-size:13px;
  border-top:1px solid var(--border);
}

.legal a{
  margin-left:26px;
  color:var(--muted2);
}

.legal a:hover{
  color:var(--blue2);
}

/* Old simple footer fallback */
body > footer:not(.footer){
  width:1044px;
  max-width:1044px;
  margin:0 auto;
  padding:24px 0 36px;
  color:var(--muted2);
  font-size:13px;
  border-top:1px solid var(--border);
  background:transparent;
}

/* Preserve the designed canvas on narrow browser windows */
@media (max-width:1179px){
  .nav,
  .hero,
  .content,
  .footer,
  .legal,
  body > footer:not(.footer){
    margin-left:0;
    margin-right:0;
  }
}



/* FINAL OTHER-WAYS-TO-CONNECT ICON FIX
   The SVG already contains the circle. Do not add another CSS circle here.
*/
.info .contact-method > img{
  width:62px !important;
  height:62px !important;
  flex:0 0 62px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  object-fit:contain !important;
  display:block !important;
}



/* ===============================
   CONTACT PROGRAM SECTION
   Adds the Design Partner Program / Typical Engagement card
   =============================== */

.contact-program{
  width:var(--page-max);
  max-width:var(--page-max);
  margin:0 auto;
  padding:40px var(--gutter) 0;
}

.program-card{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:32px 36px;
  border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(
    180deg,
    rgba(16,24,39,.85),
    rgba(9,16,28,.85)
  );
  box-shadow:0 0 40px rgba(79,124,255,.08);
}

.program-item{
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.program-icon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid var(--blue);
  background:rgba(79,124,255,.08);
  box-shadow:0 0 24px rgba(79,124,255,.12);
  flex:0 0 56px;
  overflow:hidden;
}

/* FIX: handle both IMG and SVG icons */
.program-icon img,
.program-icon svg{
  width:26px !important;
  height:26px !important;
  max-width:26px !important;
  max-height:26px !important;
  object-fit:contain;
  display:block;
}

.program-item .eyebrow{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue2);
  font-weight:700;
  margin:0 0 8px;
}

.program-item h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.3;
  color:#fff;
  font-weight:600;
}

.program-item p{
  margin:0 0 12px;
  font-size:15px;
  color:var(--muted);
  line-height:1.55;
  max-width:380px;
}

.program-item a{
  font-size:14px;
  color:var(--blue2);
  text-decoration:none;
}

.program-item a:hover{
  text-decoration:underline;
}

.program-card .divider{
  width:1px;
  height:100%;
  min-height:120px;
  background:rgba(34,48,74,.9);
  margin:0 24px;
}

/* Include the contact program in the locked-width narrow-browser behavior */
@media (max-width:1179px){
  .contact-program{
    margin-left:0;
    margin-right:0;
  }
}


/* ------------------------------------------------------------------
   CONTACT HERO BALANCE FIX
   Aligns the Contact hero with the Design Partners hero proportions:
   - same 1180px page canvas
   - left copy constrained to the same narrow column
   - right wave graphic given the same larger visual presence
   - prevents the paragraph from running under the graphic
------------------------------------------------------------------- */

.hero{
  min-height:610px !important;
  display:grid !important;
  grid-template-columns:43% 57% !important;
  column-gap:28px !important;
  align-items:center !important;
  padding:70px var(--gutter) 76px !important;
  border-bottom:1px solid var(--border) !important;
  overflow:hidden !important;
  position:relative !important;
}

.hero::before{
  position:relative !important;
  z-index:3 !important;
  grid-column:1 !important;
  align-self:end !important;
  margin:0 0 22px !important;
  width:420px !important;
  max-width:420px !important;
}

.hero h1{
  position:relative !important;
  z-index:3 !important;
  grid-column:1 !important;
  width:420px !important;
  max-width:420px !important;
  margin:0 0 24px !important;
  font-size:52px !important;
  line-height:1.04 !important;
  letter-spacing:-.055em !important;
  font-weight:800 !important;
}

.hero p{
  position:relative !important;
  z-index:3 !important;
  grid-column:1 !important;
  width:410px !important;
  max-width:410px !important;
  margin:0 !important;
  color:#d6dbea !important;
  font-size:17px !important;
  line-height:1.58 !important;
}

.hero::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  right:var(--gutter) !important;
  top:74px !important;
  width:640px !important;
  height:430px !important;
  background:
    radial-gradient(circle at 62% 50%,rgba(79,124,255,.34),transparent 28%),
    radial-gradient(circle at 76% 44%,rgba(0,134,255,.20),transparent 28%),
    url("../images/hero-wave.svg") !important;
  background-repeat:no-repeat !important;
  background-size:970px auto !important;
  background-position:center !important;
  opacity:.78 !important;
  pointer-events:none !important;
}

/* Soft center blend like the Design Partners page, so copy and art feel integrated */
.hero .hero-blend,
.hero-blend{
  display:none !important;
}

.hero{
  background:
    linear-gradient(90deg,rgba(5,9,20,0) 0%,rgba(5,9,20,0) 34%,rgba(5,9,20,.34) 48%,rgba(5,9,20,0) 62%) !important;
}

/* Keep the fixed desktop hero when the browser is narrowed */
@media (max-width:1179px){
  .hero{
    grid-template-columns:43% 57% !important;
    padding:70px var(--gutter) 76px !important;
  }

  .hero h1{
    font-size:52px !important;
  }

  .hero p{
    width:410px !important;
    max-width:410px !important;
  }

  .hero::after{
    right:var(--gutter) !important;
    top:74px !important;
    width:640px !important;
    height:430px !important;
    background-size:970px auto !important;
  }
}

/* ------------------------------------------------------------------
   FINAL CONTACT DIVIDER SPACING — MATCH CAREERS PAGE RHYTHM
   Keep this block at the very end of the file so it overrides earlier
   Contact hero balance rules.
------------------------------------------------------------------- */

.hero{
  padding-bottom:76px !important;
}

.content{
  margin-top:70px !important;
}


/* =========================================================
   FINAL CONTACT MOBILE RESPONSIVE + HAMBURGER NAV
   Desktop layout remains unchanged.
   Mobile overrides the desktop-width canvas and enables
   a checkbox-driven hamburger navigation.
   ========================================================= */

.menu-toggle,
.hamburger{
  display:none;
}

@media (max-width:1000px){

  html,
  body{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    overflow-x:hidden !important;
  }

  .nav,
  .hero,
  .content,
  .contact-program,
  .footer,
  .legal{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Mobile header */
  .nav{
    position:sticky !important;
    top:0 !important;
    z-index:100 !important;
    min-height:96px !important;
    height:auto !important;
    padding:20px 24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:rgba(5,9,20,.86) !important;
    backdrop-filter:blur(16px) !important;
    border-bottom:1px solid rgba(255,255,255,.05) !important;
  }

  .brand{
    position:relative !important;
    z-index:110 !important;
  }

  .brand img{
    width:142px !important;
    height:auto !important;
    display:block !important;
    transform:none !important;
  }

  .menu-toggle{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;
    width:1px !important;
    height:1px !important;
  }

  .hamburger{
    display:flex !important;
    position:relative !important;
    z-index:110 !important;
    width:46px !important;
    height:46px !important;
    border:1px solid rgba(114,161,255,.36) !important;
    border-radius:12px !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:5px !important;
    background:rgba(16,24,39,.74) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.18) !important;
    cursor:pointer !important;
  }

  .hamburger span{
    display:block !important;
    width:20px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#f6f8ff !important;
    transition:transform .22s ease, opacity .18s ease !important;
  }

  .menu-toggle:checked + .hamburger span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
  }

  .menu-toggle:checked + .hamburger span:nth-child(2){
    opacity:0 !important;
  }

  .menu-toggle:checked + .hamburger span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
  }

  .navlinks{
    display:flex !important;
    position:absolute !important;
    left:24px !important;
    right:24px !important;
    top:calc(100% - 8px) !important;
    flex-direction:column !important;
    gap:0 !important;
    padding:14px !important;
    border:1px solid rgba(114,161,255,.26) !important;
    border-radius:14px !important;
    background:linear-gradient(180deg,rgba(16,24,39,.98),rgba(7,13,25,.98)) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.34) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-8px) !important;
    pointer-events:none !important;
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease !important;
    z-index:105 !important;
  }

  .menu-toggle:checked ~ .navlinks{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    pointer-events:auto !important;
  }

  .navlinks a,
  .navlinks a:not(.button){
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    padding:16px 14px !important;
    border-bottom:1px solid rgba(34,48,74,.72) !important;
    color:#f6f8ff !important;
    font-size:16px !important;
    line-height:1.2 !important;
    white-space:normal !important;
    opacity:1 !important;
  }

  .navlinks a:last-child{
    border-bottom:0 !important;
  }

  .navlinks a.active::after{
    display:none !important;
  }

  /* Hero */
  .hero{
    display:block !important;
    min-height:auto !important;
    padding:56px 28px 54px !important;
  }

  .hero::before{
    width:100% !important;
    max-width:100% !important;
  }

  .hero h1{
    width:100% !important;
    max-width:100% !important;
    font-size:42px !important;
    line-height:1.05 !important;
    margin-bottom:22px !important;
  }

  .hero p{
    width:100% !important;
    max-width:100% !important;
    font-size:18px !important;
    line-height:1.58 !important;
  }

  .hero::after{
    width:520px !important;
    height:300px !important;
    right:-180px !important;
    top:120px !important;
    background-size:760px auto !important;
    opacity:.55 !important;
  }

  /* Main content */
  .content{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding:0 28px 34px !important;
    margin-top:34px !important;
  }

  .form,
  .info{
    min-height:auto !important;
    padding:32px 28px !important;
  }

  .form{
    border-radius:14px 14px 0 0 !important;
    border-right:1px solid var(--border) !important;
    border-bottom:0 !important;
  }

  .info{
    border-radius:0 0 14px 14px !important;
  }

  .form h2,
  .info h2{
    font-size:28px !important;
  }

  input,
  textarea,
  select{
    font-size:16px !important;
  }

  .contact-method{
    gap:18px !important;
  }

  .contact-method > img{
    width:54px !important;
    height:54px !important;
    flex:0 0 54px !important;
  }

  .contact-method p{
    max-width:100% !important;
  }

  /* Program section */
  .contact-program{
    padding:18px 28px 0 !important;
  }

  .program-card{
    grid-template-columns:1fr !important;
    padding:28px 24px !important;
  }

  .program-card .divider{
    width:100% !important;
    height:1px !important;
    min-height:1px !important;
    margin:28px 0 !important;
  }

  .program-item{
    gap:18px !important;
  }

  .program-item p{
    max-width:100% !important;
  }

  /* Footer */
  .footer{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:30px !important;
    padding:40px 28px !important;
  }

  .footer > div:last-child{
    align-items:flex-start !important;
  }

  .footer .socials{
    justify-content:flex-start !important;
  }

  .footer-brand img{
    width:152px !important;
  }

  .legal{
    display:block !important;
    padding:18px 28px 34px !important;
    font-size:12px !important;
  }

  .legal span{
    display:block !important;
    margin-bottom:14px !important;
  }

  .legal a{
    margin-left:0 !important;
    margin-right:22px !important;
  }
}