/* ══════════════════════════════════════════════════════════════
   HOME.CSS — Bold, original homepage layout.
   Light WHITE theme with the logo's RED + BLUE accents.
   Loaded AFTER site.css, scoped to body[data-page="home"] so the
   other pages keep their own styling untouched.
   ══════════════════════════════════════════════════════════════ */

body[data-page="home"]{
  /* MONOCHROME + RED — elegant black / white / red. Black = structure, red = the single accent. */
  --bg:#ffffff; --bg-2:#f5f5f6; --band:#f2f2f3;
  --ink:#000000; --text:#000000; --muted:#2b2b2b;
  --blue:#171717; --blue-2:#2b2b2b; --blue-dark:#000000;   /* repurposed: charcoal/black structural accent */
  --red:#d81f2b; --red-2:#e63946; --red-dark:#b0101c;
  --line:#e8e8ea; --line-2:#dadadd;
  --surface:#ffffff; --surface-2:#f5f5f6; --card:#ffffff;
  --shadow:0 26px 60px rgba(0,0,0,.12); --shadow-sm:0 10px 30px rgba(0,0,0,.06);
}

/* ─── base ─── */
body[data-page="home"]{
  background:
    radial-gradient(1200px 700px at 92% -14%, rgba(216,31,43,.05), transparent 62%),
    radial-gradient(1000px 680px at -10% 2%, rgba(0,0,0,.035), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
}
body[data-page="home"] h1,
body[data-page="home"] h2,
body[data-page="home"] h3,
body[data-page="home"] h4,
body[data-page="home"] .display{
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  letter-spacing:-.6px;
  font-weight:700;
}
body[data-page="home"] .head p{ color:var(--muted); }
body[data-page="home"] .eyebrow{ color:var(--blue); font-family:'DM Sans',sans-serif; }
body[data-page="home"] .eyebrow::before{ background:var(--red); }
body[data-page="home"] .section.soft{ background:transparent; }
body[data-page="home"] ::selection{ background:rgba(216,31,43,.16); color:var(--ink); }
body[data-page="home"] .g{
  background:linear-gradient(100deg,var(--red),var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─── buttons ─── */
body[data-page="home"] .btn-red{
  background:linear-gradient(180deg,var(--red-2),var(--red-dark));
  color:#fff; font-weight:700;
  box-shadow:0 10px 26px rgba(225,29,42,.28);
}
body[data-page="home"] .btn-red:hover{ box-shadow:0 14px 34px rgba(225,29,42,.4); }
body[data-page="home"] .btn-outline{
  background:#fff; border-color:var(--line-2); color:var(--blue-dark); box-shadow:var(--shadow-sm);
}
body[data-page="home"] .btn-outline:hover{ border-color:var(--blue); color:var(--blue); background:#fff; }

/* ─── top bar + nav ─── */
body[data-page="home"] .topbar{
  background:linear-gradient(90deg,#000000,#171717); color:#eaeaea; border-bottom:1px solid rgba(255,255,255,.06);
}
body[data-page="home"] .topbar a{ color:#ff8f96; }
body[data-page="home"] .nav-wrap{
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
}
body[data-page="home"] .nav-wrap.scrolled{
  box-shadow:0 8px 28px rgba(20,45,90,.09); border-color:var(--line);
  background:rgba(255,255,255,.94);
}
body[data-page="home"] .brand .wm{ color:var(--ink); }
body[data-page="home"] .brand .wm span{ color:var(--blue); }
body[data-page="home"] .nav-links a{ color:var(--ink); }
body[data-page="home"] .nav-links a:hover,
body[data-page="home"] .nav-links a.active{ color:var(--blue); background:rgba(0,0,0,.06); }
body[data-page="home"] .hamburger{ color:var(--ink); }
@media (max-width:860px){
  body[data-page="home"] .nav-links.open{ background:#fff; border-color:var(--line); box-shadow:var(--shadow); }
}

/* ─── empty image slots (user fills later) ─── */
body[data-page="home"] .img-slot{
  position:relative; width:100%; border-radius:22px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(216,31,43,.05)),
    repeating-linear-gradient(45deg, rgba(20,45,90,.028) 0 14px, rgba(0,0,0,0) 14px 28px),
    var(--bg-2);
  border:1.5px dashed var(--line-2);
  display:flex; align-items:center; justify-content:center;
}
body[data-page="home"] .img-slot::before{
  content:""; width:54px; height:54px; position:absolute; top:calc(50% - 46px); left:calc(50% - 27px);
  border-radius:14px; background:#fff; border:1px solid var(--line-2);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.6'/><path d='M21 15l-5-5L5 21'/></svg>") center/26px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.6'/><path d='M21 15l-5-5L5 21'/></svg>") center/26px no-repeat;
  background-color:var(--blue);
}
body[data-page="home"] .img-slot span{
  margin-top:34px; text-align:center; color:var(--muted);
  font-size:13px; font-weight:600; letter-spacing:.3px;
}
body[data-page="home"] .img-slot span small{ display:block; font-weight:500; opacity:.7; font-size:11.5px; margin-top:2px; }
body[data-page="home"] .ratio-portrait{ aspect-ratio:4 / 5; }
body[data-page="home"] .ratio-square{ aspect-ratio:1 / 1; }
body[data-page="home"] .ratio-wide{ aspect-ratio:16 / 10; }

/* ═══════════════ HERO ═══════════════ */
body[data-page="home"] .hHero{ position:relative; padding:74px 0 60px; overflow:hidden; }
body[data-page="home"] .hHero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(620px 620px at 92% -12%, rgba(255,39,64,.20), transparent 62%),
    radial-gradient(560px 560px at -8% 112%, rgba(255,39,64,.16), transparent 62%),
    linear-gradient(90deg, rgba(7,10,18,.88) 0%, rgba(7,10,18,.60) 34%, rgba(7,10,18,.20) 64%, rgba(7,10,18,.28) 100%),
    linear-gradient(180deg, rgba(7,10,18,.45) 0%, rgba(7,10,18,0) 24%, rgba(7,10,18,0) 60%, rgba(7,10,18,.95) 100%),
    url("../hero-bg.jpg") center/cover no-repeat;
  background-color:#070a12;
}
body[data-page="home"] .hHero > .container{ position:relative; z-index:1; }
/* hero text reads light over the darkened photo */
body[data-page="home"] .hHero h1{ color:#fff; letter-spacing:-.4px; }
body[data-page="home"] .hHero .hlead{ color:rgba(255,255,255,.86); }
body[data-page="home"] .hHero .pill{ color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
body[data-page="home"] .hHero .hHero-trust li{ color:rgba(255,255,255,.9); }
body[data-page="home"] .hHero .hHero-trust li::before{ background-color:var(--red); }
body[data-page="home"] .hHero-grid{
  display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center;
}
body[data-page="home"] .pill{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:13px; letter-spacing:.2px;
  color:var(--ink); background:rgba(216,31,43,.07); border:1px solid rgba(216,31,43,.2);
  padding:8px 15px; border-radius:999px;
}
body[data-page="home"] .pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(225,29,42,.16); }
body[data-page="home"] .hHero h1{
  font-size:clamp(38px,5.4vw,66px); line-height:1.03; margin:22px 0 0; letter-spacing:-1.8px; font-weight:700; color:var(--ink);
}
body[data-page="home"] .hHero .hlead{ font-size:18px; color:var(--text); margin-top:22px; max-width:52ch; line-height:1.6; }
body[data-page="home"] .hHero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
body[data-page="home"] .hHero-stats{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }
body[data-page="home"] .hHero-stats .stat{
  flex:1; min-width:120px; padding:18px 20px; border-radius:16px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
body[data-page="home"] .hHero-stats .n{
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:30px; color:var(--ink); letter-spacing:-1px; line-height:1;
}
body[data-page="home"] .hHero-stats .stat:nth-child(1) .n{ color:var(--red); }
body[data-page="home"] .hHero-stats .stat:nth-child(2) .n{ color:var(--blue); }
body[data-page="home"] .hHero-stats .l{ font-size:13px; color:var(--muted); margin-top:7px; }

body[data-page="home"] .hHero-visual{ position:relative; }
body[data-page="home"] .hHero-visual .img-slot{ box-shadow:0 40px 80px rgba(20,45,90,.16); }
body[data-page="home"] .float-chip{
  position:absolute; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:13px 16px; box-shadow:var(--shadow);
}
body[data-page="home"] .float-chip .ic{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(150deg,var(--blue-2),var(--blue-dark)); flex:0 0 auto;
}
body[data-page="home"] .chip-2 .ic{ background:linear-gradient(150deg,var(--red-2),var(--red-dark)); }
body[data-page="home"] .float-chip .ic svg{ width:20px; height:20px; }
body[data-page="home"] .float-chip .t{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:17px; color:var(--ink); line-height:1.05; }
body[data-page="home"] .float-chip .s{ font-size:12px; color:var(--muted); }
body[data-page="home"] .chip-1{ top:-16px; right:-14px; }
body[data-page="home"] .chip-2{ bottom:-20px; right:-10px; left:auto; }

/* ═══════════════ MARQUEE ═══════════════ */
body[data-page="home"] .marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2); overflow:hidden; padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
body[data-page="home"] .marquee-track{
  display:flex; align-items:center; gap:34px; width:max-content;
  animation:marquee 32s linear infinite;
}
body[data-page="home"] .marquee-track span{
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:clamp(18px,2.4vw,28px);
  letter-spacing:.3px; color:var(--ink); white-space:nowrap; text-transform:uppercase;
}
body[data-page="home"] .marquee-track i{ color:var(--red); font-style:normal; font-size:13px; }
body[data-page="home"] .marquee-track span:nth-child(4n) ~ i{ color:var(--blue); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ body[data-page="home"] .marquee-track{ animation:none; } }

/* ═══════════════ SERVICES (numbered cards) ═══════════════ */
body[data-page="home"] .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:svc; }
body[data-page="home"] .svc{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 26px;
  box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .18s, border-color .18s, box-shadow .18s;
  counter-increment:svc;
}
body[data-page="home"] .svc::before{
  content:"0" counter(svc);
  position:absolute; top:14px; right:20px;
  font-family:'DM Sans',sans-serif; font-weight:800; font-size:42px; letter-spacing:-2px;
  color:rgba(0,0,0,.22); line-height:1;
}
body[data-page="home"] .svc:nth-child(even)::before{ color:rgba(216,31,43,.32); }
body[data-page="home"] .svc::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--blue),var(--blue-dark)); transform:scaleY(0); transform-origin:top; transition:transform .22s;
}
body[data-page="home"] .svc:nth-child(even)::after{ background:linear-gradient(180deg,var(--red-2),var(--red-dark)); }
body[data-page="home"] .svc:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
body[data-page="home"] .svc:hover::after{ transform:scaleY(1); }
body[data-page="home"] .svc-ic{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(150deg,var(--blue-2),var(--blue-dark));
}
body[data-page="home"] .svc:nth-child(even) .svc-ic{ background:linear-gradient(150deg,var(--red-2),var(--red-dark)); }
body[data-page="home"] .svc-ic svg{ width:25px; height:25px; }
body[data-page="home"] .svc h3{ font-size:19px; margin-top:18px; }
body[data-page="home"] .svc > p{ color:var(--text); font-size:14.5px; margin-top:9px; line-height:1.6; }
body[data-page="home"] .svc-list{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:11px; }
body[data-page="home"] .svc-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.7px; color:#3f4d60; }
body[data-page="home"] .svc-list svg{ width:17px; height:17px; color:var(--blue); flex:0 0 auto; margin-top:1px; }
body[data-page="home"] .svc:nth-child(even) .svc-list svg{ color:var(--red); }

/* ═══════════════ ABOUT BAND (mirrored: copy left, image right) ═══════════════ */
body[data-page="home"] .about-band{ position:relative; }
body[data-page="home"] .about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
body[data-page="home"] .about-visual{ position:relative; order:2; }
body[data-page="home"] .about-visual .img-slot{ box-shadow:0 40px 80px rgba(20,45,90,.16); }
body[data-page="home"] .badge-2026{
  position:absolute; left:-16px; bottom:-16px; display:flex; align-items:center; gap:12px;
  background:linear-gradient(150deg,var(--red-2),var(--red-dark)); color:#fff;
  padding:14px 18px; border-radius:16px; box-shadow:0 18px 40px rgba(225,29,42,.28);
}
body[data-page="home"] .badge-2026 .star{ font-size:22px; line-height:1; color:#ffd84a; }
body[data-page="home"] .badge-2026 b{ display:block; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; line-height:1.1; }
body[data-page="home"] .badge-2026 span{ font-size:12px; font-weight:600; opacity:.9; }
body[data-page="home"] .about-copy{ order:1; }
body[data-page="home"] .about-copy h2{ font-size:clamp(26px,3.2vw,38px); margin-top:16px; }
body[data-page="home"] .about-copy p{ color:var(--text); font-size:16px; line-height:1.7; margin-top:16px; max-width:56ch; }
body[data-page="home"] .about-copy .btn{ margin-top:26px; }

/* ═══════════════ PROCESS (horizontal timeline) ═══════════════ */
body[data-page="home"] .proc3-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
body[data-page="home"] .proc3-grid::before{
  content:""; position:absolute; top:0; left:16%; right:16%; height:2px;
  background:linear-gradient(90deg,var(--blue),var(--red)); opacity:.35;
}
body[data-page="home"] .proc3{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:52px 26px 28px; box-shadow:var(--shadow-sm);
}
body[data-page="home"] .proc3 .pn{
  position:absolute; top:-30px; left:26px;
  width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:22px; letter-spacing:-1px;
  background:#fff; border:2px solid var(--blue); color:var(--blue);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}
body[data-page="home"] .proc3:nth-child(2) .pn{ border-color:var(--red); color:var(--red); box-shadow:0 10px 24px rgba(225,29,42,.18); }
body[data-page="home"] .proc3:nth-child(3) .pn{ border-color:var(--blue-dark); color:var(--blue-dark); }
body[data-page="home"] .proc3 h3{ font-size:20px; margin-top:4px; }
body[data-page="home"] .proc3 > p{ color:var(--text); font-size:14.5px; line-height:1.65; margin-top:10px; }
body[data-page="home"] .proc3 ul{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
body[data-page="home"] .proc3 li{ display:flex; align-items:center; gap:10px; font-size:13.7px; color:#3f4d60; }
body[data-page="home"] .proc3 li svg{ width:16px; height:16px; color:var(--blue); flex:0 0 auto; }
body[data-page="home"] .proc3:nth-child(2) li svg{ color:var(--red); }

/* ═══════════════ PRICING ═══════════════ */
body[data-page="home"] #pricing .price{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
body[data-page="home"] #pricing .price:hover{ border-color:var(--line-2); box-shadow:var(--shadow); }
body[data-page="home"] #pricing .price.feat{ border-color:rgba(216,31,43,.5); box-shadow:0 26px 60px rgba(216,31,43,.14); }
body[data-page="home"] #pricing .price.feat::before{ background:linear-gradient(180deg,var(--red-2),var(--red-dark)); color:#fff; box-shadow:0 6px 16px rgba(225,29,42,.35); }
body[data-page="home"] #pricing .pname{ color:var(--ink); }
body[data-page="home"] #pricing .pdesc{ color:var(--muted); }
body[data-page="home"] #pricing .amt{ color:var(--ink); }
body[data-page="home"] #pricing .amt small{ color:var(--muted); }
body[data-page="home"] #pricing .maint{ color:var(--ink); background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); }
body[data-page="home"] #pricing .price ul li{ color:#3f4d60; }
body[data-page="home"] #pricing .price ul svg{ color:var(--blue); }
body[data-page="home"] #pricing .bestfor{ border-top:1px solid var(--line); }
body[data-page="home"] #pricing .bestfor .lbl{ color:var(--muted); }
body[data-page="home"] #pricing .tag{ background:var(--bg-2); border:1px solid var(--line); color:#3f4d60; }

/* ═══════════════ TESTIMONIALS ═══════════════ */
body[data-page="home"] .testi{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
body[data-page="home"] .testi:hover{ border-color:var(--line-2); box-shadow:var(--shadow); }
body[data-page="home"] .testi p{ color:#39485c; }
body[data-page="home"] .testi .nm{ color:var(--ink); }
body[data-page="home"] .testi .rl{ color:var(--muted); }
body[data-page="home"] .testi .av{ background:linear-gradient(140deg,var(--blue),var(--blue-dark)); }
body[data-page="home"] .testi:nth-child(even) .av{ background:linear-gradient(140deg,var(--red-2),var(--red-dark)); }

/* ═══════════════ BOOK / CONTACT ═══════════════ */
body[data-page="home"] .book-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:start; }
body[data-page="home"] .book .form-card{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
body[data-page="home"] .book .form-card h3{ color:var(--ink); }
body[data-page="home"] .book .fc-sub{ color:var(--muted); }
body[data-page="home"] .book-side{ display:flex; flex-direction:column; gap:16px; }
body[data-page="home"] .contact-card{
  display:flex; gap:15px; align-items:flex-start; padding:22px;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm);
}
body[data-page="home"] .contact-card .ic{
  width:46px; height:46px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(150deg,var(--blue-2),var(--blue-dark));
}
body[data-page="home"] .contact-card:nth-child(2) .ic{ background:linear-gradient(150deg,var(--red-2),var(--red-dark)); }
body[data-page="home"] .contact-card .ic svg{ width:22px; height:22px; }
body[data-page="home"] .contact-card h4{ font-size:16px; color:var(--ink); }
body[data-page="home"] .contact-card p{ color:var(--muted); font-size:13.5px; margin:4px 0 8px; }
body[data-page="home"] .contact-card a{ color:var(--blue); font-weight:600; font-size:14.5px; word-break:break-word; }
body[data-page="home"] .quote-card{
  padding:24px 22px; background:linear-gradient(160deg, rgba(0,0,0,.05), rgba(216,31,43,.06)), #fff;
  border:1px solid var(--line-2); border-radius:16px;
}
body[data-page="home"] .quote-card p{ color:var(--ink); font-size:15px; line-height:1.6; font-style:italic; }
body[data-page="home"] .quote-card .who{ display:flex; align-items:center; gap:12px; margin-top:16px; }
body[data-page="home"] .quote-card .av{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans',sans-serif; font-weight:700; color:#fff;
  background:linear-gradient(150deg,var(--blue-2),var(--blue-dark));
}
body[data-page="home"] .quote-card .nm{ color:var(--ink); font-weight:700; font-size:14px; }
body[data-page="home"] .quote-card .rl{ color:var(--muted); font-size:12.5px; }

/* ═══════════════ FAQ ═══════════════ */
body[data-page="home"] .faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); }
body[data-page="home"] .faq-item[open]{ border-color:var(--line-2); }
body[data-page="home"] .faq-q{ color:var(--ink); }
body[data-page="home"] .faq-q .ic{ color:var(--blue); }
body[data-page="home"] .faq-a{ color:var(--text); }

/* ═══════════════ FINAL CTA ═══════════════ */
body[data-page="home"] .final-card{
  background:linear-gradient(150deg,#000000,#1a1a1a 45%,#d81f2b); color:#fff;
  border:0; box-shadow:0 40px 90px rgba(20,45,90,.28);
}
body[data-page="home"] .final-card h2{ color:#fff; }
body[data-page="home"] .final-card p{ color:#e7eefb; }
body[data-page="home"] .final-card .email{ color:#cfe0f6; }
body[data-page="home"] .final-card .email a{ color:#fff; text-decoration:underline; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1000px){
  body[data-page="home"] .svc-grid{ grid-template-columns:repeat(2,1fr); }
  body[data-page="home"] .proc3-grid{ grid-template-columns:1fr; margin-top:44px; row-gap:44px; }
  body[data-page="home"] .proc3-grid::before{ display:none; }
}
@media (max-width:880px){
  body[data-page="home"] .hHero-grid{ grid-template-columns:1fr; gap:44px; }
  body[data-page="home"] .hHero-visual{ max-width:440px; margin:0 auto; width:100%; }
  body[data-page="home"] .about-grid{ grid-template-columns:1fr; gap:52px; }
  body[data-page="home"] .about-visual{ order:2; max-width:440px; }
  body[data-page="home"] .about-copy{ order:1; }
  body[data-page="home"] .book-grid{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width:680px){
  body[data-page="home"] .svc-grid{ grid-template-columns:1fr; }
  body[data-page="home"] .hHero{ padding:52px 0 48px; }
  body[data-page="home"] .chip-1{ right:8px; }
  body[data-page="home"] .badge-2026{ left:12px; }
}

/* ═══════════════════════════════════════════════════════════════
   CLEAN & MODERN REFINEMENTS + EXTRA IMAGE SECTIONS
   Soft white theme, thin borders, gentle shadows, subtle motion.
   Base card/button/marquee styling above is left intact.
   ═══════════════════════════════════════════════════════════════ */

/* ── hero automation panel (replaces the hero photo) ── */
body[data-page="home"] .auto-panel{
  position:relative; width:100%; border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,#ffffff,#fbfbfc);
  border:1px solid var(--line); box-shadow:0 40px 90px rgba(0,0,0,.16);
}
body[data-page="home"] .auto-top{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#0a0a0a,#1a1a1a); color:#f2f2f2;
}
body[data-page="home"] .auto-dots{ display:flex; gap:6px; }
body[data-page="home"] .auto-dots i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.28); }
body[data-page="home"] .auto-dots i:first-child{ background:var(--red); }
body[data-page="home"] .auto-title{ font-family:'DM Sans',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.3px; }
body[data-page="home"] .auto-live{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#ff9ba1;
}
body[data-page="home"] .auto-live .lp{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(216,31,43,.6); animation:autoLive 1.8s ease-out infinite; }
@keyframes autoLive{ 0%{ box-shadow:0 0 0 0 rgba(216,31,43,.55);} 70%{ box-shadow:0 0 0 8px rgba(216,31,43,0);} 100%{ box-shadow:0 0 0 0 rgba(216,31,43,0);} }

body[data-page="home"] .auto-flow{ padding:22px 20px 8px; }
body[data-page="home"] .auto-node{
  display:flex; align-items:center; gap:14px;
  padding:14px 15px; border-radius:15px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(0,0,0,.05);
  opacity:.55; transform:translateY(2px);
  transition:opacity .4s ease, transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
body[data-page="home"] .auto-node .an-ic{
  width:42px; height:42px; flex:0 0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(150deg,#1a1a1a,#000);
}
body[data-page="home"] .auto-node .an-ic svg{ width:21px; height:21px; }
body[data-page="home"] .auto-node .an-tx{ flex:1; min-width:0; }
body[data-page="home"] .auto-node .an-t{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px; color:var(--ink); line-height:1.15; }
body[data-page="home"] .auto-node .an-s{ font-size:12.5px; color:var(--muted); margin-top:3px; }
body[data-page="home"] .auto-node .an-chk{
  width:26px; height:26px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff; opacity:0; transform:scale(.5); transition:opacity .35s ease, transform .35s ease;
}
body[data-page="home"] .auto-node .an-chk svg{ width:14px; height:14px; }

/* connecting link with a red fill that runs downward */
body[data-page="home"] .auto-link{ height:22px; margin-left:36px; position:relative; }
body[data-page="home"] .auto-link::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line-2); border-radius:2px; }
body[data-page="home"] .auto-link span{ position:absolute; left:0; top:0; width:2px; height:0; background:var(--red); border-radius:2px; }

/* staggered "processing → done" cycle across the three nodes */
body[data-page="home"] .auto-node.an-1{ animation:nodeOn 6s ease-in-out infinite; animation-delay:.2s; }
body[data-page="home"] .auto-node.an-2{ animation:nodeOn 6s ease-in-out infinite; animation-delay:1.8s; }
body[data-page="home"] .auto-node.an-3{ animation:nodeOn 6s ease-in-out infinite; animation-delay:3.4s; }
body[data-page="home"] .auto-node.an-1 .an-chk{ animation:chkOn 6s ease-in-out infinite; animation-delay:.2s; }
body[data-page="home"] .auto-node.an-2 .an-chk{ animation:chkOn 6s ease-in-out infinite; animation-delay:1.8s; }
body[data-page="home"] .auto-node.an-3 .an-chk{ animation:chkOn 6s ease-in-out infinite; animation-delay:3.4s; }
body[data-page="home"] .auto-link:nth-of-type(2) span{ animation:linkFill 6s ease-in-out infinite; animation-delay:1.2s; }
body[data-page="home"] .auto-link:nth-of-type(4) span{ animation:linkFill 6s ease-in-out infinite; animation-delay:2.8s; }
@keyframes nodeOn{
  0%,6%{ opacity:.55; transform:translateY(2px); box-shadow:0 8px 22px rgba(0,0,0,.05); border-color:var(--line); }
  14%,92%{ opacity:1; transform:translateY(0); box-shadow:0 16px 34px rgba(216,31,43,.14); border-color:rgba(216,31,43,.45); }
  100%{ opacity:1; transform:translateY(0); box-shadow:0 12px 28px rgba(0,0,0,.07); border-color:var(--line); }
}
@keyframes chkOn{ 0%,10%{ opacity:0; transform:scale(.5);} 20%,100%{ opacity:1; transform:scale(1);} }
@keyframes linkFill{ 0%,8%{ height:0;} 26%,100%{ height:100%;} }

body[data-page="home"] .auto-foot{
  display:flex; align-items:center; gap:9px;
  padding:14px 20px 16px; margin-top:6px;
  font-size:12.5px; font-weight:600; color:var(--muted);
  border-top:1px solid var(--line);
}
body[data-page="home"] .auto-foot .af-pulse{ width:9px; height:9px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:autoLive 2.2s ease-out infinite; flex:0 0 auto; }

@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .auto-node,
  body[data-page="home"] .auto-node .an-chk,
  body[data-page="home"] .auto-link span,
  body[data-page="home"] .auto-live .lp,
  body[data-page="home"] .auto-foot .af-pulse{ animation:none; opacity:1; transform:none; height:100%; }
}

/* hero risk-reversal trust row */
body[data-page="home"] .hHero-trust{
  list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px;
}
body[data-page="home"] .hHero-trust li{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#0a0a0a;
}
body[data-page="home"] .hHero-trust li::before{
  content:""; width:18px; height:18px; flex:0 0 auto; border-radius:50%;
  background:var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M20 6 9 17l-5-5'/></svg>") center/11px no-repeat;
}
body[data-page="home"] .hHero-trust li:nth-child(2)::before{ background-color:var(--red); }

/* ═══════════════ COLOURFUL HERO ACCENTS (less plain) ═══════════════ */
/* Automation card — each step gets its own colour instead of black/white */
body[data-page="home"] .auto-node.an-1 .an-ic{ background:linear-gradient(150deg,#ff5a67,#d81f2b); box-shadow:0 8px 18px rgba(216,31,43,.32); }
body[data-page="home"] .auto-node.an-2 .an-ic{ background:linear-gradient(150deg,#5b8dff,#2f5fe0); box-shadow:0 8px 18px rgba(47,95,224,.32); }
body[data-page="home"] .auto-node.an-3 .an-ic{ background:linear-gradient(150deg,#b06bff,#7c3aed); box-shadow:0 8px 18px rgba(124,58,237,.32); }
/* Success ticks read green */
body[data-page="home"] .auto-node .an-chk{ background:linear-gradient(150deg,#34d399,#059669); }
/* Floating "booked calls" chip goes warm amber (AI Assistant chip stays brand red) */
body[data-page="home"] .chip-1 .ic{ background:linear-gradient(150deg,#ffc24d,#f59e0b); box-shadow:0 8px 18px rgba(245,158,11,.34); }
/* Hero stat numbers — a colourful trio (1st stays red) */
body[data-page="home"] .hHero-stats .stat:nth-child(2) .n{ color:#2f5fe0 !important; }
body[data-page="home"] .hHero-stats .stat:nth-child(3) .n{ color:#059669 !important; }
/* Trust-row check bullets — coloured (2nd stays red) */
body[data-page="home"] .hHero-trust li:nth-child(1)::before{ background-color:#2f5fe0; }
body[data-page="home"] .hHero-trust li:nth-child(3)::before{ background-color:#059669; }

/* keep body copy crisp near-black for readability */
body[data-page="home"] .svc-list li,
body[data-page="home"] .proc3 li,
body[data-page="home"] #pricing .price ul li,
body[data-page="home"] .testi p,
body[data-page="home"] .quote-card p,
body[data-page="home"] .hHero .hlead,
body[data-page="home"] .head p,
body[data-page="home"] .about-copy p,
body[data-page="home"] .svc > p,
body[data-page="home"] .proc3 > p,
body[data-page="home"] .contact-card p,
body[data-page="home"] .hHero-stats .l,
body[data-page="home"] .img-slot span{ color:#0a0a0a; }

/* subtle, premium motion */
body[data-page="home"] .float-chip{ animation:floaty 5s ease-in-out infinite; }
body[data-page="home"] .chip-2{ animation-delay:-2.4s; }
body[data-page="home"] .badge-2026{ animation:floaty 5.6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
body[data-page="home"] .pill .dot{ animation:dotpulse 2s ease-in-out infinite; }
@keyframes dotpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(225,29,42,.4);} 50%{ box-shadow:0 0 0 7px rgba(225,29,42,0);} }
body[data-page="home"] .g{ background-size:200% 100%; animation:gshift 7s ease infinite; }
@keyframes gshift{ 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} }

/* NEW: trust-logo strip (drop client logos in later) */
body[data-page="home"] .logos{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
body[data-page="home"] .logos .container{
  display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  padding-top:26px; padding-bottom:26px;
}
body[data-page="home"] .logos .lbl{
  font-family:'DM Sans',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:1.2px; font-size:12px; color:var(--muted);
}
body[data-page="home"] .logo-slot{
  width:120px; height:54px; border-radius:12px; border:1.5px dashed var(--line-2); background:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:11px; font-weight:500; color:var(--muted); box-shadow:var(--shadow-sm);
}

/* NEW: work gallery (drop project photos in later) */
body[data-page="home"] .work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
body[data-page="home"] .work-card{ position:relative; transition:transform .18s ease; }
body[data-page="home"] .work-card:hover{ transform:translateY(-6px); }
body[data-page="home"] .work-card .img-slot{ box-shadow:var(--shadow); }
body[data-page="home"] .work-card .tagpill{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.5px;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); color:var(--ink); padding:6px 12px; border-radius:999px; box-shadow:var(--shadow-sm);
}
body[data-page="home"] .work-card:nth-child(2) .tagpill{ background:linear-gradient(150deg,var(--red-2),var(--red-dark)); color:#fff; border-color:transparent; }
body[data-page="home"] .work-card:nth-child(3) .tagpill{ background:linear-gradient(150deg,var(--blue-2),var(--blue-dark)); color:#fff; border-color:transparent; }
body[data-page="home"] .work-card .cap{ margin-top:16px; }
body[data-page="home"] .work-card .cap b{
  display:block; font-family:'DM Sans',sans-serif; font-weight:700; font-size:16px; color:var(--ink);
}
body[data-page="home"] .work-card .cap span{ font-size:13.5px; color:var(--muted); }
@media (max-width:1000px){ body[data-page="home"] .work-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ body[data-page="home"] .work-grid{ grid-template-columns:1fr; } }

/* NEW: featured-project spotlight (add a project photo later) */
body[data-page="home"] .spotlight-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
body[data-page="home"] .spotlight-visual .img-slot{ box-shadow:var(--shadow); }
body[data-page="home"] .spotlight-copy h2{ font-size:clamp(26px,3.2vw,38px); margin-top:16px; }
body[data-page="home"] .spotlight-copy > p{ color:#0a0a0a; font-size:16px; line-height:1.7; margin-top:16px; max-width:56ch; }
body[data-page="home"] .spot-list{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
body[data-page="home"] .spot-list li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:#0a0a0a; }
body[data-page="home"] .spot-list svg{ width:18px; height:18px; color:var(--blue); flex:0 0 auto; }
body[data-page="home"] .spotlight-copy .btn{ margin-top:26px; }

/* NEW: team grid (add team photos later) */
body[data-page="home"] .team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
body[data-page="home"] .team-card{ margin:0; text-align:center; transition:transform .18s ease; }
body[data-page="home"] .team-card:hover{ transform:translateY(-6px); }
body[data-page="home"] .team-card .img-slot{ box-shadow:var(--shadow-sm); }
body[data-page="home"] .team-card figcaption{ margin-top:14px; }
body[data-page="home"] .team-card figcaption b{
  display:block; font-family:'DM Sans',sans-serif; font-weight:700; font-size:16px; color:var(--ink);
}
body[data-page="home"] .team-card figcaption span{ font-size:13.5px; color:var(--muted); }

/* WHY A WEBSITE — benefit cards */
body[data-page="home"] .why-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:44px;
}
body[data-page="home"] .why-card{
  background:#ffffff; border:1px solid var(--line); border-radius:16px;
  padding:22px 18px; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body[data-page="home"] .why-card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2);
}
body[data-page="home"] .why-ico{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; color:var(--blue);
  background:linear-gradient(140deg, rgba(0,0,0,.08), rgba(0,0,0,.03));
  border:1px solid rgba(0,0,0,.1);
}
body[data-page="home"] .why-card:nth-child(3n-1) .why-ico{
  color:var(--red);
  background:linear-gradient(140deg, rgba(225,29,42,.11), rgba(242,67,79,.05));
  border-color:rgba(225,29,42,.16);
}
body[data-page="home"] .why-ico svg{ width:24px; height:24px; }
body[data-page="home"] .why-card h3{
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:15.5px;
  color:var(--ink); margin:0 0 7px;
}
body[data-page="home"] .why-card p{ margin:0; font-size:13.3px; line-height:1.55; color:var(--muted); }

@media (max-width:1080px){
  body[data-page="home"] .why-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
}
@media (max-width:880px){
  body[data-page="home"] .spotlight-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:760px){
  body[data-page="home"] .why-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  body[data-page="home"] .team-grid{ grid-template-columns:1fr; max-width:360px; margin-left:auto; margin-right:auto; }
}
@media (max-width:480px){
  body[data-page="home"] .why-grid{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════
   NEUTRAL LUXE — editorial boutique-agency refinements
   Ivory page · greige alternating bands · pure-white cards that pop
   More whitespace · one confident blue accent · staggered motion
   ══════════════════════════════════════════════════════════════ */

/* generous, editorial vertical rhythm */
body[data-page="home"] .section{ padding:104px 0; position:relative; }
@media (max-width:760px){ body[data-page="home"] .section{ padding:72px 0; } }

/* alternating full-width greige bands for premium rhythm */
body[data-page="home"] #about,
body[data-page="home"] #process,
body[data-page="home"] #pricing,
body[data-page="home"] #faq{
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
    var(--band);
  border-top:1px solid rgba(0,0,0,.05);
  border-bottom:1px solid rgba(0,0,0,.05);
}

/* refined section headers — more air, tighter type */
body[data-page="home"] .head{ max-width:760px; }
body[data-page="home"] .head h2{
  font-size:clamp(30px,4vw,50px); letter-spacing:-1.4px; line-height:1.06;
}
body[data-page="home"] .head p{ font-size:17px; line-height:1.7; margin-top:16px; }
body[data-page="home"] .eyebrow{
  font-weight:700; font-size:12px; letter-spacing:2.4px; text-transform:uppercase;
}

/* signature red primary button — the one confident spark on black & white */
body[data-page="home"] .btn-red{
  background:linear-gradient(180deg,var(--red-2),var(--red-dark));
  box-shadow:0 12px 30px rgba(216,31,43,.28);
  letter-spacing:.1px;
}
body[data-page="home"] .btn-red:hover{ box-shadow:0 18px 40px rgba(216,31,43,.42); transform:translateY(-2px); }
body[data-page="home"] .btn{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease; }

/* pill + accents carry a whisper of the red accent */
body[data-page="home"] .pill{
  color:var(--ink); background:rgba(216,31,43,.07); border-color:rgba(216,31,43,.2);
}
body[data-page="home"] .g{ background:linear-gradient(100deg,var(--red),var(--red-dark)); -webkit-background-clip:text; background-clip:text; }

/* softer, warmer image slots to suit the ivory theme */
body[data-page="home"] .img-slot{ border-radius:20px; }

/* filled image frame (real photo dropped into a former placeholder slot) */
body[data-page="home"] .img-frame{
  position:relative; width:100%; border-radius:20px; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--shadow);
}
body[data-page="home"] .img-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
body[data-page="home"] .img-frame:hover img{ transform:scale(1.04); }

/* illustrated service icons (real PNG art instead of line icons) */
body[data-page="home"] .svc .svc-ic.svc-ic-img,
body[data-page="home"] .svc:nth-child(even) .svc-ic.svc-ic-img{
  background:none; box-shadow:none; border-radius:0; overflow:visible;
  width:auto; height:88px; justify-content:flex-start; margin-bottom:2px; color:inherit;
}
body[data-page="home"] .svc-ic.svc-ic-img img{
  height:88px; width:auto; max-width:118px; object-fit:contain; display:block;
}
body[data-page="home"] .svc:hover .svc-ic.svc-ic-img{ transform:translateY(-4px); }

/* ─── staggered reveal cascade (cards flow in one after another) ─── */
html.js body[data-page="home"] .svc-grid .reveal,
html.js body[data-page="home"] .why-grid .reveal,
html.js body[data-page="home"] .work-grid .reveal,
html.js body[data-page="home"] .proc3-grid .reveal,
html.js body[data-page="home"] .team-grid .reveal,
html.js body[data-page="home"] .price-grid .reveal{ transition-duration:.7s; }
body[data-page="home"] .svc-grid > .reveal:nth-child(2),
body[data-page="home"] .why-grid > .reveal:nth-child(2),
body[data-page="home"] .work-grid > .reveal:nth-child(2),
body[data-page="home"] .team-grid > .reveal:nth-child(2){ transition-delay:.09s; }
body[data-page="home"] .svc-grid > .reveal:nth-child(3),
body[data-page="home"] .why-grid > .reveal:nth-child(3),
body[data-page="home"] .work-grid > .reveal:nth-child(3),
body[data-page="home"] .team-grid > .reveal:nth-child(3){ transition-delay:.18s; }
body[data-page="home"] .svc-grid > .reveal:nth-child(4),
body[data-page="home"] .why-grid > .reveal:nth-child(4){ transition-delay:.27s; }
body[data-page="home"] .svc-grid > .reveal:nth-child(5),
body[data-page="home"] .why-grid > .reveal:nth-child(5){ transition-delay:.36s; }
body[data-page="home"] .svc-grid > .reveal:nth-child(6),
body[data-page="home"] .why-grid > .reveal:nth-child(6){ transition-delay:.45s; }
body[data-page="home"] .why-grid > .reveal:nth-child(7){ transition-delay:.54s; }
body[data-page="home"] .why-grid > .reveal:nth-child(8){ transition-delay:.6s; }
body[data-page="home"] .why-grid > .reveal:nth-child(9){ transition-delay:.66s; }
body[data-page="home"] .why-grid > .reveal:nth-child(10){ transition-delay:.72s; }

/* animated underline sweep under section headings */
body[data-page="home"] .head h2::after{
  content:""; display:block; width:64px; height:3px; margin-top:20px; border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--red));
  transform:scaleX(0); transform-origin:left; transition:transform .7s .2s ease;
}
body[data-page="home"] .head.in h2::after{ transform:scaleX(1); }

/* eyebrow accent tick follows brand blue */
body[data-page="home"] .why-ico,
body[data-page="home"] .svc-ic{ transition:transform .25s ease; }
body[data-page="home"] .why-card:hover .why-ico,
body[data-page="home"] .svc:hover .svc-ic{ transform:translateY(-3px) rotate(-3deg); }

/* respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  body[data-page="home"] .float-chip,
  body[data-page="home"] .badge-2026,
  body[data-page="home"] .pill .dot,
  body[data-page="home"] .g{ animation:none; }
  body[data-page="home"] .svc-grid > .reveal,
  body[data-page="home"] .why-grid > .reveal,
  body[data-page="home"] .work-grid > .reveal,
  body[data-page="home"] .team-grid > .reveal{ transition-delay:0s !important; }
  body[data-page="home"] .head h2::after{ transition:none; transform:scaleX(1); }
}

/* ═══════════════ PROMO POPUP ═══════════════ */
body[data-page="home"] .promo-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(8,8,10,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
/* When hidden (default / after dismiss) it must NOT cover the page or block clicks */
body[data-page="home"] .promo-overlay[hidden]{ display:none !important; }
body[data-page="home"] .promo-overlay.show{ opacity:1; pointer-events:auto; }
body[data-page="home"] .promo-card{
  position:relative; width:min(440px,100%);
  background:linear-gradient(180deg,#ffffff,#fbfbfc);
  border:1px solid var(--line); border-radius:22px;
  box-shadow:0 40px 100px rgba(0,0,0,.45);
  padding:40px 34px 30px; text-align:center;
  transform:translateY(16px) scale(.96); transition:transform .34s cubic-bezier(.2,.9,.3,1);
}
body[data-page="home"] .promo-overlay.show .promo-card{ transform:translateY(0) scale(1); }
body[data-page="home"] .promo-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(90deg,var(--red-dark),var(--red-2),#000);
  border-radius:22px 22px 0 0;
}
body[data-page="home"] .promo-x{
  position:absolute; top:14px; right:16px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  font-size:15px; cursor:pointer; line-height:1; transition:background .18s, color .18s, border-color .18s;
}
body[data-page="home"] .promo-x:hover{ background:#000; color:#fff; border-color:#000; }
body[data-page="home"] .promo-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:2px; text-transform:uppercase; color:var(--red-dark);
  background:rgba(216,31,43,.08); border:1px solid rgba(216,31,43,.2);
  padding:6px 14px; border-radius:999px;
}
body[data-page="home"] .promo-dot{ width:7px; height:7px; border-radius:50%; background:var(--red); animation:autoLive 1.8s ease-out infinite; }
body[data-page="home"] .promo-card h3{
  font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:27px; line-height:1.18; letter-spacing:-.6px; color:var(--ink); margin:18px 0 0;
}
body[data-page="home"] .promo-card h3 b{ color:var(--red-dark); font-weight:700; }
body[data-page="home"] .promo-sub{ font-size:14.5px; line-height:1.55; color:var(--muted); margin:12px auto 0; max-width:34ch; }
body[data-page="home"] .promo-price{ display:flex; align-items:baseline; justify-content:center; gap:12px; margin:22px 0 4px; }
body[data-page="home"] .promo-was{ font-size:22px; color:var(--muted); text-decoration:line-through; text-decoration-color:var(--red); }
body[data-page="home"] .promo-now{
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:52px; letter-spacing:-1.5px; color:var(--ink); line-height:1;
}
body[data-page="home"] .promo-tag{ font-size:13px; color:var(--muted); }
body[data-page="home"] .promo-timer{ display:flex; align-items:center; justify-content:center; gap:10px; margin:20px 0 24px; }
body[data-page="home"] .pt-box{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:66px; padding:12px 8px; border-radius:14px;
  background:linear-gradient(180deg,#111,#000); color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
body[data-page="home"] .pt-box span{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:32px; line-height:1; letter-spacing:1px; font-variant-numeric:tabular-nums; }
body[data-page="home"] .pt-box small{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#ff9ba1; }
body[data-page="home"] .pt-colon{ font-weight:700; font-size:28px; color:var(--red); }
body[data-page="home"] .promo-cta{ width:100%; justify-content:center; }
body[data-page="home"] .promo-fine{ font-size:11.5px; color:var(--muted); margin-top:14px; }
@media (max-width:480px){
  body[data-page="home"] .promo-card{ padding:34px 22px 26px; }
  body[data-page="home"] .promo-card h3{ font-size:23px; }
  body[data-page="home"] .promo-now{ font-size:44px; }
}
@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .promo-overlay, body[data-page="home"] .promo-card{ transition:none; }
  body[data-page="home"] .promo-dot{ animation:none; }
}

/* ═══════════════ ELEGANT DISPLAY FONT — Cormorant Garamond ═══════════════ */
body[data-page="home"] h1,
body[data-page="home"] h2,
body[data-page="home"] h3,
body[data-page="home"] .head h2,
body[data-page="home"] .pname,
body[data-page="home"] .amt,
body[data-page="home"] .promo-card h3,
body[data-page="home"] .promo-now,
body[data-page="home"] .hHero-stats .n{
  font-family:'Cormorant Garamond', Georgia, serif !important;
  letter-spacing:-.3px;
}
body[data-page="home"] .head h2{ letter-spacing:-.4px; }

/* ═══════════════ BOLDER HOME FONTS (higher visibility) ═══════════════ */
/* Headings use Cormorant Garamond at its heaviest weight (700) */
body[data-page="home"] h1,
body[data-page="home"] h2,
body[data-page="home"] h3,
body[data-page="home"] .head h2,
body[data-page="home"] .hHero h1,
body[data-page="home"] .pname,
body[data-page="home"] .amt,
body[data-page="home"] .promo-card h3,
body[data-page="home"] .promo-now,
body[data-page="home"] .hHero-stats .n,
body[data-page="home"] .why-card h3,
body[data-page="home"] .svc h3{
  font-weight:700 !important;
}
/* Body / supporting text nudged to medium so it reads stronger */
body[data-page="home"] .hlead,
body[data-page="home"] p,
body[data-page="home"] li,
body[data-page="home"] .why-card p,
body[data-page="home"] .svc p,
body[data-page="home"] .testi p,
body[data-page="home"] .pill,
body[data-page="home"] .hHero-trust li,
body[data-page="home"] .hHero-stats .l{
  font-weight:500 !important;
}

/* ═══════════════ FULLY-VISIBLE BACKGROUND IMAGES (darkened + light text) ═══════════════ */
/* Why-a-website band: office photo shows through boldly, heading turns white */
body[data-page="home"] #why{
  background-image:
    linear-gradient(180deg, rgba(8,10,14,.86) 0%, rgba(8,10,14,.74) 48%, rgba(8,10,14,.9) 100%),
    url('../ai/people-why.jpg');
  background-position:center, center 30%;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
}
body[data-page="home"] #why .head h2{ color:#fff; }
body[data-page="home"] #why .head p{ color:rgba(255,255,255,.84); }
body[data-page="home"] #why .head .eyebrow{ color:#ff9ba1; }

/* Final CTA band: background photo at full strength behind the white card */
body[data-page="home"] .section.final::before{
  opacity:1;
  background:url('../ai/ai-cta-bg.jpg') center/cover no-repeat;
}
body[data-page="home"] .section.final::after{
  background:linear-gradient(180deg, rgba(8,10,14,.5) 0%, rgba(8,10,14,.72) 100%);
}

/* ═══════════════ HERO TEXT VISIBILITY (placed last so it wins the cascade) ═══════════════ */
body[data-page="home"] .hHero h1{ color:#fff !important; }
body[data-page="home"] .hHero .hlead{ color:rgba(255,255,255,.9) !important; }
body[data-page="home"] .hHero .pill{ color:#fff !important; background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.32) !important; }
body[data-page="home"] .hHero .hHero-trust li{ color:rgba(255,255,255,.92) !important; }
body[data-page="home"] .hHero .hHero-trust li::before{ background-color:var(--red) !important; }
/* keep the red gradient on the highlighted word */
body[data-page="home"] .hHero h1 .g{ -webkit-text-fill-color:transparent; background:linear-gradient(100deg,#ff5964,var(--red-dark)); -webkit-background-clip:text; background-clip:text; }

/* ═══════════════ VERIFIED GOOGLE REVIEWS BADGE (below reviews grid) ═══════════════ */
body[data-page="home"] .reviews-verify{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin:34px auto 0; padding:14px 24px; width:max-content; max-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow-sm);
}
body[data-page="home"] .reviews-verify .rv-g{ width:24px; height:24px; flex:0 0 auto; }
body[data-page="home"] .reviews-verify .rv-stars{ color:#fbbc05; font-size:17px; letter-spacing:2px; }
body[data-page="home"] .reviews-verify .rv-text{ font-size:14.5px; color:var(--text); font-weight:600; }
body[data-page="home"] .reviews-verify .rv-text b{ color:var(--ink); }

/* ═══════════════ AI-GROWTH AUTOMATION OVERLAY (animated) ═══════════════ */
body[data-page="home"] #process{ position:relative; }
body[data-page="home"] .auto-overlay{
  position:absolute; z-index:6;
  width:300px;
  background:rgba(12,14,20,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:18px 20px;
  box-shadow:0 24px 54px rgba(0,0,0,.45);
  animation:aoFloat 5.5s ease-in-out infinite;
}
/* Placement: top-left corner of the "How It Works" section */
body[data-page="home"] .auto-overlay--proc{ top:26px; left:26px; }
/* Hide on narrower screens where it would overlap the centered heading */
@media (max-width:1180px){ body[data-page="home"] .auto-overlay--proc{ display:none; } }
@keyframes aoFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
body[data-page="home"] .ao-head{ margin-bottom:11px; }
body[data-page="home"] .ao-live{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; color:#5ee0a0; }
body[data-page="home"] .ao-dot{ width:8px; height:8px; border-radius:50%; background:#33d17a; box-shadow:0 0 0 0 rgba(51,209,122,.6);
  animation:aoPulse 1.8s ease-out infinite; }
@keyframes aoPulse{ 0%{ box-shadow:0 0 0 0 rgba(51,209,122,.55); } 70%{ box-shadow:0 0 0 9px rgba(51,209,122,0); } 100%{ box-shadow:0 0 0 0 rgba(51,209,122,0); } }
body[data-page="home"] .ao-steps{ display:flex; flex-direction:column; gap:9px; }
body[data-page="home"] .ao-step{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:9px 11px;
  opacity:0; transform:translateX(-8px); animation:aoStepIn 6s ease-in-out infinite; }
body[data-page="home"] .ao-step .ao-ic{ flex:0 0 auto; font-size:14px; }
body[data-page="home"] .ao-step .ao-ok{ margin-left:auto; color:#33d17a; font-weight:800; opacity:0; animation:aoOk 6s ease-in-out infinite; }
body[data-page="home"] .ao-s1, body[data-page="home"] .ao-s1 .ao-ok{ animation-delay:.2s; }
body[data-page="home"] .ao-s2, body[data-page="home"] .ao-s2 .ao-ok{ animation-delay:1.4s; }
body[data-page="home"] .ao-s3, body[data-page="home"] .ao-s3 .ao-ok{ animation-delay:2.6s; }
@keyframes aoStepIn{ 0%{ opacity:0; transform:translateX(-8px); } 8%,88%{ opacity:1; transform:translateX(0); } 100%{ opacity:1; transform:translateX(0); } }
@keyframes aoOk{ 0%,10%{ opacity:0; } 16%,100%{ opacity:1; } }

/* ═══════════════ ENERGY — animated pulse-glow on primary CTAs ═══════════════ */
body[data-page="home"] .hHero-cta .btn-red,
body[data-page="home"] .section.final .btn-red{ animation:ctaGlow 2.8s ease-in-out infinite; }
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 8px 22px rgba(216,31,43,.28); }
  50%{ box-shadow:0 12px 34px rgba(216,31,43,.5); }
}
body[data-page="home"] .btn-red{ position:relative; overflow:hidden; }
body[data-page="home"] .btn-red::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); animation:ctaSheen 4.5s ease-in-out infinite;
}
@keyframes ctaSheen{ 0%,60%{ left:-120%; } 80%,100%{ left:130%; } }

@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .auto-overlay,
  body[data-page="home"] .ao-dot,
  body[data-page="home"] .ao-step,
  body[data-page="home"] .ao-step .ao-ok,
  body[data-page="home"] .hHero-cta .btn-red,
  body[data-page="home"] .section.final .btn-red,
  body[data-page="home"] .btn-red::after{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — rebuilt to match optionsdigital.org (dark cinematic + colours)
   Scoped to the homepage only; inner pages are untouched.
   ═══════════════════════════════════════════════════════════════════ */
body[data-page="home"] .hero{ position:relative; overflow:hidden; padding:70px 0 80px; isolation:isolate; }
body[data-page="home"] .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.95; z-index:0; pointer-events:none; }
body[data-page="home"] .hero-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,10,18,.88) 0%, rgba(7,10,18,.60) 34%, rgba(7,10,18,.20) 64%, rgba(7,10,18,.28) 100%),
    linear-gradient(180deg, rgba(7,10,18,.45) 0%, rgba(7,10,18,0) 24%, rgba(7,10,18,0) 60%, rgba(7,10,18,.95) 100%); }
body[data-page="home"] .hero::before{ content:""; position:absolute; top:-180px; right:-160px; width:620px; height:620px; border-radius:50%; z-index:1;
  background:radial-gradient(circle, rgba(59,139,255,.30), transparent 62%); animation:drift 16s ease-in-out infinite alternate; pointer-events:none; }
body[data-page="home"] .hero::after{ content:""; position:absolute; bottom:-220px; left:-180px; width:560px; height:560px; border-radius:50%; z-index:1;
  background:radial-gradient(circle, rgba(255,39,64,.24), transparent 62%); animation:drift 19s ease-in-out infinite alternate-reverse; pointer-events:none; }
body[data-page="home"] .hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }

body[data-page="home"] .hero .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color:#3b8bff; }
body[data-page="home"] .hero .eyebrow::before{ content:""; width:22px; height:2px; background:#ff2740; border-radius:2px; }
body[data-page="home"] .hero h1{ font-size:clamp(34px,4.6vw,56px); letter-spacing:-1px; line-height:1.1; margin:20px 0 0; color:#f4f8ff !important; text-shadow:0 2px 36px rgba(0,0,0,.55); }
body[data-page="home"] .hero h1 .g{ color:transparent; -webkit-text-fill-color:transparent;
  background:linear-gradient(90deg,#ff2740,#ff7a3c,#3b8bff,#ff2740); -webkit-background-clip:text; background-clip:text; }
body[data-page="home"] .hero .sub{ font-size:18px; color:#bcc8df !important; margin-top:20px; max-width:46ch; font-weight:500; }
body[data-page="home"] .hero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
body[data-page="home"] .hero-cta .btn-red{ background:linear-gradient(180deg,#ef2b37,#d11023); color:#fff; box-shadow:0 8px 22px rgba(225,29,42,.30); }
body[data-page="home"] .hero-cta .btn-outline{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.18); color:#f4f8ff; box-shadow:none; }
body[data-page="home"] .hero-cta .btn-outline:hover{ border-color:#3b8bff; color:#fff; background:rgba(59,139,255,.10); }
body[data-page="home"] .hero-badges{ display:flex; flex-wrap:wrap; gap:22px; margin-top:30px; }
body[data-page="home"] .hero-badges .b{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px; color:#f4f8ff; }
body[data-page="home"] .hero-badges .b svg{ width:20px; height:20px; color:#3b8bff; flex:0 0 auto; }

body[data-page="home"] .hero .mock{ position:relative; }
body[data-page="home"] .hero .browser{ background:#0f1828; border:1px solid rgba(255,255,255,.09); border-radius:16px; box-shadow:0 30px 70px rgba(0,0,0,.6); overflow:hidden; }
body[data-page="home"] .hero .browser .bar{ display:flex; align-items:center; gap:7px; padding:12px 14px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.09); }
body[data-page="home"] .hero .browser .bar i{ width:11px; height:11px; border-radius:50%; display:block; }
body[data-page="home"] .hero .browser .url{ margin-left:10px; flex:1; height:20px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); }
body[data-page="home"] .hero .browser .screen{ padding:22px; }
body[data-page="home"] .hero .sk-hero{ height:90px; border-radius:12px; background:linear-gradient(120deg,#0b1a33,#1f6ae0); position:relative; overflow:hidden; }
body[data-page="home"] .hero .sk-hero::after{ content:"More Leads. More Growth."; position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#fff; font-weight:800; font-size:15px; }
body[data-page="home"] .hero .sk-row{ display:flex; gap:12px; margin-top:16px; }
body[data-page="home"] .hero .sk-card{ flex:1; height:76px; border-radius:10px; border:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; text-align:center; }
body[data-page="home"] .hero .sk-card .ic{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; }
body[data-page="home"] .hero .sk-card .ic svg{ width:18px; height:18px; }
body[data-page="home"] .hero .sk-card .lbl{ font-weight:700; font-size:11px; color:#f4f8ff; }
body[data-page="home"] .hero .sk-card.c1{ background:rgba(29,111,224,.10); }
body[data-page="home"] .hero .sk-card.c1 .ic{ background:linear-gradient(150deg,#2f80ed,#1559b8); }
body[data-page="home"] .hero .sk-card.c2{ background:rgba(255,255,255,.04); }
body[data-page="home"] .hero .sk-card.c2 .ic{ background:linear-gradient(150deg,#16335a,#0c2340); }
body[data-page="home"] .hero .sk-card.c3{ background:rgba(225,29,42,.10); }
body[data-page="home"] .hero .sk-card.c3 .ic{ background:linear-gradient(150deg,#ef2b37,#c2161f); }
body[data-page="home"] .hero .sk-line{ height:10px; border-radius:6px; background:rgba(255,255,255,.08); margin-top:12px; }
body[data-page="home"] .hero .sk-line.s{ width:60%; }
body[data-page="home"] .hero .sk-btn{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); }
body[data-page="home"] .hero .sk-btn img{ height:22px; width:auto; }
body[data-page="home"] .hero .sk-btn .wm{ font-weight:800; font-size:13px; letter-spacing:.2px; color:#f4f8ff; }
body[data-page="home"] .hero .sk-btn .wm span{ color:#3b8bff; }
body[data-page="home"] .hero .float-card{ position:absolute; background:#16223b; border:1px solid rgba(255,255,255,.09); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.55); padding:12px 15px; display:flex; align-items:center; gap:11px; z-index:3; }
body[data-page="home"] .hero .float-card .ic{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }
body[data-page="home"] .hero .float-card .t{ font-weight:800; font-size:15px; color:#f4f8ff; line-height:1.1; }
body[data-page="home"] .hero .float-card .s{ font-size:11.5px; color:#8493b0; }
body[data-page="home"] .hero .fc-1{ top:26px; left:-28px; animation:floaty 4s ease-in-out infinite; }
body[data-page="home"] .hero .fc-2{ bottom:28px; right:-22px; animation:floaty 4s ease-in-out infinite .8s; }

@media (max-width:900px){
  body[data-page="home"] .hero-grid{ grid-template-columns:1fr; gap:40px; }
  body[data-page="home"] .hero .mock{ max-width:460px; margin:0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   SOLID COLOUR ACCENTS — add pop to the plainer card sections
   ═══════════════════════════════════════════════════════════════════ */
/* "Why It Matters" icon tiles → black & white (white tile, black icon) */
body[data-page="home"] #why .why-ico,
body[data-page="home"] #why .why-card:nth-child(5n+2) .why-ico,
body[data-page="home"] #why .why-card:nth-child(5n+3) .why-ico,
body[data-page="home"] #why .why-card:nth-child(5n+4) .why-ico,
body[data-page="home"] #why .why-card:nth-child(5n) .why-ico{
  background:#ffffff !important; border:none !important; color:#0c1116 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
body[data-page="home"] #why .why-ico svg{ color:#0c1116 !important; stroke:#0c1116 !important; }

/* "How It Works" step numbers → black & white (white circle, black border + numerals) */
body[data-page="home"] .proc3 .pn,
body[data-page="home"] .proc3:nth-child(2) .pn,
body[data-page="home"] .proc3:nth-child(3) .pn{
  background:#ffffff !important; border:2px solid #0c1116 !important; color:#0c1116 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

/* Homepage Services icons use the original picture tiles (see .svc-ic-img rules above) */

/* Reviews → even 3-column grid (6 reviews = two tidy rows) */
body[data-page="home"] .testi-grid{ grid-template-columns:repeat(3, 1fr); gap:24px; }
@media (max-width:900px){
  body[data-page="home"] .testi-grid{ grid-template-columns:repeat(2, 1fr); max-width:none; margin:0; }
}
@media (max-width:600px){
  body[data-page="home"] .testi-grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; }
}

/* ═══════════════ RECENT WORK (portfolio) ═══════════════ */
body[data-page="home"] .work-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
body[data-page="home"] .work{
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .18s, border-color .18s, box-shadow .18s;
}
body[data-page="home"] .work:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
body[data-page="home"] .work-browser{ background:#0f1828; border-bottom:1px solid var(--line); }
body[data-page="home"] .wb-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.09); }
body[data-page="home"] .wb-bar i{ width:10px; height:10px; border-radius:50%; display:block; background:rgba(255,255,255,.22); }
body[data-page="home"] .wb-bar i:nth-child(1){ background:#ff5f57; }
body[data-page="home"] .wb-bar i:nth-child(2){ background:#febc2e; }
body[data-page="home"] .wb-bar i:nth-child(3){ background:#28c840; }
body[data-page="home"] .wb-url{ margin-left:10px; flex:1; height:18px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); }
body[data-page="home"] .work-shot{ aspect-ratio:16/10; background:#0b1220; display:flex; align-items:center; justify-content:center; overflow:hidden; }
body[data-page="home"] .work-shot img{ width:100%; height:100%; object-fit:contain; }
body[data-page="home"] .work-ph{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'DM Sans',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.4px;
  color:rgba(255,255,255,.42); text-transform:uppercase;
}
body[data-page="home"] .work-ph svg{ width:34px; height:34px; opacity:.6; }
body[data-page="home"] .work-meta{ padding:20px 22px 24px; }
body[data-page="home"] .work-tag{
  display:inline-flex; align-items:center; font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:#fff;
  background:linear-gradient(150deg,var(--red-2),var(--red-dark)); padding:6px 12px; border-radius:999px;
  box-shadow:0 6px 16px rgba(225,29,42,.24);
}
body[data-page="home"] .work-meta h3{ font-size:19px; margin-top:14px; color:var(--ink); }

/* Free-website CTA under the portfolio grid */
body[data-page="home"] .work-cta{ margin-top:48px; display:flex; flex-direction:column; align-items:center; text-align:center; }
body[data-page="home"] .work-cta-btn{ gap:10px; }
body[data-page="home"] .work-cta-btn svg{ width:19px; height:19px; }
body[data-page="home"] .work-cta-note{ margin-top:14px; max-width:460px; font-size:14px; line-height:1.55; color:var(--muted); }

/* Sticky floating free-design CTA (bottom-left, opposite the chat FAB) */
body[data-page="home"] .sticky-cta{
  position:fixed; left:22px; bottom:22px; z-index:115;
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 20px; border-radius:999px;
  background:linear-gradient(135deg,#ef2b37,#b0101c); color:#fff;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:14.5px; letter-spacing:.1px;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 10px 30px rgba(216,31,43,.38), 0 2px 8px rgba(0,0,0,.12);
  transform:translateY(24px); opacity:0; pointer-events:none;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .45s ease, box-shadow .25s ease;
}
body[data-page="home"] .sticky-cta.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
body[data-page="home"] .sticky-cta:hover{ box-shadow:0 14px 38px rgba(216,31,43,.5), 0 3px 10px rgba(0,0,0,.16); }
body[data-page="home"] .sticky-cta svg{ width:19px; height:19px; flex:none; }
@media(max-width:680px){
  body[data-page="home"] .sticky-cta{ left:16px; bottom:16px; padding:12px 16px; font-size:13px; }
  body[data-page="home"] .sticky-cta svg{ width:17px; height:17px; }
}

/* ═══════════════ REVIEWS → GOOGLE CTA ═══════════════ */
body[data-page="home"] .reviews-cta{ display:flex; justify-content:center; margin-top:26px; }
body[data-page="home"] .reviews-cta .g-mark{ width:19px; height:19px; }

/* ═══════════════ ABOUT US STRIP (founders) ═══════════════ */
body[data-page="home"] .founders-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:760px; margin:0 auto; }
body[data-page="home"] .founder{
  display:flex; align-items:center; gap:20px; padding:26px 28px;
  background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
body[data-page="home"] .founder:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow); }
body[data-page="home"] .founder-photo{
  width:82px; height:82px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--blue-2),var(--blue-dark));
}
body[data-page="home"] .founder:nth-child(2) .founder-photo{ background:linear-gradient(150deg,var(--red-2),var(--red-dark)); }
body[data-page="home"] .founder-photo img{ width:100%; height:100%; object-fit:cover; }
body[data-page="home"] .founder-ph{ font-family:'Cormorant Garamond',serif; font-weight:800; font-size:34px; color:#fff; line-height:1; display:flex; align-items:center; justify-content:center; }
body[data-page="home"] .founder-ph svg{ width:40px; height:40px; }
body[data-page="home"] .founder-info h3{ font-size:22px; color:var(--ink); }

/* About Us strip is now a standalone statement (no founder cards) */
body[data-page="home"] #founders .head{ margin-bottom:0; }

/* Footer column headings readable on the dark footer (home page) */
body[data-page="home"] footer .foot-col h4{ color:#fff; }
body[data-page="home"] .founder-role{ font-family:'DM Sans',sans-serif; font-weight:600; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:var(--blue); }

@media (max-width:900px){
  body[data-page="home"] .work-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  body[data-page="home"] .work-grid{ grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  body[data-page="home"] .founders-grid{ grid-template-columns:1fr; max-width:460px; }
}

/* ═══════════ PORTFOLIO CLICK-TO-ZOOM LIGHTBOX ═══════════ */
body[data-page="home"] .work-shot{ cursor:zoom-in; }

body[data-page="home"] .work-lightbox{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:4vw;
  background:rgba(6,12,20,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; cursor:zoom-out;
  transition:opacity .3s ease, visibility .3s ease;
}
body[data-page="home"] .work-lightbox.open{ opacity:1; visibility:visible; }

body[data-page="home"] .work-lightbox-img{
  max-width:min(1200px,94vw); max-height:90vh; width:auto; height:auto;
  border-radius:12px; background:#0b1a28;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  transform:scale(.94); cursor:default;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
body[data-page="home"] .work-lightbox.open .work-lightbox-img{ transform:scale(1); }

body[data-page="home"] .work-lightbox-close{
  position:fixed; top:20px; right:24px; z-index:2001;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  color:#fff; font-size:19px; line-height:1; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
body[data-page="home"] .work-lightbox-close:hover{ background:rgba(255,255,255,.26); transform:scale(1.06); }

@media (prefers-reduced-motion:reduce){
  body[data-page="home"] .work-lightbox,
  body[data-page="home"] .work-lightbox-img{ transition:opacity .2s ease; transform:none; }
}