/* Exact Agency Overview Ronin standalone port.
   Source: C:/Users/otsi-/Downloads/SOT Folder/ronin-reference/agency-overview/agency-overview.standalone.html */
/* Preserve the real OTSI-NEO header, footer, and premium mega-menu.
   Hide only the duplicate standalone topbar/nav/footer inside the imported page content. */
.ronin-agency-standalone > .site-header > .topbar,
.ronin-agency-standalone > .site-header > .mainnav,
.ronin-agency-standalone > .site-footer{display:none!important}
body:has(.ronin-agency-standalone).otsi-neo,
body.page-id-2690.otsi-neo{background:#fff!important;color:#0b1f3a!important}
body:has(.ronin-agency-standalone) .otsi-neo-main,
body:has(.ronin-agency-standalone) .entry-content,
body.page-id-2690 .otsi-neo-main,
body.page-id-2690 .entry-content{background:#fff!important}
body:has(.ronin-agency-standalone) .otsi-neo-content-card,
body:has(.ronin-agency-standalone) .otsi-neo-container,
body.page-id-2690 .otsi-neo-content-card,
body.page-id-2690 .otsi-neo-container{max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important}
body:has(.ronin-agency-standalone) .entry-content>:where(:not(.alignfull):not(.alignwide)),
body.page-id-2690 .entry-content>:where(:not(.alignfull):not(.alignwide)){max-width:none!important;margin:0!important}
body:has(.ronin-agency-standalone) .otsi-neo-topbar,
body:has(.ronin-agency-standalone) .otsi-neo-site-header,
body:has(.ronin-agency-standalone) .otsi-neo-site-footer,
body.page-id-2690 .otsi-neo-topbar,
body.page-id-2690 .otsi-neo-site-header,
body.page-id-2690 .otsi-neo-site-footer{display:block!important}
body:has(.ronin-agency-standalone) .otsi-neo-primary-nav .otsi-neo-menu > li > a,
body:has(.ronin-agency-standalone) .otsi-neo-primary-nav a,
body.page-id-2690 .otsi-neo-primary-nav .otsi-neo-menu > li > a,
body.page-id-2690 .otsi-neo-primary-nav a{color:#dbe2ee!important;opacity:1!important;text-decoration:none!important}
body:has(.ronin-agency-standalone) .otsi-neo-primary-nav .otsi-neo-menu > li.current-menu-item > a,
body:has(.ronin-agency-standalone) .otsi-neo-primary-nav .otsi-neo-menu > li.current-menu-ancestor > a,
body:has(.ronin-agency-standalone) .otsi-neo-primary-nav .otsi-neo-menu > li > a:hover,
body:has(.ronin-agency-standalone) .otsi-neo-primary-nav .otsi-neo-menu > li > a:focus,
body.page-id-2690 .otsi-neo-primary-nav .otsi-neo-menu > li.current-menu-item > a,
body.page-id-2690 .otsi-neo-primary-nav .otsi-neo-menu > li.current-menu-ancestor > a,
body.page-id-2690 .otsi-neo-primary-nav .otsi-neo-menu > li > a:hover,
body.page-id-2690 .otsi-neo-primary-nav .otsi-neo-menu > li > a:focus{color:#eab040!important}
body:has(.ronin-agency-standalone) .otsi-neo-topbar a,
body:has(.ronin-agency-standalone) .otsi-neo-topbar span,
body.page-id-2690 .otsi-neo-topbar a,
body.page-id-2690 .otsi-neo-topbar span{color:#a9b6cc!important;opacity:1!important}
body:has(.ronin-agency-standalone) .otsi-neo-topbar .otsi-neo-topbar-email,
body.page-id-2690 .otsi-neo-topbar .otsi-neo-topbar-email{color:#eab040!important}
body:has(.ronin-agency-standalone) .otsi-neo-dashboard-link,
body.page-id-2690 .otsi-neo-dashboard-link{color:#ffffff!important;border-color:rgba(255,255,255,.35)!important;background:transparent!important;opacity:1!important;text-decoration:none!important}
body:has(.ronin-agency-standalone) .otsiMM-panel,
body:has(.ronin-agency-standalone) .otsiMM-panel *,
body.page-id-2690 .otsiMM-panel,
body.page-id-2690 .otsiMM-panel *{opacity:1!important}
body:has(.ronin-agency-standalone) .otsiMM-link b,
body.page-id-2690 .otsiMM-link b{color:#ffffff!important}
body:has(.ronin-agency-standalone) .otsiMM-link:hover b,
body.page-id-2690 .otsiMM-link:hover b{color:#f0c766!important}
.ronin-agency-standalone{background:#fff;color:#0b1f3a}
.ronin-agency-standalone .brand__mark svg{width:100%;height:100%}
.ronin-agency-standalone .kpi-card__icon svg{width:18px;height:18px}
.ronin-agency-standalone .service-card__icon svg{width:22px;height:22px}
.ronin-agency-standalone .cta-banner__icon svg{width:28px;height:28px}
.ronin-agency-standalone .wp-block-html{margin:0!important}

/* =========================================================
   RONIN SHARED SHELL — design tokens + reusable components
   (header/topbar/nav, hero-navy, kpi-band, badges, chips,
   check-list, rings, sparks, explain/service cards, quality
   bar, cta-banner, footer, responsive base).
   Used by every page in ronin-reference/*. Do not duplicate
   these rules into a page's own styles.css — only add
   page-specific overrides/extras there.
   Blueprint for OTSI PMS / OTSI-NEO WordPress porting only —
   not a final standalone site, not a duplicate WP page.
   ========================================================= */

/* Colour tokens (--gold, --green, --ink, --white, etc.) are intentionally
   NOT redeclared here - they cascade from the canonical, theme-aware
   definitions in public.css (loaded first as a dependency). Only truly
   file-specific, non-theme-dependent values stay local: the always-dark
   hero navy scale, radii, and the font stack. */
:root{
  --navy-950:#04162c;
  --navy-900:#071d38;
  --navy-800:#0a2547;
  --navy-700:#0f2f57;
  --blue:#3568c9;
  --blue-tint:#eaf1fd;
  --purple:#7c5cd6;
  --purple-tint:#f2eefb;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,dl,dd{margin:0;}
ul{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
svg{display:block;}

.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:24px;
}

/* decorative global-network background layer, shared by hero + footer */
.bg-network{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  color:var(--gold);
}

.icon{width:24px;height:24px;flex-shrink:0;}
.icon-xs{width:14px;height:14px;}
.icon-md{width:26px;height:26px;color:var(--ink);}
.icon--blue{color:var(--blue-ring);}
.icon--green{color:var(--green);}
.icon--purple{color:var(--purple);}
.icon--gold{color:var(--gold);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  border:1.5px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn--sm{padding:8px 16px;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;}
.btn--ghost-gold{border-color:var(--gold);color:var(--gold);background:transparent;}
.btn--ghost-gold:hover{background:rgba(234,176,64,.1);}
.btn--gold-solid,.btn--gold-solid:link,.btn--gold-solid:visited{background:var(--gold)!important;color:var(--navy-950)!important;}
.btn--gold-solid:hover,.btn--gold-solid:focus{background:#f4bd5c!important;color:var(--navy-950)!important;}

/* ---------- badges / chips ---------- */
.badge{
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
.badge--green{background:var(--green-tint);color:var(--green);}

.chip{
  display:inline-block;
  font-size:11.5px;
  font-weight:600;
  padding:5px 11px;
  border-radius:999px;
  background:var(--gray-100);
  color:var(--ink-soft);
}
.chip--gray{background:var(--gray-100);color:var(--ink-soft);}
.chip--green{background:var(--green-tint);color:var(--green);}
.chip--blue{background:var(--blue-tint);color:var(--blue);}
.chip--purple{background:var(--purple-tint);color:var(--purple);}
.chip--gold{background:var(--gold-tint);color:var(--gold-dark);}
.chip--orange{background:var(--gold-tint);color:#b9691b;}
.chip--gold-outline{background:var(--gold-tint);color:#b9691b;border:1px solid #f0d9a8;}
.chip--gold-solid-outline{background:transparent;color:var(--gold);border:1px solid var(--gold);}

.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}

/* ---------- check list ---------- */
.check-list{display:flex;flex-direction:column;gap:9px;margin:16px 0;}
.check-list li{
  position:relative;
  padding-left:22px;
  font-size:13px;
  color:var(--ink-soft);
}
.check-list li::before{
  content:"";
  position:absolute;left:0;top:3px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--green-tint);
  box-shadow:inset 0 0 0 1px rgba(31,157,100,.25);
}
.check-list li::after{
  content:"";
  position:absolute;left:3px;top:6px;
  width:8px;height:5px;
  border-left:2px solid var(--green);
  border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.check-list--light li{color:#cfd7e3;}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{background:linear-gradient(180deg,var(--navy-950) 0%, var(--navy-800) 100%);}

.topbar{background:var(--navy-950);border-bottom:1px solid rgba(255,255,255,.06);}
.topbar__row{display:flex;align-items:center;justify-content:space-between;padding-block:8px;font-size:12px;color:#a9b6cc;}
.topbar__locations,.topbar__contact{display:flex;align-items:center;gap:14px;}
.topbar__item{display:inline-flex;align-items:center;gap:6px;color:#a9b6cc;}
.topbar__item--gold{color:var(--gold);}
.topbar__sep{opacity:.4;}

.mainnav{border-bottom:1px solid rgba(255,255,255,.06);}
.mainnav__row{display:flex;align-items:center;gap:28px;padding-block:14px;}
.brand{display:flex;align-items:center;gap:10px;margin-right:8px;}
.brand__mark{
  width:34px;height:34px;
  background:var(--gold);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  padding:6px;
}
.brand__mark--sm{width:28px;height:28px;padding:5px;}
.brand__name{color:var(--white);font-weight:800;font-size:18px;letter-spacing:.03em;}

.mainnav__links{display:flex;align-items:center;gap:22px;flex:1;flex-wrap:wrap;}
.mainnav__links a{
  font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:#c4cede;
}
.mainnav__links a.is-active,.mainnav__links a:hover{color:var(--gold);}

/* ---------- hero ---------- */
.hero-navy{
  position:relative;
  overflow:hidden;
  padding-block:36px 66px;
  isolation:isolate;
}
.hero-navy::after{
  content:"";
  position:absolute;
  top:-30%;left:2%;
  width:56%;height:150%;
  background:radial-gradient(ellipse at center, rgba(90,140,220,.30), transparent 68%);
  pointer-events:none;
  z-index:0;
}
.hero-navy > .container{position:relative;z-index:1;}

.breadcrumb{display:flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#8996ad;margin-bottom:18px;}
.breadcrumb__current{color:var(--gold);}
.breadcrumb .icon-xs{width:10px;height:10px;}

.hero__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start;}
.hero__title{color:var(--white);font-size:52px;font-weight:800;line-height:1.05;margin-bottom:14px;}
.hero__subtitle{color:#b7c1d6;font-size:16px;max-width:44ch;line-height:1.5;margin-bottom:20px;}
.hero__checklist{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:34px;}
.hero__checklist li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#dbe2ee;}
.check-badge{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(234,176,64,.15);color:var(--gold);
}
.check-badge--dot{background:rgba(46,174,106,.18);color:#5fd68f;}

.purpose-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(234,176,64,.35);
  border-radius:var(--radius-md);
  padding:18px 20px;
  color:#c9d2e2;
}
.purpose-box__label{
  display:block;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.purpose-box p{font-size:13px;line-height:1.6;}

/* ---------- KPI cards ----------
   Sit on the white page; only the card's top edge (icon+title row)
   overlaps up into the navy header via a negative margin "tip". */
.kpi-band{
  position:relative;
  z-index:3;
  margin-top:-58px;
  padding-bottom:8px;
}
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.kpi-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:20px 20px 22px;
  min-height:196px;
  display:flex;
  flex-direction:column;
}
.kpi-card__head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.kpi-card__head .kpi-card__icon{color:var(--ink);}
.kpi-card__head h3{font-size:13.5px;font-weight:700;color:var(--ink);}
.kpi-card__title{font-size:14.5px;font-weight:700;margin-bottom:12px;}

.kpi-card__facts{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;}
.kpi-card__facts--top{margin-top:2px;}
.kpi-card__facts div{display:flex;flex-direction:column;gap:2px;}
.kpi-card__facts dt{font-size:11px;color:var(--gray-500);}
.kpi-card__facts dd{font-size:13px;font-weight:600;color:var(--ink);margin:0;}

/* Ring + text stacked vertically (not side-by-side) so the value text gets the
   card's full width instead of being squeezed into the space left after a
   fixed 64px ring - long values like "GK - DF - MF - FW" wrapped into 3
   cramped lines under the old horizontal layout. */
.kpi-card__metric{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:10px;border-top:1px solid var(--gray-200);margin-top:auto;width:100%;}
.kpi-card__trend{display:flex;flex-direction:column;gap:4px;width:100%;}
.kpi-card__trend-title{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:16px;color:var(--ink);font-weight:600;line-height:1.3;}
.kpi-card__trend-sub{font-size:11px;color:var(--gray-500);}
.up{color:var(--green);font-weight:700;}

.ring{position:relative;width:64px;height:64px;flex-shrink:0;}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring__track{fill:none;stroke:var(--gray-200);stroke-width:8;}
.ring__value{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:213.6;stroke-dashoffset:213.6;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);}
.ring[data-color="orange"] .ring__value{stroke:var(--orange-ring);}
.ring[data-color="blue"] .ring__value{stroke:var(--blue-ring);}
.ring[data-color="green"] .ring__value{stroke:var(--green);}
.ring[data-color="purple"] .ring__value{stroke:var(--purple);}
.ring__label{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:600;color:var(--ink);
}

.spark{width:100%;height:46px;margin-top:14px;}
.spark svg{width:100%;height:100%;display:block;}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding-block:56px;}
.section--tint{background:var(--bg-tint);}
.section__title{font-size:24px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.section__subtitle{font-size:14px;color:var(--gray-500);margin-bottom:28px;}

/* ---------- explain cards ---------- */
.explain-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px;}
.explain-grid--meta{margin-top:0;}
.explain-card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  box-shadow:var(--shadow-card);
}
.explain-card--sm{padding:20px 18px;}
.explain-card__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.explain-card__num{font-size:13px;font-weight:700;color:var(--gray-500);}
.explain-card__num--light{color:rgba(255,255,255,.5);}
.explain-card h3{font-size:15.5px;font-weight:700;margin-bottom:8px;color:var(--ink);}
.explain-card > svg{margin-bottom:16px;}
.explain-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;}
.explain-card--dark{background:linear-gradient(160deg,var(--navy-900),var(--navy-950));border-color:var(--navy-900);}
.explain-card--dark p{color:#b7c1d6;}
.text-gold{color:var(--gold) !important;}

/* ---------- service coverage ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.service-card{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-card);
}
.service-card__icon{
  width:44px;height:44px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.service-card__icon svg{width:22px;height:22px;}
.service-card__icon--orange{background:var(--gold-tint);color:#c9791b;}
.service-card__icon--blue{background:var(--blue-tint);color:var(--blue);}
.service-card__icon--green{background:var(--green-tint);color:var(--green);}
.service-card h3{font-size:16px;font-weight:700;margin-bottom:6px;}
.service-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;min-height:40px;}

.stat-row{display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--gray-200);}
.stat-row div{display:flex;flex-direction:column;gap:3px;}
.stat-row dt{font-size:10.5px;color:var(--gray-500);white-space:nowrap;}
.stat-row dd{font-size:15px;font-weight:800;color:var(--ink);margin:0;}

.spark--area{height:56px;margin-top:14px;}
.spark-tooltip{
  position:absolute;
  transform:translate(-50%,-100%);
  background:var(--navy-950);
  color:var(--white);
  font-size:11px;
  font-weight:700;
  padding:3px 7px;
  border-radius:5px;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}

/* ---------- quality bar ---------- */
.quality-bar{
  margin-top:22px;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
}
.quality-bar__main{display:flex;align-items:center;gap:14px;}
.quality-bar__main h3{font-size:14.5px;font-weight:700;margin-bottom:4px;}
.quality-bar__main p{font-size:12.5px;color:var(--gray-500);max-width:46ch;}
.quality-bar__stats{display:flex;gap:32px;}
.quality-bar__stats div{display:flex;flex-direction:column;gap:2px;}
.quality-bar__stats dt{font-size:11px;color:var(--gray-500);}
.quality-bar__stats dd{font-size:15px;font-weight:800;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(135deg,var(--navy-950),var(--navy-800));
  border-radius:var(--radius-lg);
  padding:26px 30px;
  display:flex;align-items:center;gap:22px;
  flex-wrap:wrap;
  margin-bottom:56px;
}
.cta-banner__icon{
  width:52px;height:52px;flex-shrink:0;
  border-radius:50%;
  border:1.5px solid var(--gold);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.cta-banner__text{flex:1;min-width:240px;}
.cta-banner__text h3{color:var(--white);font-size:17px;font-weight:700;margin-bottom:4px;}
.cta-banner__text p{color:#b7c1d6;font-size:13px;}
.cta-banner__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer,.agency-final-cta{background:var(--navy-950);color:#a9b6cc;position:relative;overflow:hidden;}
.site-footer > .container,.agency-final-cta > .container{position:relative;z-index:1;}
.footer__top{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:44px 32px;
  position:relative;
}
.footer__eyebrow{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:10px;}
.footer__next h3{color:var(--white);font-size:22px;font-weight:800;margin-bottom:10px;}
.footer__next p{font-size:13px;max-width:56ch;line-height:1.6;margin-bottom:16px;}
.footer__code{
  display:inline-block;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#dbe2ee;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11.5px;
  padding:7px 12px;
  border-radius:6px;
  margin-bottom:16px;
}
.footer__crest{width:110px;height:120px;color:var(--gold);opacity:.9;flex-shrink:0;}
.footer__crest svg{width:100%;height:100%;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .explain-grid{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .hero__grid{grid-template-columns:1fr;}
  .footer__top{flex-direction:column;align-items:flex-start;}
}

@media (max-width:720px){
  .mainnav__links{display:none;}
  .topbar__row{flex-direction:column;align-items:flex-start;gap:6px;}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;transform:none;padding-bottom:0;}
  .kpi-card{padding:16px 14px 18px;min-height:0;}
  .hero{padding-bottom:40px;}
  .explain-grid{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:1fr;}
  .hero__title{font-size:38px;}
  .quality-bar{flex-direction:column;align-items:flex-start;}
  .footer__grid{grid-template-columns:repeat(2,1fr);}
  .cta-banner{flex-direction:column;align-items:flex-start;}
}


/* Agency Overview — page-specific overrides only.
   Shared design system: ../_shared/ronin-shell.css
   This page currently uses only shared components; nothing page-specific yet. */