/* ============================================================ BOTA — GLOBAL TYPOGRAPHY SYSTEM (single source of truth) Loaded LAST in every so it governs the cascade and and normalises the per-page styles that drifted out of spec. System ------- H1 Playfair Display 700 · 72/56/42 · lh 1.1 H2 Playfair Display 700 · 48/40/32 · lh 1.2 H3 Playfair Display 600 · 30/26/22 · lh 1.3 Body DM Sans 400 · 18/16 · lh 1.7 Buttons DM Sans 600 · 16 · ls 0.5px · uppercase Breakpoints: tablet ≤1024px · mobile ≤600px ============================================================ */ :root{ /* families */ --ff-serif:'Playfair Display',Georgia,serif; --ff-sans:'DM Sans',system-ui,sans-serif; /* weights — reverted to the original light Playfair (no bold headings) */ --fw-h1:400; --fw-h2:400; --fw-h3:400; --fw-body:400; --fw-btn:600; /* sizes — desktop defaults (overridden per breakpoint below) */ --fs-h1:72px; --fs-h2:48px; --fs-h3:30px; --fs-body:18px; --fs-btn:16px; /* line-heights */ --lh-h1:1.1; --lh-h2:1.2; --lh-h3:1.3; --lh-body:1.7; /* letter-spacing */ --ls-h1:-.02em; --ls-h2:-.015em; --ls-h3:-.01em; --ls-btn:.5px; /* standardised body colour (light contexts) */ --color-body:var(--ink-soft,#232323); /* H2 tiers (audit: tokenize the 3 ad-hoc clamps into 2 named tiers) */ --fs-h2-display:clamp(48px,6vw,82px); /* closing bands / big moments */ --fs-h2-section:clamp(30px,3.6vw,48px); /* every standard section head */ /* oxblood tint scale (audit: replace scattered rgba literals) */ --ox-tint-1:rgba(158,22,34,.06); --ox-tint-2:rgba(158,22,34,.10); --ox-tint-3:rgba(158,22,34,.16); /* one section-head measure */ --measure-head:720px; } @media (max-width:1024px){ :root{ --fs-h1:56px; --fs-h2:40px; --fs-h3:26px; } } @media (max-width:600px){ :root{ --fs-h1:42px; --fs-h2:32px; --fs-h3:22px; --fs-body:16px; } } /* ---------- HERO TITLE / H1 ---------- Applies to every

(.phero h1, .page-hero h1, .hero h1, …) so all hero titles are visually identical site-wide. */ h1, .t-h1{ font-family:var(--ff-serif) !important; font-weight:var(--fw-h1) !important; font-size:var(--fs-h1) !important; line-height:var(--lh-h1) !important; letter-spacing:var(--ls-h1) !important; } /* ---------- SECTION TITLES / H2 ---------- Includes the closing-CTA titles which use

. */ h2, .t-h2{ font-family:var(--ff-serif) !important; font-weight:var(--fw-h2) !important; font-size:var(--fs-h2) !important; line-height:var(--lh-h2) !important; letter-spacing:var(--ls-h2) !important; } /* ---------- SUBTITLES / H3 ---------- */ h3, .t-h3{ font-family:var(--ff-serif) !important; font-weight:var(--fw-h3) !important; font-size:var(--fs-h3) !important; line-height:var(--lh-h3) !important; letter-spacing:var(--ls-h3) !important; } /* Preserve the deliberate oxblood italic accent words inside titles. (font already inherits 700/600 from the heading; only colour + italic kept.) */ h1 em,h2 em,h3 em, .t-h1 em,.t-h2 em,.t-h3 em{ font-style:italic; } /* ---------- BODY ---------- body sets the standard default; bare paragraphs inherit it. More-specific component rules (small captions, footer fine print, dark-section colours) intentionally remain. */ body{ font-family:var(--ff-sans); font-weight:var(--fw-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--charcoal); } p, .t-body{ font-family:var(--ff-sans); font-size:var(--fs-body); line-height:var(--lh-body); } /* ---------- BUTTONS ---------- One button type-treatment across the whole site. !important + last-in-cascade overrides the per-page bota-btn-caps patch. */ .btn, .btn-rts-primary, .btn-rts-ghost, .news-btn, .ftr-news button, .ct-form button, .ct-submit, button.ct-submit, .apl-submit, .hbm-btn, .hbm-btn-g, .hbm-cta-form button, form button[type="submit"], .t-btn{ font-family:var(--ff-sans) !important; font-weight:var(--fw-btn) !important; font-size:var(--fs-btn) !important; letter-spacing:var(--ls-btn) !important; text-transform:uppercase !important; } /* ============================================================ MAIN NAV — keep the primary nav on a single row (top-level grew to 9 items after folding pages into sections) ============================================================ */ .nav-inner{flex-wrap:nowrap;gap:18px} .nav-links{flex-wrap:nowrap !important;gap:14px !important} .nav-links>li{white-space:nowrap} .nav-links>li>a:not(.nav-cta):not(.nav-cta2){ font-size:13.5px !important; letter-spacing:.005em !important; } /* compact the two CTAs so the row fits */ .nav .nav-cta{ font-size:13px !important; letter-spacing:.04em !important; padding:9px 16px !important; white-space:nowrap; } .nav-links .nav-cta2{ font-size:11px !important; padding:7px 11px !important; } @media(max-width:1180px){ .nav-links{gap:11px !important} .nav-links>li>a:not(.nav-cta):not(.nav-cta2){font-size:13px !important} .nav .nav-cta{padding:9px 13px !important} } /* below this width the full row can't fit cleanly — collapse to the hamburger */ @media(max-width:1080px){ .nav-links{display:none !important} .nav-toggle{display:flex !important} } /* ============================================================ BREADCRUMBS — second-level pages (light heroes) ============================================================ */ .crumb{font-family:var(--ff-sans);font-size:13px;font-weight:500;color:var(--ink-faint,#8a8178);display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:22px} .crumb a{color:var(--ink-soft,#5a5249);text-decoration:none;transition:color .2s ease} .crumb a:hover{color:var(--oxblood)} .crumb .sep{color:var(--gold)} /* ============================================================ COOLER STONE — recolour the warm cream to a neutral putty. Only the flat background fills + borders change; every decorative orb / glow / grid (the 3D depth) is preserved. ============================================================ */ :root{ --cream:#F4F1EC !important; /* was #F7F2EA — drops the yellow cast */ --cream-dark:#E7E2D9 !important; /* was #E9E0D2 — cooler border */ --cream-accent:#F4F1EC !important; /* was #F7F2EA */ } /* cool the cream-based hero / CTA gradients so they match the new stone (orbs + grids sit on top of these and are untouched). NOTE: deliberately excludes the dark/oxblood closers (.page-hero, .pos-close, .ind-close) which are meant to be rich. */ .phero, .rts,.vrts, .ct-hero,.flo-hero,.blf-hero{ background-image:linear-gradient(176deg,#F8F5EF 0%,var(--cream) 52%,#E8E2D8 100%) !important; } /* ============================================================ PREMIUM REFINEMENT LAYER Site-wide button / card / hero / motion polish. Loaded last → overrides scattered per-page styling. ============================================================ */ /* ---- BUTTONS: smaller, lighter, softer (≈15% more compact) ---- */ .btn{ padding:12px 26px !important; font-size:13px !important; font-weight:600 !important; letter-spacing:.04em !important; border-radius:999px !important; transition:transform .25s var(--ease),box-shadow .3s var(--ease), background-size .42s var(--ease),color .25s var(--ease), border-color .25s var(--ease) !important; } .btn::after{display:none !important;} /* drop the glare sweep — calmer */ /* primary (solid burgundy) — softer shadow */ .btn-gold{ box-shadow:0 6px 18px -10px rgba(158,22,34,.42) !important; } .phero .btn-gold,.hero .btn-gold,.final .btn-gold,.pp-final .btn-gold{ box-shadow:0 6px 18px -10px rgba(158,22,34,.42) !important; } /* secondary (ghost / outline) — thin, light border, no heavy fill */ .btn-ghost{ border-width:1px !important; border-color:rgba(35,35,35,.16) !important; } /* unified, gentle hover lift everywhere */ .btn:hover{ transform:translateY(-2px) !important; } .btn-gold:hover{ box-shadow:0 12px 26px -10px rgba(158,22,34,.5) !important; } .btn-ghost:hover{ border-color:rgba(158,22,34,.4) !important; } /* nav CTA stays compact + on-brand */ .nav .nav-cta{ box-shadow:none !important; } .nav .nav-cta:hover{ transform:translateY(-2px) !important; box-shadow:0 8px 20px -8px rgba(158,22,34,.4) !important; } /* ---- CARDS: layered "luxury" shadow, 1px border, subtle lift ---- */ .pp-svc,.eng-card,.mvv-card,.abt-tz-card,.abrand,.ix2-row,.pc2-card, .why-card,.why4-card,.ind-card,.indp-card,.mission-card,.prob-card, .hb-do,.brand-card,.ab-board,.flo-meta-block,.blf-card,.faq-item{ box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.06) !important; border:1px solid var(--cream-dark) !important; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease) !important; } .pp-svc:hover,.eng-card:hover,.mvv-card:hover,.abt-tz-card:hover,.abrand:hover, .ix2-row:hover,.pc2-card:hover,.why-card:hover,.why4-card:hover,.ind-card:hover, .indp-card:hover,.mission-card:hover,.prob-card:hover,.hb-do:hover,.brand-card:hover, .ab-board:hover,.flo-meta-block:hover,.blf-card:hover{ transform:translateY(-4px) !important; box-shadow:0 2px 6px rgba(0,0,0,.04),0 18px 44px rgba(0,0,0,.09) !important; border-color:rgba(158,22,34,.16) !important; } /* ---- HERO ILLUSTRATION: ~12% smaller + more breathing room (home) ---- */ @media(min-width:981px){ .pa-stage{ transform:scale(.88); transform-origin:center; } .phero-art{ padding-left:18px; } } /* soften the floating cards so they support, not shout */ .pa-card{ box-shadow:0 1px 2px rgba(40,20,12,.04),0 14px 34px -18px rgba(40,20,12,.22) !important; } /* ---- TYPOGRAPHY: readable measure on lead/intro prose ---- */ .phero-sub,.lead{ max-width:60ch; } /* ---- MOTION: respect reduced-motion ---- */ @media(prefers-reduced-motion:reduce){ .btn,.btn:hover,.pa-stage, .pp-svc,.eng-card,.mvv-card,.ix2-row,.pc2-card{ transition:none !important; transform:none !important; } } /* ============================================================ HERO GRAPHIC HARMONIZATION Bring the inner-page hero cards (What We Do · Careers · Industries) into the homepage's editorial card look: flat (no 3D tilt), soft layered shadow, sage status pills, white stat badge, gentle vertical float, calmer grid/orbs. CSS-only — no markup or text changed. ============================================================ */ @keyframes nhFloatCenter{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 10px))}} @keyframes nhFloatFlat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* panels: flatten + soft shadow + 18px radius */ .wds2-main{ transform:translate(-50%,-50%) !important; animation:nhFloatCenter 8s ease-in-out infinite !important; } .car2-panel,.indp2-panel{ transform:none !important; animation:nhFloatFlat 8s ease-in-out infinite !important; } .wds2-main,.car2-panel,.indp2-panel{ border-radius:18px !important; border:1px solid var(--cream-dark) !important; box-shadow:0 1px 2px rgba(40,20,12,.03),0 30px 60px -34px rgba(40,20,12,.26),0 12px 28px -22px rgba(40,20,12,.14) !important; } /* status pills → quiet sage "placed/covered", muted-gold "open/onboarding" */ .wds2-tag,.car2-tag.t-ok,.indp2-status{ color:#4a6b51 !important; background:#E6EDE4 !important; border:1px solid rgba(74,107,81,.18) !important; border-radius:100px !important; padding:4px 11px !important; } .wds2-tag.on,.car2-tag.t-open{ color:#8a6a22 !important; background:#FBF7EE !important; border:1px solid rgba(183,138,46,.28) !important; border-radius:100px !important; padding:4px 11px !important; } /* the inline "Covered" dot inside indp2-status → sage, no green glow */ .indp2-status i{ background:#4a6b51 !important; box-shadow:none !important; } /* header status chips (green "live/hiring" dots) → muted gold, calmer */ .wds2-live,.car2-badge2{ color:var(--ink-faint,#8a8178) !important; } .wds2-live i,.car2-badge2 i{ background:var(--gold) !important; box-shadow:none !important; } /* stat badges: oxblood-filled → white card w/ oxblood number (matches home) */ .car2-float,.indp2-float{ background:#fff !important; border:1px solid var(--cream-dark) !important; box-shadow:0 1px 2px rgba(40,20,12,.04),0 18px 40px -22px rgba(40,20,12,.2) !important; } .car2-fn,.indp2-fn{ color:var(--oxblood) !important; } .car2-fc,.indp2-fc{ color:var(--ink-faint,#8a8178) !important; opacity:1 !important; } /* the home-style white save badge already light — just soften its shadow */ .wds2-float{ box-shadow:0 1px 2px rgba(40,20,12,.04),0 18px 40px -22px rgba(40,20,12,.2) !important; } .wds2-float.fmanaged .wds2-fic{ background:rgba(158,22,34,.07) !important; } /* calmer ambient depth: lighten grids + orbs (depth kept, noise reduced) */ .wds2-grid,.car2-grid,.indp2-grid,.abt2-grid{ opacity:.5 !important; } .wds2-orb,.car2-orb,.indp2-orb,.abt2-orb{ opacity:.55 !important; } /* About hero: flatten the two tilted flag cards + soften shadow to match */ .abt2-card{ box-shadow:0 1px 2px rgba(40,20,12,.03),0 18px 44px -24px rgba(40,20,12,.2) !important; border:1px solid var(--cream-dark) !important; } .abt2-card.us{ transform:rotate(-.4deg) !important; } .abt2-card.al{ transform:rotate(.4deg) !important; } @media(prefers-reduced-motion:reduce){ .wds2-main,.car2-panel,.indp2-panel{ animation:none !important; } } /* ---- HireBota product panel → same flat, soft, calm treatment ---- */ .hbm-panel{ transform:none !important; animation:nhFloatFlat 8s ease-in-out infinite !important; border-radius:18px !important; border:1px solid var(--cream-dark) !important; box-shadow:0 1px 2px rgba(40,20,12,.03),0 30px 60px -34px rgba(40,20,12,.26),0 12px 28px -22px rgba(40,20,12,.14) !important; } /* circular oxblood score badge → white card w/ oxblood number (matches home) */ .hbm-badge{ background:#fff !important; color:var(--charcoal) !important; border:1px solid var(--cream-dark) !important; box-shadow:0 1px 2px rgba(40,20,12,.04),0 18px 40px -22px rgba(40,20,12,.2) !important; } .hbm-badge .n{ color:var(--oxblood) !important; } .hbm-badge .l{ color:var(--ink-faint,#8a8178) !important; opacity:1 !important; } .hbm-stage .so1,.hbm-stage .so2{ opacity:.55 !important; } @media(prefers-reduced-motion:reduce){ .hbm-panel{ animation:none !important; } } /* ---- How It Works step-node pills → softer shadow + rounder ---- */ .hiw-node{ border-radius:14px !important; border:1px solid var(--cream-dark) !important; box-shadow:0 1px 2px rgba(40,20,12,.04),0 16px 36px -20px rgba(40,20,12,.22) !important; } /* ---- Founder portrait → lighten the heavy drop shadow ---- */ .flo-portrait img,.flo-port-img,.flo-port-img img{ box-shadow:0 1px 2px rgba(40,20,12,.04),0 30px 60px -34px rgba(40,20,12,.28) !important; } .flo-port-card{ box-shadow:0 1px 2px rgba(40,20,12,.04),0 18px 40px -22px rgba(40,20,12,.22) !important; } /* ============================================================ PREMIUM V2 — Lexica-inspired editorial polish (global) Whitespace, rhythm, image treatment, reveals, footer. Visual only — no content, copy, or sections changed. Desktop spacing is scoped to min-width so mobile rhythm (set by the pages) is preserved. ============================================================ */ /* --- generous section rhythm + roomier gutters on larger screens --- */ @media(min-width:981px){ .pad{ padding:104px 0; } .pad-lg{ padding:132px 0; } .container{ padding-left:40px; padding-right:40px; } } @media(min-width:1440px){ .pad{ padding:116px 0; } .pad-lg{ padding:144px 0; } } /* --- heading polish: tighter optical tracking + pretty wrapping --- */ h1,.t-h1{ text-wrap:balance; } h2,.t-h2,h3,.t-h3{ text-wrap:balance; } .lead,.phero-sub,.pp-head .lead{ text-wrap:pretty; } /* --- editorial imagery: consistent radius + restrained hover zoom --- */ .pp-gallery figure,.pp-why-media,.pp-founder-media,.eband-fig, .res-media,.about-media,figure.media,.ind-media{ overflow:hidden; border-radius:18px; } .pp-gallery figure img,.pp-why-media img,.pp-founder-media img, .eband-fig img,.res-media img,figure.media img{ transition:transform 1.1s cubic-bezier(.16,.84,.34,1) !important; will-change:transform; } .pp-gallery figure:hover img,.pp-why-media:hover img,.pp-founder-media:hover img, .eband-fig:hover img,.res-media:hover img,figure.media:hover img{ transform:scale(1.045) !important; } /* --- reveals: a touch longer + more refined easing for a calm cascade --- */ .reveal{ transition:opacity 1s cubic-bezier(.16,.84,.34,1), transform 1s cubic-bezier(.16,.84,.34,1), filter 1s cubic-bezier(.16,.84,.34,1) !important; } /* ============================================================ FOOTER COMPRESSION — ~30% shorter, identical content. Premium consulting / advisory density: tighter vertical rhythm, more horizontal negative space, softer concentrated glow. Replaces the earlier luxury-spacing footer block. ============================================================ */ /* subtle divider line above footer + reduced top/bottom padding */ .ftr{ border-top:1px solid rgba(255,255,255,.08) !important; padding-top:64px !important; padding-bottom:32px !important; } /* logo & intro — 50% less under the logo, 40% tighter to columns */ .ftr-lead{ padding:0 0 16px !important; gap:28px !important; } .ftr-lead .fl-word{ margin-bottom:9px !important; } /* navigation columns — same baseline, tighter heading/link rhythm */ .ftr-cols{ padding:18px 0 !important; gap:clamp(48px,5vw,64px) !important; align-items:start !important; } .ftr-col h4{ margin-bottom:12px !important; } /* 24 → 12 */ .ftr-col a{ padding:5px 0 !important; } /* ~18 → ~10–12 */ /* newsletter — slightly narrower, tighter stack, 48px button */ .ftr-news .ftr-newslead{ margin:-2px 0 10px !important; max-width:86% !important; } .ftr-news input{ margin-bottom:10px !important; } .ftr-news button,.ftr-form button{ height:48px !important; padding:0 20px !important; } /* social icons — 40×40, keep subtle border */ .ftr-social{ margin-bottom:0 !important; } .ftr-social a{ width:40px !important; height:40px !important; } /* bottom information — tighter stack, ≤20px between blocks */ .ftr-div{ margin:0 !important; } .ftr-trust{ padding:13px 0 !important; gap:20px !important; } .ftr-bottom{ padding-top:13px !important; } /* lighting — ~25% softer, concentrated behind logo + newsletter, less spread */ .ftr-bg .fg-glow.a{ opacity:.75 !important; } .ftr-bg .fg-glow.b{ opacity:.55 !important; } .ftr-light{ opacity:.8 !important; } .ftr-col a{ transition:color .25s var(--ease),opacity .25s var(--ease); } .ftr-col a:hover{ color:var(--cream); opacity:1; } @media(max-width:1024px){ .ftr{ padding-top:56px !important; padding-bottom:28px !important; } } @media(max-width:600px){ .ftr{ padding-top:48px !important; padding-bottom:24px !important; } .ftr-news .ftr-newslead{ max-width:100% !important; } } @media(prefers-reduced-motion:reduce){ .pp-gallery figure img,.pp-why-media img,.pp-founder-media img, .eband-fig img,.res-media img,figure.media img{ transition:none !important; transform:none !important; } } /* ============================================================ PREMIUM ATMOSPHERE — lighting, glow & tangibility (global) Additive only: hover glows + glassy card highlights. No content, layout, or section structure changed. ============================================================ */ /* buttons — hover lift carries a soft champagne/burgundy halo */ .btn-gold:hover{ box-shadow:0 12px 30px -12px rgba(158,22,34,.55),0 0 38px -10px rgba(183,138,46,.42) !important; } .btn-ghost:hover{ box-shadow:0 10px 24px -14px rgba(40,20,12,.28) !important; } .nav .nav-cta:hover{ box-shadow:0 10px 24px -10px rgba(158,22,34,.5),0 0 26px -8px rgba(183,138,46,.4) !important; } /* cards — glassy inset top-highlight for tangible depth (keeps layered shadow) */ .pp-svc,.eng-card,.mvv-card,.abt-tz-card,.abrand,.ix2-row,.pc2-card, .why-card,.why4-card,.ind-card,.indp-card,.mission-card,.prob-card, .hb-do,.brand-card,.ab-board,.blf-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(40,20,12,.03), 0 10px 26px -14px rgba(40,20,12,.12), 0 32px 62px -40px rgba(40,20,12,.2) !important; } /* icon tiles — lit glass: metallic rim, inner highlight, soft ambient glow. Background left intact so existing hover-to-solid states still work. */ .pp-svc-ico,.eng-ic,.hb-ico,.hbm-ic,.wd2-chal-ic,.hiw2-gic,.hiwg-ic, .how-ico,.mission-ico,.blf-card-ic,.pc2-ic,.pos-ic,.ix2-ic,.mvv-ico,.value-ico{ border:1px solid rgba(255,255,255,.6) !important; box-shadow:inset 0 1px 1px rgba(255,255,255,.75), inset 0 -6px 12px rgba(158,22,34,.06), 0 8px 20px -10px rgba(158,22,34,.22) !important; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); } .value-ico{ box-shadow:inset 0 1px 1px rgba(255,255,255,.75), inset 0 -6px 12px rgba(183,138,46,.1), 0 8px 20px -10px rgba(183,138,46,.26) !important; } /* ============================================================ BUTTONS — editorial refinement (Strevora-inspired · global) Pill geometry, refined tracking, smooth hover lift applied to every content CTA across all pages. Brand colors unchanged. Nav + footer/newsletter buttons intentionally left as-is. ============================================================ */ .btn-gold,.btn-ghost,.hbm-btn,.hbm-btn-g,.btn-rts-primary,.btn-rts-ghost{ border-radius:7px !important; font-weight:600 !important; letter-spacing:.08em !important; text-transform:uppercase !important; transition:transform .3s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .3s var(--ease),border-color .3s var(--ease) !important; } /* primary — solid oxblood, refined depth + warm hover halo */ .btn-gold,.hbm-btn,.btn-rts-primary{ box-shadow:0 10px 24px -12px rgba(158,22,34,.42) !important; } .btn-gold:hover,.hbm-btn:hover,.btn-rts-primary:hover{ transform:translateY(-2px) !important; box-shadow:0 16px 34px -12px rgba(158,22,34,.55),0 0 30px -12px rgba(183,138,46,.42) !important; } /* secondary — thin refined outline, fills faintly on hover */ .btn-ghost,.hbm-btn-g,.btn-rts-ghost{ border-width:1px !important; box-shadow:none !important; } .btn-ghost,.hbm-btn-g,.btn-rts-ghost{ position:relative !important; } .btn-ghost::after,.hbm-btn-g::after,.btn-rts-ghost::after{ content:"";position:absolute;left:16px;right:16px;bottom:9px;height:1.5px; background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform .35s var(--ease);z-index:2;pointer-events:none; } .btn-ghost:hover,.hbm-btn-g:hover,.btn-rts-ghost:hover{ color:var(--oxblood) !important; border-color:rgba(35,35,35,.2) !important; background:transparent !important; } .btn-ghost:hover::after,.hbm-btn-g:hover::after,.btn-rts-ghost:hover::after{ transform:scaleX(1) !important; } /* remove the charcoal hover-fill on the hero primary (the "turns black" bug) — replace with a clean editorial lift. Higher specificity to beat .phero .btn-gold in bota-premium.css. */ .phero .btn-gold,.btn-gold,.hbm-btn{ background-image:none !important; } .phero .btn-gold:hover{ transform:translateY(-2px) !important; background:var(--oxblood) !important;color:var(--cream) !important; box-shadow:0 16px 34px -12px rgba(158,22,34,.55),0 0 30px -12px rgba(183,138,46,.42) !important; } .phero .btn-ghost{ background-image:none !important; } .phero .btn-ghost:hover{ background:transparent !important;color:var(--oxblood) !important;border-color:rgba(35,35,35,.2) !important; } /* main-nav buttons → match the Editorial Square content CTAs */ .nav .nav-cta{ border-radius:7px !important; background-image:none !important; } .nav .nav-cta:hover{ transform:translateY(-2px) !important; background:var(--oxblood) !important;color:var(--cream) !important; box-shadow:0 12px 26px -12px rgba(158,22,34,.5) !important; } .nav-links .nav-cta2{ border-radius:7px !important; } /* ============================================================ CONSISTENCY PASS (safe) — eyebrows · card hover · section heads Type metrics + hover unified globally; colors left intact so light & dark sections both stay correct. Visual only. ============================================================ */ /* eyebrows — one type treatment (color untouched for dark sections) */ .eyebrow{font-family:var(--sans) !important;font-weight:600 !important;font-size:13px !important;letter-spacing:.2em !important;text-transform:uppercase !important} /* eyebrows — remove the bordered "pill" box on hero/section labels (keep the dot) */ .phero .eyebrow,.eco-copy .eyebrow,.vrts-left .eyebrow{background:none !important;border:0 !important;padding:0 !important;border-radius:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important} /* cards — consistent gentle hover lift + soft layered shadow */ .pp-svc,.eng-card,.mvv-card,.ix2-row,.pc2-card,.why-card,.why4-card,.ind-card,.indp-card,.mission-card,.hb-do,.brand-card,.blf-card,.abrand{ transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s var(--ease) !important; } .pp-svc:hover,.eng-card:hover,.mvv-card:hover,.ix2-row:hover,.pc2-card:hover,.why-card:hover,.why4-card:hover,.ind-card:hover,.indp-card:hover,.mission-card:hover,.hb-do:hover,.brand-card:hover,.blf-card:hover,.abrand:hover{ transform:translateY(-6px) !important; box-shadow:0 1px 2px rgba(40,20,12,.04),0 30px 60px -34px rgba(40,20,12,.4) !important; } /* section intros — uniform measure */ .sec-head,.sec-head.center{max-width:720px} /* form submit buttons → match the Editorial Square CTAs */ .ct-submit,.ct-form button,button.ct-submit,.apl-submit,.hbm-cta-form button,.ftr-form button,.ftr-news button,form button[type="submit"]{ border-radius:7px !important; transition:transform .3s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease) !important; } .ct-submit:hover,.ct-form button:hover,.apl-submit:hover,.hbm-cta-form button:hover,.ftr-form button:hover,.ftr-news button:hover,form button[type="submit"]:hover{ transform:translateY(-2px) !important; box-shadow:0 14px 30px -12px rgba(158,22,34,.5) !important; } /* ============================================================ HERO CARD FAMILY — unify shells + restyle inner chips to the Roles We Place icon-tile language (.pc2-ic). Layout untouched. ============================================================ */ /* B) card shells — one border / radius / shadow family */ .wds2-main,.hbm-panel,.car2-panel{ border:1px solid var(--cream-dark) !important; border-radius:20px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(40,20,12,.04), 0 44px 84px -42px rgba(40,20,12,.42), 0 14px 30px -20px rgba(40,20,12,.18) !important; } /* A) logo-mark chips → soft oxblood tile like .pc2-ic */ .wds2-logo,.car2-logo{ background:rgba(158,22,34,.07) !important; border:1px solid rgba(255,255,255,.6) !important; border-radius:12px !important; box-shadow:inset 0 1px 1px rgba(255,255,255,.75),0 8px 20px -10px rgba(158,22,34,.22) !important; } /* A) the "HR · Payroll" check chip → matching tile */ .wds2-fic{ border-radius:12px !important; width:30px !important;height:30px !important; background:rgba(158,22,34,.07) !important; border:1px solid rgba(255,255,255,.6) !important; box-shadow:inset 0 1px 1px rgba(255,255,255,.75),0 8px 20px -10px rgba(158,22,34,.22) !important; } /* A) avatar tiles → ONE premium tone (uniform, no mixed colors) */ .wds2-av,.car2-av,.hbm-av{ border-radius:12px !important; color:var(--cream) !important; background:linear-gradient(155deg,#3a332e,#26211d) !important; box-shadow:0 6px 14px -6px rgba(40,20,12,.5),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06) !important; } .wds2-av.av-ox,.car2-av.av-ox,.hbm-av.av-ox, .wds2-av.av-gold,.car2-av.av-gold,.hbm-av.av-gold, .wds2-av.av-ink,.car2-av.av-ink,.hbm-av.av-ink, .nh-av,.nh-av.av-ox,.nh-av.av-gold,.nh-av.av-ink, .pac-row .av,.pac-row .av.av-ox,.pac-row .av.av-gold,.pac-row .av.av-ink{ color:var(--cream) !important; background:linear-gradient(155deg,#3a332e,#26211d) !important; } .nh-av{box-shadow:0 6px 14px -6px rgba(40,20,12,.5),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06) !important} /* ============================================================ MAIN NAV — Action 1: HIREBOTA text link + "Soon" tag, Schedule stays the solid CTA. Plus a premium link hover: gold underline removed → color fade to oxblood + a small gold dot that scales in beneath the link. ============================================================ */ /* kill the old growing gold underline; use a center-out OXBLOOD underline */ .nav-links>li>a:not(.nav-cta):not(.nav-hb)::after{ left:50% !important;right:50% !important;bottom:-4px !important; width:auto !important;height:1.5px !important;border-radius:0 !important; background:var(--oxblood) !important; transform:none !important;transform-origin:center !important; transition:left .3s var(--ease),right .3s var(--ease) !important; opacity:1 !important; } .nav-links>li>a:not(.nav-cta):not(.nav-hb):hover::after, .nav-links>li>a:not(.nav-cta):not(.nav-hb).active::after{ left:0 !important;right:0 !important; } .nav-links>li>a:not(.nav-cta):not(.nav-hb){transition:color .25s var(--ease) !important} .nav-links>li>a:not(.nav-cta):not(.nav-hb):hover{color:var(--oxblood) !important} /* a little more breathing room between top-level nav items */ .nav .nav-links{gap:42px !important} /* HIREBOTA → quiet text link with a small "Soon" tag */ .nav-links .nav-hb{ display:inline-flex;align-items:center;gap:8px; font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.04em; color:var(--oxblood);text-decoration:none; transition:opacity .25s var(--ease); } .nav-links .nav-hb::after{display:none !important} .nav-links .nav-hb:hover{opacity:.72} .nav-links .nav-hb-tag{ font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--oxblood);background:rgba(158,22,34,.1); padding:3px 7px;border-radius:5px;line-height:1; } /* mobile-menu HIREBOTA stays a normal row link */ @media(prefers-reduced-motion:reduce){ .nav-links>li>a::after{transition:none !important} } /* ============================================================ AUDIT FIXES — token normalization (no copy / structure change) Medium + Minor items from the Consistency Audit, applied in the shared sheet so all pages inherit them. ============================================================ */ /* H2 tiers: standard section heads → Section tier; closing bands → Display tier */ .sec-head h2,.pp-head h2,.svc-head h2,.ind-head h2,.proc-head h2, .habt-h2,.hiw-faq4-head h2,.hiw-acct h2{ font-size:var(--fs-h2-section) !important; line-height:1.12 !important; } .vrts-title,.g-title{ font-size:var(--fs-h2-display) !important; } /* one section-head measure */ .sec-head,.sec-head.center,.svc-head,.ind-head,.proc-head,.pp-head{ max-width:var(--measure-head) !important; } /* fold stray section sub-paragraph sizes back to the body token */ .sec-head .lead,.pp-head .lead,.habt-sub{ font-size:var(--fs-body) !important; line-height:var(--lh-body) !important; } /* align the two bespoke loop durations to a calmer shared timing */ .pc2-card,.hiw-arrow::after{animation-duration:3.2s !important} /* cream CTA buttons on oxblood/dark bands — clean hover (no dark fill) */ .ind-close .btn-gold,.sec-ox .btn-gold,.hiw-acct .btn-gold,section.G .btn-gold,.vrts-solo .btn-gold{ background:var(--cream) !important;color:var(--oxblood) !important;border-color:var(--cream) !important; background-image:none !important; } .ind-close .btn-gold:hover,.sec-ox .btn-gold:hover,.hiw-acct .btn-gold:hover,section.G .btn-gold:hover,.vrts-solo .btn-gold:hover{ background:#fff !important;color:var(--oxblood-deep) !important;border-color:#fff !important; transform:translateY(-2px) !important; box-shadow:0 16px 34px -14px rgba(0,0,0,.45) !important; } /* footer — tighten to the site's proportions (was oversized) */ .botaft .ftin{padding:62px 40px 0 !important} /* ============================================================ ONE BUTTON SIZE — unify every CTA / submit / nav / footer button to a single size site-wide (audit request). ============================================================ */ .btn,.btn-gold,.btn-ghost,.btn-rts-primary,.btn-rts-ghost, .hbm-btn,.hbm-btn-g,.hbm-altbtn,.nav .nav-cta, .ct-submit,.apl-submit,.hbm-cta-form button,.botaft-news button, .ftr-form button,.ftr-news button,form button[type="submit"]{ font-family:var(--sans) !important; font-size:13px !important; font-weight:600 !important; letter-spacing:.06em !important; text-transform:uppercase !important; padding:14px 26px !important; height:auto !important; min-height:0 !important; line-height:1.1 !important; border-radius:7px !important; } /* paired inputs match the button height so rows stay aligned */ .hbm-cta-form input,.botaft-news input{ height:auto !important;padding:14px 16px !important;font-size:13.5px !important; } .botaft-grid{padding-bottom:42px !important;gap:44px !important} .botaft-lead h2{font-size:clamp(24px,2.4vw,34px) !important;max-width:14ch !important} .botaft-lead p.bl{font-size:14px !important;margin-top:18px !important;max-width:40ch !important} .botaft-follow{margin-top:22px !important} .botaft-wordmark{width:clamp(140px,15vw,184px) !important} .botaft-bot{padding-top:20px !important} @media(max-width:860px){.botaft .ftin{padding:48px 24px 0 !important}} /* ============================================================ MOBILE SPACING PASS (global) — tighter, even rhythm on phones ============================================================ */ @media(max-width:700px){ /* calmer vertical rhythm */ .pad,.sec-pad,section.pad{padding-top:56px !important;padding-bottom:56px !important} .pad-lg{padding-top:64px !important;padding-bottom:64px !important} /* consistent side gutters */ .container{padding-left:20px !important;padding-right:20px !important} /* headings sit closer to their body on small screens */ h2,.t-h2{margin-bottom:14px !important} /* grids that were multi-column collapse with comfortable gaps */ .pp-svc-grid,.pp-why-grid,.pp-founder-grid,.indx-grid,.ix2-row, .habt-top,.habt-brands,.eng-grid,.res-grid{gap:22px !important} /* buttons go full-width-ish & stack cleanly */ .hero-ctas,.phero-cta,.vrts-solo .hero-ctas{flex-wrap:wrap !important;gap:12px !important} /* float cards never overflow the screen edge */ .pp-float,.edi-glass{right:12px !important;left:auto !important;max-width:74vw !important} } @media(max-width:430px){ .pad,.sec-pad,section.pad{padding-top:46px !important;padding-bottom:46px !important} .container{padding-left:16px !important;padding-right:16px !important} .hero-ctas .btn,.hero-ctas .btn-gold,.hero-ctas .btn-rts-primary,.hero-ctas .btn-ghost{width:100% !important;justify-content:center !important} } /* ===== Footer wordmark: BOTA mark + gold divider + GROUP caps (Option C) ===== */ .botaft-wm{display:inline-flex;align-items:center;gap:16px;margin:0 0 4px} .botaft-wmimg{display:block;width:clamp(118px,13vw,164px);height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))} .botaft-wmdiv{width:1px;height:30px;background:rgba(214,178,112,.65);flex:none} .botaft-wmg{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:#F7F2EA} @media(max-width:540px){.botaft-wm{gap:12px}.botaft-wmdiv{height:24px}.botaft-wmg{font-size:12px;letter-spacing:.28em}} /* tighter section-head gap (paired with the reduced section rhythm above) */ .sec-head{ margin-bottom:30px !important; } /* --- (old "four ways" compaction removed — cards redesigned on what-we-do) --- */ /* founder / contact / hirebota hero eyebrows — match the "What We Do" treatment (bigger, no bordered pill) */ .flo-eyebrow2,.ct-eyebrow,.hbm-eyebrow{font-size:13px !important;background:none !important;border:0 !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important} /* contact eyebrow has an inline !important pill — win on specificity, not load order */ .ct-eyebrow.ct-eyebrow{background:none !important;border:0 !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important} /* header "BOTA | Group" lockup (mirrors the footer, dark for the light nav) */ .nav-logo{display:inline-flex;align-items:center;gap:13px} .nav-logo-div{width:1px;height:20px;background:rgba(183,138,46,.62);flex:none} .nav-logo-g{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(35,35,35,.66);white-space:nowrap} @media(max-width:520px){.nav-logo{gap:10px}.nav-logo-div{height:17px}.nav-logo-g{font-size:11px;letter-spacing:.22em}} /* ============================================================ MOBILE OVERFLOW FIX (iOS Safari) — CSS only, no content change Fixes: (a) page could be swiped sideways / showed a white gap on iPhone, and (b) long italic headline phrases were cut off at the screen edge. Reversible; changes no copy or structure. ============================================================ */ /* 1) Contain horizontal overflow at the root. 'clip' stops the sideways scroll WITHOUT breaking the fixed nav or sticky cards (which plain overflow:hidden would). */ html{ overflow-x:clip; } body{ overflow-x:clip; } /* 2) Let long italic headline phrases wrap on phones instead of running off the screen edge (e.g. the Founder hero headline). */ @media(max-width:600px){ .hero h1 em,.flo-hero h1 em,.phero h1 em{ white-space:normal !important; } } /* 3) Prevent iOS Safari from auto-zooming when a form field smaller than 16px is tapped (fields stay put; only mobile size nudged). */ @media(max-width:600px){ input:not([type=checkbox]):not([type=radio]),select,textarea{ font-size:16px !important; } } /* ============================================================ HOMEPAGE HERO OVERFLOW FIX (iPhone) — CSS only, no content change The mobile hero collapses to a single '1fr' column, but the graphic panel (.nh-stage) is a fixed 392px, and a plain 1fr track won't shrink below its content — so it forced the whole hero column (text, buttons) to 392px and clipped it off the right edge of a 390px screen. minmax(0,1fr) + min-width:0 lets the column shrink to fit the phone. ============================================================ */ @media(max-width:1040px){ .phero-inner{ grid-template-columns:minmax(0,1fr) !important; } .phero-copy,.phero-art{ min-width:0 !important; } .phero-sub{ max-width:100% !important; } .nh-stage,.pa-stage{ max-width:100% !important; } } /* ============================================================ HERO TAGLINE — remove decorative dot + stack on phones Desktop stays one line separated by "·"; on phones each phrase gets its own line. CSS only; wording unchanged. ============================================================ */ .phero .eyebrow.phero-tag{ gap:0 !important; } .phero .eyebrow.phero-tag .dot{ display:none !important; } /* safety: hide any dot */ @media(max-width:600px){ .phero .eyebrow.phero-tag{ flex-direction:column !important; align-items:flex-start !important; gap:4px !important; } .phero .eyebrow.phero-tag .pt-sep{ display:none !important; } }