/* =========================================================
   Shring Technologies — premium site stylesheet
   Brand blue #3183d7 · navy #0a1729
   ========================================================= */

:root{
  --blue:#3183d7;
  --blue-600:#2670c0;
  --blue-400:#5ba3f5;
  --navy:#0a1729;
  --navy-2:#0e2038;
  --ink:#111a27;
  --slate:#4a5a6e;
  --muted:#7a889b;
  --line:#e6ebf2;
  --field-line:#808fa3;   /* 3.3:1 on white, so a control edge is visible */
  --field-bg:#f2f6fb;
  --bg:#ffffff;
  --bg-soft:#f5f8fc;
  --white:#ffffff;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 2px 10px rgba(16,32,58,.06);
  --shadow:0 18px 40px -18px rgba(16,42,82,.35);
  --shadow-lg:0 30px 70px -25px rgba(11,31,66,.5);
  --container:1180px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --grad:linear-gradient(135deg,#3183d7 0%,#5ba3f5 100%);
  --grad-navy:linear-gradient(160deg,#0a1729 0%,#0e2038 55%,#122a4a 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:var(--bg);line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* NOTE: width/height attributes are presentational hints, so an <img> that
   carries them has a DEFINITE height. Any rule that sizes an image by width
   (or relies on aspect-ratio/object-fit) must also set height:auto, or the
   attribute silently wins. Rules that set an explicit height are unaffected. */
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none;transition:color .2s}
a:hover{color:var(--blue-600)}
h1,h2,h3,h4{line-height:1.15;color:var(--ink);margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800}
h3{font-size:1.28rem;font-weight:700}
p{margin:0 0 1.1em}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.eyebrow.light{color:var(--blue-400)}
.eyebrow.eyebrow-lg{font-size:1.05rem;letter-spacing:.10em;margin-bottom:18px}
.lead{font-size:1.18rem;color:var(--slate)}
.center{text-align:center}
.text-right{text-align:right}
@media(max-width:760px){.text-right{text-align:left}}
.mw-720{max-width:720px;margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px -10px rgba(49,131,215,.7)}
.btn-primary:hover{color:#fff;box-shadow:0 18px 34px -10px rgba(49,131,215,.85)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{color:#fff;background:#122a4a}
.btn-lg{padding:17px 34px;font-size:1.06rem}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.35rem;
  color:var(--navy);letter-spacing:-.02em}
.brand:hover{color:var(--navy)}
.brand .logo-mark{width:38px;height:38px;flex:0 0 auto}
.brand-logo{height:46px;width:auto;display:block}
.brand small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.22em;
  color:var(--muted);text-transform:uppercase;margin-top:-2px}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink);font-weight:600;font-size:.97rem;padding:10px 14px;border-radius:10px}
.nav-links a:hover{color:var(--blue);background:var(--bg-soft)}
.nav-links a.active{color:var(--blue)}
/* dropdown */
.nav-links li.has-dd{position:relative}
.nav-links .dd-toggle{display:inline-flex;align-items:center;gap:5px}
.nav-links .dd-toggle .caret{display:none}
.nav-links li.has-dd:hover .dd-toggle .caret{transform:rotate(180deg)}
.dd-menu{list-style:none;margin:0;position:absolute;top:100%;left:0;min-width:262px;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s;z-index:60}
.nav-links li.has-dd:hover .dd-menu,.nav-links li.has-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu li{margin:0}
.dd-menu a{display:block;padding:11px 14px;border-radius:10px;font-size:.95rem;font-weight:600;
  color:var(--ink);white-space:nowrap}
.dd-menu a:hover{background:var(--bg-soft);color:var(--blue)}
.dd-menu .dd-all{color:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{font-weight:800;color:var(--navy);white-space:nowrap}
.nav-phone span{color:var(--blue)}
.nav-social{display:flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid var(--line)}
.nav-social a{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:var(--slate);background:var(--bg-soft);transition:background .2s,color .2s}
.nav-social a:hover{background:var(--blue);color:#fff}
.nav-social svg{width:16px;height:16px}
@media(max-width:1080px){.nav-social{display:none}}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--navy);border-radius:3px;margin:5px 0;transition:.3s}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--grad-navy);color:#fff;
  padding:96px 0 110px}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0}
.hero::before{width:520px;height:520px;background:radial-gradient(circle,#3183d7,transparent 70%);
  top:-140px;right:-120px;animation:float 14s ease-in-out infinite}
.hero::after{width:420px;height:420px;background:radial-gradient(circle,#1b3f6e,transparent 70%);
  bottom:-160px;left:-120px;animation:float 18s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-24px)}}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{color:#fff}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:#c7d6ea;max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-trust{margin-top:34px;display:flex;flex-wrap:wrap;gap:22px;color:#9fb4d0;font-size:.9rem}
.hero-trust b{color:#fff}
.hero-right{display:flex;flex-direction:column;gap:16px}
.hero-images{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hero-images img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 30px -16px rgba(0,0,0,.55)}
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:30px;backdrop-filter:blur(6px);box-shadow:var(--shadow-lg)}
.hero-card .hero-card-title,
.hero-card h3{color:#fff;font-size:1.1rem}
.hero-stat{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.hero-stat:last-child{border-bottom:0}
.hero-stat .num{font-size:2rem;font-weight:800;color:var(--blue-400);min-width:96px}
.hero-stat .num.num-text{font-size:1.6rem;letter-spacing:.5px;white-space:nowrap}
.hero-stat .lbl{color:#c7d6ea;font-size:.95rem}

/* ---------- sections ---------- */
section{padding:64px 0}
.section-head{max-width:720px;margin:0 auto 52px;text-align:center}
.section-head p{color:var(--slate);font-size:1.1rem;margin-bottom:0}
/* a heading that should stay on one line: the 720px default wraps it, so give
   it room and stop it breaking once there is enough width to hold it */
.section-head.section-head-wide{max-width:960px}
@media(min-width:900px){.section-head-wide h2{white-space:nowrap}}
.bg-soft{background:var(--bg-soft)}
.bg-navy{background:var(--grad-navy);color:#fff}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy .section-head p{color:#c7d6ea}

/* ---------- logos strip ---------- */
.logos{padding:38px 0;border-bottom:1px solid var(--line);background:#fff}
.logos p{text-align:center;color:var(--muted);font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.logos-row{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 44px;align-items:center}
.logos-row span{color:#93a2b6;font-weight:800;font-size:1.15rem;letter-spacing:.02em;opacity:.85}
.logos-row img{height:34px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s}
.logos-row img:hover{filter:none;opacity:1}
@media(max-width:760px){.logos-row img{height:26px;max-width:110px}}
/* franchise brand marks: square logos, so taller than the wordmark strip */
.logos-brands{background:#fff;padding:44px 0}
.logos-brands > .container > p{color:var(--blue)}
.logos-brands .logos-row{gap:26px 24px}
.logos-brands .logos-row img{height:80px;width:200px;max-width:200px;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s}
.logos-brands .logos-row img:hover{filter:none;opacity:1}
@media(max-width:1100px){.logos-brands .logos-row img{height:64px;width:160px;max-width:160px}}
@media(max-width:760px){.logos-brands .logos-row{gap:18px 20px}
  .logos-brands .logos-row img{height:56px;width:140px;max-width:140px}}

/* footer: column headings are h2 for document outline, styled as before */
.site-footer .footer-head{font-family:inherit;font-size:.95rem;font-weight:700;color:#fff;
  margin:0 0 14px;letter-spacing:.01em}
.footer-legal-nav{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.footer-legal-nav a{color:#8fa3bd;font-size:.78rem;text-decoration:none}
.footer-legal-nav a:hover{color:#fff;text-decoration:underline}

/* headings that exist for document structure, not for the eye */
.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}

/* scrolling logo marquee */
.logo-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;align-items:center;gap:60px;width:max-content;animation:logoscroll 40s linear infinite}
.logo-track img{height:38px;width:auto;flex:0 0 auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
.logo-track img:hover{filter:none;opacity:1}
.logo-marquee:hover .logo-track{animation-play-state:paused}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){.logo-track{gap:40px;animation-duration:28s}.logo-track img{height:30px}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none}}

/* ---------- resource library ---------- */
.res-toolbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:26px}
.res-search{position:relative;flex:1;min-width:260px}
.res-search input{width:100%;padding:14px 16px 14px 46px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:1rem;background:#fbfdff;transition:.2s}
.res-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(49,131,215,.14);background:#fff}
.res-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.res-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;color:var(--slate);padding:9px 16px;border-radius:999px;
  font-weight:600;font-size:.9rem;cursor:pointer;transition:.2s;font-family:inherit}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;text-decoration:none}
.article:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe0f4}
.article .thumb{height:8px;background:var(--grad)}
.article .body{padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.article .tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);background:rgba(49,131,215,.1);padding:4px 11px;border-radius:999px}
.article h3{font-size:1.12rem;margin:0;color:var(--ink)}
.article p{color:var(--slate);font-size:.94rem;margin:0}
.article .meta{margin-top:auto;color:var(--muted);font-size:.82rem;padding-top:6px}
.res-empty{display:none;text-align:center;color:var(--muted);padding:48px 0;font-size:1.05rem}
.res-count{color:var(--muted);font-size:.9rem;margin-bottom:18px}
/* article cards + article pages */
.article .thumb-img{height:170px;background:var(--navy-2) center/cover no-repeat;border-bottom:1px solid var(--line)}
.article-wrap{max-width:820px;margin:0 auto}
.article-body{font-size:1.08rem;line-height:1.8;color:var(--slate)}
.article-body h2{font-size:1.5rem;color:var(--ink);margin:1.6em 0 .5em}
.article-body h3{font-size:1.22rem;color:var(--ink);margin:1.4em 0 .4em}
.article-body p{margin:0 0 1.1em}
.article-body ul,.article-body ol{margin:0 0 1.2em;padding-left:1.3em}
.article-body li{margin:.45em 0}
.article-body a{color:var(--blue)}
.article-body blockquote{margin:1.2em 0;padding:12px 20px;border-left:4px solid var(--blue);background:var(--bg-soft);border-radius:0 10px 10px 0;color:var(--ink)}
.article-body img{max-width:100%;height:auto;border-radius:12px;margin:1.2em 0}
.post-cat{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-400);margin-bottom:8px}
.post-meta{color:#9fb4d0;font-size:.95rem;margin:0}
.post-cta{margin-top:34px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);color:var(--slate);font-size:1rem}
.post-cta strong{color:var(--ink)}

@media(max-width:940px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.res-grid{grid-template-columns:1fr}}

/* ---------- cards / grid ---------- */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#cfe0f4}
.card .ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(49,131,215,.18),rgba(91,163,245,.14));
  color:var(--blue);margin-bottom:18px;
  /* Hairline ring gives the tile an edge without a heavy border. */
  box-shadow:inset 0 0 0 1px rgba(49,131,215,.16),0 4px 12px -6px rgba(16,42,82,.28);
  transition:background .22s ease,color .22s ease,box-shadow .22s ease}
.card .ico svg{width:28px;height:28px}
/* On hover the tile fills with the brand gradient, matching .contact-info .ico. */
.card:hover .ico{background:var(--grad);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 8px 18px -8px rgba(16,42,82,.5)}
@media(prefers-reduced-motion:reduce){.card .ico{transition:none}}
.card h3{margin-bottom:.4em}
/* One-word headings, so they can run much larger than a normal card title.
   The ceiling is set by the tightest case: three columns just above the 940px
   breakpoint leaves a text column of about 148px, where "Resilient" stops
   fitting on one line past roughly 33px. The vw term keeps it under that,
   and the cap takes over on wide screens. Scoped to this grid, since card
   headings elsewhere are full sentences. */
.values-grid .card h3{font-size:clamp(1.4rem,3vw,2.25rem);line-height:1.1;
  margin-bottom:.35em}
.card p{color:var(--slate);font-size:.98rem;margin-bottom:.7em}
.card .more{font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;gap:6px}
.card .more svg{width:16px;height:16px;transition:transform .2s}
.card:hover .more svg{transform:translateX(4px)}

/* feature list */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 34px}
.feature{display:flex;gap:14px}
.feature .dot{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--grad);color:#fff}
.feature .dot svg{width:20px;height:20px}
.feature h3,
.feature h4{margin:2px 0 4px;font-size:1.03rem}
.feature p{margin:0;color:var(--slate);font-size:.93rem}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{color:var(--slate);font-weight:600;font-size:.95rem}
.bg-navy .stat .lbl{color:#c7d6ea}

/* testimonials */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  box-shadow:var(--shadow-sm)}
.quote .stars{color:#f5b400;letter-spacing:2px;margin-bottom:12px;font-size:1.05rem}
.quote p{font-size:1.05rem;color:var(--ink);font-style:italic}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.quote .avatar{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-weight:800}
.quote .who b{display:block}
.quote .who span{color:var(--muted);font-size:.9rem}

/* FAQ accordion */
.faq{max-width:820px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:14px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 24px;
  font-size:1.08rem;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;
  align-items:center;gap:16px}
.faq-q .pm{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--bg-soft);
  display:grid;place-items:center;color:var(--blue);font-size:1.3rem;transition:.25s}
.faq-item.open .faq-q .pm{background:var(--blue);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 22px;margin:0;color:var(--slate)}

/* CTA band */
.cta-band{background:var(--grad-navy);color:#fff;border-radius:var(--radius-lg);
  padding:56px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta-band::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(49,131,215,.5),transparent 70%);top:-160px;right:-100px;filter:blur(40px)}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:#c7d6ea;position:relative;max-width:560px;margin:0 auto 26px}
.cta-actions{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-phone{font-size:1.5rem;font-weight:800;color:#fff}
.cta-phone span{color:var(--blue-400)}

/* page hero (interior) */
.page-hero{background:var(--grad-navy);color:#fff;padding:76px 0 64px;text-align:center;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(49,131,215,.4),transparent 70%);top:-180px;left:50%;
  transform:translateX(-50%);filter:blur(50px)}
.page-hero .container{position:relative;z-index:1}
.page-hero.has-photo{background-size:cover;background-position:center}
.page-hero.has-photo::after{display:none}
.page-hero h1{color:#fff}
.page-hero p{color:#c7d6ea;max-width:640px;margin:0 auto}
.crumbs{font-size:.9rem;color:#9fb4d0;margin-bottom:16px}
.crumbs a{color:#c7d6ea}

/* split content */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* Opt-in top alignment, for splits whose heading sits above rather than inside
   the left column. Left as centre by default: most splits pair a tall media
   panel with shorter copy, where top-aligning strands the text. */
.split.split-top{align-items:start}
/* A heading that spans the container has room to stay on one line. The gap
   moves onto the block, since the h2's own bottom margin is what used to
   separate it from the copy inside the column. */
.story-head{max-width:none;margin-bottom:34px}
.story-head h2{margin-bottom:0}
/* This heading is 53 characters - at the full 2.6rem it needs about 1146px
   against 1132px of container, so it would still take two lines. Easing the
   cap to 2.3rem lets it sit on one. */
.story-head-long h2{font-size:clamp(1.7rem,2.9vw,2.3rem)}
/* 62 characters: needs about 1341px at the full size and 1186px even at
   2.3rem, against 1132px of container. 2.1rem brings it to roughly 1083px. */
.story-head-xlong h2{font-size:clamp(1.55rem,2.65vw,2.1rem)}
.split.reverse .split-media{order:2}
.split-media{background:var(--grad-navy);border-radius:var(--radius-lg);min-height:380px;
  position:relative;overflow:hidden;box-shadow:var(--shadow);display:grid;place-items:center;color:#fff}
.split-media .mark{width:120px;height:120px;opacity:.9}
.split-media::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(91,163,245,.35),transparent 60%)}
/* Fill the panel edge to edge. The panel is ~1.40 and the photo 4:3, so this
   trims roughly nine pixels top and bottom rather than leaving letterbox
   strips down the sides. */
.split-media.has-photo{background-size:cover;background-position:center;
  background-repeat:no-repeat}
.split-media.has-photo::before{display:none}
/* ---- Compact feature tiles: icon above a short label ---- */
.tile-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 14px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe0f4}
.tile .ico{width:48px;height:48px;margin:0 auto 12px;border-radius:12px;
  display:grid;place-items:center;color:var(--blue);
  background:linear-gradient(135deg,rgba(49,131,215,.18),rgba(91,163,245,.14));
  box-shadow:inset 0 0 0 1px rgba(49,131,215,.16)}
.tile .ico svg{width:24px;height:24px}
.tile span{display:block;font-weight:700;font-size:.92rem;color:var(--ink);line-height:1.3}
@media(max-width:1080px){.tile-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.tile-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- Pricing plans ---- */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 28px;box-shadow:var(--shadow-sm);text-align:center;
  display:flex;flex-direction:column;height:100%}
.plan:hover{box-shadow:var(--shadow);border-color:#cfe0f4}
.plan-name{font-size:1.35rem;font-weight:800;color:var(--ink);margin:0 0 18px}
.plan ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.plan ul li{color:var(--slate);font-size:.98rem;padding:7px 0;
  border-bottom:1px solid var(--line)}
.plan ul li:last-child{border-bottom:0}
.plan-note{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.plan-price{font-size:2.6rem;font-weight:800;color:var(--blue);line-height:1;
  margin-bottom:22px}
.plan-price span{font-size:1rem;font-weight:600;color:var(--muted)}
@media(max-width:940px){.plan-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* Inline diagram: scales with its column and matches the panel treatment. */
.compliance-wheel{display:block;width:100%;height:auto;margin-top:26px;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}

.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding:8px 0 8px 34px;color:var(--slate)}
.checklist li::before{content:"";position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;
  background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat}

/* industries list */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ind{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:.2s;box-shadow:var(--shadow-sm)}
.ind:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe0f4}
.ind .ico{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(49,131,215,.14),rgba(91,163,245,.14));
  color:var(--blue);display:grid;place-items:center;margin-bottom:14px}
.ind .ico svg{width:26px;height:26px}
.ind h3{font-size:1.1rem;margin-bottom:.3em}
.ind p{color:var(--slate);font-size:.94rem;margin:0}
.ind .ind-more{display:inline-block;margin-top:14px;font-weight:700;font-size:.92rem;color:var(--blue)}
.ind:hover .ind-more{color:var(--blue-600)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.contact-info .row{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-info .row:last-child{border-bottom:0}
.contact-info .ico{width:46px;height:46px;border-radius:12px;background:var(--grad);color:#fff;
  display:grid;place-items:center;flex:0 0 auto}
.contact-info .ico svg{width:22px;height:22px}
.contact-info b{display:block;font-size:1.05rem}
.contact-info a,.contact-info span{color:var(--slate)}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--field-line);
  border-radius:11px;font:inherit;font-size:.97rem;background:var(--field-bg);transition:.2s;color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:#8593a6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(49,131,215,.14);background:#fff}
.field textarea{min-height:120px;resize:vertical}
.form-note{font-size:.85rem;color:var(--muted);margin-top:8px}

/* footer */
.site-footer{background:var(--navy);color:#c7d6ea;padding:64px 0 28px;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.site-footer h4{color:#fff;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:#a8bcd6}
.site-footer a:hover{color:#fff}
.footer-brand .brand{color:#fff;margin-bottom:14px}
.footer-logo{height:46px;width:auto;display:block;margin-bottom:4px}
.footer-brand .brand small{color:#7f93ad}
.footer-brand p{color:#9fb4d0;max-width:300px;font-size:.93rem}
.footer-social{display:flex;gap:10px;margin-top:16px}
.footer-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#c7d6ea}
.footer-social a:hover{background:var(--blue);color:#fff}
.footer-social svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.86rem;color:#7f93ad}
.footer-bottom a{color:#a8bcd6}
.footer-legal{margin:12px 0 0;font-size:.68rem;line-height:1.5;color:#5f7391;text-align:center}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .grid-3,.grid-4,.features,.stats,.ind-grid{grid-template-columns:repeat(2,1fr)}
  .quote-grid,.split,.contact-grid,.form-row{grid-template-columns:1fr}
  .split.reverse .split-media{order:0}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav-toggle{display:block}
  .brand-logo{height:38px}
  .nav-links{position:fixed;inset:76px 0 auto 0;flex-direction:column;background:#fff;
    padding:18px 24px 26px;gap:4px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-140%);transition:transform .3s ease;align-items:stretch}
  .nav-links.open{transform:none}
  .nav-links a{padding:14px 12px;border-radius:10px}
  .nav-phone{display:none}
  section{padding:64px 0}
  .cta-band{padding:40px 24px}
  .grid-2,.grid-3,.grid-4,.features,.stats,.ind-grid,.footer-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  /* dropdown becomes inline expanded list on mobile */
  .nav-links li.has-dd{width:100%}
  .nav-links .dd-toggle .caret{display:none}
  .dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;padding:0 0 4px 12px;min-width:0}
  .dd-menu a{padding:11px 12px;font-weight:500;color:var(--slate)}
}

/* ===== Category sidebar nav (Resource Library + articles) ===== */
.rl-layout,.article-layout{display:grid;grid-template-columns:224px 1fr;gap:44px;align-items:start}
.article-layout{max-width:1060px;margin:0 auto}
.rl-sidebar,.cat-side{position:sticky;top:96px}
.cat-nav-title,.cat-side-title{font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-400);margin:0 0 14px;padding-left:14px}
.cat-nav{display:flex;flex-direction:column;gap:2px}
.cat-link{display:block;padding:10px 14px;border-radius:9px;color:var(--slate);font-weight:600;font-size:.98rem;border-left:3px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.cat-link:hover{background:var(--bg-soft);color:var(--ink)}
.cat-link.active{background:var(--bg-soft);color:var(--blue);border-left-color:var(--blue)}
@media(max-width:820px){
  .rl-layout,.article-layout{grid-template-columns:1fr;gap:22px}
  .rl-sidebar,.cat-side{position:static}
  .cat-nav{flex-direction:row;flex-wrap:wrap;gap:8px}
  .cat-nav-title,.cat-side-title{padding-left:0;margin-bottom:10px}
  .cat-link{border-left:none;border:1px solid var(--line);padding:7px 14px;border-radius:999px;font-size:.9rem}
  .cat-link.active{border-color:var(--blue);background:var(--bg-soft)}
}

/* ===== What We Do — mega menu (Shring Technologies) ===== */
.nav-links li.has-dd.mm-item { position: static; }
.mm-menu{
  position: fixed; top: 100%; left: 50%; transform: translateX(-50%);
  width: min(1000px, 95vw);
  background:#fff; border:1px solid var(--line); border-radius:0 0 16px 16px;
  box-shadow: var(--shadow);
  padding:0; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease; z-index:60; overflow:hidden;
}
.has-dd.mm-item.mm-open .mm-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mm-inner{ display:grid; grid-template-columns:250px 1fr; min-height:300px; }

/* left tab column */
.mm-tabs{ list-style:none; margin:0; padding:16px 0; background:var(--bg-soft); border-right:1px solid var(--line); }
.mm-tabs li{ margin:0 0 2px; }
.mm-tab{ display:block; width:100%; text-align:left; border:0; background:transparent; cursor:pointer;
  font:600 .95rem/1.25 Inter, sans-serif; color:var(--ink); text-decoration:none;
  padding:11px 30px; transition:background .15s, color .15s; }
.mm-menu a.mm-tab{ box-sizing:border-box; padding:11px 30px; border-radius:0;
  background:transparent; color:var(--ink); text-decoration:none; }
.mm-menu a.mm-tab:hover, .mm-menu a.mm-tab:focus{ background:#eaf1fb; color:var(--blue); }
.mm-menu a.mm-tab.active, .mm-menu a.mm-tab.active:hover,
.mm-menu a.mm-tab.active:focus{ background:var(--blue); color:#fff; }
.mm-tab:hover{ background:#eaf1fb; color:var(--blue); }
.mm-tab.active{ background:var(--blue); color:#fff; }

/* right content area */
.mm-panels{ padding:22px 24px 22px 12px; position:relative; }
.mm-panel{ display:none; }
.mm-panel.active{ display:grid; grid-template-columns:1fr 1fr; gap:22px 30px; animation:mmfade .2s ease; }
.mm-panel.mm-single{ grid-template-columns:1fr; }
@keyframes mmfade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.mm-col{ display:flex; flex-direction:column; gap:18px; }
.mm-entry h4{ margin:0 0 6px; font-size:1.02rem; color:var(--ink); font-weight:700; }
.mm-entry h4 a{ color:inherit; text-decoration:none; }
.mm-entry h4 a:hover{ color:var(--blue); }
.mm-entry .mm-sub{ margin:0 0 6px; font-style:italic; font-weight:600; color:var(--ink); font-size:.9rem; }
.mm-entry p{ margin:0; color:var(--muted); font-size:.87rem; line-height:1.5; }
.mm-entry img.mm-photo{ display:block; width:100%; height:auto; border-radius:14px; margin-top:12px; }
/* A banner closing a column drops to the foot of the panel, so banners in
   adjacent columns line up regardless of how much text sits above them. */
.mm-col > .mm-entry-banner:last-child{ margin-top:auto; }

a.mm-banner{ display:block; }
a.mm-banner img{ display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 8px 20px -12px rgba(16,42,82,.5); transition:transform .15s, box-shadow .15s; }
a.mm-banner:hover img{ transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(16,42,82,.55); }
.mm-entry .mm-more{ display:inline-block; margin-top:8px; font-weight:600; font-size:.85rem; color:var(--blue); text-decoration:none; }
.mm-entry .mm-more:hover{ text-decoration:underline; }
.mm-soon{ color:var(--muted); font-size:.85rem; }

/* mobile / small screens */
@media (max-width: 980px){
  .mm-menu{ position:static; transform:none; width:auto; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:0; border-radius:0; margin:4px 0; }
  .has-dd.mm-item .mm-menu{ display:none; }
  .has-dd.mm-item.mm-open .mm-menu{ display:block; transform:none; }
  .mm-inner{ grid-template-columns:1fr; min-height:0; }
  .mm-tabs{ background:transparent; border-right:0; padding:6px 0; display:flex; flex-wrap:wrap; gap:6px; }
  .mm-tab{ padding:8px 12px; font-size:.9rem; border-radius:10px; }
  .mm-menu a.mm-tab{ padding:8px 12px; border-radius:10px; }
  .mm-panels{ padding:10px 2px; }
  .mm-panel.active{ grid-template-columns:1fr; }
}

/* mega-menu link reset: cancel inherited .nav-links a padding so headings left-justify */
.mm-menu a{ padding:0; background:transparent; border-radius:0; }
.mm-menu a:hover{ background:transparent; }
.mm-menu a.mm-banner{ padding:0; }

/* Who We Serve — WWD-style tab/panel additions */
.ws-mm .mm-inner{ grid-template-columns:300px 1fr; }
.mm-tab.ws-tab{ display:flex; align-items:center; gap:10px; }
.mm-tab.ws-tab .ws-tab-lbl{ white-space:nowrap; }
.mm-tab.ws-tab .ws-tab-ico{ flex:0 0 auto; color:inherit; display:inline-flex; }
.mm-tab.ws-tab .ws-tab-ico svg{ width:20px; height:20px; display:block; }
.ws-mm .mm-panels{ padding:26px 30px; }
.ws-mm-head{ display:flex; align-items:center; gap:14px; margin:0 0 14px; }
.ws-mm-head .ws-mm-hico{ flex:0 0 auto; color:var(--blue); display:inline-flex; }
.ws-mm-head .ws-mm-hico svg{ width:34px; height:34px; display:block; }
.ws-mm-head h4{ margin:0; font-size:1.35rem; font-weight:800; color:var(--ink); }
.ws-mm-head h4 a{ color:inherit; text-decoration:none; }
.ws-mm-head h4 a:hover{ color:var(--blue); }
.ws-mm-entry p{ max-width:540px; font-size:.92rem; line-height:1.6; color:var(--muted); }
/* Industry panels put a square image to the right of the copy. */
.mm-panel.ws-mm-2col{ display:none; grid-template-columns:1fr 200px; gap:22px 30px; align-items:start; }
.mm-panel.ws-mm-2col.active{ display:grid; }
/* About panels: copy beside a square image, matching Who We Serve. */
.about-mm .mm-panel.active{ grid-template-columns:1fr 200px; gap:22px 30px; align-items:start; }
.about-mm .mm-panel.mm-single.active{ grid-template-columns:1fr 200px; }
.about-mm-photo{ width:200px; height:200px; object-fit:cover; border-radius:14px;
  box-shadow:var(--shadow-sm); display:block; margin-top:0; }
@media(max-width:980px){
  .about-mm .mm-panel.active,
  .about-mm .mm-panel.mm-single.active{ grid-template-columns:1fr; }
  .about-mm-photo{ width:100%; height:180px; }
}

.ws-mm-photo{ width:200px; height:200px; object-fit:cover; border-radius:14px;
  box-shadow:var(--shadow-sm); display:block; }
@media(max-width:980px){
  .mm-panel.ws-mm-2col{ grid-template-columns:1fr; }
  .ws-mm-photo{ width:100%; height:180px; }
}
.mm-menu a.ws-mm-btn{ display:inline-flex; margin-top:18px; padding:13px 26px; background:var(--grad); color:#fff; border-radius:999px; }
.mm-menu a.ws-mm-btn:hover{ background:var(--grad); color:#fff; }



/* ===== Top utility bar ===== */
.top-bar{ background:#953735; color:#e6eef8; font-size:11px; line-height:1; }
.top-bar .tb-inner{ max-width:var(--container); margin:0 auto; padding:0 24px; height:22px; display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.top-bar a, .top-bar .tb-item{ color:#e6eef8; display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-weight:600; white-space:nowrap; letter-spacing:.2px; }
.top-bar a:hover{ color:#fff; }
.top-bar svg{ width:12px; height:12px; fill:currentColor; flex:0 0 auto; }
@media (max-width:600px){
  .top-bar .tb-inner{ justify-content:center; gap:14px; padding:0 12px; }
}


/* footer policy links */
.footer-policy-links{ text-align:center; margin:10px 0 0; font-size:.85rem; }
.footer-policy-links a{ color:var(--muted); text-decoration:none; }
.footer-policy-links a:hover{ color:#fff; text-decoration:underline; }

.site-footer .footer-legal{ text-align:left; }



/* ===== Who We Serve — mega menu (single panel) ===== */
.nav-links li.has-dd.ws-item{ position: static; }
.ws-menu{
  position: fixed; top: 100%; left: 50%; transform: translateX(-50%);
  width: min(880px, 94vw);
  background:#fff; border:1px solid var(--line); border-radius:0 0 16px 16px; box-shadow: var(--shadow);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease; z-index:60; overflow:hidden;
}
.has-dd.ws-item.ws-open .ws-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.ws-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; padding:26px 30px; }
.ws-entry h4{ margin:0 0 6px; font-size:1.02rem; font-weight:700; color:var(--ink); }
.ws-entry h4 a{ color:inherit; text-decoration:none; }
.ws-entry h4 a:hover{ color:var(--blue); }
.ws-entry p{ margin:0; color:var(--muted); font-size:.87rem; line-height:1.5; }
@media (max-width: 980px){
  .ws-menu{ position:static; transform:none; width:auto; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:0; border-radius:0; margin:4px 0; }
  .has-dd.ws-item .ws-menu{ display:none; }
  .has-dd.ws-item.ws-open .ws-menu{ display:block; transform:none; }
  .ws-grid{ grid-template-columns:1fr; padding:8px 2px; gap:14px; }
}

/* home hero headline — one step smaller */
.hero h1{ font-size:clamp(2rem, 4.4vw, 3.15rem); }

/* Flush-left Who We Serve headings */
.ws-menu .ws-entry h4 a{ padding-left:0; }

/* Who We Serve — industry icons */
.ws-entry{ display:grid; grid-template-columns:26px 1fr; column-gap:12px; align-items:start; }
.ws-entry .ws-ico{ grid-column:1; grid-row:1 / span 2; align-self:start; color:var(--blue); padding-top:1px; }
.ws-entry .ws-ico svg{ width:22px; height:22px; display:block; }
.ws-entry h4{ grid-column:2; grid-row:1; }
.ws-entry p{ grid-column:2; grid-row:2; }

/* Support / Create-a-Case form */
.support-form-wrap{ max-width:720px; margin:0 auto; }
.support-form-wrap .field-row{ display:flex; gap:16px; }
.support-form-wrap .field-row .field{ flex:1; }
.support-form-wrap .opt{ color:var(--muted); font-weight:400; font-size:.85em; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.cf-status{ margin-top:14px; font-size:.95rem; }
.cf-status.ok{ color:#137a3f; font-weight:600; }
.cf-status.err{ color:#b3261e; font-weight:600; }
@media (max-width:600px){ .support-form-wrap .field-row{ flex-direction:column; gap:0; } }

/* Support page - dark, in-theme */
.support-section{ background:var(--navy); padding:48px 0 76px; }
.support-section .support-form-wrap{ background:var(--navy-2); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:30px 30px 34px; box-shadow:var(--shadow-lg); }
.support-section .field label{ color:#e8eef6; }
.support-section .support-form-wrap .opt{ color:#93a4ba; }
.support-section .field input, .support-section .field select, .support-section .field textarea{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#eaf1fb; }
.support-section .field input::placeholder, .support-section .field textarea::placeholder{ color:#8294aa; }
.support-section .field select option{ color:#111a27; }
.support-section .field input:focus, .support-section .field select:focus, .support-section .field textarea:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(49,131,215,.25); }
.support-section .cf-status.ok{ color:#34d399; }
.support-section .cf-status.err{ color:#f87171; }

/* Support dark: single dark card */
.support-section .support-form-wrap{ background:transparent; border:none; box-shadow:none; padding:0; }
.support-section .form{ background:var(--navy-2); border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow-lg); }

/* Support: brighter fields + centered turnstile/submit */
.support-section .field input, .support-section .field select, .support-section .field textarea{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.22); }
.support-section .cf-turnstile{ display:flex; justify-content:center; margin:10px 0; }
.support-section #cf-submit{ display:block; width:fit-content; margin:0 auto; }
.support-section .cf-status{ text-align:center; }

/* Deepened from #4995E8: the light text measured 2.66:1 against it, under
   the 4.5:1 WCAG AA requires at this size. This is 5.93:1. */
.top-bar{ background:#1e5aa0; }

/* ===== Support mega menu ===== */
.sup-item{ position:relative; }
.sup-menu{ position:fixed; left:50%; top:100%; transform:translateX(-50%); width:min(980px,94vw); background:var(--white); border:1px solid var(--line); border-radius:0 0 var(--radius-lg) var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px 34px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:1000; }
.sup-item.sup-open .sup-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.sup-inner{ display:grid; grid-template-columns:1.15fr 1fr; gap:26px 48px; }
.sup-col{ display:flex; flex-direction:column; gap:22px; }
.sup-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.sup-block h4{ margin:0 0 6px; font-size:1.05rem; font-weight:700; color:var(--ink); text-align:left; }
.sup-head h4{ margin:0; }
.sup-ico{ color:var(--blue); display:flex; align-items:center; }
.sup-ico-block{ position:relative; padding-left:40px; }
.sup-ico-block .sup-ico{ position:absolute; left:0; top:1px; }
.sup-ico svg{ width:26px; height:26px; display:block; }
.sup-block p{ margin:0 0 10px; color:var(--muted); font-size:.9rem; line-height:1.5; }
.sup-block a{ color:var(--blue); text-decoration:none; }
.sup-block a:hover{ text-decoration:underline; }
.sup-block h4 a{ color:var(--ink); text-decoration:none; }
.sup-block h4 a:hover{ color:var(--blue); }
.sup-block h4 a.sup-remote{ color:var(--ink); cursor:pointer; }
.sup-block h4 a.sup-remote:hover{ color:var(--blue); text-decoration:none; }
.sup-cats{ display:grid; grid-template-columns:repeat(3,max-content); gap:4px 26px; margin-top:6px; }
.sup-cats a{ font-size:.88rem; font-weight:400; }
.sup-acct{ display:grid; grid-template-columns:repeat(2,max-content); gap:5px 30px; margin-top:4px; }
.sup-acct a{ font-weight:400; font-size:.92rem; }
.sup-menu .sup-cats a, .sup-menu .sup-acct a{ font-weight:400 !important; }
.sup-menu a{ padding:0 !important; }
@media (max-width:980px){
  .sup-menu{ position:static; transform:none; width:auto; opacity:1; visibility:visible; pointer-events:auto; box-shadow:none; border:0; border-radius:0; padding:6px 0 10px; display:none; }
  .sup-item.sup-open .sup-menu{ display:block; transform:none; }
  .sup-inner{ grid-template-columns:1fr; gap:18px; }
}
/* ===== Support remote-support modal ===== */
.sup-modal{ position:fixed; inset:0; background:rgba(6,14,28,.6); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:2000; }
.sup-modal.open{ opacity:1; visibility:visible; }
.sup-modal-card{ position:relative; background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:30px 30px 26px; max-width:460px; width:100%; text-align:center; }
.sup-modal-logo{ width:210px; max-width:70%; height:auto; border-radius:12px; margin:0 auto 14px; display:block; }
.sup-modal-card h3{ margin:0 0 8px; color:var(--ink); font-size:1.2rem; }
.sup-modal-card p{ color:var(--slate); font-size:.92rem; line-height:1.55; margin:0 0 16px; }
.sup-modal-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:nowrap; margin-bottom:14px; }
.sup-modal-btns .btn{ flex:1 1 0; min-width:0; padding-left:12px; padding-right:12px; font-size:.9rem; white-space:nowrap; }
@media(max-width:520px){ .sup-modal-btns{ flex-wrap:wrap; }
  .sup-modal-btns .btn{ flex:1 1 calc(50% - 8px); } }
.sup-modal-note{ margin:0; font-size:.88rem; }
.sup-modal-note a{ color:var(--blue); text-decoration:none; }
.sup-modal-x{ position:absolute; top:8px; right:14px; background:none; border:0; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; }
.sup-modal-x:hover{ color:var(--ink); }
.sup-form-card{ max-width:728px; text-align:left; max-height:88vh; overflow-y:auto; background:#d6dde7; }
.sup-form-card h3{ text-align:left; margin-bottom:2px; }
.sup-form-card .sup-form-intro{ text-align:left; color:var(--slate); margin-bottom:14px; }
.sup-form-card .form{ text-align:left; }
.sup-form-card .field-row{ display:flex; gap:14px; }
.sup-form-card .field-row .field{ flex:1; }
.sup-form-card .opt{ color:var(--muted); font-weight:400; font-size:.85em; }
.sup-form-card .cf-status{ text-align:left; }
.sup-form-card .field input, .sup-form-card .field select, .sup-form-card .field textarea{ background:#fff; }
.sup-ts{ margin:10px 0 4px; display:flex; justify-content:center; }
.sup-form-card .sup-submit-row{ text-align:center; }
.sup-form-card #scf-status{ text-align:center; }
.sup-success-card{ max-width:420px; text-align:center; }
.sup-success-ico{ width:56px; height:56px; border-radius:50%; background:#e8f6ee; color:#137a3f; font-size:30px; line-height:56px; text-align:center; margin:2px auto 12px; }
.sup-success-card h3{ text-align:center; margin:0 0 8px; color:var(--ink); }
.sup-success-card p{ text-align:center; color:var(--slate); margin:0 0 18px; }
.sup-success-close{ min-width:130px; display:block; margin:0 auto; text-align:center; }
@media (max-width:600px){ .sup-form-card .field-row{ flex-direction:column; gap:0; } }
/* ===== Support download page ===== */
.dl-buttons{ display:flex; gap:10px; justify-content:center; flex-wrap:nowrap; margin:18px 0 30px; }
.dl-buttons .btn{ flex:1 1 0; min-width:0; padding-left:14px; padding-right:14px; white-space:nowrap; font-size:.92rem; }
@media(max-width:700px){ .dl-buttons{ flex-wrap:wrap; }
  .dl-buttons .btn{ flex:1 1 calc(50% - 10px); } }
.dl-steps{ text-align:left; max-width:640px; margin:0 auto; line-height:1.8; color:var(--slate); }
.dl-steps li{ margin-bottom:10px; }

/* ===== KB article featured image — floated top-right, reuses existing theme tokens ===== */
.kb-figure{float:right;width:400px;max-width:42%;margin:.35rem 0 1rem 1.6rem;}
.kb-figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-sm);}
@media(max-width:640px){.kb-figure{float:none;width:100%;max-width:none;margin:0 0 1.1rem;}}

/* icon-left card variant — "Why Shring is different" panels on it-support */
.cards-icon-left .card{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start}
.cards-icon-left .card .ico{grid-row:1 / span 2;margin-bottom:0}

/* Orion platform logos: drop white backgrounds against the light section */
.orion-logos.logo-marquee{-webkit-mask-image:none;mask-image:none}
.orion-logos img{mix-blend-mode:multiply}
.orion-logos .logo-track img{filter:none;opacity:1;height:90px;margin-right:20px}
.orion-logos .logo-track{gap:0;background:var(--bg-soft);animation:orion-scroll 28s linear infinite}
@keyframes orion-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){.orion-logos .logo-track img{height:64px}}


/* ---------- payment form ---------- */
.pay-form{max-width:820px;margin:0 auto}
.pay-section{padding-bottom:6px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.pay-section:last-of-type{border-bottom:0;margin-bottom:18px}
.pay-section .eyebrow{margin-bottom:16px}
.field .req{color:var(--blue)}
.field-hint{display:block;font-size:.78rem;color:var(--muted);margin-top:5px}
.field-error{display:none;font-size:.8rem;color:#a8342a;margin-top:5px}
.field.invalid .field-error{display:block}
.field.invalid input,.field.invalid textarea{border-color:#a8342a}

/* the gateway mounts its own iframed inputs here; nothing in this block ever
   holds a card number in our own DOM */
.card-fields{border:1px dashed var(--field-line);border-radius:var(--radius);padding:22px;
  background:var(--bg-soft);min-height:96px;display:flex;align-items:center;justify-content:center}
.card-fields-pending{margin:0;text-align:center;color:var(--slate);font-size:.92rem;line-height:1.6}
.pay-note{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;font-size:.82rem;color:var(--muted)}
.pay-note svg{flex:0 0 auto;margin-top:2px;color:var(--ok,#256b50)}
.pay-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.pay-total{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.form-status{margin-top:16px;font-size:.9rem}
.form-status.error{color:#a8342a}
.form-status.ok{color:#256b50}
.pay-help{margin-top:34px;text-align:center}
.pay-help h2{font-size:1.25rem;margin-bottom:.4em}
.pay-help p{color:var(--slate);max-width:620px;margin:0 auto}
@media(max-width:700px){.pay-form .form-row{grid-template-columns:1fr}}


/* ---------- service alerts ---------- */
.alerts-count{font-weight:600;color:var(--slate);margin-bottom:18px}
.alerts-clear{text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:0 0 46px;box-shadow:var(--shadow-sm)}
/* a smaller, rounded portrait rather than a full-bleed banner: the message is
   the point, the photograph is a grace note */
.alerts-clear-photo{display:block;width:150px;height:150px;margin:38px auto 0;
  border-radius:50%;object-fit:cover;object-position:50% 30%;
  border:4px solid #fff;box-shadow:0 10px 26px -12px rgba(16,42,82,.4)}
/* padding, not margin: a margin here would override the auto margins that
   centre the heading and paragraphs, pushing them to the left */
.alerts-clear > :not(.alerts-clear-photo){padding-left:30px;padding-right:30px}
.alerts-clear-mark{width:52px;height:52px;margin:-26px auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#e4f0ea;color:#256b50;
  border:4px solid #fff;position:relative;z-index:1}
.alerts-clear-mark svg{width:24px;height:24px}
.alerts-clear-mark svg{width:30px;height:30px}
.alerts-clear h2{margin:0 0 .35em;font-size:clamp(1.6rem,3vw,2.1rem)}
/* a centred paragraph breaks badly when a link straddles two lines, so keep
   the measure tight, let the browser balance the rag, and stop the link and
   phone number splitting mid-phrase */
.alerts-clear p{color:var(--slate);max-width:44ch;margin:0 auto;text-wrap:pretty}
.alerts-clear p a{white-space:nowrap}
.alerts-clear-sub{font-size:.94rem;margin-top:.6em!important}

.alert-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.alert-critical{border-left-color:#a8342a}
.alert-degraded{border-left-color:#96631a}
.alert-maintenance{border-left-color:var(--blue)}
.alert-head{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.alert-chip{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px}
.alert-chip-critical{background:#f8e9e7;color:#a8342a}
.alert-chip-degraded{background:#f8f0e0;color:#96631a}
.alert-chip-maintenance{background:#e8f0f9;color:var(--blue)}
.alert-chip-status{background:var(--bg-soft);color:var(--slate)}
.alert-systems{font-size:1.25rem;margin:0 0 14px}
.alert-facts{display:flex;flex-wrap:wrap;gap:10px 40px;margin:0 0 14px;padding:0}
.alert-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2px}
.alert-facts dd{margin:0;font-weight:600;color:var(--ink)}
.alert-desc{color:var(--slate);margin:0}
.alert-updates{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.alert-updates h3{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.alert-update{border-left:2px solid var(--line);padding-left:14px;margin-bottom:14px}
.alert-update time{font-size:.8rem;font-weight:600;color:var(--ink)}
.alert-update p{margin:2px 0 0;color:var(--slate);font-size:.94rem}
.alerts-foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--slate);font-size:.92rem}