/* Theme Name: ValueCoders LP Theme Theme URI: https://www.valuecoders.com/ Author: ValueCoders Text Domain: blankslate BlankSlate WordPress Theme 2011-2026 BlankSlate is distributed under the terms of the GNU GPL */ /* ═══════════════════════════════════════════════════════════ DESIGN TOKENS — VC-BRAND-001 v2.1 ═══════════════════════════════════════════════════════════ */ @font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/PlusJakartaSans-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --navy:#05164D; --navy-deep:#02091F; --navy-mid:#0D2E6B; --white:#FFFFFF; --canvas:#EFEDE8; --amber:#FFAD00; --amber-hover:#E69A00; --amber-dark:#CC8B00; --ink:#111827; --text-mid:#4B5563; --text-light:#9CA3AF; --border:rgba(5,22,77,0.09); --overlay:rgba(2,9,31,0.6); --status-go:#1B5E20; --status-go-bg:#E8F5E9; --stat-coral:#D85A30; --stat-coral-bg:#fdf8f6; --stat-blue:#185FA5; --stat-blue-bg:#f5f8fd; --stat-green:#639922; --stat-green-bg:#f6faf0; --stat-purple:#7F77DD;--stat-purple-bg:#f7f6fe; --t-hero:clamp(2.75rem,5vw,4.5rem); --t-h2:clamp(1.75rem,3vw,2.5rem); --t-h3:clamp(1.25rem,2vw,1.75rem); --t-subhead:clamp(1rem,1.5vw,1.25rem); --t-body-lg:clamp(1rem,1.2vw,1.125rem); --t-body:clamp(0.9375rem,1.1vw,1.0625rem); --t-sm:0.875rem; --t-xs:0.8125rem; --t-label:0.6875rem; --shadow:0 1px 3px rgba(5,22,77,.08),0 1px 2px rgba(5,22,77,.06); --shadow-lg:0 10px 24px rgba(5,22,77,.1),0 4px 8px rgba(5,22,77,.06); --shadow-xl:0 20px 48px rgba(5,22,77,.14),0 4px 12px rgba(5,22,77,.08); --radius-sm:4px; --radius:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px; --dur-fast:150ms; --dur-slow:300ms; --ease:cubic-bezier(.4,0,.2,1); --nav-w:1280px; /* Single container — nav + every section share same max-width and gutter */ --gutter:clamp(20px,3vw,32px); } /* ── Reset ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overscroll-behavior:none} body{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--t-body);font-weight:500;line-height:1.6;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none} input,select,textarea{font-family:inherit} /* ═══════════════════════════════════════════════════════════ LAYOUT — container matches nav exactly ═══════════════════════════════════════════════════════════ */ .container{max-width:var(--nav-w);margin-inline:auto;padding-inline:var(--gutter)} /* ── Surfaces ── */ .surface--navy{background:var(--navy);color:var(--white)} .surface--navy-deep{background:var(--navy-deep);color:var(--white)} .surface--white{background:var(--white);color:var(--ink)} .section--warm{ background-color:var(--canvas); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E"),radial-gradient(circle,rgba(5,22,77,.055) 1.2px,transparent 1.2px); background-size:300px 300px,26px 26px; } .section-pad{padding-block:80px} .section--deferred{content-visibility:auto;contain-intrinsic-size:auto 600px} /* ── Atmospheric backgrounds ── */ .atmo--hero-t3{position:relative;overflow:hidden} .atmo--hero-t3::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 15% 50%,rgba(13,46,107,.5) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 85% 30%,rgba(255,173,0,.06) 0%,transparent 60%),radial-gradient(ellipse 100% 80% at 50% 0%,rgba(2,9,31,.8) 0%,transparent 70%);pointer-events:none;z-index:0} .atmo--hero-t3::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 20%,transparent 70%);pointer-events:none;z-index:0;opacity:.4} .atmo--cta{position:relative;overflow:hidden} .atmo--cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 10% 50%,rgba(2,9,31,.9) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 90% 60%,rgba(255,173,0,.05) 0%,transparent 50%),radial-gradient(ellipse 80% 60% at 50% 0%,rgba(2,9,31,.7) 0%,transparent 60%);pointer-events:none;z-index:0} .atmo--cta::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.025) 1.2px,transparent 1.2px);background-size:28px 28px;pointer-events:none;z-index:0} .atmo--testimonial{position:relative;overflow:hidden} .atmo--testimonial::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 80% 50%,rgba(13,46,107,.7) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 15% 50%,rgba(255,173,0,.05) 0%,transparent 50%);pointer-events:none;z-index:0} /* ── Glassmorphism ── */ .glass--form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:40px 36px;position:relative} .glass--form::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.4} .glass{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} /* ── Keyframes ── */ @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes pulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}50%{box-shadow:0 0 0 5px rgba(74,222,128,0)}} @keyframes pulseAmber{0%,100%{box-shadow:0 0 0 0 rgba(255,173,0,.5)}50%{box-shadow:0 0 0 5px rgba(255,173,0,0)}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes dotPulse{0%,80%,100%{opacity:.3}40%{opacity:1}} /* ── Scroll reveal ── */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.is-visible{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s} .reveal-delay-5{transition-delay:.5s} /* ── Accessibility ── */ .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} :focus-visible{outline:2px solid var(--navy);outline-offset:2px} .surface--navy :focus-visible,.surface--navy-deep :focus-visible{outline-color:var(--amber)} ::selection{background:rgba(5,22,77,.15)} /* ═══════════════════════════════════════════════════════════ NAVIGATION ═══════════════════════════════════════════════════════════ */ .nav-wrap{position:fixed;top:0;left:0;right:0;z-index:500;background:var(--navy)} .nav{background:rgba(5,22,77,.82); padding: 10px 0; backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.06);transition:background var(--dur-fast),box-shadow var(--dur-fast)} .nav.scrolled{background:rgba(5,22,77,.95);box-shadow:0 4px 32px rgba(0,0,0,.25)} /* nav-inner shares the SAME max-width and padding as .container */ .nav-inner{max-width:var(--nav-w);margin:0 auto;padding:0 var(--gutter);height:48px;display:flex;align-items:center} .nav__logo{display:flex;align-items:center;margin-right:auto;font-size:1.125rem;font-weight:800; width: 200px; } .nav__logo-value{color:var(--white)}.nav__logo-coders{color:var(--amber)} .nav__trust{font-size:var(--t-label);color:rgba(255,255,255,.5);display:flex;align-items:center;gap:5px;margin-right:10px} .nav__trust-stars{color:var(--amber);font-size:.75rem} .nav__phone{font-size:var(--t-xs);color:rgba(255,255,255,.6);font-weight:500;margin-right:16px;transition:color var(--dur-fast)} .nav__phone:hover{color:var(--white)} .nav__cta{background:var(--amber);color:var(--navy);font-size:var(--t-xs);font-weight:700;padding:8px 18px;border-radius:var(--radius-full);transition:all var(--dur-fast)} .nav__cta:hover{background:var(--amber-hover);transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,173,0,.4)} .scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--amber);z-index:1001;width:0;transition:none} /* Burger */ .nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:var(--radius-sm);transition:background var(--dur-fast);margin-left:8px} .nav__burger:hover{background:rgba(255,255,255,.08)} .nav__burger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform var(--dur-slow) var(--ease),opacity var(--dur-fast)} .nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__burger.is-open span:nth-child(2){opacity:0} .nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Mobile drawer */ .mobile-nav{display:none;position:fixed;inset:48px 0 0;z-index:499;background:var(--navy-deep);flex-direction:column;overflow-y:auto;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease)} .mobile-nav.is-open{display:flex;transform:translateX(0)} .mobile-nav a{display:block;padding:14px var(--gutter);font-size:var(--t-body);font-weight:600;color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.04);transition:color var(--dur-fast),background var(--dur-fast)} .mobile-nav a:hover{color:var(--white);background:rgba(255,255,255,.04)} .mobile-nav .mobile-nav__cta-wrap{padding:20px var(--gutter) 32px} /* TOC */ .toc{position:sticky;top:48px;z-index:200;background:var(--white);border-bottom:1px solid var(--border);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease} .toc.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)} .toc-inner{max-width:var(--nav-w);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;overflow-x:auto;scrollbar-width:none} .toc-inner::-webkit-scrollbar{display:none} .toc-inner a{flex-shrink:0;padding:12px 18px;font-size:var(--t-xs);font-weight:600;color:var(--text-mid);border-bottom:2px solid transparent;transition:all var(--dur-fast);white-space:nowrap;text-decoration:none} .toc-inner a:hover{color:var(--navy)} .toc-inner a.is-active{color:var(--navy);font-weight:700;border-bottom-color:var(--amber)} .toc-inner a.toc-cta{color:var(--amber-dark);font-weight:700} /* ═══════════════════════════════════════════════════════════ BUTTONS (structural — kept in template, not ACF-editable) ═══════════════════════════════════════════════════════════ */ .btn-amber{display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-body);font-weight:700;padding:14px 28px;border-radius:var(--radius-full);background:var(--amber);color:var(--navy);border:none;cursor:pointer;transition:all var(--dur-fast);white-space:nowrap} .btn-amber:hover{background:var(--amber-hover);transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,173,0,.45)} .btn-navy{display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-body);font-weight:700;padding:14px 28px;border-radius:var(--radius-full);background:var(--navy);color:var(--white);border:none;cursor:pointer;transition:all var(--dur-fast);white-space:nowrap} .btn-navy:hover{background:var(--navy-deep);box-shadow:0 2px 0 0 var(--amber)} .btn-full{width:100%;justify-content:center} .btn-ghost{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:700;color:var(--navy);transition:all var(--dur-fast);text-decoration:none} .btn-ghost:hover{text-decoration:underline} .btn-ghost svg{width:14px;height:14px;transition:transform var(--dur-fast)} .btn-ghost:hover svg{transform:translateX(3px)} /* ═══════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════ */ .form-group{margin-bottom:20px} .form-field{width:100%;padding:14px 16px;font-size:var(--t-body);font-weight:500;background:var(--white);border:2px solid rgba(5,22,77,.12);border-radius:var(--radius-sm);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);outline:none;min-height:44px;color:var(--ink)} .form-field:hover{border-color:rgba(5,22,77,.25)} .form-field:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(5,22,77,.06)} .form-field.is-error{border-color:#B71C1C} textarea.form-field{resize:vertical;min-height:90px;line-height:1.65} .form-submit{width:100%;padding:14px 16px;font-size:var(--t-body);font-weight:800;background:var(--amber);color:var(--navy);border-radius:var(--radius-full);border:2px solid var(--amber);transition:all var(--dur-fast);cursor:pointer;min-height:44px} .form-submit:hover{background:var(--amber-hover);border-color:var(--amber-hover);transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,173,0,.45)} .form-submit.is-success{background:var(--status-go);border-color:var(--status-go);pointer-events:none} .dots{display:inline-flex;gap:4px} .dots span{width:6px;height:6px;background:var(--navy);border-radius:50%;animation:dotPulse .6s ease infinite} .dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s} /* CTA-band form uses white fields */ .cta-band .form-field{background:var(--white);border-color:rgba(5,22,77,.12);color:var(--ink)} .cta-band .form-field:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,173,0,.12)} /* ═══════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════ */ .hero { padding: 80px 0 64px ; display: flex ; align-items: flex-start ; position: relative ; overflow: visible ; } .hero .container { position: relative ; z-index: 1 ; width: 100% ; display: grid ; grid-template-columns: 1.1fr .9fr ; gap: 56px ; align-items: start ; } /* Hero left — ACF WYSIWYG content zone */ .hero-copy{display:flex;flex-direction:column} /* Hero eyebrow — structural */ .hero-eyebrow{display:inline-flex;align-items:center;gap:8px; width: fit-content; font-size:var(--t-label);font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;background:rgba(255,173,0,.1);border:1px solid rgba(255,173,0,.25);border-radius:var(--radius-full);padding:6px 16px;margin-bottom:20px;animation:fadeIn .8s var(--ease) both} .hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulseAmber 2.4s ease infinite;flex-shrink:0} /* All text in hero-copy styled via element selectors — no classes on content */ .hero-copy h1{font-size:var(--t-hero);font-weight:800;line-height:1.1;color:var(--white);margin-bottom:20px;max-width:640px;animation:fadeUp .7s var(--ease) .08s both} .hero-copy h1 em{color:var(--amber);font-style:normal} .hero-copy p{font-size:var(--t-body-lg);font-weight:500;color:rgba(255,255,255,.65);max-width:520px;line-height:1.55;margin-bottom:28px;animation:fadeUp .7s var(--ease) .16s both} .hero-copy ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px;animation:fadeUp .7s var(--ease) .24s both} .hero-copy ul li{padding-left: 30px; position: relative; gap:10px;font-size:var(--t-sm);color:rgba(255,255,255,.75);line-height:1.55} .hero-copy ul li::before{ position: absolute; left: 0; top: -1px; content:'';width:22px;height:22px;border-radius:50%;background:rgba(74,222,128,.15);border:1px solid rgba(74,222,128,.3);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%234ADE80' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px;flex-shrink:0;margin-top:1px} .hero-copy ul li strong{color:var(--white)} /* Proof strip — structural (populated by ACF text fields) */ .hero-proof{display:flex;gap:24px;flex-wrap:wrap;font-size:var(--t-sm);color:rgba(255,255,255,.45);animation:fadeUp .7s var(--ease) .32s both} .hero-proof strong{font-weight:800;color:var(--white)} .hero-proof-sep{width:1px;height:16px;background:rgba(255,255,255,.1);align-self:center} .hero-micro{font-size:var(--t-xs);color:rgba(255,255,255,.3);margin-top:10px} /* Hero form column — sticky */ .hero-form-col { position: sticky ; top: 75px ; height: fit-content ; align-self: start ; animation: fadeUp .8s var(--ease) .35s both ; } /* Form card content — ACF fields, plain elements */ .glass--form h3{font-size:var(--t-h3);font-weight:800;color:var(--white);line-height:1.2;margin-bottom:4px} .glass--form p.form-label-intro{font-size:var(--t-xs);color:rgba(255,255,255,.4);margin-bottom:20px} .form-trust-row{display:flex;justify-content:center;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)} .form-trust-row span{font-size:var(--t-label);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.3)} .form-footnote{font-size:var(--t-xs);color:rgba(255,255,255,.25);text-align:center;margin-top:10px} .form-eyebrow{font-size:var(--t-label);font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px} /* ═══════════════════════════════════════════════════════════ CLAIMS BAND ═══════════════════════════════════════════════════════════ */ .claims-band{background:linear-gradient(90deg,var(--navy-deep) 0%,var(--navy) 40%,var(--navy-mid) 70%,var(--navy) 100%);border-top:1px solid rgba(255,173,0,.15);border-bottom:1px solid rgba(255,173,0,.15);height:44px;overflow:hidden;position:relative} .claims-band::before,.claims-band::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2} .claims-band::before{left:0;background:linear-gradient(90deg,var(--navy-deep),transparent)} .claims-band::after{right:0;background:linear-gradient(270deg,var(--navy),transparent)} .claims-band-track{display:flex;align-items:center;height:100%;animation:marquee 32s linear infinite;width:max-content} .claims-band:hover .claims-band-track{animation-play-state:paused} /* Items in claims band — no class needed on text nodes */ .claims-band-track span{font-size:var(--t-label);font-weight:700;color:rgba(255,255,255,.88);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;padding:0 16px} .claims-band-track b{display:inline-block;width:5px;height:5px;border-radius:50%;background:rgba(255,173,0,.8);vertical-align:middle;flex-shrink:0} /* ═══════════════════════════════════════════════════════════ LOGO BAR ═══════════════════════════════════════════════════════════ */ .logo-bar{padding:40px 0} .logo-bar-label{font-size:var(--t-xs);color:var(--text-mid);text-align:center;margin-bottom:24px;font-weight:500;display:block} .logo-bar-scroll{position:relative;overflow:hidden} .logo-bar-scroll::before,.logo-bar-scroll::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none} .logo-bar-scroll::before{left:0;background:linear-gradient(to right,var(--white),transparent)} .logo-bar-scroll::after{right:0;background:linear-gradient(to left,var(--white),transparent)} .logo-bar-track{display:flex;align-items:center;gap:30px;animation:marquee 32s linear infinite;width:max-content} .logo-bar-track:hover{animation-play-state:paused} /* Each logo pill — ACF repeater text field, no class on element */ .logo-bar-track span:hover{border-color:rgba(5,22,77,.18);color:var(--navy)} .logo-bar-track span{display: inline-flex; align-items: center; justify-content: center; min-width: 140px; padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--t-sm); font-weight: 700; color: var(--text-mid); white-space: nowrap; transition: border-color var(--dur-fast), color var(--dur-fast);} /* ═══════════════════════════════════════════════════════════ SECTION HEADS — styled via element selectors on wrappers ═══════════════════════════════════════════════════════════ */ .section-head{margin-bottom:48px} .section-head--center{text-align:center} /* ACF text fields output plain text; these selectors style them */ .section-head small{font-size:var(--t-label);font-weight:700;color:var(--amber-dark);text-transform:uppercase;letter-spacing:.09em;display:block;margin-bottom:12px} .surface--navy .section-head small,.surface--navy-deep .section-head small{color:var(--amber)} .section-head h2{font-size:var(--t-h2);font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:14px;letter-spacing:-.015em} .section-head h2 em{font-style:normal;color:var(--amber)} .surface--navy .section-head h2,.surface--navy-deep .section-head h2{color:var(--white)} .section-head p{font-size:var(--t-body-lg);color:var(--text-mid);line-height:1.6;max-width:580px} .surface--navy .section-head p,.surface--navy-deep .section-head p{color:rgba(255,255,255,.62)} .section-head--center p{margin-inline:auto} /* ═══════════════════════════════════════════════════════════ BUYER REALITY / PAIN SECTION ═══════════════════════════════════════════════════════════ */ .buyer-reality{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start} /* Zone 1 text — ACF WYSIWYG; styled via element selectors */ .buyer-reality-copy h2{font-size:var(--t-h2);font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:20px;letter-spacing:-.015em} .buyer-reality-copy h2 em{font-style:normal;color:var(--amber)} .buyer-reality-copy small{font-size:var(--t-label);font-weight:700;color:var(--amber-dark);text-transform:uppercase;letter-spacing:.09em;display:block;margin-bottom:12px} .buyer-reality-copy p{font-size:var(--t-body);color:var(--ink);line-height:1.7;margin-bottom:28px} /* Value strip — ACF repeater (number, title, body) */ .value-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);margin-top:4px} .value-strip-cell{padding:28px;position:relative} .value-strip-cell+.value-strip-cell{border-left:1px solid var(--border)} /* Content inside each cell — ACF repeater outputs: 01

title

body

*/ .value-strip-cell b{font-size:4rem;font-weight:900;line-height:1;color:rgba(5,22,77,.06);display:block;margin-bottom:10px} .value-strip-cell h3{font-size:var(--t-subhead);font-weight:700;color:var(--navy);margin-bottom:8px} .value-strip-cell p{font-size:var(--t-sm);color:var(--text-mid);line-height:1.6} /* Data card */ .buyer-reality-card{background:var(--navy); flex-basis: 50%; position: sticky; top: 150px; height: fit-content; border-radius:var(--radius-lg);padding:28px;overflow:hidden} .buyer-reality-card-title{font-size:var(--t-label);font-weight:700;color:var(--amber);text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;display:flex;align-items:center;gap:6px} .bar-row{display:flex;align-items:center;gap:12px;margin-bottom:14px} .bar-label{font-size:var(--t-sm);color:rgba(255,255,255,.8);width:120px;flex-shrink:0} .bar-track{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden} .bar-fill{height:100%;border-radius:3px;transition:width .8s ease;width:0} .bar-fill--red{background:#EF4444} .bar-fill--amber{background:var(--amber)} .bar-fill--green{background:#4ADE80} .bar-val{font-size:var(--t-sm);font-weight:700;color:var(--white);width:40px;text-align:right;flex-shrink:0} .buyer-reality-card p{font-size:var(--t-sm);color:rgba(255,255,255,.6);margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);line-height:1.6} .buyer-reality-card p strong{color:var(--white)} /* buyer-reality-card checklist — plain