/* =========================
   Horsfall-IT v1 - Clean merged stylesheet
   Notes:
   - Duplicates merged with comments.
   - "Latter wins" behaviour preserved where duplicates existed.
   ========================= */

:root{
  --bg: #070c14;
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.10);
  --text: #eaf2ff;
  --muted: rgba(234,242,255,.72);
  --line: rgba(234,242,255,.14);
  --accent: #17a7ff;   /* matches logo vibe */
  --accent-2: #4fd0ff;
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;
  --container: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(23,167,255,.22), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(79,208,255,.16), transparent 55%),
              var(--bg);
  color: var(--text);
  line-height:1.6;
}
a{ color: inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.container{
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

/* =========================
   HEADER / NAV
   ========================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(7,12,20,.55);
  border-bottom: 1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  gap: 18px;
  position: relative; /* anchor dropdown */
}

.h2 {
  margin-bottom: 12px;
}

/* Contact hero split layout */
.hero-split {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr;
  gap: 28px;
  align-items: start;
}

.hero-card {
  margin-top: 56px; /* lines up with headline nicely */
}

@media (max-width: 1024px) {
  .hero-split {
    grid-template-columns: 1fr;
  }
  .hero-card {
    margin-top: 18px;
  }
}


.brand{
  display: flex;
  align-items: center;
  flex-shrink: 0;        /* stop container shrink */
}

.brand-logo{
  height: 48px;          /* keep your intended size */
  width: auto;           /* preserve aspect ratio */
  flex-shrink: 0;        /* CRITICAL: stop flex compression */
  max-width: none;       /* prevent forced scaling */
}

.nav{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Desktop default nav */
.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 14px;
}

.nav-links a{
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
}
.nav-links a:hover{ background: var(--panel); color: var(--text); }
.nav-links a.active{ color: var(--text); background: var(--panel); }

/* Burger hidden on desktop by default */
/* Burger hidden on desktop by default */
.nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid rgba(79,208,255,.25);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor:pointer;
  flex: 0 0 auto;

  /* burger layout */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* keep it to the far right */
  margin-left: auto;
}

.nav-toggle span{
  display:block;
  width: 22px;
  height: 2px;
  background: var(--accent-2); /* cyan lines */
  border-radius: 999px;
  opacity: 1;
}

.nav-toggle:hover{
  background: rgba(79,208,255,.08);
  border-color: rgba(79,208,255,.35);
}


/* MERGED (latter wins):
   - You had multiple conflicting ".nav.is-collapsed" blocks.
   - Keep ONE consistent overflow mode (desktop fallback). */
.nav.is-collapsed .nav-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav.is-collapsed .nav-links{ display:none; }
.nav.is-collapsed .nav-links.open{ display:flex; }

/* Mobile nav (single source of truth)
   MERGED (latter wins) from:
   - @media (max-width: 980px) blocks
   - ABSOLUTE MOBILE NAV FIX (max-width: 1024px)
   Using 1024px because your menu can be long and should collapse earlier. */
@media (max-width: 1024px){
  .nav-toggle{
    display:flex;
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 300;
  }

  .nav-links{
    display:none;
    position:absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(7,12,20,.95);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    z-index: 250;
  }
  .nav-links.open{ display:flex; }

  .nav-links li a{
    display:block;
    padding: 12px;
  }

  .nav-cta a,
  .nav-portal a{ width: 100%; }
}

/* =========================
   BUTTONS / BADGES
   ========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  box-shadow: none;
}
.btn:hover{ background: var(--panel-2); }
.btn-primary{
  border-color: rgba(23,167,255,.45);
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.75));
  color: #06101f;
  font-weight: 700;
}
.btn-primary:hover{ filter: brightness(1.03); }
.btn-ghost{ background: transparent; }
.btn-sm{ padding: 10px 12px; border-radius: 12px; }

.badge{
  display:inline-flex;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
}

/* =========================
   SECTIONS / TYPO
   ========================= */

.section{ padding: 70px 0; }
.section.alt{
  padding-top: 48px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.03), transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* MERGED (latter wins):
   - .section-head defined twice (margin + display flex)
   - final behaviour is display flex column */
.section-head{
  color: var(--accent-2);
  margin-bottom: 22px;
  display: flex;
  
  flex-direction: column;
  align-items: flex-start;
}
.section-head h2{ font-size: clamp(24px, 3vw, 34px); }
.muted{ color: var(--muted); }
.mt-24{ margin-top: 24px; }

/* =========================
   HERO
   ========================= */

.hero{ padding-bottom: 24px; }

.hero-inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:center;
}

.hero h1{
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.accent{ color: var(--accent-2); }
.lead{ color: var(--muted); margin-top: 12px; max-width: 52ch; }
.hero-actions{ display:flex; gap: 12px; margin-top: 18px; flex-wrap:wrap; }
.hero-badges{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px; }

.hero-visual{ display:flex; justify-content:flex-end; }

/* (kept) older glass-card styles (still safe if used elsewhere) */
.glass-card{
  width: min(420px, 100%);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glass-row{
  display:flex; gap:8px; padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.25); }
.glass-body{ padding: 18px; display:grid; gap: 14px; }

/* --- HERO WEBSITE MOCK --- */
.site-mock{
  width: min(460px, 100%);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.site-mock:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 30% 30%, rgba(23,167,255,.35), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(79,208,255,.18), transparent 65%);
  filter: blur(2px);
  pointer-events:none;
  opacity:.9;
}
.site-mock-top{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.site-mock-dots{ display:flex; gap: 7px; }
.site-mock-dots span{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.25);
}
.site-mock-url{
  flex:1;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  padding: 0 12px;
  color: rgba(234,242,255,.78);
  font-size: 13px;
  letter-spacing: .2px;
}
.site-mock-body{
  padding: 14px;
  display:grid;
  gap: 14px;
}
.site-mock-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.site-mock-logo{
  width: 34px;
  height: 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(23,167,255,.75), rgba(79,208,255,.35));
  border: 1px solid rgba(255,255,255,.14);
}
.site-mock-links{
  display:flex;
  gap: 8px;
  flex:1;
  justify-content:center;
}
.site-mock-links span{
  width: 42px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.site-mock-cta{
  width: 64px;
  height: 26px;
  border-radius: 10px;
  background: rgba(23,167,255,.20);
  border: 1px solid rgba(23,167,255,.35);
}
.site-mock-hero{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:grid;
  gap: 10px;
}
.site-mock-h1{
  height: 14px;
  width: 88%;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.12);
}
.site-mock-h2{
  height: 14px;
  width: 72%;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.12);
}
.site-mock-p{
  height: 10px;
  width: 92%;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.09);
}
.site-mock-actions{ display:flex; gap: 10px; margin-top: 2px; }
.site-mock-btn{
  height: 32px;
  width: 110px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.site-mock-btn.primary{
  border-color: rgba(23,167,255,.45);
  background: linear-gradient(135deg, rgba(23,167,255,.55), rgba(79,208,255,.30));
}
.site-mock-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.site-mock-card{
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(110px 70px at 30% 30%, rgba(23,167,255,.18), transparent 60%),
    rgba(0,0,0,.10);
}
.site-mock-badge{ padding: 0 14px 14px; }

/* =========================
   TRUST CARDS
   ========================= */

.trust-card{
  position: relative;
  overflow: hidden;
  border-color: rgba(255,255,255,.14);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.trust-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(23,167,255,.85), rgba(79,208,255,.55));
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform .22s ease, opacity .22s ease;
  opacity: .75;
}

.trust-card .trust-sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 35%, transparent 70%);
  transform: translateX(-35%);
  transition: transform .35s ease, opacity .25s ease;
}

.trust-card::after{
  content:"";
  position:absolute;
  width: 220px;
  height: 220px;
  left: -140px;
  top: -140px;
  background: radial-gradient(circle at 35% 35%, rgba(23,167,255,.18), transparent 62%);
  pointer-events:none;
}

.trust-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

.trust-icon{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  -webkit-mask: var(--icon) center / 18px 18px no-repeat;
  mask: var(--icon) center / 18px 18px no-repeat;
}

.trust-card h3{
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.trust-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.trust-card:hover{
  transform: translateY(-3px);
  border-color: rgba(23,167,255,.28);
  background: rgba(255,255,255,.07);
}
.trust-card:hover::before{ transform: scaleX(1); opacity: 1; }
.trust-card:hover .trust-sheen{ opacity: 1; transform: translateX(35%); }

/* Headings with cyan + underline system */
.why-head h2,
.services-head h2,
.expect-head h2,
.how-head h2{
  color: var(--accent-2);
  position: relative;
  display: inline-block;
  line-height: 1.15;
  margin-bottom: 14px;
}
.why-head p,
.services-head p,
.expect-head p,
.how-head p{
  margin-top: 10px;
}

/* MERGED (latter wins): underline widths differed. Latter values kept. */
.why-head h2::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -12px;
  width: 48px; /* latter wins */
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
}
.services-head h2::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -12px;
  width: 54px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
}
.expect-head h2::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -12px;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
}
.how-head h2::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -12px;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
}

/* =========================
   SERVICE CARDS
   ========================= */

.service-card{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.service-card .link{ margin-top: auto; }

.service-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(23,167,255,.75), rgba(79,208,255,.40));
  transform: scaleX(.35);
  transform-origin: left;
  opacity: .65;
  transition: transform .22s ease, opacity .22s ease;
}
.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 35%, transparent 70%);
  transform: translateX(-35%);
  transition: transform .35s ease, opacity .25s ease;
}
.service-card:hover{
  transform: translateY(-3px);
  border-color: rgba(23,167,255,.26);
}
.service-card:hover::before{ transform: scaleX(1); opacity: 1; }
.service-card:hover::after{ opacity: 1; transform: translateX(35%); }

.service-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  -webkit-mask: var(--service-icon) center / 18px 18px no-repeat;
  mask: var(--service-icon) center / 18px 18px no-repeat;
}

.service-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.service-head h3{
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}

/* =========================
   HOW IT WORKS (cards + icons)
   ========================= */

.how-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* IMPORTANT: .how-head is used both for section head and row header in your CSS.
   Keeping name, but not overriding section layout because .section-head handles it. */
.how-head{
  display: flex;
  align-items: center;
  gap: 12px;
}
.how-head h3{
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.how-step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #06101f;
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
}

.how-icon{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  -webkit-mask: var(--how-icon) center / 18px 18px no-repeat;
  mask: var(--how-icon) center / 18px 18px no-repeat;
}

/* =========================
   EXPECTATION CARDS
   ========================= */

.expect-card{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.expect-headrow{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.expect-headrow h3{
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.expect-icon{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  -webkit-mask: var(--expect-icon) center / 18px 18px no-repeat;
  mask: var(--expect-icon) center / 18px 18px no-repeat;
}
.expect-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(23,167,255,.75), rgba(79,208,255,.40));
  transform: scaleX(.35);
  transform-origin: left;
  opacity: .65;
  transition: transform .22s ease, opacity .22s ease;
}
.expect-card:hover{
  transform: translateY(-3px);
  border-color: rgba(23,167,255,.26);
  background: rgba(255,255,255,.07);
}
.expect-card:hover::before{ transform: scaleX(1); opacity: 1; }

/* =========================
   MINI CHART (used in mock/visuals)
   ========================= */

.mini-chart{
  height: 110px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(140px 80px at 30% 30%, rgba(23,167,255,.35), transparent 60%),
              radial-gradient(180px 90px at 70% 60%, rgba(79,208,255,.22), transparent 65%),
              rgba(0,0,0,.18);
}
.mini-lines div{
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  margin-top: 10px;
}

/* =========================
   GRIDS / CARDS
   ========================= */

/* MERGED (latter wins):
   - .grid-3 defined twice. Latter values: gap 16px. */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; /* latter wins */
}

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.card{
  display:flex;
  flex-direction:column;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  box-shadow: 0 10px 35px rgba(0,0,0,.20);
}
.card h3{ font-size: 20px; margin-bottom: 8px; }
.card p{ color: var(--muted); }
.card .link{ display:inline-block; color: var(--accent-2); margin-top:auto; }
.card.soft{ background: rgba(255,255,255,.05); }
.card.highlight{
  background: linear-gradient(135deg, rgba(23,167,255,.18), rgba(79,208,255,.08));
  border-color: rgba(23,167,255,.30);
}

/* =========================
   CTA
   ========================= */

.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.cta-title{
  color: var(--accent-2);
  position: relative;
  display: inline-block;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  margin-bottom: 10px;
}
.cta-title::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -10px;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
}

/* =========================
   FOOTER
   ========================= */

.site-footer{
  margin-top: 70px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  padding: 40px 0 20px;
}

.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 0.9fr;
  gap: 40px;
  align-items:start;
}

@media (max-width: 900px){
  .footer-top{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.footer-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-logo{
  height: 46px;
  margin: 8px 0 12px;
  line-height: 1.5;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display: block;
}

.footer-tagline{
  color: var(--muted);
  max-width: 48ch;
  line-height: 1.65;
}

.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  margin-top: 2px;
}

.footer-title{
  color: var(--text);
  font-size: 0.95rem;
  letter-spacing: .02em;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.footer-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,167,255,.9), rgba(79,208,255,.55));
  opacity: .9;
}

.footer-links,
.footer-meta{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(1, minmax(160px,1fr));
  gap: 10px 32px;
}

.footer-links a{
    display: block;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  color: var(--muted);
  display: inline-block;
  padding:; 2px 0;
}

/* 3) CONTACT: force vertical list (prevents the “dropping down” look) */
.footer-meta{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: 1fr; /* always one per line */
  gap: 10px;
}

.footer-meta li{
  margin: 0;
}

.footer-meta a{
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.footer-links li{
  margin: 0;
}

.footer-links a:hover,
.footer-meta a:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.footer-bottom{
  margin-top: 24px;
  padding-top: 12px;
  font-size: 0.8rem;
  border-top: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: var(--muted);
}

.footer-bottom-links{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-bottom-links a{ color: var(--muted); }
.footer-bottom-links a:hover{ color: var(--text); }
.footer-dot{ opacity: 0.5; }

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 980px){
  .container{ width: calc(100% - 28px); }

  .hero{ padding: 34px 0 18px; }
  .hero-inner{ grid-template-columns: 1fr; gap: 18px; }
  .hero h1{
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.08;
  }
  .lead{ max-width: 60ch; }

  .hero-visual{ order: 2; }
  .site-mock{ width: 100%; }
  .site-mock-cards{ grid-template-columns: 1fr; }

  .section{ padding: 44px 0; }
  .section-head h2{ font-size: clamp(22px, 5.8vw, 30px); }

  /* underline collision adjustment */
  .why-head h2::after,
  .services-head h2::after,
  .how-head h2::after,
  .expect-head h2::after,
  .cta-title::after{
    bottom: -10px;
  }

  .grid-2{ grid-template-columns: 1fr; gap: 14px; }
  .card{ padding: 16px; }

  .trust-head,
  .service-head,
  .expect-headrow,
  .how-head{
    gap: 10px;
  }

  .hero-badges,
  .footer-badges{
    gap: 8px;
  }
  .badge{
    padding: 7px 10px;
    font-size: 13px;
  }

  .cta{
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer{ padding: 36px 0 16px; }
}

/* MERGED (latter wins): responsive grid behaviour retained */
@media (max-width: 980px){
  .grid-3{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
@media (max-width: 420px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* =========================
   ICON VARIABLES (unchanged)
   ========================= */

.trust-comm{
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v12H7l-3 3V4zm4 5h8v2H8V9zm0-3h12v2H8V6z'/%3E%3C/svg%3E");
}
.trust-code{
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.7 16.7L4 12l4.7-4.7L7.3 6 1.3 12l6 6 1.4-1.3zM15.3 18l6-6-6-6-1.4 1.3 4.7 4.7-4.7 4.7 1.4 1.3z'/%3E%3C/svg%3E");
}
.trust-support{
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm5.7 4.3l-2 2a4 4 0 00-3.7-1.5V4a8 8 0 015.7 2.3zM10.2 6.8A4 4 0 008.5 8.5l-2-2A8 8 0 0110.2 4v2.8zM6.3 17.7l2-2a4 4 0 003.7 1.5V20a8 8 0 01-5.7-2.3zm7.5-.5a4 4 0 001.7-1.7l2 2A8 8 0 0113.8 20v-2.8zM12 8a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E");
}

.service-web{
  --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2zm0 4h16V7H4v2z'/%3E%3C/svg%3E");
}
.service-portal{
  --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 017 7c0 2.7-1.6 5-4 6.1V22H9v-6.9C6.6 14 5 11.7 5 9a7 7 0 017-7zm0 2a5 5 0 00-5 5c0 2.1 1.3 4 3.2 4.7l.8.3V20h2v-6l.8-.3C15.7 13 17 11.1 17 9a5 5 0 00-5-5z'/%3E%3C/svg%3E");
}
.service-pay{
  --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6a2 2 0 012-2h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6zm2 0v2h14V6H5zm0 6h6v2H5v-2z'/%3E%3C/svg%3E");
}
.service-improve{
  --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17l6-6 4 4 7-7 1.4 1.4-8.4 8.4-4-4L4.4 18.4 3 17z'/%3E%3C/svg%3E");
}
.service-systems{
  --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm0 16H5V5h14v14zM7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h6v2H7v-2z'/%3E%3C/svg%3E");
}
.service-hosting{
  --service-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v6H4V4zm0 10h16v6H4v-6zm2-8v2h2V6H6zm0 10v2h2v-2H6z'/%3E%3C/svg%3E");
}

.how-discovery{
  --how-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.5 3a6.5 6.5 0 015.1 10.5l4.7 4.7-1.4 1.4-4.7-4.7A6.5 6.5 0 119.5 3zm0 2a4.5 4.5 0 100 9 4.5 4.5 0 000-9z'/%3E%3C/svg%3E");
}
.how-build{
  --how-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3l7 7-4 4-7-7V3h4zM3 14l7-7 7 7-7 7H3v-7z'/%3E%3C/svg%3E");
}
.how-launch{
  --how-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l4 8-4 4-4-4 4-8zm0 12l4 4H8l4-4z'/%3E%3C/svg%3E");
}

.expect-speed{
  --expect-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 109 9h-2a7 7 0 11-7-7V3zm1 5h-2v5l4 2 .9-1.8-2.9-1.4V8z'/%3E%3C/svg%3E");
}
.expect-secure{
  --expect-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l7 4v6c0 5-3 9-7 10C8 21 5 17 5 12V6l7-4zm-1 13l6-6-1.4-1.4L11 12.2 8.4 9.6 7 11l4 4z'/%3E%3C/svg%3E");
}

/* Website packages */
.pkg-starter{ --pricing-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm2 0v2h12V6H6zm0 5h6v2H6v-2z'/%3E%3C/svg%3E"); }
.pkg-pro{ --pricing-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l4 4h6v6l-4 4 4 4-2 2-4-4-4 4-4-4-4 4-2-2 4-4-4-4V6h6l4-4zm0 6a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E"); }
.pkg-advanced{ --pricing-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10v4H7V2zm-3 6h16v14H4V8zm4 3v2h8v-2H8z'/%3E%3C/svg%3E"); }

/* Support */
.sup-essential{ --pricing-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l7 4v6c0 5-3 9-7 10C8 21 5 17 5 12V6l7-4z'/%3E%3C/svg%3E"); }
.sup-growth{ --pricing-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17l6-6 4 4 7-7 1.4 1.4-8.4 8.4-4-4L5.4 18.4 4 17z'/%3E%3C/svg%3E"); }
.sup-priority{ --pricing-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l3 7h7l-5.5 4.1L18 21l-6-4-6 4 1.5-7.9L2 9h7l3-7z'/%3E%3C/svg%3E"); }


/* =========================
   SUPPORT PLANS
   ========================= */
.support-head h2{
  color: var(--accent-2);
  position: relative;
  display: inline-block;
  line-height: 1.15;
  margin-bottom: 14px;
}
.support-head h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
}
.support-head p{ margin-top: 10px; }

.support-card{
  position: relative;
  overflow: hidden;
}

.support-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.support-price{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
}

.support-amount{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.support-amount span{
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 4px;
}

.tick-list{
  list-style:none;
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.tick-list li{
  position: relative;
  padding-left: 22px;
  color: var(--muted);
}
.tick-list li::before{
  content:"";
  position:absolute;
  left:0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.support-card.popular{
  border-color: rgba(23,167,255,.45);
  background: linear-gradient(135deg, rgba(23,167,255,.14), rgba(79,208,255,.06));
}

.support-popular{
  position:absolute;
  top:-12px;
  right:18px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.75));
  color: #06101f;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}


/* =========================
   FIX: How it works heading left aligned
   (because .how-head is reused in cards)
   ========================= */
.section-head.how-head{
  display: flex;              /* override .how-head row style */
  flex-direction: column;     /* stack title + subtext */
  align-items: flex-start;    /* LEFT */
  text-align: left;           /* LEFT */
}

/* Keep the card header row layout */
.how-card .how-head{
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* =========================
   PRICING / PACKAGE CARDS (shared)
   Apply to BOTH website packages + monthly support cards
   ========================= */

.pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 980px){
  .pricing-grid{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
@media (max-width: 420px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.pricing-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  box-shadow: 0 10px 35px rgba(0,0,0,.20);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

/* top accent line (same everywhere) */
.pricing-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: linear-gradient(90deg, rgba(23,167,255,.75), rgba(79,208,255,.40));
  transform: scaleX(.35);
  transform-origin: left;
  opacity: .65;
  transition: transform .22s ease, opacity .22s ease;
}

/* sheen sweep */
.pricing-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 35%, transparent 70%);
  transform: translateX(-35%);
  transition: transform .35s ease, opacity .25s ease;
}

.pricing-card:hover{
  transform: translateY(-3px);
  border-color: rgba(23,167,255,.26);
  background: rgba(255,255,255,.07);
}
.pricing-card:hover::before{ transform: scaleX(1); opacity: 1; }
.pricing-card:hover::after{ opacity: 1; transform: translateX(35%); }

/* header row: icon + title (consistent) */
.pricing-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}
.pricing-head h3{
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}

/* icon matches your other sections (mask-based) */
.pricing-icon{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23,167,255,.95), rgba(79,208,255,.65));
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  -webkit-mask: var(--pricing-icon) center / 18px 18px no-repeat;
  mask: var(--pricing-icon) center / 18px 18px no-repeat;
}

/* subtext */
.pricing-desc{ color: var(--muted); margin: 0; }

/* feature list matches everywhere */
.pricing-features{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pricing-features li{
  display: flex;
  gap: 10px;
  color: var(--muted);
}
.pricing-features li::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 7px;
  background: rgba(79,208,255,.95);
  box-shadow: 0 0 0 3px rgba(79,208,255,.10);
  flex: 0 0 8px;
}

/* price area */
.pricing-price{
  margin-top: 2px;
  display: grid;
  gap: 6px;
}
.pricing-price strong{
  font-size: 18px;
}
.pricing-price .muted{
  font-size: 13px;
}

/* CTA pinned to bottom */
.pricing-cta{
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  justify-content: flex-start;
}
.pricing-cta a{ width: 100%; }

/* Popular styling */
.pricing-card.is-popular{
  border-color: rgba(23,167,255,.30);
  background: linear-gradient(135deg, rgba(23,167,255,.16), rgba(79,208,255,.06));
}
.pricing-badge{
  position:absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(23,167,255,.35);
  background: rgba(23,167,255,.12);
  color: var(--text);
}

/* Optional small “pill” label (if you want it everywhere) */
.pricing-pill{
  align-self: flex-start;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}


/* === MOBILE: force burger to far-right in header === */
@media (max-width: 1024px){
  .header-inner{ position: relative; }

  .nav-toggle{
    position: absolute;
    right: 0;                 /* hard-right */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;           /* stop any flex spacing affecting it */
  }
  
  @media (max-width: 1024px){
  .brand-logo{
    max-height: 44px;
  }
}
}

/* ============================
   CONTACT FORM (Horsfall-IT)
   ============================ */

.form {
  margin-top: 14px;
}

.form-group {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.form label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #e9eef7);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 18, 28, 0.55);
  color: var(--text, #e9eef7);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

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

.form input::placeholder,
.form textarea::placeholder {
  color: rgba(233, 238, 247, 0.55);
}

.form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(233, 238, 247, 0.75) 50%),
    linear-gradient(135deg, rgba(233, 238, 247, 0.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: rgba(0, 193, 255, 0.65);
  box-shadow: 0 0 0 4px rgba(0, 193, 255, 0.16);
  background: rgba(10, 18, 28, 0.75);
}

.form .btn {
  margin-top: 6px;
}

/* Make the two cards align nicely */
.grid-2 {
  align-items: start;
}

.grid-2 .card + .card {
  margin-top: 0;
}

/* Stack cards vertically in right column */
.stack {
  display: grid;
  gap: 24px;
}

/* Right-side list to match site styling */
.list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  padding-left: 18px;
}

.list li {
  color: rgba(233, 238, 247, 0.88);
}

.muted {
  margin-top: 12px;
  color: rgba(233, 238, 247, 0.68);
}

/* Mobile polish */
@media (max-width: 640px) {
  .form input,
  .form select,
  .form textarea {
    padding: 12px 12px;
    border-radius: 14px;
  }

  .form .btn {
    width: 100%;
  }
}

/* Contact alt links */
.contact-alt {
  margin-top: 12px;
}

.contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.contact-link:hover {
  text-decoration: underline;
}

/* ===============================
   Contact form status messages
   =============================== */

.contact-status {
  margin-bottom: 32px;
}

/* Success */
.contact-status-success {
  border-left: 4px solid var(--accent);
  background: linear-gradient(
    to right,
    rgba(0, 180, 216, 0.06),
    transparent
  );
}

/* Error */
.contact-status-error {
  border-left: 4px solid #ff6b6b;
  background: linear-gradient(
    to right,
    rgba(255, 107, 107, 0.06),
    transparent
  );
}

/* Optional: tighten list spacing inside status cards */
.contact-status .list {
  margin-top: 12px;
}

/* Optional: reduce heading spacing slightly */
.contact-status .h2 {
  margin-bottom: 12px;
}

/* ===============================
   Legal pages (Privacy / Terms)
   Cleaner typography + spacing
   Scoped to .legal so it won't affect other pages
   =============================== */

.legal {
  max-width: 920px; /* keeps lines readable */
}

.legal .muted {
  margin-top: 8px;
  margin-bottom: 18px;
}

/* Headings */
.legal h1,
.legal .h1 {
  margin: 0 0 18px;
}

.legal h2,
.legal .h2 {
  margin: 28px 0 12px;
  padding-top: 6px; /* subtle breathing room */
}

.legal h3,
.legal .h3 {
  margin: 22px 0 10px;
}

/* Paragraph rhythm */
.legal p {
  margin: 0 0 14px;
  line-height: 1.75;
}

.legal p + h2,
.legal p + .h2 {
  margin-top: 24px; /* avoids giant gaps */
}

/* Lists */
.legal ul,
.legal ol {
  margin: 10px 0 16px;
  padding-left: 20px;
}

.legal li {
  margin: 8px 0;
}

.legal ul.list,
.legal ol.list {
  margin: 10px 0 16px;
  padding-left: 18px;
}

.legal ul.list li,
.legal ol.list li {
  margin: 8px 0;
}

/* Links inside legal pages */
.legal a {
  text-underline-offset: 3px;
}

/* Optional: make sections feel grouped without heavy borders */
.legal .card {
  padding: 22px;
}

/* ===============================
   Cookie notice (essential only)
   =============================== */

.cookie-notice {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 9999;
  background: linear-gradient(180deg, rgba(15,20,30,0.95), rgba(10,15,25,0.95));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

.cookie-inner {
  max-width: 1200px;
  margin: auto;
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.cookie-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e6edf3;
}

.cookie-text a {
  color: var(--accent);
  text-decoration: underline;
}

.cookie-btn {
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 640px) {
  .cookie-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-btn {
    align-self: flex-end;
  }
}

/* Reset + identical styling for BOTH lists */
.site-footer .footer-links,
.site-footer .footer-meta{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr; /* identical single-column look */
  gap: 10px;                  /* identical spacing */
}

.site-footer .footer-links li,
.site-footer .footer-meta li{
  margin: 0;
  padding: 0;
}

.site-footer .footer-links a,
.site-footer .footer-meta a{
  display: block;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Optional: ensure both have the same hover behaviour */
.site-footer .footer-links a:hover,
.site-footer .footer-meta a:hover{
  text-decoration: underline;
}

/* NORMALISE footer link colours */
.site-footer .footer-links a,
.site-footer .footer-meta a{
  color: var(--muted);
}

/* Hover state – same for both */
.site-footer .footer-links a:hover,
.site-footer .footer-meta a:hover{
  color: #3bbcff; /* your accent blue */
}

/* ===============================
   LEGAL PAGES OVERRIDES (TIGHTER)
   =============================== */

/* keep width consistent with your design */
.container-narrow{
  max-width: 760px;
}

/* tighter padding like your other cards */
.legal .card{
  padding: 20px;
}

/* remove the global muted margin effect on legal pages */
.legal .muted{
  margin: 0 0 12px;
}

/* paragraphs: consistent spacing */
.legal p{
  margin: 0 0 12px;
  line-height: 1.65;
}

/* headings: reduce the big gaps */
.legal h1,
.legal .h1{
  margin: 0 0 12px;
}

.legal h2,
.legal .h2{
  margin: 18px 0 8px;
  padding-top: 0;
}

/* lists: tighter and consistent */
.legal ul,
.legal ol{
  margin: 8px 0 14px;
  padding-left: 18px;
}

.legal li{
  margin: 6px 0;
}

/* prevent “extra space at the end” */
.legal .card > *:last-child{
  margin-bottom: 0;
}

/* ===============================
   LEGAL PAGES (Privacy / Terms)
   Make them match main site rhythm
   =============================== */

.container-narrow{
  max-width: 760px;
}

/* Stop global .muted adding extra top spacing on legal pages */
.legal .muted{
  margin: 0 0 12px;
}

/* Reduce overall spacing inside the legal card */
.legal .card{
  padding: 20px;
}

/* Typography rhythm */
.legal p{
  margin: 0 0 12px;
  line-height: 1.65;
}

.legal .h1,
.legal h1{
  margin: 0 0 12px;
}

.legal .h2,
.legal h2{
  margin: 18px 0 8px;
  padding-top: 0;
}

/* Lists (your .list is globally styled with margin-top) */
.legal .list{
  margin: 8px 0 14px;
  padding-left: 18px;
  gap: 8px;
}

.legal .list li{
  margin: 0;
  color: rgba(233, 238, 247, 0.88);
}

/* Remove “last element” bottom gap */
.legal .card > *:last-child{
  margin-bottom: 0;
}

/* ===============================
   CLIENT PORTAL – CYAN ACCENT
   =============================== */

/* Headings */
.portal-auth-card h2,
.portal-auth-card .h2 {
  color: var(--accent-2);
}

/* Input fields */
.portal-auth-card input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(79,208,255,.22);
  color: var(--text);
}

.portal-auth-card input:focus {
  border-color: rgba(79,208,255,.75);
  box-shadow: 0 0 0 4px rgba(79,208,255,.18);
  background: rgba(10,18,28,.75);
}

/* Labels */
.portal-auth-card label {
  color: rgba(234,242,255,.9);
}

/* Primary login button */
.portal-auth-card .btn-primary {
  background: linear-gradient(
    135deg,
    rgba(23,167,255,.95),
    rgba(79,208,255,.75)
  );
  border-color: rgba(79,208,255,.55);
  color: #06101f;
  font-weight: 700;
}

.portal-auth-card .btn-primary:hover {
  filter: brightness(1.05);
}

/* Secondary links */
.portal-auth-card a,
.portal-auth-card .contact-link {
  color: var(--accent-2);
}

.portal-auth-card a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Error card */
.portal-auth-error {
  border-left: 4px solid #ff6b6b;
  background: linear-gradient(
    to right,
    rgba(255,107,107,.08),
    transparent
  );
}

/* Password toggle button */
.portal-pass-toggle {
  border-color: rgba(79,208,255,.35);
  color: var(--accent-2);
}

.portal-pass-toggle:hover {
  background: rgba(79,208,255,.12);
}

/* Card glow (subtle, premium) */
.portal-auth-card {
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(79,208,255,.12);
}

/* Badge consistency if used */
.portal-auth-card .badge {
  border-color: rgba(79,208,255,.35);
  color: var(--accent-2);
}

/* ===============================
   PORTAL HEADER: no burger, no squish
   =============================== */

/* Allow wrapping instead of shrinking */
.portal-header .header-inner{
  flex-wrap: wrap;
  gap: 12px;
}

/* Stop logo getting crushed */
.portal-header .brand{
  flex: 1 1 auto;
  min-width: 220px;
}

/* Actions area stays neat */
.portal-header .nav{
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

/* Small screens: stack actions under logo */
@media (max-width: 640px){
  .portal-header .header-inner{
    align-items: flex-start;
  }

  .portal-header .nav{
    width: 100%;
    justify-content: flex-start; /* or flex-end if you prefer */
  }

  .portal-header .nav .btn{
    flex: 1 1 0;
    justify-content: center;
  }
}

/* ===============================
   PORTAL HEADER OVERRIDES
   Keep portal nav inline (no burger, no dropdown)
   =============================== */

.portal-header .nav-toggle{
  display:none !important; /* portal does not use burger */
}

.portal-header .header-inner{
  flex-wrap: wrap;
  gap: 14px;
}

/* Keep logo readable */
.portal-header .brand{
  flex: 0 0 auto;
}

/* Force nav to stay inline (override mobile dropdown rules) */
.portal-header .nav{
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  flex: 1 1 auto;
}

.portal-header .nav-links{
  display: flex !important;
  position: static !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Small screens: allow wrapping instead of squashing */
@media (max-width: 520px){
  .portal-header .nav-links{
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* ===============================
   PORTAL NAV – remove list bullets
   =============================== */

.portal-header .nav-links{
  list-style: none !important;
}

.portal-header .nav-links li{
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.portal-header .nav-links li::marker{
  content: none;
}

.portal-header nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* PORTAL NAV – remove any bullets or injected separators */
.portal-header .nav-links{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.portal-header .nav-links li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* if any global CSS is injecting dots */
.portal-header .nav-links li::before,
.portal-header .nav-links li::after{
  content: none !important;
}

.portal-header .nav-links li::marker{
  content: none !important;
}

/* =========================
   PORTAL HEADER NAV FIX
   Prevent overlap + allow wrapping
   ========================= */
.portal-header .header-inner{
  align-items: center;
  gap: 16px;
}

.portal-header .nav{
  margin-left: auto;
}

.portal-header .nav-links{
  display: flex;
  flex-wrap: wrap;          /* wrap instead of squashing/overlapping */
  justify-content: flex-end;
  gap: 12px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-header .nav-links li{
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-header .nav-links a{
  position: relative;       /* ensures correct click target */
  z-index: 2;
  display: inline-flex;
  align-items: center;
}

/* Portal dashboard cards */
.dashboard-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dashboard-card p{
  margin-bottom: auto; /* pushes button down */
}

.dashboard-card .btn{
  width: 100%;
  justify-content: center;
  margin-top: 16px;
  align-self: flex-start; /* consistent left alignment */
}

/* Orders page */
.portal-panel{
  gap: 14px;
}

.orders-top{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.orders-total{
  margin: 0;
}

.orders-list{
  display: grid;
  gap: 10px;
}

.order-row{
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;

  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

.order-row:hover{
  transform: translateY(-2px);
  border-color: rgba(79,208,255,.25);
  background: rgba(255,255,255,.06);
}

.order-left{
  display: grid;
  gap: 4px;
}

.order-right{
  text-align: right;
  display: grid;
  gap: 6px;
  margin-left: auto;
}

.order-meta{
  font-size: 13px;
  margin: 0;
}

/* Status pills */
.status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  width: fit-content;
  justify-self: end;
}

.status-pending{
  border-color: rgba(255, 205, 100, .25);
  background: rgba(255, 205, 100, .10);
}

.status-progress{
  border-color: rgba(79,208,255,.28);
  background: rgba(79,208,255,.10);
}

.status-waiting{
  border-color: rgba(180, 140, 255, .28);
  background: rgba(180, 140, 255, .10);
}

.status-complete{
  border-color: rgba(90, 255, 170, .25);
  background: rgba(90, 255, 170, .10);
}

.status-cancelled{
  border-color: rgba(255, 110, 110, .25);
  background: rgba(255, 110, 110, .10);
}

/* Order page */
.order-wrap{ max-width: 920px; }

.order-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.order-sub{ margin: 6px 0 0; font-size: 14px; }

.order-head-right{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 10px;
}

.order-panel{ gap: 12px; }
.order-title{ margin: 0; }

.order-total{ gap: 6px; }
.order-amount{ font-size: 20px; font-weight: 800; }

/* Messages */
.messages{
  display:grid;
  gap: 10px;
}

.message{
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.message-client{
  border-color: rgba(79,208,255,.25);
  background: linear-gradient(135deg, rgba(79,208,255,.08), rgba(255,255,255,.03));
}

.message-support{
  border-color: rgba(255,255,255,.14);
}

.message-top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
}

.message-time{ font-size: 13px; }
.message-body{ margin-top: 6px; white-space: normal; line-height: 1.65; }

/* Reply block */
.reply{
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 6px;
}

.form-error{
  margin-bottom: 10px;
  color: rgba(255,120,120,.95);
}

.portal-header .brand-logo{
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
  max-height: 48px !important;
  object-fit: contain;
  display: block;
}

/* ===============================
   PORTAL: sticky footer (no-scroll pages)
   =============================== */
body.portal{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.portal main{
  flex: 1 0 auto;
}

/* Your global footer has margin-top:70px; remove it in portal */
body.portal .site-footer{
  padding-top: 24px;
  margin-top: auto;   /* push footer to bottom */
  flex-shrink: 0;
}

/* ===============================
   ADMIN HEADER – match portal look
   =============================== */
.admin-header .nav-toggle{
  display:none !important; /* no burger in admin */
}

.admin-header .header-inner{
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.admin-header .brand-logo{
  height: 48px;   /* match main/portal */
  width: auto;
  max-width: none;
  flex-shrink: 0;
}

/* Keep admin nav inline (no dropdown rules) */
.admin-header .nav-links{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  position: static !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  background: transparent !important;
  border: 0 !important;
  width: auto !important;
}

/* Allow wrapping on small screens instead of squashing */
@media (max-width: 520px){
  .admin-header .nav-links{
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* ===============================
   ADMIN AUTH (login page styling)
   =============================== */
.admin-auth .section-head h2{
  color: var(--accent-2);
}

.admin-auth-card{
  box-shadow:
    0 12px 40px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(79,208,255,.12);
}

.admin-auth-error{
  border-left: 4px solid #ff6b6b;
  background: linear-gradient(to right, rgba(255,107,107,.08), transparent);
}

/* Page layout helper (footer at bottom on short pages) */
.page-flex{
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.page-flex > .section{
  flex: 1 0 auto;
}

/* Utility */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.right { text-align: right; }
.w-100 { width: 100%; }
.small { font-size: 0.9rem; }

/* Portal head */
.portal-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.portal-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.portal-title{ margin:0; }

/* Cards */
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.card-title{ margin:0; font-size:1.1rem; }
.card-kicker{ font-size:.9rem; opacity:.8; margin-bottom:8px; }
.card-metric{ font-size:2rem; font-weight:700; letter-spacing:-0.02em; }

/* Grids */
.grid{ display:grid; gap:14px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .portal-head{ align-items:flex-start; flex-direction:column; }
}

/* Tables */
.table-wrap{ overflow:auto; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.table th{ text-align:left; font-weight:600; opacity:.85; }

/* Filters */
.filters .label{ display:block; margin-bottom:6px; }
.filters-actions{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
@media (max-width:900px){
  .filters-actions{ align-items:stretch; }
  .filters-actions .btn{ width:100%; }
}

/* Pills */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.85rem; }
.pill-cyan{ background: rgba(0,255,255,.12); border:1px solid rgba(0,255,255,.25); }
.pill-green{ background: rgba(0,255,120,.12); border:1px solid rgba(0,255,120,.25); }
.pill-yellow{ background: rgba(255,200,0,.12); border:1px solid rgba(255,200,0,.25); }
.pill-red{ background: rgba(255,60,60,.12); border:1px solid rgba(255,60,60,.25); }
.pill-gray{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }

/* Separator */
.sep{ border:0; height:1px; background: rgba(255,255,255,.08); margin:16px 0; }

/* Fix dark-theme dropdown (select + option list) */
select {
  color: var(--text);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
}

/* The dropdown list items */
select option {
  background: #0f172a; /* dark */
  color: #e5e7eb;      /* light text */
}

/* If you use optgroup too */
select optgroup {
  background: #0f172a;
  color: #e5e7eb;
}

/* Pills / badges */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  white-space:nowrap;
}

.pill-success{
  border-color: rgba(46, 204, 113, .35);
  background: rgba(46, 204, 113, .12);
  color: rgba(190, 255, 220, .95);
}

.pill-warn{
  border-color: rgba(241, 196, 15, .35);
  background: rgba(241, 196, 15, .12);
  color: rgba(255, 245, 200, .95);
}

.pill-gray{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 18px;
}

.stat-label {
  font-size: 13px;
  color: rgba(255,255,255,.65);
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  margin-top: 6px;
}

.dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.action-tile {
  display: block;
  padding: 16px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 600;
}

.action-tile:hover {
  background: rgba(255,255,255,.08);
}

select, option { color: #111; }

/* =========================
   PREMIUM CLIENT WORK PAGE
   ========================= */

.cw-no-scroll { overflow: hidden; }

.cw-hero{
  padding: 48px 0 28px;
  position: relative;
}
.cw-hero:before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(0, 255, 255, .12), transparent 60%),
    radial-gradient(760px 420px at 78% 20%, rgba(0, 120, 255, .10), transparent 60%);
  opacity: .9;
}
.cw-hero-inner{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
  position: relative;
}
@media (max-width: 980px){
  .cw-hero-inner{ grid-template-columns: 1fr; }
}

.cw-badge{
  display:inline-flex;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.cw-title{
  margin: 14px 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(30px, 3.3vw, 44px);
}

.cw-sub{
  margin: 0 0 16px;
  color: rgba(255,255,255,.75);
  max-width: 62ch;
}

.cw-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px; }

.cw-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 560px){
  .cw-stats{ grid-template-columns: 1fr; }
}
.cw-stat{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px 12px;
}
.cw-stat-num{
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}
.cw-stat-label{
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

.cw-feature-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  display:flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.cw-feature-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 10px;
}
.cw-feature-kicker{ color: rgba(255,255,255,.62); font-size: 12px; }
.cw-feature-title{ font-size: 16px; font-weight: 700; margin-top: 2px; }
.cw-feature-meta{ color: rgba(255,255,255,.64); font-size: 12px; margin-top: 2px; }

.cw-pill{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  padding: 8px 10px;
  font-size: 12px;
}

.cw-feature-media{
  aspect-ratio: 16/10;
  background: rgba(0,0,0,.2);
  overflow:hidden;
}
.cw-feature-media img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.02);
}

.cw-feature-bottom{
  padding: 12px 14px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content: space-between;
}
.cw-feature-copy{
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.45;
}

.cw-section{ padding: 22px 0 28px; }
.cw-section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cw-h2{ margin:0; font-size: 24px; letter-spacing: -0.01em; color: var(--accent);}
.cw-lead{ margin: 6px 0 0; color: rgba(255,255,255,.72); }

.cw-filters{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 6px;
  border-radius: 999px;
}
.cw-filter{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.70);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.cw-filter.is-active{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}

.cw-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){ .cw-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .cw-grid{ grid-template-columns: 1fr; } }

.cw-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  overflow:hidden;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline: none;
}
.cw-card:hover, .cw-card:focus{
  transform: translateY(-2px);
  border-color: rgba(0,255,255,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
}
.cw-card-media{
  position: relative;
  aspect-ratio: 16/10;
  background: rgba(0,0,0,.22);
}
.cw-card-media img{
  width:100%; height:100%;
  object-fit: cover;
  filter: saturate(1.05);
}
.cw-card-overlay{
  position:absolute;
  left:10px; top:10px;
  display:flex; gap: 6px;
}
.cw-chip{
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.90);
}
.cw-chip-muted{ color: rgba(255,255,255,.70); }

.cw-card-body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.cw-card-title{
  font-weight: 750;
  letter-spacing: -0.01em;
}
.cw-card-sub{
  color: rgba(255,255,255,.70);
  font-size: 13px;
}
.cw-card-arrow{
  margin-top: 6px;
  color: rgba(0,255,255,.85);
  font-size: 13px;
}

/* CTA */
.cw-proof{
  padding: 18px 0 46px;
}
.cw-proof-inner{
  display:flex;
}
.cw-proof-card{
  width:100%;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: 18px;
  padding: 18px;
}
.cw-proof-card h3{ margin: 0 0 6px; }
.cw-proof-card p{ margin: 0 0 12px; color: rgba(255,255,255,.72); max-width: 70ch; }
.cw-proof-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Modal */
.cw-modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 9999;
}
.cw-modal[aria-hidden="false"]{ display:block; }
.cw-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}
.cw-modal-panel{
  position: relative;
  width: min(980px, calc(100vw - 24px));
  margin: 40px auto;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,17,22,.92);
  box-shadow: 0 20px 70px rgba(0,0,0,.55);
}
@media (max-width: 560px){
  .cw-modal-panel{ margin: 18px auto; }
}
.cw-modal-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.cw-modal-media{
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.25);
}
.cw-modal-media img{ width:100%; height:100%; object-fit: cover; }
.cw-modal-body{ padding: 14px 14px 16px; }
.cw-modal-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.cw-modal-title{ font-weight: 800; font-size: 18px; }
.cw-modal-meta{ color: rgba(255,255,255,.66); font-size: 13px; margin-top: 2px; }
.cw-modal-summary{ color: rgba(255,255,255,.78); margin: 10px 0 10px; }
.cw-modal-list{
  margin: 0 0 12px;
  padding-left: 18px;
  color: rgba(255,255,255,.74);
}
.cw-modal-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Carousel controls */
.cw-modal-media { position: relative; }

.cw-slide-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cw-prev{ left: 10px; }
.cw-next{ right: 10px; }

.cw-slide-btn[data-hidden]{
  display:none;
}

.cw-dots{
  position:absolute;
  left: 0; right: 0;
  bottom: 10px;
  display:flex;
  justify-content:center;
  gap: 8px;
  pointer-events: auto;
}
.cw-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.18);
  cursor:pointer;
}
.cw-dot.is-active{
  background: rgba(0,255,255,.70);
  border-color: rgba(0,255,255,.75);
}

/* Testimonial block inside modal */
.cw-testimonial{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}

.cw-testimonial-label{
  font-size: 12px;
  color: rgba(255,255,255,.62);
  margin-bottom: 6px;
}

.cw-testimonial-quote{
  margin: 0;
  color: rgba(255,255,255,.86);
  line-height: 1.5;
  font-size: 14px;
}

.cw-testimonial-meta{
  margin-top: 8px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
}

.cw-testimonial-name{
  font-weight: 700;
  color: rgba(255,255,255,.84);
}
.cw-testimonial-role{
  color: rgba(255,255,255,.62);
}

.section-divider {
  height: 1px;
  width: 100%;
  margin: 28px 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0, 217, 255, 0.22),
    transparent
  );
  opacity: 0.95;
}

/* PROMO BANNER */
.promo-banner {
  background: linear-gradient(90deg, #0e1621, #13263d);
  border-bottom: 1px solid rgba(79, 208, 255, 0.25);
  color: #eaf6ff;
  font-size: 0.95rem;
}

.promo-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}

.promo-inner strong {
  color: #4fd0ff;
  font-weight: 600;
}

.promo-cta {
  margin-left: 8px;
  padding: 6px 12px;
  background: #4fd0ff;
  color: #06131f;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.promo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(79, 208, 255, 0.35);
}

.promo-close {
  background: none;
  border: none;
  color: #9fdfff;
  font-size: 18px;
  cursor: pointer;
  margin-left: 6px;
}

.promo-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.promo-link:hover strong {
  text-decoration: underline;
}

.promo-close {
  background: none;
  border: none;
  color: #9fdfff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.promo-close:hover {
  color: #4fd0ff;
}

.cw-card-live{
  display:inline-block;
  margin-top:10px;
  font-size:.95em;
  opacity:.85;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cw-card-live:hover{ opacity:1; }

/* Locks the background page (keep this) */
.cw-no-scroll{
  overflow:hidden;
}

/* Make the modal panel fit the viewport and allow internal scrolling */
.cw-modal-panel{
  max-height: calc(100vh - 48px);
  overflow: hidden;            /* keeps the panel tidy */
}

/* Allow scrolling inside the modal content */
.cw-modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 360px); /* adjusts based on media/header; tweak if needed */
}

/* On smaller screens, give the body more room */
@media (max-width: 820px){
  .cw-modal-body{
    max-height: calc(100vh - 300px);
  }
}

.cw-modal-media{
  max-height: 42vh;
}
.cw-modal-media img{
  max-height: 42vh;
  width: 100%;
  object-fit: contain;
}