/* =========================================================================
   FOREVER SECURE — COLOUR ENRICHMENT LAYER  (v1.3.0)
   Loaded on every page after the per-page stylesheet. Brings the richer,
   more colourful feel of the CSM landing page across the whole site:
   multi-hue accent icons, warmer section gradients, coloured eyebrow rules
   and card accents. Purely additive — overrides existing flat-blue styling.
   ========================================================================= */

:root{
  --fs-teal:#0FA3B1;
  --fs-teal-dark:#0B7E89;
  --fs-amber:#E8A317;
  --fs-amber-dark:#C8871C;
  --fs-green:#1E8E5A;
  --fs-green-dark:#146B43;
  --fs-violet:#6C4BD1;
  --fs-violet-dark:#5333B0;
  --fs-red:#E0231F;
  --fs-blue:#005EB8;
  --fs-blue-dark:#002EAC;
}

/* ---- Eyebrow: NO lead dash (client requested dashes removed sitewide) --- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;}
.section-head.center .eyebrow,.sec-head.center .eyebrow{justify-content:center;}

/* Kill every header-announcer dash across the whole site, including the
   per-page eyebrow lines and the CSM/residential red rule. */
.eyebrow::before,
.eyebrow::after,
.rule-red{display:none !important;content:none !important;}

/* ---- Warmer, tinted section backgrounds instead of flat mist ---------- */
.solutions{background:linear-gradient(165deg,#EEF4FB 0%,#F3F0FB 55%,#EDF7F6 100%)!important;}
.proof{background:linear-gradient(165deg,#F1F6FC 0%,#FBF4EC 100%)!important;}
.promise{background:linear-gradient(160deg,#EFF4FB,#F6EEF6)!important;}
.mist{background:linear-gradient(165deg,#EEF4FB,#F1F7F6)!important;}

/* =========================================================================
   MULTI-HUE ICON TILES
   The site previously used one blue gradient for every icon tile. We cycle
   five brand-friendly hues by card position so grids read with life, the way
   the CSM risk / pillar icons do.
   ========================================================================= */
.vert-icon,.sol-icon,.feature-card .ic{position:relative;overflow:hidden;}

/* Verticals grid (homepage) */
.vert-grid .vert-card:nth-child(5n+1) .vert-icon{background:linear-gradient(135deg,var(--fs-blue),var(--fs-blue-dark));}
.vert-grid .vert-card:nth-child(5n+2) .vert-icon{background:linear-gradient(135deg,var(--fs-teal),var(--fs-teal-dark));}
.vert-grid .vert-card:nth-child(5n+3) .vert-icon{background:linear-gradient(135deg,var(--fs-amber),var(--fs-amber-dark));}
.vert-grid .vert-card:nth-child(5n+4) .vert-icon{background:linear-gradient(135deg,var(--fs-green),var(--fs-green-dark));}
.vert-grid .vert-card:nth-child(5n+5) .vert-icon{background:linear-gradient(135deg,var(--fs-violet),var(--fs-violet-dark));}

/* Solutions grid (homepage) */
.solutions-grid .solution-card:nth-child(6n+1) .sol-icon{background:linear-gradient(135deg,var(--fs-blue),var(--fs-blue-dark));}
.solutions-grid .solution-card:nth-child(6n+2) .sol-icon{background:linear-gradient(135deg,var(--fs-teal),var(--fs-teal-dark));}
.solutions-grid .solution-card:nth-child(6n+3) .sol-icon{background:linear-gradient(135deg,var(--fs-amber),var(--fs-amber-dark));}
.solutions-grid .solution-card:nth-child(6n+4) .sol-icon{background:linear-gradient(135deg,var(--fs-green),var(--fs-green-dark));}
.solutions-grid .solution-card:nth-child(6n+5) .sol-icon{background:linear-gradient(135deg,var(--fs-violet),var(--fs-violet-dark));}
.solutions-grid .solution-card:nth-child(6n+6) .sol-icon{background:linear-gradient(135deg,var(--fs-red),#B01813);}

/* Feature cards (About "difference" + Why Us reasons) */
.card-grid .feature-card:nth-child(7n+1) .ic{background:linear-gradient(135deg,var(--fs-blue),var(--fs-blue-dark));}
.card-grid .feature-card:nth-child(7n+2) .ic{background:linear-gradient(135deg,var(--fs-teal),var(--fs-teal-dark));}
.card-grid .feature-card:nth-child(7n+3) .ic{background:linear-gradient(135deg,var(--fs-amber),var(--fs-amber-dark));}
.card-grid .feature-card:nth-child(7n+4) .ic{background:linear-gradient(135deg,var(--fs-green),var(--fs-green-dark));}
.card-grid .feature-card:nth-child(7n+5) .ic{background:linear-gradient(135deg,var(--fs-violet),var(--fs-violet-dark));}
.card-grid .feature-card:nth-child(7n+6) .ic{background:linear-gradient(135deg,var(--fs-red),#B01813);}
.card-grid .feature-card:nth-child(7n+7) .ic{background:linear-gradient(135deg,#0E7C86,var(--fs-teal-dark));}

/* ---- Coloured top-accent bar on cards (echoes CSM card styling) -------- */
.vert-card,.solution-card,.case-card,.feature-card{position:relative;}
.vert-card::before,.feature-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:var(--radius) var(--radius) 0 0;opacity:0;transition:opacity .25s ease;}
.vert-grid .vert-card:nth-child(5n+1)::before{background:var(--fs-blue);}
.vert-grid .vert-card:nth-child(5n+2)::before{background:var(--fs-teal);}
.vert-grid .vert-card:nth-child(5n+3)::before{background:var(--fs-amber);}
.vert-grid .vert-card:nth-child(5n+4)::before{background:var(--fs-green);}
.vert-grid .vert-card:nth-child(5n+5)::before{background:var(--fs-violet);}
.card-grid .feature-card:nth-child(7n+1)::before{background:var(--fs-blue);}
.card-grid .feature-card:nth-child(7n+2)::before{background:var(--fs-teal);}
.card-grid .feature-card:nth-child(7n+3)::before{background:var(--fs-amber);}
.card-grid .feature-card:nth-child(7n+4)::before{background:var(--fs-green);}
.card-grid .feature-card:nth-child(7n+5)::before{background:var(--fs-violet);}
.card-grid .feature-card:nth-child(7n+6)::before{background:var(--fs-red);}
.card-grid .feature-card:nth-child(7n+7)::before{background:#0E7C86;}
.vert-card:hover::before,.feature-card:hover::before{opacity:1;}

/* Case study tags cycle colour by vertical (homepage proof) */
.case-grid .case-card:nth-child(5n+1) .case-tag{background:#E6F0FA;color:var(--fs-blue-dark);}
.case-grid .case-card:nth-child(5n+2) .case-tag{background:#E1F5F2;color:var(--fs-teal-dark);}
.case-grid .case-card:nth-child(5n+3) .case-tag{background:#FBEFD8;color:var(--fs-amber-dark);}
.case-grid .case-card:nth-child(5n+4) .case-tag{background:#E2F3E9;color:var(--fs-green-dark);}
.case-grid .case-card:nth-child(5n+5) .case-tag{background:#EEE9FA;color:var(--fs-violet-dark);}
.case-metric .num{color:var(--fs-teal-dark);}

/* ---- Process step numbers pick up an alternating accent --------------- */
.process-item:nth-child(4n+2) .process-num{border-color:var(--fs-teal);color:var(--fs-teal-dark);}
.process-item:nth-child(4n+3) .process-num{border-color:var(--fs-amber);color:var(--fs-amber-dark);}
.process-item:nth-child(4n+4) .process-num{border-color:var(--fs-green);color:var(--fs-green-dark);}

/* ---- Stat numbers get a subtle gradient fill -------------------------- */
.stat-band .num,.stat-cell .num{
  background:linear-gradient(120deg,var(--fs-blue),var(--fs-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---- Areas We Service region pins cycle colour ------------------------ */
.area-region:nth-of-type(7n+2) .rhead .ic{background:linear-gradient(135deg,var(--fs-blue),var(--fs-blue-dark));}
.area-region:nth-of-type(7n+3) .rhead .ic{background:linear-gradient(135deg,var(--fs-teal),var(--fs-teal-dark));}
.area-region:nth-of-type(7n+4) .rhead .ic{background:linear-gradient(135deg,var(--fs-amber),var(--fs-amber-dark));}
.area-region:nth-of-type(7n+5) .rhead .ic{background:linear-gradient(135deg,var(--fs-green),var(--fs-green-dark));}
.area-region:nth-of-type(7n+6) .rhead .ic{background:linear-gradient(135deg,var(--fs-violet),var(--fs-violet-dark));}
.area-region:nth-of-type(7n+0) .rhead .ic{background:linear-gradient(135deg,var(--fs-red),#B01813);}
.area-region:nth-of-type(7n+1) .rhead .ic{background:linear-gradient(135deg,#0E7C86,var(--fs-teal-dark));}

/* ---- Comparison table (Why Us): highlight the Forever Secure column --- */
.compare td.win{color:var(--fs-green-dark)!important;font-weight:600;}
.compare thead th.fs{color:var(--fs-blue)!important;}

/* ---- Vision page: warm the feature cards a touch ---------------------- */
.benefit-grid .benefit-card:nth-child(6n+1) .ic{background:linear-gradient(135deg,var(--fs-blue),var(--fs-blue-dark));}
.benefit-grid .benefit-card:nth-child(6n+2) .ic{background:linear-gradient(135deg,var(--fs-teal),var(--fs-teal-dark));}
.benefit-grid .benefit-card:nth-child(6n+3) .ic{background:linear-gradient(135deg,var(--fs-amber),var(--fs-amber-dark));}
.benefit-grid .benefit-card:nth-child(6n+4) .ic{background:linear-gradient(135deg,var(--fs-green),var(--fs-green-dark));}
.benefit-grid .benefit-card:nth-child(6n+5) .ic{background:linear-gradient(135deg,var(--fs-violet),var(--fs-violet-dark));}
.benefit-grid .benefit-card:nth-child(6n+6) .ic{background:linear-gradient(135deg,var(--fs-red),#B01813);}

/* =========================================================================
   ACCENT STRIP — a slim colour-block band (like the CSM pillar strip)
   Rendered by the theme just under each page hero where a hook exists.
   ========================================================================= */
.fs-accent-strip{background:linear-gradient(100deg,#0B1A38,#0F2A54 60%,#123A6B);}
.fs-accent-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.fs-accent-strip .cell{padding:22px 20px;display:flex;align-items:center;gap:12px;
  border-right:1px solid rgba(255,255,255,0.08);}
.fs-accent-strip .cell:last-child{border-right:none;}
.fs-accent-strip .dot{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;color:#fff;}
.fs-accent-strip .cell:nth-child(1) .dot{background:linear-gradient(135deg,var(--fs-blue),var(--fs-blue-dark));}
.fs-accent-strip .cell:nth-child(2) .dot{background:linear-gradient(135deg,var(--fs-teal),var(--fs-teal-dark));}
.fs-accent-strip .cell:nth-child(3) .dot{background:linear-gradient(135deg,var(--fs-amber),var(--fs-amber-dark));}
.fs-accent-strip .cell:nth-child(4) .dot{background:linear-gradient(135deg,var(--fs-green),var(--fs-green-dark));}
.fs-accent-strip .cell span{font-family:'Archivo',sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:0.03em;text-transform:uppercase;line-height:1.4;color:#E4EDFA;}
@media(max-width:820px){
  .fs-accent-strip .wrap{grid-template-columns:1fr 1fr;}
  .fs-accent-strip .cell:nth-child(2){border-right:none;}
}
@media(max-width:480px){
  .fs-accent-strip .wrap{grid-template-columns:1fr;}
  .fs-accent-strip .cell{border-right:none;border-bottom:1px solid rgba(255,255,255,0.08);}
}

/* =========================================================================
   REUSABLE TRUST STRIPS — client logos + brands we work with
   Self-contained so they render identically on every landing page.
   ========================================================================= */
.fs-strip-wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
.fs-strip-caption{text-align:center;font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:11px;letter-spacing:0.09em;text-transform:uppercase;color:#7C8AA5;margin:0 0 26px;}

/* --- client logos: greyed, auto-cropped, scrolling loop --- */
.fs-clients-strip{background:#F4F7FB;padding:48px 0;border-top:1px solid #E7EDF5;border-bottom:1px solid #E7EDF5;overflow:hidden;}
.fs-clients-track-wrap{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);}
.fs-clients-track{display:flex;gap:56px;width:max-content;align-items:center;
  animation:fs-scroll-logos 34s linear infinite;}
.fs-client-logo{flex:0 0 auto;height:46px;width:150px;display:flex;align-items:center;justify-content:center;}
.fs-client-logo img{max-height:46px;max-width:150px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:0.55;}
@keyframes fs-scroll-logos{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* --- brands we work with: full colour --- */
.fs-brands-strip{background:#fff;padding:56px 0;border-top:1px solid #E7EDF5;}
.fs-brands-strip.is-dark{background:linear-gradient(120deg,#0B1A38,#0F2A54);border-top:none;}
.fs-brands-strip.is-dark .fs-strip-caption{color:#8FB0DC;}
.fs-brands-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:38px 52px;max-width:940px;margin:0 auto;}
.fs-brand-logo{display:flex;align-items:center;justify-content:center;height:50px;}
.fs-brands-strip.is-dark .fs-brand-logo{background:#fff;border-radius:8px;padding:8px 16px;height:44px;}
.fs-brand-logo img{max-height:50px;max-width:165px;width:auto;height:auto;object-fit:contain;}
.fs-brands-strip.is-dark .fs-brand-logo img{max-height:34px;max-width:120px;}
@media(max-width:600px){
  .fs-brands-grid{gap:28px 34px;}
  .fs-brand-logo{height:38px;}.fs-brand-logo img{max-height:38px;max-width:120px;}
  .fs-client-logo{width:120px;}
}

/* =========================================================================
   TRUSTED TECHNOLOGY PARTNERS — dark band, scrolling carousel, larger logos
   ========================================================================= */
.fs-tech-partners{background:linear-gradient(100deg,#0B1A38,#0F2A54 60%,#123A6B);padding:60px 0;overflow:hidden;}
.fs-tech-wrap{max-width:1100px;margin:0 auto;padding:0 28px;}
.fs-tech-lbl{font-family:'IBM Plex Mono','Courier New',monospace;font-size:10.5px;
  letter-spacing:0.16em;text-transform:uppercase;color:#8FB4E4;text-align:center;margin-bottom:30px;}
.fs-tech-track-wrap{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);}
.fs-tech-track{display:flex;align-items:center;gap:34px;width:max-content;
  animation:fs-tech-scroll 32s linear infinite;}
.fs-tech-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:96px;width:210px;background:#fff;border-radius:14px;padding:16px 26px;
  box-shadow:0 10px 26px rgba(0,10,40,0.28);}
.fs-tech-logo img{max-height:62px;max-width:158px;width:auto;height:auto;object-fit:contain;}
@keyframes fs-tech-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(max-width:600px){
  .fs-tech-partners{padding:44px 0;}
  .fs-tech-track{gap:20px;}
  .fs-tech-logo{height:76px;width:160px;padding:12px 18px;border-radius:12px;}
  .fs-tech-logo img{max-height:48px;max-width:120px;}
}

/* Offset anchor jumps so target sections clear the sticky header */
html{scroll-padding-top:90px;}

/* =========================================================================
   LOGO SIZING + FOOTER TREATMENT
   Client: FS logos need to be about twice the size; the footer logo should be
   greyscale/white so it stays visible on the dark footer.
   ========================================================================= */
/* Header wordmark — a touch larger on desktop */
.logo .logo-img{height:74px !important;max-width:480px !important;}
.fs-mark .logo-img,
.lp-nav .fs-mark .logo-img{height:70px !important;max-width:440px !important;}

/* Footer wordmark: larger. A dedicated light logo (logo-light) is used here so
   it already contrasts on the dark footer; no colour filter is applied to it. */
.footer-logo .logo-img,
footer .logo-img,
footer.lp .fs-mark .logo-img{
  height:84px !important;max-width:500px !important;
}

@media(max-width:900px){
  .logo .logo-img{height:64px !important;max-width:380px !important;}
  .fs-mark .logo-img,.lp-nav .fs-mark .logo-img{height:60px !important;max-width:340px !important;}
  .footer-logo .logo-img,footer .logo-img,footer.lp .fs-mark .logo-img{height:74px !important;max-width:420px !important;}
}
@media(max-width:600px){
  .logo .logo-img{height:58px !important;max-width:320px !important;}
  .fs-mark .logo-img,.lp-nav .fs-mark .logo-img{height:54px !important;max-width:300px !important;}
  .footer-logo .logo-img,footer .logo-img,footer.lp .fs-mark .logo-img{height:66px !important;max-width:380px !important;}
}

/* =========================================================================
   "WHY FOREVER SECURE" BLOB IMAGE — was far too small on mobile
   ========================================================================= */
@media(max-width:900px){
  .promise-visual{max-width:none !important;margin:0 auto 8px !important;}
  .promise-visual .img-ph{aspect-ratio:4/3 !important;width:100% !important;
    border-radius:24px !important;animation:none !important;min-height:280px;}
}
@media(max-width:560px){
  .promise-visual .img-ph{min-height:240px;border-radius:20px !important;}
}

/* =========================================================================
   CASE STUDY PAGES (individual)
   ========================================================================= */
.cs-hero{background:radial-gradient(ellipse 120% 100% at 20% -10%,#1A3A78,#0A1A38 60%),#0A1A38;color:#fff;padding:70px 0 56px;}
.cs-back{display:inline-flex;align-items:center;gap:8px;color:#9FBEE8;font-size:13.5px;font-weight:600;margin-bottom:24px;transition:color .15s ease;}
.cs-back:hover{color:#fff;}
.cs-hero .cs-tag{display:inline-block;background:rgba(0,146,255,0.16);border:1px solid rgba(127,180,232,0.4);color:#BFDBFF;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:6px 13px;border-radius:999px;margin-bottom:20px;}
.cs-hero h1{font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:-0.02em;margin:0 0 16px;max-width:15ch;}
.cs-hero .cs-sub{color:#C9DBF5;font-size:clamp(16px,2vw,19px);line-height:1.55;max-width:60ch;margin:0;}

.cs-body{background:#fff;padding:64px 0 120px;}
.cs-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start;}
.cs-main{min-width:0;}
.cs-lead-img{width:100%;aspect-ratio:16/9;border-radius:18px;background-size:cover;background-position:center;margin-bottom:44px;box-shadow:0 24px 60px rgba(8,18,38,0.16);}
.cs-lead-img.img-ph{display:flex;align-items:center;justify-content:center;}
.cs-section{margin-bottom:40px;}
.cs-section h2{font-size:clamp(21px,2.6vw,28px);color:var(--navy-900,#0B1A38);letter-spacing:-0.01em;margin:0 0 16px;}
.cs-section p{color:#43526B;font-size:16.5px;line-height:1.72;margin:0 0 14px;}
.cs-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;}
.cs-list li{display:flex;align-items:flex-start;gap:11px;color:#33425C;font-size:16px;line-height:1.55;}
.cs-list li svg{flex-shrink:0;color:#1E8E5A;margin-top:3px;}

.cs-aside{position:sticky;top:96px;}
.cs-snapshot{background:linear-gradient(160deg,#F1F6FC,#F6F9FD);border:1px solid #E1EAF5;border-radius:18px;padding:28px;}
.cs-snapshot h3{font-size:13px;text-transform:uppercase;letter-spacing:0.09em;color:var(--fs-blue,#005EB8);margin:0 0 18px;font-family:'IBM Plex Mono',monospace;}
.cs-snapshot dl{margin:0;display:grid;gap:16px;}
.cs-snapshot dt{font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;color:#8494AD;margin-bottom:3px;}
.cs-snapshot dd{margin:0;font-size:15px;color:#1B2A44;font-weight:600;line-height:1.4;}

/* Sticky CTA at the bottom of every case study */
.cs-sticky-cta{position:sticky;bottom:0;z-index:60;background:linear-gradient(100deg,#0B1A38,#123A6B);border-top:1px solid rgba(143,193,255,0.22);box-shadow:0 -12px 40px rgba(6,14,30,0.4);padding:16px 0;}
.cs-sticky-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.cs-sticky-text{display:flex;flex-direction:column;gap:2px;}
.cs-sticky-text strong{color:#fff;font-size:16px;}
.cs-sticky-text span{color:#AEC2E4;font-size:13.5px;}
.cs-sticky-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.cs-sticky-cta .btn-outline{border-color:rgba(255,255,255,0.4);color:#fff;}

@media(max-width:920px){
  .cs-grid{grid-template-columns:1fr;gap:36px;}
  .cs-aside{position:static;order:-1;}
  .cs-snapshot{padding:22px;}
}
@media(max-width:640px){
  .cs-sticky-cta .wrap{flex-direction:column;align-items:stretch;gap:12px;text-align:center;}
  .cs-sticky-actions{justify-content:center;}
  .cs-sticky-text{align-items:center;}
  .cs-sticky-actions .btn{flex:1;}
}
