/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* Brand blue — exact brand hex #0E77BC is the single source of truth.
     Navy/mid/deep are tonal derivatives (same ~204° hue) for dark UI. */
  --sd-blue:        #0e77bc;  /* brand blue — buttons, links, icons, active states */
  --sd-blue-mid:    #12639E;  /* mid tone — hero gradient highlight */
  --sd-navy:        #0e77bc;  /* darker tone — headings, dark backgrounds */
  --sd-navy-2:      #0D6AA8;  /* between blue and navy — secondary gradients */
  --sd-navy-deep:   #063356;  /* deepest tone — hero/footer background base */
  --sd-blue-light:  #E7F3FA;  /* tint — hover states, soft backgrounds */
  /* Accent — exact brand orange, nods to physical directory tabs */
  --sd-amber:       #F7A522;
  --sd-amber-dark:  #D98A0E;
  /* Verified-data green */
  --sd-green:       #2E9E6D;
  /* Neutrals */
  --sd-bg:          #f8f9ff;
  --sd-white:       #FFFFFF;
  --sd-ink:         #0f0f10;
  --sd-muted:       #0f0f10;
  --sd-border:      #E3E9F1;

  --font-display: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-mono: 'Roboto', sans-serif;
--sd-border: #E3E9F1;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px rgba(14,42,71,0.08);
  --shadow-lift: 0 20px 45px rgba(14,42,71,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  font-weight:400;
  color: var(--sd-ink);
  background: var(--sd-white);
  -webkit-font-smoothing: antialiased;
}
/* 
p, li, dt, dd, blockquote, label, span, input, textarea, select, button{
  font-family: var(--font-body);
}
li{line-height: 27px;}
p, li, dt, dd, blockquote{ font-weight:400; }
h1,h2,h3,h4,h5,h6,.font-display{ font-family: var(--font-display); font-weight:700; letter-spacing:-0.01em; } */
.text-navy{color:var(--sd-navy) !important;}
.text-muted-sd{color:var(--sd-muted) !important;}
.bg-navy{background:var(--sd-navy) !important;}
.bg-sd{background:var(--sd-bg) !important;}
.mono{font-family:var(--font-mono);}

a{ text-decoration:none !important; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: #fba73e;;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background:var(--sd-amber);
  display:inline-block;
}
.section-pad{ padding:5.5rem 0; }
@media (max-width:767px){ .section-pad{ padding:3.25rem 0; } }

/* Buttons */
.btn-sd-primary{
  background:var(--sd-amber);
  border:1px solid var(--sd-amber);
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:.75rem 1.6rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-sd-primary:hover{
  background:var(--sd-amber-dark);
  border-color:var(--sd-amber-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(232,163,61,0.35);
}
.btn-sd-outline{
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.35);
  color:#fff;
  font-weight:600;
  border-radius:999px;
  padding:.72rem 1.5rem;
  transition:all .18s ease;
}
.btn-sd-outline:hover{ background:rgba(255,255,255,0.1); border-color:#fff; color:#fff; transform:translateY(-2px); }
.btn-sd-outline-navy{
  background:transparent;
  border:1.5px solid var(--sd-border);
  color:var(--sd-navy);
  font-weight:600;
  border-radius:999px;
  padding:.72rem 1.5rem;
  transition:all .18s ease;
}
.btn-sd-outline-navy:hover{ background:var(--sd-blue-light); border-color:var(--sd-blue); transform:translateY(-2px); }
.top-ly{    z-index: 999;
    position: relative;}
/* =========================================================
   TOP UTILITY BAR
   ========================================================= */
.utility-bar{
  background:var(--sd-navy);
  color:rgba(255,255,255,0.75);
  font-size:.82rem;
  padding:.45rem 0;
}
.utility-bar a{ color:rgba(255,255,255,1); }
.utility-bar a:hover{ color:#fff !important; }

/* My Scott's Login — custom click-toggle dropdown (vanilla JS, no Popper to avoid
   conflicts with the mega menus; matches the live scottsdirectories.com portal list) */
.login-dropdown{ position:relative; }
.login-toggle{
  background:none; border:none; padding:0; margin:0;
  color:rgba(255,255,255,1); font-size:.82rem; font-family:inherit;
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  transition:color .15s ease;
}
.login-toggle:hover{ color:#fff; }
.login-toggle i{ font-size:.62rem; transition:transform .2s ease; }
.login-toggle[aria-expanded="true"]{ color:#fff; }
.login-toggle[aria-expanded="true"] i{ transform:rotate(180deg); }

.login-menu{
  position:absolute; top:calc(100% + 12px); right:0;
  width:290px;
  background:#fff;
  border:1px solid var(--sd-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);
  padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:1050;
}
.login-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.login-menu a{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.6rem .7rem; border-radius:8px;
  color:var(--sd-ink) !important; font-size:.85rem; font-weight:600;
  transition:background .15s ease, color .15s ease;
}
.login-menu a span:first-child{ display:flex; align-items:center; gap:.6rem; }
.login-menu a i{
  width:28px; height:28px; flex:0 0 28px; border-radius:7px;
  background:var(--sd-blue-light); color:var(--sd-blue);
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
}
.login-menu a:hover{ background:var(--sd-blue-light); color:var(--sd-navy) !important; }
.login-menu a.admin-link{
  border-top:1px solid var(--sd-border); margin-top:.3rem; padding-top:.65rem;
  color:var(--sd-muted);
}
.badge-new{
      font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .05em;
    background: var(--sd-amber);
    color: #fff;
    padding: .15rem .45rem;
    border-radius: 999px;
    white-space: nowrap;
}


.tit{    font-size: 1.3rem;
    font-weight: 600;}



@media (max-width:480px){ .login-menu{ width:min(290px, 82vw); } }

/* =========================================================
   HEADER / NAV
   ========================================================= */
/* Utility bar + header stick together as one unit — sticking them
   independently causes the second sticky element to jump/overlap once
   the first scrolls out of its own flow, so both live under one
   position:sticky wrapper instead. */
.sticky-top-wrap{
  position:sticky; top:0; z-index:1030;
}
.site-header{
  background:#fff;
  border-bottom:1px solid var(--sd-border);padding: 10px 0;
  transition:box-shadow .25s ease, padding .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 8px 24px rgba(14,42,71,0.08); }
.site-header .navbar{ padding:1.05rem 0; transition:padding .25s ease; }
.site-header.is-scrolled .navbar{ padding:.6rem 0; }
.site-header .logo-img{ height:45px; transition:height .25s ease; }
.site-header.is-scrolled .logo-img{ height:42px; }

.main-nav .nav-link {
    color: #0c0c0c;
    font-weight: 600;
    font-size: 1rem;
    padding: .7rem 1.5rem !important;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: .35rem;
}


/*.main-nav .nav-link{
  color:var(--sd-navy);
  font-weight:600;
  font-size:.95rem;
  padding:.6rem .95rem !important;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:.35rem;
}*/
.main-nav .nav-link:hover, .main-nav .nav-link.active{ color:var(--sd-blue); background:var(--sd-blue-light); }
.main-nav .nav-link .chev{ font-size:.65rem; transition:transform .2s ease; }
.nav-item.has-mega:hover .chev{ transform:rotate(180deg); }

/* Mega menu */
.mega-wrap{ position:relative; }
.mega-panel{
  position:fixed;
  left:0; right:0;
  top: var(--header-h, 94px);
  width:100vw;
  background:#fff;
  border-top:1px solid var(--sd-border);
  border-bottom:1px solid var(--sd-border);
  box-shadow:var(--shadow-lift);
  border-radius:0;
  padding:2rem 0;
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:1040;
}
.mega-panel .mega-panel-inner{
  padding-inline:0;
}
.nav-item.has-mega:hover .mega-panel,
.nav-item.has-mega:focus-within .mega-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
.mega-col-title{
 font-family: var(--font-mono);
    font-size: .90rem;
/*    letter-spacing: .1em;*/
    text-transform: uppercase;
    color: var(--sd-muted);
    margin-bottom: .9rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--sd-amber);
    display: inline-block;
    font-weight: 500;
}
.mega-link{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.5rem .5rem;
  border-radius:var(--radius-sm);
  color:var(--sd-ink);
  transition:background .15s ease, transform .15s ease;
}
.mega-link:hover{ background:var(--sd-bg); transform:translateX(3px); color:var(--sd-navy); }
.mega-link .mi-icon{
  width:34px; height:34px; flex:0 0 34px;
  border-radius:8px;
  background:var(--sd-blue-light);
  color:var(--sd-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem;
}
.mega-link strong{ display:block; font-size:.9rem; font-weight:700; }
.mega-link span{ display:block; font-size:.78rem; color:var(--sd-muted); line-height:1.3; }
.mega-footer-cta{
  border-top:1px solid var(--sd-border);
  margin-top:1.25rem; padding-top:1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.mega-body{ display:flex; gap:1.75rem; align-items:stretch; }
.mega-cols{ flex:1 1 auto; min-width:0; }
.mega-divider{ width:1px; background:var(--sd-border); flex:0 0 1px; align-self:stretch; }

/* GTV-style feature/promo panel inside mega menu */
.mega-feature{
  flex:0 0 250px;
  background:linear-gradient(165deg, var(--sd-blue-light) 0%, #fff 65%);
  border:1px solid var(--sd-border);
  border-radius:var(--radius-md);
  padding:1rem;
  display:flex; flex-direction:column;
}
.mega-feature .mf-img {
    width: 100%;
    height: 135px;
    object-fit: fill;
    border-radius: 8px;
    margin-bottom: .85rem;
    display: block;
    object-position: center top;
}
.mega-feature .mf-eyebrow{
  font-family:var(--font-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sd-blue);
  margin-bottom:.35rem; display:block;
}
.mega-feature h6{ font-weight:700; color:var(--sd-navy); font-size:.95rem; margin-bottom:.4rem; line-height:1.25; }
.mega-feature p{ font-size:.8rem; color:var(--sd-muted); margin-bottom:.9rem; line-height:1.4; }
.mega-feature .mf-links{ margin-bottom:1rem; }
.mega-feature .mf-links a{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-size:.8rem; font-weight:600; color:var(--sd-navy);
  padding:.42rem 0; border-top:1px solid var(--sd-border);
  transition:color .15s ease;
}
.mega-feature .mf-links a:first-child{ border-top:none; }
.mega-feature .mf-links a i{ font-size:.7rem; opacity:.5; transition:transform .15s ease; }
.mega-feature .mf-links a:hover{ color:var(--sd-blue); }
.mega-feature .mf-links a:hover i{ transform:translateX(3px); opacity:1; }
.mega-feature .btn{ margin-top:auto; width:100%; text-align:center; }
@media (min-width:992px) and (max-width:1199px){
  .mega-link{ padding:.42rem .35rem; }
  .mega-link .mi-icon{ width:30px; height:30px; flex:0 0 30px; font-size:.85rem; }
  .mega-link strong{ font-size:.85rem; }
  .mega-link span{ font-size:.74rem; }
  .mega-col-title{ font-size:.66rem; }
}
@media (max-width:1199px){
  .mega-body{ flex-direction:column; }
  .mega-divider{ display:none; }
  .mega-feature{ flex-basis:auto; flex-direction:row; gap:1rem; align-items:flex-start; }
  .mega-feature .mf-img{ width:110px; height:80px; flex:0 0 110px; margin-bottom:0; }
  .mega-feature .mf-links{ display:none; }
  .mega-feature .btn{ width:auto; margin-top:.5rem; }
}

/* Mobile accordion nav — Level 1 (Services / Products / Resources) */
.offcanvas-nav .accordion-button{
  font-weight:700; color:var(--sd-navy); background:#cfecff;
  font-family:var(--font-display);
}
.offcanvas-nav .accordion-button:not(.collapsed){ color:var(--sd-blue); background:var(--sd-blue-light); box-shadow:none; }
.offcanvas-nav > .accordion-item{ border:none; border-bottom:1px solid var(--sd-border); }
.offcanvas-nav > .accordion-item > .accordion-collapse > .accordion-body{ padding:.5rem .25rem 1rem 1rem; }

/* Level 2 — category groups nested inside each Level-1 section (mirrors desktop mega-col-title groups) */
.offcanvas-nav .accordion-sub{ margin-bottom:.6rem; }
.offcanvas-nav .accordion-sub .accordion-item{
  border:none; background:var(--sd-bg); border-radius:10px; margin-bottom:.4rem; overflow:hidden;
}
.offcanvas-nav .accordion-sub .accordion-button{
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--sd-muted);
  background:var(--sd-bg); padding:.65rem .8rem;
}
.offcanvas-nav .accordion-sub .accordion-button::after{ width:.9rem; height:.9rem; background-size:.9rem; }
.offcanvas-nav .accordion-sub .accordion-button:not(.collapsed){
  color:var(--sd-blue); background:var(--sd-blue-light); box-shadow:none;
}
.offcanvas-nav .accordion-sub .accordion-body{ padding:.3rem .5rem .5rem; background:#fff; }

/* Level 3 — the actual destination links, icon + title + description (mirrors desktop .mega-link) */
.offcanvas-nav .mobile-link{
  display:flex; gap:.65rem; align-items:flex-start;
  padding:.55rem .3rem; color:var(--sd-ink); border-radius:8px;
  transition:background .15s ease;
}
.offcanvas-nav .mobile-link:hover, .offcanvas-nav .mobile-link:focus-visible{ background:var(--sd-blue-light); }
.offcanvas-nav .mobile-link i{
  width:30px; height:30px; flex:0 0 30px; border-radius:8px;
  background:var(--sd-blue-light); color:var(--sd-blue);
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.offcanvas-nav .mobile-link strong{ display:block; font-size:.85rem; font-weight:700; line-height:2.25; }
.offcanvas-nav .mobile-link small{ display:block; color:var(--sd-muted); font-size:.74rem; line-height:1.35; margin-top:.1rem; }

/* Feature / CTA strip at the bottom of each Level-1 section (mirrors desktop mega-feature / mega-footer-cta) */
.offcanvas-nav .mobile-mega-cta{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  background:linear-gradient(165deg, var(--sd-blue-light) 0%, #fff 70%);
  border:1px solid var(--sd-border);
  border-radius:10px; padding:.7rem .85rem; margin-top:.2rem;
  font-size:.76rem; color:var(--sd-muted);
}
.offcanvas-nav .mobile-mega-cta strong{ color:var(--sd-blue); font-weight:700; font-size:.8rem; white-space:nowrap; }
.offcanvas-nav .mobile-mega-cta i{ color:var(--sd-blue); font-size:.85rem; flex:0 0 auto; }


/* =========================================================
   HERO — premium gradient mesh (Cognism-inspired depth, built entirely
   from Scott's own brand blue/amber tokens — no borrowed colors).
   Layer order: dark mesh gradient → blurred blobs (z:0) → grid texture (z:0)
   → content (z:2), so the glow reads as depth behind the copy, never on it.
   ========================================================= */
.hero{
  position:relative;
  background:linear-gradient(to right bottom,#0e77bc,#1a9df5 40%,#209df1)!important;
  color:#fff;
  overflow:hidden;
  padding:5.5rem 0 6.5rem;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.20) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 20% 20%, black, transparent 70%);
  opacity:.5;
}
/* Abstract blurred gradient blobs — the "premium SaaS" depth cue.
   Positioned at the edges so they never sit directly behind body text. */
.hero-blob{
  position:absolute; z-index:0;
  border-radius:50%;
  filter:blur(60px);
  pointer-events:none;
}
.hero-blob-1{
  width:clamp(280px, 34vw, 560px); height:clamp(280px, 34vw, 560px);
  top:-14%; left:-8%;
  background:radial-gradient(circle, var(--sd-blue) 0%, rgba(14,119,188,0) 72%);
  opacity:.55;
}
.hero-blob-2{
  width:clamp(220px, 26vw, 440px); height:clamp(220px, 26vw, 440px);
  bottom:-16%; right:-6%;
  background:radial-gradient(circle, var(--sd-amber) 0%, rgba(247,165,34,0) 72%);
  opacity:.20;
}
.hero-blob-3{
  width:clamp(220px, 24vw, 380px); height:clamp(220px, 24vw, 380px);
  top:28%; right:6%;
  background:radial-gradient(circle, var(--sd-navy-2) 0%, rgba(13,106,168,0) 72%);
  opacity:.5;
}
@media (max-width:767px){
  .hero-blob{ filter:blur(44px); }
  .hero-blob-2{ display:none; } /* keep the mobile canvas calm — one glow top, one mid */
}
.hero .container{ position:relative; z-index:2; }
.hero .badge-canadian{
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff; font-size:.78rem; font-weight:600;
  padding:.4rem .9rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.4rem;
}
.hero h1{ font-size:clamp(2.1rem, 4vw, 3.3rem); font-weight:700; line-height:1.12; }
.hero .lead-sd{
    color: rgba(255, 255, 255, 1);
    font-size: 2rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 20px;
    border-radius: 10px;
    width: max-content;
    text-shadow: 0px 1px 1px #1c1c1c;
 }

.hero-stats{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:2.2rem; justify-content: space-between;}
.hero-stats .stat{ min-width:110px; }
.hero-stats .stat .num {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px #0a0a0a;
}
.hero-stats .stat .lbl {
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
}

/* Rolodex / index-card signature visual */
.card-stack{ position:relative; height:420px; }
.rolo-card{
  position:absolute;
  width:290px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
  padding:1.1rem 1.2rem;
  color:var(--sd-ink);
  animation: floaty 6s ease-in-out infinite;
}
.rolo-card .tab{
  position:absolute; top:-10px; left:22px;
  width:52px; height:16px;
  background:var(--sd-amber);
  border-radius:4px 4px 0 0;
}
.rolo-card .field{ font-size:.68rem; color:var(--sd-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:.55rem; }
.rolo-card .val{ font-family:var(--font-mono); font-size:.86rem; font-weight:600; color:var(--sd-navy); }
.rolo-card .verified{
  position:absolute; top:14px; right:14px;
  color:var(--sd-green); font-size:1rem;
}
.rolo-1{ top:15px; left:40px; transform:rotate(-8deg); z-index:1; animation-delay:0s;}
.rolo-2{ top:80px; left:130px; transform:rotate(4deg); z-index:2; animation-delay:1.2s;}
.rolo-3{ top:190px; left:15px; transform:rotate(-3deg); z-index:3; animation-delay:2.1s;}
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--r,0)); } 50%{ transform:translateY(-9px) rotate(var(--r,0)); } }
.rolo-1{ --r:-8deg; } .rolo-2{ --r:4deg; } .rolo-3{ --r:-3deg; }

@media (max-width:991px){ .card-stack{ height:300px; margin-top:2rem; } .rolo-card{ width:230px; padding:.85rem; } }

/* Hero free-trial form card — same index-card / tab motif as the rolodex cards */
.trial-form-card{
  position:relative;
  background:#fff;
  border-radius:18px;
  padding:1.9rem 1.9rem 1.6rem;
  box-shadow:0 25px 60px rgba(0,0,0,0.35), 0 30px 90px -25px rgba(14,119,188,0.5);
  max-width:460px;
  margin-inline:auto;
}
.trial-form-card .tab-lg{
  position:absolute; top:-12px; left:32px;
  width:64px; height:18px;
  background:var(--sd-amber);
  border-radius:5px 5px 0 0;
}
.trial-form-card .badge-nocc{
  font-size:.68rem; font-weight:600; color:var(--sd-green);
  background:#EAF6F0; border:1px solid #CBEBDA;
  padding:.3rem .6rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.3rem;
  white-space:nowrap;
}
.trial-form-card .form-label{ font-size:.78rem; font-weight:600; color:var(--sd-navy); margin-bottom:.25rem; }
.trial-form-card .form-control,
.trial-form-card .form-select{
  border:1px solid var(--sd-border);
  border-radius:var(--radius-sm);
  font-size:.9rem;
  padding:.55rem .75rem;
}
.trial-form-card .form-control:focus,
.trial-form-card .form-select:focus{
  border-color:var(--sd-blue);
  box-shadow:0 0 0 3px var(--sd-blue-light);
}
@media (max-width:991px){ .trial-form-card{ margin-top:2rem; max-width:100%; } }


/* =========================================================
   PROFILES INCLUDE — redesigned "what's included" section
   Dedicated stylesheet, kept separate from styles.css.
   Animation approach matches the rest of the site: .reveal fade-up on
   scroll (global IntersectionObserver already wires this up), plus the
   same hover-lift + icon-invert pattern used on sd-card / stat-card.
   ========================================================= */

/* Outer soft-gradient frame around the whole section */
.profiles-outer{
  background:linear-gradient(180deg, #fff 0%, var(--sd-blue-light) 130%);
  border:1px solid var(--sd-border);
  border-radius:28px;
  box-shadow:var(--shadow-soft);
  padding:2rem 2rem;
}
@media (max-width:767px){
  .profiles-outer{ padding:1.75rem 1.25rem; border-radius:20px; }
}

/* Header: pill + two-tone heading */
.profiles-pill{
  display:inline-block;
  background:var(--sd-blue-light);
  color:var(--sd-blue);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.5rem 1.1rem;
  border-radius:999px;
}
.profiles-heading{
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  font-weight:800;
  color:var(--sd-navy);
}
.profiles-heading .accent{ color:var(--sd-blue); }

/* =========================================================
   Left: Company Database / Contact Database stat cards
   ========================================================= */
.profile-stat-card{
  position:relative;
  background:#dff3ff;
  border:1px solid var(--sd-border);
  border-left:4px solid var(--sd-blue);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.profile-stat-card + .profile-stat-card{ margin-top:1.5rem; }
.profile-stat-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lift);
}
.profile-stat-card.pc-contact{ border-left-color: var(--sd-amber);
    background: #fff5ea; }

/* Faint dot pattern washing across the card's top-right corner */
.psc-pattern{
  position:absolute; top:0; right:0;
  width:60%; height:100%;
  background-image:radial-gradient(var(--sd-blue) 1.3px, transparent 1.3px);
  background-size:12px 12px;
  opacity:.08;
  -webkit-mask-image:linear-gradient(to left, black, transparent);
  mask-image:linear-gradient(to left, black, transparent);
  pointer-events:none;
}
.profile-stat-card.pc-contact .psc-pattern{ background-image:radial-gradient(var(--sd-amber) 1.3px, transparent 1.3px); }

.psc-top{
  position:relative; z-index:1;
  display:flex;
  align-items:center;
  gap:1.1rem;
  margin-bottom:1.1rem;
}
.psc-visual{
  width:64px; height:64px; flex:0 0 64px;
  border-radius:16px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(14,119,188,0.18);
}
.psc-visual i{ font-size:1.7rem; color:var(--sd-blue); }
.profile-stat-card.pc-contact .psc-visual{ background:#fff; box-shadow:0 8px 18px rgba(217,138,14,0.18); }
.profile-stat-card.pc-contact .psc-visual i{ color:var(--sd-amber-dark); }

.psc-title{
  font-weight:700;
  color:var(--sd-muted);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.25rem;
}
.psc-value{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.6rem;
  color:var(--sd-blue);
  line-height:1.15;
}
.profile-stat-card.pc-contact .psc-value{ color:var(--sd-amber-dark); }
.psc-label{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.85rem;
  color:var(--sd-ink);
}

.psc-divider{
  position:relative; z-index:1;
  height:1px;
  background:var(--sd-border);
  margin-bottom:1rem;
}
.psc-desc{
  position:relative; z-index:1;
  font-size:.86rem;
  color:var(--sd-muted);
  line-height:1.55;
  margin-bottom:1.1rem;
}
.psc-tags{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.psc-tag{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff;
  border:1px solid var(--sd-border);
  border-radius:999px;
  padding:.35rem .7rem;
  font-size:.74rem;
  font-weight:600;
  color:var(--sd-navy);
}
.psc-tag i{ color:var(--sd-blue); font-size:.8rem; }
.profile-stat-card.pc-contact .psc-tag i{ color:var(--sd-amber-dark); }


/* =========================================================
   Right: per-item checklist rows (check chip + icon chip + label)
   ========================================================= */
.profiles-col{ padding-top:.25rem; }
@media (min-width:768px){
  .profiles-col-right{ border-left:1px solid var(--sd-border); padding-left:2rem; }
}

.profiles-row{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.4rem .5rem;
  margin:0 -.5rem;
  border-bottom:1px dashed var(--sd-border);
  border-radius:10px;
  transition:background .18s ease;
}
.profiles-row:last-child{ border-bottom:none; }
.profiles-row:hover{ background:var(--sd-blue-light); }

.pr-check{
  width:24px; height:24px; flex:0 0 24px;
  border-radius:50%;
  background:var(--sd-blue);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem;
  box-shadow:0 4px 8px rgba(14,119,188,0.32);
}
.pr-icon{
  width:33px; height:33px; flex:0 0 38px;
  border-radius:50%;
  background:var(--sd-blue-light);
  color:var(--sd-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.profiles-row:hover .pr-icon{
  background:var(--sd-blue);
  color:#fff;
  transform:scale(1.08);
}
.pr-text{
  font-size:.92rem;
  font-weight:600;
  color:var(--sd-ink);
}

@media (max-width:767px){
  .profiles-col-right{ margin-top:.5rem; }
}



/* =========================================================
   BENEFITS SECTION — "Benefits of Purchasing Scott's Business Directories"
   Dedicated stylesheet, kept separate from styles.css. Checklist items use
   Scott's amber for the check chip; the center graphic is a custom-built
   dashboard/data illustration (not a stock asset) using brand tokens only.
   ========================================================= */

.benefits-head{ max-width:720px; margin:0 auto; text-align:center; }

/* Checklist items */
.benefit-item{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  margin-bottom:1.75rem;
}
.benefit-item:last-child{ margin-bottom:0; }
.benefit-check{
  width:34px; height:34px; flex:0 0 34px;
  border-radius:50%;
  background:var(--sd-amber);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem;
  box-shadow:0 6px 14px rgba(247,165,34,0.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.benefit-item:hover .benefit-check{
  transform:scale(1.1);
  box-shadow:0 8px 18px rgba(247,165,34,0.45);
}
.benefit-item p{
  margin:0;
  color:var(--sd-ink);
  font-size:.95rem;
  line-height:1.55;
  padding-top:.3rem;
}

/* Custom dashboard infographic (center column) */
.benefits-illustration{
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.benefits-blob{
  position:absolute; z-index:0; border-radius:50%;
  filter:blur(50px); pointer-events:none;
}
.benefits-blob-1{
  width:220px; height:220px; top:-10px; left:-10px;
  background:radial-gradient(circle, var(--sd-blue) 0%, transparent 70%);
  opacity:.16;
}
.benefits-blob-2{
  width:180px; height:180px; bottom:-10px; right:-10px;
  background:radial-gradient(circle, var(--sd-amber) 0%, transparent 70%);
  opacity:.16;
}
.benefits-illustration svg{
  position:relative; z-index:1;
  width:100%; max-width:300px; height:auto;
}

/* Pulsing "live data" rings on the verified badge + a chart data point */
.benefits-pulse{
  transform-origin:center;
  animation:benefitsPulse 2.6s ease-out infinite;
}
@keyframes benefitsPulse{
  0%{ transform:scale(0.85); opacity:.6; }
  75%{ transform:scale(1.9); opacity:0; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* Animated chart line draw-in */
.benefits-chart-line{
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:benefitsDraw 2.2s ease-out .2s forwards;
}
@keyframes benefitsDraw{ to{ stroke-dashoffset:0; } }

/* Floating icon chips around the monitor */
.benefits-float-chip{
  position:absolute; z-index:2;
  width:44px; height:44px; border-radius:12px;
  background:#fff; border:1px solid var(--sd-border);
  box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  animation:floaty 6s ease-in-out infinite;
}
.benefits-chip-1{ top:6%; left:2%; --r:-6deg; color:var(--sd-blue); animation-delay:0s; }
.benefits-chip-2{ bottom:14%; left:0; --r:5deg; color:var(--sd-green); animation-delay:1.2s; }
.benefits-chip-3{ bottom:4%; right:4%; --r:-4deg; color:var(--sd-amber); animation-delay:2.1s; }

@media (max-width:991px){
  .benefits-illustration{ min-height:300px; margin:2rem 0; }
  .benefits-illustration svg{ max-width:240px; }
}
@media (max-width:575px){
  .benefits-float-chip{ width:36px; height:36px; font-size:.9rem; }
}








/* =========================================================
   VIDEO + INFOGRAPHIC (2nd fold)
   ========================================================= */
.video-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  background:#000;
}
.video-card iframe{ border:0; }
.video-caption{
  display:flex; align-items:center; gap:.75rem;
  padding:1rem 1.25rem; background:#fff;border: solid 1px #fff !important;
}

.infographic-card{
  position:relative;
  background:linear-gradient(168deg, #d9e9f3 0%, #fffff3 60%);
  border:1px solid var(--sd-border);
  border-radius:var(--radius-lg);
  padding:2rem 2rem;
  overflow:hidden;
}
.infographic-card::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, var(--sd-border) 1.5px, transparent 1.5px);
  background-size:20px 20px;
  opacity:.5;
  -webkit-mask-image: radial-gradient(circle at 88% 8%, black, transparent 60%);
  mask-image: radial-gradient(circle at 88% 8%, black, transparent 60%);
  pointer-events:none;
}
.infographic-card > *{ position:relative; z-index:1; }
.info-node{ padding:0.8rem .25rem; }
.info-node .in-icon{
  width:56px; height:56px; border-radius:50%;
  background:#fff; border:2px solid var(--sd-blue); color:var(--sd-blue);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  margin:0 auto .6rem;
  box-shadow:0 8px 20px rgba(14,119,188,0.18);
  transition:transform .2s ease;
}
.info-node:hover .in-icon{ transform:translateY(-3px) scale(1.05); }
.info-node .in-num{ font-family:var(--font-mono); font-weight:700; font-size:1.2rem; color:var(--sd-navy); }
.info-node .in-lbl{ font-size: .9rem;
    color: #000;
    margin-top: .15rem; }
@media (max-width:575px){
  .info-node .in-icon{ width:46px; height:46px; font-size:1.1rem; }
  .info-node .in-num{ font-size:1.05rem; }
}


.trusted-strip{ background:linear-gradient(to right bottom,#0e77bc,#1a9df5 40%,#209df1)!important; padding:5px 0; overflow:hidden; }
.trusted-strip .label{ color:rgba(255,255,255,1); font-size:1.5rem; font-family:var(--font-mono); text-align: center; white-space:nowrap; text-shadow: 0px 1px 1px #1c1c1c; display: block; font-weight: 600;}
.marquee-track{ display:flex; gap:3.2rem; align-items:center; animation:scrollLogos 32s linear infinite; width:max-content; }
.marquee-track img{ height:100px; filter:brightness(0) invert(1); opacity:1; }
@keyframes scrollLogos{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-outer{ overflow:hidden; }

/* =========================================================
   SECTION HEADERS
   ========================================================= */
.section-head{ max-width:640px; }
.section-head h2{ font-size:clamp(1.6rem,2.6vw,2.3rem); font-weight:700; margin-top:.6rem; }
.section-head p{ color:var(--sd-muted); }

/* =========================================================
   PRODUCT / SERVICE CARDS
   ========================================================= */
.sd-card{
  background:#fff;
  border:1px solid var(--sd-border);
  border-radius:var(--radius-lg);
  padding:1.9rem;
  height:100%;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sd-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:transparent; }
.sd-icon{
  width:52px; height:52px;
  border-radius:14px;
 background: #fba73e;
    color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  margin-bottom:1.1rem;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.sd-card:hover .sd-icon{ background:var(--sd-navy); color:#fff; transform:scale(1.06); }
.sd-card h5{ font-family:var(--font-display); font-weight:700; }
.sd-card p{ color:var(--sd-muted); font-size:.92rem; }
.card-link{ font-weight:700; font-size:.88rem; color:var(--sd-blue); display:inline-flex; align-items:center; gap:.35rem; }
.card-link i{ transition:transform .18s ease; }
.sd-card:hover .card-link i{ transform:translateX(4px); }

/* Industries */
.industry-tile{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  height:220px; display:flex; align-items:flex-end;
  color:#fff;
}
.industry-tile .tile-bg{
  position:absolute; inset:0;
  background:linear-gradient(160deg, var(--sd-blue) 0%, var(--sd-navy) 100%);
  transition:transform .35s ease;
}
.industry-tile:hover .tile-bg{ transform:scale(1.06); }
.industry-tile .tile-content{ position:relative; padding:1.25rem; z-index:2; }
.industry-tile .tile-content i{ font-size:1.3rem; color:var(--sd-amber); }
.industry-tile .tile-content h6{ font-weight:700; margin:.4rem 0 0; }

/* Stats / Why choose us */
.stat-block .num{ font-family:var(--font-mono); font-weight:600; font-size:2.1rem; color:var(--sd-navy); }
.stat-block .lbl{ color:var(--sd-muted); font-size:.85rem; }

.feature-row{ display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-bottom:1px dashed var(--sd-border); }
.feature-row:last-child{ border-bottom:none; }
.feature-row .fi{ width:38px; height:38px; border-radius:10px; background:var(--sd-blue-light); color:var(--sd-blue); display:flex; align-items:center; justify-content:center; flex:0 0 38px; }

/* Data quality timeline */
.dq-timeline{ position:relative; padding-left:2.2rem; }
.dq-timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--sd-border); }
.dq-step{ position:relative; padding-bottom:1.9rem; }
.dq-step::before{
  content:""; position:absolute; left:-2.2rem; top:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--sd-amber); border:4px solid var(--sd-blue-light);
}
.dq-step h6{ font-weight:700; margin-bottom:.2rem; }
.dq-step p{ color:var(--sd-muted); font-size:.88rem; margin:0; }

.compare-card{ border-radius:var(--radius-lg); padding:1.6rem; height:100%; }
.compare-card.bad {
    background: #fff5ea;
    border: 1px solid #fba73e;
}
.compare-card.good {
    background: #dff3ff;
    border: 1px solid #1a73b8;
}
.compare-card li{ margin-bottom:.5rem; font-size:.9rem; }

/* Testimonials */
.testi-card{
  background:#fff; border:1px solid var(--sd-border); border-radius:var(--radius-lg);
  padding:1.7rem; height:100%;
}
.testi-card .stars{ color:var(--sd-amber); font-size:.85rem; }
.testi-card p.quote{ font-size:.94rem; color:var(--sd-ink); }
.testi-avatar{
width: 70px;
    height: 70px;
    flex: 0 0 66px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sd-blue-light);
    color: var(--sd-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.testi-avatar img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

/* Testimonials slider — scroll-snap track (native touch swipe on mobile) +
   arrow controls + dots. Autoplay uses track.scrollTo(), never scrollIntoView(),
   since scrollIntoView() drags the whole page along with it. */
.testi-nav{ flex:0 0 auto; }
.testi-arrow{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--sd-border); background:#fff; color:var(--sd-navy);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.testi-arrow:hover{ background:var(--sd-blue); color:#fff; border-color:var(--sd-blue); transform:translateY(-2px); }

.testi-slider{ margin-top:1.5rem; }
.testi-track{
  display:flex; gap:1.25rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.25rem .25rem 1rem;
  margin:-.25rem -.25rem 0;
  scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-slide{
  flex:0 0 calc((100% - 2*1.25rem) / 3);
  min-width:0;
  scroll-snap-align:start;
}
@media (max-width:991px){
  .testi-slide{ flex:0 0 calc((100% - 1.25rem) / 2); }
}
@media (max-width:575px){
  .testi-slide{ flex:0 0 86%; }
}

.testi-dots{ display:flex; justify-content:center; gap:.55rem; margin-top:.5rem; }
.testi-dots button{
  width:8px; height:8px; padding:0; border:none; border-radius:50%;
  background:var(--sd-border); cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.testi-dots button.active{ background:var(--sd-blue); transform:scale(1.35); }
@media (prefers-reduced-motion: reduce){
  .testi-track{ scroll-behavior:auto; }
}





/* =========================================================
   WHY CHOOSE SCOTT'S DIRECTORIES
   Dedicated stylesheet for this section only — kept separate from
   styles.css. Built from Scott's own brand tokens (--sd-blue, --sd-navy,
   --sd-amber, etc. — defined in styles.css and inherited here).
   ========================================================= */

.wc-eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sd-amber);
}

/* =========================================================
   ACCORDION
   ========================================================= */
.wc-accordion{ display:flex; flex-direction:column; gap:.9rem; }

.wc-item{
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--sd-border);
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wc-item.is-open{
  background:var(--sd-blue-light);
  border-color:var(--sd-blue);
  box-shadow:var(--shadow-soft);
}

.wc-item-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:.9rem;
  background:none;
  border:none;
  text-align:left;
  padding:1.1rem 1.4rem;
  cursor:pointer;
}
.wc-toggle-icon{
  width:26px; height:26px; flex:0 0 26px;
  border-radius:7px;
  background:var(--sd-amber);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
  transition:transform .2s ease;
}
.wc-item.is-open .wc-toggle-icon{ background:var(--sd-blue); }

.wc-item-title{
  flex:1 1 auto;
  font-weight:700;
    color: var(--sd-muted) !important;
  font-size:1rem;
}
.wc-chevron{ color:var(--sd-blue); font-size:.85rem; transition:transform .25s ease; flex:0 0 auto; }
.wc-item.is-open .wc-chevron{ transform:rotate(180deg); }

.wc-item-body{
  max-height:0;
  overflow:hidden;
  padding:0 1.4rem;
  transition:max-height .45s ease, padding .3s ease;
}
.wc-item.is-open .wc-item-body{
  max-height:600px;
  padding:0 1.4rem 1.4rem;
}
.wc-item-body p{
  color:var(--sd-muted);
  font-size:.9rem;
  line-height:1.6;
  margin-bottom:.9rem;
}

.wc-checklist{ list-style:none; padding:0; margin:0; }
.wc-checklist li{
  display:flex; align-items:start; gap:.6rem;
  font-size:.88rem; color:var(--sd-ink); font-weight:500;
  padding:.35rem 0;
}
.wc-checklist li i{ color:var(--sd-amber); font-size:1rem; flex:0 0 auto; }

/* =========================================================
   INFOGRAPHIC (right column)
   ========================================================= */
.wc-infographic{
  position:relative;
  min-height:560px;
  padding:1rem;
}

/* Abstract dot-pattern "map" backdrop */
.wc-map{
  position:absolute; inset:0;
  border-radius:var(--radius-lg);
  background-image: radial-gradient(var(--sd-blue) 1.6px, transparent 1.6px);
  background-size:14px 14px;
  -webkit-mask-image: radial-gradient(circle at 65% 40%, black 0%, black 35%, transparent 72%);
  mask-image: radial-gradient(circle at 65% 40%, black 0%, black 35%, transparent 72%);
  opacity:.22;
}

.wc-pin{
  position:absolute;
  color:var(--sd-blue);
  font-size:1.3rem;
  filter:drop-shadow(0 4px 6px rgba(14,42,71,0.25));
}
.wc-pin-1{ top:8%; left:52%; color:var(--sd-amber); font-size:1.15rem; }
.wc-pin-2{ top:20%; left:64%; }
.wc-pin-3{ top:46%; right:6%; }
.wc-pin-4{ top:62%; right:16%; color:var(--sd-amber); font-size:1.1rem; }

/* Floating data cards */
.wc-card{
  position:relative; z-index:2;
  background:#fff;
  border:1px solid var(--sd-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);
  padding:1.1rem 1.3rem;
}
.wc-card-label{
  font-size:.76rem;
  font-weight:600;
  color:var(--sd-muted);
  margin-bottom:.2rem;
}
.wc-card-verified{
  width:min(260px, 70%);
  margin-left:0;
  padding-right:2.6rem;
}
.wc-card-value{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.7rem;
  color:var(--sd-navy);
}
.wc-mini-chart{
  width:100%; height:28px;
  margin-top:.4rem;
  overflow:visible;
}
.wc-mini-chart polyline{
  fill:none;
  stroke:var(--sd-blue);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wc-check-badge{
  position:absolute; top:1rem; right:1rem;
  width:34px; height:34px; border-radius:50%;
  background:var(--sd-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  box-shadow:0 6px 14px rgba(14,119,188,0.35);
}

.wc-card-datapoints{
  margin-top:1.4rem;
  width:min(300px, 82%);
  margin-left:auto;
}
.wc-datapoints-list{ list-style:none; padding:0; margin:.6rem 0 0; }
.wc-datapoints-list li{
  display:flex; align-items:center; gap:.6rem;
  font-size:.82rem; color:var(--sd-ink); font-weight:500;
  padding:.32rem 0;
}
.wc-datapoints-list li i{
  width:22px; height:22px; flex:0 0 22px;
  border-radius:6px;
  background:var(--sd-blue-light); color:var(--sd-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem;
}

/* Real database + shield artwork, right side, below the Key Data Points card */
.wc-database-img {
    position: absolute;
    z-index: 9999;
    right: -50px;
    bottom: -70px;
    width: 232px;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(14, 42, 71, 0.22));
}

@media (max-width:991px){
  .wc-infographic{ min-height:500px; margin-top:2rem; }
}
@media (max-width:575px){
  .wc-infographic{ min-height:440px; padding:.5rem; }
  .wc-card-verified{ width:78%; }
  .wc-card-datapoints{ width:88%; }
  .wc-database-img{ width:120px; }
}

/* =========================================================
   RESOURCES TO HELP YOU GROW
   ========================================================= */
.wc-resource-card{
  position:relative;
  border-radius:var(--radius-lg);
  padding:2rem 1.75rem;
  height:100%;
  min-height:300px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease;
}
.wc-resource-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }

.wc-resource-tag{
  display:inline-flex; align-items:center; gap:.4rem;
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .7rem;
  border-radius:999px;
  margin-bottom:1.4rem;
}
.wc-resource-card h3{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.8rem;
  line-height:1.3;
}
.wc-resource-card p{
  font-size:.88rem;
  line-height:1.55;
  margin-bottom:1.5rem;
  flex:1 1 auto;
}
.wc-resource-link{
  font-weight:700;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  position:relative; z-index:1;
}
.wc-resource-icon{
  position:absolute;
  right:1.25rem; bottom:1.25rem;
  font-size:3.2rem;
  opacity:.14;
  pointer-events:none;
}

.wc-resource-blue{
  background:linear-gradient(155deg, var(--sd-blue) 0%, var(--sd-navy) 100%);
  color:#fff;
}
.wc-resource-blue .wc-resource-tag{ background:rgba(255,255,255,0.15); color:#fff; }
.wc-resource-blue p{ color:rgba(255,255,255,0.85); }
.wc-resource-blue .wc-resource-link{ color:#fff; }
.wc-resource-blue .wc-resource-icon{ color:#fff; }

.wc-resource-light{
  background:var(--sd-bg);
  border:1px solid var(--sd-border);
  color:var(--sd-ink);
}
.wc-resource-light .wc-resource-tag{ background:#fff; color:var(--sd-navy); border:1px solid var(--sd-border); }
.wc-resource-light h3{ color:var(--sd-navy); }
.wc-resource-light .wc-resource-link{ color:var(--sd-blue); }
.wc-resource-light .wc-resource-icon{ color:var(--sd-blue); }

.wc-resource-peach{
  background:linear-gradient(155deg, #FDEBD3 0%, #FBDDB6 100%);
  color:var(--sd-ink);
}
.wc-resource-peach .wc-resource-tag{ background:rgba(255,255,255,0.6); color:var(--sd-amber-dark); }
.wc-resource-peach h3{ color:var(--sd-navy); }
.wc-resource-peach .wc-resource-link{ color:var(--sd-amber-dark); }
.wc-resource-peach .wc-resource-icon{ color:var(--sd-amber-dark); }

.wc-cta-btn{ display:inline-flex; align-items:center; gap:.7rem; }
.wc-cta-circle{
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem;
}












/* Case studies */
.case-card{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--sd-border); transition:box-shadow .2s ease, transform .2s ease; }
.case-card:hover{ box-shadow:var(--shadow-lift); transform:translateY(-4px); }
.case-card .thumb{ height:170px; background:linear-gradient(135deg, var(--sd-blue), var(--sd-navy)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; }

/* Resources / blog */
.blog-card{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--sd-border); height:100%; transition:transform .2s ease, box-shadow .2s ease; }
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.blog-card img{ height:170px; object-fit:cover; width:100%; }
.blog-tag{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sd-blue); }

/* CTA banner */
.cta-banner{
  background:radial-gradient(900px 400px at 85% 0%, var(--sd-blue) 0%, var(--sd-navy) 60%);
  border-radius:28px;
  color:#fff;
  padding:3.2rem;
  position:relative;
  overflow:hidden;
}
.cta-banner::after{
  content:""; position:absolute; right:-60px; bottom:-60px; width:220px; height:220px;
  border:2px dashed rgba(255,255,255,0.15); border-radius:50%;
}
@media (max-width:767px){ 

.px-50 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}
  .cta-banner{ padding:2rem 1.4rem; } }

/* FAQ */
.accordion-sd .accordion-button{ font-weight:700; color:var(--sd-navy); font-family:var(--font-display); background:#fff; }
.accordion-sd .accordion-button:not(.collapsed){ color:var(--sd-blue); box-shadow:none; }
.accordion-sd .accordion-item{ border:1px solid var(--sd-border); border-radius:var(--radius-md) !important; margin-bottom:.8rem; overflow:hidden; }
.accordion-sd .accordion-button::after{ filter:none; }

/* FAQ illustration — custom, minimal "national network" graphic filling the
   left column. Built from Scott's own brand tokens; not a stock asset. */
.faq-illustration{
  position:relative;
  margin-top:2.5rem;
  flex:1;
  min-height:420px;
  display:flex;
}
.faq-illustration-blob{
  position:absolute; z-index:0; border-radius:50%;
  filter:blur(50px); pointer-events:none;
}
.faq-illustration-blob-1{
  width:220px; height:220px; top:-30px; left:-30px;
  background:radial-gradient(circle, var(--sd-blue) 0%, transparent 70%);
  opacity:.16;
}
.faq-illustration-blob-2{
  width:180px; height:180px; bottom:-30px; right:-20px;
  background:radial-gradient(circle, var(--sd-amber) 0%, transparent 70%);
  opacity:.14;
}
.faq-illustration-card{
  position:relative; z-index:1;
  flex:1;
  background:linear-gradient(165deg, #fff 0%, var(--sd-blue-light) 100%);
  border:1px solid var(--sd-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1.5rem;
  overflow:hidden;
}
.faq-illustration-card svg{ width:100%; max-width:340px; height:auto; }

/* Animated dashed links — a slow "data flowing between offices" cue */
.faq-link-line{ stroke-dasharray:6 6; animation:faqDashFlow 2.4s linear infinite; }
@keyframes faqDashFlow{ to{ stroke-dashoffset:-24; } }

/* Pulsing verification rings on the hub + BC node */
.faq-node-pulse{
  transform-origin:center;
  animation:faqNodePulse 2.8s ease-out infinite;
}
.faq-node-pulse-delay{ animation-delay:1.1s; }
@keyframes faqNodePulse{
  0%{ transform:scale(0.85); opacity:.6; }
  75%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1.7); opacity:0; }
}

/* Small floating chips echoing the hero's floaty motif */
.faq-float-chip{
  position:absolute;
  width:42px; height:42px; border-radius:12px;
  background:#fff; border:1px solid var(--sd-border);
  box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  animation:floaty 6s ease-in-out infinite;
}
.faq-float-chip-1{ top:8%; right:6%; --r:-6deg; color:var(--sd-blue); animation-delay:0s; }
.faq-float-chip-2{ bottom:9%; left:5%; --r:5deg; color:var(--sd-amber); animation-delay:1.5s; }

@media (max-width:991px){
  .faq-illustration{ min-height:300px; margin-top:1.75rem; }
  .faq-illustration-card svg{ max-width:280px; }
}
@media (max-width:575px){
  .faq-float-chip{ width:36px; height:36px; font-size:.9rem; }
}

/* Footer */
.site-footer{ background:linear-gradient(to right bottom,#0e77bc,#1a9df5 40%,#209df1)!important; color:rgba(255,255,255,1); }
.site-footer h6{ color:#fff; font-family:var(--font-display); font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.site-footer a{ color:rgba(255,255,255,1); font-size:.94rem; line-height:2; }
.site-footer a:hover{ color:#fff !important; }
.footer-newsletter input{ border-radius:999px 0 0 999px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.05); color:#fff; }
.footer-newsletter input::placeholder{ color:rgba(255,255,255,0.5); }
.footer-newsletter button{ border-radius:0 999px 999px 0; }
.social-dot{ width:38px; height:38px; border-radius:50%; background: rgb(14 123 207 / 59%); display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s ease; }
.social-dot:hover{ background:var(--sd-amber); color:var(--sd-navy); }

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

/* Sticky mobile CTA */
.sticky-cta{
  position:fixed; bottom:0; left:0; right:0; z-index:1040;
  background:#fff; border-top:1px solid var(--sd-border);
  padding:.7rem 1rem; display:flex; gap:.6rem;
  box-shadow:0 -8px 20px rgba(0,0,0,0.06);
}
@media (min-width:992px){ .sticky-cta{ display:none; } }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--sd-blue); outline-offset:2px;
}


@media screen and (min-width: 1024px) and (max-width: 1300px) {
.infographic-card{    padding: 1rem;}
.info-node {padding: 0.5rem .25rem;}
}


@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}



/* =========================================================
   PROUDLY CANADIAN BADGE
   Dedicated stylesheet — deliberately kept separate from styles.css so the
   existing header/logo rules never need to be touched to adjust this badge.
   Uses flexbox for alignment; scales with the logo's own shrink-on-scroll
   animation rather than fighting it.
   ========================================================= */

/* Shared lockup: logo + badge, side by side, vertically centered */
.brand-lockup{
  display:flex;
  align-items:center;
 gap: 1.4rem;
}

.icn{color: #fff;
    font-size: 20px;
    padding-right: 8px;}
/* The badge image itself — width:auto preserves its native aspect ratio at
   any height, so it never stretches or distorts. */
.proudly-canadian-badge{
  display:block;
  height:34px;
  width:auto;
  max-width:none;
  object-fit:contain;
  image-rendering:auto; /* let the browser use its own high-quality scaler for retina */
  flex:0 0 auto;
}

/* Desktop header — shrink in lockstep with the logo when the header
   compacts on scroll (site-header.is-scrolled already toggles the logo's
   height in styles.css; this just mirrors the same transition here). */
.site-header .proudly-canadian-badge{
  height:55px;
  transition:height .25s ease;
}
.site-header.is-scrolled .proudly-canadian-badge{
  height:46px;
}

/* Mobile offcanvas header — smaller lockup, fixed compact size since the
   offcanvas header doesn't have a scroll-shrink state. */
.offcanvas-header .brand-lockup{
  gap:.5rem;
}
.offcanvas-header .proudly-canadian-badge{
  height:24px;
  transition:none;
}

/* Extra-narrow phones — keep both elements visible and proportional rather
   than letting them crowd the header's right-side buttons/hamburger. */
@media (max-width:420px){
.site-header.is-scrolled{padding: 30px 0 10px;}

  .brand-lockup{ gap:.4rem; }
  .site-header .proudly-canadian-badge{ height:38px; }
  .site-header.is-scrolled .proudly-canadian-badge{ height:38px; }
  .offcanvas-header .proudly-canadian-badge{ height:38px; }
}

/* =========================================================
   HERO TRUST BADGE STRIP
   Dedicated stylesheet for the review-platform trust strip shown below the
   hero CTA buttons (e.g. "Users Love Us" + G2 rating + Google rating).
   Kept entirely separate from styles.css — the .hero background/layout
   rules are never touched to add or adjust this strip.
   ========================================================= */

.hero-trust-strip{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.25rem;
  margin-top:1.75rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,0.54);
}

.trust-badge{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:rgba(255,255,255,0.88);
}

/* "Users Love Us" ribbon chip */
.trust-badge-ribbon{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:10px;
  padding:.5rem .85rem;
  font-size:.82rem;
  font-weight:600;
}
.trust-badge-ribbon i{
  color:var(--sd-amber);
  font-size:1.05rem;
}

/* G2 logo — white-filtered so it reads cleanly on the dark hero background */
.trust-badge-logo{
  height:26px;
  width:auto;
  object-fit:contain;
}

/* Google reviews icon — kept in Google's own brand color; everything else
   in this strip uses Scott's tokens, but a platform logo needs to stay
   recognizable as that platform's mark. */
.trust-badge-icon-google{
  width:20px; height:20px; flex:0 0 20px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem;
}
.trust-badge-icon-google i{ color:#4285F4; }

.trust-badge-stars{
  color:var(--sd-amber);
  font-size:.75rem;
  letter-spacing:1px;
  display:inline-flex;
  gap:1px;
}

.trust-badge-rating{
  font-weight:700;
  color:#fff;
  font-size:.85rem;
  font-family:var(--font-display);
}

.trust-divider{
  width:1px;
  height:26px;
  background:rgba(255,255,255,0.16);
  flex:0 0 auto;
}

.btn-sd-outline-o {
    background: transparent;
  color: #f7a522;
  border:solid 1px #f7a522;
    font-weight: 700;
    border-radius: 999px;
    padding: .75rem 1.6rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-sd-outline-o:hover, .btn-sd-outline-o:focus {
    background: #fff9f159;  border:solid 1px #f7a522;
    color: #f7a522;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, #f7a522 35%, transparent);
}


/* ============================================================
   PREMIUM SCROLLING MARQUEE
   Pure CSS — no JavaScript required.
   Infinite seamless loop, right → left, pauses on hover.
   ============================================================ */

/* ---------- Customization variables ---------- */
.marquee {
  --marquee-bg: #172775;          /* strip background            */
  --marquee-color: #ffffff;       /* text color                  */
  --marquee-accent: #e66e48;      /* checkmark / separator color */
  --marquee-height: 56px;         /* strip height                */
  --marquee-gap: 3.5rem;          /* space between items         */
  --marquee-font-size: 1rem;      /* item text size              */
  --marquee-duration: 30s;        /* one full loop — lower = faster */
}

/* ---------- The strip ---------- */
.marquee {
  /* full-width band; overflow:hidden prevents horizontal page scroll */
  width: 100%;
  height: var(--marquee-height);
 background: linear-gradient(to right bottom, #0e77bc, #1a9df5 40%, #0b7bc7) !important;
  overflow: hidden;

  /* vertically center the moving track */
  display: flex;
  align-items: center;

  /* soft fade at both edges for a premium feel */
  -webkit-mask-image: linear-gradient(90deg, #05568b, #000 6%, #000 94%, #05568b);
          mask-image: linear-gradient(90deg, #05568b, #000 6%, #000 94%, #05568b);
}

/* ---------- The moving track ----------
   The track holds TWO identical copies of the content.
   Animating it from 0 to -50% means that the moment the first
   copy has fully scrolled out, the second copy is exactly where
   the first one started — a perfectly seamless loop. */
.marquee__track {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;             /* never narrower than the strip   */
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap); /* gap across the loop seam  */
  animation: marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;      /* smooth, GPU-composited motion   */
}

/* Pause when the user hovers anywhere on the strip */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ---------- One item ---------- */
.marquee__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;         /* items never wrap mid-scroll */
  color: var(--marquee-color);
  font-size: var(--marquee-font-size);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Per-item icon (inline SVG in the HTML).
   Icons inherit --marquee-accent via currentColor. */
.marquee__icon {
  display: inline-flex;
  width: var(--marquee-icon-size, 1.25em);
  height: var(--marquee-icon-size, 1.25em);
  color: #fff;
  flex-shrink: 0;
}

.marquee__icon svg {
  width: 100%;
  height: 100%;
}

/* ---------- The animation ---------- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly one copy's width */
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
  .marquee {
    --marquee-height: 46px;
    --marquee-gap: 2rem;
    --marquee-font-size: 0.875rem;
    --marquee-duration: 22s;   /* slightly faster feels right on small screens */
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}









@media (max-width:575px){
  .hero-trust-strip{ gap:.85rem; margin-top:1.4rem; padding-top:1rem; }
  .trust-divider{ display:none; }
  .trust-badge-ribbon{ padding:.4rem .7rem; font-size:.78rem; }
}
/* =========================================================
   ABOUT SECTION — expandable "Read More / Read Less" content + stat cards
   Dedicated stylesheet — kept separate from styles.css so the section's
   existing layout rules (sd-card, feature-row, etc.) never need to change
   to adjust this component.
   ========================================================= */

.about-intro{  text-align:left; }

.about-intro .eyebrow{ justify-content:center; }

.about-expandable{
  position:relative;
  max-height:210px;
  overflow:hidden;
  margin-top:1.5rem;
  transition:max-height .6s ease;
}
/*.about-expandable::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:100px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--sd-white) 88%);
  transition:opacity .35s ease;
  pointer-events:none;
}*/
.about-expandable.is-expanded{ max-height:2400px; }
.about-expandable.is-expanded::after{ opacity:0; }

.about-callout{
  background:linear-gradient(160deg, #fff3e5 0%, #fff 120%);
  border:1px solid var(--sd-border);
  border-radius:var(--radius-lg);
  padding:2rem 2.25rem;
  text-align:left;
  margin:0 0 1.75rem;
}

.read-more-toggle{ display:flex; justify-content:center; margin-top:1.75rem; }
.read-more-toggle button{ min-width:160px; }
.read-more-toggle button i{ transition:transform .25s ease; }
.read-more-toggle button[aria-expanded="true"] i{ transform:rotate(180deg); }

/* Database stat cards — icon, big number, label, with lift-and-glow hover */
.stat-card-wrap{ position:relative; }
.stat-card-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1rem;
}
.stat-card{
  background:#fff;
  border:1px solid var(--sd-border);
  border-radius:var(--radius-md);
  padding:1.3rem 1rem;
  text-align:center;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.stat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:transparent; }
.stat-card .sc-icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--sd-blue-light); color:var(--sd-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin:0 auto .75rem;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.stat-card:hover .sc-icon{ background:var(--sd-navy); color:#fff; transform:scale(1.08) rotate(-4deg); }
.stat-card .sc-num{ font-family:var(--font-mono); font-weight:700; font-size:1.25rem; color:var(--sd-navy); }
.stat-card .sc-lbl{ font-size:.72rem; color:var(--sd-muted); margin-top:.2rem; line-height:1.3; }
@media (max-width:767px){ .stat-card-grid{ grid-template-columns:repeat(2, 1fr); } }

/* "60+ Years of Experience" badge — overlaps the stat-card grid's top-left corner */
.experience-badge {
    position: absolute;
    top: -36px;
    right: 84px;
    z-index: 2;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: var(--sd-navy);
    color: #fff;
    border: 4px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.15;
    box-shadow: var(--shadow-lift);
}
.experience-badge .num{ font-size:1.1rem; font-family:var(--font-mono); }
@media (max-width:575px){
  .experience-badge{ width:74px; height:74px; font-size:.58rem; top:-10px; left:-10px; }
  .experience-badge .num{ font-size:.9rem; }
}

/* Mini info cards (Online Subscriptions / SEO) alongside the stat grid */
.mini-info-card{
  background:#fff;
  border:1px solid var(--sd-border);
  border-radius:var(--radius-md);
  padding:1.4rem 1.5rem;
  margin-bottom:1.25rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.mini-info-card:last-child{ margin-bottom:0; }
.mini-info-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.mini-info-card h6 {
    font-weight: 700;
    color: #282828;
    margin-bottom: 15px;
}
.mini-info-card p{ font-size:.86rem; color:var(--sd-muted); margin-bottom:.7rem; }


.about-area2 img

 {
    border-radius: 50%;
    max-width:400px;
}


.hero h1{text-shadow: 0px 1px 1px #1c1c1c;}
#products-section .sd-card p {min-height: 115px;}
.px-50 {
    padding-right: 7rem ;
    padding-left: 7rem ;



/* Bordered (outline) CTA */
.btn-sd-outline {
    background: transparent;
    border: 2px solid var(--sd-amber);
    color: var(--sd-amber);
    font-weight: 700;
    border-radius: 999px;
    padding: .75rem 1.6rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}



.btn-sd-outline:hover,.btn-sd-outline:focus {
    background: #fff;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--sd-amber) 35%, transparent);
}