/*
Theme Name: SamiSocial360
Theme URI: https://samisocial360.com
Author: Abdul Sami
Author URI: https://samisocial360.com
Description: Custom multi-page site for Abdul Sami, social media strategist. Case studies, pricing, and portfolio proof are all editable from the WordPress dashboard.
Version: 7.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: samisocial360
*/

/* ============================================================
   All theme CSS lives here per WordPress convention (this file
   MUST be named style.css with the header above for WP to
   recognize the theme). Enqueued automatically via functions.php.
   ============================================================ */


  /* ============================================================
     2026 REDESIGN — white-first palette. White/off-white are the
     dominant backgrounds everywhere; black is reserved for exactly
     ONE section (Case Studies) plus the modal/lightbox overlay
     chrome; blue is the only accent color used throughout. No gold
     anywhere in this palette — legacy class names like ".gold" and
     ".btn-gold" are kept below (so markup doesn't need touching)
     but now point at black/blue instead of an actual gold color.
     ============================================================ */
  :root{
    --white:#FFFFFF;
    --offwhite:#F7F8FA;
    --black:#0A0A0A;
    --blue:#0066FF;         /* Brand accent — the only accent color */
    --blue-light:#3385FF;   /* Lighter tint, hover/secondary accents */
    --blue-dark:#0050CC;
    --border:#E8ECEF;
    --muted:#6B7280;        /* Body copy on light backgrounds */
    --muted-dark:#4B5563;

    /* Dark-section-only tokens — used ONLY inside .section-dark
       (Case Studies) and the modal/lightbox overlays. Never use
       these for body copy on a light background, and never use
       --muted/--muted-dark on a black background — that's the
       grey-on-black bug this rule exists to prevent. */
    --dark-heading:#FFFFFF;
    --dark-body:#CCCCCC;
    --dark-border:rgba(255,255,255,0.12);
    --dark-surface:#141414;
    --dark-surface-2:#1c1c1c;

    /* Legacy variable names kept as aliases so existing selectors
       throughout this file and the templates don't all need
       renaming — they just resolve to the new palette now. */
    --navy-black:var(--black);
    --navy:var(--dark-surface);
    --navy-light:var(--dark-surface-2);
    --gold:var(--black);
    --gold-light:var(--blue-light);
    --gray:var(--muted);
    --gray-dark:var(--muted-dark);
    --line:var(--border);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--white);
    color:var(--black);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;font-weight:700;}
  .huge{font-family:'Space Grotesk',sans-serif;font-weight:700;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  .eyebrow{
    display:inline-block;
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--blue);
    font-weight:600;
    margin-bottom:18px;
  }
  .num{color:var(--blue);font-family:'Space Grotesk',sans-serif;}
  /* Standout/premium moments (best ROAS figure, Elite pricing tier) now
     use black instead of gold — still reads as "the special one"
     against an otherwise white/blue page. */
  .gold-highlight{color:var(--black) !important;font-weight:700;}

  /* SCROLL-REVEAL ANIMATION — elements fade/slide up as they enter view.
     Driven by GSAP ScrollTrigger (see assets/js/redesign.js); this CSS
     just defines the resting/settled states so there's no flash of
     unstyled content before GSAP initializes. */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}

  /* APPLE-STYLE 3D NUMBER REVEAL — stat figures fly in with a perspective
     flip, scale and blur-to-focus settle, using a spring-style overshoot
     easing curve instead of a plain fade. */
  .count-3d{
    display:inline-block;
    opacity:0;
    filter:blur(10px);
    transform:perspective(700px) rotateX(70deg) translateY(18px) scale(0.72);
    transform-origin:50% 100%;
    transition:opacity .8s cubic-bezier(.16,1,.3,1),
               filter .8s cubic-bezier(.16,1,.3,1),
               transform 1s cubic-bezier(.22,1.6,.36,1);
    will-change:transform, filter, opacity;
  }
  .count-3d.in-view{
    opacity:1;
    filter:blur(0);
    transform:perspective(700px) rotateX(0deg) translateY(0) scale(1);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    .count-3d{opacity:1;filter:none;transform:none;transition:none;}
  }

  /* NAV — translucent white, not translucent black */
  header{
    position:fixed;top:0;left:0;right:0;z-index:500;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  nav{
    max-width:1180px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:0.5px;color:var(--black);}
  .logo span{color:var(--blue);}
  .nav-links{display:flex;gap:36px;font-size:14px;font-weight:500;}
  .nav-links a{color:var(--muted);transition:color .2s;position:relative;padding-bottom:3px;}
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
    background:var(--blue);transition:width .25s ease;
  }
  .nav-links a:hover{color:var(--black);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    background:var(--blue);color:#fff;padding:10px 20px;border-radius:4px;
    font-size:13px;font-weight:700;letter-spacing:0.3px;
  }
  .menu-btn{display:none;background:none;border:none;color:var(--black);font-size:24px;cursor:pointer;line-height:1;}
  @media(max-width:860px){
    .nav-links.mobile-open{
      display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
      background:var(--white);padding:10px 32px 20px;gap:0;border-bottom:1px solid var(--border);
    }
    .nav-links.mobile-open a{padding:14px 0;border-top:1px solid var(--border);}
  }

  /* HERO — white/off-white, a subtle blue particle network behind the
     content (tsParticles, see redesign.js), headline in black with a
     blue accent word. Replaces the old solid blue+black color-block
     layout entirely. */
  .hero{padding:150px 0 90px;position:relative;background:var(--offwhite);overflow:hidden;}
  #tsparticles-hero{
    position:absolute;inset:0;z-index:0;pointer-events:none;
  }
  .hero-grid{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.2fr 0.9fr;gap:48px;align-items:center;
  }
  .hero-col-text p{color:var(--muted);}
  .hero-col-text .badge{background:rgba(0,102,255,0.08);border:1px solid rgba(0,102,255,0.18);color:var(--blue-dark);}
  .hero-col-photo{display:flex;align-items:center;justify-content:center;}
  .hero h1{
    font-size:clamp(38px,5.6vw,68px);
    line-height:1.02;
    letter-spacing:-1px;
    color:var(--black);
  }
  .hero h1 .accent{color:var(--blue);}
  .hero p{
    font-size:18px;max-width:560px;margin-top:26px;
  }
  .hero-entity{font-size:16px;color:var(--muted-dark);max-width:600px;margin-top:14px;line-height:1.55;}
  .hero-ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
  .hero-photo-wrap{
    position:relative;display:flex;justify-content:center;align-items:center;
  }
  .hero-photo-wrap::before{
    content:"";position:absolute;inset:6%;border-radius:50%;
    background:radial-gradient(circle, rgba(0,102,255,0.16), transparent 70%);
    filter:blur(10px);
  }
  .hero-photo{
    position:relative;width:100%;max-width:320px;aspect-ratio:1/1;object-fit:cover;
    border-radius:20px;border:1px solid rgba(0,102,255,0.18);
    box-shadow:0 20px 40px rgba(0,102,255,0.14);
  }
  .btn{
    padding:15px 28px;border-radius:4px;font-weight:700;font-size:14px;
    letter-spacing:0.3px;cursor:pointer;border:none;display:inline-block;
    transition:transform .15s, opacity .15s;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-gold{background:var(--black);color:#fff;}
  .btn-blue{background:var(--blue);color:#fff;}
  .btn-outline{background:transparent;color:var(--black);border:1px solid var(--border);}

  /* TICKER */
  .ticker-wrap{
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:22px 0;overflow:hidden;white-space:nowrap;margin-top:50px;position:relative;z-index:1;
  }
  .ticker{display:inline-block;animation:scroll 28s linear infinite;}
  .ticker span{
    display:inline-block;padding:0 32px;font-size:14px;letter-spacing:2px;
    text-transform:uppercase;color:var(--muted-dark);font-weight:600;
  }
  .ticker span.gold-dot::before{content:"✦";color:var(--blue);margin-right:32px;}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* SECTION GENERIC */
  section{padding:110px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head h2{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-0.5px;color:var(--black);}
  .section-head p{color:var(--muted);margin-top:16px;font-size:16px;}

  /* Off-white band — used for the Numbers band and a couple of other
     sections that want gentle separation from a pure-white section
     next to them, without a hard border. */
  .section-light{
    background:var(--offwhite);color:var(--black);
  }
  .section-light .eyebrow{color:var(--blue);}
  .section-light .section-head h2{color:var(--black);}
  .section-light .section-head p{color:var(--muted);}
  .numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
  .num-block{background:var(--white);padding:34px 20px;text-align:center;}
  .num-figure{font-family:'Space Grotesk';font-weight:700;font-size:clamp(28px,3.4vw,42px);color:var(--blue);}
  .num-figure.gold{color:var(--black);}
  .num-figure.black{color:var(--black);}
  .num-label{font-size:12px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:0.8px;}

  /* BIO */
  .bio-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:start;}
  .bio-grid p{color:var(--muted);font-size:17px;margin-bottom:18px;}
  .bio-grid p strong{color:var(--black);}
  .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
  .badge{
    border:1px solid var(--border);padding:9px 16px;border-radius:30px;font-size:12.5px;
    color:var(--muted);background:var(--offwhite);
  }
  /* Bio badges get the prominent treatment — solid blue, bold white text —
     so credentials like "100% JSS" and "Top Rated" actually stand out. */
  .bio-grid .badge{background:var(--blue);color:#fff;font-weight:700;border:none;font-size:13px;padding:10px 18px;}
  .stat-card{
    background:var(--offwhite);border:1px solid var(--border);border-radius:10px;padding:26px;margin-bottom:16px;
  }
  .stat-card .n{font-family:'Space Grotesk';font-size:34px;font-weight:700;color:var(--blue);}
  .stat-card .l{color:var(--muted);font-size:13px;margin-top:4px;}
  /* Distinct stat cards — Blue / Black / White trio, so the bio section
     doesn't read as one flat tone. Black replaces the old gold slot. */
  .stat-card.blue{background:var(--blue);border-color:var(--blue);}
  .stat-card.blue .n{color:#fff;}
  .stat-card.blue .l{color:rgba(255,255,255,0.78);}
  .stat-card.gold{background:var(--black);border-color:var(--black);}
  .stat-card.gold .n{color:#fff;}
  .stat-card.gold .l{color:rgba(255,255,255,0.65);}
  .stat-card.white{background:var(--white);border-color:var(--border);}
  .stat-card.white .n{color:var(--black);}
  .stat-card.white .l{color:var(--muted);}

  /* WHY WORK WITH ME / SERVICES — solid brand blue section with
     glassmorphism cards floating on top (backdrop-filter blur, semi-
     transparent white) instead of flat opaque white cards. Also used
     for vanilla-tilt (data-tilt attribute added in the template). */
  #services{background:var(--blue);}
  #why-me{background:var(--blue);}
  #services .eyebrow, #why-me .eyebrow{color:rgba(255,255,255,0.85);}
  #services .section-head h2, #why-me .section-head h2{color:#fff;}
  #services .section-head p, #why-me .section-head p{color:rgba(255,255,255,0.78);}
  .services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
  .services-grid-3{grid-template-columns:repeat(3,1fr);}
  .service{
    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.4);
    padding:30px;border-radius:12px;border-top:4px solid var(--white);
    transition:transform .2s, box-shadow .2s;
  }
  .service:hover{box-shadow:0 16px 40px rgba(0,0,0,0.12);}
  .service .icon{font-size:26px;display:block;margin-bottom:10px;}
  .service .idx{color:var(--blue);font-family:'Space Grotesk';font-weight:700;font-size:13px;letter-spacing:2px;}
  .service h3{font-size:21px;margin:12px 0 8px;color:var(--black);}
  .service p{color:var(--muted-dark);font-size:14.5px;}

  /* RECEIPTS (legacy — kept for compatibility, not used on rebuilt pages) */
  .receipts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .receipt-card{
    position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);
    background:var(--offwhite);aspect-ratio:3/4;cursor:pointer;
  }
  .receipt-card img{width:100%;height:100%;object-fit:cover;opacity:0.55;transition:opacity .25s, transform .4s;}
  .receipt-card:hover img{opacity:0.8;transform:scale(1.04);}
  .receipt-overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
    background:linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.9) 100%);
  }
  .receipt-overlay .stat{font-family:'Space Grotesk';font-size:30px;font-weight:700;color:#fff;}
  .receipt-overlay .label{font-size:12.5px;color:var(--dark-body);margin-top:4px;text-transform:uppercase;letter-spacing:1px;}
  .receipt-overlay .brand{font-size:12px;color:#fff;margin-top:10px;font-weight:600;}

  /* CASE STUDY CARDS — this section (#work) is THE one dark section on
     the site. Section wrapper below sets black bg + the dark-heading/
     dark-body rule; cards keep their white/blue diagonal pairing, which
     already reads well against a black section background. */
  #work.section-dark{background:var(--black);}
  .section-dark .section-head h2{color:var(--dark-heading);}
  .section-dark .section-head p{color:var(--dark-body);}
  .section-dark .eyebrow{color:var(--blue-light);}
  .cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .cs-card{
    background:var(--dark-surface);border:1px solid var(--dark-border);border-top:3px solid var(--blue);border-radius:14px;padding:30px;
    cursor:pointer;transition:border-color .2s, transform .2s;position:relative;
  }
  .cs-card:hover{border-color:var(--blue);transform:translateY(-4px);}
  .cs-card .tag{font-size:12px;color:var(--dark-body);text-transform:uppercase;letter-spacing:1.5px;}
  .cs-card h3{font-size:24px;margin:10px 0 14px;color:var(--dark-heading);}
  .cs-card .headline-stat{font-family:'Space Grotesk';font-size:38px;font-weight:700;color:var(--blue-light);}
  .cs-card .stat-label{color:var(--dark-body);font-size:13px;margin-top:2px;}
  .cs-card .open-hint{
    margin-top:20px;font-size:13px;color:var(--blue-light);font-weight:600;
    display:flex;align-items:center;gap:6px;
  }
  .cs-card .open-hint svg{width:14px;height:14px;transition:transform .2s;}
  .cs-card:hover .open-hint svg{transform:translateX(4px);}

  /* Diagonal color pairing — top-left/bottom-right share one treatment,
     top-right/bottom-left share another, so the 2x2 grid reads as a
     deliberate pattern instead of four identical dark tiles. */
  .cs-card.c-white{background:var(--white);border-top-color:var(--blue);}
  .cs-card.c-white .tag{color:var(--muted);}
  .cs-card.c-white h3{color:var(--black);}
  .cs-card.c-white .headline-stat{color:var(--blue);}
  .cs-card.c-white .headline-stat.gold-highlight{color:var(--black) !important;}
  .cs-card.c-white .stat-label{color:var(--muted);}
  .cs-card.c-white .open-hint{color:var(--blue);}
  .cs-card.c-white:hover{border-top-color:var(--blue);}

  .cs-card.c-blue{background:var(--blue);border-top-color:#fff;color:#fff;}
  .cs-card.c-blue .tag{color:rgba(255,255,255,0.72);}
  .cs-card.c-blue h3{color:#fff;}
  .cs-card.c-blue .headline-stat{color:#fff;}
  .cs-card.c-blue .headline-stat.gold-highlight{color:#fff !important;text-decoration:underline;}
  .cs-card.c-blue .stat-label{color:rgba(255,255,255,0.75);}
  .cs-card.c-blue .open-hint{color:#fff;}
  .cs-card.c-blue:hover{border-top-color:#fff;}

  /* 5th-brand wide strip — same category as the case studies above, just
     lighter-weight proof, so it's visually distinct without breaking the
     2x2 diagonal grid. Stays a white card against the dark section. */
  .cs-card-wide{
    margin-top:18px;background:var(--white);border:1px solid var(--border);border-left:4px solid var(--blue);
    border-radius:14px;padding:22px 28px;cursor:pointer;transition:transform .2s, border-color .2s;
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--black);
  }
  .cs-card-wide:hover{transform:translateY(-3px);border-color:var(--blue);}
  .cwl-tag{font-size:11px;color:var(--blue);text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:4px;}
  .cs-card-wide h3{font-size:19px;margin:0;color:var(--black);}
  .cwl-label{font-size:12px;color:var(--muted);max-width:340px;}
  .cwl-stat{font-family:'Space Grotesk';font-weight:700;font-size:22px;color:var(--black);white-space:nowrap;}
  .cs-card-wide .open-hint{color:var(--blue);white-space:nowrap;font-size:13px;font-weight:600;}

  /* TRACK RECORD — smaller proof tiles for work that doesn't carry a full
     case study (ads-only, technical setup, LinkedIn, GMB, recovery).
     Blue block + white tiles; black replaces the old gold tag accent. */
  .tr-feature{
    background:var(--blue);border-radius:18px;padding:34px;margin-bottom:24px;color:#fff;
    display:grid;grid-template-columns:1.1fr 0.1fr 1fr;gap:22px;align-items:center;
  }
  .tr-feature .tr-tag{background:rgba(255,255,255,0.9);color:var(--blue-dark);margin-bottom:14px;}
  .tr-feature h3{font-size:24px;margin-bottom:4px;}
  .tr-feature .tr-sub{color:rgba(255,255,255,0.75);font-size:13.5px;margin-bottom:18px;}
  .tr-feature-col{background:rgba(255,255,255,0.1);border-radius:12px;padding:20px;cursor:pointer;}
  .tr-feature-col.before{border-left:3px solid rgba(255,255,255,0.4);}
  .tr-feature-col.after{border-left:3px solid #fff;}
  .tr-feature-col img{width:100%;border-radius:8px;margin-bottom:12px;display:block;}
  .tr-feature-col .fh{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.65);margin-bottom:8px;}
  .tr-feature-col .fs{font-family:'Space Grotesk';font-size:18px;font-weight:700;line-height:1.3;}
  .tr-feature-arrow{font-size:26px;color:#fff;text-align:center;}
  .tr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
  .tr-tile{
    background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;
    color:var(--black);transition:transform .2s, border-color .2s;
  }
  .tr-tile:hover{transform:translateY(-4px);border-color:var(--blue);}
  .tr-thumb{
    height:140px;background:linear-gradient(135deg,#eef2fb,#e2e8f5);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:11px;text-align:center;padding:10px;cursor:pointer;
  }
  .tr-thumb img{width:100%;height:100%;object-fit:cover;}
  .tr-body{padding:20px 22px;}
  .tr-tag{
    display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;
    padding:4px 10px;border-radius:20px;margin-bottom:10px;
  }
  .tr-tag.tag-ads,.tr-tag.tag-mgmt,.tr-tag.tag-tech{background:rgba(0,102,255,0.1);color:var(--blue);}
  .tr-tag.tag-gmb{background:rgba(10,10,10,0.06);color:var(--black);}
  .tr-tile h4{font-size:16px;margin-bottom:8px;}
  .tr-stat{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--black);margin-bottom:4px;}
  .tr-note{font-size:12.5px;color:var(--muted);line-height:1.4;}

  /* PRICING — white cards (Starter/Growth, blue top-accent), solid blue
     (Performance/Most Popular), solid black (Elite — replaces the old
     gold gradient with a premium black tier instead). */
  .pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .price-card{
    background:var(--white);border:1px solid var(--border);border-top:4px solid var(--blue);
    border-radius:14px;padding:30px 24px;color:var(--black);
    display:flex;flex-direction:column;
  }
  .price-card.popular{
    border:1px solid var(--blue);border-top:4px solid #fff;position:relative;
    background:var(--blue);color:#fff;
  }
  .price-card.elite{background:var(--black);color:#fff;border:1px solid var(--black);border-top:4px solid var(--blue);}
  .popular-flag{
    position:absolute;top:-13px;left:24px;background:var(--black);color:#fff;
    font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;letter-spacing:0.5px;
  }
  .price-card h4{font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);}
  .price-card.popular h4{color:rgba(255,255,255,0.75);}
  .price-card.elite h4{color:rgba(255,255,255,0.65);}
  .price-card .price{font-family:'Space Grotesk';font-size:36px;font-weight:700;margin:12px 0 18px;}
  .price-card .price span{color:var(--muted);}
  .price-card.popular .price span{color:rgba(255,255,255,0.75) !important;}
  .price-card.elite .price span{color:rgba(255,255,255,0.65) !important;}
  .price-card ul{list-style:none;flex:1;}
  .price-card li{font-size:13.5px;color:var(--muted);padding:8px 0;border-top:1px solid var(--border);}
  .price-card.popular li{color:rgba(255,255,255,0.85);border-top:1px solid rgba(255,255,255,0.2);}
  .price-card.elite li{color:rgba(255,255,255,0.75);border-top:1px solid rgba(255,255,255,0.15);}
  .price-card .btn{margin-top:20px;text-align:center;}
  .price-card.popular .btn.btn-blue{background:#fff;color:var(--blue);}
  .price-card.popular .btn.btn-blue:hover{background:var(--black);color:#fff;}
  .price-card.elite .btn{background:#fff;color:var(--black);}

  /* PRICING ESTIMATOR — White / Off-white / Blue trio (was White / Dark /
     Gold) — stays entirely within the light+blue palette, no second dark
     zone inside what should be a light Pricing section. */
  .estimator{
    margin-top:50px;background:transparent;border:none;border-radius:16px;
    padding:0;
  }
  .estimator-head p{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:520px;}
  .estimator-body{display:grid;grid-template-columns:1fr 1fr 0.8fr;gap:18px;margin-top:26px;}
  .estimator-col{border-radius:14px;padding:26px;border-top:3px solid var(--blue);}
  .estimator-col:nth-child(1){background:var(--white);border:1px solid var(--border);}
  .estimator-col:nth-child(1) h4{color:var(--muted);}
  .estimator-col:nth-child(1) .est-option{color:var(--black);}
  .estimator-col:nth-child(2){background:var(--offwhite);border:1px solid var(--border);border-top-color:var(--blue);}
  .estimator-col:nth-child(2) h4{color:var(--muted);}
  .estimator-col:nth-child(2) .est-option{color:var(--black);}
  .estimator-col h4{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;}
  .est-option{
    display:flex;align-items:center;gap:10px;font-size:14px;
    padding:9px 0;cursor:pointer;
  }
  .est-option input{accent-color:var(--blue);width:16px;height:16px;cursor:pointer;flex-shrink:0;}
  .estimator-total{
    background:var(--blue);border:none;border-radius:14px;
    padding:24px;display:flex;flex-direction:column;justify-content:center;
  }
  .et-label{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.75);}
  .et-amount{font-family:'Space Grotesk';font-size:38px;font-weight:700;color:#fff;margin-top:6px;transition:color .2s;}
  .et-amount span{font-size:14px;color:rgba(255,255,255,0.75);font-weight:400;}
  .et-onetime{font-size:12.5px;color:rgba(255,255,255,0.8);margin-top:4px;}

  /* CONTENT GRID */
  .filter-tabs{display:flex;gap:10px;margin-bottom:34px;flex-wrap:wrap;}
  .filter-tab{
    padding:9px 18px;border-radius:30px;border:1px solid var(--border);background:transparent;
    color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;
  }
  .filter-tab.active, .filter-tab:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .grid-tile{
    position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;cursor:pointer;
    border:1px solid var(--border);background:var(--offwhite);
  }
  .grid-tile img, .grid-tile video{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
  .grid-tile:hover img, .grid-tile:hover video{transform:scale(1.08);}
  .tile-overlay{
    position:absolute;inset:0;background:rgba(10,10,10,0.82);opacity:0;transition:opacity .25s;
    display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  }
  .grid-tile:hover .tile-overlay, .grid-tile.tapped .tile-overlay{opacity:1;}
  .tile-overlay .brand{font-weight:700;font-size:14px;color:#fff;}
  .tile-overlay .type{color:var(--blue-light);font-size:11.5px;text-transform:uppercase;letter-spacing:1px;margin-top:2px;}
  .play-icon{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;background:rgba(0,102,255,0.9);border-radius:50%;
    display:flex;align-items:center;justify-content:center;pointer-events:none;
  }

  /* BLOG — off-white section, blue-accented cards. */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .blog-card{
    background:var(--white);border:1px solid var(--border);border-top:4px solid var(--blue);
    border-radius:14px;overflow:hidden;transition:border-color .2s, transform .2s;
  }
  .blog-card:hover{border-color:var(--blue);transform:translateY(-4px);}
  .blog-thumb{height:170px;background:linear-gradient(135deg, #eef2fb, #e2e8f5);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase;}
  .blog-card-body{padding:24px;}
  .blog-card .cat{font-size:11.5px;color:var(--blue);text-transform:uppercase;letter-spacing:1px;font-weight:600;}
  .blog-card h3{font-size:18px;margin:10px 0 8px;color:var(--black);}
  .blog-card p{color:var(--muted);font-size:13.5px;}

  /* ============================================================
     INNER PAGES (About, service pages, case study pages, Hire Me) —
     shared components used across the new page-*.php / single-*.php
     templates added in v6.1. Everything here stays on the light
     palette; no page besides the homepage's Case Studies section
     uses .section-dark.
     ============================================================ */
  .page-hero{padding:150px 0 70px;background:var(--offwhite);}
  .page-hero .eyebrow{color:var(--blue);}
  .page-hero h1{font-size:clamp(34px,5vw,54px);line-height:1.05;letter-spacing:-0.5px;color:var(--black);max-width:820px;}
  .page-hero .lede{font-size:18px;color:var(--muted-dark);max-width:680px;margin-top:20px;}
  .page-hero .entity{font-size:15.5px;color:var(--muted);max-width:680px;margin-top:14px;line-height:1.6;}

  .breadcrumb{font-size:13px;color:var(--muted);padding:130px 0 0;}
  .breadcrumb .wrap{padding-bottom:0;}
  .breadcrumb a{color:var(--muted);}
  .breadcrumb a:hover{color:var(--blue);}
  .breadcrumb span.sep{margin:0 8px;color:var(--border);}
  .breadcrumb span.current{color:var(--black);font-weight:600;}

  .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:40px;}
  .stat-row .sb{background:var(--white);padding:26px 18px;text-align:center;}
  .stat-row .sb b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:clamp(22px,2.6vw,32px);color:var(--blue);}
  .stat-row .sb span{display:block;font-size:11.5px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:0.6px;}

  .narrative{max-width:760px;}
  .narrative-block{margin-bottom:44px;}
  .narrative-block h2{font-size:13px;color:var(--blue);text-transform:uppercase;letter-spacing:2px;margin-bottom:14px;}
  .narrative-block p{font-size:16.5px;color:var(--muted-dark);line-height:1.7;}
  .narrative-block ul{padding-left:20px;margin-top:10px;}
  .narrative-block li{font-size:15.5px;color:var(--muted-dark);margin-bottom:8px;line-height:1.6;}

  .proof-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px;}
  .proof-gallery img{width:100%;border-radius:10px;border:1px solid var(--border);cursor:pointer;}

  .related-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}
  .related-links a{
    border:1px solid var(--border);border-radius:30px;padding:10px 20px;font-size:13.5px;font-weight:600;
    color:var(--black);transition:all .2s;
  }
  .related-links a:hover{background:var(--blue);border-color:var(--blue);color:#fff;}

  .cta-band{background:var(--blue);border-radius:20px;padding:48px;margin-top:60px;text-align:center;}
  .cta-band h3{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:14px;}
  .cta-band p{color:rgba(255,255,255,0.82);font-size:15.5px;margin-bottom:26px;max-width:520px;margin-left:auto;margin-right:auto;}
  .cta-band .btn-blue{background:#fff;color:var(--blue);}

  .service-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  .service-detail-card{background:var(--white);border:1px solid var(--border);border-top:4px solid var(--blue);border-radius:12px;padding:26px;}
  .service-detail-card h3{font-size:19px;color:var(--black);margin-bottom:8px;}
  .service-detail-card p{color:var(--muted);font-size:14.5px;}

  .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .process-step{position:relative;}
  .process-step .pnum{font-family:'Space Grotesk';font-weight:700;font-size:32px;color:var(--blue);opacity:0.35;}
  .process-step h4{font-size:16px;color:var(--black);margin:8px 0 6px;}
  .process-step p{font-size:13.5px;color:var(--muted);}

  @media(max-width:860px){
    .stat-row, .proof-gallery, .service-detail-grid, .process-steps{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:560px){
    .stat-row, .proof-gallery, .service-detail-grid, .process-steps{grid-template-columns:1fr;}
  }

  /* FAQ ACCORDION — new component, used on every major page */
  .faq-list{max-width:820px;}
  .faq-item{border-bottom:1px solid var(--border);}
  .faq-question{
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:var(--black);
  }
  .faq-question .faq-icon{flex-shrink:0;font-size:20px;color:var(--blue);transition:transform .25s ease;line-height:1;}
  .faq-item.open .faq-question .faq-icon{transform:rotate(45deg);}
  .faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .faq-answer-inner{padding:0 0 22px;color:var(--muted-dark);font-size:15px;line-height:1.6;max-width:720px;}
  .faq-item.open .faq-answer{max-height:600px;}
  /* Dark-section FAQ variant (none currently, kept for pages that add
     an FAQ inside a dark section later) */
  .section-dark .faq-question{color:var(--dark-heading);}
  .section-dark .faq-answer-inner{color:var(--dark-body);}
  .section-dark .faq-item{border-bottom-color:var(--dark-border);}

  /* FOOTER — solid brand blue, so the site closes on the accent color
     rather than fading to dark. Black replaces gold for hover accents. */
  footer{padding:0 0 40px;background:var(--blue);}
  .footer-ticker-wrap{
    border-bottom:1px solid rgba(255,255,255,0.18);padding:18px 0;overflow:hidden;white-space:nowrap;
  }
  .footer-ticker{display:inline-block;animation:scroll 18s linear infinite;}
  .footer-ticker span{
    display:inline-block;padding:0 28px;font-size:13px;letter-spacing:2px;
    text-transform:uppercase;color:rgba(255,255,255,0.7);font-weight:700;
  }
  .footer-ticker span::before{content:"✦";color:#fff;margin-right:28px;}
  .footer-cta{padding-top:80px;}
  .footer-cta .eyebrow{color:rgba(255,255,255,0.85);}
  .footer-cta h2{font-size:clamp(32px,5vw,58px);max-width:760px;color:#fff;}
  .footer-sign-off{color:rgba(255,255,255,0.82);font-size:15px;margin-top:18px;max-width:520px;}
  .footer-links{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap;}
  .footer-links a{color:rgba(255,255,255,0.85);font-size:14px;border-bottom:1px solid rgba(255,255,255,0.3);padding-bottom:2px;}
  .footer-links a:hover{color:#fff;border-color:#fff;}
  .footer-bottom{
    margin-top:70px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.18);
    display:flex;justify-content:space-between;color:rgba(255,255,255,0.6);font-size:12.5px;flex-wrap:wrap;gap:10px;
  }

  /* MODAL — kept as a dark glass overlay; this is transient UI chrome
     on top of the page, not a page "section", so it's exempt from the
     one-dark-section rule the same way a lightbox or a cookie banner
     would be. Text still follows the dark-heading/dark-body contrast
     rule internally. */
  .modal-backdrop{
    display:none;position:fixed;inset:0;background:rgba(6,6,7,0.85);z-index:1000;
    padding:40px 16px;overflow-y:auto;backdrop-filter:blur(4px);
  }
  .modal-backdrop.open{display:block;}
  .modal-box{
    max-width:760px;margin:0 auto;background:var(--dark-surface);border:1px solid var(--dark-border);
    border-radius:16px;padding:44px;position:relative;animation:pop .25s ease;color:var(--dark-body);
  }
  @keyframes pop{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  .modal-close{
    position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;
    background:var(--dark-surface-2);border:1px solid var(--dark-border);color:var(--dark-heading);
    font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .modal-box .eyebrow{margin-bottom:8px;color:var(--blue-light);}
  .modal-box h2{font-size:32px;margin-bottom:6px;color:var(--dark-heading);}
  .modal-box .sub{color:var(--dark-body);font-size:14px;margin-bottom:28px;}
  .modal-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:30px;}
  .modal-stats .m-stat{background:var(--black);border:1px solid var(--dark-border);border-radius:8px;padding:14px 10px;text-align:center;}
  .modal-stats .m-stat b{display:block;font-family:'Space Grotesk';font-size:19px;color:var(--blue-light);}
  .modal-stats .m-stat span{font-size:10.5px;color:var(--dark-body);text-transform:uppercase;letter-spacing:0.5px;}
  .modal-block{margin-bottom:24px;}
  .modal-block h4{font-size:12px;color:var(--blue-light);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;}
  .modal-block p{color:var(--dark-body);font-size:15px;}
  .modal-proof img{width:100%;border-radius:10px;border:1px solid var(--dark-border);margin-top:6px;}
  .modal-block ul{padding-left:18px;color:var(--dark-body);font-size:14.5px;}
  .modal-block li{margin-bottom:6px;}

  .lightbox{
    display:none;position:fixed;inset:0;background:rgba(6,6,7,0.92);z-index:1001;
    align-items:center;justify-content:center;padding:30px;
  }
  .lightbox.open{display:flex;}
  .lightbox img, .lightbox video{max-width:90vw;max-height:85vh;border-radius:10px;}
  .lightbox-close{
    position:absolute;top:24px;right:30px;color:#fff;font-size:30px;cursor:pointer;
  }

  @media(max-width:860px){
    .nav-links{display:none;}
    .menu-btn{display:block;}
    .bio-grid, .services-grid, .receipts-grid, .cs-grid, .pricing-grid, .blog-grid, .hero-grid, .estimator-body, .tr-grid{grid-template-columns:1fr;}
    .tr-feature{grid-template-columns:1fr;}
    .tr-feature-arrow{transform:rotate(90deg);}
    .numbers-grid{grid-template-columns:repeat(2,1fr);}
    .estimator{padding:26px 20px;}
    .hero-col-photo{order:-1;padding:32px 0 0;}
    .hero-photo{max-width:220px;margin:0 auto;}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .logo{font-size:16px;}
    .modal-stats{grid-template-columns:repeat(2,1fr);}
    .modal-box{padding:28px 20px;}
    section{padding:70px 0;}
    .hero{padding:150px 0 70px;}
  }