/* ==========================================================================
   Nairobi Online — custom theme layer (sits on top of Bootstrap 3)
   Font: DM Sans (self-hosted, see fonts.css). No third-party hosts.
   ========================================================================== */

:root{
  --brand:        #316ca6;
  --brand-d:      #285a8b;
  --gold:         #f7c948;
  --cream:        #fffcf5;
  --stone:        #f6f5f2;
  --line:         #eae8e3;
  --line-soft:    #f0eeea;
  --offwhite:     #f8f6f1;
  --ink:          #000;
  --muted:        #5f5f5f;
  --muted-2:      #6f6d69;
  --muted-3:      #77746f;
  --mint:         #ddf5e4;
  --green:        #1a8a3b;
  --ring:         #316ca6;
}

/* ---------------- Base ---------------- */
html, body{ min-height:100%; }
body{
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6,.navbar-brand,.btn{
  font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
a:hover, a:focus{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
::selection{ background:#000; color:#fff; }

.container{ width:auto; max-width:1280px; padding-left:24px; padding-right:24px; }
@media (min-width:1024px){ .container{ padding-left:32px; padding-right:32px; } }

/* Equal-height Bootstrap rows */
.row-flex{ display:flex; flex-wrap:wrap; }
.row-flex:before, .row-flex:after{ display:none; }
.row-flex > [class*="col-"]{ display:flex; flex-direction:column; margin-bottom:20px; }
.row-center{ align-items:center; }

/* Skip link */
.skip-link:focus{
  position:fixed; left:16px; top:16px; z-index:2000; width:auto; height:auto; clip:auto; margin:0;
  background:#000; color:#fff; padding:8px 20px; border-radius:999px;
}

/* Shared type + button patterns */
.eyebrow{
  margin-bottom:20px; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-3);
}
.section{ padding:64px 0; }
@media (min-width:1024px){ .section{ padding:96px 0; } .section-lg{ padding:112px 0; } }
.section-white{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-title{
  font-size:28px; font-weight:700; line-height:1.05; letter-spacing:-.035em;
}
@media (min-width:640px){ .section-title{ font-size:34px; } }
@media (min-width:1024px){ .section-title{ font-size:38px; } .section-title-xl{ font-size:44px; } }
.section-lead{ margin-top:20px; max-width:460px; font-size:15.5px; line-height:1.6; color:var(--muted); }
.section-head-center{ text-align:center; }
.section-head-center .section-title{ max-width:760px; margin-left:auto; margin-right:auto; }
.section-head-center .section-lead{ margin:16px auto 0; max-width:560px; font-size:16px; }

.btn-pill{
  display:inline-block; border:0; border-radius:999px; padding:13px 28px;
  font-size:14.5px; font-weight:500; line-height:1.3; transition:background-color .15s, color .15s;
}
.btn-pill-dark{ background:#000; color:#fff; }
.btn-pill-dark:hover, .btn-pill-dark:focus{ background:#27272a; color:#fff; }
.btn-pill-gold{ background:var(--gold); color:#000; font-weight:700; }
.btn-pill-gold:hover, .btn-pill-gold:focus{ background:#ffd96b; color:#000; }
.btn-pill-light{ background:#fff; color:#000; border:1px solid var(--line); }
.btn-pill-light:hover, .btn-pill-light:focus{ background:var(--line-soft); color:#000; }
.link-underline{
  font-weight:500; text-decoration:underline; text-decoration-color:#d6d3ce; text-underline-offset:4px;
}
.link-underline:hover, .link-underline:focus{ text-decoration:underline; text-decoration-color:currentColor; }

/* ==========================================================================
   Site header + main navigation
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--brand);
  border-bottom:1px solid var(--line);
}
.navbar-main{
  background:transparent; border:0; border-radius:0; margin:0; min-height:56px;
}
.navbar-main > .container{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; min-height:56px;
}
.navbar-main > .container:before, .navbar-main > .container:after{ display:none; }

/* Brand: "online" in gold. Large bold text keeps the gold above 3:1 on the blue. */
.navbar-main .navbar-brand{
  float:none; order:1; height:auto; padding:0; margin:0; display:inline-block;
  font-size:22px; font-weight:800; line-height:1.1; letter-spacing:-.03em; text-transform:lowercase;
  color:var(--offwhite);
}
.navbar-main .navbar-brand:hover, .navbar-main .navbar-brand:focus{ color:#fff; }
.navbar-main .navbar-brand .brand-accent{ color:var(--gold); }

/* Right-hand actions + hamburger */
.header-actions{ order:2; margin-left:auto; display:flex; align-items:center; }
.header-actions > *{ margin-left:12px; }
.header-mail{ color:var(--offwhite); display:inline-flex; padding:6px; }
.header-mail:hover, .header-mail:focus{ color:#fff; }
.header-mail svg{ width:24px; height:24px; fill:currentColor; }
.header-call{
  display:inline-flex; align-items:center; justify-content:center; background:#000; color:#fff;
  border-radius:999px; padding:8px; transition:background-color .15s;
}
.header-call:hover, .header-call:focus{ background:#27272a; color:#fff; }
.header-call svg{ width:16px; height:16px; fill:#fff; }

.navbar-main .navbar-toggle{
  float:none; margin:0 0 0 12px; width:36px; height:36px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); border-radius:999px;
}
.navbar-main .navbar-toggle:hover, .navbar-main .navbar-toggle:focus{ background:var(--line-soft); }
.navbar-main .navbar-toggle .icon-bar{
  display:block; width:16px; height:2px; background:#000; margin:0; transition:transform .2s, opacity .2s;
}
.navbar-main .navbar-toggle .icon-bar + .icon-bar{ margin-top:4px; }
.navbar-main .navbar-toggle.is-open .icon-bar:nth-child(2){ transform:translateY(6px) rotate(45deg); }
.navbar-main .navbar-toggle.is-open .icon-bar:nth-child(3){ opacity:0; }
.navbar-main .navbar-toggle.is-open .icon-bar:nth-child(4){ transform:translateY(-6px) rotate(-45deg); }

/* Main menu links — off-white on the brand blue, in every state */
.navbar-main .navbar-collapse{
  order:3; flex:0 0 100%; padding:0 0 12px; border-top:1px solid rgba(255,255,255,.18); box-shadow:none;
}
.navbar-main .navbar-collapse.in{ max-height:calc(100vh - 64px); overflow-y:auto; }
.navbar-main .navbar-nav{ float:none; margin:8px 0; }
.navbar-main .navbar-nav > li{ float:none; }
.navbar-main .navbar-nav > li > a,
.navbar-main .navbar-nav > li > a:visited{
  color:var(--offwhite); font-size:14px; font-weight:500; line-height:20px; padding:12px 14px;
  border-radius:12px; background:transparent;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > li > a:active,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus{
  color:#fff; background:rgba(255,255,255,.14);
}
.navbar-main .navbar-nav > li > a:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.navbar-main .caret{ margin-left:4px; transition:transform .2s; }
.navbar-main .open > .dropdown-toggle .caret{ transform:rotate(180deg); }

/* Mega menu — mobile (accordion inside the collapsed menu) */
.mega-menu{ padding:0; }
.mega-col{ padding:4px 0 8px; }
.mega-heading{
  margin:8px 14px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(248,246,241,.8);
}
.mega-list{ list-style:none; }
.mega-list > li{ margin-bottom:6px; }
.mega-item, .mega-link{
  display:flex; align-items:center; border-radius:12px; padding:10px 14px;
  background:rgba(255,255,255,.1); color:var(--offwhite); font-size:13.5px; font-weight:500;
}
.mega-item:hover, .mega-item:focus, .mega-link:hover, .mega-link:focus{ background:rgba(255,255,255,.2); color:#fff; }
.mega-icon{
  flex:0 0 32px; width:32px; height:32px; margin-right:12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:rgba(255,255,255,.18); color:inherit;
}
.mega-title{ display:block; font-weight:600; line-height:1.2; }
.mega-sub{ display:none; }
.mega-arrow{ display:none; }
.mega-feature, .mega-footer{ display:none; }

/* Mega menu — desktop panel */
@media (min-width:768px){
  .navbar-main .navbar-collapse{
    order:2; flex:1 1 auto; padding:0; border-top:0;
    display:flex !important; justify-content:center; align-items:center;
    height:auto !important; overflow:visible !important;
  }
  .header-actions{ order:3; margin-left:0; }
  .navbar-main .navbar-toggle{ display:none; }
  .navbar-main .navbar-nav{ display:flex; margin:0; }
  .navbar-main .navbar-nav > li > a{ padding:18px 16px; border-radius:0; }
  .navbar-main .navbar-nav > li > a:hover,
  .navbar-main .navbar-nav > li > a:focus,
  .navbar-main .navbar-nav > .open > a{ background:transparent; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; text-decoration-color:var(--gold); }
  .navbar-main .navbar-nav > li > a:focus-visible{ text-decoration:underline; }

  .navbar-nav > li.dropdown-mega{ position:static; }
  .dropdown-mega .dropdown-menu.mega-menu{
    left:50%; right:auto; width:900px; max-width:calc(100vw - 30px); margin-top:0; padding:0;
    transform:translateX(-50%); overflow:hidden;
    background:#fff; border:1px solid var(--line); border-radius:28px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.22), 0 8px 24px -12px rgba(0,0,0,.12);
    color:#000;
  }
  .dropdown-mega.open > .dropdown-menu{ animation:megaIn .3s cubic-bezier(.16,1,.3,1); }
  @keyframes megaIn{
    from{ opacity:0; transform:translate(-50%,8px); }
    to{ opacity:1; transform:translate(-50%,0); }
  }
  .mega-body{ display:flex; }
  .mega-col{ padding:24px 20px; }
  .mega-col-primary{ flex:1.1 1 0; }
  .mega-col-secondary{ flex:1 1 0; border-left:1px solid var(--line-soft); }
  .mega-heading{ margin:0 0 16px; color:var(--muted-3); }
  .mega-list > li{ margin-bottom:4px; }
  .mega-item, .mega-link{ background:transparent; color:#000; padding:12px; border-radius:14px; justify-content:space-between; }
  .mega-item{ justify-content:flex-start; }
  .mega-item:hover, .mega-item:focus, .mega-link:hover, .mega-link:focus{ background:var(--stone); color:#000; }
  .mega-icon{ border:1px solid var(--line); background:var(--stone); }
  .mega-item:hover .mega-icon{ background:#fff; }
  .mega-sub{ display:block; margin-top:4px; font-size:12px; line-height:1; font-weight:400; color:var(--muted-2); }
  .mega-link .mega-title{ font-weight:500; }
  .mega-link .mega-sub{ font-size:11.5px; color:var(--muted-3); }
  .mega-arrow{ display:inline; font-size:11px; opacity:0; transition:opacity .15s; }
  .mega-link:hover .mega-arrow, .mega-link:focus .mega-arrow{ opacity:1; }

  .mega-feature{ display:block; flex:.95 1 0; margin:8px; padding:12px; border-radius:22px; background:var(--stone); }
  .mega-feature-inner{
    height:100%; display:flex; flex-direction:column; padding:16px; border-radius:18px;
    background:var(--brand); color:#fff;
  }
  .mega-feature-head{ display:flex; align-items:center; justify-content:space-between; }
  .mega-feature-label{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); }
  .mega-star{ width:24px; height:24px; border-radius:50%; background:#fff; color:#000; font-size:11px; display:flex; align-items:center; justify-content:center; }
  .mega-skeleton{ margin-top:16px; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.1); }
  .mega-skeleton-top{ display:flex; align-items:center; }
  .mega-skeleton .dot{ width:28px; height:28px; margin-right:8px; border-radius:50%; background:#fff; color:#000; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .mega-skeleton .bar{ display:block; height:8px; border-radius:999px; background:rgba(255,255,255,.18); }
  .mega-skeleton .bar-w16{ width:64px; }
  .mega-skeleton .bar-w100{ width:100%; margin-top:12px; }
  .mega-skeleton .bar-w70{ width:70%; margin-top:8px; }
  .mega-skeleton .tiles{ display:flex; margin-top:12px; }
  .mega-skeleton .tiles span{ flex:1; height:40px; margin-right:6px; border-radius:8px; background:rgba(255,255,255,.15); }
  .mega-skeleton .tiles span:last-child{ margin-right:0; }
  .mega-skeleton .tiles span.on{ background:#fff; }
  .mega-feature-title{ margin-top:16px; font-size:14.5px; font-weight:600; line-height:1.2; }
  .mega-feature-text{ margin-top:8px; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.85); }
  .mega-feature-cta{ margin-top:auto; padding-top:20px; }
  .mega-feature-cta .btn-feature{
    display:flex; align-items:center; justify-content:center; width:100%; padding:10px;
    border-radius:999px; background:#fff; color:#000; font-size:13px; font-weight:500;
  }
  .mega-feature-cta .btn-feature:hover, .mega-feature-cta .btn-feature:focus{ background:var(--line-soft); color:#000; }
  .mega-feature-cta small{ display:block; margin-top:8px; text-align:center; font-size:11px; color:rgba(255,255,255,.85); }

  .mega-footer{
    display:flex; align-items:center; justify-content:space-between; height:40px; padding:0 24px;
    border-top:1px solid var(--line); background:var(--cream); font-size:12px;
  }
  .mega-status{ display:flex; align-items:center; color:var(--muted-2); }
  .mega-status:before{ content:""; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#10b981; }
  .mega-footer a{ font-weight:500; color:#000; text-decoration:underline; text-decoration-color:#d6d3ce; text-underline-offset:4px; }
  .mega-footer a:hover, .mega-footer a:focus{ text-decoration-color:#000; }
}
@media (max-width:991px){ .mega-feature{ display:none !important; } }

/* ==========================================================================
   Hero — overlay style, background photo
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background-color:#1d3a57;
  background-image:url("https://nairobionline.com/images/nairobi-online.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding:72px 0 64px;
}
.hero-overlay{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:0;
  background:linear-gradient(105deg, rgba(8,26,46,.93) 0%, rgba(14,44,76,.84) 48%, rgba(49,108,166,.62) 100%);
}
.hero-sheen{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; pointer-events:none;
  background:#00539C;
}
.hero > .container{ position:relative; z-index:2; }
.hero .eyebrow{ color:rgba(255,255,255,.88); }
.hero h1{
  font-size:32px; font-weight:800; line-height:.95; letter-spacing:-.04em;
  text-shadow:0 2px 14px rgba(0,0,0,.3);
}
.hero-lead{ margin-top:24px; max-width:520px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.9); }
.hero-points{ list-style:none; margin-top:32px; }
.hero-points li{ display:flex; align-items:flex-start; margin-bottom:14px; font-size:14.5px; font-weight:500; line-height:1.4; letter-spacing:-.01em; }
.check-icon{
  flex:0 0 20px; width:20px; height:20px; margin:1px 12px 0 0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--mint);
}
.check-icon svg{ width:12px; height:12px; fill:none; stroke:var(--green); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hero-cta{ margin-top:36px; display:flex; align-items:center; flex-wrap:wrap; }
.hero-cta .btn-pill{ margin-right:20px; }
.hero-cta .link-underline{ color:#fff; text-decoration-color:rgba(255,255,255,.5); font-size:14.5px; }
.hero-cta .link-underline:hover, .hero-cta .link-underline:focus{ text-decoration-color:#fff; }

.hero-panel{
  position:relative; overflow:hidden; margin-top:40px; padding:14px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); border-radius:28px;
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 12px 32px rgba(4,20,36,.28);
}
.stat-row{ display:flex; }
.stat-tile{ flex:1; margin-right:10px; padding:10px 12px; border-radius:14px; background:#fff; color:#000; }
.stat-tile:last-child{ margin-right:0; background:#000; color:#fff; }
.stat-label{ display:block; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.stat-tile:last-child .stat-label{ color:rgba(255,255,255,.85); }
.stat-value{ display:block; font-size:18px; font-weight:700; letter-spacing:-.025em; line-height:1.3; }

@media (min-width:640px){ .hero h1{ font-size:54px; } }
@media (min-width:1024px){
  .hero{ padding:112px 0 104px; }
  .hero h1{ font-size:72px; }
  .hero-lead{ font-size:17px; }
  .hero-panel{ margin-top:0; padding:14px; }
}

/* ==========================================================================
   Areas strip
   ========================================================================== */
.areas{ background:rgba(255,255,255,.4); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.areas .container{ display:flex; flex-wrap:wrap; align-items:center; padding-top:28px; padding-bottom:28px; }
.areas .container:before, .areas .container:after{ display:none; }
.areas-label{ margin:0 40px 0 0; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-3); }
.areas-list{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; font-size:15px; font-weight:600; letter-spacing:-.02em; color:var(--muted-3); }
.areas-list li{ margin:6px 28px 6px 0; }
@media (min-width:1024px){ .areas-list li{ margin-right:48px; } }
.areas-list a:hover, .areas-list a:focus{ opacity:.6; }

/* ==========================================================================
   Service cards
   ========================================================================== */
.service-card{
  display:flex; flex-direction:column; width:100%; flex:1;
  padding:20px; border:1px solid var(--line); border-radius:22px; background:var(--stone);
}
@media (min-width:1024px){ .service-card{ padding:24px; } }
.service-icon{
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.service-card h3{ margin-top:24px; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.service-card p{ margin-top:4px; font-size:13px; line-height:1.4; color:var(--muted-2); }
.service-card .link-underline{ display:inline-block; margin-top:12px; font-size:13px; align-self:flex-start; }
.service-card-brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.service-card-dark{ background:#000; border-color:#000; color:#fff; }
.service-card-brand h3, .service-card-dark h3{ margin-top:0; }
.service-card-brand p, .service-card-dark p{ color:rgba(255,255,255,.85); }
.service-card-brand .btn-wide{
  margin-top:auto; display:flex; align-items:center; justify-content:center; width:100%;
  padding:10px; border-radius:999px; background:#fff; color:#000; font-size:13px; font-weight:500;
}
.service-card-brand .btn-wide span{ margin-left:8px; }
.service-card-brand .btn-wide:hover, .service-card-brand .btn-wide:focus{ background:var(--line-soft); color:#000; }
.service-card-dark .btn-row{ margin-top:auto; padding-top:16px; display:flex; }
.service-card-dark .btn-row a{
  flex:1; padding:10px; border-radius:999px; text-align:center; font-size:13px; font-weight:500;
}
.service-card-dark .btn-row a:first-child{ margin-right:12px; background:#fff; color:#000; }
.service-card-dark .btn-row a:first-child:hover, .service-card-dark .btn-row a:first-child:focus{ background:var(--line-soft); }
.service-card-dark .btn-row a:last-child{ border:1px solid rgba(255,255,255,.2); color:#fff; }
.service-card-dark .btn-row a:last-child:hover, .service-card-dark .btn-row a:last-child:focus{ background:rgba(255,255,255,.1); }

/* Listing / article cards */
.list-card{ flex:1; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--stone); }
@media (min-width:1024px){ .list-card{ padding:24px; } }
.list-card-title{ display:block; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.list-card-title a:hover, .list-card-title a:focus{ opacity:.6; }
.list-card p{ margin-top:4px; font-size:14px; line-height:1.4; color:var(--muted-2); }
.list-card-article{ border-radius:22px; }
.list-card-article h3{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.list-card-article h3 a:hover, .list-card-article h3 a:focus{ opacity:.6; }
.list-card-article p{ font-size:13px; }
.card-grid{ list-style:none; margin-top:40px; }
.service-grid{ list-style:none; margin-top:56px; }

/* ==========================================================================
   Brand block (quote + directory stats)
   ========================================================================== */
.brand-block{ padding:32px; border-radius:32px; background:var(--brand); color:#fff; }
@media (min-width:1024px){ .brand-block{ padding:48px; } }
.quote-text{ margin:0; padding:0; border:0; font-size:22px; font-weight:600; line-height:1.15; letter-spacing:-.02em; }
@media (min-width:1024px){ .quote-text{ font-size:28px; } }
.quote-text p{ font-size:inherit; }
.brand-block figcaption{ margin-top:32px; font-size:13px; font-weight:600; }
.glass-card{ margin-top:32px; padding:20px; border:1px solid rgba(255,255,255,.15); border-radius:20px; background:rgba(255,255,255,.1); }
@media (min-width:1024px){ .glass-card{ margin-top:0; } }
.glass-card-title{ font-size:13px; font-weight:600; }
.glass-card-text{ margin:4px 0 16px; font-size:12.5px; line-height:1.4; color:rgba(255,255,255,.85); }
.stat-dl{ display:flex; margin:0; }
.stat-dl > div{ flex:1; padding:0 16px; border-left:1px solid rgba(255,255,255,.15); }
.stat-dl > div:first-child{ padding-left:0; border-left:0; }
.stat-dl > div:last-child{ padding-right:0; }
.stat-dl dd{ margin:0; font-size:20px; font-weight:700; }
.stat-dl dt{ margin-top:4px; font-size:11px; font-weight:400; line-height:1.25; color:rgba(255,255,255,.85); }
.glass-link{
  margin-top:24px; display:flex; align-items:center; justify-content:space-between;
  padding:16px; border-radius:12px; background:#fff; color:#000; font-size:12px; font-weight:500;
}
.glass-link:hover, .glass-link:focus{ color:#000; background:var(--line-soft); }
.glass-link .arrow{ width:24px; height:24px; border-radius:50%; background:#000; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }

/* Standalone quote */
.quote-solo{ max-width:820px; margin:0 auto; padding:0 24px; text-align:center; }
.quote-solo figcaption{ margin-top:24px; font-size:13px; font-weight:600; }

/* ==========================================================================
   Digital marketing
   ========================================================================== */
.market-copy .btn-pill{ margin-top:32px; }
.market-panel{ margin-top:40px; padding:16px; border:1px solid var(--line); border-radius:28px; background:var(--stone); }
@media (min-width:1024px){ .market-panel{ margin-top:0; padding:24px; } }
.market-list{ list-style:none; margin:0 -8px -20px; }
.market-list > li{ padding:0 8px; }
.market-card{ flex:1; padding:16px; border:1px solid var(--line); border-radius:18px; background:#fff; display:flex; flex-direction:column; }
.market-tag{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-3); }
.market-card h3{ margin-top:8px; font-size:13px; font-weight:600; }
.market-card .market-sum{ margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--muted-2); }
.market-card ul{ margin-top:12px; list-style:none; font-size:12px; color:var(--muted-2); }
.market-card ul li{ margin-bottom:4px; }
.market-card .link-underline{ margin-top:auto; padding-top:12px; font-size:12px; align-self:flex-start; }

/* ==========================================================================
   CTA + contact
   ========================================================================== */
.cta{ padding:80px 0; text-align:center; background:var(--stone); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
@media (min-width:1024px){ .cta{ padding:128px 0; } }
.cta h2{ font-size:32px; font-weight:800; line-height:.95; letter-spacing:-.04em; }
@media (min-width:1024px){ .cta h2{ font-size:54px; } }
.cta-inner{ max-width:820px; margin:0 auto; padding:0 24px; }
.cta p.cta-lead{ max-width:560px; margin:24px auto 0; font-size:16px; line-height:1.6; color:var(--muted); }
.cta-buttons{ margin-top:36px; }
.cta-buttons .btn-pill{ margin:0 8px 10px; padding-left:32px; padding-right:32px; }

.contact-panel{ padding:32px; border:1px solid var(--line); border-radius:32px; background:var(--stone); overflow:hidden; }
@media (min-width:1024px){ .contact-panel{ padding:56px; } }
.contact-panel h2{ font-size:30px; font-weight:800; line-height:.95; letter-spacing:-.04em; }
@media (min-width:1024px){ .contact-panel h2{ font-size:44px; } }
.contact-list{ list-style:none; margin-top:32px; font-size:14px; font-weight:500; }
.contact-list li{ display:flex; margin-bottom:12px; }
.contact-list li > span:first-child{ margin-right:12px; color:var(--muted-3); }
.contact-list a:hover, .contact-list a:focus{ text-decoration:underline; }
.form-card{ margin-top:32px; padding:24px; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 30px 80px -40px rgba(0,0,0,.3); }
@media (min-width:1024px){ .form-card{ margin-top:0; } }
.form-card h3{ font-size:18px; font-weight:700; letter-spacing:-.025em; }
.form-card form{ margin-top:20px; }
.form-card .form-control{
  height:auto; margin-bottom:12px; padding:12px 16px; font-size:14px; line-height:1.4;
  border:1px solid var(--line); border-radius:12px; background:var(--cream); color:#000; box-shadow:none;
}
.form-card .form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(49,108,166,.25); }
.form-card .form-control::-webkit-input-placeholder{ color:var(--muted-2); opacity:1; }
.form-card .form-control::-moz-placeholder{ color:var(--muted-2); opacity:1; }
.form-card .form-control:-ms-input-placeholder{ color:var(--muted-2); }
.form-card .form-control::placeholder{ color:var(--muted-2); opacity:1; }
.form-card textarea.form-control{ height:90px; resize:vertical; }
.form-card .btn-pill{ padding:14px 28px; font-size:14px; }
.form-status{ margin-top:12px; font-size:13px; color:var(--muted-2); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ padding:48px 0 40px; font-size:12px; color:var(--muted-3); }
.site-footer .container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; flex-direction:column; text-align:center; }
.site-footer .container:before, .site-footer .container:after{ display:none; }
.site-footer p{ margin-bottom:16px; }
.site-footer a:hover, .site-footer a:focus{ color:#000; }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; }
.footer-nav a{ margin:0 12px 8px; }
@media (min-width:1024px){
  .site-footer .container{ flex-direction:row; text-align:left; }
  .site-footer p{ margin-bottom:0; }
  .footer-nav a{ margin:0 0 0 24px; }
}

/* ---------------- Responsive tweaks ---------------- */
@media (max-width:767px){
  .hero{ text-align:left; }
  .hero-cta .btn-pill{ margin-bottom:12px; }
  .header-call{ padding:8px; }
}
@media (min-width:1024px){
  .header-call{ padding:8px 24px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}






/* Article pages only — loads after style.css, reuses its tokens and components. Mobile-first. */
body.page-article{background:var(--cream)}
.navbar-main .navbar-nav>li>a[aria-current]{color:#fff;background:rgba(255,255,255,.14)}
@media (min-width:768px){.navbar-main .navbar-nav>li>a[aria-current]{background:transparent;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--gold)}}

/* breadcrumb */
.crumbs{background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted-2)}
.crumbs ol{display:flex;flex-wrap:wrap;margin:0;padding:12px 0;list-style:none;justify-content: center;
  align-items: center;}
.crumbs li+li:before{content:"›";margin:0 8px;color:var(--muted-3)}
.crumbs a{text-decoration:underline;text-decoration-color:#d6d3ce;text-underline-offset:3px}
.crumbs a:hover,.crumbs a:focus{text-decoration-color:currentColor}

/* hero — reuses .hero overlay, just without the photo and with less padding */
.hero.art-hero{background-image:none;padding:20px 0 16px}
.art-hero h1{font-size:30px;line-height:1.05;overflow-wrap:anywhere}
.art-meta{display:flex;flex-wrap:wrap;margin:20px 0 0;padding:0;list-style:none;font-size:13px;color:rgba(255,255,255,.9)}
.art-meta li{display:flex;align-items:center;margin:0 20px 8px 0}
.art-meta svg{width:15px;height:15px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.art-share{display:flex;align-items:center;margin-top:12px}
.art-share-label{margin-right:12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:8px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background-color .15s,color .15s}
.share-btn:hover,.share-btn:focus{background:#fff;color:#000}
.share-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* single reading column */
.art-col{max-width:760px;margin-left:auto;margin-right:auto}
.art-body-wrap{padding:24px 0 8px}

/* table of contents */
.toc{margin-bottom:20px;border:1px solid var(--line);border-radius:22px;background:var(--stone)}
.toc summary{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:14px;font-weight:700;letter-spacing:-.01em;cursor:pointer;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.toc[open] summary svg{transform:rotate(180deg)}
.toc-list{margin:0;padding:0 10px 12px;list-style:none}
.toc-list li{border-top:1px solid var(--line)}
.toc-list a{display:block;padding:10px 0;font-size:13px;line-height:1.2;color:var(--muted)}
.toc-list a:hover,.toc-list a:focus,.toc-list a[aria-current]{color:#000;font-weight:600}
.toc-h3{padding-left:14px}.toc-h4{padding-left:28px}

.art-ad{margin-bottom:20px;overflow:hidden;text-align:center}

/* article card */
.art-card{padding:20px;border:1px solid var(--line);border-radius:22px;background:#fff;overflow-wrap:anywhere}
.art-feat{margin:0 0 20px}
.art-feat img,.art-card figure img{width:100%;border-radius:14px}
.art-feat img{aspect-ratio:1200/630;object-fit:cover}
.art-card h2,.art-card h3,.art-card h4{scroll-margin-top:72px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.art-card h2{margin:1.6em 0 .5em;font-size:24px}
.art-card h3{margin:1.4em 0 .4em;font-size:20px}
.art-card h4{margin:1.2em 0 .4em;font-size:17px}
.art-card p{margin:0 0 1em;font-size:16px;line-height:1.7;color:var(--muted)}
.art-card ul,.art-card ol{margin:0 0 1em;padding-left:22px;line-height:1.7;color:var(--muted)}
.art-card li{margin-bottom:.4em}
.art-card a:not(.btn-pill){text-decoration:underline;text-decoration-color:#d6d3ce;text-underline-offset:4px;font-weight:500;color:var(--brand-d)}
.art-card a:not(.btn-pill):hover,.art-card a:not(.btn-pill):focus{text-decoration-color:currentColor}
.art-card blockquote{margin:1.4em 0;padding:18px 20px;border:0;border-radius:18px;background:var(--brand);color:#fff;font-size:18px;font-weight:600;line-height:1.3}
.art-card blockquote p{margin:0;font-size:inherit;color:inherit}
.art-card figure{margin:1.4em 0}
.art-card figcaption{margin-top:8px;font-size:13px;color:var(--muted-2)}
.art-card pre{overflow-x:auto;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--stone);font-size:13px}
.tbl-wrap{margin:1.4em 0;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.tbl-wrap table{width:100%;min-width:480px;margin:0;border-collapse:collapse;font-size:14px}
.tbl-wrap th,.tbl-wrap td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
.tbl-wrap th{background:var(--stone)}
.art-next-inline{margin-top:1.5em;padding:14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--stone);font-size:15px}
.art-more{margin-top:1.4em;font-weight:600}
.art-edit{display:inline-block;margin-top:12px}

/* author — .list-card look */
.art-author{display:flex;margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--stone)}
.art-author img{flex:0 0 56px;width:56px;height:56px;margin-right:16px;border:1px solid var(--line);border-radius:50%;background:#fff;padding:8px}
.art-author-role{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3)}
.art-author-name{margin-top:2px;font-size:16px;font-weight:600}
.art-author p{margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted-2)}
.art-author .btn-pill{margin:12px 8px 0 0;padding:10px 22px;font-size:13.5px}

/* prev / next — .list-card-article look */
.art-pn{display:flex;flex-direction:column;margin:20px 0 0;padding:0;list-style:none}
.art-pn li{margin-bottom:12px}
.art-pn a{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:22px;background:var(--stone);transition:background-color .15s}
.art-pn a:hover,.art-pn a:focus{background:#fff}
.art-pn small{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3)}
.art-pn span{display:block;margin-top:4px;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.art-pn .pn-next{text-align:right}

/* back to top */
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:900;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#000;color:#fff;opacity:0;visibility:hidden;transition:opacity .2s}
.to-top.visible{opacity:1;visibility:visible}
.to-top:hover,.to-top:focus{background:#27272a}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media (min-width:640px){
  .hero.art-hero h1{font-size:40px}
  .art-card{padding:32px}.art-card h2{font-size:28px}.art-card h3{font-size:22px}
  .art-pn{flex-direction:row}.art-pn li{flex:1}.art-pn li+li{margin-left:12px}.art-pn li:only-child{margin-left:0}
}
@media (min-width:768px){
  .toc-list{column-count:2;column-gap:32px}
  .toc-list li{break-inside:avoid}
}
@media (min-width:1024px){
  .hero.art-hero{padding:52px 0 64px}.hero.art-hero h1{font-size:52px}
  .art-body-wrap{padding:40px 0 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}