:root{
  --hogey-teal:#33a4a6;
  --hogey-teal-dark:#2a8587;
  --hogey-teal-soft:#e4f6f6;
  --hogey-orange:#f8931d;
  --hogey-orange-dark:#d67600;
  --hogey-gray:#808080;
  --hogey-text:#333333;
  --hogey-bg:#f5f5f5;
  --hogey-border:#dddddd;
  --hogey-white:#ffffff;
}

/* base reset */
*{box-sizing:border-box}

/* light mode defaults */
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--hogey-text);
  background:var(--hogey-white);
  line-height:1.6;
}

/* DARK MODE: override tokens */
body.dark-mode{
  --hogey-text:#f5f5f5;
  --hogey-bg:#050608;
  --hogey-white:#0b0f14;
  --hogey-border:rgba(255,255,255,0.13);
  --hogey-gray:#c4c7d7;
  background:radial-gradient(circle at top left,#151826 0,var(--hogey-bg) 42%);
  color:var(--hogey-text);
}

/* links */
a{color:var(--hogey-teal-dark);text-decoration:none}
a:hover{text-decoration:underline}

/* header */
header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hogey-border);
}
body.dark-mode header{
  background:rgba(5,6,10,.94);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.nav-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.75rem 1.5rem;
}

.logo img{max-height:42px;display:block}

/* nav desktop */
.nav-desktop ul{
  list-style:none;
  display:flex;
  gap:1.5rem;
  padding:0;
  margin:0;
  font-size:.95rem;
}
.nav-desktop a{
  font-weight:500;
  color:var(--hogey-text);
}
.nav-desktop a:hover{
  color:var(--hogey-teal-dark);
}

/* header actions */
.nav-actions{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.mode-toggle{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:.9rem;
}
.mode-icon{pointer-events:none;}
body.dark-mode .mode-toggle{
  background:#111827;
  border-color:rgba(255,255,255,.25);
  color:#f9fafb;
}

/* mobile menu toggle */
.mobile-menu-toggle{
  display:none;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(249,250,251,.95);
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
}
.mobile-menu-toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:#111827;
  margin:2px 0;
  transition:transform .18s ease,opacity .18s ease;
}
body.dark-mode .mobile-menu-toggle{
  background:rgba(15,23,42,.95);
  border-color:rgba(255,255,255,.24);
}
body.dark-mode .mobile-menu-toggle span{
  background:#f9fafb;
}

/* fancy burger animation */
.mobile-menu-toggle.open span:nth-child(1){
  transform:translateY(4px) rotate(45deg);
}
.mobile-menu-toggle.open span:nth-child(2){
  opacity:0;
}
.mobile-menu-toggle.open span:nth-child(3){
  transform:translateY(-4px) rotate(-45deg);
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1.3rem;
  border-radius:999px;
  border:none;
  font-weight:600;
  cursor:pointer;
  font-size:.95rem;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn-small{
  padding:.45rem 1.1rem;
  font-size:.83rem;
}
.btn-primary{
  background:var(--hogey-orange);
  color:#000;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.btn-primary:hover{
  background:var(--hogey-orange-dark);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.btn-outline{
  background:transparent;
  color:var(--hogey-teal-dark);
  border:1px solid var(--hogey-teal-dark);
}
.btn-outline:hover{
  background:var(--hogey-teal-soft);
}
.btn-full{width:100%;}

/* logo particle banner */
.logo-particle-banner{
  position:relative;
  overflow:hidden;
  width:100%;
  background:linear-gradient(135deg,#0b1120,#020617);
  color:#f9fafb;
}
body:not(.dark-mode) .logo-particle-banner{
  background:linear-gradient(135deg,#e4f6f6,#fef6ea);
  color:#111827;
}
.logo-particle-banner::before,
.logo-particle-banner::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(248,147,29,.8),transparent 60%);
  filter:blur(40px);
  opacity:.5;
  animation:hogeyParticleDrift 22s linear infinite alternate;
}
.logo-particle-banner::before{
  top:-40px;
  left:-60px;
}
.logo-particle-banner::after{
  bottom:-80px;
  right:-80px;
  animation-duration:28s;
}
.logo-particle-inner{
  max-width:1100px;
  margin:0 auto;
  padding:1.8rem 1.5rem;
}
.logo-particle-main{
  display:flex;
  align-items:center;
  gap:1.25rem;
  position:relative;
  z-index:1;
}
.logo-particle-image{
  height:64px;
  flex-shrink:0;
}
.logo-particle-copy{
  max-width:640px;
}
.logo-particle-tagline{
  margin:0 0 .2rem;
  font-size:.9rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.9;
}
.logo-particle-sub{
  margin:0;
  font-size:.95rem;
  opacity:.95;
}

/* simple particle float animation */
@keyframes hogeyParticleDrift{
  0%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(20px,-10px,0);}
  100%{transform:translate3d(-10px,20px,0);}
}

/* layout */
/* layout */
main{
  max-width:1100px;
  margin:0 auto;
  padding:1.5rem;
}
section{
  padding:3rem 0;
  border-bottom:1px solid var(--hogey-border);
}
body.dark-mode section{
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* hero */
#hero{
  position:relative;
  overflow:hidden;
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:2rem;
  align-items:center;
}

/* hero logo in main content */
.hero-brand-mark img{
  max-height:54px;
  margin-bottom:.6rem;
}

/* blurry black blobs */
body.dark-mode #hero::before,
body.dark-mode #hero::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(0,0,0,.82) 0,transparent 60%);
  filter:blur(55px);
  opacity:.75;
  z-index:-1;
}
body.dark-mode #hero::before{
  top:-80px;
  left:-60px;
}
body.dark-mode #hero::after{
  bottom:-120px;
  right:-80px;
}

.hero-heading{
  font-size:2.15rem;
  font-weight:700;
  margin-bottom:.75rem;
}
.hero-sub{
  font-size:1.05rem;
  color:var(--hogey-gray);
  margin-bottom:1.5rem;
}
.hero-cta-row{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1.5rem;
}
.badge{
  font-size:.8rem;
  padding:.3rem .7rem;
  border-radius:999px;
  background:var(--hogey-teal-soft);
  color:var(--hogey-teal-dark);
  border:1px solid rgba(0,0,0,.03);
}
body.dark-mode .badge{
  background:rgba(15,23,42,.85);
  color:#e5f9f9;
  border-color:rgba(255,255,255,.12);
}

.hero-card{
  background:var(--hogey-teal-soft);
  border-radius:1.2rem;
  padding:1.5rem;
  border:1px solid var(--hogey-border);
}
body.dark-mode .hero-card{
  background:rgba(15,23,42,.9);
  border-color:rgba(255,255,255,.16);
}
.hero-card-text{
  font-size:.9rem;
  margin-bottom:.9rem;
}
.stack-list{
  list-style:none;
  padding:0;
  margin:0;
  font-size:.9rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.stack-list li{
  padding:.25rem .6rem;
  border-radius:999px;
  background:var(--hogey-white);
  border:1px dashed var(--hogey-border);
}
body.dark-mode .stack-list li{
  background:#020617;
  border-color:rgba(255,255,255,.18);
  color:var(--hogey-gray);
}

/* sections */
.section-title{
  font-size:1.5rem;
  margin-bottom:.5rem;
}
.section-subtitle{
  color:var(--hogey-gray);
  margin-bottom:1.5rem;
  font-size:.98rem;
  max-width:640px;
}

/* cards */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}
.card{
  border-radius:1rem;
  padding:1.25rem;
  border:1px solid var(--hogey-border);
  background:var(--hogey-white);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:var(--hogey-teal);
  box-shadow:0 12px 28px rgba(0,0,0,.09);
}
body.dark-mode .card{
  background:#050816;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 18px 34px rgba(0,0,0,.9);
}
body.dark-mode .card:hover{
  box-shadow:0 24px 46px rgba(0,0,0,.9);
}
.card h3{
  margin-top:0;
  margin-bottom:.35rem;
  font-size:1.05rem;
}
.pill{
  display:inline-block;
  font-size:.78rem;
  padding:.17rem .55rem;
  border-radius:999px;
  background:var(--hogey-teal-soft);
  color:var(--hogey-teal-dark);
  margin-bottom:.6rem;
}
body.dark-mode .pill{
  background:rgba(28,37,65,.95);
  color:#e5f9f9;
}
.list-compact{
  padding-left:1.2rem;
  font-size:.9rem;
  margin-top:.5rem;
  margin-bottom:.2rem;
}

/* layout grids */
.two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
}
.section-subheading{
  margin-top:0;
  font-size:1rem;
}
.process-list{
  padding-left:1.2rem;
  font-size:.95rem;
}

/* contact */
.contact-form{
  border-radius:1rem;
  border:1px solid var(--hogey-border);
  padding:1.5rem;
  background:var(--hogey-bg);
}
.field{margin-bottom:1rem}
label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:.25rem;
}
input[type=text],
input[type=email],
select,
textarea{
  width:100%;
  padding:.5rem .6rem;
  border-radius:.4rem;
  border:1px solid var(--hogey-border);
  font:inherit;
  background:var(--hogey-white);
}
body.dark-mode input[type=text],
body.dark-mode input[type=email],
body.dark-mode select,
body.dark-mode textarea{
  background:#020617;
  border-color:rgba(255,255,255,.22);
  color:var(--hogey-text);
}
textarea{
  min-height:130px;
  resize:vertical;
}
.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  font-size:.8rem;
}
.contact-alt{font-size:.95rem}

/* footer */
footer{
  border-top:1px solid var(--hogey-border);
  background:var(--hogey-bg);
  margin-top:2rem;
}
body.dark-mode footer{
  background:#020617;
  border-top:1px solid rgba(255,255,255,.16);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  font-size:.8rem;
  color:var(--hogey-gray);
}
.footer-links{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* cookie banner */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:20;
  background:#111;
  color:#f5f5f5;
  font-size:.85rem;
  padding:.8rem 1rem;
  display:flex;
  justify-content:center;
}
.cookie-inner{
  max-width:1100px;
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
  flex-wrap:wrap;
}
.cookie-inner p{
  margin:0;
  flex:1;
}
.cookie-btn{
  border-radius:999px;
  border:none;
  padding:.4rem 1rem;
  background:var(--hogey-orange);
  color:#000;
  font-weight:600;
  cursor:pointer;
  font-size:.85rem;
}

/* assistance prompt */
.assist-prompt{
  position:fixed;
  right:1rem;
  bottom:4.5rem;
  z-index:25;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease;
}
.assist-prompt.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.assist-card{
  max-width:260px;
  padding:1rem;
  border-radius:1rem;
  background:var(--hogey-white);
  border:1px solid var(--hogey-border);
  box-shadow:0 14px 34px rgba(0,0,0,.25);
}
body.dark-mode .assist-card{
  background:#020617;
  border-color:rgba(255,255,255,.2);
}
.assist-text{
  margin:.1rem 0 .7rem;
  font-size:.9rem;
}
.assist-actions{
  display:flex;
  gap:.4rem;
  margin-bottom:.4rem;
}
.assist-close{
  border:none;
  background:none;
  color:var(--hogey-gray);
  font-size:.78rem;
  padding:0;
  cursor:pointer;
}

/* mobile nav overlay */
.mobile-nav-overlay{
  position:fixed;
  inset:0;
  z-index:30;
  background:rgba(3,4,7,.92);
  backdrop-filter:blur(22px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease-out;
}
.mobile-nav-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.mobile-nav-inner{
  width:100%;
  max-width:480px;
  padding:1.5rem 1.3rem 2rem;
  color:#f9fafb;
}
.mobile-nav-close{
  border:none;
  background:transparent;
  color:#e5e7eb;
  font-size:1.7rem;
  cursor:pointer;
}
.mobile-nav-links{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  margin:1.25rem 0 1.3rem;
  font-size:1.1rem;
}
.mobile-nav-links a{
  color:#e5e7eb;
  text-decoration:none;
}
.mobile-nav-links a:hover{
  color:#38bdf8;
}
.mobile-nav-cta{
  margin-bottom:.9rem;
}
.mobile-nav-meta{
  font-size:.85rem;
  color:#cbd5f5;
}

/* modal */
.modal{
  position:fixed;
  inset:0;
  z-index:40;
  display:none;
}
.modal.open{
  display:block;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.75);
  backdrop-filter:blur(3px);
}
.modal-dialog{
  position:relative;
  max-width:420px;
  margin:15vh auto 0;
  padding:1.4rem 1.3rem 1.5rem;
  border-radius:1rem;
  background:var(--hogey-white);
  border:1px solid var(--hogey-border);
}
body.dark-mode .modal-dialog{
  background:#020617;
  border-color:rgba(255,255,255,.22);
}
.modal-dialog h3{
  margin-top:0;
  margin-bottom:.4rem;
}
.modal-dialog p{
  font-size:.9rem;
  margin-top:0;
  margin-bottom:1rem;
}

/* legal pages */
.legal-main{
  max-width:800px;
  margin:0 auto;
  padding:2.5rem 1.5rem 3rem;
}
.legal-main section{
  padding:0;
  border-bottom:none;
}

/* admin page */
.admin-main{
  max-width:1100px;
  margin:0 auto;
  padding:2.5rem 1.5rem 3rem;
}
.admin-header{
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--hogey-border);
}
body.dark-mode .admin-header{
  border-bottom:1px solid rgba(255,255,255,.16);
}
.admin-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin:1.8rem 0 2rem;
}
.admin-card{
  border-radius:.9rem;
  border:1px solid var(--hogey-border);
  padding:.9rem 1rem;
  background:var(--hogey-white);
  font-size:.85rem;
}
body.dark-mode .admin-card{
  background:#020617;
  border-color:rgba(255,255,255,.2);
}
.admin-card-label{
  color:var(--hogey-gray);
  font-size:.78rem;
}
.admin-card-value{
  font-size:1.2rem;
  font-weight:600;
}
.admin-section{
  margin-bottom:2.2rem;
}
.admin-section h2{
  font-size:1.1rem;
  margin:0 0 .6rem;
}
.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:.8rem;
}
.admin-table th,
.admin-table td{
  border:1px solid var(--hogey-border);
  padding:.4rem .45rem;
  text-align:left;
}
body.dark-mode .admin-table th,
body.dark-mode .admin-table td{
  border-color:rgba(255,255,255,.18);
}
.admin-table th{
  background:#f3f4f6;
}
body.dark-mode .admin-table th{
  background:#020617;
}

/* responsive */
@media (max-width:800px){
  .hero{
    grid-template-columns:minmax(0,1fr);
  }
  .grid-3{
    grid-template-columns:minmax(0,1fr);
  }
  .two-col{
    grid-template-columns:minmax(0,1fr);
  }
  .nav-desktop{
    display:none;
  }
  .nav-cta-desktop{
    display:none;
  }
  .mobile-menu-toggle{
    display:inline-flex;
  }
  .nav-inner{
    justify-content:space-between;
  }
  .front-banner-inner{
    padding:.55rem 1rem;
    flex-direction:column;
    align-items:flex-start;
  }
  .assist-prompt{
    right:.75rem;
    bottom:4.25rem;
  }
  .admin-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:540px){
  .admin-metrics{
    grid-template-columns:minmax(0,1fr);
  }
}

.service-icon{
  font-size:1.6rem;
  display:block;
  margin-bottom:0.4rem;
}
.service-icon{
  font-size:1.6rem; /* fallback if no SVG */
  display:block;
  margin-bottom:0.4rem;
  color:var(--hogey-teal-dark);
}
body.dark-mode .service-icon{
  color:#a5b4fc;
}
.service-icon .icon-svg{
  width:32px;
  height:32px;
  display:block;
}
.logo-particle-banner{
  position:relative;
  overflow:hidden;
  width:100%;
  background:linear-gradient(135deg,#0b1120,#020617);
  color:#f9fafb;
}
body:not(.dark-mode) .logo-particle-banner{
  background:linear-gradient(135deg,#e4f6f6,#fef6ea);
  color:#111827;
}
/* Full-width hero that bleeds edge-to-edge inside a centered layout */
.hero-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  min-height: 480px;
  border-bottom: 0px;
}

/* canvas fills the whole hero */
#heroParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* content stays nicely centered in a max-width container */
.hero.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}
#heroParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;

  /* Remove ANY possible borders */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Base state (visible & neutral) */
.stack-list li {
  position: relative;
  color: var(--hogey-text);
  transform: translateX(0);
  transition: all .35s cubic-bezier(.22,.61,.36,1);
}

/* Hover state triggered by hero card */
.hero-card:hover .stack-list li {
  transform: translateX(6px);
  color: var(--hogey-accent, #33A4A6);
}

/* Optional glowing underline animation */
.stack-list li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--hogey-accent, #33A4A6);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
  opacity: .8;
}

.hero-card:hover .stack-list li::after {
  width: 22px;
}

/* Stagger timing */
.stack-list li:nth-child(1) { transition-delay: 0.00s; }
.stack-list li:nth-child(2) { transition-delay: 0.05s; }
.stack-list li:nth-child(3) { transition-delay: 0.10s; }
.stack-list li:nth-child(4) { transition-delay: 0.15s; }
.stack-list li:nth-child(5) { transition-delay: 0.20s; }
.stack-list li:nth-child(6) { transition-delay: 0.25s; }
.process-section{
  padding:3rem 0;
}

.process-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:1.5rem;
}

.process-step{
  position:relative;
  padding:1.4rem 1.3rem;
  border-radius:1.1rem;
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(148,163,184,0.25);
  box-shadow:0 18px 40px rgba(15,23,42,0.06);
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             box-shadow .3s cubic-bezier(.22,.61,.36,1),
             border-color .3s cubic-bezier(.22,.61,.36,1),
             background .3s cubic-bezier(.22,.61,.36,1);
}

body.dark-mode .process-step{
  background:rgba(15,23,42,0.98);
  border-color:rgba(148,163,184,0.3);
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}

.process-step:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(15,23,42,0.12);
  border-color:var(--hogey-teal-dark,#33A4A6);
}

.process-step-head{
  display:flex;
  align-items:center;
  gap:0.6rem;
}

.process-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.1rem;
  height:2.1rem;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(51,164,166,0.09);
  color:var(--hogey-teal-dark,#33A4A6);
}

body.dark-mode .process-pill{
  background:rgba(129,140,248,0.13);
  color:#a5b4fc;
}

.process-title{
  font-weight:600;
  font-size:0.98rem;
}

.process-icon{
  width:32px;
  height:32px;
  border-radius:0.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(51,164,166,0.09);
  color:var(--hogey-teal-dark,#33A4A6);
}

body.dark-mode .process-icon{
  background:rgba(129,140,248,0.13);
  color:#a5b4fc;
}

.process-icon-svg{
  width:20px;
  height:20px;
  display:block;
}

.process-text{
  font-size:0.9rem;
  line-height:1.5;
  color:var(--hogey-text-muted,#4b5563);
}

body.dark-mode .process-text{
  color:#e5e7eb;
}
.process-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-top:1rem;
}

.process-step{
  background:var(--card-bg,rgba(255,255,255,0.92));
  border:1px solid rgba(148,163,184,0.25);
  padding:1.4rem;
  border-radius:1rem;
  transition:.3s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.process-step:hover{
  transform:translateY(-5px);
  border-color:var(--hogey-accent,#33A4A6);
  box-shadow:0 14px 40px rgba(0,0,0,0.12);
}

.process-step-head{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.process-pill{
  background:rgba(51,164,166,0.1);
  color:#33A4A6;
  padding:.35rem .75rem;
  border-radius:999px;
  font-size:.75rem;
  text-transform:uppercase;
  font-weight:600;
}

.process-title{
  font-weight:600;
  font-size:1rem;
}

.process-icon{
  width:32px;
  height:32px;
  border-radius:.7rem;
  background:rgba(51,164,166,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:.7rem 0;
  color:#33A4A6;
}

.process-icon-svg{
  width:20px;
  height:20px;
}

.process-text{
  color:var(--text-muted,#4b5563);
  font-size:.9rem;
  line-height:1.5;
}
/* === About + How we work (timeline layout) – light version === */

.about-shell{
  display:grid;
  gap:2rem;
  align-items:flex-start;
  margin-bottom:2.5rem;
}

@media (min-width:900px){
  .about-shell{
    grid-template-columns:minmax(0,2.1fr) minmax(0,1.2fr);
  }
}

.about-main p{
  margin-bottom:0.9rem;
}

/* About highlight card – light, subtle */
.about-highlight{
  border-radius:1.2rem;
  padding:1.3rem 1.2rem;
  background:linear-gradient(135deg,#f5fbfd,#ffffff);
  color:#0f172a;
  border:1px solid rgba(148,163,184,0.35);
  box-shadow:0 10px 30px rgba(15,23,42,0.06);
}

.about-highlight h3{
  margin:0 0 .6rem;
  font-size:1rem;
  font-weight:600;
}

.about-highlight ul{
  list-style:none;
  padding:0;
  margin:0;
}

.about-highlight li{
  font-size:.9rem;
  line-height:1.5;
  padding-left:1.1rem;
  position:relative;
  margin-bottom:.4rem;
}

.about-highlight li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:#0f766e; /* teal dot */
}

/* --- Timeline wrapper (light card) --- */

.process-timeline{
  margin-top:1.4rem;
  padding:1.8rem 1.3rem 2.2rem;
  border-radius:1.5rem;
  /* background:#f8fafc;
  border:1px solid rgba(148,163,184,0.35);
  box-shadow:0 14px 40px rgba(15,23,42,0.06); */
  position:relative;
  overflow:hidden;
}

.process-timeline::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0% 0%,rgba(59,130,246,0.12),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(45,212,191,0.14),transparent 55%);
  opacity:0.7;
  pointer-events:none;
}

.process-headline{
  position:relative;
  z-index:1;
}

/* --- Vertical rail + arrow --- */

.timeline-rail{
  position:relative;
  z-index:1;
  margin-top:1.6rem;
  padding-left:2.5rem;
}

.timeline-rail::before{
  content:"";
  position:absolute;
  left:1.1rem;
  top:0.4rem;
  bottom:1.9rem;
  width:2px;
  background:linear-gradient(180deg,rgba(148,163,184,0.7),rgba(56,189,248,0.9));
  opacity:0.9;
}

.timeline-rail::after{
  content:"";
  position:absolute;
  left:0.8rem;
  bottom:0.7rem;
  border-width:10px 7px 0 7px;
  border-style:solid;
  border-color:rgba(56,189,248,0.9) transparent transparent transparent;
}

/* --- Steps --- */

.timeline-step{
  position:relative;
  display:flex;
  gap:1rem;
  margin-bottom:1.2rem;
  opacity:0;
  transform:translateY(14px);
  animation:timelineIn .7s cubic-bezier(.22,.61,.36,1) forwards;
}

.timeline-step:nth-child(1){animation-delay:.06s}
.timeline-step:nth-child(2){animation-delay:.14s}
.timeline-step:nth-child(3){animation-delay:.22s}
.timeline-step:nth-child(4){animation-delay:.30s}
.timeline-step:nth-child(5){animation-delay:.38s}

.timeline-dot{
  position:absolute;
  left:0.75rem;
  top:0.55rem;
  width:0.9rem;
  height:0.9rem;
  border-radius:999px;
  background:#ffffff;
  box-shadow:0 0 0 3px rgba(15,23,42,0.06);
}

.timeline-dot::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  background:radial-gradient(circle,rgba(56,189,248,1) 0%,rgba(56,189,248,0.15) 100%);
}

.timeline-dot-final::before{
  background:radial-gradient(circle,rgba(45,212,191,1) 0%,rgba(45,212,191,0.15) 100%);
}

/* Step card – white */
.timeline-card{
  margin-left:2rem;
  background:#ffffff;
  border-radius:1rem;
  padding:0.9rem 1rem 1rem;
  border:1px solid rgba(148,163,184,0.5);
  box-shadow:0 12px 30px rgba(15,23,42,0.08);
  backdrop-filter:blur(10px);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),
             box-shadow .25s cubic-bezier(.22,.61,.36,1),
             border-color .25s cubic-bezier(.22,.61,.36,1);
}

.timeline-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(15,23,42,0.12);
  border-color:rgba(56,189,248,0.9);
}

.timeline-step-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.4rem;
}

.timeline-step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.8rem;
  height:1.8rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:#eff6ff;
  border:1px solid rgba(129,140,248,0.9);
  color:#1d4ed8;
}

.timeline-step-title{
  font-weight:600;
  font-size:.95rem;
  color:#0f172a;
}

.timeline-text{
  margin:0;
  font-size:.86rem;
  line-height:1.5;
  color:#4b5563;
}

/* Animation */
@keyframes timelineIn{
  0%{
    opacity:0;
    transform:translateY(18px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:640px){
  .process-timeline{
    padding:1.6rem 1.1rem 2rem;
  }
  .timeline-rail{
    padding-left:2.1rem;
  }
}
.contact-bullets{
  margin:0.75rem 0 0.75rem 1.2rem;
  padding:0;
  list-style:disc;
  color:#111827;
}

.contact-bullets li{
  font-size:0.92rem;
  line-height:1.6;
  margin-bottom:0.25rem;
}
.about-bullets{
  margin:0.5rem 0 0.75rem 1.2rem;
  padding:0;
  list-style:disc;
  color:#111827;
}

.about-bullets li{
  font-size:0.92rem;
  line-height:1.6;
  margin-bottom:0.25rem;
}
.pulse{
  position:relative;
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid var(--hogey-border);
  background:#fff;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:5px; cursor:pointer;
  overflow:hidden;
}

.pulse::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:rgba(0,0,0,0.04);
  transform:scale(0);
  transition:.4s ease;
}

.pulse.open::after{
  transform:scale(1.4);
  opacity:0;
}

.pulse span{
  width:20px; height:2px;
  background:var(--hogey-text);
  transition:.25s ease;
}

.pulse.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.pulse.open span:nth-child(2){opacity:0;}
.pulse.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* =======================================================
   HOW WE WORK – ZIGZAG TIMELINE (uses theme variables)
   ======================================================= */

.process-timeline{
  margin-top:1.4rem;
  padding:1.8rem 1.3rem 2.2rem;
  border-radius:1.5rem;
  background:var(--hogey-bg);
  border:1px solid var(--hogey-border);
  box-shadow:0 14px 40px rgba(0,0,0,0.06);
  position:relative;
  overflow:hidden;
}

/* soft teal glow that still works in dark mode */
.process-timeline::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0% 0%,rgba(51,164,166,0.16),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(51,164,166,0.10),transparent 55%);
  opacity:0.7;
  pointer-events:none;
}

.process-headline{
  position:relative;
  z-index:1;
}

/* Center rail for zigzag */
.timeline-rail{
  position:relative;
  z-index:1;
  margin:2rem auto 0;
  max-width:980px;
  padding:0 1rem;
}

.timeline-rail::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0.5rem;
  bottom:1.8rem;
  width:2px;
  background:linear-gradient(
    180deg,
    rgba(148,163,184,0.7),
    rgba(51,164,166,0.9)
  );
  opacity:0.9;
}

.timeline-rail::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0.4rem;
  border-width:10px 7px 0 7px;
  border-style:solid;
  border-color:rgba(51,164,166,0.95) transparent transparent transparent;
}

/* Steps alternate left/right */
.timeline-step{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;      /* odd = right */
  margin-bottom:1.8rem;
  opacity:0;
  transform:translateY(18px);
  animation:timelineIn .7s cubic-bezier(.22,.61,.36,1) forwards;
}

.timeline-step:nth-child(2){animation-delay:.08s}
.timeline-step:nth-child(3){animation-delay:.16s}
.timeline-step:nth-child(4){animation-delay:.24s}
.timeline-step:nth-child(5){animation-delay:.32s}

/* even steps go to the left side */
.timeline-step:nth-child(even){
  justify-content:flex-start;
}

/* dot sits on the center rail */
.timeline-dot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:1.1rem;
  width:0.9rem;
  height:0.9rem;
  border-radius:999px;
  background:var(--hogey-white);
  box-shadow:0 0 0 3px rgba(0,0,0,0.06);
}

.timeline-dot::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  background:radial-gradient(circle,rgba(51,164,166,1) 0%,rgba(51,164,166,0.18) 100%);
}

.timeline-dot-final::before{
  background:radial-gradient(circle,rgba(45,212,191,1) 0%,rgba(45,212,191,0.18) 100%);
}

/* cards sit left or right of the rail */
.timeline-card{
  position:relative;
  width:min(460px, calc(50% - 2.8rem));
  background:var(--hogey-white);
  border-radius:1rem;
  padding:0.9rem 1rem 1rem;
  border:1px solid var(--hogey-border);
  box-shadow:0 12px 30px rgba(0,0,0,0.10);
  backdrop-filter:blur(10px);
  transition:
    transform .25s cubic-bezier(.22,.61,.36,1),
    box-shadow .25s cubic-bezier(.22,.61,.36,1),
    border-color .25s cubic-bezier(.22,.61,.36,1);
}

/* slight offset so they don’t touch the rail */
.timeline-step:nth-child(odd) .timeline-card{
  margin-left:1.8rem;   /* right side of rail */
}

.timeline-step:nth-child(even) .timeline-card{
  margin-right:1.8rem;  /* left side of rail */
}

.timeline-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,0.18);
  border-color:var(--hogey-teal);
}

.timeline-step-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.4rem;
}

.timeline-step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.8rem;
  height:1.8rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:rgba(51,164,166,0.06);
  border:1px solid rgba(51,164,166,0.5);
  color:var(--hogey-teal-dark);
}

.timeline-step-title{
  font-weight:600;
  font-size:.95rem;
  color:var(--hogey-text);
}

.timeline-text{
  margin:0;
  font-size:.86rem;
  line-height:1.5;
  color:var(--hogey-text);
}

/* animation */
@keyframes timelineIn{
  0%{
    opacity:0;
    transform:translateY(18px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* Mobile: fall back to straight left-aligned timeline */
@media (max-width:768px){
  .timeline-rail{
    padding-left:2.1rem;
  }
  .timeline-rail::before,
  .timeline-rail::after{
    left:1.1rem;
    transform:none;
  }
  .timeline-step{
    justify-content:flex-start !important;
  }
  .timeline-card{
    width:100%;
    margin:0 0 0 2rem !important;
  }
  .timeline-dot{
    left:1.1rem;
    transform:none;
  }
}
/* -------------------------------------------------
   Modern contact form styling (HogeyTech)
   ------------------------------------------------- */

.contact-form{
  border-radius:1.25rem;
  border:1px solid var(--hogey-border);
  padding:1.6rem 1.5rem 1.8rem;
  background:var(--hogey-white);
  box-shadow:0 18px 45px rgba(0,0,0,0.06);
}

.field{
  margin-bottom:1.05rem;
}

label{
  display:block;
  font-size:.83rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--hogey-gray);
  margin-bottom:.25rem;
}

/* inputs / textarea / select – unified look */
input[type=text],
input[type=email],
select,
textarea{
  width:100%;
  padding:.65rem .7rem;
  border-radius:.55rem;
  border:1px solid var(--hogey-border);
  background:var(--hogey-bg);
  font:inherit;
  color:var(--hogey-text);
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    transform .08s ease;
}

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

/* hover + focus states */
input[type=text]:hover,
input[type=email]:hover,
select:hover,
textarea:hover{
  border-color:rgba(148,163,184,0.9);
}

input[type=text]:focus-visible,
input[type=email]:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  border-color:var(--hogey-teal);
  box-shadow:0 0 0 1px rgba(51,164,166,0.4), 0 0 0 6px rgba(51,164,166,0.10);
  background:var(--hogey-white);
}

/* make native select look a bit cleaner */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:2.1rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--hogey-gray) 51%),
    linear-gradient(135deg, var(--hogey-gray) 49%, transparent 50%);
  background-position:
    calc(100% - 14px) 52%,
    calc(100% - 9px) 52%;
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
}

/* checkbox row */
.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:.45rem;
  font-size:.8rem;
  color:var(--hogey-gray);
  margin-top:.25rem;
}

.checkbox-row input[type=checkbox]{
  margin-top:.18rem;
  width:15px;
  height:15px;
  accent-color:var(--hogey-teal);
}

/* inline links in consent */
.checkbox-row a{
  font-weight:600;
}

/* send button in the form – slightly larger + full width on mobile */
.contact-form .btn-primary{
  margin-top:.4rem;
  padding:.6rem 1.55rem;
  border-radius:999px;
}

@media (max-width:640px){
  .contact-form{
    padding:1.4rem 1.1rem 1.6rem;
    border-radius:1.1rem;
  }
  .contact-form .btn-primary{
    width:100%;
    justify-content:center;
  }
}
a {
  text-decoration: none !important;
}