/*
Theme Name: VR Williams Consulting
Theme URI: https://vrwilliamsconsulting.org
Author: VR Williams Consulting LLC
Description: Custom business theme for VR Williams Consulting LLC. Dynamic blog, menus, contact form (emails the site owner), and Customizer-editable contact details. No page-builder plugin required.
Version: 1.0.15
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: vrw
*/
:root{--blue:#1d4ed8;--blue2:#2563eb;--ink:#020617;--text:#1e293b;--mute:#475569;--line:#cbd5e1;--tint:#eff6ff;--tint2:#dbeafe;--max:1100px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.65;color:var(--text);background:#fff}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat','Open Sans',sans-serif;color:var(--ink);line-height:1.2;margin:0 0 .6em;font-weight:600}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}h2{font-size:clamp(1.7rem,3.5vw,2.5rem)}h3{font-size:1.35rem}h4{font-size:1.15rem}
a{color:var(--blue2);text-decoration:none}a:hover{color:var(--blue)}
img{max-width:100%;height:auto}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px;z-index:100}.skip-link:focus{left:10px}
.btn,input[type=submit],button.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:100px;padding:14px 30px;font:600 .95rem 'Montserrat',sans-serif;cursor:pointer;transition:background .2s}
.btn:hover,input[type=submit]:hover{background:var(--blue2);color:#fff}
.btn-light{background:#fff;color:var(--blue)}.btn-light:hover{background:var(--tint2);color:var(--blue)}
.btn-outline{background:transparent;border:2px solid #fff;color:#fff}.btn-outline:hover{background:#fff;color:var(--blue)}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e2e8f0}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{font:700 1.15rem 'Montserrat',sans-serif;color:var(--ink)}.brand:hover{color:var(--blue)}
.main-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;align-items:center}
.main-nav a{color:var(--ink);font-weight:600;font-size:.95rem}.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--blue)}
.nav-toggle{display:none;background:none;border:0;font-size:1.7rem;cursor:pointer;color:var(--ink)}
.header-cta{margin-left:10px}
/* hero */
.hero{background:linear-gradient(135deg,#020617 0%,#0f2a6b 55%,#1d4ed8 100%);color:#fff;padding:110px 0 100px}
.hero h1{color:#fff;max-width:760px}.hero p{font-size:1.15rem;max-width:660px;color:#dbeafe}
.hero .eyebrow{display:inline-block;background:rgba(255,255,255,.12);padding:6px 16px;border-radius:100px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.page-hero{background:var(--ink);color:#fff;padding:70px 0}.page-hero h1{color:#fff;margin:0}.page-hero p{color:#cbd5e1;margin:12px 0 0;max-width:680px}
/* sections */
.section{padding:84px 0}.section.alt{background:var(--tint)}.section.dark{background:var(--ink);color:#cbd5e1}.section.dark h2,.section.dark h3{color:#fff}
.section-head{text-align:center;max-width:720px;margin:0 auto 48px}
.eyebrow-dark{color:var(--blue2);font:700 .8rem 'Montserrat',sans-serif;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;display:block}
.grid{display:grid;gap:26px}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:30px;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 12px 30px rgba(15,23,42,.08);transform:translateY(-2px)}
.card .icon{width:46px;height:46px;border-radius:12px;background:var(--tint2);color:var(--blue);display:flex;align-items:center;justify-content:center;font:700 1.1rem 'Montserrat';margin-bottom:16px}
.card p{margin:0;color:var(--mute)}
.stats{background:var(--blue);color:#fff;padding:54px 0}.stats .grid{text-align:center}
.stat b{display:block;font:700 3rem 'Montserrat',sans-serif;line-height:1}.stat span{display:block;font-weight:700;margin:8px 0 4px}.stat small{color:#dbeafe;font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.chip{background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 18px;font-size:.9rem;font-weight:600;color:var(--ink)}
.result{border-left:4px solid var(--blue2)}.result .tag{font:700 .75rem 'Montserrat';letter-spacing:.08em;text-transform:uppercase;color:var(--blue2);display:block;margin-bottom:10px}
.clients{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.clients div{border:1px solid #1e293b;border-radius:12px;padding:16px;text-align:center;color:#e2e8f0;font-weight:600;font-size:.92rem}
.cta{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;text-align:center;padding:84px 0}.cta h2{color:#fff}.cta p{color:#dbeafe;max-width:620px;margin:0 auto 28px}
/* posts + content */
.post-card{padding:0;overflow:hidden}.post-card .thumb img{width:100%;height:200px;object-fit:cover;display:block}.post-card .body{padding:24px}.post-card h3{margin-bottom:8px}.meta{font-size:.85rem;color:var(--mute);margin-bottom:10px}
.entry{max-width:780px;margin:0 auto}.entry img{border-radius:12px}.entry h2,.entry h3{margin-top:1.6em}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px}.pagination .page-numbers{padding:8px 16px;border:1px solid var(--line);border-radius:100px}.pagination .current{background:var(--blue);color:#fff;border-color:var(--blue)}
/* forms */
.form-row{margin-bottom:16px}label{display:block;font-weight:600;margin-bottom:6px;font-size:.92rem}
input[type=text],input[type=email],input[type=tel],input[type=search],textarea{width:100%;border:1px solid var(--line);border-radius:18px;padding:14px 18px;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--blue2);border-color:transparent}textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
.notice{padding:14px 18px;border-radius:12px;margin-bottom:20px;font-weight:600}.notice.ok{background:#dcfce7;color:#14532d}.notice.err{background:#fee2e2;color:#7f1d1d}
.contact-list{list-style:none;padding:0;margin:20px 0}.contact-list li{margin-bottom:14px}.contact-list b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
/* footer */
.site-footer{background:var(--ink);color:#94a3b8;padding:64px 0 0}.site-footer h5{color:#fff;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.site-footer a{color:#cbd5e1}.site-footer a:hover{color:#fff}.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin-bottom:8px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px;padding-bottom:44px}
.copyright{border-top:1px solid #1e293b;padding:20px 0;font-size:.88rem;text-align:center}
@media(max-width:860px){.g3,.g4,.g2,.footer-grid{grid-template-columns:1fr}.clients{grid-template-columns:repeat(2,1fr)}.hero{padding:70px 0}.section{padding:60px 0}
.nav-toggle{display:block}.main-nav{display:none;position:absolute;left:0;right:0;top:76px;background:#fff;border-bottom:1px solid #e2e8f0;padding:16px 20px}.main-nav.open{display:block}.main-nav ul{flex-direction:column;align-items:flex-start;gap:14px}.header-cta{display:none}}

/* ==========================================================================
   Site customizations embedded from Additional CSS (Oct 5, 2026)
   PDF header banner, PDF colour scheme, removals, compact footer and CTA bands.
   Keep these rules here so they stay even if Additional CSS is cleared.
   ========================================================================== */
/* Hide "Insights / Latest from the Blog" section on the homepage */
.home .section.alt:has(.post-card) { display: none; }

/* === VR Williams: PDF header banner + PDF colour scheme (added Oct 2026) === */
:root{--blue:#0f6f6c;--blue2:#158d8a;--ink:#000000;--text:#262626;--mute:#4b5563;--line:#d6d1ea;--tint:#f1fbfb;--tint2:#d9f6f5}
.site-header{position:relative;top:auto;background:#000;border-bottom:0}
.site-header::before{content:"";display:block;width:100%;aspect-ratio:2560/303;background:#000 url("https://vrwilliamsconsulting.org/wp-content/uploads/2026/10/vrw-new-header.webp") center/contain no-repeat}
.site-header .brand{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header .header-inner{min-height:60px;justify-content:center;gap:28px}
.main-nav a{color:#fff}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:#c8c068}
.nav-toggle{color:#fff}
.hero{background:linear-gradient(135deg,#000 0%,#0b3d3c 55%,#158d8a 100%)}
.hero .eyebrow{color:#c8c068}
.hero p,.cta p,.stat small{color:#d9f6f5}
.cta{background:linear-gradient(135deg,#0f6f6c,#158d8a)}
.btn-light{color:#0f6f6c}
@media(max-width:860px){.site-header .main-nav{top:100%;background:#000;border-bottom:1px solid #222}.site-header .header-inner{justify-content:flex-end}}

/* === Removals requested Oct 5, 2026 === */
/* "Get Started Today" buttons (header, homepage banner, bottom call-to-action) */
.site-header .header-cta, .hero .actions a.btn-light[href*="/contact"], .cta a.btn{display:none !important}
/* PDF download icons (PDF Generator for WP plugin) */
.wps-pgfw-pdf-generate-icon__wrapper-frontend, .pgfw-single-pdf-download-button{display:none !important}
/* Floating language switcher, bottom right (TranslatePress) */
.trp-floating-switcher{display:none !important}

/* === Credentials pill moved into header nav bar (Oct 5, 2026) === */
/* Right edge lines up with "Professional Services" in the banner (ends at 83.11% of banner width) */
.hero .eyebrow{display:none !important}
.site-header .header-inner{max-width:none;box-sizing:border-box;justify-content:flex-end;padding-left:20px;padding-right:16.89%}
.site-header .header-inner::after{content:"MBA \00B7  PMP\00AE  \00B7  CSM \00B7  ITIL \00B7  Six Sigma Black Belt";display:inline-block;background:rgba(255,255,255,.12);color:#c8c068;padding:6px 16px;border-radius:100px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;line-height:1.65}
@media(max-width:1100px){.site-header .header-inner::after{font-size:.7rem;padding:5px 12px;letter-spacing:.05em}}
@media(max-width:860px){.site-header .header-inner{justify-content:space-between;padding-right:20px}.site-header .header-inner::after{order:-1;font-size:.62rem;padding:4px 10px;letter-spacing:.03em}}

/* === Footer credentials chips removed (Oct 5, 2026) === */
.site-footer p:has(> .chip), .site-footer .chip{display:none !important}

/* === Compact footer, about 1/3 of original height (Oct 5, 2026) === */
.site-footer{padding:26px 0 0}
.site-footer .footer-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-bottom:10px}
.site-footer .footer-grid>div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.site-footer .footer-grid h5{margin:0;font-size:.8rem}
.site-footer .footer-grid p:empty{display:none}
.site-footer .footer-grid ul{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0}
.site-footer .footer-grid li{margin:0}
.site-footer .copyright{padding:12px 0;font-size:.8rem}
@media(max-width:860px){.site-footer{padding-top:12px}.site-footer .footer-grid{justify-content:flex-start;gap:2px 24px;padding-bottom:6px}.site-footer .copyright{padding:5px 0}}

/* === Footer label cleanup + saved footer text colour (Oct 5, 2026) === */
/* Saved colour: --vrw-footer-text = #94a3b8 (the copyright line colour). Reuse it anywhere as var(--vrw-footer-text). */
:root{--vrw-footer-text:#94a3b8}
.site-footer .copyright{color:var(--vrw-footer-text)}
.site-footer .footer-grid > div:has(> ul.menu) > h5{display:none !important}
.site-footer .footer-grid h5{color:var(--vrw-footer-text)}

/* === Homepage "Ready to Transform Your Organization?" band, about 1/3 height (Oct 5, 2026) === */
.home .cta{padding:18px 0}
.home .cta h2{font-size:1.5rem;margin:0 0 4px}
.home .cta p{margin:0 auto}
@media(max-width:600px){.home .cta{padding:10px 0}.home .cta h2{font-size:1.1rem;margin-bottom:2px}.home .cta p{font-size:.85rem;line-height:1.4}}

/* === About page "Let's Talk About Your Initiative" band, about 1/3 height (Oct 5, 2026) === */
.page-id-510 .cta{padding:25px 0}
.page-id-510 .cta h2{font-size:1.5rem;margin:0}
@media(max-width:600px){.page-id-510 .cta{padding:31px 0}.page-id-510 .cta h2{font-size:1.1rem}}

/* === Homepage hero headline at half size, about 29px (Oct 5, 2026) === */
.home .hero h1{font-size:clamp(1.4rem,3vw,1.8rem);line-height:1.25}

/* === Hide the header credentials pill; the New Header image already includes it (Oct 5, 2026) === */
.site-header .header-inner::after{content:none !important;display:none !important}

/* === "Trusted By" client rectangles: equal width, equal snug one-line height, teal 2pt border, grey shadow, centered last row (Oct 5, 2026) ===
   Border: 2pt (~2.67px) in the section's small teal label colour (#158d8a).
   Height: fixed 40px for every box, just enough for one line of text (line-height 1.3, 6px top/bottom padding).
   Outer shadow: grey (#808080) at 25% transparency (alpha .75), size 100% (no spread), blur 7pt (~9.33px), angle 45deg, distance 7pt (~9.33px = 6.6px right, 6.6px down).
   Inner shadow: same grey, transparency, blur and 45deg angle/7pt distance, drawn inside the box along the top and left lines (Oct 5, 2026 update). */
.home .clients{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.home .clients > div{box-sizing:border-box;flex:0 0 344px;width:344px;max-width:100%;font-size:.85rem;height:40px;padding:6px 14px;line-height:1.3;display:flex;align-items:center;justify-content:center;white-space:nowrap;border:2.67px solid #158d8a;box-shadow:6.6px 6.6px 9.33px rgba(128,128,128,.75),inset 6.6px 6.6px 9.33px rgba(128,128,128,.75)}

/* === Homepage "Trusted By" heading and spacing (Oct 5, 2026) ===
   "Trusted By" now sits above "Organizations We've Served".
   "Organizations We've Served" (teal label) takes the normal section-heading size; "Trusted By" is half that size.
   Space above the heading and below the rectangles is half the normal section padding (84px -> 42px; 60px -> 30px on small screens). */
/* Update (Oct 5, 2026): "Organizations We've Served" is now small caps (first letter of each word a full-size capital), 1.5pt (2px) smaller, and not bold (weight 400).
   "Trusted By" is 1pt (~1.33px) larger. Rectangle shadows (outer and inner) now use a 7pt (~9.33px) blur. */
/* Update (Oct 5, 2026): gap between "Organizations Served" and the rectangles cut ~35% (48px -> 31px); gap between "Trusted By" and "Organizations Served" cut 15% (8px -> 6.8px). */
.home .clients-section{padding-top:42px;padding-bottom:42px}
.home .clients-section .section-head{max-width:none;margin-bottom:31px}
.home .clients-section .section-head h2{font-size:calc(clamp(1.7rem,3.5vw,2.5rem) / 2 + 1.33px);margin:0 0 6.8px}
.home .clients-section .section-head .eyebrow-dark{font-size:calc(clamp(1.7rem,3.5vw,2.5rem) - 2px);font-weight:400;text-transform:none;font-variant:small-caps;line-height:1.2;margin:0}
@media(max-width:860px){.home .clients-section{padding-top:30px;padding-bottom:30px}}

/* === Homepage hero: half the space above "Your Partner for Business IT Solutions..." (Oct 5, 2026) ===
   110px -> 55px on wide screens; 70px -> 35px on small screens. */
.home .hero{padding-top:55px}
@media(max-width:860px){.home .hero{padding-top:35px}}

/* === "Trusted By" rectangles widened for longer names (Oct 5, 2026) ===
   Longest name is now "Financial Industry Regulatory Authority (FINRA)". Boxes are 344px wide with 13.6px text (.85rem),
   so it fits on one line and three boxes still fit per row on desktop (two on tablets).
   On phones the boxes fill the screen width and the text drops to 12.4px so every name stays on one line. */
@media(max-width:420px){.home .clients > div{flex-basis:100%;width:100%;font-size:.775rem;padding-left:8px;padding-right:8px}}

/* === Homepage hero image to the right of the text, with gentle animation (Oct 5, 2026) ===
   Desktop: text ~60% / image ~40%, image stretches to the full height of the text column and crops from the centre.
   Phones & tablets (860px and below): image stacks under the text in its 2:3 shape.
   Animation: fades in on load, slow zoom-and-drift (24s, loops back and forth), soft teal glow that gently pulses.
   Visitors with "reduce motion" turned on see a still image. Image: Media Library "HomeImageFinal" (vrw-home-hero.webp, 800x1200). */
.home .hero .hero-grid{display:grid;grid-template-columns:3fr 2fr;gap:48px;align-items:stretch}
.home .hero .hero-text h1,.home .hero .hero-text p{max-width:none}
/* Update (Oct 5, 2026): "Get Started Today" and "About Us" buttons removed from the hero, so the text column now ends at the paragraph.
   No space under the paragraph, so the image bottom lines up with the last line of text; image fades in without moving so its top stays level with the headline.
   Update (Oct 5, 2026): rise-and-fade-in restored at the owner's request (image starts 12px low and settles level with the headline within 1.2s). */
.home .hero .hero-text > :last-child{margin-bottom:0}
.home .hero-media{position:relative;overflow:hidden;border-radius:16px;min-height:100%;background:#031a1a;box-shadow:0 0 0 1px rgba(21,141,138,.5),0 0 16px rgba(21,141,138,.25);animation:vrwHeroFade 1.2s ease-out both,vrwHeroGlow 6s ease-in-out 1.2s infinite alternate}
.home .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:60% 40%;animation:vrwKenBurns 24s ease-in-out infinite alternate;will-change:transform}
@keyframes vrwKenBurns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.1) translate(-2%,-3%)}}
@keyframes vrwHeroFade{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes vrwHeroGlow{from{box-shadow:0 0 0 1px rgba(21,141,138,.5),0 0 16px rgba(21,141,138,.25)}to{box-shadow:0 0 0 1px rgba(21,141,138,.9),0 0 32px rgba(21,141,138,.55)}}
@media(max-width:860px){.home .hero .hero-grid{grid-template-columns:1fr;gap:28px}.home .hero-media{min-height:0;aspect-ratio:2/3;width:100%;max-width:420px;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.home .hero-media,.home .hero-media img{animation:none}}

/* === Services page: two side-by-side service columns with custom bullets (Oct 5, 2026) ===
   Content comes from "Services 2" (edit it on the Services page in WordPress, first block).
   Left: "Business & Program Transformation". Right: "Process Improvement Leadership". Columns stack on screens 860px and narrower.
   Bullets use the teal square icon from the Media Library ("bullet", vrw-bullet.png). */
.page-id-870 .entry{max-width:var(--max)}
.vrw-services-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin:0 0 24px}
.vrw-svc-col h2{font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.25;margin:0 0 18px;padding-bottom:12px;border-bottom:3px solid #158d8a}
.vrw-bullets{list-style:none;margin:0;padding:0}
.vrw-bullets li{position:relative;padding-left:28px;margin:0 0 12px;line-height:1.55}
.vrw-bullets li::before{content:"";position:absolute;left:0;top:.38em;width:15px;height:14px;background:url("https://vrwilliamsconsulting.org/wp-content/uploads/2026/10/vrw-bullet.png") center/contain no-repeat}
@media(max-width:860px){.vrw-services-cols{grid-template-columns:1fr;gap:36px}}

/* === Services page update (Oct 5, 2026) ===
   - "Services" title row removed (hidden).
   - Content area uses the same background as the homepage hero (black -> dark teal -> teal gradient), with light text.
   - Column headers: small caps, regular weight, same teal as "Organizations Served" (#158d8a).
   - Bullets "pop": slightly larger and brighter, pop in one after another when the page loads, and grow on hover.
     Shadow matches the client rectangles' outer shadow (grey, 25% transparency, 45deg, bottom-right), scaled to the bullet size
     (about 3px distance, 3.5px blur). The inner top/left shadow can't be drawn on an image icon, so only the outer shadow is used.
   - Visitors with "reduce motion" on see the bullets without the pop-in animation. */
.page-id-870 .page-hero{display:none}
.page-id-870 main > .section{background:linear-gradient(135deg,#000 0%,#0b3d3c 55%,#158d8a 100%);color:#d9f6f5}
.page-id-870 .vrw-bullets li{color:#d9f6f5}
.vrw-svc-col h2{color:#1db5b9;font-family:'Montserrat',sans-serif;font-weight:400;font-variant:small-caps;text-transform:none;letter-spacing:.04em;text-shadow:0 0 14px rgba(29,181,185,.55),0 0 2px rgba(255,255,255,.35),2px 2px 3px rgba(0,0,0,.85)}
.vrw-bullets li{padding-left:32px}
.vrw-bullets li::before{top:.3em;width:18px;height:17px;filter:brightness(.77) drop-shadow(0 0 3px rgba(29,181,185,.9)) drop-shadow(3px 3px 3px rgba(200,200,200,.95));transform-origin:center;animation:vrwBulletPop .55s cubic-bezier(.34,1.56,.64,1) both;transition:transform .2s ease}
.vrw-bullets li:hover::before{transform:scale(1.3)}
@keyframes vrwBulletPop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
.vrw-bullets li:nth-child(1)::before{animation-delay:0.08s}
.vrw-bullets li:nth-child(2)::before{animation-delay:0.16s}
.vrw-bullets li:nth-child(3)::before{animation-delay:0.24s}
.vrw-bullets li:nth-child(4)::before{animation-delay:0.32s}
.vrw-bullets li:nth-child(5)::before{animation-delay:0.40s}
.vrw-bullets li:nth-child(6)::before{animation-delay:0.48s}
.vrw-bullets li:nth-child(7)::before{animation-delay:0.56s}
.vrw-bullets li:nth-child(8)::before{animation-delay:0.64s}
.vrw-bullets li:nth-child(9)::before{animation-delay:0.72s}
.vrw-bullets li:nth-child(10)::before{animation-delay:0.80s}
.vrw-bullets li:nth-child(11)::before{animation-delay:0.88s}
.vrw-bullets li:nth-child(12)::before{animation-delay:0.96s}
.vrw-bullets li:nth-child(13)::before{animation-delay:1.04s}
.vrw-bullets li:nth-child(14)::before{animation-delay:1.12s}
.vrw-bullets li:nth-child(15)::before{animation-delay:1.20s}
@media(prefers-reduced-motion:reduce){.vrw-bullets li::before{animation:none}}

/* === Services page update 2 (Oct 5, 2026) ===
   - Space above the column headers halved: 84px -> 42px on wide screens, 60px -> 30px on small screens.
   - Colours swapped: headers now use the bullet icon's bright teal (#1db5b9); bullets are toned to the former header teal (#158d8a).
   - Headers "pop": soft bright-teal glow, faint light edge and a dark drop shadow.
   - Bullets: stronger shadow so they stand out on the dark background (bright-teal glow plus a light-grey drop shadow, 3px down-right, 3px blur). */
.page-id-870 main > .section{padding-top:21px}
@media(max-width:860px){.page-id-870 main > .section{padding-top:15px}}

/* === Services page update 3 (Oct 5, 2026) ===
   - Space above the column headers halved again: 42px -> 21px on wide screens, 30px -> 15px on small screens.
   - The last bullet ("Translate stakeholder and end-user insights...") now sits on its own row, centred under both columns.
     In WordPress it is a separate list right after the two columns (class "vrw-bullets-center"). It pops in last. */
/* Update (Oct 5, 2026): space above the centred bullet now matches the 12px gap between bullets in the columns. */
.vrw-services-cols:has(+ .vrw-bullets-center){margin-bottom:0}
.vrw-bullets-center{display:flex;justify-content:center;margin:0 0 24px}
.vrw-bullets-center li{max-width:506px;margin:0}
.vrw-bullets-center li::before{animation-delay:1.3s}

/* === Homepage hero heading and paragraph update (Oct 5, 2026) ===
   - "Your Partner for Business IT Solutions & Program Management Delivery Excellence" now matches "Organizations Served":
     Montserrat, regular weight, small caps, teal #158d8a, same size (38px on wide screens, ~25px on phones).
   - The paragraph keeps the same proportion to the heading as before (about 64% of the heading size): ~24px wide screens, ~16px phones.
   - The image beside the text still stretches to the full height of the heading + paragraph, so it grows to match.
   Update (Oct 5, 2026): heading and paragraph both cut to 50% of the sizes above (heading 19px / paragraph ~12px on wide screens;
   ~12.6px / ~8px on phones). Same 64% proportion kept; the image shrinks to the new text height automatically.
   Update (Oct 5, 2026): both increased by 30% (heading ~24.7px / paragraph ~15.8px on wide screens; ~16.4px / ~10.5px on phones).
   Image height follows the text automatically. */
.home .hero .hero-text h1{font-family:'Montserrat',sans-serif;font-weight:400;font-variant:small-caps;text-transform:none;color:#158d8a;font-size:calc((clamp(1.7rem,3.5vw,2.5rem) - 2px) * .65);line-height:1.25}
.home .hero .hero-text p{font-size:calc((clamp(1.7rem,3.5vw,2.5rem) - 2px) * .416);line-height:1.6}

/* === Services page: "Consulting Services / Enterprise Solutions Built for Results" section (Oct 5, 2026) ===
   Moved here from the homepage; it now sits above the two service columns (added in page.php for the Services page only).
   It keeps its original homepage look (light background, standard section spacing, six numbered cards);
   the dark gradient and tighter top spacing still apply only to the columns section below it. */
.page-id-870 main > .section.vrw-services-intro{background:none;color:inherit;padding:84px 0}
@media(max-width:860px){.page-id-870 main > .section.vrw-services-intro{padding:60px 0}}

/* === Services page: Consulting Services cards update (Oct 5, 2026) ===
   - Card titles kept; card text rewritten from "Services 2" (edit in inc/content.php, 'services').
   - Numbers removed from the cards.
   - The whole Services page (cards section + columns section) now sits on one continuous homepage-hero gradient
     (black -> dark teal -> teal), so there is no seam between the two sections.
   - Section heading in white, intro sentence light teal-white; cards are light grey with dark text. */
.page-id-870 main{background:linear-gradient(135deg,#000 0%,#0b3d3c 55%,#158d8a 100%)}
.page-id-870 main > .section,.page-id-870 main > .section.vrw-services-intro{background:none}
.page-id-870 .vrw-services-intro .section-head h2{color:#fff}
.page-id-870 .vrw-services-intro .section-head p{color:#d9f6f5}
.page-id-870 .vrw-services-intro .card{background:#e8ecef;border-color:#d3d9de;color:#1e293b}
.page-id-870 .vrw-services-intro .card h3{color:#0b3d3c}
.page-id-870 .vrw-services-intro .card p{color:#334155}

/* === Services page cards update 2 (Oct 5, 2026) ===
   - Heading changed to "Business IT Solutions Built for Results" (in page.php) and coloured teal #158d8a,
     the colour of the former "Consulting Services" label, which has been removed.
   - Cards are grey #E0E0E0.
   - Card shadows match the "Trusted By" company rectangles: grey at 25% transparency, 7pt blur, 45deg, 7pt distance,
     outer shadow to the bottom-right plus an inner shadow along the top and left edges. */
.page-id-870 .vrw-services-intro .section-head h2{color:#158d8a}
.page-id-870 .vrw-services-intro .card{background:#E0E0E0;box-shadow:6.6px 6.6px 9.33px rgba(128,128,128,.75),inset 6.6px 6.6px 9.33px rgba(128,128,128,.75)}

/* === Services page heading update (Oct 5, 2026) ===
   Heading now reads "Partnering for Business IT Solutions Built for Results" (in page.php) and matches the homepage
   "Your Partner for Business IT Solutions..." heading: Montserrat, regular weight, small caps, teal #158d8a, same size
   (~24.7px wide screens, ~16.4px phones). */
.page-id-870 .vrw-services-intro .section-head h2{font-family:'Montserrat',sans-serif;font-weight:400;font-variant:small-caps;text-transform:none;color:#158d8a;font-size:calc((clamp(1.7rem,3.5vw,2.5rem) - 2px) * .65);line-height:1.25}

/* === Services page: space above "Partnering for Business IT Solutions..." reduced 58% (Oct 5, 2026) ===
   84px -> 35px on wide screens; 60px -> 25px on small screens. Space below the cards is unchanged. */
.page-id-870 main > .section.vrw-services-intro{padding-top:35px}
@media(max-width:860px){.page-id-870 main > .section.vrw-services-intro{padding-top:25px}}

/* === Services page cards: teal left border (Oct 5, 2026) ===
   Each card has a 5px teal (#158d8a) border down its left side; other sides unchanged. */
.page-id-870 .vrw-services-intro .card{border-left:5px solid #158d8a}

/* === About page: "Core Competencies / Deep Technical and Domain Expertise" section (Oct 5, 2026) ===
   Moved here from the homepage (added in page-about.php, between "Why Organizations Choose Us" and "Selected Clients").
   White background so it stands apart from the grey "Why Organizations Choose Us" band above it; chips keep their original look. */
.vrw-about-competencies{background:#fff}
.vrw-about-competencies .chips{justify-content:center}

/* === Services page cards: tighter, compact text (Oct 5, 2026) ===
   - All card text (title and description) is the same size as the intro sentence "From discovery through implementation..." (16px).
   - Tighter line spacing (1.35 instead of 1.65) for a compact display.
   - Card titles in small caps; extra space between title and text removed (13px -> 4px).
   - Card inner padding reduced (30px -> 20px). */
.page-id-870 .vrw-services-intro .card{padding:20px 22px}
.page-id-870 .vrw-services-intro .card h3{font-size:16px;line-height:1.3;font-variant:small-caps;text-transform:none;letter-spacing:.02em;margin:0 0 4px}
.page-id-870 .vrw-services-intro .card p{font-size:16px;line-height:1.35;margin:0}

/* === Services page: heading and card text update (Oct 5, 2026) ===
   - "Partnering for Business IT Solutions Built for Results": about 25% larger (24.7px -> ~30.4px wide screens, ~20px phones),
     bold, with a dark drop shadow plus a soft teal glow. Still small caps, teal #158d8a.
   - Card titles: bold, black.
   - Card paragraph line spacing tightened further (1.35 -> 1.2). */
.page-id-870 .vrw-services-intro .section-head h2{font-size:calc((clamp(1.7rem,3.5vw,2.5rem) - 2px) * .8);font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.85),0 0 12px rgba(29,181,185,.45)}
.page-id-870 .vrw-services-intro .card h3{font-weight:700;color:#000}
.page-id-870 .vrw-services-intro .card p{line-height:1.2}

/* === Services page: heading and card sizes update (Oct 5, 2026) ===
   - "Partnering for Business IT Solutions Built for Results" now uses the same size and colour as the
     "Business & Program Transformation" column header (bright teal #1db5b9; ~25.6px wide screens, ~20.8px phones).
     Kept on one line on wider screens; on narrow phones it wraps so it doesn't run off the screen.
   - Card titles one size larger (16px -> 18px); card paragraphs one size smaller (16px -> 14px). */
.page-id-870 .vrw-services-intro .section-head h2{font-size:clamp(1.3rem,2.2vw,1.6rem);color:#1db5b9}
@media(min-width:861px){.page-id-870 .vrw-services-intro .section-head h2{white-space:nowrap}}
.page-id-870 .vrw-services-intro .card h3{font-size:18px}
.page-id-870 .vrw-services-intro .card p{font-size:14px}

/* === Services page: wider uniform cards + heading colour (Oct 5, 2026) ===
   - Cards are all 380px wide so every card title fits on one line (longest: "Technology-Enabled Transformation").
     The card section is allowed up to 1240px wide so three cards fit per row on desktop; two per row on mid-size screens,
     one on phones (on very narrow phones a title may still wrap). All cards share the same height (the tallest card).
   - "Partnering for Business IT Solutions Built for Results" is now teal #158d8a (the cards' teal border colour) and semi-bold. */
.page-id-870 .vrw-services-intro .container{max-width:1240px}
.page-id-870 .vrw-services-intro .grid.g3{grid-template-columns:repeat(auto-fit,min(380px,100%));grid-auto-rows:1fr;justify-content:center}
.page-id-870 .vrw-services-intro .card h3{white-space:nowrap}
@media(max-width:420px){.page-id-870 .vrw-services-intro .card h3{white-space:normal}}
.page-id-870 .vrw-services-intro .section-head h2{color:#158d8a;font-weight:600}

/* === Services page spacing update (Oct 5, 2026) ===
   - No space between "Partnering for Business IT Solutions Built for Results" and the "From discovery through implementation..." sentence (16px -> 0).
   - Space between the last row of cards and the two column headers cut by 55%: 105px -> 47px on wide screens, 75px -> 34px on small screens
     (cards section bottom padding 84px -> 26px / 60px -> 19px; the columns section keeps its 21px / 15px top padding). */
.page-id-870 .vrw-services-intro .section-head h2{margin-bottom:0}
.page-id-870 .vrw-services-intro .section-head p{margin-top:0}
.page-id-870 main > .section.vrw-services-intro{padding-bottom:26px}
@media(max-width:860px){.page-id-870 main > .section.vrw-services-intro{padding-bottom:19px}}

/* === Services page: space under the last bullet (Oct 5, 2026) ===
   Space between the last (centred) bullet and the footer reduced to a minimum: 108px -> 12px on wide screens, 84px -> 12px on phones
   (12px = the same gap used between bullets). */
.page-id-870 .vrw-bullets-center{margin-bottom:0}
.page-id-870 main > .section:not(.vrw-services-intro){padding-bottom:12px}

/* === Services page: last bullet on one line + 15px before footer (Oct 5, 2026) ===
   The centred last bullet stays on one line wherever it fits (screens 980px and wider; the line is ~912px).
   On narrower screens it uses the full column width and wraps only as needed.
   Space between the last bullet and the footer: 12px -> 15px. */
.page-id-870 .vrw-bullets-center li{max-width:none}
@media (min-width:980px){.page-id-870 .vrw-bullets-center li{white-space:nowrap}}
.page-id-870 main > .section:not(.vrw-services-intro){padding-bottom:15px}

/* === Services page: space before footer 15px -> 25px at every screen size (Oct 5, 2026) === */
.page-id-870 main > .section:not(.vrw-services-intro){padding-bottom:25px}

/* === About page: Core Competencies styled like the homepage "Trusted By / Organizations Served" section (Oct 5, 2026) ===
   Headers: "Core Competencies" (top) uses the "Trusted By" format (Montserrat 600, half the section-heading size + 1pt);
   "Deep Technical and Domain Expertise" uses the "Organizations Served" format (teal #158d8a, small caps, weight 400, section-heading size - 1.5pt).
   Same spacing: 6.8px between the two headers, 31px to the rectangles, 42px section padding (30px on phones/tablets).
   Rectangles: same as the client boxes - 344px wide, 40px tall, one line, 13.6px text, teal 2pt border, 12px corners,
   grey outer + inner 45deg shadows, 14px gaps, centred last row; full width on phones.
   The section keeps its white background (the next section, "Selected Clients", is black), so the text is black instead of white. */
.vrw-about-competencies{padding-top:42px;padding-bottom:42px}
.vrw-about-competencies .section-head{max-width:none;margin-bottom:31px}
.vrw-about-competencies .section-head .eyebrow-dark{font-family:'Montserrat','Open Sans',sans-serif;font-size:calc(clamp(1.7rem,3.5vw,2.5rem) / 2 + 1.33px);font-weight:600;color:var(--ink);text-transform:none;letter-spacing:normal;line-height:1.2;margin:0 0 6.8px}
.vrw-about-competencies .section-head h2{font-family:'Montserrat',sans-serif;font-size:calc(clamp(1.7rem,3.5vw,2.5rem) - 2px);font-weight:400;color:#158d8a;font-variant:small-caps;letter-spacing:.1em;line-height:1.2;margin:0}
.vrw-about-competencies .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.vrw-about-competencies .chip{box-sizing:border-box;flex:0 0 344px;width:344px;max-width:100%;height:40px;padding:6px 14px;font-size:.85rem;font-weight:600;line-height:1.3;color:#000;background:transparent;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;border:2.67px solid #158d8a;border-radius:12px;box-shadow:6.6px 6.6px 9.33px rgba(128,128,128,.75),inset 6.6px 6.6px 9.33px rgba(128,128,128,.75)}
@media(max-width:860px){.vrw-about-competencies{padding-top:30px;padding-bottom:30px}}
@media(max-width:420px){.vrw-about-competencies .chip{flex-basis:100%;width:100%;font-size:.775rem;padding-left:8px;padding-right:8px}}

/* === About page: Core Competencies on the homepage's black background (Oct 5, 2026) ===
   Black section background exactly like the homepage "Trusted By" section; "Core Competencies" in white (like "Trusted By"),
   rectangle text in the same light grey (#e2e8f0) as the client names. Sub-header now reads "Technical and Domain Expertise".
   The "Selected Clients" section was removed from the About page template (page-about.php). */
.vrw-about-competencies{background:#000;color:#cbd5e1}
.vrw-about-competencies .section-head .eyebrow-dark{color:#fff}
.vrw-about-competencies .chip{color:#e2e8f0;background:transparent}

/* === Homepage "Proven Impact" cards updated from Services 2 (Oct 5, 2026) ===
   "Selected Results" label removed; "Proven Impact" stays as the header.
   Cards increased from 4 to 12 (content in inc/content.php), laid out 3 per row on desktop, 2 on tablets, 1 on phones.
   Every card in the grid has the same height; padding and text are slightly tighter so 12 cards stay compact. */
.vrw-impact .grid.g3{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:22px}
.vrw-impact .card{padding:22px 24px;display:flex;flex-direction:column}
.vrw-impact .card h3{font-size:1.15rem;margin:6px 0 8px}
.vrw-impact .card p{font-size:.92rem;line-height:1.45;margin:0}
@media(max-width:960px){.vrw-impact .grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vrw-impact .grid.g3{grid-template-columns:1fr;grid-auto-rows:auto}}

/* === About page: "Why Organizations Choose Us" updated from Services 2; "Let's Talk About Your Initiative" removed (Oct 5, 2026) ===
   Cards increased from 3 to 9 (content in page-about.php), 3 per row on desktop, 2 on tablets, 1 on phones.
   Every card has the same height, with the same compact padding and text sizes as the homepage "Proven Impact" cards.
   The "Let's Talk About Your Initiative" call-to-action band was removed from the About page template. */
.vrw-why .grid.g3{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:22px}
.vrw-why .card{padding:22px 24px;display:flex;flex-direction:column}
.vrw-why .card h3{font-size:1.15rem;margin:0 0 8px}
.vrw-why .card p{font-size:.92rem;line-height:1.45;margin:0}
@media(max-width:960px){.vrw-why .grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vrw-why .grid.g3{grid-template-columns:1fr;grid-auto-rows:auto}}

/* === Homepage "Proven Impact": 4 cards per row, tighter spacing above, light grey background (Oct 5, 2026) ===
   4 cards per row on desktop (1000px and wider), 2 on tablets, 1 on phones; card text and padding reduced to fit, all cards the same height.
   Space between the hero and "Proven Impact" cut 50%: hero bottom padding 100px -> 50px and section top padding 84px -> 42px
   (phones: 70px -> 35px and 60px -> 30px).
   Section background: the light grey (#E0E0E0) used for the Services page cards; cards stay white with the teal left border. */
.vrw-impact{background:#E0E0E0;padding-top:42px}
.home .hero{padding-bottom:50px}
.vrw-impact .grid.g3{grid-template-columns:repeat(4,1fr);gap:18px}
.vrw-impact .card{padding:18px 18px}
.vrw-impact .card .tag{font-size:.68rem}
.vrw-impact .card h3{font-size:1rem;margin:5px 0 7px}
.vrw-impact .card p{font-size:.84rem;line-height:1.4}
@media(max-width:999px){.vrw-impact .grid.g3{grid-template-columns:repeat(2,1fr)}.vrw-impact .card{padding:22px 24px}.vrw-impact .card h3{font-size:1.15rem}.vrw-impact .card p{font-size:.92rem}}
@media(max-width:860px){.vrw-impact{padding-top:30px}.home .hero{padding-bottom:35px}}
@media(max-width:600px){.vrw-impact .grid.g3{grid-template-columns:1fr}}

/* === Homepage: "Ready to Transform Your Organization?" heading links to the Contact page (Oct 5, 2026) ===
   The heading keeps its original colour and size; it underlines on hover/keyboard focus to show it is clickable. */
.cta h2 a.vrw-cta-link{color:inherit;text-decoration:none;text-underline-offset:6px;text-decoration-thickness:2px}
.cta h2 a.vrw-cta-link:hover,.cta h2 a.vrw-cta-link:focus-visible{color:inherit;text-decoration:underline}

/* === About page: opening content directly under the header, replaces the title band (Oct 5, 2026) === */
.vrw-about-intro{background:linear-gradient(135deg,#000 0%,#0b3d3c 55%,#158d8a 100%);padding:55px 0 50px}
.vrw-about-intro p{color:#d9f6f5;font-size:1.05rem;line-height:1.7;max-width:960px;margin:0}
@media (max-width:600px){.vrw-about-intro{padding:36px 0 32px}.vrw-about-intro p{font-size:1rem}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* === About page: "About VR Williams Consulting LLC" heading above the opening content, styled like the Home hero heading (Oct 5, 2026) === */
.vrw-about-intro h1{font-family:Montserrat,sans-serif;font-size:24.7px;font-variant:small-caps;font-weight:400;line-height:1.25;color:#158d8a;margin:0 0 15px}

/* === About page: "VR Williams Consulting LLC" heading in small caps, teal #158d8a, semi-bold (Oct 5, 2026) === */
.vrw-about-intro h1{font-variant:small-caps;color:#158d8a;font-weight:600}

/* === Homepage "Proven Impact": 6 cards, 3 per row on desktop (2 even rows), 2 on tablets, 1 on phones (Oct 5, 2026) === */
@media(min-width:1000px){.vrw-impact .grid.g3{grid-template-columns:repeat(3,1fr);gap:22px}}

/* === Homepage "Proven Impact": tighter spacing + small-caps card labels (Oct 5, 2026) ===
   - Card labels (e.g. "Transformation Leadership") in small caps, one size larger.
   - Minimal space above/below the "Proven Impact" heading and the section.
   - Rows sized to their content (no extra empty space at the bottom of cards). */
.vrw-impact{padding-top:24px!important;padding-bottom:24px!important}
.vrw-impact .section-head{margin-bottom:14px}
.vrw-impact .section-head h2{margin:0}
.vrw-impact .grid.g3{grid-auto-rows:auto}
.vrw-impact .card{height:auto}
.vrw-impact .card .tag{text-transform:none;font-variant:small-caps;font-size:.85rem;letter-spacing:.04em;margin-bottom:6px}

/* === Homepage "Proven Impact" heading matches "Organizations Served" (Montserrat, regular, small caps, same responsive size and spacing) but stays black (Oct 5, 2026) === */
.home .vrw-impact .section-head h2{font-family:Montserrat,sans-serif;font-size:calc(-2px + clamp(1.7rem,3.5vw,2.5rem));font-weight:400;font-variant:small-caps;text-transform:none;letter-spacing:.1em;line-height:1.2;color:#000;margin:0}

/* === About page: visible heading removed (kept for screen readers/SEO); "VR Williams Consulting LLC" inside the opening paragraph styled like the former heading — Montserrat, 24.7px, small caps, semi-bold, teal #158d8a (Oct 5, 2026) === */
.vrw-about-intro .vrw-brand{font-family:Montserrat,sans-serif;font-size:24.7px;font-variant:small-caps;font-weight:600;color:#158d8a;line-height:1}

/* === Homepage "Proven Impact" cards: teal small-caps label now larger than the black sub-header (Oct 5, 2026) ===
   Desktop: label 20px vs sub-header 16px. Tablet/phone: label 21px vs sub-header ~18px. */
.vrw-impact .card .tag{font-size:1.25rem;line-height:1.2;letter-spacing:.03em}
@media(max-width:999px){.vrw-impact .card .tag{font-size:1.3rem}}

/* === "Ready to Transform Your Organization?" band: heading same size as "Trusted By"; narrow band with minimal spacing (Oct 6, 2026) === */
.cta{padding:8px 0!important}
.cta h2{font-size:calc(1.33px + (0.5 * clamp(1.7rem,3.5vw,2.5rem)))!important;line-height:1.2;margin:0 0 2px!important}
.cta h2 a{font-size:inherit}
.cta p{font-size:.9rem;line-height:1.35;margin:0 auto!important;text-align:center} /* centered under the heading (Oct 6, 2026) */

/* === About page: "Why Organizations Choose Us" changed from cards to a bulleted list (Oct 6, 2026) ===
   3 columns on desktop (3 rows of 3), 2 on tablets, 1 on phones. Teal diamond bullet, bold title, short description below. */
.vrw-why .section-head{margin-bottom:22px}
.vrw-why-list{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 40px;max-width:1100px}
.vrw-why-list li{position:relative;padding-left:22px;margin:0}
.vrw-why-list li::before{content:'';position:absolute;left:2px;top:.45em;width:9px;height:9px;background:#158d8a;transform:rotate(45deg)}
.vrw-why-list strong{display:block;font-family:Montserrat,sans-serif;font-weight:600;font-size:1rem;line-height:1.3;color:var(--ink);margin-bottom:4px}
.vrw-why-list span{display:block;font-size:.9rem;line-height:1.5;color:var(--mute)}
@media(max-width:960px){.vrw-why-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vrw-why-list{grid-template-columns:1fr;gap:16px}}

/* === Contact page: title band and left column removed; single centered form with intro line; grey-filled entry boxes (Oct 6, 2026) === */
.vrw-contact{padding-top:40px;padding-bottom:48px}
.vrw-contact-wrap{max-width:760px!important;margin:0 auto}
.vrw-contact-intro{font-size:1.05rem;line-height:1.6;color:var(--text);margin:0 0 22px}
.vrw-contact-intro strong{font-family:Montserrat,sans-serif;font-weight:600;color:var(--ink)}
.vrw-contact input[type=text],.vrw-contact input[type=email],.vrw-contact input[type=tel],.vrw-contact textarea{background:#eceff1;border:1px solid #d5dadf}
.vrw-contact input:focus,.vrw-contact textarea:focus{background:#e4e8eb;border-color:#158d8a;outline:none}

/* === Homepage hero heading "Your Partner for Business IT Solutions & Program Management Delivery Excellence" semi-bold (Oct 6, 2026) === */
.home .hero .hero-text h1{font-weight:600}

/* === About page: "VR Williams Consulting LLC" in the opening paragraph uses a brighter teal (#3fd6cf) so it stands out on the dark background (Oct 6, 2026) === */
.vrw-about-intro .vrw-brand{color:#3fd6cf}

/* === Homepage: "Your Partner for...", "Proven Impact" and "Organizations Served" all 29px (22px on phones) (Oct 6, 2026) === */
.home .hero .hero-text h1,.home .vrw-impact .section-head h2,.home .clients-section .section-head .eyebrow-dark{font-size:29px!important}
@media(max-width:600px){.home .hero .hero-text h1,.home .vrw-impact .section-head h2,.home .clients-section .section-head .eyebrow-dark{font-size:22px!important}}

/* === About page: "Core Competencies" heading 29px (22px on phones); minimal space above/below (Oct 6, 2026) === */
.vrw-about-competencies{padding-top:24px!important;padding-bottom:24px!important}
.vrw-about-competencies .section-head{margin-bottom:14px!important}
.vrw-about-competencies .section-head h2{font-size:29px!important;margin:0!important;line-height:1.2}
@media(max-width:600px){.vrw-about-competencies .section-head h2{font-size:22px!important}}

/* === Services page: "Partnering for Business IT Solutions Built for Results" 29px (22px on phones) (Oct 6, 2026) === */
.vrw-services-intro .section-head h2{font-size:29px!important}
@media(max-width:600px){.vrw-services-intro .section-head h2{font-size:22px!important}}

/* === Contact page: "Let's Work Together!..." intro at 21.3px, same as "Trusted By" (18px on phones) (Oct 6, 2026) === */
.vrw-contact-intro{font-size:21.33px!important;line-height:1.5}
@media(max-width:600px){.vrw-contact-intro{font-size:18px!important}}

/* === Clients Served: 5 per row on desktop, 3 on tablet (Oct 7, 2026) === */
@media (min-width:1180px){
  .home .clients-section .container{max-width:1340px}
  .home .clients > div{flex:0 0 calc((100% - 56px) / 5); width:calc((100% - 56px) / 5); white-space:normal; height:52px}
}
@media (min-width:861px) and (max-width:1179px){
  .home .clients > div{flex:0 0 calc((100% - 28px) / 3); width:calc((100% - 28px) / 3); white-space:normal; height:52px}
}

/* === About page: NAICS Codes section + UEI/CAGE/SAM line (Oct 7, 2026) === */
.vrw-about-naics{border-top:1px solid #1e293b}
.vrw-about-naics .section-head{margin-bottom:14px}
.vrw-gov-ids{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin:0 0 26px;color:#e2e8f0;font-size:.95rem;font-weight:600;letter-spacing:.04em}
.vrw-gov-ids b{color:#158d8a;font-family:'Montserrat',sans-serif;font-variant:small-caps;letter-spacing:.08em;margin-right:6px}
.vrw-about-competencies .vrw-naics .chip{position:relative;height:auto;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.3;padding:10px 14px;flex:0 0 calc((100% - 42px) / 4);width:calc((100% - 42px) / 4)}
.vrw-naics-code{color:#158d8a;font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.06em;margin-bottom:3px}
.vrw-naics-title{font-size:.85rem;font-weight:600;color:#e2e8f0}
.vrw-naics-tag{position:absolute;top:6px;right:9px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c8c068}
@media (max-width:960px){.vrw-about-competencies .vrw-naics .chip{flex:0 0 calc((100% - 14px) / 2);width:calc((100% - 14px) / 2)}}
@media (max-width:600px){.vrw-about-competencies .vrw-naics .chip{flex:0 0 100%;width:100%}.vrw-gov-ids{gap:6px 20px;font-size:.88rem}}

/* === Footer: Contact row spans the full footer width (Oct 7, 2026) === */
@media (min-width:861px){
  .site-footer .footer-grid > div:last-child{flex:0 0 100%;width:100%}
  .site-footer .footer-grid > div:last-child ul{flex:1 1 auto;justify-content:space-between}
}

/* === Contact page: credential & certification badges beside the form (Oct 7, 2026) === */
.vrw-badges{margin-top:36px}
.vrw-badges h2{font-family:'Montserrat',sans-serif;font-size:21.33px;font-weight:400;color:#158d8a;font-variant:small-caps;letter-spacing:.08em;text-align:center;margin:0 0 6px}
.vrw-badge-group h3{font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#475569;text-align:center;margin:16px 0 10px}
.vrw-badge-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vrw-badge{box-sizing:border-box;background:#000;border:2px solid #158d8a;border-radius:12px;box-shadow:rgba(128,128,128,.6) 4px 4px 8px;padding:10px 8px;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.vrw-badge b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.04em;color:#c8c068;line-height:1.15}
.vrw-badge span{font-size:.72rem;line-height:1.25;color:#e2e8f0;margin-top:4px}
.vrw-badge-wide{grid-column:1 / -1}
@media (min-width:1000px){
  .vrw-contact .vrw-contact-wrap.vrw-has-badges{max-width:1140px !important;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
  .vrw-badges{margin-top:0}
}
@media (min-width:601px) and (max-width:999px){
  .vrw-badge-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vrw-badge-wide{grid-column:auto}
  .vrw-badge-group:last-child .vrw-badge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* === Menu bar moved ABOVE the header banner, with hover dropdowns of page sections for Home, About and Services (Oct 10, 2026) === */
.site-header{display:flex;flex-direction:column}
.site-header .header-inner{order:-1;position:relative;z-index:2;width:100%}
.main-nav .menu>li{position:relative;padding:17px 0}
.main-nav .vrw-has-sections>a::after{content:"";display:inline-block;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle;position:relative;top:-1px}
.main-nav ul.vrw-section-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);flex-direction:column;align-items:stretch;gap:0;min-width:250px;margin:0;padding:8px 0;background:#000;border-top:3px solid #158d8a;border-radius:0 0 10px 10px;box-shadow:0 12px 28px rgba(0,0,0,.45);z-index:60}
.main-nav li:hover>ul.vrw-section-menu,.main-nav li:focus-within>ul.vrw-section-menu{display:flex}
.main-nav ul.vrw-section-menu li{padding:0}
.main-nav ul.vrw-section-menu a{display:block;padding:9px 20px;color:#fff;font-weight:400;font-size:.9rem;white-space:nowrap}
.main-nav ul.vrw-section-menu a:hover,.main-nav ul.vrw-section-menu a:focus{color:#c8c068;background:rgba(255,255,255,.08)}
html{scroll-behavior:smooth}
@media(max-width:860px){.main-nav .menu>li{padding:0}.site-header .main-nav{top:100%;z-index:60}.main-nav ul.vrw-section-menu{display:flex;position:static;transform:none;min-width:0;padding:6px 0 0 14px;background:none;border:0;box-shadow:none;border-radius:0}.main-nav ul.vrw-section-menu a{padding:4px 0;font-size:.88rem;color:#cbd5e1;white-space:normal}.main-nav .vrw-has-sections>a::after{display:none}}

/* === One-line header banner, full width, "VR" near the left edge (Oct 10, 2026) ===
   Image: Media #1000, vrw-header-one-line-scaled.webp (2560x228). The credentials bar was moved to the right of
   "Professional Services" and enlarged 30%. Replaces the Oct 10 "75% narrower banner" rule.
   Menu right edge lines up with the end of the credentials bar (98.72% of the image width).
   Phones (860px and narrower) keep the original two-line banner. !important: Customizer Additional CSS loads after this file. */
@media(min-width:861px){.site-header::before{width:100% !important;align-self:stretch !important;aspect-ratio:2560/228 !important;background:#000 url("https://vrwilliamsconsulting.org/wp-content/uploads/2026/10/vrw-header-one-line-scaled.webp") left center/contain no-repeat !important}.site-header .header-inner{padding-right:1.28% !important}}

/* === Top menu text 30% larger, "Contact" centred above "Six" in the banner's credentials bar (Oct 10, 2026) ===
   Menu links .95rem -> 1.235rem. "Six" is centred at 86.95% of the banner width, so the menu's right padding is
   13.05% minus half the width of "Contact" (about 74px at this size). Desktop only. */
@media(min-width:861px){.main-nav .menu>li>a{font-size:1.235rem}.site-header .header-inner{padding-right:calc(13.05% - 37px) !important}}

/* === Homepage hero text lined up under "Williams" in the banner; paragraph wraps to 8 lines; image beside the paragraph (Oct 10, 2026) ===
   "Williams" starts at 17.34% of the banner width, so the hero's left padding is 17.34%. Text column 715px (8 lines anywhere
   from 690-780px). The image sits 40px to the right of the text, up to 405px wide; it shrinks on narrower screens to fit. Screens 1000px and wider. */
@media(min-width:1000px){.home .hero .hero-grid{max-width:none !important;padding-left:17.34% !important;padding-right:24px !important;grid-template-columns:715px minmax(0,405px) !important;justify-content:start !important;column-gap:40px !important}}

/* === Homepage "Proven Impact": Telecommunications card removed, 8 cards in two rows of 4 (Oct 10, 2026) ===
   Screens 1000px and wider: 4 columns, 20px gaps, card padding 22px. Tablets keep 2-3 columns, phones 1. */
@media(min-width:1000px){.home .vrw-impact .grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:20px !important}.home .vrw-impact .card{padding:22px !important}}
@media(min-width:861px) and (max-width:999px){.home .vrw-impact .grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}

/* === "Partnering for Business IT Solutions Built for Results" section moved from the Services page to the homepage, replacing "Proven Impact" (Oct 10, 2026) ===
   The rules below are copies of the Services page (.page-id-870) rules for this section, re-targeted to .home so it looks the same,
   then the Services page's teal gradient background is applied to the section itself. */
.home main > .section.vrw-services-intro{background: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(11, 61, 60) 55%, rgb(21, 141, 138) 100%); color: rgb(217, 246, 245);}
.home main > .section.vrw-services-intro{padding-top: 21px;}
@media(max-width: 860px){.home main > .section.vrw-services-intro{padding-top: 15px;}}
.home main > .section.vrw-services-intro{background: none; color: inherit; padding: 84px 0px;}
@media(max-width: 860px){.home main > .section.vrw-services-intro{padding: 60px 0px;}}
.home main > .section.vrw-services-intro{background: none;}
.home .vrw-services-intro .section-head h2{color: rgb(255, 255, 255);}
.home .vrw-services-intro .section-head p{color: rgb(217, 246, 245);}
.home .vrw-services-intro .card{background: rgb(232, 236, 239); border-color: rgb(211, 217, 222); color: rgb(30, 41, 59);}
.home .vrw-services-intro .card h3{color: rgb(11, 61, 60);}
.home .vrw-services-intro .card p{color: rgb(51, 65, 85);}
.home .vrw-services-intro .section-head h2{color: rgb(21, 141, 138);}
.home .vrw-services-intro .card{background: rgb(224, 224, 224); box-shadow: rgba(128, 128, 128, 0.75) 6.6px 6.6px 9.33px, rgba(128, 128, 128, 0.75) 6.6px 6.6px 9.33px inset;}
.home .vrw-services-intro .section-head h2{font-family: Montserrat, sans-serif; font-weight: 400; font-variant: small-caps; text-transform: none; color: rgb(21, 141, 138); font-size: calc(0.65 * (-2px + clamp(1.7rem, 3.5vw, 2.5rem))); line-height: 1.25;}
.home main > .section.vrw-services-intro{padding-top: 35px;}
@media(max-width: 860px){.home main > .section.vrw-services-intro{padding-top: 25px;}}
.home .vrw-services-intro .card{border-left: 5px solid rgb(21, 141, 138);}
.home .vrw-services-intro .card{padding: 20px 22px;}
.home .vrw-services-intro .card h3{font-size: 16px; line-height: 1.3; font-variant: small-caps; text-transform: none; letter-spacing: 0.02em; margin: 0px 0px 4px;}
.home .vrw-services-intro .card p{font-size: 16px; line-height: 1.35; margin: 0px;}
.home .vrw-services-intro .section-head h2{font-size: calc(0.8 * (-2px + clamp(1.7rem, 3.5vw, 2.5rem))); font-weight: 700; text-shadow: rgba(0, 0, 0, 0.85) 2px 2px 4px, rgba(29, 181, 185, 0.45) 0px 0px 12px;}
.home .vrw-services-intro .card h3{font-weight: 700; color: rgb(0, 0, 0);}
.home .vrw-services-intro .card p{line-height: 1.2;}
.home .vrw-services-intro .section-head h2{font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: rgb(29, 181, 185);}
@media(min-width: 861px){.home .vrw-services-intro .section-head h2{white-space: nowrap;}}
.home .vrw-services-intro .card h3{font-size: 18px;}
.home .vrw-services-intro .card p{font-size: 14px;}
.home .vrw-services-intro .container{max-width: 1240px;}
.home .vrw-services-intro .grid.g3{grid-template-columns: repeat(auto-fit, min(380px, 100%)); grid-auto-rows: 1fr; justify-content: center;}
.home .vrw-services-intro .card h3{white-space: nowrap;}
@media(max-width: 420px){.home .vrw-services-intro .card h3{white-space: normal;}}
.home .vrw-services-intro .section-head h2{color: rgb(21, 141, 138); font-weight: 600;}
.home .vrw-services-intro .section-head h2{margin-bottom: 0px;}
.home .vrw-services-intro .section-head p{margin-top: 0px;}
.home main > .section.vrw-services-intro{padding-bottom: 26px;}
@media(max-width: 860px){.home main > .section.vrw-services-intro{padding-bottom: 19px;}}
.home main > .section.vrw-services-intro{background:linear-gradient(135deg,#000 0%,#0b3d3c 55%,#158d8a 100%) !important}

/* === Homepage "Partnering for Business IT Solutions Built for Results": heading and intro-line colours swapped (Oct 10, 2026) ===
   Heading now pale aqua #d9f6f5 (was teal #158d8a); intro line now teal #158d8a (was #d9f6f5). Heading keeps its shadow. */
.home .vrw-services-intro .section-head h2{color:#d9f6f5 !important}
.home .vrw-services-intro .section-head p{color:#158d8a !important}

/* === Menu bar pinned to the top while scrolling, with its dropdowns (Oct 10, 2026) ===
   The Home / About / Services / Contact bar is fixed to the top of the window on every page. --vrw-bar-h (set by main.js
   from the bar's real height, about 67px on desktop) reserves its space so nothing shifts. Once the page is scrolled
   (body.vrw-scrolled, set by main.js) the bar gets a slightly see-through black, a soft shadow and a thin teal underline.
   scroll-padding keeps jump-link targets from hiding under the bar. */
.site-header{padding-top:var(--vrw-bar-h,67px)}
.site-header .header-inner{position:fixed !important;top:0;left:0;right:0;z-index:100;background:#000;transition:box-shadow .3s ease,background-color .3s ease}
body.admin-bar .site-header .header-inner{top:32px}
@media(max-width:782px){body.admin-bar .site-header .header-inner{top:46px}}
body.vrw-scrolled .site-header .header-inner{background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 0 #158d8a,0 8px 22px rgba(0,0,0,.45)}
html{scroll-padding-top:calc(var(--vrw-bar-h,67px) + 8px)}
html:has(body.admin-bar){scroll-padding-top:calc(var(--vrw-bar-h,67px) + 40px)}
@media(max-width:860px){.site-header .main-nav.open{max-height:calc(100vh - 120px);overflow-y:auto}}

/* === Homepage "Partnering for Business IT Solutions Built for Results" heading 1pt smaller than the hero headline (Oct 10, 2026) ===
   Hero headline is 29px (22px on phones), so this heading is 29px - 1pt (about 27.7px) and 22px - 1pt (about 20.7px).
   It stays larger than the 16px intro line below it. */
.home .vrw-services-intro .section-head h2{font-size:calc(29px - 1pt) !important}
@media(max-width:600px){.home .vrw-services-intro .section-head h2{font-size:calc(22px - 1pt) !important}}

/* === Homepage service cards: hover pop-up listing the related Services page bullets (Oct 10, 2026) ===
   Markup from front-page.php (.vrw-has-pop card + .vrw-svc-pop); lists come from vrw_service_popups() in functions.php.
   Opens on hover, or on tap/keyboard focus (cards are focusable). Dark panel with teal edge, Services page bullet image. */
.home .vrw-services-intro .card.vrw-has-pop{position:relative;cursor:pointer;outline:none}
.home .vrw-services-intro .card.vrw-has-pop:hover,.home .vrw-services-intro .card.vrw-has-pop:focus-within{z-index:40}
.home .vrw-services-intro .card.vrw-has-pop:focus-visible{box-shadow:0 0 0 3px #1db5b9,6.6px 6.6px 9.33px rgba(128,128,128,.75)}
.home .vrw-services-intro .card.vrw-has-pop::after{content:"";position:absolute;right:12px;bottom:10px;width:8px;height:8px;border-right:2px solid #158d8a;border-bottom:2px solid #158d8a;transform:rotate(45deg);opacity:.8;transition:transform .25s ease}
.home .vrw-services-intro .card.vrw-has-pop:hover::after,.home .vrw-services-intro .card.vrw-has-pop:focus-within::after{transform:rotate(225deg) translate(-3px,-3px)}
.vrw-svc-pop{position:absolute;left:-8px;right:-8px;top:calc(100% - 8px);z-index:41;box-sizing:border-box;padding:14px 18px 8px;text-align:left;
  background:linear-gradient(160deg,rgba(0,0,0,.97) 0%,rgba(11,61,60,.97) 100%);border:1px solid rgba(29,181,185,.55);border-top:3px solid #158d8a;border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 18px rgba(29,181,185,.18);
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.card.vrw-has-pop:hover>.vrw-svc-pop,.card.vrw-has-pop:focus-within>.vrw-svc-pop{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .22s ease .08s,transform .22s ease .08s,visibility 0s linear .08s}
.vrw-svc-pop-title{display:block;margin:0 0 10px;font:700 13px 'Montserrat',sans-serif;font-variant:small-caps;letter-spacing:.06em;color:#1db5b9;text-shadow:0 0 10px rgba(29,181,185,.45)}
.vrw-svc-pop ul{list-style:none;margin:0;padding:0}
.vrw-svc-pop li{position:relative;margin:0 0 9px;padding-left:24px;font:400 13.5px/1.4 'Open Sans',sans-serif;color:#d9f6f5;white-space:normal}
.vrw-svc-pop li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:13px;background:url("https://vrwilliamsconsulting.org/wp-content/uploads/2026/10/vrw-bullet.png") center/contain no-repeat}
@media(prefers-reduced-motion:reduce){.vrw-svc-pop,.card.vrw-has-pop:hover>.vrw-svc-pop{transition:none}}

/* === About page: visible "About the Company" heading + Capabilities Statement button under the opening paragraph (Oct 10, 2026) ===
   Heading uses the site's section-heading style (Montserrat small caps, 29px / 22px phones) in bright teal with a soft glow
   for contrast on the dark gradient, left-aligned with the paragraph. The Capabilities Statement link (moved from the footer)
   is a teal-outlined pill that fills teal on hover; opens the PDF in a new tab. */
.vrw-about-intro .vrw-about-heading{margin:0 0 14px;font-family:'Montserrat',sans-serif;font-size:29px;font-weight:600;font-variant:small-caps;text-transform:none;letter-spacing:.1em;line-height:1.2;color:#1db5b9;text-align:left;text-shadow:2px 2px 4px rgba(0,0,0,.85),0 0 12px rgba(29,181,185,.45)}
@media(max-width:600px){.vrw-about-intro .vrw-about-heading{font-size:22px}}
.vrw-about-intro p.vrw-cap-link{margin:22px 0 0 !important;max-width:none}
.vrw-cap-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 22px;border:2px solid #1db5b9;border-radius:100px;color:#d9f6f5 !important;background:rgba(0,0,0,.25);font:600 .95rem 'Montserrat',sans-serif;letter-spacing:.03em;text-decoration:none !important;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.vrw-cap-btn::before{content:"";width:14px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1 0h8l5 5v11H1z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1 0h8l5 5v11H1z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
.vrw-cap-btn .vrw-cap-pdf{font-weight:400;opacity:.8;font-size:.85em}
.vrw-cap-btn:hover,.vrw-cap-btn:focus-visible{background:#158d8a;color:#fff !important;box-shadow:0 0 16px rgba(29,181,185,.5);outline:none}

/* === About page: "VR Williams Consulting LLC" in the opening paragraph now matches the paragraph text (Oct 10, 2026) ===
   Same font, size and colour as the rest of the paragraph (was larger, bright teal #3fd6cf, small caps). */
.vrw-about-intro .vrw-brand{font:inherit !important;font-size:inherit !important;color:inherit !important;font-variant:normal !important;text-transform:none !important;letter-spacing:inherit !important;text-shadow:none !important}

/* === About page: "Core Competencies" and "NAICS Codes" headings match "About the Company" (Oct 10, 2026) ===
   Bright teal #1db5b9, Montserrat semi-bold, 29px (22px phones), small caps, same soft glow. They stay centred over their sections. */
.vrw-about-competencies .section-head h2,.vrw-about-intro .vrw-about-heading{color:#1db5b9 !important;font-family:'Montserrat',sans-serif !important;font-size:29px !important;font-weight:600 !important;font-variant:small-caps !important;text-transform:none !important;letter-spacing:.1em !important;text-shadow:2px 2px 4px rgba(0,0,0,.85),0 0 12px rgba(29,181,185,.45) !important}
@media(max-width:600px){.vrw-about-competencies .section-head h2,.vrw-about-intro .vrw-about-heading{font-size:22px !important}}

/* === About page: "Leadership Highlights" cards (Oct 11, 2026) ===
   Same look as the homepage service cards: teal gradient band, grey cards with teal left border and grey shadow.
   Heading matches the other About headings (bright teal small caps, 29px / 22px phones). */
.page-id-510 .vrw-about-leadership{background:linear-gradient(135deg,#000 0%,#0b3d3c 55%,#158d8a 100%);padding:34px 0 40px}
.vrw-about-leadership .section-head{max-width:860px;margin:0 auto 26px;text-align:center}
.vrw-about-leadership .section-head h2{color:#1db5b9 !important;font-family:'Montserrat',sans-serif !important;font-size:29px !important;font-weight:600 !important;font-variant:small-caps !important;text-transform:none !important;letter-spacing:.1em !important;text-shadow:2px 2px 4px rgba(0,0,0,.85),0 0 12px rgba(29,181,185,.45) !important;margin:0 0 6px}
.vrw-about-leadership .section-head p{color:#d9f6f5;margin:0;font-size:16px;line-height:1.5}
.vrw-about-leadership .container{max-width:1240px}
.vrw-about-leadership .grid.g3{grid-template-columns:repeat(auto-fit,min(380px,100%));grid-auto-rows:1fr;justify-content:center;gap:26px}
.vrw-about-leadership .card{background:#E0E0E0;border:1px solid #d3d9de;border-left:5px solid #158d8a;padding:20px 22px;box-shadow:6.6px 6.6px 9.33px rgba(128,128,128,.75),inset 6.6px 6.6px 9.33px rgba(128,128,128,.75)}
.vrw-about-leadership .card h3{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;font-variant:small-caps;text-transform:none;letter-spacing:.02em;line-height:1.3;color:#000;margin:0 0 6px}
.vrw-about-leadership .card p{font-size:14px;line-height:1.35;color:#334155;margin:0}
@media(max-width:600px){.vrw-about-leadership .section-head h2{font-size:22px !important}.vrw-about-leadership{padding:26px 0 30px}}

/* === About page: "Partnering for Business IT Solutions Built for Results" service cards (Oct 11, 2026) ===
   Copies of the homepage rules for this section (.home → .page-id-510), so header, intro line, cards and pop-ups match the homepage exactly.
   Plus: the 5 Providence cards carry a small teal tag, and the grid centres a short last row. */
.page-id-510 main > .section.vrw-services-intro{background: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(11, 61, 60) 55%, rgb(21, 141, 138) 100%); color: rgb(217, 246, 245);}
.page-id-510 main > .section.vrw-services-intro{padding-top: 21px;}
@media (max-width: 860px){.page-id-510 main > .section.vrw-services-intro{padding-top: 15px;}}
.page-id-510 main > .section.vrw-services-intro{background: none; color: inherit; padding: 84px 0px;}
@media (max-width: 860px){.page-id-510 main > .section.vrw-services-intro{padding: 60px 0px;}}
.page-id-510 main > .section.vrw-services-intro{background: none;}
.page-id-510 .vrw-services-intro .section-head h2{color: rgb(255, 255, 255);}
.page-id-510 .vrw-services-intro .section-head p{color: rgb(217, 246, 245);}
.page-id-510 .vrw-services-intro .card{background: rgb(232, 236, 239); border-color: rgb(211, 217, 222); color: rgb(30, 41, 59);}
.page-id-510 .vrw-services-intro .card h3{color: rgb(11, 61, 60);}
.page-id-510 .vrw-services-intro .card p{color: rgb(51, 65, 85);}
.page-id-510 .vrw-services-intro .section-head h2{color: rgb(21, 141, 138);}
.page-id-510 .vrw-services-intro .card{background: rgb(224, 224, 224); box-shadow: rgba(128, 128, 128, 0.75) 6.6px 6.6px 9.33px, rgba(128, 128, 128, 0.75) 6.6px 6.6px 9.33px inset;}
.page-id-510 .vrw-services-intro .section-head h2{font-family: Montserrat, sans-serif; font-weight: 400; font-variant: small-caps; text-transform: none; color: rgb(21, 141, 138); font-size: calc(0.65 * (-2px + clamp(1.7rem, 3.5vw, 2.5rem))); line-height: 1.25;}
.page-id-510 main > .section.vrw-services-intro{padding-top: 35px;}
@media (max-width: 860px){.page-id-510 main > .section.vrw-services-intro{padding-top: 25px;}}
.page-id-510 .vrw-services-intro .card{border-left: 5px solid rgb(21, 141, 138);}
.page-id-510 .vrw-services-intro .card{padding: 20px 22px;}
.page-id-510 .vrw-services-intro .card h3{font-size: 16px; line-height: 1.3; font-variant: small-caps; text-transform: none; letter-spacing: 0.02em; margin: 0px 0px 4px;}
.page-id-510 .vrw-services-intro .card p{font-size: 16px; line-height: 1.35; margin: 0px;}
.page-id-510 .vrw-services-intro .section-head h2{font-size: calc(0.8 * (-2px + clamp(1.7rem, 3.5vw, 2.5rem))); font-weight: 700; text-shadow: rgba(0, 0, 0, 0.85) 2px 2px 4px, rgba(29, 181, 185, 0.45) 0px 0px 12px;}
.page-id-510 .vrw-services-intro .card h3{font-weight: 700; color: rgb(0, 0, 0);}
.page-id-510 .vrw-services-intro .card p{line-height: 1.2;}
.page-id-510 .vrw-services-intro .section-head h2{font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: rgb(29, 181, 185);}
@media (min-width: 861px){.page-id-510 .vrw-services-intro .section-head h2{white-space: nowrap;}}
.page-id-510 .vrw-services-intro .card h3{font-size: 18px;}
.page-id-510 .vrw-services-intro .card p{font-size: 14px;}
.page-id-510 .vrw-services-intro .container{max-width: 1240px;}
.page-id-510 .vrw-services-intro .grid.g3{grid-template-columns: repeat(auto-fit, min(380px, 100%)); grid-auto-rows: 1fr; justify-content: center;}
.page-id-510 .vrw-services-intro .card h3{white-space: nowrap;}
@media (max-width: 420px){.page-id-510 .vrw-services-intro .card h3{white-space: normal;}}
.page-id-510 .vrw-services-intro .section-head h2{color: rgb(21, 141, 138); font-weight: 600;}
.page-id-510 .vrw-services-intro .section-head h2{margin-bottom: 0px;}
.page-id-510 .vrw-services-intro .section-head p{margin-top: 0px;}
.page-id-510 main > .section.vrw-services-intro{padding-bottom: 26px;}
@media (max-width: 860px){.page-id-510 main > .section.vrw-services-intro{padding-bottom: 19px;}}
.page-id-510 main > .section.vrw-services-intro{background: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(11, 61, 60) 55%, rgb(21, 141, 138) 100%) !important;}
.page-id-510 .vrw-services-intro .section-head h2{color: rgb(217, 246, 245) !important;}
.page-id-510 .vrw-services-intro .section-head p{color: rgb(21, 141, 138) !important;}
.page-id-510 .vrw-services-intro .section-head h2{font-size: calc(27.6667px) !important;}
@media (max-width: 600px){.page-id-510 .vrw-services-intro .section-head h2{font-size: calc(20.6667px) !important;}}
.page-id-510 .vrw-services-intro .card.vrw-has-pop{position: relative; cursor: pointer; outline: none;}
.page-id-510 .vrw-services-intro .card.vrw-has-pop:hover, .page-id-510 .vrw-services-intro .card.vrw-has-pop:focus-within{z-index: 40;}
.page-id-510 .vrw-services-intro .card.vrw-has-pop:focus-visible{box-shadow: rgb(29, 181, 185) 0px 0px 0px 3px, rgba(128, 128, 128, 0.75) 6.6px 6.6px 9.33px;}
.page-id-510 .vrw-services-intro .card.vrw-has-pop::after{content: ""; position: absolute; right: 12px; bottom: 10px; width: 8px; height: 8px; border-right: 2px solid rgb(21, 141, 138); border-bottom: 2px solid rgb(21, 141, 138); transform: rotate(45deg); opacity: 0.8; transition: transform 0.25s;}
.page-id-510 .vrw-services-intro .card.vrw-has-pop:hover::after, .page-id-510 .vrw-services-intro .card.vrw-has-pop:focus-within::after{transform: rotate(225deg) translate(-3px, -3px);}
.page-id-510 main > .section.vrw-services-intro{background:linear-gradient(135deg,#000 0%,#0b3d3c 55%,#158d8a 100%) !important}
.page-id-510 .vrw-about-services .grid.g3{display:flex !important;flex-wrap:wrap;justify-content:center;gap:26px}
.page-id-510 .vrw-about-services .grid.g3 > .card{flex:0 0 380px;max-width:100%}
.vrw-lead-tag{display:block;margin:0 0 4px;font:700 11px 'Montserrat',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#158d8a}
.page-id-510 .vrw-about-services .card.vrw-lead-card h3{white-space:normal}

/* About page "Partnering for Business IT Solutions" cards (Oct 11, 2026): always 3 per row (9 cards = 3 rows) on screens 900px and wider.
   The fixed 380px cards wrapped to 2 per row on screens narrower than about 1240px; columns now shrink to fit (max 380px each). */
@media (min-width:900px){
	.page-id-510 .vrw-about-services .grid.g3{display:grid !important;grid-template-columns:repeat(3,minmax(0,380px)) !important;justify-content:center !important;gap:26px !important}
	.page-id-510 .vrw-about-services .grid.g3 > .card{width:auto !important;max-width:none !important;flex:none !important;min-width:0 !important}
}
/* ...and when those columns are narrower than 380px, let long card titles wrap to a second line instead of running past the card edge. */
@media (max-width:1239px){
	.page-id-510 .vrw-about-services .card h3{white-space:normal !important}
}

/* Homepage "Partnering for Business IT Solutions" cards (Oct 11, 2026): now 9 cards (6 services + 3 recent-leadership cards), always 3 per row on
   screens 900px and wider, same as the About page. Columns up to 380px, shrinking to fit; long titles wrap below 1240px. */
@media (min-width:900px){
	.home .vrw-services-intro .grid.g3{display:grid !important;grid-template-columns:repeat(3,minmax(0,380px)) !important;justify-content:center !important;gap:26px !important}
	.home .vrw-services-intro .grid.g3 > .card{width:auto !important;max-width:none !important;flex:none !important;min-width:0 !important}
}
@media (max-width:1239px){
	.home .vrw-services-intro .card h3{white-space:normal !important}
}
.home .vrw-services-intro .card.vrw-lead-card h3{white-space:normal}

/* Service cards on Home and About (Oct 11, 2026): each row is only as tall as its tallest card (rows were all forced to the height of the
   tallest card in the whole section by grid-auto-rows:1fr). Cards in a row still line up at the same height. */
.home .vrw-services-intro .grid.g3,
.page-id-510 .vrw-about-services .grid.g3{grid-auto-rows:auto !important;align-items:stretch !important}

/* Service card titles on Home and About (Oct 11, 2026): tighter spacing between the two lines of a wrapped title
   (e.g. "Regulatory Compliance / & Patient Protections"). Line height 1.3 -> 1.12. */
.home .vrw-services-intro .card h3,
.page-id-510 .vrw-about-services .card h3{line-height:1.12 !important}