/* =========================================================
   Digital Dreams — Global Styles
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --bg: #0f172a;
  --card: rgba(255,255,255,0.9);
  --text: #1c1e21;
  --muted: #5f6c7b;
  --brand: #4a90e2;
  --brand-2:#3ddad7;
  --accent:#a780ff;
  --success:#27ae60;
  --danger:#e74c3c;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
  --radius: 18px;
  --maxw: 1100px;
  --highlight:#ff7a59;
  --sec-1:#f8f9fb;
  --sec-2:linear-gradient(135deg,#fbc2eb,#a6c1ee);
  --sec-3:#eefcf6;
  --sec-4:#fff7ed;
  --sec-5:#0f172a;
  --sec-6:#f5f7fb;
  --sec-7:linear-gradient(135deg,#8a7dff,#38bdf8);
}

/* --- DCMS logo tokens (map to your palette) --- */
:root{
  --dcms-brand: var(--brand);       /* used in grad A */
  --dcms-brand-2: var(--brand-2);   /* used in grad B */
  --dcms-brand-3: var(--accent);    /* secondary blend */
  --dcms-pip: #eef2ff;              /* dice pips */
}

/* --- Header layout safety net (if not already set) --- */
.wrap.nav{ display:flex; align-items:center; gap:16px; }
.logo-link{ display:flex; align-items:center; } /* keeps nav pushed right */

/* --- DCMS logo sizing/lockup --- */
.dcms-logo.nav-logo{
  --dcms-size: 38px;                 /* icon size in header (desktop) */
  display:inline-flex; align-items:center; gap:10px;
  line-height:1;
}
.dcms-logo .dcms-mark svg{
  height: var(--dcms-size); width: auto; display:block;
}
.dcms-logo .dcms-word{
  display:flex; flex-direction:column;
}
.dcms-logo .dcms-acronym{
  font-weight:800;
  font-size: clamp(16px, 1.8vw, 18px);
  letter-spacing:.3px;
  color:#e7eaf6;                    /* readable on your dark glass header */
}
.dcms-logo .dcms-tag{
  margin-top:2px;
  font-weight:600;
  font-size: clamp(10px, 1.1vw, 11.5px);
  color:#c7d2fe;
  opacity:.95;
}

/* Subtle 3D hover tilt for the cube (only if data-animate=true) */
.dcms-logo[data-animate="true"] .hover-tilt{
  transform-origin:50% 50%;
  transition: transform .28s ease;
}
.logo-link:hover .hover-tilt{
  transform: perspective(600px) rotateX(6deg) rotateY(-6deg) translateY(-1px);
}
@media (prefers-reduced-motion: reduce){
  .dcms-logo[data-animate="true"] .hover-tilt{ transition:none }
  .logo-link:hover .hover-tilt{ transform:none }
}

/* Responsive logo behavior: icon-only on tighter screens */
@media (max-width:980px){
  .dcms-logo.nav-logo{ --dcms-size: 30px; gap:8px; }
  .dcms-logo .dcms-word{ display:none; } /* keep just the cube on mobile */
}

/* Make hamburger bars visible on dark header */
.nav-toggle .bar{ background:#e7eaf6; }  /* was near-black; hard to see on dark nav */


/* ---------- Resets & Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.6;
}
a{ color:var(--brand-2); text-decoration:none }
a:hover{ opacity:.9; text-decoration:underline }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding:0 20px }

/* ---------- Header / Nav ---------- */
/* === NAV: Dark glass + short teal underline (screenshot style) === */
header{
  background: rgba(15,23,42,.86);                 /* deep navy glass */
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
header.scrolled{ background: rgba(15,23,42,.94); }

/* Link look (Title/Normal case, not ALL CAPS) */
.menu a{
  position: relative;
  color: #e7eaf6;
  text-transform: none;                            /* override uppercase */
  font-weight: 600;
  letter-spacing: .01em;
  padding: 12px 10px;
  transition: color .2s ease, opacity .2s ease;
}

/* hover text */
.menu a:hover{ color:#ffffff; text-decoration: none; }

/* remove old wide underline if present */
.menu a.active{ border-bottom: 0; }

/* short centered underline (hover + active) */
.menu a::after{
  content: "";
  position: absolute;
  left: 50%; bottom: -8px;
  width: 36px; height: 3px;
  background: var(--brand-2);                      /* teal (#3ddad7) */
  border-radius: 3px;
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.menu a:hover::after,
.menu a.active::after{
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* keep the Contact button readable on dark nav */
.menu .btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color:#fff; border:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* Mobile dropdown panel matches the dark header */
@media (max-width:980px){
  .menu{
    background: rgba(15,23,42,.95);
    border: 1px solid rgba(255,255,255,.12);
  }
  .menu a{ color:#e7eaf6; }
  .menu a:hover{ background: rgba(255,255,255,.06); }
  .menu a::after{ bottom: 6px; }                   /* visible inside panel */
}


/* ---------- Buttons & Pills ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.7); color:var(--text); border-radius:12px;
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.08) }
.btn.primary{ background:linear-gradient(135deg,var(--brand),var(--accent)); border-color:transparent; color:#fff }
.btn.highlight{ background:var(--highlight); color:#000; border-color:transparent }
.pill{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:rgba(123,114,255,.22); color:#222; font-weight:600; letter-spacing:.2px;
}

/* ---------- Hero (zigzag) ---------- */
.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.slide {
  min-width: 100%;
  position: relative;
}

.carousel .slide {
  min-width: auto; /* let flex-basis take over */
}

.slide img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.overlay {
  position: absolute;
  bottom: 20%;
  left: 10%;
  color: white;
  max-width: 500px;
}

.overlay h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.overlay p {
  font-size: 1.2rem;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 2rem;
  padding: 10px;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
}

.prev { left: 20px; }
.next { right: 20px; }

.prev:hover, .next:hover {
  background: rgba(0,0,0,0.8);
}


/* ---------- Layout Helpers ---------- */
section{ padding:64px 0 }
.section-title{ font-size:clamp(22px,3.6vw,36px); margin:0 0 12px }
.lead{ color:var(--muted) }
.grid{ display:grid; gap:20px }
@media(min-width:760px){
  .grid.cols-2{ grid-template-columns:1fr 1fr }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr) }
}
.card{ background:var(--card); border:1px solid rgba(0,0,0,.08); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow) }

/* ---------- Lists, Inputs, Tables ---------- */
ul.check{ list-style:none; padding-left:0 }
ul.check li{ margin:10px 0; position:relative; padding-left:26px }
ul.check li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--success); font-weight:800 }

input, textarea, select{
  padding:12px; border-radius:10px; border:1px solid rgba(0,0,0,.15);
  background:#fff; color:var(--text); width:100%;
}
input::placeholder, textarea::placeholder{ color:#888 }
textarea{ margin-top:10px }

table{ width:100%; border-collapse:collapse }
th, td{ padding:12px 16px; border-bottom:1px solid rgba(0,0,0,.08); text-align:left }
thead th{ background:var(--brand); color:#fff; font-weight:600 }
tr:last-child td{ border-bottom:none }
tbody tr:hover{ background:rgba(0,0,0,.03) }

/* ---------- Qualities ---------- */
.qualities-title{
  font-size:clamp(28px,4.4vw,48px);
  margin-bottom:6px;
  line-height:1.15;
  color:#0a2472;         /* dark blue text */
}
.qualities-subtitle{ margin-bottom:26px }
.qualities-grid{ gap:18px }
.quality-card{
  position:relative; padding:22px 20px; border-radius:16px;
  background:var(--card); border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; min-height:160px
}
.quality-card:hover{
  transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--brand) 25%, rgba(0,0,0,.06));
}
.quality-ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff; margin-bottom:12px
}
.quality-title{ margin:0 0 6px; color:var(--text); font-size:18px }
.quality-text{ margin:0; color:var(--muted) }
@media(max-width:759px){ .qualities .grid.cols-3{ grid-template-columns:1fr } }

/* ---------- Contact Hub ---------- */
#contact { background: linear-gradient(135deg, #eefcf6, #eaf4ff); color:#111827 }
.contact-hero{ display:flex; align-items:center; justify-content:space-between; gap:20px }
.contact-hero .contact-cta{ display:flex; gap:10px; flex-wrap:wrap }
.contact-tiles .tile{ display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease; border-radius:16px }
.tile:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08) }
.tile-ico{ font-size:26px; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff }
.tile-body h3{ margin:0 0 4px }
.chip{ display:inline-block; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,.06); font-size:12px; color:var(--muted) }
.contact-rows .list{ margin:0; padding-left:18px }
.contact-rows .list li{ margin:8px 0 }
.hours{ width:100%; border-collapse:separate; border-spacing:0 6px }
.hours td{ padding:6px 10px; background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:8px }

/* Slim form */
.contact-form-slim h3{ margin-top:0 }
form.slim .grid{ gap:10px }
form.slim input, form.slim select, form.slim textarea{ background:#fff; border:1px solid rgba(0,0,0,.15); color:var(--text) }
form.slim input:focus, form.slim select:focus, form.slim textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent)
}
.form-success{ display:none; margin-top:10px; border:1px solid #c7f1d9; background:#eafaf1; color:#1b5e20; padding:10px 12px; border-radius:10px }

/* ---------- Flowchart section ---------- */
.tree{ list-style:none; padding-left:0 }
.tree > li{ margin:10px 0 }
.tree > li > strong{ display:inline-block; margin-bottom:4px }
.tree ul{ list-style:disc; padding-left:20px }

/* ---------- Print only the flowchart ---------- */
@media print{
  body{ background:#fff !important; color:#000 !important }
  body *{ visibility:hidden !important }
  #content-flowchart, #content-flowchart *{ visibility:visible !important }
  #content-flowchart{ position:absolute; left:0; top:0; width:100% }
  #content-flowchart table{ border-collapse:collapse; width:100% }
  #content-flowchart th, #content-flowchart td{ border:1px solid #000; padding:6px }
}

/* ---------- Section Themes ---------- */
section{ background:transparent }
#services{ background:var(--sec-1); color:#111827 }
#services .lead{ color:#4b5563 }
#choose-agency{ background:var(--sec-2); color:#0f172a }
#choose-agency .quality-card{ background:rgba(255,255,255,.9) }
#choose-agency .quality-text{ color:#374151 }
#specialities{ background:var(--sec-3); color:#0f172a }
#specialities .card{ background:#ffffff; border-color:rgba(0,0,0,.06) }
#specialities .lead, #specialities .muted{ color:#475569 }
#content-flowchart{ background:var(--sec-4); color:#1f2937 }
#content-flowchart .card{ background:#ffffff; border-color:rgba(0,0,0,.08) }
#content-flowchart .muted{ color:#6b7280 }
#join{ background:var(--sec-5); color:#fff }
#join .card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12) }
#join .section-title, #join p{ color:#e5e7eb }
#join .btn{ border-color:rgba(255,255,255,.2); color:#fff }

/* (removed conflicting #contact background override) */

#viral-marketing{ background:var(--sec-7); color:#fff }
#viral-marketing .card{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18) }
#viral-marketing .muted{ color:#e5e7eb }
#viral-marketing table th{ background:rgba(0,0,0,.25); color:#fff }
#viral-marketing table td{ color:#f8fafc }
#services, #choose-agency, #specialities, #content-flowchart, #join, #contact, #viral-marketing{
  border-top:1px solid rgba(0,0,0,.06)
}

/* ---------- Reveal Animations ---------- */
.reveal-init{ opacity:0; transform:translateY(14px) }
.reveal-on{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease }

/* (removed global: span { background-color: gray; }) */

/* Viral marketing specific */
#viral-marketing { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color:#fff; padding:80px 0 }
#viral-marketing .section-title { color:#ffffff; font-size:clamp(24px, 3vw, 36px); margin-bottom:20px }
#viral-marketing .muted { color:rgba(255,255,255,0.7) }
#viral-marketing .card { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:var(--radius); box-shadow:var(--shadow) }
#viral-marketing .card h3 { color:#ffffff }
#viral-marketing .check li::before { color:var(--brand-2) }
#viral-marketing table th { background:rgba(0,0,0,0.4); color:#fff }
#viral-marketing table td { color:rgba(255,255,255,0.85) }
#viral-marketing .btn.primary { background:linear-gradient(135deg, var(--brand), var(--accent)); color:#fff; border:none }

/* Specialities cards */
.speciality-img{ width:100%; height:200px; object-fit:cover; border-radius:10px; margin-bottom:15px }
#specialities .card{ background:#1e293b; padding:20px; border-radius:12px }
#specialities .card h3{ margin-top:0 }
#specialities ul{ padding-left:20px }

/* Flow images */
.flow-img{ width:100%; height:180px; object-fit:cover; border-radius:12px; margin-bottom:12px; display:block }
@media (min-width:980px){ #content-flowchart .flow-img{ height:200px } }

.step-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.step-ico{ width:34px; height:34px; border-radius:10px; padding:6px; background:linear-gradient(135deg, var(--brand), var(--accent)); box-shadow:0 6px 16px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.2); display:grid; place-items:center; flex:0 0 auto }
.step-ico svg{ width:100%; height:100%; display:block; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round }

/* Accessibility helper */
.sr-only{
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Consistent tiles */
.contact-tiles .tile{ min-height:132px }
#contact .card{ border-radius:18px }

/* Hours table pills */
#contact .hours td{ border-radius:10px }
#contact .hours td:first-child{ width:34%; font-weight:600 }

/* Buttons in contact section */
#contact .btn{ border-radius:14px }

/* Responsive header fallback */
@media (max-width:980px){
  .nav{ flex-wrap:wrap; gap:16px }
  .menu{ width:100%; justify-content:flex-start; gap:18px; margin-left:0 }
}

/* --- Mobile-first polish --- */

/* Better tap targets */
a, button { -webkit-tap-highlight-color: transparent; }
.menu a { padding: 10px 0; }

/* Mobile header button (hamburger) */
.nav-toggle{
  display:none;
  position:relative;
  width:44px; height:44px;
  border:0; background:transparent; cursor:pointer;
  border-radius:10px;
}
.nav-toggle:focus-visible{ outline:3px solid #8a7dff; outline-offset:2px; }

.nav-toggle .bar{
  position:absolute; left:10px; right:10px; height:2px; background:#1c1e21;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle .bar:nth-child(1){ top:14px; }
.nav-toggle .bar:nth-child(2){ top:21px; }
.nav-toggle .bar:nth-child(3){ top:28px; }

/* Turn into X when open */
.nav.open + .menu,
.menu.open {}

.nav .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav .nav-toggle[aria-expanded="true"] .bar:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* Desktop menu (unchanged) */
@media (min-width:981px){
  .nav-toggle{ display:none; }
}

/* Mobile menu behavior */
@media (max-width:980px){
  /* header row */
  .nav{
    gap:12px;
    min-height:64px;
    flex-wrap:wrap;
  }

  /* show hamburger on mobile */
  .nav-toggle{ display:block; margin-left:auto; }

  /* mobile dropdown panel: structure only (colors come from the dark override block) */
  .menu{
    position:relative;
    width:100%;
    order:3;                    /* put panel below header row */
    display:flex;
    flex-direction:column;
    gap:0;

    /* no background/border here; your dark override handles look */
    border-radius:12px;
    overflow:hidden;

    max-height:0;
    pointer-events:none;
    transition:max-height .3s ease, opacity .2s ease;
  }
  .menu.open{
    max-height:400px;           /* enough for your links */
    opacity:1;
    pointer-events:auto;
  }

  .menu a{
    padding:12px 16px;
    border-bottom:1px solid rgba(255,255,255,.12); /* readable in dark panel */
    text-transform:none;
    font-weight:600;
  }
  .menu a:last-child{ border-bottom:0; }
  .menu a.active{ box-shadow:none; }

  /* sections stack nicely */
  .grid.cols-2{ grid-template-columns:1fr !important; }
  .grid.cols-3{ grid-template-columns:1fr !important; }

  /* cards & contact tweaks */
  .card{ padding:18px; border-radius:16px; }
  .contact-hero{ flex-direction:column; align-items:flex-start; gap:12px; }
  .contact-cta{ width:100%; }
  .contact-cta .btn{ width:100%; justify-content:center; }

  /* tables can scroll if needed */
  .hours{ display:block; overflow:auto; }
}

/* Very small phones */
@media (max-width:420px){
  .menu a{ padding:12px 14px; }
}
/* Contact Us button in nav */
.menu .btn.primary {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
  border-radius: 1000px;
  font-weight: 600;
  border: none;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.menu .btn.primary:hover {
  background: linear-gradient(135deg, var(--accent), var(--brand));
  transform: translateY(-1px);
}

@media (max-width:980px) {
  /* Full-width button on mobile */
  .menu .btn.primary {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    margin-top: 6px;
  }
}

/* ===== Agency slider (qualities) ===== */
.carousel{
  position: relative;
  overflow: hidden;
  margin-top: 14px;
}

.carousel-track{
  display: flex;
  gap: 18px;                /* space between cards */
  will-change: transform;
  transition: transform .6s ease-in-out;
  padding: 2px;             /* tiny padding so shadows aren't clipped */
}

/* Each slide takes 100% on mobile, 50% on tablets, 33.33% on desktop */
.carousel .slide{
  flex: 0 0 calc(100% - 18px);
}
@media (min-width: 600px){
  .carousel .slide{ flex: 0 0 calc(50% - 18px); }
}
@media (min-width: 980px){
  .carousel .slide{ flex: 0 0 calc(33.333% - 18px); }
}

/* Reuse your card look; ensure consistent height */
.carousel .quality-card.card{
  height: 100%;
}

/* Arrows */
.carousel .ctrl{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.181);
  color: #fff;
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 5;
  transition: background .2s ease;
}
.carousel .ctrl:hover{ background: rgba(0,0,0,.8); }
.carousel .prev{ left: 8px; }
.carousel .next{ right: 8px; }

/* Better arrow placement on small screens */
@media (max-width: 600px){
  .carousel .prev{ left: 4px; }
  .carousel .next{ right: 4px; }
}

/* === Choose Agency – final override === */
#choose-agency{
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(91,140,255,.18), transparent 60%),
    radial-gradient(700px 360px at 88% 15%, rgba(56,189,248,.18), transparent 65%),
    linear-gradient(180deg, #f8fbff 0%, #eef2ff 55%, #f5f7fb 100%);
  color:#0b1020;
}
#choose-agency .lead{ color:#4b5563; }
#choose-agency .quality-card{ background:#fff; }

/* === Final section backgrounds (override) === */

/* Keep JOIN dark navy but slightly different depth */
#join{
  background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
  color:#fff;
}

/* Viral: keep just ONE final background */
#viral-marketing{
  background: linear-gradient(135deg, #5b8cff 0%, #8a7dff 100%);
  color:#fff;
}


/* Specialities card readability */
#specialities .card{
  background:#1e293b; 
  color:#e7eaf6;           /* light text */
}
#specialities .card h3{ color:#ffffff; }
#specialities .card p,
#specialities .card li{ color:#cbd5e1; }  /* soft slate on dark */

/* NAV spacing — compact */
.nav{ min-height:64px; padding:6px 0; }
.menu{ gap: clamp(14px, 2vw, 24px); }
.menu a{ padding: 10px clamp(8px, 1vw, 12px); }
.menu .btn.primary{ margin-left: 8px; }

/* Remove mysterious gap under the sticky header */
header + .slider,
header + section{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Footer */
footer{
  background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%); /* deep navy */
  color:#e7eaf6;
  border-top:1px solid rgba(255,255,255,.12);
  padding:24px 0;
}

footer .wrap{
  display:flex;
  align-items:center;
  justify-content:center;   /* center the line */
  gap:12px;
  font-size:14px;
}

footer a{ color:var(--brand-2); text-decoration:none; }
footer a:hover{ text-decoration:underline; }
@media (min-width:980px){
  footer{ padding:28px 0; }
}

/* === Mobile menu — final override (dark, readable) === */
@media (max-width:980px){
  /* the dropdown panel */
  .menu{
    background: rgba(15,23,42,.96) !important;              /* deep navy glass */
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 20px 44px rgba(0,0,0,.45);
    backdrop-filter: saturate(160%) blur(8px);
    opacity: 1;                                              /* ensure fully opaque when open */
  }

  /* the links */
  .menu a{
    color: #EEF2FF !important;                               /* bright, readable */
    opacity: 1 !important;                                   /* override any faded styles */
    font-weight: 700;
  }
  .menu a:hover{ background: rgba(255,255,255,.06); }
  .menu a.active,
  .menu a[aria-current="true"]{ color:#FFFFFF !important; }

  /* short teal underline stays visible inside panel */
  .menu a::after{ bottom: 6px; }

  /* the gradient CTA at the bottom */
  .menu .btn.primary{
    width: calc(100% - 24px);
    margin: 12px;
    border: none;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color:#fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
  }
}

/* === Desktop header like the screenshot === */
@media (min-width:981px){
  /* make the header a positioning context */
  .wrap.nav{
    display:flex; align-items:center; gap:16px;
    position: relative;
  }

  /* center the menu row */
  #main-menu.menu{
    flex:1 1 auto;
    display:flex; align-items:center; justify-content:center;
    gap: clamp(14px, 2vw, 24px);
    position: static;            /* be sure it's not the mobile panel */
    background: transparent; border:0; box-shadow:none;
    max-height: none; opacity: 1; pointer-events: auto;
  }

  /* keep all items on one line */
  #main-menu.menu a{ white-space: nowrap; }

  /* hide hamburger on desktop */
  .nav-toggle{ display:none; }
}

@media (min-width:981px){
  #main-menu.menu{ gap:16px; }                 /* a bit tighter than clamp */
  #main-menu.menu a{ padding:10px 8px; white-space:nowrap; }
}

@media (min-width:981px){
  /* keep links and button close together */
  #main-menu.menu{
    justify-content: flex-start;
    gap: clamp(12px, 1.6vw, 20px);
  }
  #main-menu.menu .btn.primary{
    margin-left: clamp(12px, 1.2vw, 20px); /* small fixed gap after last link */
    margin-right: 8px;                      /* small gap before the logo */
  }
  /* make sure the logo is on the far right */
  .logo-link{ order:3; margin-left:12px; }
  #main-menu.menu{ order:2; flex:1 1 auto; }
}

@media (min-width:981px){
  /* menu row, one line */
  #main-menu.menu{
    order:2;
    flex:1 1 auto;
    display:flex; align-items:center; justify-content:flex-start;
    gap: clamp(12px, 1.6vw, 20px);
    flex-wrap: nowrap;
    position: static; background: transparent; border:0; box-shadow:none;
    max-height:none; opacity:1; pointer-events:auto;
  }
  #main-menu.menu a{ white-space:nowrap; }

  /* Contact button inline (no absolute) */
  #main-menu.menu .btn.primary{
    position: static !important;
    transform: none !important;
    margin-left: clamp(10px, 1vw, 16px);  /* small gap after last link */
    margin-right: 12px;                   /* small gap before the logo */
  }

  /* logo on the far right */
  .logo-link{ order:3; margin-left:0; }
  .nav-toggle{ display:none; }           /* hide burger on desktop */
}

/* === Desktop header: LOGO left, links inline, CTA on the right === */
@media (min-width:981px){
  .wrap.nav{
    display:flex;
    align-items:center;
    gap:16px;
  }

  /* Logo stays on the left */
  .logo-link{
    order:0;
    margin:0 16px 0 0;          /* a little space before the menu */
  }

  /* Menu sits next, grows to fill the row */
  #main-menu.menu{
    order:1;
    flex:1 1 auto;              /* stretch so CTA can sit at far right */
    display:flex;
    align-items:center;
    justify-content:flex-start; /* links start near the logo */
    gap: clamp(14px, 2vw, 24px);
    flex-wrap:nowrap;
    position:static; background:transparent; border:0; box-shadow:none;
    max-height:none; opacity:1; pointer-events:auto;
  }
  #main-menu.menu a{ white-space:nowrap; }   /* keep everything on one line */

  /* CTA stays inline; push it to the right end of the row */
  #main-menu.menu .btn.primary{
    position:static;
    transform:none;
    margin-left:auto;           /* <-- this puts the button on the right */
  }

  /* Burger is only for mobile */
  .nav-toggle{ display:none; }
}

/* Floating chat button: bottom-right */
.chat-fab{
  position: fixed;
  right: clamp(16px, 2vw, 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 2vw, 24px));
  z-index: 1100;

  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff; text-decoration: none;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.chat-fab:hover{ transform: translateY(-1px); box-shadow: 0 18px 36px rgba(0,0,0,.32); }

.chat-fab svg{ width: 22px; height: 22px; }

/* subtle pulse (optional, since you already use chat-fab--pulse) */
@keyframes chatPulse{
  0%{ box-shadow: 0 0 0 0 rgba(138,125,255,.35); }
  70%{ box-shadow: 0 0 0 16px rgba(138,125,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(138,125,255,0); }
}
.chat-fab--pulse{ animation: chatPulse 2.4s infinite; }

/* smaller on very small phones */
@media (max-width:480px){
  .chat-fab{ width: 52px; height: 52px; right: 14px; bottom: calc(env(safe-area-inset-bottom,0) + 14px); }
}

#choose-agency .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Container: not scrolling, just a positioning box + gutters for arrows */
#agency-slider{
  position: relative;
  overflow: visible;                 /* <— important: container does NOT scroll */
  padding-inline: 56px;            /* gutters so arrows aren't on top of cards */
}

/* The row: THIS is the horizontal scroller */
#agency-slider .carousel-track{
  display: flex;
  gap: 18px;
  overflow-x: auto;                  /* <— scroll lives here */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
  transform: none !important;
  transition: none !important;
  scrollbar-width: none;
}
#agency-slider .carousel-track::-webkit-scrollbar{ display:none; }

/* Fixed card width so there’s always overflow to scroll */
#agency-slider .slide{
  flex: 0 0 320px;
  min-width: 320px;
  scroll-snap-align: start;
}

/* Arrows: ABSOLUTE on the non-scrolling container = fixed position */
#agency-slider .prev,
#agency-slider .next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.5);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  z-index: 30;                      /* above cards */
  pointer-events: auto;
}
#agency-slider .prev { left: 12px; }
#agency-slider .next { right: 12px; }
#agency-slider .prev:hover,
#agency-slider .next:hover { background: rgba(0,0,0,.8); }

@media (max-width:600px){
  #agency-slider{ padding-inline: 48px; }
  #agency-slider .prev{ left: 8px; }
  #agency-slider .next{ right: 8px; }
}

#agency-slider .carousel-track{
  /* ...your existing rules... */
  scroll-snap-stop: always;  /* add this */
}

/* HEADER: solid underlay beneath glass to stop black flashes */
header{
  position: relative;                      /* enable ::before layering */
  background: rgba(15,23,42,.86);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
header::before{
  content:"";
  position:absolute; inset:0;
  background:#0f172a;                      /* solid base */
  opacity:.92;                             /* tune to match your glass */
  z-index:-1;                              /* sit behind header content */
  transform: translateZ(0);                /* avoid repaint hiccups */
}

/* MOBILE MENU PANEL: same solid underlay */
@media (max-width:980px){
  .menu{
    position: relative;                    /* enable ::before */
    background: rgba(15,23,42,.96) !important;
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
    will-change: opacity, transform;       /* smoother during scroll */
  }
  .menu::before{
    content:"";
    position:absolute; inset:0;
    background:#0f172a;
    opacity:.95;
    z-index:-1;
    transform: translateZ(0);
  }
}

/* Isolate header painting (prevents flicker) */
header { backface-visibility:hidden; contain: paint; transform: translateZ(0); }

/* While scrolling, kill blur + use solid background */
html.is-scrolling header,
html.is-scrolling .menu {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #0f172a !important;
  opacity: 1 !important;  /* avoid opacity blends during scroll */
}

/* Mobile panel: avoid opacity transitions that can flash */
@media (max-width:980px){
  .menu {
    background: rgba(15,23,42,.96);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
    transition: max-height .3s ease;   /* remove opacity transition */
  }
}

/* Header & mobile menu always have a solid base behind glass */
header,
.menu { position: relative; }

header::before,
.menu::before{
  content:"";
  position:absolute; inset:0;
  background:#0f172a;     /* solid navy base */
  z-index:-1;             /* sits under content */
}

/* Start with NO blur; enable after first paint */
html.no-blur header,
html.no-blur .menu{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background:#0f172a !important;   /* solid on very first paint */
}

/* After we remove .no-blur via JS, your glass styles apply */
header{
  background: rgba(15,23,42,.86);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}
@media (max-width:980px){
  .menu{
    background: rgba(15,23,42,.96);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
  }
}

/* ==== Contact Modal (popup) ==== */
.modal[aria-hidden="true"] { display: none; }

.modal[aria-hidden="false"] {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
}

.modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(2,6,23,.55); /* deep navy glass */
  backdrop-filter: blur(6px) saturate(140%);
  animation: modalFade .18s ease-out;
}

.modal__dialog{
  position: relative; z-index: 1;
  width: min(720px, calc(100vw - 32px));
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  padding: 20px;
  transform: translateY(6px) scale(.985);
  opacity: 0;
  animation: modalIn .22s ease-out forwards;
}

.modal__header .pill{
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
}

.modal__close{
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 0; cursor: pointer;
  background: rgba(0,0,0,.08);
  color: #111;
  font-size: 22px; line-height: 1;
}
.modal__close:hover{ background: rgba(0,0,0,.14); }

/* Success state */
.form-success[hidden]{ display:none; }
.form-success{ display:block; }

/* Small screens */
@media (max-width: 520px){
  .modal__dialog{ border-radius: 14px; padding: 16px; }
}

/* Keyframes */
@keyframes modalIn{
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes modalFade{
  from { opacity: 0; } to { opacity: 1; }
}

/* Prevent body scroll when modal is open */
body.modal-open{ overflow: hidden; }

/* Thank-you page */
.thankyou-page{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #0f172a;            /* matches your site footer/header */
  padding: 24px;
}

.thankyou-card{
  width: min(680px, 100%);
  margin: 0 auto;
  text-align: center;
  padding: clamp(20px, 5vw, 36px);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

.thankyou-card .section-title{ margin-bottom: 10px; }
.thankyou-card .lead{ margin: 0 0 18px; color: var(--muted); }
.thankyou-card .btn{
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #fff;
  border: none;
}

/* Viral Marketing — black cards only */
#viral-marketing .card{
  background:#0b0b0b;                /* near-black box */
  color:#e5e7eb;                      /* readable body text */
  border:1px solid rgba(255,255,255,.14);
}

/* keep headings bright inside the black cards */
#viral-marketing .card h3{ color:#ffffff; }

/* fine-tune supporting text and table colors */
#viral-marketing .muted{ color:#cbd5e1; }
#viral-marketing table th{ background:#111827; color:#fff; }
#viral-marketing table td{ color:#e5e7eb; }

/* keep the green checkmarks visible on black */
#viral-marketing .check li::before{ color:var(--brand-2); }

/* While images load, show a soft gray instead of black */
.speciality-img {
  background-color: #e5e7eb; /* slate-200 */
}

#specialities { transform: translateZ(0); contain: paint; }

/* Fix mobile flash on Our Specialities (own compositing layer) */
#specialities{
  position: relative;
  isolation: isolate;          /* new stacking context */
  transform: translateZ(0);    /* GPU promote */
  backface-visibility: hidden;
  contain: paint;              /* avoid bleed-through during scroll */
}

#specialities::before{
  content:"";
  position:absolute; inset:0;
  background: var(--sec-3);    /* same as section bg */
  z-index:-1;
}

.slider, .slide img { height: 100svh; }      /* stable on mobile */
@supports not (height: 100svh){
  .slider, .slide img { height: 100vh; }     /* fallback */
}

/* --- Our Specialities: smooth, predictable horizontal scroll --- */
#specialities-slider, #our-specialities, section.specialities {
  position: relative;
}

#specialities-slider .carousel,
#our-specialities .carousel,
section.specialities .carousel{
  overflow: hidden;                 /* hide stray scrollbars/flash */
}

#specialities-slider .carousel-track,
#our-specialities .carousel-track,
section.specialities .carousel-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;    /* tidy slide landing */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* don't tug the page */
  scroll-behavior: smooth;
  touch-action: pan-x;               /* prefer horizontal gesture */
  padding: 8px 0;
}

#specialities-slider .slide,
#our-specialities .slide,
section.specialities .slide{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#specialities-slider .slide img,
#our-specialities .slide img,
section.specialities .slide img{
  width: 100%;
  height: 220px;        /* tweak 200–260 if you like */
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Optional: reduce accidental horizontal scroll when user scrolls page */
@media (hover: none) {
  html, body { overscroll-behavior-y: none; }
}

#contact-inline .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
#contact-inline input, #contact-inline select, #contact-inline textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px;
  background:#fff; color:#111827;
}
#contact-inline .btn.primary{ padding:10px 16px; border-radius:10px; }
@media (max-width: 640px){
  #contact-inline .grid{ grid-template-columns: 1fr; }
}

/* ===== Inline contact form (section #contact-inline) ===== */
#contact-inline {
  background: var(--sec-6);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 28px 20px;
}
@media (min-width:760px){
  #contact-inline { padding: 36px 28px; }
}

/* Layout */
#contact-inline .contact-form .grid{
  display: grid;
  gap: 14px;
}
@media (min-width:760px){
  #contact-inline .contact-form .grid{ grid-template-columns: 1fr 1fr; }
}

/* Labels & inputs (reuses your global input look) */
#contact-inline label{
  display: block;
  font-weight: 600;
  color: #0f172a;
}
#contact-inline input,
#contact-inline select,
#contact-inline textarea{
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  width: 100%;
  border-radius: 10px;
  padding: 12px;
}
#contact-inline input:focus,
#contact-inline select:focus,
#contact-inline textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
  outline: none;
}

/* Subject + message stack nicely */
#contact-inline select{ margin-top: 6px; }
#contact-inline textarea{ margin-top: 10px; min-height: 140px; }

/* Button + disabled state */
#contact-inline .btn[type="submit"]{ margin-top: 10px; border-radius: 12px; }
#contact-inline .btn[disabled]{ opacity: .65; cursor: progress; }

/* Status line (aria-live) */
#contact-inline-status{
  margin-top: 10px;
  font-size: .95rem;
  color: var(--muted);
}
#contact-inline-status.success{
  color: #1b5e20; background:#eafaf1; border:1px solid #c7f1d9; padding:8px 10px; border-radius:10px;
}
#contact-inline-status.error{
  color: #7f1d1d; background:#fee2e2; border:1px solid #fecaca; padding:8px 10px; border-radius:10px;
}

/* Contact panel over dark page bg */
#contact-inline{
  /* elevation + separation */
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 18px 40px rgba(2,6,23,.32);
  border-radius: 20px;

  /* breathing room from sections/footer */
  margin-block: clamp(24px, 5vw, 56px);
  padding: clamp(22px, 3vw, 36px);

  /* avoid overlap with the floating chat bubble when scrolled-to */
  scroll-margin-bottom: 120px;
}

/* two-column top row, single column on mobile */
#contact-inline .contact-form .grid{ display:grid; gap:14px; }
@media (min-width:760px){
  #contact-inline .contact-form .grid{ grid-template-columns:1fr 1fr; }
}

/* labels + fields tuned for light panel */
#contact-inline label{ display:block; font-weight:600; color:#0f172a; }
#contact-inline input,
#contact-inline select,
#contact-inline textarea{
  background:#fff;
  border:1px solid rgba(2,6,23,.14);
  border-radius:12px;
  padding:12px;
  width:100%;
}
#contact-inline input:focus,
#contact-inline select:focus,
#contact-inline textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
  outline:0;
}
#contact-inline ::placeholder{ color:rgba(2,6,23,.45); opacity:1; }

/* subject/message spacing */
#contact-inline select{ margin-top:6px; }
#contact-inline textarea{ margin-top:10px; min-height:140px; }

/* button alignment + disabled look */
#contact-inline .btn[type="submit"]{ margin-top:10px; border-radius:12px; }
#contact-inline .btn[disabled]{ opacity:.65; cursor:progress; }

/* status line colors that work on the light panel */
#contact-inline-status{ margin-top:10px; font-size:.95rem; color:var(--muted); }
#contact-inline-status.success{
  color:#1b5e20; background:#eafaf1; border:1px solid #c7f1d9; padding:8px 10px; border-radius:10px;
}
#contact-inline-status.error{
  color:#7f1d1d; background:#fee2e2; border:1px solid #fecaca; padding:8px 10px; border-radius:10px;
}

/* ==========================
   Site Footer (grid, links, address)
   ========================== */
#site-footer{
  background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
  color:#e7eaf6;
  border-top:1px solid rgba(255,255,255,.12);
  padding: clamp(28px, 4vw, 48px) 0;
}

#site-footer .footer-grid{
  display:grid;
  gap: clamp(14px, 2vw, 24px);
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
}
@media (max-width: 980px){
  #site-footer .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  #site-footer .footer-grid{ grid-template-columns: 1fr; }
}

#site-footer h4{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

#site-footer p,
#site-footer li,
#site-footer address{ color:#cbd5e1; font-style: normal; }

#site-footer ul{ list-style:none; padding:0; margin:0; }
#site-footer li + li{ margin-top: 6px; }

#site-footer a{
  color:#e7eaf6;
  text-decoration:none;
  transition: opacity .15s ease;
  opacity:.92;
}
#site-footer a:hover{ opacity:1; text-decoration:underline; }
#site-footer a:focus-visible{
  outline: 3px solid var(--brand-2, #22d3ee);
  outline-offset: 2px;
  border-radius: 6px;
}

/* brand block (logo + blurb) */
#site-footer .brand{
  display:flex; align-items:center; gap:12px;
}
#site-footer .brand img{
  width:42px; height:42px; border-radius:10px; object-fit:cover;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

/* social pills */
#site-footer .social{
  display:flex; gap:10px; margin-top:10px;
}
#site-footer .social a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none; font-size:14px;
}
#site-footer .social a:hover{
  background: rgba(255,255,255,.12);
}

/* bottom bar */
#site-footer .footer-bottom{
  margin-top: clamp(18px, 3vw, 26px);
  padding-top: 12px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
  font-size: 14px; color:#cbd5e1;
}
#site-footer .legal{ display:flex; flex-wrap:wrap; gap:14px; }
#site-footer .legal a{ color:#cbd5e1; text-decoration:none; }
#site-footer .legal a:hover{ text-decoration:underline; }

/* === Contrast fix: contact form vs footer === */

/* 1) Contact form panel: solid light card */
#contact-inline{
  background: #f8fafc !important;    /* solid (no transparency) */
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
}

/* 2) Footer: deeper dark gradient */
#site-footer{
  background: linear-gradient(180deg, #0b1120 0%, #020617 100%) !important;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Ensure footer links remain readable on darker bg */
#site-footer, 
#site-footer a { color: #e7eaf6; }
#site-footer a:hover { opacity: 1; text-decoration: underline; }

:root{
  --panel-light: #f8fafc;
  --footer-dark-1: #0b1120;
  --footer-dark-2: #020617;
}

#contact-inline{ background: var(--panel-light) !important; }
#site-footer{ background: linear-gradient(180deg, var(--footer-dark-1), var(--footer-dark-2)) !important; }

/* ===== HERO Slider: desktop cover, mobile contain ===== */
#hero-slider{ position:relative; overflow:hidden; background:#000; }
#hero-slider .slides{ display:flex; width:100%; height:100svh; }
@supports not (height: 100svh){
  #hero-slider .slides{ height:100vh; }
}
#hero-slider .slide{
  position:relative;
  min-width:100%;
  height:100%;
}
#hero-slider .slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;        /* desktop default = full-bleed */
}

/* Overlay polish */
#hero-slider .overlay{
  position:absolute; inset:auto 6% 12% 6%;
  color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.5);
  max-width:min(680px, 90vw);
}
#hero-slider .overlay h1{ margin:0 0 8px; font-size:clamp(28px, 4.5vw, 56px); }
#hero-slider .overlay p{  margin:0;        font-size:clamp(14px, 2.5vw, 18px); }

/* Gentle bottom gradient for text legibility */
#hero-slider .slide::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}

/* Arrows */
#hero-slider .prev, #hero-slider .next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:1.8rem; line-height:1;
  cursor:pointer; backdrop-filter: blur(6px);
}
#hero-slider .prev{ left:14px; }
#hero-slider .next{ right:14px; }
#hero-slider .prev:hover, #hero-slider .next:hover{
  background: rgba(255,255,255,.28);
}

/* ===== Mobile: show entire image (no crop) ===== */
@media (max-width: 720px){
  #hero-slider .slide img{
    object-fit: contain;   /* no cropping */
    background:#000;       /* letterbox bars blend into hero bg */
  }
  #hero-slider .overlay{
    inset:auto 5% 10% 5%;
    max-width:none;
  }
  #hero-slider .prev, #hero-slider .next{
    width:42px; height:42px; font-size:1.5rem;
  }
}

@media (max-width: 480px){
  #hero-slider .slide img{ object-fit: contain; background:#000; }
}

#hero-slider .prev, #hero-slider .next { width:48px; height:48px; }

@media (max-width: 360px){ #hero-slider .overlay{ inset:auto 4% 12% 4%; } }

/* ===== Final polish overrides ===== */

/* 1) Hero height: svh for mobile chrome stability */
@supports (height: 100svh){
  #hero-slider,
  #hero-slider .slide img { height: 100svh !important; }
}

/* 2) Hero arrows: bigger tap area + focus ring */
#hero-slider .prev,
#hero-slider .next{
  width: 48px !important; height: 48px !important;        /* >=44px a11y */
}
#hero-slider .prev:focus-visible,
#hero-slider .next:focus-visible{
  outline: 3px solid #8a7dff; outline-offset: 2px;
}

/* 3) Specialities card contrast fix */
#specialities .card{
  background:#1e293b; /* existing */
  color:#e5e7eb;      /* ensure readable text on dark card */
}
#specialities .card h3{ color:#ffffff; }
#specialities .card p,
#specialities .card li{ color:#e5e7eb; }

/* 4) Specialities images: no crop on small screens, keep cover on larger */
@media (max-width: 600px){
  .speciality-img{
    height:auto; aspect-ratio:16/9;
    object-fit:contain; background:#0b1120; /* letterbox */
  }
}

/* 5) Deduplicate nav Contact button (single source of truth) */
.menu .btn.primary{
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color:#fff; border:none; border-radius:1000px; font-weight:600;
  transition: background .2s ease, transform .15s ease;
}
.menu .btn.primary:hover{
  background: linear-gradient(135deg, var(--accent), var(--brand));
  transform: translateY(-1px);
}
@media (max-width:980px){
  .menu .btn.primary{
    display:block; width:100%; text-align:center; border-radius:8px; margin-top:6px;
  }
}

/* 6) Reduce motion: respect user preference */
@media (prefers-reduced-motion: reduce){
  .slides, .carousel-track{ transition:none !important; }
}

/* === Header layout: LOGO LEFT (final override) === */
@media (min-width: 981px){
  .wrap.nav{ display:flex; align-items:center; }
  .logo-link{ order:0; margin:0 16px 0 0; }      /* logo first, a little gap */
  #main-menu.menu{
    order:1; flex:1 1 auto; display:flex; align-items:center; gap:16px;
  }
  #main-menu.menu .btn.primary{ margin-left:auto; } /* pushes CTA to far right */
}

/* Force the success bar to be hidden by default */
.form-success{ display:none !important; }

/* About section — soft background */
#about{ padding:72px 0; background:linear-gradient(180deg,#f4fbff 0%,#f4fff9 100%); }
#about .section-title{ margin-top:0; }

/* About split layout (matches your system) */
.about-split{ padding:72px 0; background:#fff; }
.about-hero{ display:grid; grid-template-columns:minmax(0,1fr) 1.1fr; align-items:center; gap:32px; }
.about-copy .section-title{ margin:0 0 10px; }
.about-media{ position:relative; border-radius:22px; overflow:hidden; box-shadow:0 10px 30px rgba(15,23,42,.12); min-height:360px; }
.about-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:960px){
  .about-hero{ grid-template-columns:1fr; }
  .about-media{ order:-1; min-height:260px; }
}

/* ===== Kill ALL horizontal scrolling on small screens ===== */
@media (max-width: 600px){

  /* 1) Global guards */
  html, body { width:100%; overflow-x:hidden; }
  *, *::before, *::after { box-sizing:border-box; }

  /* 2) Any container can shrink if something inside is wide */
  .wrap, section, header, footer, .grid, .card { min-width:0; max-width:100vw; }

  /* 3) Images, tables, media never push viewport wider */
  img, video, svg, canvas, table { max-width:100%; height:auto; }
  table { display:block; overflow-x:auto; }

  /* 4) Long words/URLs shouldn’t force side-scroll */
  p, li, h1, h2, h3, h4, h5, h6, a, span, .muted {
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* 5) Agency carousel becomes a vertical list (no horizontal track) */
  #agency-slider .prev,
  #agency-slider .next { display:none; }

  #agency-slider .carousel-track{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    overflow-x:visible;         /* stop horizontal scroll area */
    transform:none !important;  /* ignore any JS translateX */
    will-change:auto;
  }

  #agency-slider .slide{
    min-width:0;                /* allow shrink to fit */
    flex:1 1 auto;
  }

  /* 6) Hero stays full-width but never increases page width */
  #hero-slider,
  #hero-slider .slides,
  #hero-slider .slide { max-width:100vw; }
  /* If you still see crop issues, you can switch to contain:
  #hero-slider .slide img { object-fit:contain; background:#0f172a; }
  .slider { height:70vh; }
  */

  /* 7) Safety for absolutely positioned arrows inside hero */
  #hero-slider .prev { left:12px; }
  #hero-slider .next { right:12px; }
}

/* ===== Mobile paint-safety fixes ===== */
@media (max-width: 600px){

  /* 1) Turn off glass blur on header (major cause of text vanishing) */
  header{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15,23,42,0.96) !important;  /* solid fallback */
  }

  /* 2) Kill unnecessary compositor hints on scrollers/tracks */
  #agency-slider .carousel-track{
    will-change: auto !important;
    transform: none !important;
  }

  /* 3) Make sure nothing is accidentally left transparent */
  .reveal-init{
    opacity: 1 !important;
    transform: none !important;
  }

  /* 4) Force a stable painting context for long sections */
  section, footer, .wrap, .card{
    contain: paint layout style;   /* limits repaint scope */
    backface-visibility: hidden;
  }

  /* 5) Last-resort guard to avoid any off-screen layer glitches */
  body{
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

header .logo-link img.site-logo{
  height:56px !important;
  width:auto !important;
  display:block;
}

/* Footer social logos */
.footer .social.social-logos { display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:8px 0 0 }
.footer .social.social-logos li { list-style:none }
.footer .social-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  color:#cbd5e1; text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.footer .social-link:hover{ background:rgba(255,255,255,.08) }
.footer .social-link .ico{ width:18px; height:18px; fill:#cbd5e1; }

/* Optional: brand colors on hover */
.footer .social-link[href*="facebook"]:hover .ico{ fill:#1877f2; }
.footer .social-link[href*="youtube"]:hover  .ico{ fill:#ff0000; }
.footer .social-link[href*="instagram"]:hover .ico{ fill:#e1306c; }

/* ===== Contact form styling ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  font-size: 15px;
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
  outline: none;
}

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

.contact-form button {
  align-self: flex-start;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .contact-form {
    padding: 18px;
    gap: 12px;
  }
  .contact-form button {
    width: 100%;
    justify-content: center;
  }
}