@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --cream: #FAF6ED;
  --cream-deep: #F1EADA;
  --navy: #1B2A4A;
  --navy-soft: #33456B;
  --navy-faint: rgba(27,42,74,0.12);
  --gold: #C9973E;
  --gold-soft: #E4C486;
  --white: #FFFFFF;
  --line: rgba(27,42,74,0.14);
  --serif: 'Spectral', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --maxw: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* fixed tokens: used by components that must stay dark/light regardless of theme */
  --navy-fixed: #1B2A4A;
  --cream-fixed: #FAF6ED;
  --card-shadow: rgba(27,42,74,0.25);
  --surface-alpha: 1;
  color-scheme: light;
}

/* ===== GLASSMORPHISM (light mode frosted cards) ===== */
html:not([data-theme="dark"]) .service-card,
html:not([data-theme="dark"]) .bundle-card,
html:not([data-theme="dark"]) .compare-card,
html:not([data-theme="dark"]) .testimonial-card,
html:not([data-theme="dark"]) .price-box,
html:not([data-theme="dark"]) .figure-card,
html:not([data-theme="dark"]) .calc-card,
html:not([data-theme="dark"]) .vs-col:not(.partner),
html:not([data-theme="dark"]) .savings-card,
html:not([data-theme="dark"]) .case-card{
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ===== DARK MODE ===== */
html[data-theme="dark"]{
  color-scheme: dark;
  --cream: #0B1220;
  --cream-deep: #101A2E;
  --navy: #F1EADA;
  --navy-soft: rgba(241,234,218,0.68);
  --navy-faint: rgba(241,234,218,0.10);
  --white: #141F35;
  --line: rgba(241,234,218,0.12);
  --gold-soft: #E9C97F;
  --card-shadow: rgba(0,0,0,0.55);
  --surface-alpha: 0.6;
}
html[data-theme="dark"] body{ background: var(--cream); }
html[data-theme="dark"] .wa-tooltip{ box-shadow:0 12px 28px -8px rgba(0,0,0,0.5); }
/* recolor navy-stroked inline SVG line-art so it stays visible on dark bg */
html[data-theme="dark"] svg [stroke="#1B2A4A"]{ stroke:var(--gold-soft) !important; }
html[data-theme="dark"] svg [fill="#1B2A4A"]{ fill:var(--gold-soft) !important; }
html[data-theme="dark"] svg [fill="#33456B"]{ fill:rgba(241,234,218,0.45) !important; }
/* Blueprint/network line-art always sits on top of the dark hero/page-header video,
   in every site theme, so it must always render in light/gold ink, not just in dark mode. */
.hero-art svg [stroke="#1B2A4A"],
.page-header-art-frame svg [stroke="#1B2A4A"]{ stroke:#E4C486 !important; }
.hero-art svg [fill="#1B2A4A"],
.page-header-art-frame svg [fill="#1B2A4A"]{ fill:#E4C486 !important; }
.hero-art svg [fill="#33456B"],
.page-header-art-frame svg [fill="#33456B"]{ fill:rgba(241,234,218,0.65) !important; }
html[data-theme="dark"] .blueprint-bg{
  background-image:
    linear-gradient(rgba(241,234,218,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,234,218,0.07) 1px, transparent 1px),
    linear-gradient(rgba(241,234,218,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241,234,218,0.03) 1px, transparent 1px);
}
html[data-theme="dark"] .nav{ background: rgba(11,18,32,0.78); }
html[data-theme="dark"] .nav-links.open{ background: var(--cream); }
html[data-theme="dark"] ::selection{ background: var(--gold); color:#1B2A4A; }
/* glass surface for cards in dark mode */
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .bundle-card,
html[data-theme="dark"] .compare-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .price-box,
html[data-theme="dark"] .figure-card,
html[data-theme="dark"] .calc-card,
html[data-theme="dark"] .vs-col:not(.partner),
html[data-theme="dark"] .savings-card,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .legal-modal{
  background: rgba(20,31,53,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--line);
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea{
  background: rgba(20,31,53,0.6);
  color: var(--navy);
  border-color: var(--line);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family: var(--sans); color: var(--navy); background: var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding:0 32px; }
.blueprint-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--navy-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-faint) 1px, transparent 1px),
    linear-gradient(rgba(27,42,74,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,42,74,0.055) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
  animation: blueprint-drift 70s linear infinite;
}
@keyframes blueprint-drift{
  from{ background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px; }
  to{ background-position: -1px -1px, -1px -1px, 15px 15px, 15px 15px; }
}
@media (prefers-reduced-motion: reduce){ .blueprint-bg{ animation:none !important; } }
.eyebrow{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight:600; display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:22px; height:1px; background: var(--gold); display:inline-block; }
.sheet-tag{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--navy-soft); opacity:0.65; }
h1,h2,h3,h4{ font-family: var(--serif); color: var(--navy); font-weight:700; letter-spacing:-0.01em; line-height:1.15; }
h1{ font-size: clamp(2.4rem, 5vw, 4.1rem); font-weight:700; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight:700; }
h3{ font-size: 1.35rem; }
p{ color: var(--navy-soft); }
.lede{ font-size:1.2rem; color:var(--navy); font-weight:500; max-width:640px; }
.btn{ position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:0.95rem; padding:14px 26px; border-radius:3px; cursor:pointer; border:1.5px solid transparent; transition: all 0.35s var(--ease); white-space:nowrap; }
.btn-gold{ background: var(--gold); color: var(--white); border-color: transparent; }
.btn-gold:hover{ background: #b8842e; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(201,151,62,0.55); }
.btn-outline{ background:transparent; color: var(--navy); border-color: transparent; }
.btn-outline:hover{ background: var(--navy-fixed); color: var(--cream-fixed); transform: translateY(-2px); }
.btn-arrow{ transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ---- Consistent animated gradient border on every button ---- */
@property --btn-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.btn::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--btn-angle,0deg), var(--gold) 0%, var(--gold-soft) 22%, var(--navy-soft) 50%, var(--gold-soft) 78%, var(--gold) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: btn-border-spin 3.2s linear infinite;
}
.btn-outline::before{ opacity:0.85; }
@keyframes btn-border-spin{ to{ --btn-angle:360deg; } }
@media (prefers-reduced-motion: reduce){
  .btn::before{ animation:none !important; }
}
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; background: rgba(250,246,237,0.82); backdrop-filter: blur(10px); border-bottom:1px solid transparent; transition: all 0.4s var(--ease); }
.nav.scrolled{ border-bottom-color: var(--line); box-shadow: 0 4px 24px -12px rgba(27,42,74,0.15); }
.nav-inner{ max-width: var(--maxw); margin:0 auto; padding: 20px 32px; display:flex; align-items:center; justify-content:space-between; transition: padding 0.4s var(--ease); position:relative; z-index:100; }
.nav.scrolled .nav-inner{ padding:13px 32px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:1.2rem; color:var(--navy); }
.brand-mark{ width:30px; height:30px; flex-shrink:0; }
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{ font-size:0.92rem; font-weight:500; color: var(--navy-soft); position:relative; padding:4px 0; cursor:pointer; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background: var(--gold); transition: width 0.3s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--navy); font-weight:600; }
.nav-sub-link{ font-family:var(--mono); font-size:11.5px !important; font-weight:600 !important; letter-spacing:0.04em; color:var(--navy) !important; padding:7px 14px !important; border:1px solid var(--line); border-radius:20px; transition: all 0.3s var(--ease); }
.nav-sub-link:hover{ border-color:var(--gold); background:var(--navy-faint); }
.nav-sub-link::after{ display:none !important; }
.nav-cta-group{ display:flex; align-items:center; gap:22px; }
.nav-sheet{ font-family:var(--mono); font-size:10.5px; color: var(--navy-soft); opacity:0.55; letter-spacing:0.05em; }
.nav-toggle{ display:none; }
.nav-backdrop{ display:none; position:fixed; inset:0; z-index:99; background:rgba(27,42,74,0.4); backdrop-filter:blur(2px); opacity:0; transition:opacity 0.35s var(--ease); }
body.nav-open .nav-backdrop{ display:block; opacity:1; }
body.nav-open{ overflow:hidden; }
@media (max-width: 920px){
  .nav-links{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; z-index:100;
    background: var(--cream); padding:8px 32px 28px; gap:4px; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), padding 0.4s var(--ease);
    box-shadow: 0 24px 40px -20px rgba(27,42,74,0.25);
  }
  .nav-links > li{ width:100%; border-bottom:1px dashed var(--line); }
  .nav-links > li:last-child{ border-bottom:none; }
  .nav-links > li > a, .nav-links > li > .nav-drop-trigger{ display:flex; padding:16px 2px; width:100%; }
  .nav-links.open{ max-height:80vh; overflow-y:auto; opacity:1; pointer-events:auto; padding:12px 32px 28px; }
  .nav-sheet{ display:none; }
  /* --- Overflow fix: brand text + CTA button + hamburger were fighting for
     space on narrow phones, pushing the hamburger partly off-screen. The
     hamburger and CTA group must NEVER shrink; the brand text shrinks and
     truncates instead, and the gold button hides on very small screens
     (it's re-added inside the open mobile menu by script.js so nothing is lost). --- */
  .nav-inner{ flex-wrap:nowrap; }
  .brand{ flex-shrink:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .nav-cta-group{ gap:10px; flex-shrink:0; }
  .theme-toggle{ flex-shrink:0; }
  .nav-cta-group .btn-gold{ padding:10px 14px; font-size:0.86rem; flex-shrink:0; }
  .nav-cta-mobile{ display:list-item; }
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:36px; height:36px; background:none; border:none; cursor:pointer; padding:6px;
    flex-shrink:0; position:relative; z-index:101;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--navy-fixed); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); transform-origin:center; }
  .nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 480px){
  /* Below 480px there isn't room for a full-size CTA button next to the
     hamburger — shrink it and drop its label to an icon-free short word
     instead of hiding it, so the CTA is never missing on small phones. */
  .nav-cta-group .btn-gold{ padding:8px 10px; font-size:0.74rem; }
  .brand{ font-size:1.05rem; }
  .brand-mark{ width:24px; height:24px; }
}
@media (max-width: 400px){
  .nav-cta-group .btn-gold{ padding:7px 8px; font-size:0.7rem; }
  .nav-inner{ padding-left:20px; padding-right:20px; }
  .brand{ font-size:0.95rem; gap:7px; }
}
section{ position:relative; padding: 76px 0; }
.section-head{ margin-bottom:40px; max-width:720px; }
.section-head .eyebrow{ margin-bottom:18px; }
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:0.1s; } .reveal-delay-2{ transition-delay:0.2s; } .reveal-delay-3{ transition-delay:0.3s; } .reveal-delay-4{ transition-delay:0.4s; }
.hero{ padding-top:180px; padding-bottom:70px; overflow:hidden; position:relative; }
.hero-grid{ display:grid; grid-template-columns: 1fr; gap:48px; align-items:center; }
.hero h1{ margin: 20px 0 22px; }
.hero h1 em{ font-style:italic; color: var(--gold); }
.hero-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }
.draw-line{ stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.6s var(--ease) forwards 0.3s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.hero-art-fade{ opacity:0; animation: fadeIn 1s ease forwards 2s; }
@keyframes fadeIn{ to{ opacity:1; } }
.stat-bar{ margin-top:78px; padding-top:44px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ text-align:left; }
.stat .num{ font-family: var(--serif); font-size: clamp(1.9rem,3vw,2.6rem); color: var(--navy); font-weight:600; display:block; }
.stat .num .accent{ color: var(--gold); }
.stat .label{ font-family: var(--mono); font-size:11.5px; letter-spacing:0.05em; color: var(--navy-soft); text-transform:uppercase; margin-top:6px; display:block; }
@media (max-width: 920px){ .hero{ padding-top:120px; } }
@media (max-width: 860px){ .stat-bar{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 480px){ .hero{ padding-top:100px; } }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.compare-card{ background: var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.compare-card.bad{ border-top:3px solid #B5563C; }
.compare-card.good{ border-top:3px solid var(--gold); }
.compare-card h4{ font-family:var(--mono); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:20px; color:var(--navy-soft); }
.compare-card li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); color:var(--navy-soft); font-size:0.96rem; }
.compare-card li:last-child{ border-bottom:none; }
.compare-card.good li{ color:var(--navy); }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; } }
.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.service-card,
.bundle-card,
.testimonial-card,
.case-card,
.compare-card,
.calc-card,
.savings-card,
.figure-card{ isolation:isolate; position:relative; }
.service-card::before,
.bundle-card::before,
.testimonial-card::before,
.case-card::before,
.compare-card::before,
.calc-card::before,
.savings-card::before,
.figure-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background: conic-gradient(from 0deg, rgba(201,151,62,0.88), rgba(51,69,107,0.85), rgba(201,151,62,0.88));
  opacity:0; filter:blur(14px); transition: opacity 0.45s var(--ease);
}
.service-card:hover::before,
.bundle-card:hover::before,
.testimonial-card:hover::before,
.case-card:hover::before,
.compare-card:hover::before,
.calc-card:hover::before,
.savings-card:hover::before,
.figure-card:hover::before{ opacity:0.75; }
.service-card{ background: var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px 26px; position:relative; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.service-card:hover{ transform: translateY(-8px); box-shadow: 0 24px 48px -24px rgba(27,42,74,0.28); }
.service-card .stage{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.07em; color:var(--gold); text-transform:uppercase; }
.service-card .num{ font-family: var(--mono); font-size:2.1rem; color: var(--navy-faint); position:absolute; top:20px; right:22px; font-weight:600; }
.service-card h3{ margin: 18px 0 12px; font-size:1.18rem; }
.service-card p{ font-size:0.92rem; }
@media (max-width: 980px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .service-grid{ grid-template-columns:1fr; } }
.service-detail{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap:52px; align-items:start; padding: 56px 0; border-bottom:1px solid var(--line); }
.service-detail:last-child{ border-bottom:none; }
.service-detail .stage{ font-family:var(--mono); font-size:11px; letter-spacing:0.07em; color:var(--gold); text-transform:uppercase; }
.service-detail h3{ font-size:1.7rem; margin:14px 0 16px; }
.how-list{ margin-top:18px; }
.how-list li{ display:flex; gap:12px; padding:8px 0; font-size:0.93rem; color:var(--navy-soft); align-items:flex-start; }
.how-list li::before{ content:"→"; color:var(--gold); font-weight:600; flex-shrink:0; }
.price-box{ background: var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; }
.price-box .price-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line); font-size:0.94rem; }
.price-box .price-row:last-child{ border-bottom:none; }
.price-box .price-row .amt{ font-family:var(--mono); font-weight:600; color:var(--navy); }
.disclaimer-note{ margin-top:16px; font-size:0.8rem; color:var(--navy-soft); opacity:0.75; font-style:italic; border-left:2px solid var(--gold-soft); padding-left:12px; }
@media (max-width:840px){ .service-detail{ grid-template-columns:1fr; } }
.bundle-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bundle-card{ background: var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; position:relative; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.bundle-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(27,42,74,0.25); }
.bundle-card.featured{ border-color: var(--gold); border-width:2px; }
.bundle-card.featured::before{ content:"MOST POPULAR"; position:absolute; top:-13px; left:28px; background: var(--gold); color:var(--white); font-family:var(--mono); font-size:10px; letter-spacing:0.08em; padding:4px 10px; border-radius:2px; }
.bundle-card h4{ font-family:var(--serif); font-size:1.3rem; margin-bottom:6px; }
.bundle-card .b-desc{ font-size:0.88rem; color:var(--navy-soft); margin-bottom:18px; }
.bundle-card .b-price{ font-family:var(--mono); font-size:1.5rem; font-weight:600; color:var(--navy); display:block; margin-bottom:22px; }
.bundle-card .b-price span{ font-size:0.75rem; color:var(--navy-soft); font-weight:400; }
.bundle-card ul li{ font-size:0.88rem; color:var(--navy-soft); padding:6px 0; display:flex; gap:8px; }
.bundle-card ul li::before{ content:"✓"; color:var(--gold); font-weight:700; }
@media (max-width: 940px){ .bundle-grid{ grid-template-columns:1fr; } }
.timeline{ position:relative; margin-top:20px; }
.timeline::before{ content:""; position:absolute; left:29px; top:8px; bottom:8px; width:1.5px; background: var(--line); }
.tl-step{ display:grid; grid-template-columns:60px 1fr; gap:26px; padding:26px 0; position:relative; }
.tl-num{ width:60px; height:60px; border-radius:50%; background: var(--white); border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:600; color:var(--navy); z-index:1; font-size:1.05rem; }
.tl-step h4{ font-family:var(--serif); font-size:1.25rem; margin-bottom:6px; }
.tl-step p{ font-size:0.93rem; max-width:600px; }
.vs-wrap{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; }
.vs-col{ background: var(--white); border:1px solid var(--line); padding:34px 30px; }
.vs-col.partner{ background: var(--navy-fixed); color: var(--cream-fixed); border-color:var(--navy-fixed); }
.vs-col.partner h4, .vs-col.partner p, .vs-col.partner li{ color: var(--cream-fixed); }
.vs-col h4{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px; color:var(--navy-soft); }
.vs-col li{ padding:11px 0; border-bottom:1px dashed var(--line); font-size:0.93rem; color:var(--navy-soft); }
.vs-col.partner li{ border-bottom:1px dashed rgba(250,246,237,0.2); }
.vs-divider{ display:flex; align-items:center; justify-content:center; padding:0 26px; font-family:var(--mono); font-size:12px; color:var(--gold); font-weight:600; }
@media (max-width:820px){ .vs-wrap{ grid-template-columns:1fr; } .vs-divider{ padding:16px 0; } }
.story-block{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.story-block.reverse{ direction:rtl; }
.story-block.reverse > *{ direction:ltr; }
.big-figure{ font-family:var(--serif); font-size:clamp(4rem,9vw,7rem); font-weight:600; color:var(--navy); line-height:1; position:relative; }
.big-figure .pct{ color: var(--gold); }
.figure-card{ background: var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:48px 40px; text-align:center; }
@media (max-width:860px){ .story-block, .story-block.reverse{ grid-template-columns:1fr; direction:ltr; } }
.market-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.market-tags span{ font-family:var(--mono); font-size:12px; letter-spacing:0.03em; padding:8px 16px; border:1px solid var(--line); border-radius:20px; color:var(--navy-soft); background:var(--white); }
.cta-band{ background: var(--navy-fixed); color: var(--cream-fixed); border-radius:var(--radius); padding:64px 56px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden; }
.cta-band::after{ content:""; position:absolute; inset:0; opacity:0.06; pointer-events:none; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px, transparent 1px); background-size: 40px 40px; }
.cta-band h2{ color: var(--cream-fixed); font-size: clamp(1.6rem,3vw,2.2rem); max-width:480px; position:relative; }
.cta-band p{ color: rgba(250,246,237,0.75); margin-top:10px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .full{ grid-column: 1 / -1; }
.field label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--navy-soft); margin-bottom:8px; }
.field input, .field select, .field textarea{ width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:2px; background:var(--white); font-family:var(--sans); font-size:0.95rem; color:var(--navy); transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,151,62,0.15); }
.field textarea{ resize:vertical; min-height:110px; }
.contact-panel{ background: var(--navy-fixed); color:var(--cream-fixed); border-radius:var(--radius); padding:40px 34px; }
.contact-panel h4{ font-family:var(--mono); font-size:12px; letter-spacing:0.07em; text-transform:uppercase; color: var(--gold-soft); margin-bottom:22px; }
.contact-row{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(250,246,237,0.14); }
.contact-row:last-child{ border-bottom:none; }
.contact-row .lbl{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: rgba(250,246,237,0.55); display:block; margin-bottom:4px; }
.contact-row .val{ font-size:0.98rem; color: var(--cream-fixed); }
.contact-grid{ display:grid; grid-template-columns:1.25fr 0.9fr; gap:36px; align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } }
.form-note{ font-size:0.82rem; color:var(--navy-soft); opacity:0.8; margin-top:14px; }
.field-optional{ text-transform:none; letter-spacing:0; opacity:0.6; font-weight:400; }

/* ---- File upload / drag-drop ---- */
.file-drop{ position:relative; border:1.5px dashed var(--line); border-radius:6px; background:var(--white); padding:26px 20px; text-align:center; transition: border-color 0.25s ease, background 0.25s ease; }
.file-drop.drag-over{ border-color:var(--gold); background:rgba(201,151,62,0.07); }
.file-drop input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.file-drop-inner{ display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; }
.file-drop-inner svg{ width:26px; height:26px; color:var(--gold); margin-bottom:4px; }
.file-drop-text{ font-family:var(--sans); font-size:0.92rem; color:var(--navy); font-weight:500; }
.file-drop-text strong{ color:var(--gold); text-decoration:underline; }
.file-drop-hint{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.03em; color:var(--navy-soft); opacity:0.75; }
.file-drop-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left; }
.file-drop-list li{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:0.85rem; color:var(--navy); background:var(--navy-faint); border-radius:4px; padding:8px 12px; pointer-events:auto; }
.file-drop-list .fd-name{ flex-grow:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-drop-list .fd-size{ font-family:var(--mono); font-size:10.5px; color:var(--navy-soft); flex-shrink:0; }
.file-drop-list .fd-remove{ flex-shrink:0; width:20px; height:20px; border-radius:50%; border:none; background:transparent; color:var(--navy-soft); cursor:pointer; font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center; transition: background 0.2s ease, color 0.2s ease; }
.file-drop-list .fd-remove:hover{ background:rgba(201,151,62,0.18); color:var(--gold); }
.file-drop-error{ font-family:var(--sans); font-size:0.8rem; color:#c0392b; margin-top:10px; text-align:left; }
html[data-theme="dark"] .file-drop-error{ color:#ff8a7a; }
.success-msg{ display:none; background: var(--white); border:1px solid var(--gold); border-radius:var(--radius); padding:20px 24px; margin-top:18px; font-size:0.92rem; }
.success-msg.show{ display:block; }
/* ============================================================
   PAGE-WIDE MOVING CONSTRUCTION TEXTURE
   A tiled pattern of small blueprint icons (mini crane, ruler ticks,
   dots) repeats and slowly drifts behind every content section on
   every page — not just the hero and footer. Pure CSS/SVG, one rule,
   no per-page markup needed.
   ============================================================ */
body > section{ position:relative; }
body > section::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cfilter id='bpglow' x='-100%25' y='-100%25' width='300%25' height='300%25'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 50H200M0 100H200M0 150H200M50 0V200M100 0V200M150 0V200' stroke='%23C9973E' stroke-opacity='0.06' stroke-width='1'/%3E%3Cg stroke='%23C9973E' stroke-opacity='0.42' stroke-width='1.2' stroke-dasharray='1 4' stroke-linecap='round' fill='none'%3E%3Cline x1='28' y1='38' x2='118' y2='24'/%3E%3Cline x1='118' y1='24' x2='168' y2='88'/%3E%3Cline x1='168' y1='88' x2='138' y2='158'/%3E%3Cline x1='58' y1='118' x2='138' y2='158'/%3E%3Cline x1='28' y1='38' x2='58' y2='118'/%3E%3Cline x1='58' y1='118' x2='18' y2='168'/%3E%3C/g%3E%3Cg fill='%23C9973E'%3E%3Ccircle cx='28' cy='38' r='7' opacity='0.35' filter='url(%23bpglow)'/%3E%3Ccircle cx='118' cy='24' r='7' opacity='0.35' filter='url(%23bpglow)'/%3E%3Ccircle cx='168' cy='88' r='7' opacity='0.35' filter='url(%23bpglow)'/%3E%3Ccircle cx='58' cy='118' r='7' opacity='0.35' filter='url(%23bpglow)'/%3E%3Ccircle cx='138' cy='158' r='7' opacity='0.35' filter='url(%23bpglow)'/%3E%3Ccircle cx='18' cy='168' r='7' opacity='0.35' filter='url(%23bpglow)'/%3E%3Ccircle cx='28' cy='38' r='2.4'/%3E%3Ccircle cx='118' cy='24' r='2.4'/%3E%3Ccircle cx='168' cy='88' r='2.4'/%3E%3Ccircle cx='58' cy='118' r='2.4'/%3E%3Ccircle cx='138' cy='158' r='2.4'/%3E%3Ccircle cx='18' cy='168' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:200px 200px;
  animation: section-grid-drift 60s linear infinite, texture-glow-pulse 4.5s ease-in-out infinite;
}
@keyframes section-grid-drift{
  from{ background-position:0 0; }
  to{ background-position:200px 200px; }
}
@keyframes texture-glow-pulse{
  0%,100%{ opacity:0.7; filter:brightness(1); }
  50%{ opacity:1; filter:brightness(1.45); }
}
body > section > .wrap{ position:relative; z-index:1; }
@media (max-width:760px){
  body > section::before{ background-size:140px 140px; }
}
@media (prefers-reduced-motion: reduce){
  body > section::before{ animation:none !important; }
}

/* Light-mode variant: the gold glow-blur dots read as a soft blueprint
   glow on dark navy, but the same colors/blur on a light cream background
   just look like scattered smudges. Swap in a crisper, non-glowing,
   lower-key version for light mode only — dark mode is untouched. */
html:not([data-theme="dark"]) body > section::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0 50H200M0 100H200M0 150H200M50 0V200M100 0V200M150 0V200' stroke='%231B2A4A' stroke-opacity='0.05' stroke-width='1'/%3E%3Cg stroke='%23AD7F2E' stroke-opacity='0.3' stroke-width='1.1' stroke-dasharray='1 4' stroke-linecap='round' fill='none'%3E%3Cline x1='28' y1='38' x2='118' y2='24'/%3E%3Cline x1='118' y1='24' x2='168' y2='88'/%3E%3Cline x1='168' y1='88' x2='138' y2='158'/%3E%3Cline x1='58' y1='118' x2='138' y2='158'/%3E%3Cline x1='28' y1='38' x2='58' y2='118'/%3E%3Cline x1='58' y1='118' x2='18' y2='168'/%3E%3C/g%3E%3Cg fill='%23AD7F2E'%3E%3Ccircle cx='28' cy='38' r='2.1'/%3E%3Ccircle cx='118' cy='24' r='2.1'/%3E%3Ccircle cx='168' cy='88' r='2.1'/%3E%3Ccircle cx='58' cy='118' r='2.1'/%3E%3Ccircle cx='138' cy='158' r='2.1'/%3E%3Ccircle cx='18' cy='168' r='2.1'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes texture-glow-pulse-light{
  0%,100%{ opacity:0.55; }
  50%{ opacity:0.85; }
}
html:not([data-theme="dark"]) body > section::before{
  animation: section-grid-drift 60s linear infinite, texture-glow-pulse-light 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  html:not([data-theme="dark"]) body > section::before{ animation:none !important; }
}

/* ---- Footer: small moving construction elements (pure CSS, no markup changes) ---- */
footer{ background: var(--navy-fixed); color: var(--cream-fixed); padding: 64px 0 28px; margin-top:60px; position:relative; overflow:hidden; }
footer::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(201,151,62,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,151,62,0.09) 1px, transparent 1px);
  background-size:46px 46px, 46px 46px;
  animation: footer-grid-drift 40s linear infinite;
}
@keyframes footer-grid-drift{
  from{ background-position:0 0, 0 0; }
  to{ background-position:46px 46px, 46px 46px; }
}
footer .wrap{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  footer::before{ animation:none !important; }
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(250,246,237,0.14); }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.25rem; font-weight:700; margin-bottom:14px; }
.footer-tagline{ font-size:0.9rem; color: rgba(250,246,237,0.65); max-width:280px; }
footer h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color: var(--gold-soft); margin-bottom:16px; }
footer li{ padding:6px 0; }
footer a{ font-size:0.9rem; color: rgba(250,246,237,0.75); transition:color 0.25s ease; }
footer a:hover{ color: var(--gold-soft); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ font-size:0.8rem; color: rgba(250,246,237,0.5); }
.footer-disclaimer{ font-size:0.76rem; color: rgba(250,246,237,0.45); max-width:900px; margin-top:14px; line-height:1.6; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.text-gold{ color: var(--gold); }

/* ===== SCROLL PROGRESS BAR ===== */
.progress-bar{ position:fixed; top:0; left:0; height:2.5px; width:0%; background:linear-gradient(90deg, var(--gold), var(--navy)); z-index:1000; }

/* ===== GRAIN TEXTURE ===== */
.grain-overlay{ position:fixed; inset:0; z-index:998; pointer-events:none; opacity:0.05; mix-blend-mode:multiply; }
.grain-overlay svg{ width:100%; height:100%; display:block; }

/* ===== CUSTOM CURSOR ===== */
@media (pointer:fine){
  body, a, button, .btn, input, textarea, select, label{ cursor:none; }
}
.cursor-dot{ position:fixed; top:0; left:0; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--gold); pointer-events:none; z-index:1001; opacity:0; transition:opacity 0.25s ease, transform 0.15s ease; }
.cursor-ring{ position:fixed; top:0; left:0; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%; border:1.5px solid var(--navy); pointer-events:none; z-index:1001; opacity:0; transition:width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.25s ease; }
.cursor-dot.show, .cursor-ring.show{ opacity:1; }
.cursor-ring.hover{ width:58px; height:58px; margin:-29px 0 0 -29px; border-color:var(--gold); background:rgba(201,151,62,0.1); }
.cursor-ring.text-hover{ width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--gold); border-color:transparent; opacity:0.5; }
@media (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
  body, a, button, .btn, input, textarea, select, label{ cursor:auto; }
}

/* ===== SIDE NAV RAIL ===== */
.side-rail{ position:fixed; right:30px; top:50%; transform:translateY(-50%); z-index:90; display:flex; flex-direction:column; gap:17px; }
.side-rail a{ width:8px; height:8px; border-radius:50%; background:transparent; border:1.5px solid var(--navy-soft); opacity:0.4; position:relative; display:block; transition:all 0.35s var(--ease); }
.side-rail a::after{ content: attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%) translateX(6px); font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--navy); background:var(--white); padding:6px 11px; border:1px solid var(--line); border-radius:2px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.25s var(--ease), transform 0.25s var(--ease); box-shadow:0 8px 20px -10px rgba(27,42,74,0.3); }
.side-rail a:hover{ opacity:1; border-color:var(--gold); }
.side-rail a:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
.side-rail a.active{ background:var(--gold); border-color:var(--gold); opacity:1; transform:scale(1.35); }
@media (max-width:1150px){ .side-rail{ display:none; } }

/* ===== MARQUEE TICKER ===== */
.marquee{ background:var(--navy-fixed); border-top:1px solid rgba(250,246,237,0.14); border-bottom:1px solid rgba(250,246,237,0.14); overflow:hidden; padding:15px 0; position:relative; }
.marquee-track{ display:flex; width:max-content; animation: marquee-scroll 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:flex; align-items:center; gap:16px; font-family:var(--mono); font-size:12px; letter-spacing:0.09em; text-transform:uppercase; color:rgba(250,246,237,0.85); padding:0 30px; white-space:nowrap; }
.marquee-item .dot{ color:var(--gold); }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ===== TESTIMONIALS ===== */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.testimonial-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:38px 32px 30px; position:relative; display:flex; flex-direction:column; height:100%; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.testimonial-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(27,42,74,0.25); }
.testimonial-card .quote-mark{ font-family:var(--serif); font-size:3rem; color:var(--gold-soft); line-height:1; margin-bottom:4px; }
.testimonial-card p.quote{ font-family:var(--serif); font-style:italic; font-size:1.04rem; color:var(--navy); flex-grow:1; margin-bottom:26px; }
.testimonial-card .t-person{ border-top:1px dashed var(--line); padding-top:16px; }
.testimonial-card .t-name{ font-weight:600; color:var(--navy); font-size:0.95rem; }
.testimonial-card .t-role{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; color:var(--navy-soft); text-transform:uppercase; margin-top:3px; opacity:0.85; }
@media (max-width:940px){ .testimonial-grid{ grid-template-columns:1fr; } }

/* ===== PARALLAX / MAGNETIC HELPERS ===== */
.hero-art{ will-change:transform; }
.blueprint-bg{ will-change:transform; }

/* ===== PRICING CALCULATOR ===== */
.calc-wrap{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:start; }
.calc-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.calc-group{ margin-bottom:28px; }
.calc-group:last-child{ margin-bottom:0; }
.calc-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--navy-soft); margin-bottom:14px; display:block; }
.calc-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.calc-chip{ font-family:var(--sans); font-size:0.88rem; font-weight:500; padding:10px 16px; border:1.5px solid var(--line); border-radius:20px; cursor:pointer; color:var(--navy-soft); background:var(--white); transition: all 0.25s var(--ease); user-select:none; }
.calc-chip:hover{ border-color:var(--gold-soft); }
.calc-chip.selected{ background:var(--navy-fixed); border-color:var(--navy-fixed); color:var(--cream-fixed); }
.calc-slider-row{ display:flex; align-items:center; gap:16px; }
.calc-slider-row input[type=range]{ flex:1; accent-color: var(--gold); }
.calc-slider-val{ font-family:var(--mono); font-size:0.95rem; color:var(--navy); font-weight:600; min-width:30px; text-align:right; }
.calc-toggle{ display:flex; border:1.5px solid var(--line); border-radius:20px; overflow:hidden; width:max-content; }
.calc-toggle button{ font-family:var(--sans); font-size:0.85rem; font-weight:600; padding:8px 18px; border:none; background:var(--white); color:var(--navy-soft); cursor:pointer; transition: all 0.25s var(--ease); }
.calc-toggle button.active{ background:var(--navy-fixed); color:var(--cream-fixed); }
.calc-result{ background:var(--navy-fixed); color:var(--cream-fixed); border-radius:var(--radius); padding:40px 34px; position:sticky; top:120px; }
.calc-result h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; }
.calc-estimate{ font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.7rem); font-weight:600; color:var(--cream-fixed); line-height:1.1; }
.calc-estimate span{ font-size:0.5em; color:rgba(250,246,237,0.6); font-family:var(--sans); font-weight:400; display:block; margin-top:8px; }
.calc-breakdown{ margin-top:26px; border-top:1px solid rgba(250,246,237,0.18); padding-top:20px; }
.calc-breakdown li{ display:flex; justify-content:space-between; font-size:0.86rem; padding:7px 0; color:rgba(250,246,237,0.8); }
.calc-note{ font-size:0.78rem; color:rgba(250,246,237,0.5); margin-top:22px; font-style:italic; }
@media (max-width:900px){ .calc-wrap{ grid-template-columns:1fr; } .calc-result{ position:static; } }

/* ===== FAQ ===== */
.faq-list{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; background:none; border:none; text-align:left; padding:22px 4px; cursor:pointer; font-family:var(--serif); font-size:1.08rem; color:var(--navy); font-weight:600; }
.faq-q .faq-icon{ font-family:var(--mono); font-size:1.2rem; color:var(--gold); flex-shrink:0; transition: transform 0.35s var(--ease); }
.faq-item.open .faq-q .faq-icon{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height 0.4s var(--ease); }
.faq-a p{ padding:0 4px 24px; font-size:0.95rem; max-width:680px; }
.faq-item.open .faq-a{ max-height:400px; }

/* ===== WHATSAPP FLOAT ===== */
.wa-float{ position:fixed; bottom:28px; left:28px; z-index:120; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(37,211,102,0.55); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }

/* ---- Brand-matched photo treatment: makes ANY stock photo match the
   navy/gold/cream palette automatically, so no manual color-grading needed.
   Usage: <img class="brand-photo" src="images/your-photo.jpg" alt="..."> ---- */
.brand-photo{ display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--radius); filter:grayscale(0.55) sepia(0.18) saturate(1.3) hue-rotate(178deg) brightness(0.92) contrast(1.05); }
.brand-photo-wrap{ position:relative; overflow:hidden; border-radius:var(--radius); }
.brand-photo-wrap::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(27,42,74,0.55), rgba(201,151,62,0.18) 60%, transparent); mix-blend-mode:multiply; pointer-events:none; }
html[data-theme="dark"] .brand-photo{ filter:grayscale(0.5) sepia(0.15) saturate(1.2) hue-rotate(178deg) brightness(0.7) contrast(1.1); }

/* ---- FAQ Bot (free, rule-based, no third-party service) ---- */
.faq-bot-toggle{ position:fixed; right:28px; bottom:28px; z-index:120; width:58px; height:58px; border-radius:50%; background:var(--navy-fixed); color:var(--cream-fixed); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 28px -8px rgba(27,42,74,0.55); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.faq-bot-toggle:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -8px rgba(27,42,74,0.6); }
.faq-bot-toggle svg{ width:26px; height:26px; }
.faq-bot-panel{ position:fixed; right:28px; bottom:98px; z-index:121; width:340px; max-width:calc(100vw - 40px); max-height:min(480px, 70vh); background:var(--cream); border:1px solid var(--line); border-radius:12px; box-shadow:0 30px 60px -20px rgba(27,42,74,0.35); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(16px) scale(0.98); transition: all 0.3s var(--ease); overflow:hidden; }
.faq-bot-panel.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.faq-bot-head{ background:var(--navy-fixed); color:var(--cream-fixed); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.faq-bot-head strong{ font-family:var(--serif); font-size:1.02rem; }
.faq-bot-head span{ font-family:var(--mono); font-size:10.5px; opacity:0.7; display:block; margin-top:2px; }
.faq-bot-close{ background:none; border:none; color:var(--cream-fixed); font-size:1.3rem; cursor:pointer; line-height:1; opacity:0.8; }
.faq-bot-close:hover{ opacity:1; }
.faq-bot-body{ padding:14px; overflow-y:auto; flex-grow:1; display:flex; flex-direction:column; gap:10px; }
.faq-bot-msg{ max-width:85%; padding:10px 13px; border-radius:10px; font-size:0.88rem; line-height:1.5; }
.faq-bot-msg.bot{ background:var(--navy-faint); color:var(--navy); align-self:flex-start; border-bottom-left-radius:2px; }
.faq-bot-msg.user{ background:var(--gold); color:var(--white); align-self:flex-end; border-bottom-right-radius:2px; }
.faq-bot-msg.typing{ display:flex; align-items:center; gap:4px; padding:13px 15px; }
.faq-bot-msg.typing span{ width:6px; height:6px; border-radius:50%; background:var(--navy-soft); opacity:0.6; animation:faqTypingBounce 1.1s ease-in-out infinite; }
.faq-bot-msg.typing span:nth-child(2){ animation-delay:0.15s; }
.faq-bot-msg.typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes faqTypingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:0.5; } 30%{ transform:translateY(-4px); opacity:1; } }
.faq-bot-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; flex-shrink:0; }
.faq-bot-chip{ background:transparent; border:1px solid var(--line); color:var(--navy); font-size:0.76rem; padding:6px 11px; border-radius:20px; cursor:pointer; transition: all 0.25s ease; }
.faq-bot-chip:hover{ border-color:var(--gold); background:var(--navy-faint); }
.faq-bot-input-row{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); flex-shrink:0; }
.faq-bot-input-row input{ flex-grow:1; border:1px solid var(--line); border-radius:20px; padding:9px 14px; font-family:var(--sans); font-size:0.85rem; background:var(--white); color:var(--navy); }
.faq-bot-input-row input:focus{ outline:none; border-color:var(--gold); }
.faq-bot-send{ background:var(--gold); color:var(--white); border:none; width:36px; height:36px; border-radius:50%; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition: background 0.25s ease; }
.faq-bot-send:hover{ background:#b8842e; }
@media (max-width:480px){ .faq-bot-panel{ right:16px; left:16px; width:auto; bottom:92px; } .faq-bot-toggle{ right:16px; bottom:16px; } }
.faq-bot-cta-row{ margin-top:10px; }
.faq-bot-cta-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--gold); color:var(--white); font-family:var(--sans); font-size:0.8rem; font-weight:600; padding:8px 14px; border-radius:20px; text-decoration:none; transition:background 0.25s ease; }
.faq-bot-cta-btn:hover{ background:#b8842e; }
.faq-bot-lead-form{ display:flex; flex-direction:column; gap:8px; margin-top:2px; }
.faq-bot-lead-form input{ border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-family:var(--sans); font-size:0.85rem; background:var(--white); color:var(--navy); }
.faq-bot-lead-form input:focus{ outline:none; border-color:var(--gold); }
.faq-bot-lead-form button{ background:var(--navy-fixed); color:var(--cream-fixed); border:none; border-radius:20px; padding:9px 14px; font-family:var(--sans); font-size:0.82rem; font-weight:600; cursor:pointer; transition:background 0.25s ease; }
.faq-bot-lead-form button:hover{ background:#26385f; }
.faq-bot-lead-form button:disabled{ opacity:0.6; cursor:default; }
.faq-bot-lead-msg{ font-size:0.8rem; color:var(--navy-soft); margin-top:6px; }
.wa-float:hover{ transform: translateY(-4px) scale(1.05); box-shadow:0 16px 34px -8px rgba(37,211,102,0.65); }
.wa-float svg{ width:28px; height:28px; }
.wa-float::before{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid #25D366; opacity:0.6; animation: wa-pulse 2.4s ease-out infinite; }
@keyframes wa-pulse{ 0%{ transform:scale(0.9); opacity:0.6; } 100%{ transform:scale(1.5); opacity:0; } }
.wa-tooltip{ position:absolute; left:70px; top:50%; transform:translateY(-50%); background:var(--navy-fixed); color:var(--cream-fixed); font-family:var(--sans); font-size:0.82rem; font-weight:500; padding:8px 14px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.wa-float:hover .wa-tooltip{ opacity:1; transform:translateY(-50%) translateX(4px); }
@media (max-width:600px){ .wa-float{ bottom:18px; left:18px; width:52px; height:52px; } .wa-float svg{ width:25px; height:25px; } .wa-tooltip{ display:none; } }
@media (prefers-reduced-motion: reduce){ .wa-float::before{ animation:none; } }

/* ===== COST SAVINGS CALCULATOR ===== */
.savings-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.savings-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.savings-field{ margin-bottom:24px; }
.savings-field:last-child{ margin-bottom:0; }
.savings-field label{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--navy-soft); margin-bottom:12px; }
.savings-field label .savings-val{ color:var(--navy); font-weight:600; }
.savings-field input[type=range]{ width:100%; accent-color:var(--gold); }
.savings-result{ background:var(--navy-fixed); color:var(--cream-fixed); border-radius:var(--radius); padding:40px 34px; }
.savings-result h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px; }
.savings-big{ font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.7rem); font-weight:600; color:var(--cream-fixed); line-height:1.15; }
.savings-big span{ font-size:0.45em; color:rgba(250,246,237,0.6); font-family:var(--sans); font-weight:400; display:block; margin-top:6px; }
.savings-sub{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(250,246,237,0.18); font-size:0.86rem; color:rgba(250,246,237,0.75); }
.savings-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.savings-metric{ text-align:center; }
.savings-metric .val{ font-family:var(--serif); font-size:clamp(1.35rem,2.4vw,1.7rem); font-weight:600; color:var(--cream-fixed); line-height:1.15; }
.savings-metric .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(250,246,237,0.6); margin-top:6px; }
.savings-cta{ margin-top:24px; }
.savings-cta .btn{ width:100%; text-align:center; justify-content:center; }
@media (max-width:480px){ .savings-metrics{ gap:8px; } .savings-metric .val{ font-size:1.2rem; } }

/* ===== CASE STUDIES ===== */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.case-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.case-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(27,42,74,0.25); }
.case-card .case-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); }
.case-card h4{ font-family:var(--serif); font-size:1.15rem; margin:12px 0 14px; }
.case-stats{ display:flex; gap:18px; margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); }
.case-stats div{ flex:1; }
.case-stats .cs-num{ font-family:var(--serif); font-size:1.4rem; font-weight:600; color:var(--navy); display:block; }
.case-stats .cs-label{ font-family:var(--mono); font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--navy-soft); }
@media (max-width:940px){ .case-grid{ grid-template-columns:1fr; } }

/* ===== NEWSLETTER ===== */
.newsletter-band{ background:var(--navy-fixed); border-radius:var(--radius); padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.newsletter-band h3{ color:var(--cream-fixed); font-size:1.3rem; }
.newsletter-band p{ color:rgba(250,246,237,0.7); font-size:0.9rem; margin-top:6px; max-width:420px; }
.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input[type=email]{ padding:13px 16px; border:1px solid rgba(250,246,237,0.3); border-radius:2px; background:rgba(250,246,237,0.06); color:var(--cream-fixed); font-family:var(--sans); font-size:0.92rem; min-width:240px; }
.newsletter-form input[type=email]::placeholder{ color:rgba(250,246,237,0.45); }
.newsletter-form input[type=email]:focus{ outline:none; border-color:var(--gold); }
.newsletter-msg{ font-size:0.82rem; color:var(--gold-soft); margin-top:10px; display:none; }
.newsletter-msg.show{ display:block; }

/* ===== TRUST TIMESTAMP + DOWNLOADS ===== */
.trust-strip{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; color:var(--navy-soft); margin-top:18px; }
.trust-strip .dot-live{ width:7px; height:7px; border-radius:50%; background:#3FA85E; display:inline-block; animation:dot-pulse 1.8s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Live bid opportunities ticker (subcontractor page) ---- */
.opp-ticker-section{ padding-top:0; padding-bottom:52px; }
.opp-ticker-card{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:26px 30px; box-shadow:0 20px 44px -30px rgba(27,42,74,0.35); }
.opp-ticker-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.opp-ticker-label{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--navy-soft); }
.opp-ticker-label .dot-live{ width:7px; height:7px; border-radius:50%; background:#3FA85E; display:inline-block; animation:dot-pulse 1.8s ease-in-out infinite; }
.opp-ticker-filter select{ font-family:var(--sans); font-size:0.85rem; color:var(--navy); background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:8px 14px; cursor:pointer; }
.opp-ticker-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.opp-ticker-list li{ display:flex; align-items:center; gap:12px; padding:12px 6px; border-bottom:1px solid var(--line); font-size:0.9rem; color:var(--navy); animation: opp-slide-in 0.5s var(--ease); }
.opp-ticker-list li:last-child{ border-bottom:none; }
.opp-ticker-list .opp-dot{ width:6px; height:6px; border-radius:50%; background:#3FA85E; flex-shrink:0; }
.opp-ticker-list .opp-trade{ font-weight:600; color:var(--navy); flex-shrink:0; }
.opp-ticker-list .opp-loc{ color:var(--navy-soft); flex-shrink:0; }
.opp-ticker-list .opp-desc{ color:var(--navy-soft); flex-grow:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opp-ticker-list .opp-time{ font-family:var(--mono); font-size:10.5px; color:var(--navy-soft); opacity:0.7; flex-shrink:0; margin-left:auto; }
.opp-ticker-note{ font-size:0.78rem; color:var(--navy-soft); opacity:0.75; margin-top:16px; }
@keyframes opp-slide-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width:640px){
  .opp-ticker-list li{ flex-wrap:wrap; }
  .opp-ticker-list .opp-desc{ white-space:normal; flex-basis:100%; order:3; }
  .opp-ticker-list .opp-time{ margin-left:0; }
}
.download-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.dl-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:0.88rem; font-weight:600; color:var(--navy); border:1.5px solid var(--line); border-radius:2px; padding:10px 18px; transition: all 0.3s var(--ease); }
.dl-link:hover{ border-color:var(--gold); background:var(--white); transform:translateY(-2px); }
.dl-link .dl-icon{ color:var(--gold); font-family:var(--mono); }

/* ===== GRAIN TEXTURE (ultra-premium tactile overlay) ===== */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== PRELOADER ===== */
#preloader{ position:fixed; inset:0; z-index:9998; background:var(--navy-fixed); display:flex; align-items:center; justify-content:center; transition:opacity 0.6s var(--ease), visibility 0.6s var(--ease); }
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{ font-family:var(--serif); font-size:2.4rem; color:var(--cream-fixed); letter-spacing:0.02em; display:flex; align-items:center; gap:4px; }
.preloader-mark .pl-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); display:inline-block; animation:pl-blink 1.1s ease-in-out infinite; }
.preloader-bar{ position:absolute; bottom:0; left:0; height:2px; background:var(--gold); width:0%; animation:pl-fill 1.3s ease-out forwards; }
@keyframes pl-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
@keyframes pl-fill{ 0%{ width:0%; } 100%{ width:100%; } }
@media (prefers-reduced-motion: reduce){ #preloader{ display:none; } }

/* ===== SOCIAL PROOF TOAST ===== */
.proof-toast{
  position:fixed; left:28px; bottom:28px; z-index:110; max-width:320px;
  background: rgba(255,255,255,0.68); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.55); border-radius:16px; padding:14px 16px;
  box-shadow: 0 24px 48px -18px rgba(27,42,74,0.32), 0 0 0 1px rgba(201,151,62,0.08);
  display:flex; gap:12px; align-items:flex-start;
  transform:translateY(16px) scale(0.98); opacity:0; pointer-events:none;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
html[data-theme="dark"] .proof-toast{ background: rgba(20,28,46,0.72); border-color: rgba(255,255,255,0.1); }
.proof-toast.show{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.proof-toast .pt-avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; margin-top:1px;
  background: linear-gradient(145deg, rgba(63,168,94,0.18), rgba(63,168,94,0.05));
  border:1px solid rgba(63,168,94,0.35);
  display:flex; align-items:center; justify-content:center;
}
.proof-toast .pt-dot{ width:8px; height:8px; border-radius:50%; background:#3FA85E; position:relative; }
.proof-toast .pt-dot::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:1.5px solid #3FA85E; opacity:0.65;
  animation: pulseRing 2s ease-out infinite;
}
.proof-toast .pt-body{ min-width:0; flex:1; }
.proof-toast .pt-label{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:0.08em; color:var(--gold); text-transform:uppercase; margin-bottom:4px; font-weight:600; }
.proof-toast .pt-text{ font-family:var(--sans); font-size:0.82rem; color:var(--navy); line-height:1.4; }
.proof-toast .pt-time{ font-family:var(--mono); font-size:10px; color:var(--navy-soft); margin-top:3px; display:block; }
.proof-toast .pt-close{
  margin-left:auto; cursor:pointer; color:var(--navy-soft); font-size:1rem; line-height:1; flex-shrink:0;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.proof-toast .pt-close:hover{ background: var(--navy-faint); color:var(--navy); }
@media (max-width:600px){ .proof-toast{ left:14px; right:14px; bottom:90px; max-width:none; } }

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:130; background:var(--navy-fixed); color:var(--cream-fixed); padding:20px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; transform:translateY(110%); transition: transform 0.5s var(--ease); }
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner p{ font-size:0.85rem; color:rgba(250,246,237,0.8); max-width:640px; margin:0; }
.cookie-banner p a{ color:var(--gold-soft); text-decoration:underline; cursor:pointer; }
.cookie-actions{ display:flex; gap:12px; flex-shrink:0; }
.cookie-actions button{ font-family:var(--sans); font-size:0.85rem; font-weight:600; padding:10px 20px; border-radius:2px; cursor:pointer; border:1.5px solid transparent; }
.cookie-accept{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.cookie-decline{ background:transparent; color:var(--cream-fixed); border-color:rgba(250,246,237,0.35); }
@media (max-width:700px){ .cookie-banner{ padding:18px 20px; } }

/* ===== LEGAL MODAL (Privacy / Terms) ===== */
.legal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(27,42,74,0.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:24px; }
.legal-overlay.show{ display:flex; }
.legal-modal{ background:var(--white); border-radius:var(--radius); max-width:640px; width:100%; max-height:80vh; overflow-y:auto; padding:40px 40px 34px; position:relative; }
.legal-modal h3{ font-family:var(--serif); font-size:1.4rem; color:var(--navy); margin-bottom:16px; }
.legal-modal h4{ font-family:var(--sans); font-size:0.95rem; color:var(--navy); margin:20px 0 8px; }
.legal-modal p, .legal-modal li{ font-size:0.88rem; color:var(--navy-soft); line-height:1.65; }
.legal-modal ul{ padding-left:18px; margin-bottom:10px; }
.legal-close{ position:absolute; top:18px; right:20px; font-size:1.4rem; color:var(--navy-soft); cursor:pointer; background:none; border:none; line-height:1; }

/* ===== TESTIMONIAL STAR RATINGS ===== */
.t-stars{ color:var(--gold); letter-spacing:2px; font-size:0.95rem; margin-bottom:10px; }

/* ===== SIDE DECORATIVE GRAPHICS (custom line-art, wide screens only) ===== */
.side-deco{ position:absolute; top:50%; transform:translateY(-50%); width:130px; height:340px; opacity:0.5; pointer-events:none; z-index:0; }
.side-deco.left{ left:18px; }
.side-deco.right{ right:18px; }
.side-deco svg{ width:100%; height:100%; }
@media (max-width:1400px){ .side-deco{ display:none; } }
section{ overflow:visible; }

/* Subtle gold-edge glow on interactive surface cards, layered onto their existing hover shadow */
.service-card:hover{ box-shadow: 0 24px 48px -24px rgba(27,42,74,0.28), 0 0 0 1px rgba(201,151,62,0.28); }
.bundle-card:hover{ box-shadow: 0 24px 48px -24px rgba(27,42,74,0.25), 0 0 0 1px rgba(201,151,62,0.28); }
.figure-card{ transition: box-shadow 0.4s var(--ease); }
.figure-card:hover{ box-shadow: 0 0 0 1px rgba(201,151,62,0.3), 0 20px 44px -22px rgba(27,42,74,0.25); }

/* ===== AMBIENT GLOW ORBS (futuristic depth, kept low-opacity + slow) ===== */
.glow-orb{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:-1; opacity:0.55; }
.glow-orb.gold{ background:radial-gradient(circle, rgba(201,151,62,0.35), transparent 70%); }
.glow-orb.navy{ background:radial-gradient(circle, rgba(51,69,107,0.4), transparent 70%); }
@keyframes driftA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(30px,-24px) scale(1.08); } }
@keyframes driftB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-26px,20px) scale(0.94); } }
.glow-orb.a{ animation: driftA 14s ease-in-out infinite; }
.glow-orb.b{ animation: driftB 18s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .glow-orb{ animation:none !important; } }
@media (max-width:760px){ .glow-orb{ display:none; } }

/* ===== ANIMATED CIRCUIT/BLUEPRINT BAND (dark section background) ===== */
.circuit-band{ position:relative; background:var(--navy-fixed); color:var(--cream-fixed); overflow:hidden; }
.circuit-band::before{
  content:""; position:absolute; inset:0; opacity:0.16; z-index:1;
  background-image:
    linear-gradient(rgba(250,246,237,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,246,237,0.5) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridPulse 6s ease-in-out infinite;
}
@keyframes gridPulse{ 0%,100%{ opacity:0.1; } 50%{ opacity:0.22; } }
.circuit-band::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,151,62,0.18), transparent 70%);
}
/* When circuit-band is used on a video hero (page-header), keep these accents
   below the video-overlay/text layers so they never obscure the video itself */
.page-header.circuit-band::before,
.page-header.circuit-band::after{ z-index:1; }
.circuit-band .wrap{ position:relative; z-index:1; }
.circuit-band h2, .circuit-band h3{ color:var(--cream-fixed); }
.circuit-band p{ color:rgba(250,246,237,0.72); }
.circuit-band .eyebrow{ color:var(--gold-soft); }
.circuit-band .eyebrow::before{ background:var(--gold-soft); }
@media (prefers-reduced-motion: reduce){ .circuit-band::before{ animation:none; } }

.node-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block; box-shadow:0 0 0 0 rgba(201,151,62,0.6); animation: nodePulse 2.4s ease-out infinite; }
@keyframes nodePulse{ 0%{ box-shadow:0 0 0 0 rgba(201,151,62,0.55); } 70%{ box-shadow:0 0 0 12px rgba(201,151,62,0); } 100%{ box-shadow:0 0 0 0 rgba(201,151,62,0); } }

/* ================================================================
   MULTI-PAGE ADDITIONS — nav dropdown, futuristic backgrounds, misc
   ================================================================ */

/* ---- Nav dropdown (Services -> For GC / For Subcontractors) ---- */
.nav-links li.has-dropdown{ position:relative; }
.nav-drop-trigger{ display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:0.92rem; font-weight:500; color:var(--navy-soft); padding:4px 0; }
.nav-drop-trigger .chev{ width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition: transform 0.3s var(--ease); margin-top:-3px; }
.nav-links li.has-dropdown.open .nav-drop-trigger .chev,
.nav-links li.has-dropdown:hover .nav-drop-trigger .chev{ transform:rotate(225deg) translateY(2px); }
.nav-links li.has-dropdown.open .nav-drop-trigger,
.nav-links li.has-dropdown:hover .nav-drop-trigger{ color:var(--navy); }
.dropdown-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translate(-50%,8px);
  min-width:250px; background:rgba(250,246,237,0.97); backdrop-filter:blur(14px);
  border:1px solid rgba(27,42,74,0.14); border-radius:8px; padding:8px;
  box-shadow: 0 24px 48px -18px rgba(27,42,74,0.32), 0 0 0 1px rgba(201,151,62,0.08);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index:120;
}
.dropdown-menu::before{ content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:rgba(250,246,237,0.97); border-left:1px solid rgba(27,42,74,0.14); border-top:1px solid rgba(27,42,74,0.14); }
.nav-links li.has-dropdown:hover .dropdown-menu,
.nav-links li.has-dropdown.open .dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
/* Dropdown surface stays a fixed light-cream card in BOTH themes, so its text
   must use the FIXED navy token, not the theme-flipped --navy variable (which
   turns light in dark mode and was making this text unreadable). */
.dropdown-menu a{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:5px; font-size:0.9rem; font-weight:500; color:var(--navy-fixed); transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease; }
.dropdown-menu a:hover{ background:rgba(27,42,74,0.08); padding-left:20px; color:var(--navy-fixed); }
.dropdown-menu a:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; background:rgba(27,42,74,0.08); }
.nav-drop-trigger:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
.dropdown-menu a .dd-icon{ width:34px; height:34px; border-radius:6px; background:var(--navy-fixed); color:var(--cream-fixed); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; flex-shrink:0; }
.dropdown-menu a .dd-copy{ display:flex; flex-direction:column; gap:2px; }
.dropdown-menu a .dd-sub{ font-size:0.74rem; color:rgba(27,42,74,0.65); font-weight:400; }
.dropdown-menu a::after{ display:none !important; }

@media (max-width: 920px){
  .nav-links li.has-dropdown{ width:100%; }
  .nav-drop-trigger{ width:100%; justify-content:space-between; padding:6px 0; }
  .dropdown-menu{
    position:static !important; left:auto !important; transform:none !important; opacity:1; visibility:visible; pointer-events:none;
    max-height:0; overflow:hidden; padding:0; border:none; box-shadow:none; background:transparent;
    backdrop-filter:none; margin-top:0; transition: max-height 0.35s var(--ease), padding 0.35s var(--ease);
  }
  .dropdown-menu::before{ display:none; }
  .nav-links li.has-dropdown.open .dropdown-menu{ max-height:220px; pointer-events:auto; padding:6px 0 6px 14px; margin-top:6px; }
  .dropdown-menu a{ padding:10px 8px; }
}

/* ---- Active nav-link matched to current page ---- */
.nav-links a[data-page].current{ color:var(--navy); font-weight:600; }
.nav-links a[data-page].current::after{ width:100%; }

/* ---- Futuristic gradient mesh backdrop (behind hero / page headers) ---- */
.hero-video-bg{ position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; filter:saturate(1.15) contrast(1.06) brightness(1.04); overflow:hidden; background-color:var(--navy-fixed); }
.hero-video-bg canvas, .page-header-video-bg canvas{ display:block; width:100% !important; height:100% !important; }
.poster-fallback{ background-size:cover; background-position:center; }
.hero-video-overlay{ position:absolute; inset:0; z-index:-2; pointer-events:none; background:
    linear-gradient(180deg, var(--cream) 0%, transparent 34px, transparent calc(100% - 28px), var(--cream) 100%),
    linear-gradient(rgba(250,246,237,0.12), rgba(250,246,237,0.12));
}
html[data-theme="dark"] .hero-video-overlay{ background:
    linear-gradient(180deg, var(--cream) 0%, transparent 34px, transparent calc(100% - 28px), var(--cream) 100%),
    linear-gradient(rgba(7,15,34,0.22), rgba(7,15,34,0.22));
    /* --cream resolves to the dark surface color when data-theme=dark, matching the page background;
       the second layer is a light navy wash so real daylight footage blends with the dark theme
       while staying clearly visible instead of looking washed out */
}
.hero-text-panel{
  background: rgba(250,246,237,0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 24px;
  padding: 36px 38px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 24px 60px -20px rgba(14,23,40,0.35);
  max-width: 760px;
  width: fit-content;
}
html[data-theme="dark"] .hero-text-panel{
  background: rgba(11,18,32,0.72);
  border-color: rgba(255,255,255,0.14);
}
.hero-text-panel h1{ color:#0E1728; text-shadow: 0 2px 6px rgba(250,246,237,0.9), 0 1px 18px rgba(250,246,237,0.7); }
html[data-theme="dark"] .hero-text-panel h1{ color:var(--cream-fixed); text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 24px rgba(0,0,0,0.5); }
.hero-text-panel .lede{ text-shadow: 0 1px 8px rgba(250,246,237,0.85); }
html[data-theme="dark"] .hero-text-panel .lede{ text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
.hero-text-panel .eyebrow{ text-shadow: 0 1px 6px rgba(250,246,237,0.8); }
html[data-theme="dark"] .hero-text-panel .eyebrow{ text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
@media (max-width:860px){ .hero-text-panel{ padding:26px 22px; border-radius:18px; max-width:none; } }
@media (prefers-reduced-motion: reduce){ .hero-video-bg:not(.poster-fallback){ display:none; } }
@media (max-width:760px){ .hero-video-bg{ opacity:0.85; } }

/* ---- Fix: outline buttons sitting on the glass panel over video must always
   stay readable — they were inheriting the raw theme color, which flips to
   match the panel it sits on (dark navy in light mode, cream in dark mode)
   instead of always contrasting with it. Pin them the same way the heading
   text already is. ---- */
.hero-text-panel .btn-outline,
.page-header-text-panel .btn-outline{
  color:#0E1728;
  border:1.5px solid rgba(14,23,40,0.4);
  text-shadow:0 1px 6px rgba(250,246,237,0.6);
}
.hero-text-panel .btn-outline:hover,
.page-header-text-panel .btn-outline:hover{
  background:#0E1728;
  color:var(--cream-fixed);
  text-shadow:none;
  transform: translateY(-2px);
}
html[data-theme="dark"] .hero-text-panel .btn-outline,
html[data-theme="dark"] .page-header-text-panel .btn-outline,
.page-header.dark .page-header-text-panel .btn-outline{
  color:var(--cream-fixed);
  border-color:rgba(250,246,237,0.4);
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .hero-text-panel .btn-outline:hover,
html[data-theme="dark"] .page-header-text-panel .btn-outline:hover,
.page-header.dark .page-header-text-panel .btn-outline:hover{
  background:var(--cream-fixed);
  color:#0E1728;
  text-shadow:none;
  transform: translateY(-2px);
}
.mesh-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }

/* page-header (sub-page hero) video variant — light scrim; the text panel now handles readability */
.page-header-video-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:78% center; pointer-events:none; filter:saturate(1.15) contrast(1.06) brightness(1.04); overflow:hidden; background-color:var(--navy-fixed); }
.page-header-video-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:
    linear-gradient(180deg, var(--cream) 0%, transparent 40px, transparent calc(100% - 34px), var(--cream) 100%),
    linear-gradient(rgba(250,246,237,0.08), rgba(250,246,237,0.08));
}
.page-header.dark .page-header-video-overlay{ background:
    linear-gradient(180deg, var(--navy-fixed) 0%, transparent 40px, transparent calc(100% - 34px), var(--navy-fixed) 100%),
    linear-gradient(rgba(7,15,34,0.24), rgba(7,15,34,0.24));
}
/* left card / right blueprint-art layout for inner-page headers */
.page-header > .wrap{ position:relative; z-index:2; }
.page-header-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:44px;
  align-items:center;
}
.page-header-text-panel{
  background: rgba(250,246,237,0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 24px;
  padding: 36px 40px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 24px 60px -20px rgba(14,23,40,0.35);
  max-width: 620px;
  width: fit-content;
}
.page-header.dark .page-header-text-panel{
  background: rgba(11,18,32,0.72);
  border-color: rgba(255,255,255,0.14);
}
/* This panel's light glass background never changes with the site theme toggle,
   so its text must stay a fixed dark color in both light and dark mode.
   NOTE: scoped by html[data-theme] (what the JS toggle actually sets), not the
   unused ".dark" class on .page-header, which JS never applies — using ".dark"
   here previously made this rule win in BOTH themes (navy-on-navy in dark mode). */
html:not([data-theme="dark"]) .page-header-text-panel h1,
html:not([data-theme="dark"]) .page-header-text-panel h2{ color:#0E1728; text-shadow: 0 2px 6px rgba(250,246,237,0.9), 0 1px 18px rgba(250,246,237,0.7); }
html:not([data-theme="dark"]) .page-header-text-panel p{ color:rgba(14,23,40,0.75); text-shadow: 0 1px 8px rgba(250,246,237,0.85); }
html:not([data-theme="dark"]) .page-header-text-panel .crumb,
html:not([data-theme="dark"]) .page-header-text-panel .crumb a{ color:rgba(27,42,74,0.6); }
html:not([data-theme="dark"]) .page-header-text-panel .crumb a:hover{ color:var(--gold); }

/* ---- Fix: sub-page headers (about/contact/pricing/blog/etc.) never got a
   dark-theme glass + text treatment — only the homepage hero did. That's why
   text disappeared on those pages when the site theme was toggled to dark. ---- */
html[data-theme="dark"] .page-header-video-overlay{
  background:
    linear-gradient(180deg, var(--cream) 0%, transparent 40px, transparent calc(100% - 34px), var(--cream) 100%),
    linear-gradient(rgba(7,15,34,0.24), rgba(7,15,34,0.24));
}
html[data-theme="dark"] .page-header-text-panel{
  background: rgba(11,18,32,0.72);
  border-color: rgba(255,255,255,0.14);
}
html[data-theme="dark"] .page-header-text-panel h1,
html[data-theme="dark"] .page-header-text-panel h2{ color:var(--cream-fixed); text-shadow: 0 2px 10px rgba(0,0,0,0.65), 0 1px 24px rgba(0,0,0,0.5); }
html[data-theme="dark"] .page-header-text-panel p{ color:rgba(250,246,237,0.8); text-shadow: 0 1px 10px rgba(0,0,0,0.55); }
html[data-theme="dark"] .page-header-text-panel .crumb,
html[data-theme="dark"] .page-header-text-panel .crumb a{ color:rgba(250,246,237,0.6); }
html[data-theme="dark"] .page-header-text-panel .crumb a:hover{ color:var(--gold-soft); }

@media (max-width:760px){ .page-header-text-panel{ padding:24px 22px; border-radius:18px; max-width:none; } }

@media (max-width:960px){
  .page-header-grid{ grid-template-columns:1fr; gap:26px; }
}
@media (prefers-reduced-motion: reduce){ .page-header-video-bg:not(.poster-fallback){ display:none; } }
@media (max-width:760px){ .page-header-video-bg{ opacity:0.9; object-position:85% center; } }
.mesh-bg span{ position:absolute; border-radius:50%; filter:blur(70px); opacity:0.45; }
.mesh-bg .m1{ width:380px; height:380px; background:radial-gradient(circle, rgba(201,151,62,0.55), transparent 70%); top:-100px; right:6%; animation: driftA 16s ease-in-out infinite; }
.mesh-bg .m2{ width:320px; height:320px; background:radial-gradient(circle, rgba(51,69,107,0.6), transparent 70%); bottom:-80px; left:0%; animation: driftB 20s ease-in-out infinite; }
.mesh-bg .m3{ width:220px; height:220px; background:radial-gradient(circle, rgba(201,151,62,0.4), transparent 70%); top:40%; left:40%; animation: driftA 22s ease-in-out infinite reverse; }

/* ---- Extra polish: gentle pulsing glow on primary CTA buttons in hero/page-header glass panels ---- */
@keyframes gold-pulse-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,151,62,0.45); }
  50%{ box-shadow:0 0 0 9px rgba(201,151,62,0); }
}
.hero-actions .btn-gold, .page-header-text-panel .btn-gold{ animation: gold-pulse-glow 2.6s ease-in-out infinite; }
.hero-actions .btn-gold:hover, .page-header-text-panel .btn-gold:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .hero-actions .btn-gold, .page-header-text-panel .btn-gold{ animation:none !important; }
}
@media (prefers-reduced-motion: reduce){ .mesh-bg span{ animation:none !important; } }
@media (max-width:760px){ .mesh-bg .m3{ display:none; } }

/* ---- Isometric blueprint pattern panel (used behind service/overview cards) ---- */
.iso-panel{ position:relative; overflow:hidden; border-radius:var(--radius); }
.iso-panel .iso-bg{ position:absolute; inset:0; opacity:0.14; background-size:56px 98px; background-position:0 0; z-index:0; }
.iso-panel .iso-bg.navy-lines{
  background-image:
    linear-gradient(30deg, var(--navy) 12%, transparent 12.5%, transparent 87%, var(--navy) 87.5%, var(--navy)),
    linear-gradient(150deg, var(--navy) 12%, transparent 12.5%, transparent 87%, var(--navy) 87.5%, var(--navy)),
    linear-gradient(30deg, var(--navy) 12%, transparent 12.5%, transparent 87%, var(--navy) 87.5%, var(--navy)),
    linear-gradient(150deg, var(--navy) 12%, transparent 12.5%, transparent 87%, var(--navy) 87.5%, var(--navy));
}
.iso-panel > .iso-content{ position:relative; z-index:1; }

/* ---- Page header (inner pages hero-lite) ---- */
.page-header{ padding:172px 0 64px; min-height:640px; position:relative; overflow:hidden; width:100vw; margin-left:calc(50% - 50vw); }
.page-header .crumb{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; color:var(--navy-soft); text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.page-header .crumb a{ color:var(--navy-soft); transition:color 0.25s ease; }
.page-header .crumb a:hover{ color:var(--gold); }
.page-header h1{ margin:0 0 16px; }
.page-header .lede{ max-width:680px; }
.page-header.dark{ background:var(--navy-fixed); color:var(--cream-fixed); }
.page-header.dark h1, .page-header.dark h2{ color:var(--cream-fixed); }
.page-header.dark p{ color:rgba(250,246,237,0.75); }
.page-header.dark .crumb, .page-header.dark .crumb a{ color:rgba(250,246,237,0.55); }

/* ---- Audience split cards (Home) ---- */
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.split-card{ position:relative; overflow:hidden; border-radius:10px; padding:44px 38px; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.split-card:hover{ transform:translateY(-6px); }
.split-card.gc{ background:linear-gradient(155deg, var(--navy-fixed) 0%, #223458 55%, #33456B 100%); color:var(--cream-fixed); box-shadow: 0 30px 60px -28px rgba(27,42,74,0.55); }
.split-card.sub{ background: linear-gradient(155deg, #fff 0%, #F1EADA 60%, #f2e2bd 100%); color:#1B2A4A; box-shadow: 0 30px 60px -28px rgba(201,151,62,0.4); border:1px solid rgba(27,42,74,0.14); }
.split-card.sub h3, .split-card.sub p, .split-card.sub .sc-eyebrow{ color:#1B2A4A; }
.split-card .sc-bg{ position:absolute; inset:0; opacity:0.16; z-index:0; }
.split-card .sc-bg svg{ width:100%; height:100%; }
.split-card .sc-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; position:relative; z-index:1; display:flex; align-items:center; gap:8px; }
.split-card.gc .sc-eyebrow{ color:var(--gold-soft); }
.split-card.sub .sc-eyebrow{ color:#a3762c; }
.split-card h3{ position:relative; z-index:1; font-size:1.65rem; margin:12px 0 10px; }
.split-card.gc h3{ color:var(--cream-fixed); }
.split-card p{ position:relative; z-index:1; font-size:0.95rem; max-width:400px; }
.split-card.gc p{ color:rgba(250,246,237,0.78); }
.split-card .sc-list{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 26px; }
.split-card .sc-list span{ font-family:var(--mono); font-size:11px; padding:6px 12px; border-radius:20px; border:1px solid rgba(255,255,255,0.22); color:rgba(250,246,237,0.85); }
.split-card.sub .sc-list span{ border-color:rgba(27,42,74,0.18); color:#33456B; }
.split-card .btn{ position:relative; z-index:1; width:max-content; }
@media (max-width:860px){ .split-grid{ grid-template-columns:1fr; } }

/* ---- Glow-line divider used between chapters ---- */
.chapter-rule{ height:1px; background:linear-gradient(90deg, transparent, var(--gold-soft), transparent); margin:0; }

/* ---- Footer nav highlight for current section ---- */
footer a.current{ color:var(--gold-soft); }

/* ---- Contact page audience tabs ---- */
.audience-tabs{ display:flex; gap:10px; margin-bottom:44px; flex-wrap:wrap; }
.audience-tabs button{ font-family:var(--sans); font-weight:600; font-size:0.92rem; padding:12px 22px; border-radius:24px; border:1.5px solid var(--line); background:var(--white); color:var(--navy-soft); cursor:pointer; transition: all 0.3s var(--ease); }
.audience-tabs button.active{ background:var(--navy-fixed); border-color:var(--navy-fixed); color:var(--cream-fixed); }
.audience-panel{ display:none; }
.audience-panel.active{ display:block; }

/* ---- Card hover glow refinement (futuristic edge light) ---- */
.split-card.gc::after{ content:""; position:absolute; inset:0; border-radius:10px; padding:1px; background:linear-gradient(135deg, rgba(201,151,62,0.5), transparent 40%, transparent 70%, rgba(201,151,62,0.3)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }

/* ---- Responsive tightening for inner pages on small screens ---- */
@media (max-width:920px){
  .page-header{ padding:120px 0 48px; min-height:560px; }
}
@media (max-width:600px){
  .page-header{ padding:100px 0 40px; min-height:520px; }
}

/* ---- Service grid 3-column variant (subcontractor services) ---- */
.service-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .service-grid.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .service-grid.cols-3{ grid-template-columns:1fr; } }

/* ---- Price tag badge on service cards ---- */
.price-tag{ display:inline-block; margin-top:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; font-weight:600; padding:6px 12px; border-radius:20px; background:var(--navy-faint); color:var(--navy); }
.price-tag.free{ background:rgba(63,168,94,0.14); color:#2c7a45; }
html[data-theme="dark"] .price-tag.free{ background:rgba(63,168,94,0.22); color:#6fd694; }

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
  background:transparent; cursor:pointer; color:var(--navy); flex-shrink:0;
  transition: all 0.35s var(--ease); position:relative; overflow:hidden;
}
.theme-toggle:hover{ border-color:var(--gold); background:var(--navy-faint); transform:rotate(15deg); }
.theme-toggle svg{ width:18px; height:18px; position:absolute; transition: transform 0.45s var(--ease), opacity 0.35s var(--ease); }
.theme-toggle .icon-sun{ opacity:1; transform:scale(1) rotate(0deg); }
.theme-toggle .icon-moon{ opacity:0; transform:scale(0.4) rotate(-60deg); }
html[data-theme="dark"] .theme-toggle .icon-sun{ opacity:0; transform:scale(0.4) rotate(60deg); }
html[data-theme="dark"] .theme-toggle .icon-moon{ opacity:1; transform:scale(1) rotate(0deg); }

/* ===== BUTTON GLOW (futuristic accent) ===== */
.btn-gold{ position:relative; box-shadow: 0 0 0 rgba(201,151,62,0); }
.btn-gold:hover{ box-shadow: 0 10px 28px -6px rgba(201,151,62,0.65), 0 0 20px -4px rgba(201,151,62,0.5); }
html[data-theme="dark"] .btn-gold:hover{ box-shadow: 0 10px 28px -6px rgba(233,201,127,0.5), 0 0 26px 0 rgba(233,201,127,0.4); }
html[data-theme="dark"] .btn-outline{ border-color: transparent; }
html[data-theme="dark"] .btn-outline::before{ opacity:1; }
html[data-theme="dark"] .btn-outline:hover{ box-shadow: 0 0 24px -4px rgba(241,234,218,0.25); }

/* ===== CARD EDGE GLOW ON HOVER (dark mode) ===== */
html[data-theme="dark"] .service-card:hover,
html[data-theme="dark"] .bundle-card:hover,
html[data-theme="dark"] .testimonial-card:hover,
html[data-theme="dark"] .case-card:hover{
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.6), 0 0 0 1px rgba(233,201,127,0.35), 0 0 30px -10px rgba(233,201,127,0.25);
}

/* ===== PARTICLE NETWORK CANVAS (hero backdrop) ===== */
.particle-field{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.55; }
@media (max-width:760px){ .particle-field{ opacity:0.3; } }
@media (prefers-reduced-motion: reduce){ .particle-field{ display:none; } }

/* ===== SCROLL TO TOP ===== */
.scroll-top{
  position:fixed; right:28px; bottom:28px; z-index:110; width:48px; height:48px; border-radius:50%;
  background:var(--navy-fixed); color:var(--cream-fixed); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -10px rgba(27,42,74,0.45);
  opacity:0; transform:translateY(12px); pointer-events:none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.3s ease;
}
.scroll-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.scroll-top:hover{ background:var(--gold); }
.scroll-top svg{ width:18px; height:18px; }
@media (max-width:600px){ .scroll-top{ right:20px; bottom:96px; width:42px; height:42px; } }

/* ===== TILT-ON-HOVER (subtle 3D for cards) ===== */
.tilt{ transform-style: preserve-3d; will-change: transform; }

/* ================================================================
   MODERNIZATION UPDATE — bento grid, glassmorphism, new sections
   ================================================================ */

/* ---- Glassmorphism: service cards & stat cards ---- */
.service-card{
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.45);
  box-shadow: 0 8px 32px -18px rgba(27,42,74,0.18);
}
html[data-theme="dark"] .service-card{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
}
.service-card:hover{ box-shadow: 0 28px 54px -22px rgba(27,42,74,0.32), 0 0 0 1px rgba(201,151,62,0.25) inset; }

/* Bento-style grid: first card spans wider for an Apple-style asymmetric layout */
.service-grid{ grid-auto-rows:1fr; }
/* Bento span removed per feedback — equal-width cards read cleaner in one row */

.stat-bar{ gap:16px; }
.stat{
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.45);
  border-radius: var(--radius);
  padding:20px 22px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
html[data-theme="dark"] .stat{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
.stat:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(27,42,74,0.28); }

/* ---- Isometric-style icon treatment for service card icons ---- */
.iso-icon{
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; margin-bottom:16px;
  background: linear-gradient(145deg, rgba(201,151,62,0.18), rgba(27,42,74,0.08));
  border:1px solid rgba(201,151,62,0.3);
  transform: perspective(240px) rotateX(12deg) rotateY(-12deg);
  box-shadow: 6px 8px 0 -2px rgba(27,42,74,0.12), 0 12px 20px -10px rgba(27,42,74,0.25);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-card:hover .iso-icon{ transform: perspective(240px) rotateX(4deg) rotateY(-4deg) translateY(-2px); }
.iso-icon svg{ width:22px; height:22px; }

/* ---- Coverage badge ---- */
.coverage-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px 8px 10px;
  border-radius:30px; border:1px solid rgba(201,151,62,0.4);
  background: rgba(255,255,255,0.5); backdrop-filter: blur(12px);
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--navy-soft); margin-bottom:18px;
}
html[data-theme="dark"] .coverage-badge{ background: rgba(255,255,255,0.05); }
.coverage-badge .cb-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); position:relative; }
.coverage-badge .cb-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--gold); opacity:0.6;
  animation: pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(0.6); opacity:0.7; } 100%{ transform:scale(1.8); opacity:0; } }

/* ---- Trust strip (badges row) ---- */
.trust-strip{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;
}
.trust-chip{
  display:flex; align-items:center; gap:8px; padding:10px 18px;
  border-radius:30px; border:1px solid var(--line);
  background: rgba(255,255,255,0.4); backdrop-filter: blur(10px);
  font-size:0.85rem; font-weight:600; color:var(--navy);
}
html[data-theme="dark"] .trust-chip{ background: rgba(255,255,255,0.04); }
.trust-chip svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; }

/* ---- Testimonials (home) ---- */
#home-testimonials .testimonial-grid{ margin-top:44px; }

/* ---- FAQ generic (reuse of faq-item styles wherever added) ---- */
.faq-list{ max-width:820px; margin:44px auto 0; }

/* ---- Exit-intent popup ---- */
.exit-popup-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(15,20,30,0.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition: opacity 0.35s ease;
}
.exit-popup-overlay.show{ opacity:1; pointer-events:auto; }
.exit-popup{
  background: var(--cream); border-radius: 20px; max-width:460px; width:100%;
  padding:40px 36px; position:relative; text-align:center;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4);
  transform: translateY(16px) scale(0.97); transition: transform 0.35s var(--ease);
}
.exit-popup-overlay.show .exit-popup{ transform: translateY(0) scale(1); }
.exit-popup .ep-close{
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.4rem;
  color:var(--navy-soft); cursor:pointer; line-height:1;
}
.exit-popup .ep-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.exit-popup h3{ margin:0 0 12px; font-size:1.5rem; }
.exit-popup p{ color:var(--navy-soft); margin-bottom:24px; font-size:0.95rem; }
.exit-popup .btn{ width:100%; justify-content:center; }
.exit-popup .ep-divider{
  display:flex; align-items:center; gap:12px; margin:22px 0 16px;
  color:var(--navy-soft); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em;
}
.exit-popup .ep-divider::before, .exit-popup .ep-divider::after{
  content:''; flex:1; height:1px; background:rgba(27,42,74,0.14);
}
.exit-popup .ep-lead-magnet p{ font-size:0.88rem; margin-bottom:14px; text-align:left; }
.exit-popup .ep-lead-form{ display:flex; gap:8px; }
.exit-popup .ep-lead-form input[type="email"]{
  flex:1; min-width:0; padding:12px 14px; border-radius:8px;
  border:1px solid rgba(27,42,74,0.2); font-size:0.9rem; font-family:inherit;
}
.exit-popup .ep-lead-form input[type="email"]:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.exit-popup .ep-lead-form button{ flex-shrink:0; padding:12px 18px; font-size:0.85rem; }
.exit-popup .ep-hp{ position:absolute; left:-9999px; }
.exit-popup .ep-lead-msg{ font-size:0.82rem; margin-top:10px; text-align:left; display:none; }
.exit-popup .ep-lead-msg.show{ display:block; }
@media (max-width:480px){
  .exit-popup .ep-lead-form{ flex-direction:column; }
}

/* ===== BLOG LISTING ===== */
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.blog-card{
  display:flex; flex-direction:column; gap:10px; padding:28px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:inherit; transition: all 0.3s var(--ease);
}
a.blog-card:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 20px 40px -24px rgba(27,42,74,0.22); }
.blog-card-featured{ grid-column:1 / -1; background:var(--navy-fixed); border-color:var(--navy-fixed); color:var(--cream-fixed); padding:40px; }
.blog-card-featured .blog-card-tag{ color:var(--gold-soft); }
.blog-card-featured h3{ color:var(--cream-fixed); font-size:1.6rem; max-width:760px; }
.blog-card-featured p{ color:rgba(250,246,237,0.75); max-width:640px; }
.blog-card-featured .blog-card-read{ color:var(--gold-soft); }
.blog-card-soon{ opacity:0.6; cursor:default; }
.blog-card-tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); }
.blog-card h3{ font-size:1.15rem; margin:0; line-height:1.35; }
.blog-card p{ color:var(--navy-soft); font-size:0.92rem; margin:0; flex:1; }
.blog-card-read{ font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--navy); font-weight:600; margin-top:6px; }
html[data-theme="dark"] .blog-card{ background:var(--navy-faint); border-color:var(--line); }
@media (max-width:760px){ .blog-grid{ grid-template-columns:1fr; } }

/* ===== BLOG ARTICLE ===== */
.blog-article{ max-width:760px; margin:0 auto; }
.blog-article h2{ margin:44px 0 14px; font-size:1.5rem; }
.blog-article p{ color:var(--navy-soft); margin-bottom:18px; font-size:1.02rem; line-height:1.75; }
.blog-cta{
  margin-top:48px; padding:36px; background:var(--navy-fixed); color:var(--cream-fixed);
  border-radius:var(--radius); text-align:center;
}
.blog-cta h3{ color:var(--cream-fixed); margin:0 0 10px; }
.blog-cta p{ color:rgba(250,246,237,0.75); margin-bottom:22px; }

/* ============================================================
   Construction 3D Showcase — replaces the old blueprint art-frame.
   One shared engine; each page passes its own CSS custom properties
   (building heights/positions, crane on/off, worker count, label)
   so every page gets a distinct scene while sharing the same code.
   ============================================================ */
.construction-scene-section{
  position:relative;
  padding:70px 0 84px;
  background:var(--navy-fixed);
  overflow:hidden;
  isolation:isolate;
}
.construction-scene-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(201,151,62,0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(201,151,62,0.10), transparent 60%);
  pointer-events:none;
}
.cs-head{ text-align:center; max-width:640px; margin:0 auto 46px; position:relative; z-index:2; }
.cs-eyebrow{ font-family:'IBM Plex Mono',monospace; letter-spacing:2px; font-size:12px; font-weight:600; color:var(--gold-soft); text-transform:uppercase; }
.cs-head h2{ color:var(--cream-fixed); margin:10px 0 12px; }
.cs-head p{ color:rgba(250,246,237,0.68); margin:0; }

.cs-stage{
  position:relative;
  height:320px;
  max-width:920px;
  margin:0 auto;
  z-index:2;
}
@media (max-width:760px){
  .cs-stage{ height:240px; transform:scale(0.78); transform-origin:center bottom; }
  .construction-scene-section{ padding:52px 0 60px; }
}

/* ============================================================
   Blueprint Micro-Accents — small, lightweight (CSS-only, no
   construction/blueprint-themed animations for use
   anywhere across the site: section dividers, headings, cards.
   Safe to drop in any page without layout risk — each piece is
   self-contained, respects prefers-reduced-motion, and adds no
   height/width of its own beyond what's declared.
   ============================================================ */

/* Rotating drafting compass — small icon accent, e.g. next to a
   section eyebrow or heading. Usage: <span class="bp-compass"></span> */
.bp-compass{
  display:inline-block; width:22px; height:22px; vertical-align:middle;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23C9973A' stroke-width='1.4'/%3E%3Cpath d='M12 5v3M12 16v3M5 12h3M16 12h3' stroke='%23C9973A' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M12 12L16 8' stroke='%23FAF6ED' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
  animation: bp-compass-spin 8s linear infinite;
}
@keyframes bp-compass-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* Blueprint corner brackets — frame a card/section like a drafting
   sheet. Usage: add class "bp-frame" to any relatively-positioned
   container; four corner marks appear and gently pulse. */
.bp-frame{ position:relative; }
.bp-frame::before, .bp-frame::after{
  content:""; position:absolute; width:18px; height:18px;
  border-top:2px solid rgba(201,151,62,0.55); border-left:2px solid rgba(201,151,62,0.55);
  top:-8px; left:-8px;
  animation: bp-corner-pulse 3.4s ease-in-out infinite;
}
.bp-frame::after{
  top:auto; left:auto; bottom:-8px; right:-8px;
  border-top:none; border-left:none;
  border-bottom:2px solid rgba(201,151,62,0.55); border-right:2px solid rgba(201,151,62,0.55);
  animation-delay:1.2s;
}
@keyframes bp-corner-pulse{ 0%,100%{ opacity:0.4; } 50%{ opacity:0.95; } }

/* Glowing dashed measurement-line divider — a thin animated line that
   "draws" itself in, like a dimension line on a blueprint. Usage:
   <div class="bp-divider"></div> between sections or under a heading. */
.bp-divider{
  height:2px; max-width:120px; margin:14px auto;
  background:repeating-linear-gradient(90deg, rgba(201,151,62,0.9) 0 8px, transparent 8px 14px);
  background-size:200% 100%;
  animation: bp-divider-draw 2.6s ease-out forwards, bp-divider-glow 3s ease-in-out infinite 2.6s;
}
@keyframes bp-divider-draw{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes bp-divider-glow{ 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }

/* Small pulsing blueprint grid-dot — a single glowing node, useful as a
   bullet marker or timeline point. Usage: <span class="bp-node"></span> */
.bp-node{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--gold-soft, #E0B563);
  box-shadow:0 0 0 0 rgba(201,151,62,0.55);
  animation: bp-node-ping 2.4s ease-out infinite;
}
@keyframes bp-node-ping{
  0%{ box-shadow:0 0 0 0 rgba(201,151,62,0.55); }
  70%{ box-shadow:0 0 0 8px rgba(201,151,62,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,151,62,0); }
}

@media (prefers-reduced-motion: reduce){
  .bp-compass, .bp-frame::before, .bp-frame::after, .bp-divider, .bp-node{
    animation:none !important;
  }
}

/* ============================================================
   SITE-WIDE BLUEPRINT BACKGROUND
   Pure CSS — no WebGL, no canvas render loop, no external library.
   Two layers on <body>, both fixed + behind all content:
     ::before -> faint drafting grid that drifts slowly (the "moving" part)
     ::after  -> a few soft gold glow points that drift the opposite way
   Sits behind the hero videos automatically (z-index -5 / -6), so it only
   shows through on the plain page background, giving every page a
   consistent construction-blueprint feel without weighing pages down.
   ============================================================ */
body::before{
  content:"";
  position:fixed; inset:-40px;
  z-index:-6;
  pointer-events:none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2M5OTczZSIgc3Ryb2tlLXdpZHRoPSIxLjQiIHN0cm9rZS1vcGFjaXR5PSIwLjM0Ij4KPGxpbmUgeDE9IjEyMCIgeTE9IjkwIiB4Mj0iMzMwIiB5Mj0iMTkwIi8+CjxsaW5lIHgxPSIzMzAiIHkxPSIxOTAiIHgyPSIyMzAiIHkyPSI0ODAiLz4KPGxpbmUgeDE9IjIzMCIgeTE9IjQ4MCIgeDI9IjcwIiB5Mj0iNDEwIi8+CjxsaW5lIHgxPSIyMzAiIHkxPSI0ODAiIHgyPSI0NzAiIHkyPSI1NjAiLz4KPGxpbmUgeDE9IjQ3MCIgeTE9IjU2MCIgeDI9IjMzMCIgeTI9Ijc2MCIvPgo8bGluZSB4MT0iNjAwIiB5MT0iMTIwIiB4Mj0iNzYwIiB5Mj0iMjYwIi8+CjxsaW5lIHgxPSI3NjAiIHkxPSIyNjAiIHgyPSI5ODAiIHkyPSIxODAiLz4KPGxpbmUgeDE9Ijc2MCIgeTE9IjI2MCIgeDI9IjcwMCIgeTI9IjQ3MCIvPgo8bGluZSB4MT0iNzAwIiB5MT0iNDcwIiB4Mj0iOTAwIiB5Mj0iNjAwIi8+CjxsaW5lIHgxPSI5MDAiIHkxPSI2MDAiIHgyPSIxMDgwIiB5Mj0iNDgwIi8+CjxsaW5lIHgxPSIxMDgwIiB5MT0iNDgwIiB4Mj0iMTI1MCIgeTI9IjU2MCIvPgo8bGluZSB4MT0iMTI1MCIgeTE9IjU2MCIgeDI9IjE0MjAiIHkyPSI0NDAiLz4KPGxpbmUgeDE9IjEyNTAiIHkxPSI1NjAiIHgyPSIxMTgwIiB5Mj0iNzQwIi8+CjxsaW5lIHgxPSIxMDUwIiB5MT0iMTIwIiB4Mj0iMTIzMCIgeTI9IjgwIi8+CjxsaW5lIHgxPSIxMjMwIiB5MT0iODAiIHgyPSIxNDAwIiB5Mj0iMjAwIi8+CjxsaW5lIHgxPSIxNTAiIHkxPSI2NjAiIHgyPSIzMzAiIHkyPSI3NjAiLz4KPGxpbmUgeDE9IjEzNjAiIHkxPSI3MDAiIHgyPSIxNTAwIiB5Mj0iNTYwIi8+CjwvZz4KPGcgZmlsbD0iI2M5OTczZSIgZmlsbC1vcGFjaXR5PSIwLjYyIj4KPGNpcmNsZSBjeD0iMTIwIiBjeT0iOTAiIHI9IjMuMiIvPgo8Y2lyY2xlIGN4PSIzMzAiIGN5PSIxOTAiIHI9IjIuMiIvPgo8Y2lyY2xlIGN4PSIyMzAiIGN5PSI0ODAiIHI9IjQuMiIvPgo8Y2lyY2xlIGN4PSI3MCIgY3k9IjQxMCIgcj0iMi4yIi8+CjxjaXJjbGUgY3g9IjQ3MCIgY3k9IjU2MCIgcj0iMi42Ii8+CjxjaXJjbGUgY3g9IjMzMCIgY3k9Ijc2MCIgcj0iMi4yIi8+CjxjaXJjbGUgY3g9IjYwMCIgY3k9IjEyMCIgcj0iMi42Ii8+CjxjaXJjbGUgY3g9Ijc2MCIgY3k9IjI2MCIgcj0iMy42Ii8+CjxjaXJjbGUgY3g9Ijk4MCIgY3k9IjE4MCIgcj0iMi4yIi8+CjxjaXJjbGUgY3g9IjcwMCIgY3k9IjQ3MCIgcj0iMi42Ii8+CjxjaXJjbGUgY3g9IjkwMCIgY3k9IjYwMCIgcj0iMi4yIi8+CjxjaXJjbGUgY3g9IjEwODAiIGN5PSI0ODAiIHI9IjMuNCIvPgo8Y2lyY2xlIGN4PSIxMjUwIiBjeT0iNTYwIiByPSIyLjYiLz4KPGNpcmNsZSBjeD0iMTQyMCIgY3k9IjQ0MCIgcj0iMi4yIi8+CjxjaXJjbGUgY3g9IjExODAiIGN5PSI3NDAiIHI9IjIuMiIvPgo8Y2lyY2xlIGN4PSIxMDUwIiBjeT0iMTIwIiByPSIyLjIiLz4KPGNpcmNsZSBjeD0iMTIzMCIgY3k9IjgwIiByPSIzIi8+CjxjaXJjbGUgY3g9IjE0MDAiIGN5PSIyMDAiIHI9IjIuMiIvPgo8Y2lyY2xlIGN4PSIxNTAiIGN5PSI2NjAiIHI9IjMiLz4KPGNpcmNsZSBjeD0iMTM2MCIgY3k9IjcwMCIgcj0iMi4yIi8+CjxjaXJjbGUgY3g9IjE1MDAiIGN5PSI1NjAiIHI9IjIuNiIvPgo8L2c+Cjwvc3ZnPgo=");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  animation: bp-nodes-drift 30s ease-in-out infinite;
  opacity:0.55;
}
html[data-theme="dark"] body::before{ opacity:0.85; }
@keyframes bp-nodes-drift{
  0%, 100%{ transform:scale(1) translate(0,0); }
  50%{ transform:scale(1.03) translate(-8px, 6px); }
}

body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-5;
  pointer-events:none;
  background-image:
    radial-gradient(2.5px 2.5px at 18% 30%, rgba(201,151,62,0.5), transparent 60%),
    radial-gradient(2px 2px at 88% 12%, rgba(201,151,62,0.4), transparent 60%),
    radial-gradient(2.5px 2.5px at 65% 82%, rgba(201,151,62,0.45), transparent 60%);
  animation: bp-dots-drift 22s ease-in-out infinite;
}
@keyframes bp-dots-drift{
  0%, 100%{ opacity:0.5; transform:translate(0,0); }
  50%{ opacity:1; transform:translate(-10px, 12px); }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none !important; }
}

/* ============================================================
   PAGE-LEVEL BLUEPRINT SCENE
   Lightweight inline SVG + CSS animation: a crane silhouette on a
   drafting grid with a slow swinging arm, a scanning dimension-line,
   and pulsing gold nodes. Same visual identity, no WebGL.
   ============================================================ */
.blueprint-scene{
  position:absolute; inset:0; border-radius:16px; overflow:hidden;
  background:
    linear-gradient(rgba(201,151,62,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,151,62,0.14) 1px, transparent 1px),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(201,151,62,0.10), transparent 70%);
  background-size:36px 36px, 36px 36px, 100% 100%;
}
.blueprint-scene svg{ width:100%; height:100%; display:block; }
.blueprint-scene .bps-scanline{ animation:bps-scan 4.5s ease-in-out infinite; }
.blueprint-scene .bps-node{ animation:bps-pulse 2.6s ease-in-out infinite; }
.blueprint-scene .bps-node:nth-child(2){ animation-delay:0.5s; }
.blueprint-scene .bps-node:nth-child(3){ animation-delay:1s; }
.blueprint-scene .bps-node:nth-child(4){ animation-delay:1.5s; }
@keyframes bps-scan{ 0%{ opacity:0; transform:translateX(-30px);} 15%{ opacity:1;} 85%{ opacity:1;} 100%{ opacity:0; transform:translateX(30px);} }
@keyframes bps-pulse{ 0%,100%{ opacity:0.35; r:3;} 50%{ opacity:1; r:5;} }
@media (prefers-reduced-motion: reduce){
  .blueprint-scene .bps-scanline, .blueprint-scene .bps-node{ animation:none !important; }
}

/* ============================================================
   FREE TOOLS SHOWCASE (tools.html)
   ============================================================ */
.tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .tools-grid{ grid-template-columns:1fr; } }
.tool-card{
  display:flex; flex-direction:column; gap:14px;
  background:var(--cream-deep); border:1px solid var(--line);
  border-radius:14px; padding:32px 28px;
  text-decoration:none; color:inherit;
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.tool-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(27,42,74,0.12);
  border-color:var(--gold);
}
.tool-card-icon{
  width:48px; height:48px; border-radius:10px;
  background:var(--navy-fixed);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.tool-card-icon svg{ width:24px; height:24px; }
.tool-card-tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.tool-card h3{ font-size:1.15rem; margin:0; line-height:1.35; }
.tool-card p{ color:var(--navy-soft); font-size:0.92rem; margin:0; flex:1; line-height:1.55; }
.tool-card-cta{ font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--navy); font-weight:600; margin-top:4px; }
.tool-card:hover .tool-card-cta{ color:var(--gold); }
.tools-note{
  margin-top:36px; padding:18px 22px; border-radius:10px;
  background:rgba(201,151,62,0.08); border:1px solid rgba(201,151,62,0.25);
  font-size:0.88rem; color:var(--navy-soft); line-height:1.6;
}