:root {
  /* Colors */
  --canvas: #f4f4f0;
  --paper: #ffffff;
  --carbon: #18181b;
  --graphite: #27272a;
  --slate: #52525b;
  --smoke: #a1a1aa;
  --ash: #e4e4e7;
  --mist: #f4f4f5;
  --mint: #dcfce7;
  --yellow: #fef08a;
  --color-carbon-black: #000000;
  --color-voltage-yellow: #fff100;

  /* Typography */
  --font-display: 'Anton', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-script: 'Mrs Saint Delafield', cursive;

  /* Motion */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .5s;
  --dur-med: .7s;
}

/* Global Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--canvas);
  color: var(--carbon);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: inherit;
}

.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}

  /* ---------- NAV ---------- */
  .nav-bar{
    height:8rem;
    display:flex; align-items:center;
    position:sticky; top:0; z-index:50;
    background:var(--canvas);
    transition:background-color .4s ease, border-radius .4s ease, box-shadow .4s ease;
  }

  /* Applied via JS (see script.js) whenever the black "About" section is
     passing directly underneath the sticky nav — the nav becomes a
     rounded black pill so it blends into the dark section, then reverts
     to the light canvas background once the section scrolls past. */
  .nav-bar.is-dark{
    background:var(--carbon);
    border-radius:0 0 32px 32px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .nav-bar.is-dark .logo-line1,
  .nav-bar.is-dark .logo-line2{color:var(--paper);}
  .nav-bar.is-dark .nav-pill{background:var(--graphite);}
  .nav-bar.is-dark .nav-pill a{color:var(--smoke);}
  .nav-bar.is-dark .nav-pill a:hover{background:#333338; color:var(--paper);}
  .nav-bar.is-dark .nav-cta{background:var(--paper); color:var(--carbon);}
  .nav-bar.is-dark .nav-cta:hover{background:var(--ash);}
  .nav-inner{
    width:100%; max-width:1200px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
  }

  /* ---------- LOGO (handwritten mark, acts as a link) ---------- */
  .site-logo{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:0.85;
    padding:4px 2px;
    -webkit-tap-highlight-color:transparent;
    transition:opacity .15s ease, transform .15s ease;
  }
  .site-logo:hover{opacity:.75;}
  .site-logo:active{transform:scale(0.97);}
  .logo-line1{
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:500;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--carbon);
    transition:color .4s ease;
  }
  .logo-line2{
    font-family:var(--font-script);
    font-size:44px;
    font-weight:400;
    letter-spacing:0.01em;
    color:var(--carbon);
    margin-top:20px;
    margin-left:75px;
    transition:color .4s ease;
  }

  .logo-line-footer{
    font-family:var(--font-script);
    font-size:24px;
  }

  @media (max-width:860px){
    .logo-line1{font-size:10px; letter-spacing:0.24em;}
    .logo-line2{font-size:34px;}
  }

  .nav-pill{
    background:var(--paper);
    border-radius:48px;
    padding:12px 8px;
    display:flex; align-items:center; gap:8px;
    transition:background-color .4s ease;
  }
  .nav-pill a{
    font-size:15px; font-weight:500;
    color:var(--slate);
    padding:10px 35px;
    border-radius:48px;
    transition:background .15s ease, color .15s ease;
  }
  .nav-pill a:hover{background:var(--mist); color:var(--carbon);}
  .nav-cta{
    background:var(--carbon); color:var(--paper);
    font-size:14px; font-weight:500;
    padding:14px 22px;
    border-radius:8px;
    border:none;
    white-space:nowrap;
    transition:background-color .4s ease, color .4s ease, transform .2s ease;
  }
  .nav-cta:hover{background:var(--graphite); transform:translateY(-1px);}
  .nav-cta:active{transform:translateY(0);}

  @media (max-width:860px){
    .nav-pill{display:none;}
    .nav-bar{height:6rem;}
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:0px 0 56px;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:end;
    min-height:calc(100vh - 6rem);
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--mint);
    color:var(--carbon);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:-0.03em;
    padding:8px 16px;
    border-radius:64px;
    margin-bottom:24px;
  }

  .hero h1{
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(48px, 8vw, 104px);
    line-height:0.9;
    letter-spacing:-0.02em;
  }

  .accent{
    background: var(--color-voltage-yellow);
    padding: 2px 6px;
    line-height: 1;
    display: inline-block;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .accent_2{
  background: var(--color-voltage-yellow);
  color: var(--color-carbon-black);
  padding: 2px 6px;
  line-height: 1;
  display: inline-block;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
  
  .hero-sub{
    margin-top:28px;
    font-size:20px;
    line-height:1.4;
    color:var(--slate);
    max-width:44ch;
  }
  .hero-actions{
    margin-top:36px;
    display:flex; flex-wrap:wrap; gap:14px;
  }
  .btn-primary{
    background:var(--carbon); color:var(--paper);
    font-size:16px; font-weight:500;
    padding:16px 28px;
    border-radius:8px; border:none;
    transition:background-color .2s ease, transform .2s ease;
  }
  .btn-primary:hover{background:var(--graphite); transform:translateY(-2px);}
  .btn-primary:active{transform:translateY(0);}
  .btn-ghost{
    background:transparent;
    border:1.5px solid var(--slate);
    color:var(--slate);
    font-size:16px; font-weight:500;
    padding:16px 28px;
    border-radius:8px;
    transition:border-color .2s ease, color .2s ease, transform .2s ease;
  }
  .btn-ghost:hover{border-color:var(--carbon); color:var(--carbon); transform:translateY(-2px);}
  .btn-ghost:active{transform:translateY(0);}

  .hero-panel{
    background:var(--paper);
    border-radius:32px;
    padding:32px;
  }
  .hero-panel .mono-label{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--smoke);
    letter-spacing:-0.03em;
    margin-bottom:18px;
    display:block;
  }
  .fix-list{list-style:none;}
  .fix-list li{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:14px 0;
    border-bottom:1px solid var(--ash);
    font-size:16px;
  }
  .fix-list li:last-child{border-bottom:none;}
  .fix-list .tag{
    font-family:var(--font-mono);
    font-size:12px;
    background:var(--mint);
    padding:4px 10px;
    border-radius:64px;
    white-space:nowrap;
  }

  @media (max-width:860px){
    .hero{grid-template-columns:1fr; padding-top:16px;}
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:80px 0;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:24px; margin-bottom:40px; flex-wrap:wrap;
  }
  .section-eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--smoke);
    letter-spacing:-0.03em;
    text-transform:uppercase;
    margin-bottom:10px;
    display:block;
  }
  .section h2{
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(32px, 4.5vw, 48px);
    line-height:0.95;
    letter-spacing:-0.02em;
  }
  .section-note{
    max-width:36ch;
    color:var(--slate);
    font-size:16px;
    line-height:1.5;
  }

  /* ---------- SERVICES GRID ---------- */
  .card-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  .service-card{
    background:var(--paper);
    border-radius:28px;
    padding:28px;
    display:flex; flex-direction:column; gap:14px;
    min-height:220px;
    transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  }
  .service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 32px rgba(24,24,27,.08);
  }
  .service-card .num{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--smoke);
  }
  .service-card h3{
    font-size:22px;
    font-weight:600;
    letter-spacing:-0.01em;
  }
  .service-card p{
    color:var(--slate);
    font-size:15px;
    line-height:1.45;
    flex-grow:1;
  }
  .service-card .price{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--carbon);
    padding-top:8px;
    border-top:1px solid var(--ash);
  }

  @media (max-width:900px){
    .card-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    .card-grid{grid-template-columns:1fr;}
  }

  /* ---------- HOW IT WORKS (numbered — real sequence) ---------- */
  .steps{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }
  .step{
    background:var(--mist);
    border-radius:24px;
    padding:24px;
    transition:transform .35s var(--ease-out), background-color .35s ease;
  }
  .step:hover{
    transform:translateY(-4px);
    background:var(--ash);
  }
  .step .step-num{
    font-family:var(--font-display);
    font-size:40px;
    line-height:1;
    margin-bottom:16px;
  }
  .step h4{
    font-size:16px; font-weight:600;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:-0.01em;
  }
  .step p{
    font-size:14px;
    color:var(--slate);
    line-height:1.45;
  }
  @media (max-width:900px){
    .steps{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:560px){
    .steps{grid-template-columns:1fr;}
  }

  /* ---------- INVERTED BLOCK ---------- */
  .inverted{
    background:var(--carbon);
    color:var(--paper);
    border-radius:64px 64px 0 0;
    padding:96px 0 96px;
  }
  .inverted .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
  }
  .inverted h2{
    font-family:var(--font-display);
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(32px, 5vw, 56px);
    line-height:0.92;
    letter-spacing:-0.02em;
  }

  .inverted p{
    color:var(--smoke);
    font-size:17px;
    line-height:1.55;
  }
  .inverted-card{
    background:var(--graphite);
    border-radius:24px;
    padding:28px;
    transition:transform .3s var(--ease-out);
  }
  .inverted-card:hover{transform:translateY(-4px);}
  .inverted-card + .inverted-card{margin-top:16px;}
  .inverted-card .mono-label{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--mint);
  }
  .inverted-card p{
    color:var(--paper);
    font-size:16px;
    margin-top:10px;
    line-height:1.5;
  }
  @media (max-width:860px){
    .inverted .wrap{grid-template-columns:1fr;}
    .inverted{border-radius:48px 48px 0 0;}
  }


  /* ---------- PROJECT FORM ---------- */

.project-form-section {
  background: var(--canvas);
  padding: 96px 0;
  transition: background-color .4s ease;
}

/* ---------- DARK ZONE THEME ----------
   Applied to <body> by script.js from the moment the "About"
   section reaches the nav, and kept on through the form and
   footer so the whole bottom half of the page reads as one
   continuous charcoal block instead of light -> dark -> light. */

body.is-dark-zone .project-form-section{
  background:var(--carbon);
}
body.is-dark-zone .project-form-header h2{color:var(--paper);}
body.is-dark-zone .project-form-header > p{color:var(--smoke);}
body.is-dark-zone .section-eyebrow{color:var(--smoke);}

body.is-dark-zone .project-form{
  background:var(--graphite);
}
body.is-dark-zone .form-field label{color:var(--smoke);}
body.is-dark-zone .form-field input,
body.is-dark-zone .form-field select,
body.is-dark-zone .form-field textarea{
  background:var(--carbon);
  border-color:#3f3f46;
  color:var(--paper);
}
body.is-dark-zone .form-field input::placeholder,
body.is-dark-zone .form-field textarea::placeholder{color:var(--smoke);}
body.is-dark-zone .form-field input:focus,
body.is-dark-zone .form-field select:focus,
body.is-dark-zone .form-field textarea:focus{
  border-color:var(--paper);
  background:var(--carbon);
  box-shadow:0 0 0 3px rgba(255,255,255,0.08);
}
body.is-dark-zone .form-bottom{border-top-color:#3f3f46;}
body.is-dark-zone .form-bottom p{color:var(--smoke);}

/* "Send project inquiry" flips to a white pill so it still
   pops against the charcoal panel, matching the nav CTA. */
body.is-dark-zone .form-submit{
  background:var(--paper);
  color:var(--carbon);
}
body.is-dark-zone .form-submit:hover{background:var(--ash);}

/* The WhatsApp widget floats over whatever section is behind
   it, so its label needs to flip to white in the dark zone too
   (it's carbon-black by default, which disappears on charcoal). */
body.is-dark-zone .whatsapp-banner{color:var(--paper);}

.project-form-header {
  display: grid;
  grid-template-columns: 1fr 0.6fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}

.project-form-header h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.project-form-header h2 span {
  background: var(--color-voltage-yellow);
  padding: 2px 6px;
  line-height: 1;
  display: inline-block;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.project-form-header > p {
  color: var(--slate);
  font-size: 17px;
  line-height: 1.5;
  max-width: 36ch;
  transition: color .4s ease;
}

.project-form {
  background: var(--paper);
  border-radius: 32px;
  padding: 40px;
  transition: background-color .4s ease;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--slate);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--ash);
  background: var(--mist);
  color: var(--carbon);
  border-radius: 12px;
  padding: 15px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.form-field input,
.form-field select {
  height: 52px;
}

.form-field textarea {
  resize: vertical;
  min-height: 150px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--smoke);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--carbon);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.06);
}

.form-bottom {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ash);

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.form-bottom p {
  color: var(--smoke);
  font-size: 13px;
}

.form-submit {
  background: var(--carbon);
  color: var(--paper);
  border: none;
  border-radius: 10px;
  padding: 16px 24px;

  font-size: 15px;
  font-weight: 500;

  display: flex;
  align-items: center;
  gap: 16px;

  transition:
    transform .2s ease,
    background .2s ease;
}

.form-submit span {
  font-size: 20px;
  line-height: 1;
  transition: transform .25s var(--ease-out);
}

.form-submit:hover{
  background: var(--graphite);
  transform: translateY(-2px);
}
.form-submit:hover span{
  transform: translateX(4px);
}

.form-success {
  display: none;
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--mint);
  border-radius: 12px;
  color: var(--carbon);
}

.form-success strong,
.form-success span {
  display: block;
}

.form-success span {
  margin-top: 4px;
  font-size: 14px;
}


/* ---------- FORM RESPONSIVE ---------- */

@media (max-width: 760px) {
  .project-form-section {
    padding: 72px 0;
  }

  .project-form-header {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .project-form {
    padding: 24px;
    border-radius: 24px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field.full {
    grid-column: auto;
  }

  .form-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .form-submit {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .project-form {
    padding: 20px;
  }

  .project-form-header h2 {
    font-size: 42px;
  }
}

.whatsapp-widget{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  animation: wa-in .6s var(--ease-out) 1.4s both;
}

.whatsapp-banner{
  color: var(--color-carbon-black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color .4s ease;
}

.whatsapp-bubble{
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform .2s ease;
}

.whatsapp-widget:hover .whatsapp-bubble{
  transform: scale(1.08);
}

@media (max-width: 480px){
  .whatsapp-widget{ right: 16px; bottom: 16px; }
  .whatsapp-bubble{ width: 48px; height: 48px; }
  .whatsapp-bubble svg{ width: 24px; height: 24px; }
  .whatsapp-banner{ font-size: 12px; }
}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--graphite);
    color:var(--ash);
    padding:56px 0 32px;
  }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:32px; flex-wrap:wrap;
    padding-bottom:32px;
    border-bottom:1px solid #444;
  }
  footer h3{
    font-family:var(--font-display);
    color:var(--paper);
    font-size:28px;
    text-transform:uppercase;
    margin-bottom:8px;
  }
  footer .foot-email{
    background:var(--color-voltage-yellow);
    color:var(--carbon);
    font-family:var(--font-mono);
    font-size:14px;
    padding:6px 12px;
    border-radius:64px;
    display:inline-block;
    transition:transform .2s ease;
  }
  footer .foot-email:hover{transform:translateY(-2px);}
  .foot-cols{display:flex; gap:64px; flex-wrap:wrap;}
  .foot-cols div{font-size:14px; line-height:2;}
  .foot-cols .label{font-family:var(--font-mono); font-size:12px; color:var(--smoke); text-transform:uppercase; display:block; margin-bottom:6px;}

  /* Footer links: same typeface/weight treatment as the nav-pill links,
     but sized to match the rest of the footer (14px) so the block stays
     visually consistent with the "Connection Creation Tech" wordmark above it. */
  .foot-cols a{
    display:inline-block;
    font-family:var(--font-body);
    font-size:14px;
    font-weight:500;
    color:var(--ash);
    transition:color .15s ease, opacity .15s ease;
  }
  .foot-cols a:hover{color:var(--paper); opacity:.85;}
  .foot-bottom{
    padding-top:24px;
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--smoke);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

/* =========================================================
   MOTION SYSTEM
   1. Page-load sequence — hero eyebrow / headline / sub /
      actions / panel fade+rise in on first paint, staggered.
   2. Scroll reveal — everything below the hero (cards, steps,
      about copy, form) fades+rises the first time it enters
      the viewport, via the .reveal / .is-visible classes
      toggled in script.js through an IntersectionObserver.
   Both respect prefers-reduced-motion.
========================================================= */

@keyframes fade-rise{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes wa-in{
  from{ opacity:0; transform:translateY(16px) scale(.92); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---- Page-load hero sequence ---- */
.nav-bar{
  animation: fade-rise var(--dur-fast) var(--ease-out) both;
}
.load-in{
  opacity:0;
  animation: fade-rise var(--dur-med) var(--ease-out) both;
}
.eyebrow.load-in{ animation-delay:.05s; }
.hero h1.load-in{ animation-delay:.15s; }
.hero-sub.load-in{ animation-delay:.32s; }
.hero-actions.load-in{ animation-delay:.46s; }
.hero-panel.load-in{ animation-delay:.4s; }

/* ---- Scroll reveal (applied via JS observer) ---- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .nav-bar,
  .load-in,
  .whatsapp-widget{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .service-card:hover,
  .step:hover,
  .inverted-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .nav-cta:hover,
  .form-submit:hover{
    transform:none !important;
  }
}