/*
Theme Name: Twenty3Networks
Theme URI: https://twenty3networks.com
Author: Twenty3Networks
Description: Premium, conversion-focused theme for Twenty3Networks - a founder-led performance marketing agency. Built as a classic WordPress theme with custom post types for every editable section (services, process steps, industries, case studies, curriculum) and Customizer controls for all headline copy, so the whole site can be edited from wp-admin without any page-builder or field plugin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twenty3networks

Ink (near-black navy) + Paper (warm neutral) + Signal (cobalt) + Mono data
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* color */
  --ink:        #0D1117;
  --ink-soft:   #171B24;
  --ink-line:   #262B35;
  --paper:      #F5F5F1;
  --paper-dim:  #ECEBE4;
  --paper-line: #DEDDD5;
  --graphite:   #4C525A;
  --graphite-2: #868C93;
  --signal:     #2F5DFF;
  --signal-dark:#1E3FC4;
  --signal-tint:#E7ECFF;
  --white:      #FFFFFF;

  /* type */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* layout */
  --container: 1200px;
  --gutter: clamp(24px, 5vw, 64px);
  --section-pad: clamp(64px, 10vw, 128px);
  --radius: 4px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }

:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- type scale ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.eyebrow::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--signal);
  flex:none;
  animation:pulse-dot 2.4s ease-in-out infinite;
}
.section--dark .eyebrow{ color:#7C9BFF; }

h1, .h1{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.04;
  font-size:clamp(2.6rem, 5.4vw, 4.6rem);
}
h2, .h2{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.015em;
  line-height:1.1;
  font-size:clamp(2rem, 3.4vw, 2.9rem);
}
h3, .h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.25;
  font-size:1.3rem;
}
.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--graphite);
  max-width:640px;
  line-height:1.6;
}
.section--dark .lede{ color:#AEB4C0; }
.body-text{ color:var(--graphite); font-size:1rem; line-height:1.7; }
.section--dark .body-text{ color:#AEB4C0; }

.mono-tag{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--graphite-2);
  letter-spacing:0.03em;
}

/* ---------- layout ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.section{
  padding-top:var(--section-pad);
  padding-bottom:var(--section-pad);
  position:relative;
}
.section--dark{ background:var(--ink); color:var(--paper); }
.section--light{ background:var(--paper); }
.section--dim{ background:var(--paper-dim); }
.section-head{
  max-width:680px;
  margin-bottom:clamp(40px, 6vw, 72px);
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.grid{ display:grid; gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.section--dark .grid{ background:var(--ink-line); border-color:var(--ink-line); }
.grid > *{ background:var(--paper); }
.section--dark .grid > *{ background:var(--ink); }
.grid-6{ grid-template-columns:repeat(6,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

@media (max-width:900px){
  .grid-6{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .grid-6{ grid-template-columns:1fr; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  padding:14px 26px;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--signal); color:var(--white); }
.btn-primary:hover{ background:var(--signal-dark); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.section--dark .btn-ghost{ border-color:#3A4150; color:var(--paper); }
.section--dark .btn-ghost:hover{ background:var(--paper); color:var(--ink); }
.btn-arrow{ transition:transform .18s ease; }
.btn:hover .btn-arrow{ transform:translateX(3px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(13,17,23,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.logo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.08rem;
  color:var(--paper);
  display:flex; align-items:baseline; gap:2px;
}
.logo span{ color:var(--signal); }
.nav-links{ display:flex; gap:36px; }
.nav-links a{
  font-size:0.92rem; font-weight:500; color:#B9BFC9;
  transition:color .15s ease;
  position:relative;
}
.nav-links a:hover, .nav-links a.active{ color:var(--paper); }
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-20px; height:2px; background:var(--signal);
}
.nav-cta{ display:flex; align-items:center; gap:24px; }
.nav-toggle{
  display:none; background:none; border:0; color:var(--paper);
  width:32px; height:22px; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; position:absolute; left:0; width:100%; height:2px; background:currentColor; transition:.2s;
}
.nav-toggle span{ top:10px; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ transform:rotate(45deg); top:0; }
.nav-toggle.open span::after{ transform:rotate(-45deg); top:0; }

.mobile-panel{
  display:none;
  background:var(--ink);
  border-bottom:1px solid var(--ink-line);
  padding:8px var(--gutter) 28px;
}
.mobile-panel.open{ display:block; }
.mobile-panel a{
  display:block; padding:14px 0; font-size:1.05rem; color:var(--paper);
  border-bottom:1px solid var(--ink-line);
}
.mobile-panel .btn{ margin-top:20px; width:100%; justify-content:center; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-cta .btn{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  background:var(--ink); color:var(--paper);
  padding-top:clamp(72px, 12vw, 140px);
  padding-bottom:clamp(72px, 10vw, 120px);
  overflow:hidden;
  position:relative;
}
.hero-inner{ max-width:900px; }
.hero h1{ color:var(--white); margin-bottom:24px; }
.hero .lede{ color:#AEB4C0; margin-bottom:36px; }
.hero-tags{
  margin-top:44px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:#6E7685;
  letter-spacing:0.04em;
  display:flex; gap:10px; flex-wrap:wrap;
}
.hero-tags span:not(:last-child)::after{ content:'·'; margin-left:10px; color:#3A4150; }

/* signal line signature element */
.signal-line{ width:100%; display:block; }
.signal-line path{
  fill:none;
  stroke:var(--signal);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:draw-signal 2.2s cubic-bezier(.16,.84,.44,1) forwards .2s;
}
.signal-line .dot{
  fill:var(--signal);
  opacity:0;
  animation:appear .4s ease forwards 2.1s;
}
.hero-signal{ margin-top:56px; opacity:0.9; }

@keyframes draw-signal{ to{ stroke-dashoffset:0; } }
@keyframes appear{ to{ opacity:1; } }
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(1.3); }
}

/* ---------- cards: services ---------- */
.card{
  padding:40px 34px;
  transition:background .2s ease;
}
.svc-card{ position:relative; }
.svc-card:hover{ background:var(--white); }
.section--dark .svc-card:hover{ background:var(--ink-soft); }
.svc-index{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--signal);
  margin-bottom:22px; display:block;
}
.svc-card h3{ margin-bottom:14px; }
.svc-card .svc-body p{ color:var(--graphite); font-size:0.93rem; line-height:1.6; margin:0; }
.svc-card ul{ margin-top:18px; }
.svc-card li{
  font-size:0.92rem; color:var(--graphite); padding:7px 0 7px 18px; position:relative; line-height:1.5;
}
.section--dark .svc-card li{ color:#9DA4B0; }
.svc-card li::before{
  content:''; position:absolute; left:0; top:16px; width:8px; height:1px; background:var(--graphite-2);
}

/* ---------- process ---------- */
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink-line);
  border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line);
}
.process-step{ background:var(--ink); padding:38px 30px 34px; }
.process-num{ font-family:var(--font-mono); font-size:0.85rem; color:var(--signal); margin-bottom:18px; display:block; }
.process-step h3{ color:var(--white); margin-bottom:12px; }
.process-step p{ color:#9DA4B0; font-size:0.94rem; line-height:1.6; }
@media (max-width:900px){
  .process-grid{ grid-template-columns:1fr; }
  .process-step{ border-bottom:1px solid var(--ink-line); }
}

/* ---------- industries ---------- */
.industry-row{ display:flex; flex-wrap:wrap; gap:14px; }
.industry-pill{
  border:1px solid var(--paper-line);
  padding:16px 26px;
  font-family:var(--font-display); font-weight:600; font-size:0.98rem;
  transition:.18s ease;
  flex:1 1 220px;
  text-align:center;
}
.industry-pill:hover{ border-color:var(--signal); color:var(--signal); }

/* ---------- checklist (why us) ---------- */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.check-list li{
  display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--ink-line); font-size:1.02rem;
}
.check-list li:last-child{ border-bottom:1px solid var(--ink-line); }
.check-list .mk{ font-family:var(--font-mono); color:var(--signal); flex:none; }
@media (max-width:860px){ .why-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- CTA banner ---------- */
.cta-band{
  background:var(--signal-tint);
  text-align:center;
  padding:var(--section-pad) var(--gutter);
}
.cta-band h2{ margin-bottom:28px; }
.cta-band.on-dark{ background:var(--ink-soft); }
.cta-band.on-dark h2{ color:var(--white); }
.cta-band .lede{ margin:0 auto 32px; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:#9DA4B0; padding-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid var(--ink-line); }
.footer h4{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:#6E7685; margin-bottom:20px; }
.footer-brand .logo{ margin-bottom:16px; }
.footer-brand p{ max-width:280px; font-size:0.92rem; line-height:1.6; }
.footer-nav li{ padding:6px 0; }
.footer-nav a{ font-size:0.92rem; transition:color .15s; }
.footer-nav a:hover{ color:var(--paper); }
.footer-social{ display:flex; gap:16px; margin-top:20px; }
.footer-social a{ font-size:0.85rem; border:1px solid var(--ink-line); padding:8px 14px; border-radius:var(--radius); transition:.15s; }
.footer-social a:hover{ border-color:var(--signal); color:var(--paper); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding:28px 0 40px; font-size:0.85rem;
}
.footer-final{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- modal / contact form ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(13,17,23,0.72);
  display:none; align-items:flex-start; justify-content:center;
  padding:5vh 20px; overflow-y:auto; z-index:200;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--paper); width:100%; max-width:640px; padding:48px 44px;
  position:relative; border-radius:6px;
}
.modal-close{
  position:absolute; top:20px; right:20px; background:none; border:0; font-size:1.4rem; color:var(--graphite);
  width:36px; height:36px;
}
.modal h2{ font-size:1.9rem; margin-bottom:12px; }
.modal p.lede{ margin-bottom:30px; font-size:1rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:0.82rem; font-weight:600; color:var(--graphite); }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--paper-line); background:var(--white); padding:12px 14px; border-radius:4px; font-size:0.95rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--signal); }
.form-field textarea{ resize:vertical; min-height:90px; }
.modal-submit{ width:100%; justify-content:center; margin-top:6px; }
.whatsapp-link{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; font-size:0.9rem; color:var(--graphite); }
.whatsapp-link a{ color:var(--signal); font-weight:600; }
.form-success{ display:none; text-align:center; padding:20px 0; }
.form-success.show{ display:block; }
.form-success.show ~ form{ display:none; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } .modal{ padding:36px 24px; } }

/* ---------- case studies ---------- */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper-line); border:1px solid var(--paper-line); }
.case-card{ background:var(--paper); padding:40px 32px; display:flex; flex-direction:column; }
.case-card .svc-index{ margin-bottom:16px; }
.case-card h3{ margin-bottom:26px; }
.case-block{ margin-bottom:20px; }
.case-block .mono-tag{ display:block; margin-bottom:6px; color:var(--signal); }
.case-block p{ font-size:0.93rem; color:var(--graphite); line-height:1.6; }
.case-results{ margin-top:auto; padding-top:20px; border-top:1px solid var(--paper-line); display:flex; flex-direction:column; gap:8px; }
.result-stat{ font-family:var(--font-mono); font-weight:500; font-size:1.15rem; color:var(--ink); }
.result-stat .ph{ color:var(--signal); border-bottom:2px dotted var(--signal); padding-bottom:1px; }
.case-view{ margin-top:22px; font-size:0.88rem; font-weight:600; color:var(--signal); display:inline-flex; align-items:center; gap:6px; }
@media (max-width:900px){ .case-grid{ grid-template-columns:1fr; } }

.approach-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:36px; }
.approach-flow .node{
  font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.02em;
  border:1px solid var(--ink-line); padding:12px 20px; color:var(--paper);
}
.approach-flow .arrow{ color:var(--signal); font-size:1.1rem; }

/* ---------- training page ---------- */
.who-card{ padding:40px 34px; }
.who-card h3{ margin-bottom:12px; }
.who-card p{ color:var(--graphite); font-size:0.94rem; line-height:1.6; }

.curriculum-list details{
  border-bottom:1px solid var(--paper-line);
}
.curriculum-list summary{
  list-style:none; cursor:pointer; padding:26px 0; display:flex; align-items:center; gap:24px;
}
.curriculum-list summary::-webkit-details-marker{ display:none; }
.curriculum-list summary .mod-num{ font-family:var(--font-mono); color:var(--signal); font-size:0.9rem; flex:none; width:46px; }
.curriculum-list summary h3{ flex:1; font-size:1.08rem; }
.curriculum-list summary .mod-toggle{ font-family:var(--font-mono); color:var(--graphite-2); font-size:1.2rem; transition:transform .2s ease; }
.curriculum-list details[open] summary .mod-toggle{ transform:rotate(45deg); }
.curriculum-body{ padding:0 0 30px 70px; }
.curriculum-body ul li{
  font-size:0.94rem; color:var(--graphite); padding:6px 0 6px 18px; position:relative;
}
.curriculum-body ul li::before{ content:''; position:absolute; left:0; top:15px; width:8px; height:1px; background:var(--graphite-2); }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- misc page-specific helpers ---------- */
.tag-inline{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--graphite-2); letter-spacing:.04em;
}
.hairline{ height:1px; background:var(--paper-line); width:100%; }
.section--dark .hairline{ background:var(--ink-line); }