/*
Theme Name: Update360 (Bespoke Dark)
Theme URI: https://update360.org
Author: Update360
Author URI: https://update360.org
Description: Custom lightweight WordPress theme for Update360 (Lagos) — converted from bespoke HTML/CSS/JS. Dark premium, orange accent, video hero.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: update360
Tags: custom, dark, minimal, responsive, seo
*/

:root{
  /* Light theme palette */
  --brand:#f97316;           /* signature orange */
  --brand2:#fb923c;          /* lighter orange */
  --brand-soft: rgba(249,115,22,.12);
  --brand-soft2: rgba(249,115,22,.18);
  --brand-border: rgba(249,115,22,.32);
  --brand-focus: rgba(249,115,22,.38);
  --bg:#ffffff; --bg2:#ffffff;
  --surface:rgba(15,23,42,.04); --surface2:rgba(15,23,42,.06);
  --stroke:rgba(15,23,42,.10); --stroke2:rgba(15,23,42,.14);
  --text:#0f172a; --muted:#334155; --muted2:#64748b;
  --accent: var(--brand);
  --accent2: var(--brand2);
  /* Subtle global shadow (reduced) */
  --shadow:0 10px 26px rgba(15,23,42,.10);
  --radius:18px; --radius2:26px;
  --max:1120px; --gap:18px;
  --ease:cubic-bezier(.2,.8,.2,1);

  --section-pad: 52px;
  --section-pad-sm: 40px;
  --section-gap: 18px;
  --band-a: rgba(15,23,42,.02);
  --band-b: rgba(15,23,42,.00);

  /* Brand assets */
  --brand-logo: url('https://res.cloudinary.com/dfbqo7ur9/image/upload/v1772064075/logos_2_zlpbo4.png');
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size:16px;  /* Google/Material base */
  font-weight:400;
    background: var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button,input,textarea,select{font:inherit}
::selection{background:rgba(15,23,42,.10)}
:focus-visible{outline:3px solid rgba(15,23,42,.35); outline-offset:3px; border-radius:10px}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .reveal{transition:none !important}
  video{display:none !important}
}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:84px 0}     /* more whitespace */
.section.tight{padding:64px 0}
.grid{display:grid; gap:var(--gap)}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 920px){.grid.c3{grid-template-columns:1fr 1fr}}
@media (max-width: 720px){.grid.c2,.grid.c3{grid-template-columns:1fr}.section{padding:60px 0}}

.kicker{color:var(--muted2); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500}
.h2{font-size:28px; letter-spacing:-.01em; margin:10px 0 0; font-weight:700; line-height:1.25}
.lead{color:var(--muted); margin:12px 0 0; max-width:72ch; font-size:16px; line-height:1.7}
.small{font-size:14px; color:var(--muted); line-height:1.6}
.note{font-size:13px; color:var(--muted2)}

.card{
  position:relative;
  background: #ffffff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px rgba(15,23,42,.05);
  overflow:hidden;
  transform: translateZ(0);
}
.card.pad{padding:18px}
.card.padlg{padding:24px}   /* more whitespace inside cards */
.card:hover{border-color: var(--brand-border); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px rgba(15,23,42,.07);}

.glow::before{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(680px 260px at var(--mx,50%) var(--my,20%),
    rgba(2,6,23,.12),
    rgba(15,23,42,.10),
    rgba(247,248,251,0) 60%);
  opacity:0; transition: opacity .25s var(--ease);
  pointer-events:none;
}
.glow:hover::before{opacity:1}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  background: var(--surface);
  border:1px solid var(--stroke);
  color:var(--muted); font-size:12px;
  white-space:nowrap;
}
.dot{width:8px; height:8px; border-radius:999px; background:var(--accent2); box-shadow:0 0 0 4px rgba(249,115,22,.10)}
.tag{display:inline-flex; padding:6px 10px; border-radius:999px; background: var(--surface); border:1px solid var(--stroke); color:var(--muted); font-size:13px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: var(--surface2);
  color:var(--text);
  cursor:pointer;
  font-weight:500;
  transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover{transform: translateY(-1px); background: rgba(2,6,23,.07); border-color: var(--stroke2)}
.btn:active{transform: translateY(0)}
.btn.primary{
  background: var(--brand);
  color: var(--text);
  border-color: rgba(249,115,22,.35);
  box-shadow: 0 10px 22px rgba(249,115,22,.14);
}
.btn.primary:hover{filter: saturate(1.06) brightness(1.02); box-shadow: 0 12px 26px rgba(249,115,22,.18);}
.btn.primary:active{transform: translateY(1px);}
.btn.primary:hover{background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(2,6,23,.08))}
.btn.ghost{
  background: transparent;
  border-color: rgba(15,23,42,.12);
  color: var(--text);
}
.btn.ghost:hover{background: rgba(15,23,42,.04);}
.btn.small{padding:9px 12px; border-radius: 10px; font-size:14px}
.btn.link{background:transparent; border-color:transparent; padding:0}
.btn.link:hover{transform:none; text-decoration:underline}

.icon{width:18px; height:18px; display:inline-block; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.progress{position:fixed; top:0; left:0; height:3px; width:100%; background: rgba(2,6,23,.06); z-index: 999;}
.progress > div{height:100%; width:0%; background: linear-gradient(90deg, rgba(15,23,42,.12), rgba(249,115,22,.90));}

.header{position:sticky; top:0; z-index:80; backdrop-filter: blur(10px); background: rgba(255,255,255,.78); border-bottom: 1px solid rgba(2,6,23,.08);}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px}
.brandmark{
  width:34px;
  height:34px;
  border-radius:10px;
  background-image: var(--brand-logo);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}
.brandname{font-weight:700; letter-spacing:-.02em}
.brandsub{color:var(--muted2); font-size:12px; margin-top:-2px}
.navlinks{display:flex; align-items:center; gap:10px}
.navlinks a{color:var(--muted); padding:10px 10px; border-radius: 12px; border:1px solid transparent; font-weight:500}
.navlinks a:hover{color:var(--text); background: var(--surface2); border-color: rgba(2,6,23,.08)}
.actions{display:flex; align-items:center; gap:10px}
.hamburger{display:none}
@media (max-width: 920px){.navlinks{display:none}.hamburger{display:inline-flex}}

.dropdown{position:relative}
.dropdown > button{color:var(--muted)}
.dropdownmenu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:280px;
  padding:10px; border-radius:16px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(2,6,23,.12);
  box-shadow: var(--shadow);
  display:none;
}
.dropdownmenu a{display:flex; gap:10px; padding:10px 10px; border-radius:12px}
.dropdownmenu a:hover{background: rgba(2,6,23,.04)}
.dmicon{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.03);
}
.dropdownmenu a div{display:flex; flex-direction:column; gap:2px}
.dropdownmenu a span{color:var(--muted2); font-size:13px}
.dropdown.open .dropdownmenu{display:block}

.drawer{display:none; position:fixed; inset:0; background: rgba(0,0,0,.55); z-index:120}
.drawer.open{display:block}
.drawer .panel{
  position:absolute; top:0; right:0; height:100%;
  width: min(420px, 92vw);
  background: rgba(255,255,255,.98);
  border-left: 1px solid rgba(2,6,23,.10);
  padding: 18px;
  display:flex; flex-direction:column; gap:10px;
}
.drawer .panel a{padding:12px 12px; border-radius:12px; border:1px solid rgba(2,6,23,.10)}
.drawer .panel a:hover{background:rgba(255,255,255,.04)}

.hero{position:relative; padding:64px 0 28px}
.herogrid{display:grid; grid-template-columns: 1.05fr .95fr; gap:20px; align-items:stretch}
@media (max-width: 920px){.herogrid{grid-template-columns:1fr}}
.hero h1{font-size:42px; letter-spacing:-.02em; line-height:1.06; margin:14px 0 10px; font-weight:700}
@media (max-width: 720px){.hero h1{font-size:42px; letter-spacing:-.02em; line-height:1.06; margin:14px 0 10px; font-weight:700}}
.hero p{color:var(--muted); margin:0 0 18px; max-width: 66ch}
.cta{display:flex; flex-wrap:wrap; gap:10px}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.pill{padding:6px 10px; border-radius:999px; border:1px solid rgba(2,6,23,.10); background: var(--surface); color:var(--muted)}

/* Video hero background (lightweight) */
.heroVideo{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  border-bottom: 1px solid rgba(2,6,23,.06);
}
.heroVideo video{
  width:100%; height:100%;
  object-fit:cover;
  filter: contrast(1.05) saturate(.95) brightness(.95);
}
.heroVideo::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 22% 15%, rgba(2,6,23,.10), rgba(247,248,251,0) 55%),
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.92));
}

.heroInner{position:relative} /* ensure text stays above video */

.media{position:relative; border-radius: var(--radius2); overflow:hidden; border: 1px solid rgba(2,6,23,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); box-shadow: var(--shadow);
}
.frame{aspect-ratio:16/10; width:100%}
.frame img{width:100%; height:100%; object-fit:cover; opacity:.92; filter: contrast(1.02) saturate(.92)}
.overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(700px 420px at 25% 20%, rgba(2,6,23,.08), rgba(0,0,0,0) 55%),
        linear-gradient(0deg, rgba(255,255,255,.88), rgba(255,255,255,.30));
  pointer-events:none;
}
.media .chip{position:absolute; bottom:16px; left:16px}

.sectionhead{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px}
.ftitle{font-weight:700; margin:10px 0 6px; letter-spacing:-.005em; line-height:1.25; font-size:18px}
.fdesc{color:var(--muted); margin:0}

.steps{counter-reset: step}
.step{position:relative; padding-left:56px}
.step:before{
  counter-increment: step; content: counter(step);
  position:absolute; left:18px; top:18px;
  width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(2,6,23,.07);
  border:1px solid rgba(2,6,23,.12);
  font-weight:700;
}

.carousel{position:relative}
.track{display:flex; gap:12px; overflow:hidden; scroll-behavior:smooth}
.track > .card{
  position:relative;
  background: #ffffff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 28px rgba(15,23,42,.06);
  overflow:hidden;
  transform: translateZ(0);
}
@media (max-width: 720px){.track > .card{
  position:relative;
  background: #ffffff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 28px rgba(15,23,42,.06);
  overflow:hidden;
  transform: translateZ(0);
}}
.controls{display:flex; gap:10px}

.faqitem{border-top:1px solid rgba(2,6,23,.10)}
.faqitem:last-child{border-bottom:1px solid rgba(2,6,23,.10)}
.faqbtn{width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:16px 0; background:transparent; border:0; color:var(--text); cursor:pointer;
}
.faqans{max-height:0; overflow:hidden; transition:max-height .28s var(--ease); color:var(--muted); padding-right:18px}
.faqitem.open .faqans{max-height:240px; padding-bottom:16px}

.form{display:grid; gap:12px}
.field{display:grid; gap:8px}
.label{color:var(--muted2); font-size:13px}
.input, .textarea, select{
  width:100%; padding:12px 12px; border-radius: 12px;
  background: rgba(255,255,255,.90); border:1px solid rgba(2,6,23,.12);
  color:var(--text); outline:none;
}
.input:focus, .textarea:focus, select:focus{border-color: rgba(15,23,42,.28); box-shadow: 0 0 0 4px rgba(15,23,42,.06)}
.textarea{min-height:120px; resize:vertical}

.footer{padding:54px 0; border-top: 1px solid rgba(2,6,23,.08); background: rgba(10,14,18,.35)}
.fgrid{display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr; gap:18px}
@media (max-width: 920px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width: 720px){.fgrid{grid-template-columns:1fr}}
.footer h3{margin:0 0 10px; font-size:14px}
.footer a{color:var(--muted); display:block; padding:7px 0}
.footer a:hover{color:var(--text)}
.hr{height:1px; background:rgba(2,6,23,.08); margin:18px 0}

.modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:18px; background: rgba(0,0,0,.6)}
.modal.open{display:flex}
.dialog{width:min(820px, 96vw); border-radius: 20px; background: rgba(255,255,255,.98); border:1px solid rgba(2,6,23,.10); box-shadow: var(--shadow); overflow:hidden}
.dialog header{padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom: 1px solid rgba(2,6,23,.08)}
.dialog header h3{margin:0; font-size:16px}
.close{background:transparent; border:0; color:var(--muted); cursor:pointer}
.close:hover{color:var(--text)}
.dialog .content{padding:18px}

.fab{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.fab a{display:inline-flex; align-items:center; gap:10px; padding:12px 14px; border-radius:999px; background: rgba(10,14,18,.92);
  border:1px solid rgba(2,6,23,.10); box-shadow: 0 16px 34px rgba(0,0,0,.40);
}
.fab a:hover{background: rgba(10,14,18,1)}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:999;
  background: rgba(255,255,255,.98); border:1px solid rgba(2,6,23,.10);
  padding:10px 12px; border-radius: 12px; box-shadow: var(--shadow); display:none
}
.toast.show{display:block}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease)}
.reveal.visible{opacity:1; transform: translateY(0)}

/* tiny icon tiles */
.icontile{
  display:flex; gap:12px; align-items:flex-start;
}
.icontile .tile{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(2,6,23,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}

.frame video{width:100%; height:100%; object-fit:cover; opacity:.92; filter: contrast(1.02) saturate(.92)}
select{ color-scheme: dark; }
select option{ background:#ffffff; color:var(--text); }
select option:disabled{ color:#8f9bb0; }

/* --- Section separation (clearer panels) --- */
main > section.section{ position: relative; }
main > section.section::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.018));
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  z-index:-1;
}
main > section.section:nth-of-type(even)::before{
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  border-top-color: rgba(255,255,255,.085);
  border-bottom-color: rgba(255,255,255,.085);
}
/* Keep the hero free of panel styling */
main > section.hero::before{ content:none !important; }

/* --- Footer social icons --- */
.social{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:14px;
}
.social a{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px;
  background: var(--surface);
  border:1px solid rgba(2,6,23,.12);
  color: var(--text);
  transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.social a:hover{
  transform: translateY(-1px);
  background: rgba(2,6,23,.07);
  border-color: rgba(255,255,255,.18);
}
.social svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.social .fill{ fill: currentColor; stroke: none; }

/* WP active state */
.navlinks a.is-active{
  color:var(--text);
  background: var(--surface2);
  border-color: rgba(2,6,23,.08);
}


/* WP menu (mobile drawer) */
.drawer-links .drawer-menu{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.drawer-links .drawer-menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.03);
}
.drawer-links .drawer-menu a:hover{
  background: rgba(2,6,23,.06);
  border-color: rgba(255,255,255,.16);
}
.drawer-links .drawer-menu .sub-menu{
  list-style:none;
  padding:6px 0 0 10px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
/* Icon button (header) */
.icon-btn{
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.03);
  color: inherit;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.icon-btn:hover{transform: translateY(-1px); background: rgba(2,6,23,.06); border-color: rgba(255,255,255,.22)}
.icon-btn .icon{width:18px;height:18px}

/* Search modal */
.modal{position:fixed; inset:0; display:none; z-index:1200;}
.modal.is-open{display:block;}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.62);}
.modal-card{
  position:relative;
  width:min(720px, calc(100% - 28px));
  margin: 8vh auto 0;
  border-radius: 18px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(10,12,16,.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding: 16px;
}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.modal-title{font-weight:700; letter-spacing:-.01em;}
.search-row{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.03);
}
.search-row input{
  flex:1;
  background: transparent;
  border:0;
  outline:none;
  color: inherit;
  font-size: 14px;
}
.search-icon .icon{width:18px;height:18px; opacity:.9;}
.search-hint{margin-top:10px; font-size: 12.5px; color: var(--muted2);;}
.sr-only{position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Prose content */
.prose{max-width: 78ch;}
.prose p{margin: 0 0 12px;}
.prose h2,.prose h3{margin: 16px 0 10px;}

/* Team carousel */
.team-card{display:flex; gap:14px; align-items:center;}
.team-photo{width:58px;height:58px;border-radius:16px; overflow:hidden; border:1px solid rgba(2,6,23,.12); background: rgba(255,255,255,.03); flex: 0 0 auto;}
.team-photo img{width:100%;height:100%;object-fit:cover;}
.team-name{font-weight:700; letter-spacing:-.01em;}
.team-role{font-size: 12.5px; color: var(--muted2);; margin-top:2px;}
.team-link{display:inline-flex; align-items:center; gap:8px; margin-top:8px; text-decoration:none;}
.team-link .icon{width:16px;height:16px;}
.carousel-dots{display:flex; gap:8px; justify-content:center; margin-top:12px;}
.carousel-dots button{
  width:8px;height:8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(2,6,23,.10);
  cursor:pointer;
}
.carousel-dots button.is-active{
  background: rgba(15,23,42,.85);
  border-color: rgba(15,23,42,.22);
}
/* Announcement bar */
.announcement-bar{
  position: sticky;
  top: 0;
  z-index: 1100;
  background: linear-gradient(90deg, rgba(15,23,42,.92), rgba(15,23,42,.72));
  color: #0b0f14;
  border-bottom: 1px solid rgba(0,0,0,.22);
}
.announce-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
}
.announce-text{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.announce-text a{color: inherit; text-decoration:none; border-bottom: 1px solid rgba(0,0,0,.28);}
.announce-text a:hover{border-bottom-color: rgba(0,0,0,.45);}
.announce-close{
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.20);
  background: rgba(255,255,255,.15);
  cursor:pointer;
}
.announce-close .icon{width:16px;height:16px}
/* Global loader */
.u360-loader{
  position:fixed;
  inset:0;
  z-index: 2000;
  display:none;
}
.u360-loader.is-on{display:block;}
.u360-loader__backdrop{
  position:absolute; inset:0;
  background:               radial-gradient(900px 500px at 80% 90%, rgba(15,23,42,.06), transparent 55%),
              rgba(7,9,12,.86);
  backdrop-filter: blur(10px);
}
.u360-loader__card{
  position:relative;
  width:min(860px, calc(100% - 28px));
  margin: 10vh auto 0;
  border-radius: 22px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(10,12,16,.92);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  padding: 18px;
  overflow:hidden;
}
.u360-loader__card:before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(90deg, rgba(15,23,42,.10), rgba(15,23,42,.10), rgba(15,23,42,.06), rgba(15,23,42,.10));
  filter: blur(18px);
  opacity:.85;
  pointer-events:none;
}
.u360-loader__brand{
  position:relative;
  display:flex; align-items:center; gap:12px;
  margin-bottom: 14px;
}
.u360-loader__mark{
  width:40px;height:40px; border-radius:16px;
  border:1px solid rgba(2,6,23,.12);
  background: radial-gradient(circle at 35% 35%, rgba(15,23,42,.10), rgba(15,23,42,.10));
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
  position:relative;
  overflow:hidden;
}
.u360-loader__spark{
  position:absolute;
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.85);
  filter: blur(.2px);
  top: 11px; left: 12px;
  animation: u360Spark 1.35s ease-in-out infinite;
}
.u360-loader__spark.s2{top: 22px; left: 24px; animation-delay:.15s; opacity:.75}
.u360-loader__spark.s3{top: 16px; left: 28px; animation-delay:.28s; opacity:.55}
@keyframes u360Spark{
  0%,100%{transform: translate(0,0) scale(1); opacity:.8}
  50%{transform: translate(6px,-6px) scale(1.25); opacity:1}
}
.u360-loader__name{font-weight:700; letter-spacing:-.01em; line-height:1}
.u360-loader__tag{font-size: 12.5px; color: var(--muted2);; margin-top:2px}

.u360-loader__rail{
  position:relative;
  display:grid;
  gap: 10px;
}
.u360-loader__slide{
  display:flex; align-items:center; gap:12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.03);
  transform: translateX(10px);
  opacity: 0;
  animation: u360Slide 2.7s ease-in-out infinite;
}
.u360-loader__slide:nth-child(2){animation-delay:.55s}
.u360-loader__slide:nth-child(3){animation-delay:1.1s}
@keyframes u360Slide{
  0%{opacity:0; transform: translateX(18px)}
  15%{opacity:1; transform: translateX(0)}
  55%{opacity:1; transform: translateX(0)}
  70%{opacity:0; transform: translateX(-18px)}
  100%{opacity:0; transform: translateX(-18px)}
}
.u360-loader__icon{
  width:40px;height:40px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(2,6,23,.12);
  background: var(--surface2);
}
.u360-loader__icon .icon{width:20px;height:20px}
.u360-loader__title{font-weight:700; letter-spacing:-.01em; font-size: 14px;}
.u360-loader__desc{font-size: 12.5px; color: var(--muted2);; margin-top:2px}

.u360-loader__bar{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.12);
  background: var(--surface2);
  overflow:hidden;
  margin-top: 14px;
}
.u360-loader__barfill{
  display:block;
  height:100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(15,23,42,.10), rgba(15,23,42,.10));
  border-radius: 999px;
  animation: u360Fill 1.15s ease-in-out infinite;
}
@keyframes u360Fill{
  0%{width: 8%}
  50%{width: 92%}
  100%{width: 8%}
}
.u360-loader__hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted2);;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .u360-loader__spark, .u360-loader__slide, .u360-loader__barfill{animation:none !important;}
  .u360-loader__slide{opacity:1; transform:none;}
}
html.u360-lock, html.u360-lock body{overflow:hidden;}
.u360-loader__icon img{width:20px;height:20px; object-fit:contain; display:block;}
/* Section banding for clear separation (subtle like v7) */
.u360-band{background: var(--band-b);}
.u360-band.alt{background: var(--band-a);}
/* Testimonials carousel */
.u360-testimonials .u360-secHead{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.u360-carousel{position:relative; overflow:hidden}
.u360-track{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; -webkit-overflow-scrolling:touch}
.u360-track::-webkit-scrollbar{height:8px}
.u360-track::-webkit-scrollbar-thumb{background:rgba(2,6,23,.12); border-radius:999px}
.u360-card--quote{min-width:min(420px, 85vw); scroll-snap-align:start}
.u360-quote{font-size:14px; line-height:1.55; color: var(--muted2);}
.u360-client{display:flex; align-items:center; gap:10px; margin-top:14px}
.u360-avatar{width:42px;height:42px;border-radius:16px; object-fit:cover; border:1px solid rgba(2,6,23,.12); background:rgba(255,255,255,.04)}
.u360-clientName{font-weight:700; font-size:13px; color: var(--text)}
.u360-clientMeta{font-size:12px; color: var(--muted2);}
.u360-carouselNav{display:flex; gap:10px; margin-top:12px}
@media (max-width:720px){
  .u360-card--quote{min-width: 82vw}
}
/* WhatsApp floating button */
.u360-whatsapp{
  position:fixed; right:18px; bottom:18px; z-index:1200;
  width:54px; height:54px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
}
.u360-whatsapp:hover{filter:brightness(1.02)}
/* Reveal on scroll */
[data-reveal]{opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease;}
[data-reveal].is-in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
}
/* Testimonials polish */
.u360-card--quote{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(2,6,23,.12);
  border-radius:18px;
  padding:18px 18px 16px;
}
.u360-card--quote:hover{border-color:rgba(255,255,255,.22)}
.u360-stars{display:flex; gap:3px; margin-bottom:10px;}
.u360-stars svg{width:14px; height:14px; fill:#f7c948;} /* warm yellow */
/* Contact map */
.u360-mapFrame{max-width:980px; margin:0 auto; border-radius:18px; overflow:hidden; border:1px solid rgba(2,6,23,.12); background:rgba(255,255,255,.02);}
.u360-mapFrame iframe{
  width:100%;
  height:360px;
  border:0;
  display:block;
  filter: invert(.90) hue-rotate(180deg) saturate(.85) brightness(.85);
}
@media (max-width:720px){
  .u360-mapFrame iframe{
    height:300px;
    filter: invert(.90) hue-rotate(180deg) saturate(.85) brightness(.85);
  }
}
/* Team grid (bold, clean) */
.u360-teamGrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:16px;}
.u360-teamCard{background: var(--surface); border:1px solid rgba(2,6,23,.12); border-radius:18px; overflow:hidden;}
.u360-teamCard img{width:100%; height:220px; object-fit:cover; display:block;}
.u360-teamBody{padding:14px 14px 16px;}
.u360-teamName{font-weight:800; font-size:14px; color: var(--text);}
.u360-teamRole{margin-top:3px; font-size:12px; color: var(--muted2);;}
@media (max-width:980px){.u360-teamGrid{grid-template-columns:repeat(2,minmax(0,1fr));} .u360-teamCard img{height:200px;}}
@media (max-width:520px){.u360-teamGrid{grid-template-columns:1fr;} .u360-teamCard img{height:220px;}}
.u360-grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
@media (max-width:980px){.u360-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.u360-grid3{grid-template-columns:1fr;}}


/* Homepage richness */
.u360-heroGrid{display:grid; grid-template-columns: 1.25fr .75fr; gap:18px; align-items:stretch;}
.u360-heroCard{border:1px solid rgba(2,6,23,.12); border-radius:18px; background: var(--surface); padding:16px; min-height:240px;}
.u360-heroCardTop{display:flex; gap:6px; margin-bottom:14px;}
.u360-dot{width:10px; height:10px; border-radius:999px; background:rgba(2,6,23,.12);}
.u360-heroLines{display:flex; flex-direction:column; gap:10px;}
.u360-line{height:10px; border-radius:999px; background:rgba(2,6,23,.08);}
.u360-line.w80{width:80%}.u360-line.w55{width:55%}.u360-line.w70{width:70%}
.u360-heroBadges{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.u360-badge{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(2,6,23,.12); background: var(--surface); color: var(--muted2);;}
.u360-micro{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; color: var(--muted2);; font-size:12px;}
.u360-micro span{padding:6px 10px; border-radius:999px; background: var(--surface); border:1px solid rgba(2,6,23,.10);}

.u360-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.u360-stat{border:1px solid rgba(2,6,23,.12); background: var(--surface); border-radius:18px; padding:16px;}
.u360-statNum{font-size:18px; font-weight:800; color: var(--text);}
.u360-statLabel{margin-top:6px; font-size:12.5px; color: var(--muted2);;}

.u360-ctaBox{border:1px solid rgba(2,6,23,.12); background: var(--surface); border-radius:18px; padding:18px;}
.u360-accordion{border:1px solid rgba(2,6,23,.12); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.02);}
.u360-accBtn{width:100%; text-align:left; padding:14px 16px; background:transparent; border:0; border-bottom:1px solid rgba(2,6,23,.10); color: var(--text); font-weight:700; cursor:pointer;}
.u360-accPanel{max-height:0; overflow:hidden; transition:max-height .35s ease; padding:0 16px;}
.u360-accPanel p{margin:12px 0 14px; color: var(--muted2);; font-size:13px;}
.u360-accBtn[aria-expanded="true"]{background: var(--surface);}
@media (max-width:980px){
  .u360-heroGrid{grid-template-columns:1fr;}
  .u360-stats{grid-template-columns:1fr;}
}
/* Cross-browser fallbacks */
.heroVideo video, .frame video, .frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* If CSS grid isn't supported, fallback to flex */
@supports not (display: grid){
  .u360-heroGrid, .u360-grid3, .u360-stats, .herogrid, .grid.c2{
    display:flex !important;
    flex-wrap:wrap;
  }
  .u360-grid3 > *, .u360-stats > *{width:100%;}
  .u360-heroGrid > *{width:100%;}
  .herogrid > *{width:100%;}
}
/* Flex gap fallback helper */
.no-flexgap .u360-ctaRow > *{margin-right:10px;}
.no-flexgap .u360-ctaRow > *:last-child{margin-right:0;}

/* v24 Homepage polish */
.u360-homeHero .herogrid{align-items:stretch;}
.u360-homeHero .media .frame{min-height:360px;}
@media (max-width: 920px){
  .u360-homeHero .media{display:none;}
}
.u360-micro{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; color: var(--muted2);; font-size:12px;}
.u360-micro span{padding:6px 10px; border:1px solid rgba(2,6,23,.10); border-radius:999px; background: var(--surface);}
/* Stats responsive */
.u360-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
@media (max-width: 920px){.u360-stats{grid-template-columns:1fr;}}
.u360-stat{background: var(--surface); border:1px solid rgba(2,6,23,.12); border-radius:18px; padding:16px;}
.u360-statNum{font-size:14px; font-weight:800; letter-spacing:-.01em;}
.u360-statLabel{font-size:12px; color: var(--muted2);; margin-top:6px;}
/* Cards */
.u360-card{transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);}
.u360-card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background:rgba(255,255,255,.045);}

/* v25 Alignment & spacing audit fixes */

/* Consistent band padding */
.u360-band{padding: var(--section-pad) 0;}
@media (max-width:720px){.u360-band{padding: var(--section-pad-sm) 0;}}

/* Consistent section header spacing */
.u360-secHead{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.u360-secHead .h2{margin:0;}
.u360-secHead .muted{margin:0;}

/* Prevent accidental extra top/bottom gaps */
.u360-band > .container > :last-child{margin-bottom:0;}
.u360-band > .container > :first-child{margin-top:0;}

/* Cards alignment */
.u360-grid3{align-items:stretch;}
.u360-card{height:100%; display:flex; flex-direction:column;}
.u360-card p{margin-top:8px; margin-bottom:0; color: var(--muted2);;}
.u360-card .u360-cardLink{margin-top:auto; padding-top:12px; color: var(--text); font-weight:600;}

/* Buttons alignment (avoid wrapping weirdly) */
.u360-ctaRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.u360-ctaRow .btn{white-space:nowrap;}
@media (max-width:420px){.u360-ctaRow .btn{white-space:normal;}}

/* Testimonials polish: remove any leftover scrollbar space, center heading */
.u360-testimonials .u360-secHead{align-items:flex-start;}
.u360-track{padding-bottom:0;}
.u360-card--quote{min-width:min(420px, 88vw);}
.u360-carousel{margin-top:8px;}

/* Forms: consistent spacing and select contrast */
.field{margin-bottom:12px;}
.input, .textarea, select.input{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(2,6,23,.12);
  color:var(--text);
}
select.input option{background:#ffffff; color:var(--text);}
.input::placeholder, .textarea::placeholder{color: var(--muted2);;}
.input:focus, .textarea:focus, select.input:focus{
  outline:none;
  border-color: rgba(15,23,42,.22);
  box-shadow: 0 0 0 3px rgba(15,23,42,.10);
}

/* Hero media card alignment */
.u360-homeHero .media .frame,
.hero .media .frame{border-radius:22px; overflow:hidden;}

/* Avoid overflow caused by long words/urls */
.u360-card, .u360-stat, .u360-ctaBox, .u360-teamCard{overflow-wrap:anywhere;}

/* Team grid alignment */
.u360-teamGrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
@media (max-width:980px){.u360-teamGrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.u360-teamGrid{grid-template-columns:1fr;}}
.u360-teamCard{background: var(--surface); border:1px solid rgba(2,6,23,.12); border-radius:18px; overflow:hidden;}
.u360-teamCard img{width:100%; height:auto; display:block;}
.u360-teamBody{padding:12px 14px;}
.u360-teamName{font-weight:800; font-size:14px;}
.u360-teamRole{font-size:12px; color: var(--muted2);; margin-top:3px;}

.reveal{will-change: transform, opacity;}

/* v26 improvements */

/* Solutions v7 style */
.u360-solutions--v7 .u360-grid3--tight{gap:14px;}
.u360-card--v7{padding:18px; border-radius:18px; background: var(--surface); border:1px solid rgba(2,6,23,.12);}
.u360-card--v7 .u360-cardTop{display:flex; flex-direction:column; gap:10px;}
.u360-card--v7 .u360-cardMeta{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.u360-card--v7 .pill{background:rgba(255,255,255,.04); border:1px solid rgba(2,6,23,.10);}

/* Recent work clean spacing */
.u360-cases--clean .u360-secHead{margin-bottom:14px;}
.u360-cases--clean .u360-grid3{gap:14px;}
.u360-cases--clean .btn.ghost{
  background: transparent;
  border-color: rgba(15,23,42,.12);
  color: var(--text);
}
.btn.ghost:hover{background: rgba(15,23,42,.04);}

/* About prose layout */
.u360-proseGrid{display:grid; grid-template-columns: 1.25fr .75fr; gap:14px; align-items:start;}
@media (max-width: 980px){.u360-proseGrid{grid-template-columns:1fr;}}
.u360-prose{background: var(--surface); border:1px solid rgba(2,6,23,.12); border-radius:18px; padding:18px;}
.u360-prose p{color: var(--muted2);; line-height:1.75;}
.u360-prose h2,.u360-prose h3{margin-top:18px;}
.u360-proseAside .u360-card--aside{background: var(--surface); border:1px solid rgba(2,6,23,.12); border-radius:18px; padding:16px;}
.u360-miniList{margin-top:10px; display:grid; gap:8px; color: var(--muted2);; font-size:13px;}

/* Results snapshot (chart) */
.u360-resultsGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; align-items:stretch;}
@media (max-width: 980px){.u360-resultsGrid{grid-template-columns:1fr;}}
.u360-card--chart{padding:18px;}
.u360-bars{display:grid; gap:12px;}
.u360-barRow{display:grid; grid-template-columns: 160px 1fr; gap:12px; align-items:center;}
@media (max-width: 520px){.u360-barRow{grid-template-columns:1fr;}}
.u360-barLabel{font-size:12px; color: var(--muted2);;}
.u360-barTrack{height:10px; border-radius:999px; background:rgba(2,6,23,.08); overflow:hidden; border:1px solid rgba(2,6,23,.10);}
.u360-barFill{height:100%; border-radius:999px; background:linear-gradient(90deg, rgba(15,23,42,.10), rgba(15,23,42,.06));}
.u360-chartNote{margin-top:12px; font-size:12px; color: var(--muted2);;}
.u360-card--metrics{padding:18px; display:flex; flex-direction:column; gap:12px;}
.u360-metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
@media (max-width: 520px){.u360-metrics{grid-template-columns:1fr;}}
.u360-metric{background: var(--surface); border:1px solid rgba(2,6,23,.10); border-radius:16px; padding:12px;}
.u360-metricVal{font-weight:800; font-size:14px;}
.u360-metricKey{font-size:12px; color: var(--muted2);; margin-top:4px;}
.u360-metricsFoot{font-size:12px; color: var(--muted2);;}

/* Prose spacing guard */
.u360-prose > *:first-child{margin-top:0;}
.u360-prose > *:last-child{margin-bottom:0;}

/* v27 Interactive charts (maintenance-style) */
.u360-resultsGrid--viz{grid-template-columns: 1.15fr .85fr;}
.u360-vizTop{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:14px;}
.u360-donut{
  --p: 75;
  width: 160px; height: 160px; border-radius:999px;
  background:
    conic-gradient(rgba(15,23,42,.80) calc(var(--p)*1%), rgba(2,6,23,.10) 0);
  border: 1px solid rgba(2,6,23,.12);
  position:relative;
  box-shadow: 0 16px 50px rgba(0,0,0,.40);
}
.u360-donut::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:999px;
  background: radial-gradient(circle at 35% 35%, rgba(15,23,42,.06), rgba(0,0,0,0) 60%),
              rgba(7,9,12,.85);
  border:1px solid rgba(2,6,23,.12);
}
.u360-donutInner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:12px;
}
.u360-donutVal{font-weight:900; letter-spacing:-.01em; font-size:18px;}
.u360-donutLabel{font-size:12px; color: var(--muted2);; margin-top:4px;}

.u360-vizMini{position:relative; width:220px; height:160px; border-radius:22px;
  background: var(--surface);
  border:1px solid rgba(2,6,23,.12);
  overflow:hidden;
}
.u360-vizRing{
  position:absolute; right:-40px; top:-40px; width: 190px; height:190px; border-radius:999px;
  background: radial-gradient(circle at 35% 35%, rgba(15,23,42,.10), rgba(15,23,42,.10) 60%);
  filter: blur(1px);
}
.u360-vizPulse{
  position:absolute; right: 18px; top: 18px; width: 170px; height:170px; border-radius:999px;
  background: radial-gradient(circle at 35% 35%, rgba(15,23,42,.06), rgba(15,23,42,.06) 62%);
  animation: u360Pulse 2.2s ease-in-out infinite;
  filter: blur(2px);
}
@keyframes u360Pulse{0%,100%{transform: scale(1); opacity:.75} 50%{transform: scale(1.08); opacity:1}}

.u360-vizMiniBars{position:absolute; left: 16px; bottom: 16px; display:flex; flex-direction:column; gap:8px; width: 68%;}
.u360-miniBar{height:10px; border-radius:999px; background: rgba(2,6,23,.08); border:1px solid rgba(2,6,23,.10); overflow:hidden;}
.u360-miniBar span{
  display:block; height:100%; width: 0%;
  background: linear-gradient(90deg, rgba(15,23,42,.10), rgba(15,23,42,.10));
  border-radius:999px;
  animation: u360Fill 3.2s ease-in-out infinite;
}
.u360-miniBar:nth-child(2) span{animation-delay:.2s}
.u360-miniBar:nth-child(3) span{animation-delay:.4s}
@keyframes u360Fill{0%{width:12%} 50%{width:92%} 100%{width:12%}}

.u360-vizBars{display:grid; gap:12px;}
.u360-vizRow{display:grid; grid-template-columns: 180px 1fr; gap:12px; align-items:center;}
@media (max-width: 520px){.u360-vizRow{grid-template-columns:1fr;}}
.u360-vizLabel{font-size:12px; color: var(--muted2);;}
.u360-vizBar{height:12px; border-radius:999px; background:rgba(2,6,23,.08); border:1px solid rgba(2,6,23,.10); overflow:hidden; position:relative;}
.u360-vizBar span{
  display:block; height:100%; width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(15,23,42,.10), rgba(15,23,42,.06));
  transition: width 900ms var(--ease);
}
.u360-vizBar:hover span{filter:saturate(1.1) brightness(1.05);}

.u360-vizTooltip{
  position:fixed; z-index:9999; pointer-events:none;
  padding:8px 10px; border-radius:12px;
  background: rgba(10,13,18,.92);
  border:1px solid rgba(2,6,23,.12);
  color: var(--text);
  font-size:12px;
  transform: translate(-50%, -120%);
  opacity:0; transition: opacity .15s var(--ease);
}
.u360-vizTooltip.is-on{opacity:1;}

/* v28 Blog layout + structure helpers */
.u360-postHeader{padding: 46px 0 16px;}
.u360-postMeta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.u360-postTitle{margin:0; letter-spacing:-.02em; line-height:1.05;}
.u360-postLead{margin-top:10px; color: var(--muted2);; max-width: 70ch;}

.u360-postHero{padding: 10px 0 10px;}
.u360-postHeroFigure{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.03);
}
/* Banner style: smaller than before, wide and cinematic */
.u360-postHeroImg{
  width:100%;
  height: 320px; /* ~half of huge */
  object-fit: cover;
  display:block;
}
@media (max-width:720px){
  .u360-postHeroImg{height:220px;}
}

.u360-postBody{padding: 18px 0 56px;}
.u360-prose--post{padding: 18px;}
.u360-prose--post h2{margin-top:22px;}
.u360-prose--post img{border-radius:18px; border:1px solid rgba(2,6,23,.10);}

/* Gutenberg pattern blocks */
.u360-postBanner img,
.wp-block-image.u360-postBanner img{
  width:100%;
  height: 260px;
  object-fit: cover;
  border-radius: 18px;
  border:1px solid rgba(2,6,23,.12);
}
@media (max-width:720px){
  .u360-postBanner img, .wp-block-image.u360-postBanner img{height:200px;}
}

.u360-postCta{
  margin: 18px 0;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(2,6,23,.12);
}
.u360-postCta h3{margin:0 0 8px 0; font-size:16px; font-weight:900;}
.u360-postCta p{margin:0 0 12px 0; color: var(--muted2);;}
.u360-postCta .u360-ctaRow{margin-top:6px;}

/* Side-by-side images */
.u360-duoImages,
.u360-duoImagesShort{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0;
}
@media (max-width:720px){
  .u360-duoImages, .u360-duoImagesShort{grid-template-columns:1fr;}
}
.u360-duoImages figure,
.u360-duoImagesShort figure{margin:0;}
.u360-duoImages img,
.u360-duoImagesShort img{
  width:100%;
  height: 240px;
  object-fit: cover;
  border-radius: 18px;
  border:1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.03);
  display:block;
}

/* Post nav */
.u360-postNav{display:flex; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(2,6,23,.10);}
.u360-postNav a{color: var(--muted);; text-decoration:none;}
.u360-postNav a:hover{color:#fff;}

/* v29 Homepage latest posts cards */
.u360-postGrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
@media (max-width:980px){.u360-postGrid{grid-template-columns:1fr;}}
.u360-postCard{
  display:flex; flex-direction:column; height:100%;
  border-radius:18px; overflow:hidden;
  background: var(--surface);
  border:1px solid rgba(2,6,23,.12);
  text-decoration:none; color:var(--text);
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.u360-postCard:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background:rgba(255,255,255,.045);}
.u360-postThumb{position:relative; width:100%;}
.u360-postThumb img{width:100%; height:180px; object-fit:cover; display:block;}
@media (max-width:980px){.u360-postThumb img{height:220px;}}
.u360-postCardBody{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px;}
.u360-postPills{display:flex; gap:8px; flex-wrap:wrap;}
.pill--read{border-color: rgba(37,211,102,.55) !important; color: rgba(37,211,102,.95) !important;}
.u360-postCardBody p{margin:0; color: var(--muted2);;}
.u360-postLink{margin-top:auto; padding-top:10px; font-weight:700; color: var(--text);}

/* v29 WhatsApp button brand color */
.u360-wa, .u360-whatsapp, .whatsapp-float, .u360-floatWA{
  background: #25D366 !important;
  border-color: rgba(37,211,102,.55) !important;
  color: #06100b !important;
}
.u360-wa svg, .u360-whatsapp svg, .whatsapp-float svg, .u360-floatWA svg{
  fill: #06100b !important;
}
.u360-wa:hover, .u360-whatsapp:hover, .whatsapp-float:hover, .u360-floatWA:hover{
  filter: brightness(1.05) saturate(1.1);
  transform: translateY(-1px);
}

.u360-whatsapp{color:#06100b;}
.u360-whatsapp svg{fill:#06100b;}
.u360-whatsapp:hover{transform:translateY(-1px);}

/* v30 Blog index landing page */
.u360-postGrid--list{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1100px){.u360-postGrid--list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:980px){.u360-postGrid--list{grid-template-columns:1fr;}}
.u360-pagination{margin-top:18px;}
.u360-pagination .nav-links{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.u360-pagination a, .u360-pagination span{
  padding:10px 12px; border-radius:12px;
  border:1px solid rgba(2,6,23,.12);
  background: var(--surface);
  color: var(--muted2);;
  text-decoration:none;
}
.u360-pagination .current{border-color: rgba(15,23,42,.22);}
.u360-pagination a:hover{background:rgba(255,255,255,.05);}

/* v31 WhatsApp button: dark/transparent background with WhatsApp green accent */
.u360-whatsapp{
  background: rgba(10,13,18,.55) !important;
  border-color: rgba(37,211,102,.55) !important;
  color: rgba(37,211,102,.95) !important;
  backdrop-filter: blur(10px);
}
.u360-whatsapp svg{fill: rgba(37,211,102,.95) !important;}
.u360-whatsapp:hover{
  background: rgba(10,13,18,.70) !important;
  border-color: rgba(37,211,102,.75) !important;
  transform: translateY(-1px);
}

/* v31 Chart polish */
.u360-vizBar{cursor: pointer;}
.u360-donut{transition: transform .25s var(--ease), box-shadow .25s var(--ease);}
.u360-donut:hover{transform: translateY(-1px); box-shadow: 0 18px 60px rgba(0,0,0,.46);}

/* v31 Homepage spacing polish (Solutions + Recent work) */
.u360-solutions--v7 .u360-secHead{margin-bottom:14px;}
.u360-solutions--v7 .u360-card--v7{padding:18px 18px 16px;}
.u360-solutions--v7 .u360-card--v7 p{margin-top:8px;}
.u360-solutions--v7 .u360-card--v7 .u360-cardMeta{margin-top:10px;}
.u360-cases--clean{padding-top:52px; padding-bottom:52px;}
.u360-cases--clean .u360-card{padding:18px; border-radius:18px;}
.u360-cases--clean .u360-card .h3{margin-bottom:8px;}

/* v31 About treat images */
.u360-treatRow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin: 16px 0 8px;}
@media (max-width:980px){.u360-treatRow{grid-template-columns:1fr;}}
.u360-treat{margin:0; border-radius:18px; overflow:hidden; border:1px solid rgba(2,6,23,.12); background: var(--surface);}
.u360-treat img{width:100%; height:220px; object-fit:cover; display:block;}
@media (max-width:980px){.u360-treat img{height:240px;}}

/* v31 Blog cards polish */
.u360-postGrid--list .u360-postThumb img{height:170px;}
@media (max-width:980px){.u360-postGrid--list .u360-postThumb img{height:220px;}}

/* v32 FAQ polish */
.u360-faq .u360-accordion{border-radius:18px; overflow:hidden; border:1px solid rgba(2,6,23,.12); background: var(--surface);}
.u360-faq .u360-accBtn{padding:14px 16px;}
.u360-faq .u360-accPanel{padding:0 16px 14px 16px; border-top:1px solid rgba(2,6,23,.08);}

/* v32 Service section spacing (How we deliver + What you get) */
.u360-deliverClean .u360-secHead,
.u360-getClean .u360-secHead{margin-bottom:14px;}
.u360-deliverClean .u360-grid3,
.u360-getClean .u360-grid3{gap:14px;}
.u360-deliverClean .u360-card,
.u360-getClean .u360-card{padding:18px; border-radius:18px; background: var(--surface); border:1px solid rgba(2,6,23,.12);}
.u360-deliverClean .u360-card .h3,
.u360-getClean .u360-card .h3{margin-bottom:8px;}

/* v32 Testimonials controls */
[data-testimonials]{position:relative;}
[data-testimonials] .u360-sliderControls{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex; gap:10px;
  z-index:5;
}
[data-testimonials] .u360-sliderBtn{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background:rgba(10,13,18,.55);
  color: var(--muted2);;
  font-size:22px;
  display:grid; place-items:center;
  backdrop-filter: blur(10px);
}
[data-testimonials] .u360-sliderBtn:hover{background:rgba(10,13,18,.72); border-color:rgba(15,23,42,.18);}

/* v32 About spacing polish */
.u360-aboutProse .u360-aboutCards{gap:14px;}
.u360-aboutProse .u360-aboutCards .u360-card{padding:18px; border-radius:18px;}

/* v32 Ensure WhatsApp button stays transparent */
.u360-whatsapp{background: rgba(10,13,18,.55) !important;}

/* v32 Testimonials base */
.u360-tWrap{overflow:hidden; position:relative;}
.u360-tTrack{display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:64px;}
.u360-tTrack::-webkit-scrollbar{height:8px;}
.u360-tTrack::-webkit-scrollbar-thumb{background:rgba(2,6,23,.12); border-radius:999px;}
.u360-tCard{min-width:320px; max-width:380px; scroll-snap-align:start; padding:18px; border-radius:18px; background: var(--surface); border:1px solid rgba(2,6,23,.12);}
.u360-stars{color: rgba(255,196,0,.95); letter-spacing:2px; margin-bottom:10px;}
.u360-tBy{margin-top:12px; display:flex; flex-direction:column; gap:2px;}
.u360-tName{font-weight:900;}
.u360-tRole{font-size:12px; color: var(--muted2);;}

/* v33 About: Why we exist spacing */
.u360-whyExist{padding-top:52px; padding-bottom:52px;}
.u360-whyExist .u360-secHead{margin-bottom:14px;}
.u360-whyExist .u360-prose,
.u360-whyExist .u360-card,
.u360-whyExist .u360-grid2,
.u360-whyExist .u360-grid3{margin-top:0;}
@media (max-width:720px){
  .u360-whyExist{padding-top:44px; padding-bottom:44px;}
}

/* v34 Testimonials controls - ensure room for buttons */
[data-testimonials] .u360-tWrap{position:relative;}
[data-testimonials] .u360-tTrack{padding-bottom:76px;}
[data-testimonials] .u360-sliderControls{pointer-events:auto;}

/* v35 WhatsApp: icon-only floating button */
.u360-whatsapp{font-size:0 !important; line-height:0 !important;}
.u360-whatsapp *{font-size:inherit;}
.u360-whatsapp::after{content:none !important;}

/* v37 About: Why we exist section spacing */
.u360-whyExist{padding-top:56px; padding-bottom:56px;}
.u360-whyExist .u360-secHead{margin-bottom:16px;}
.u360-whyExist .u360-grid3{gap:14px;}
.u360-whyExist .u360-card{padding:20px; border-radius:18px;}
.u360-whyExist .u360-card .h3{margin:0 0 8px;}
.u360-whyExist .u360-card p{margin:0; color: var(--muted2);;}
@media (max-width:720px){
  .u360-whyExist{padding-top:46px; padding-bottom:46px;}
  .u360-whyExist .u360-card{padding:18px;}
}

.u360-whyExist .u360-secHead p.muted{margin-top:8px;}

/* v40 Footer accessibility (dark bg + high-contrast text) */
.footer{background:#0b1220; color:#f8fafc;}
.footer .kicker{color:rgba(248,250,252,.70);} /* ensure headings stay visible on dark footer */
.footer .note,.footer .small,.footer .brandsub{color:rgba(248,250,252,.78);}
.footer a{color:#f8fafc; text-decoration:none;}
.footer a:hover{opacity:.92; text-decoration:underline; text-underline-offset:3px;}
.footer .hr{background:rgba(248,250,252,.14);}
.footer .badge{background:rgba(248,250,252,.06); border-color:rgba(248,250,252,.14); color:#f8fafc;}
.footer .dot{background:rgba(248,250,252,.9); box-shadow:0 0 0 4px rgba(248,250,252,.10);}
.footer .fbrand{display:flex; align-items:center; gap:10px;}
.footer .fbadges{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.footer .fbar{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.footer .fmenu{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.footer .fmenu a{display:inline-block; padding:6px 0;}

/* v40 Section card wrapper (e.g., Recent work) */
.u360-sectionCard{background:var(--surface); border:1px solid rgba(2,6,23,.12); border-radius:20px; padding:18px; box-shadow:0 8px 22px rgba(2,6,23,.05);}
@media (max-width:720px){.u360-sectionCard{padding:14px; border-radius:18px;}}

/* v40 CTA modal sizing (avoid cut-off on mobile) */
.modal .dialog{width:min(560px, 92vw); max-height:min(86vh, 720px); overflow:auto;}
.modal .dialog .content{padding:18px;}
.modal .dialog header{padding:18px;}
@media (max-width:520px){
  .modal .dialog .content{padding:14px;}
  .modal .dialog header{padding:14px;}
}

/* v40 Transparent controls (testimonials + WhatsApp) */
.u360-sliderBtn{background:transparent !important; backdrop-filter:none !important;}
.u360-sliderBtn:hover{background:rgba(2,6,23,.06) !important;}

.u360-whatsapp{
  background:transparent !important;
  border:1px solid rgba(2,6,23,.18) !important;
  backdrop-filter:none !important;
}
.u360-whatsapp:hover{background:rgba(2,6,23,.06) !important;}

/* Hide legacy floating WA buttons from older themes/plugins */
.whatsapp-float,.u360-floatWA,.u360-wa{display:none !important;}


/* === Update360: WhatsApp button (border by default, transparent bg) === */
.u360-whatsappBtn,
.u360-whatsapp-btn,
a.u360-whatsappBtn,
a.u360-whatsapp-btn{
  background: transparent !important;
  border: 1px solid rgba(18, 18, 18, .22) !important;
  box-shadow: none !important;
}
.u360-whatsappBtn:hover,
.u360-whatsapp-btn:hover{
  border-color: rgba(18, 18, 18, .38) !important;
}

/* Hide legacy/previous-theme WhatsApp floaters if they exist */
.whatsapp_float, .floating-whatsapp, .wp-whatsapp, .joinchat, .wa__btn_popup, .wapp, .whatsapp-button{
  display:none !important;
}


/* === Update360: Footer accessibility tweaks === */
.site-footer, footer.site-footer{
  background: #0b0f14 !important;
  color: rgba(255,255,255,.92) !important;
}
.site-footer a, footer.site-footer a{
  color: rgba(255,255,255,.92) !important;
  text-decoration-color: rgba(255,255,255,.35);
}
.site-footer a:hover, footer.site-footer a:hover{
  color: #fff !important;
  text-decoration-color: rgba(255,255,255,.65);
}


/* Sweet orange accents (tasteful) */

a{ text-underline-offset: 3px; }
a:hover{ color: var(--brand); }
.nav-item.is-active{
  color: var(--text) !important;
  background: var(--brand-soft);
  border-color: var(--brand-border) !important;
}
.navlinks a.nav-item.is-active:hover{ background: var(--brand-soft2); }
.brandmark{ border-color: rgba(249,115,22,.22); box-shadow: 0 12px 28px rgba(249,115,22,.12); }

/* Subtle section accents */
.kicker, .pill, .tag{
  background: var(--brand-soft);
  border-color: var(--brand-border);
  color: var(--text);
}
.divider, hr{ border-color: rgba(249,115,22,.18); }

/* Inputs + focus */
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus, textarea:focus, select:focus{
  border-color: var(--brand-border);
  box-shadow: 0 0 0 4px var(--brand-soft);
}

/* Ghost buttons get orange hover */
.btn.ghost:hover{
  border-color: var(--brand-border);
  background: var(--brand-soft);
}

/* Cards: tiny top accent bar when marked */
.card.accent::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, rgba(249,115,22,.0), rgba(249,115,22,.9), rgba(249,115,22,.0));
  opacity:.85;
}

/* =========================
   Contact Page Layout Fix
   (Surgical patch: leaves the rest of the theme unchanged)
========================= */

/* Prevent horizontal overflow on the Contact template */
body.page-template-template-contact,
body.page-template-templates-template-contact-php{
  overflow-x:hidden;
}

/* Ensure the main content uses full available width */
body.page-template-template-contact #content,
body.page-template-templates-template-contact-php #content{
  width:100%;
  max-width:100%;
}

/* Desktop: make the existing right card become a LEFT banner panel */
@media (min-width: 921px){
  body.page-template-template-contact .u360-contactHero .herogrid,
  body.page-template-templates-template-contact-php .u360-contactHero .herogrid{
    grid-template-columns: 420px 1fr;
    gap:24px;
    align-items:start;
  }

  /* Move the existing heroRight block into the left column */
  body.page-template-template-contact .u360-contactHero .heroRight,
  body.page-template-templates-template-contact-php .u360-contactHero .heroRight{
    grid-column:1;
    position:sticky;
    top:16px;
  }

  /* Keep the text/content in the right column */
  body.page-template-template-contact .u360-contactHero .herogrid > .reveal,
  body.page-template-templates-template-contact-php .u360-contactHero .herogrid > .reveal{
    grid-column:2;
    min-width:0;
  }
}

/* Mobile: keep it stacked and full width */
@media (max-width: 920px){
  body.page-template-template-contact .u360-contactHero .herogrid,
  body.page-template-templates-template-contact-php .u360-contactHero .herogrid{
    grid-template-columns: 1fr;
  }

  body.page-template-template-contact .u360-contactHero .heroRight,
  body.page-template-templates-template-contact-php .u360-contactHero .heroRight{
    position:relative;
    top:auto;
  }
}

/* Banner media should never shrink or overflow */
body.page-template-template-contact .u360-contactHero .hero-card,
body.page-template-templates-template-contact-php .u360-contactHero .hero-card{
  width:100%;
}
body.page-template-template-contact .u360-contactHero .hero-media img,
body.page-template-template-contact .u360-contactHero .hero-media video,
body.page-template-templates-template-contact-php .u360-contactHero .hero-media img,
body.page-template-templates-template-contact-php .u360-contactHero .hero-media video{
  width:100%;
  height:auto;
  display:block;
}


:root{
  --font-sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow:0 10px 28px rgba(15,23,42,.06);
}
html,body,button,input,textarea,select{font-family:var(--font-sans);}
body{letter-spacing:-.01em;}
p, .muted, .small, .navlinks a, .btn{font-size:14.5px;}
.hero h1, .h1{font-size:clamp(2.5rem,4.6vw,4.35rem);}
.h2{font-size:clamp(1.75rem,2.4vw,2.5rem);}
.card,.media,.dialog,.u360-card,.u360-stat,.u360-sectionCard,.u360-postCard,.hero-card{box-shadow:none !important;}
.btn.primary,.btn.primary:hover,.brandmark{box-shadow:none !important;}
.header{backdrop-filter:saturate(140%) blur(10px);}
.navbar{min-height:76px;}
.actions{gap:8px;}
.hero .media .frame,.u360-homeHero .media .frame{aspect-ratio:1/1; min-height:380px;}
.frame--square{aspect-ratio:1/1 !important;}
.frame img,.frame video,.hero-media img,.hero-media video,.u360-mediaAsset{width:100%;height:100%;display:block;border-radius:inherit;}
.u360-mediaAsset.contain,.frame img.u360-mediaAsset.contain,.hero-media img.u360-mediaAsset.contain{object-fit:contain;background:linear-gradient(180deg,#fff,#f8fafc);padding:14px;}
.u360-mediaAsset.cover{object-fit:cover;}
.heroVideo img.u360-mediaAsset.cover,.heroVideo video.u360-mediaAsset.cover{object-fit:cover;padding:0;border-radius:0;}
.u360-embed{position:relative;width:100%;height:100%;min-height:320px;border-radius:inherit;overflow:hidden;background:#0f172a;}
.u360-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.u360-serviceHero .media{background:#fff;}
.u360-grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;}
.u360-showcaseGrid .u360-stack{display:flex;flex-direction:column;gap:20px;}
.u360-mediaStage{border-radius:22px;overflow:hidden;border:1px solid rgba(2,6,23,.08);background:#fff;min-height:420px;}
.u360-serviceFlow .u360-card,.u360-serviceShowcase .u360-card{padding:22px;border-radius:20px;background:var(--surface);border:1px solid rgba(2,6,23,.10);}
.u360-stepNo{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:var(--brand-soft);color:var(--text);font-weight:700;margin-bottom:12px;}
.u360-chartHead{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px;font-size:13px;color:var(--muted2);}
.u360-bars{display:flex;flex-direction:column;gap:14px;}
.u360-barRow{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:center;font-size:13px;color:var(--muted2);}
.u360-bar{height:12px;background:#eef2f7;border-radius:999px;overflow:hidden;position:relative;}
.u360-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f97316,#fb923c);}
.u360-cleanList{margin:0;padding-left:18px;color:var(--muted2);display:grid;gap:10px;}
.u360-serviceKpis .u360-stat{padding:22px;border-radius:20px;background:#fff;border:1px solid rgba(2,6,23,.08);}
.u360-serviceKpis .u360-statNum{font-size:clamp(1.35rem,2vw,2rem);}
body.page-template-template-contact .u360-contactHero .herogrid,
body.page-template-templates-template-contact-php .u360-contactHero .herogrid{grid-template-columns:1fr 1fr !important;align-items:center !important;gap:22px;}
body.page-template-template-contact .u360-contactHero .heroRight,
body.page-template-templates-template-contact-php .u360-contactHero .heroRight{grid-column:auto !important;position:relative !important;top:auto !important;}
body.page-template-template-contact .u360-contactHero .herogrid > .reveal,
body.page-template-templates-template-contact-php .u360-contactHero .herogrid > .reveal{grid-column:auto !important;}
body.page-template-template-contact .u360-contactHero .hero-card,
body.page-template-templates-template-contact-php .u360-contactHero .hero-card{padding:22px;border-radius:22px;background:#fff;border:1px solid rgba(2,6,23,.10);}
body.page-template-template-contact .u360-contactHero .hero-media,
body.page-template-templates-template-contact-php .u360-contactHero .hero-media{min-height:340px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(2,6,23,.08);margin-top:14px;}
@media (max-width: 920px){
  .u360-grid2{grid-template-columns:1fr;}
  .hero .media .frame,.u360-homeHero .media .frame{min-height:300px;}
  .u360-barRow{grid-template-columns:1fr;gap:8px;}
  body.page-template-template-contact .u360-contactHero .herogrid,
  body.page-template-templates-template-contact-php .u360-contactHero .herogrid{grid-template-columns:1fr !important;}
}

/* === Remove all box shadows globally === */
:root{
  --shadow: none !important;
}

*,
*::before,
*::after{
  box-shadow: none !important;
}