/*
Theme Name: Corporex
Theme URI: https://example.com/corporex
Author: Custom Build
Description: A professional, conversion-optimised WordPress theme for business and agency websites.
Version: 2.0.4
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: corporex
Tags: business, agency, professional, corporate, custom-menu, featured-images, threaded-comments
*/

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
  --c-primary:  #0A2540;
  --c-accent:   #1A6BFF;
  --c-accent-h: #0D4FCC;
  --c-light:    #F4F7FB;
  --c-white:    #FFFFFF;
  --c-text:     #1C2B3A;
  --c-muted:    #5A6A7A;
  --c-border:   #DDE3EA;
  --c-success:  #16A34A;
  --c-warn:     #F59E0B;

  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --wrap: 1160px;
  --r:    6px;
  --r-lg: 14px;
  --sh-sm: 0 1px 4px rgba(10,37,64,.07);
  --sh-md: 0 4px 20px rgba(10,37,64,.11);
  --sh-lg: 0 12px 48px rgba(10,37,64,.16);
  --ease:  .24s cubic-bezier(.4,0,.2,1);
}

/* =============================================
   RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7;
       color: var(--c-text); background: var(--c-white); -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--c-accent); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--c-accent-h); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); color: var(--c-primary); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
p  { margin-bottom: 1rem; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1rem; }
button, input, select, textarea { font-family: var(--font-body); }

/* =============================================
   LAYOUT HELPERS
   ============================================= */
.wrap        { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.pad         { padding: 5rem 0; }
.pad-lg      { padding: 6.5rem 0; }
.bg-light    { background: var(--c-light); }
.bg-dark     { background: var(--c-primary); }
.text-center { text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: .65rem;
}
.section-intro {
  font-size: 1.05rem; color: var(--c-muted);
  max-width: 600px; margin: .5rem auto 3rem;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .82rem 1.9rem; border-radius: var(--r);
  font-size: .94rem; font-weight: 600;
  border: 2px solid transparent; cursor: pointer;
  transition: all var(--ease); text-decoration: none; line-height: 1;
}
.btn-primary  { background: var(--c-accent); color: #fff; }
.btn-primary:hover  { background: var(--c-accent-h); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn-outline  { background: transparent; color: var(--c-primary); border-color: var(--c-border); }
.btn-outline:hover  { border-color: var(--c-accent); color: var(--c-accent); transform: translateY(-2px); }
.btn-ghost    { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost:hover    { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }
.btn-white    { background: #fff; color: var(--c-primary); }
.btn-white:hover    { background: var(--c-light); color: var(--c-primary); transform: translateY(-2px); }
.btn-full     { width: 100%; justify-content: center; }

/* =============================================
   ACCESSIBILITY
   ============================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -999px; left: 1rem; z-index: 99999;
             background: var(--c-accent); color: #fff; padding: .5rem 1rem;
             border-radius: 0 0 var(--r) var(--r); font-weight: 600; }
.skip-link:focus { top: 0; }

/* Prevent page scroll when mobile nav drawer is open.
   Applied to <html> (not body) so it works on iOS Safari too. */
html.nav-is-open { overflow: hidden; }
/* Global keyboard-focus ring for accessibility */
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* Nav links — suppress ALL browser outline/ring on every focus state.
   !important overrides the browser UA stylesheet default which ignores
   lower-specificity rules. Hover/active colour already shows interaction. */
.primary-nav a:focus,
.primary-nav a:focus-visible,
.primary-nav a:active,
.primary-nav ul li a:focus,
.primary-nav ul li a:focus-visible,
.primary-nav ul li a:active {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* =============================================
   HEADER
   ============================================= */
.site-header {
  position: sticky; top: 0; z-index: 9000;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--sh-md); }

.header-inner {
  display: flex; align-items: center;
  justify-content: space-between; height: 70px;
}

/* Logo */
.site-logo { font-family: var(--font-head); font-size: 1.45rem; font-weight: 700;
             color: var(--c-primary); text-decoration: none; flex-shrink: 0; }
.site-logo span { color: var(--c-accent); }
.site-logo img  { height: 40px; width: auto; }

/* Primary nav */
.primary-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: .15rem; }
.primary-nav ul li a {
  display: block; padding: .48rem .82rem;
  font-size: .92rem; font-weight: 500; color: var(--c-text);
  border-radius: var(--r); transition: all var(--ease);
}
.primary-nav ul li a:hover,
.primary-nav ul li.current-menu-item > a { color: var(--c-accent); background: rgba(26,107,255,.07); }

/* Dropdown */
.primary-nav ul li { position: relative; }
.primary-nav ul li ul {
  display: none; position: absolute; top: calc(100% + .4rem); left: 0;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: .4rem; min-width: 190px; flex-direction: column;
}
.primary-nav ul li:hover > ul { display: flex; }
.primary-nav ul li ul li a { font-size: .88rem; border-radius: var(--r); }

/* Header actions — desktop only */
.header-actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.header-phone   { font-size: .88rem; font-weight: 600; color: var(--c-muted);
                  display: flex; align-items: center; gap: .35rem; }
.header-phone:hover { color: var(--c-accent); }

/* Mobile toggle */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: .4rem; color: var(--c-primary); border-radius: var(--r);
  transition: background var(--ease);
}
.nav-toggle:hover { background: var(--c-light); }

/* =============================================
   MOBILE NAV DRAWER
   ============================================= */
@media (max-width: 860px) {
  /* Hide desktop nav and desktop header actions */
  .primary-nav     { display: none; }
  .header-actions  { display: none; }

  /* Show hamburger button */
  .nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Open state — full-screen drawer below the 70px header.
     NOTE: we use `height` (always viewport-relative) instead of
     `bottom: 0` because .site-header has `backdrop-filter`, which
     per CSS spec creates a new containing block for position:fixed
     descendants. With `bottom: 0` the drawer would be sized against
     the 71px-tall header (≈1px tall) instead of the viewport. */
  .primary-nav.is-open {
    display:  flex;
    flex-direction: column;
    position: fixed;
    top:    70px;   /* must match .header-inner height */
    left:   0;
    right:  0;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px); /* iOS Safari dynamic toolbar */
    z-index: 8999;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
    padding: 1rem 1.5rem 3rem;
    border-top: 1px solid var(--c-border);
    box-shadow: 0 8px 32px rgba(10,37,64,.15);
  }

  /* Nav list stacks vertically */
  .primary-nav.is-open ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0; padding: 0;
    gap: 0;
    width: 100%;
  }
  .primary-nav.is-open ul li a {
    display: block;
    padding: .95rem .75rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
    border-radius: 0;
    transition: color var(--ease), background var(--ease);
  }
  .primary-nav.is-open ul li a:hover       { color: var(--c-accent); background: var(--c-light); }
  .primary-nav.is-open ul li:last-child a  { border-bottom: none; }

  /* Sub-menus in mobile drawer */
  .primary-nav.is-open ul li ul {
    position: static;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    border: none;
    background: var(--c-light);
    padding: 0 0 0 1rem;
    border-radius: 0;
    width: 100%;
  }

  /* CTA buttons inside the drawer */
  .mobile-cta {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--c-border);
    width: 100%;
  }
}

/* Hide mobile CTA on desktop */
@media (min-width: 861px) {
  .mobile-cta { display: none; }
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative; overflow: hidden;
  padding: 7rem 0 6rem;
  background: var(--c-primary);
  background-size: cover; background-position: center;
  color: #fff;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(120deg, rgba(10,37,64,.93) 0%, rgba(10,37,64,.72) 55%, rgba(10,37,64,.55) 100%);
}
.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid; grid-template-columns: 1fr 420px;
  gap: 3.5rem; align-items: center;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(26,107,255,.22); border: 1px solid rgba(26,107,255,.4);
  border-radius: 100px; padding: .32rem .9rem;
  font-size: .78rem; font-weight: 700; color: #93bbff;
  letter-spacing: .05em; margin-bottom: 1.4rem;
}
.hero h1 { color: #fff; margin-bottom: 1.2rem; }
.hero h1 em { font-style: normal; color: #7eb5ff; }
.hero-lead { font-size: 1.1rem; color: rgba(255,255,255,.75); margin-bottom: 2rem; max-width: 500px; }
.hero-btns { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-trust { display: flex; align-items: center; gap: .85rem;
              font-size: .82rem; color: rgba(255,255,255,.5); }
.trust-avatars { display: flex; }
.trust-avatars span {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-accent); border: 2px solid var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: #fff;
  margin-left: -7px;
}
.trust-avatars span:first-child { margin-left: 0; }

/* Hero stat card */
.hero-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); padding: 1.75rem;
  backdrop-filter: blur(10px);
}
.hero-card-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-card-row:last-child { border-bottom: none; padding-bottom: 0; }
.hero-card-row:first-child { padding-top: 0; }
.hero-card-icon {
  width: 42px; height: 42px; border-radius: var(--r);
  background: rgba(26,107,255,.28); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.hero-card-label { font-size: .75rem; color: rgba(255,255,255,.5); }
.hero-card-value { font-size: 1.3rem; font-weight: 700; color: #fff; line-height: 1.2; }

/* =============================================
   CLIENTS STRIP
   ============================================= */
.clients { padding: 2.5rem 0; border-bottom: 1px solid var(--c-border); }
.clients-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--c-muted);
                 text-align: center; margin-bottom: 1.6rem; }
.clients-logos { display: flex; flex-wrap: wrap; justify-content: center;
                 align-items: center; gap: 1.5rem 2.8rem; }
.clients-logos span { font-family: var(--font-head); font-size: 1.05rem;
                      font-weight: 700; color: var(--c-border);
                      transition: color var(--ease); cursor: default; }
.clients-logos span:hover { color: var(--c-muted); }

/* =============================================
   SERVICES
   ============================================= */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.service-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 1.85rem;
  transition: all var(--ease); position: relative; overflow: hidden;
}
.service-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ease);
}
.service-card:hover { border-color: transparent; box-shadow: var(--sh-lg); transform: translateY(-4px); }
.service-card:hover::after { transform: scaleX(1); }
.service-icon {
  width: 50px; height: 50px; border-radius: var(--r);
  background: rgba(26,107,255,.09); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1.1rem;
}
.service-card h3 { font-size: 1.08rem; margin-bottom: .6rem; }
.service-card p  { font-size: .92rem; color: var(--c-muted); margin: 0; }

/* =============================================
   STATS
   ============================================= */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  text-align: center;
}
.stat-block { padding: 1.5rem 1rem; }
.stat-number {
  font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700; color: #fff; line-height: 1; margin-bottom: .4rem;
}
.stat-number em { font-style: normal; color: #7eb5ff; }
.stat-label { font-size: .88rem; color: rgba(255,255,255,.6); }

/* =============================================
   WHY US (hidden — replaced by Team + Testimonials)
   TEAM
   ============================================= */
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.team-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: all var(--ease);
}
.team-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.team-photo {
  aspect-ratio: 1; overflow: hidden; background: var(--c-light);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover;
                  transition: transform .5s ease; display: block; }
.team-card:hover .team-photo img { transform: scale(1.05); }
.team-info { padding: 1.15rem 1.3rem; }
.team-name  { font-size: .98rem; font-weight: 700; margin-bottom: .15rem; }
.team-role  { font-size: .82rem; color: var(--c-accent); font-weight: 600; }

/* =============================================
   SINGLE PERSON PORTFOLIO
   ============================================= */
.person-card {
  display: grid; grid-template-columns: 38% 1fr; gap: 3.5rem;
  align-items: stretch;
}
.person-photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-light); min-height: 480px;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }

/* Floating availability pill, bottom of photo */
.person-available {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--r); padding: .8rem 1.1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--c-primary);
}
.person-available .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22C55E; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

/* Info column */
.person-info { padding: .25rem 0; }
.person-info .eyebrow { display: block; margin-bottom: .6rem; }
.person-name { font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 1.25rem; letter-spacing: -.01em; }
.person-bio  { font-size: .98rem; color: var(--c-muted); line-height: 1.75; margin-bottom: 1.1rem; }
.person-bio:last-of-type { margin-bottom: 1.75rem; }
.person-bio strong { color: var(--c-text); font-weight: 700; }

/* Credentials */
.person-creds-title {
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  color: var(--c-text); margin-bottom: .9rem;
}
.person-creds-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem;
  margin-bottom: 1.75rem;
}
.cred-pill {
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--c-border); border-radius: var(--r);
  padding: .7rem .9rem; font-size: .82rem; font-weight: 600; color: var(--c-text);
  background: #fff;
}
.cred-pill svg { flex-shrink: 0; }
.cred-pill.cred-shield svg { color: var(--c-accent); }
.cred-pill.cred-badge  svg { color: #C9912A; }

/* Stats strip */
.person-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem;
  margin-bottom: 1.75rem;
}
.person-stat-box {
  border: 1px solid var(--c-border); border-radius: var(--r);
  padding: 1rem .5rem; text-align: center; background: #fff;
}
.person-stat-num   { font-size: 1.5rem; font-weight: 800; color: var(--c-primary); line-height: 1.1; margin-bottom: .3rem; }
.person-stat-label { font-size: .66rem; font-weight: 700; letter-spacing: .05em; color: var(--c-muted); }

/* Socials */
.person-socials { display: flex; gap: .6rem; }
.person-socials .social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-light); display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: var(--c-text); transition: all var(--ease);
}
.person-socials .social-icon:hover { background: var(--c-accent); color: #fff; transform: translateY(-2px); }

/* =============================================
   WHY CORPOREX
   ============================================= */
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.why-photo {
  position: relative; border-radius: var(--r-lg); overflow: visible;
}
.why-photo img {
  width: 100%; border-radius: var(--r-lg);
  display: block; object-fit: cover; aspect-ratio: 4/3;
  box-shadow: var(--sh-lg);
}
.why-badge {
  position: absolute; bottom: -1.5rem; right: -1.5rem;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 1.1rem 1.4rem;
  box-shadow: var(--sh-lg); display: flex; flex-direction: column; gap: .85rem;
  min-width: 230px;
}
.why-badge-row { display: flex; align-items: center; gap: .75rem; font-size: 1.15rem; }
.why-badge-label { font-size: .72rem; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.why-badge-value { font-size: .98rem; font-weight: 700; color: var(--c-primary); }
.why-content { }
.why-intro { color: var(--c-muted); margin-bottom: 2rem; font-size: 1.02rem; line-height: 1.75; }
.why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.4rem; }
.why-item { display: flex; gap: 1rem; align-items: flex-start; }
.why-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: rgba(26,107,255,.09);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-top: .1rem;
}
.why-item h4 { font-size: 1rem; margin-bottom: .25rem; }
.why-item p  { font-size: .9rem; color: var(--c-muted); margin: 0; }

/* =============================================
   TESTIMONIALS
   ============================================= */
.testi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.testi-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 1.85rem;
  transition: box-shadow var(--ease); display: flex; flex-direction: column;
}
.testi-card:hover { box-shadow: var(--sh-md); }
.testi-stars { color: var(--c-warn); font-size: .95rem; letter-spacing: .05em; margin-bottom: .85rem; }
.testi-quote { font-size: .94rem; font-style: italic; color: var(--c-text);
               flex: 1; margin-bottom: 1.4rem; line-height: 1.75; }
.testi-author { display: flex; align-items: center; gap: .75rem; }
.testi-avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; background: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: .88rem;
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-name  { font-size: .88rem; font-weight: 700; color: var(--c-primary); }
.testi-title { font-size: .78rem; color: var(--c-muted); }

/* =============================================
   PRICING
   ============================================= */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  align-items: start;
}
.price-card {
  background: #fff; border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg); padding: 2rem 1.85rem;
  transition: all var(--ease); position: relative;
}
.price-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.price-card.is-featured {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(26,107,255,.1), var(--sh-md);
}
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--c-accent); color: #fff; border-radius: 100px;
  padding: .25rem .9rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.price-name   { font-size: .78rem; font-weight: 700; letter-spacing: .1em;
                text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; }
.price-amount {
  font-family: var(--font-head); font-size: clamp(2.2rem,4vw,2.8rem);
  font-weight: 700; color: var(--c-primary); line-height: 1; margin-bottom: .3rem;
}
.price-amount sup { font-size: 1.1rem; vertical-align: top; margin-top: .5rem; font-family: var(--font-body); }
.price-amount sub { font-size: .85rem; font-family: var(--font-body); color: var(--c-muted); font-weight: 400; }
.price-desc   { font-size: .88rem; color: var(--c-muted); margin-bottom: 1.5rem; }
.price-divider { border: none; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }
.price-features { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .65rem; }
.price-features li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.price-features li::before { content: '✓'; color: var(--c-success); font-weight: 700; flex-shrink: 0; margin-top: .05rem; }
.price-features li.unavail { color: var(--c-muted); }
.price-features li.unavail::before { content: '–'; color: var(--c-border); }

/* =============================================
   BLOG
   ============================================= */
.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.post-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: all var(--ease);
}
.post-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.post-thumb { height: 200px; overflow: hidden; background: var(--c-light);
              display: flex; align-items: center; justify-content: center; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover;
                  transition: transform .5s ease; }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-body    { padding: 1.4rem 1.5rem; }
.post-meta    { display: flex; align-items: center; gap: .6rem; margin-bottom: .65rem; flex-wrap: wrap; }
.post-cat     { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                color: var(--c-accent); background: rgba(26,107,255,.08);
                padding: .2rem .55rem; border-radius: 100px; }
.post-date    { font-size: .78rem; color: var(--c-muted); }
.post-card h3 { font-size: 1rem; line-height: 1.4; margin-bottom: .4rem; }
.post-card h3 a { color: var(--c-primary); }
.post-card h3 a:hover { color: var(--c-accent); }
.post-card p  { font-size: .88rem; color: var(--c-muted); margin: 0; }

/* =============================================
   CONTACT
   ============================================= */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start;
}
.contact-info h2 { margin-bottom: .75rem; }
.contact-info > p { color: var(--c-muted); margin-bottom: 2rem; }
.contact-detail { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.1rem; }
.contact-detail-icon {
  width: 38px; height: 38px; border-radius: var(--r);
  background: rgba(26,107,255,.09); display: flex;
  align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.contact-detail strong { display: block; font-size: .82rem; margin-bottom: .1rem; }
.contact-detail span   { font-size: .88rem; color: var(--c-muted); }
.contact-map {
  margin-top: 1.75rem; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--c-border); box-shadow: var(--sh-sm);
}
.contact-map iframe { display: block; width: 100%; }

/* Form box */
.form-box {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 2.25rem;
  box-shadow: var(--sh-sm);
}
.form-box h3 { font-size: 1.15rem; margin-bottom: 1.4rem; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group  { margin-bottom: 1.1rem; }
.form-group label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--c-primary); margin-bottom: .42rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: .72rem .95rem;
  border: 1.5px solid var(--c-border); border-radius: var(--r);
  font-size: .94rem; color: var(--c-text); background: #fff;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(26,107,255,.11);
}
.form-group textarea { resize: vertical; min-height: 115px; }
.form-notice {
  background: #FFF7ED; border: 1px solid #FED7AA;
  border-radius: var(--r); padding: .7rem .9rem;
  font-size: .8rem; color: #92400E; margin-bottom: 1.2rem; line-height: 1.5;
}
.form-notice code {
  background: rgba(146,64,14,.1); padding: .1rem .35rem;
  border-radius: 3px; font-size: .78rem;
}

/* HTML / Script embed wrapper
   Constrains external widgets (Calendly, Typeform, HubSpot…) inside the
   form box. Min-height gives booking widgets enough room to render. */
.html-embed {
  width: 100%;
  min-height: 200px;
  overflow: hidden;
}
/* Responsive override — many embed widgets hard-code a pixel width.
   This forces them to fit within the column. */
.html-embed iframe,
.html-embed > div,
.html-embed > section {
  width: 100% !important;
  max-width: 100% !important;
}
/* Common vendor wrappers */
.html-embed .calendly-inline-widget { min-width: auto !important; }
.html-embed .typeform-widget        { min-width: auto !important; }
/* Plugin form normalisation */
.plugin-form input[type="text"],
.plugin-form input[type="email"],
.plugin-form input[type="tel"],
.plugin-form input[type="url"],
.plugin-form select,
.plugin-form textarea {
  width: 100%; padding: .72rem .95rem;
  border: 1.5px solid var(--c-border); border-radius: var(--r);
  font-size: .94rem; color: var(--c-text); background: #fff;
  transition: border-color var(--ease), box-shadow var(--ease);
  margin-bottom: 0;
}
.plugin-form input:focus,
.plugin-form select:focus,
.plugin-form textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(26,107,255,.11);
}
.plugin-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--c-primary); margin-bottom: .42rem; }
.plugin-form textarea { resize: vertical; min-height: 115px; }
.plugin-form .wpforms-field,
.plugin-form .wpcf7-form-control-wrap,
.plugin-form .nf-field-container,
.plugin-form .gfield,
.plugin-form .ff-el-group { margin-bottom: 1rem; }
.plugin-form input[type="submit"],
.plugin-form button[type="submit"],
.plugin-form .wpforms-submit,
.plugin-form .wpcf7-submit,
.plugin-form .gform_button {
  width: 100%; display: flex; align-items: center; justify-content: center;
  padding: .88rem 2rem; background: var(--c-accent); color: #fff;
  border: none; border-radius: var(--r); font-size: .96rem; font-weight: 600;
  cursor: pointer; transition: all var(--ease);
}
.plugin-form input[type="submit"]:hover,
.plugin-form button[type="submit"]:hover { background: var(--c-accent-h); transform: translateY(-2px); }
.plugin-form .wpcf7-mail-sent-ok { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7;
                                   padding: .7rem; border-radius: var(--r); margin-top: 1rem; font-size: .88rem; }
.plugin-form .wpcf7-mail-sent-ng,
.plugin-form .wpcf7-validation-errors { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
                                        padding: .7rem; border-radius: var(--r); margin-top: 1rem; font-size: .88rem; }

/* =============================================
   CTA BAND
   ============================================= */
.cta-band {
  background: linear-gradient(130deg, var(--c-accent) 0%, var(--c-accent-h) 100%);
  padding: 5.5rem 0; text-align: center; position: relative; overflow: hidden;
}
.cta-band h2   { color: #fff; margin-bottom: .85rem; }
.cta-band p    { color: rgba(255,255,255,.82); font-size: 1.05rem; margin-bottom: 2.2rem; }
.cta-band-btns { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer { background: var(--c-primary); color: rgba(255,255,255,.6); padding: 4.5rem 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 2.75rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .site-logo { color: #fff; display: inline-block; margin-bottom: .9rem; }
.footer-brand p  { font-size: .88rem; line-height: 1.7; margin-bottom: 1.4rem; max-width: 280px; }
.footer-socials  { display: flex; gap: .55rem; }
.social-icon {
  width: 34px; height: 34px; border-radius: var(--r);
  background: rgba(255,255,255,.08); display: flex; align-items: center;
  justify-content: center; font-size: .8rem; color: rgba(255,255,255,.6);
  transition: all var(--ease); text-decoration: none;
}
.social-icon:hover { background: var(--c-accent); color: #fff; }
.footer-col h4 {
  font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.9); margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: .55rem; }
.footer-col ul li a { font-size: .88rem; color: rgba(255,255,255,.52); transition: color var(--ease); }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.3rem 0; font-size: .82rem; flex-wrap: wrap; gap: .75rem;
}

/* =============================================
   INNER PAGE LAYOUTS
   ============================================= */
.page-hero { background: var(--c-primary); padding: 3.5rem 0 2.75rem; text-align: center; }
.page-hero h1 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: .5rem; }
.page-hero .breadcrumb { font-size: .82rem; color: rgba(255,255,255,.5); }
.page-hero .breadcrumb a { color: rgba(255,255,255,.6); }
.page-hero .post-cat {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #7EB5FF; margin-bottom: .75rem;
}

.page-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; padding: 3.5rem 0 4rem; }
.main-content article { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--c-border); }
.main-content article:last-of-type { border-bottom: none; }
.entry-title { font-size: 1.5rem; margin-bottom: .5rem; }
.entry-title a { color: var(--c-primary); }
.entry-title a:hover { color: var(--c-accent); }
.entry-meta { font-size: .8rem; color: var(--c-muted); margin-bottom: .85rem; }
.entry-content h2,
.entry-content h3 { margin: 1.75rem 0 .85rem; }
.entry-content p   { margin-bottom: 1.1rem; }
.entry-content blockquote {
  border-left: 4px solid var(--c-accent); padding: .9rem 1.4rem;
  background: var(--c-light); border-radius: 0 var(--r) var(--r) 0;
  margin: 1.75rem 0; font-style: italic;
}
.widget { margin-bottom: 2.2rem; }
.widget-title { font-size: .95rem; font-weight: 700;
                padding-bottom: .65rem; border-bottom: 2px solid var(--c-accent);
                margin-bottom: 1.1rem; }

.pagination { display: flex; gap: .4rem; justify-content: center; padding: 2rem 0; flex-wrap: wrap; }
.pagination .page-numbers {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-border); border-radius: var(--r);
  font-size: .88rem; font-weight: 500; color: var(--c-text); transition: all var(--ease);
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* =============================================
   SINGLE POST
   ============================================= */
.single-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start; }
.single-article { max-width: 100%; }

.single-thumb {
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 2rem;
  box-shadow: var(--sh-md);
}
.single-thumb img { width: 100%; display: block; }

.entry-content {
  font-size: 1.05rem; line-height: 1.85; color: var(--c-text);
}
.entry-content > *:first-child { margin-top: 0; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  color: var(--c-primary); margin: 2rem 0 .85rem; line-height: 1.3;
}
.entry-content h2 { font-size: 1.5rem; }
.entry-content h3 { font-size: 1.2rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1.1rem 1.4rem; }
.entry-content li { margin-bottom: .4rem; }
.entry-content a { text-decoration: underline; text-decoration-color: rgba(26,107,255,.3); }
.entry-content a:hover { text-decoration-color: var(--c-accent); }
.entry-content img {
  border-radius: var(--r-lg); margin: 1.5rem 0; max-width: 100%; height: auto;
}
.entry-content figure { margin: 1.5rem 0; }
.entry-content figcaption { font-size: .85rem; color: var(--c-muted); text-align: center; margin-top: .5rem; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .92rem; }
.entry-content table th, .entry-content table td { border: 1px solid var(--c-border); padding: .6rem .8rem; text-align: left; }
.entry-content table th { background: var(--c-light); font-weight: 700; }
.entry-content code {
  background: var(--c-light); padding: .15rem .45rem; border-radius: 4px;
  font-family: var(--font-mono, monospace); font-size: .85em;
}
.entry-content pre {
  background: var(--c-primary); color: #fff; padding: 1.25rem; border-radius: var(--r-lg);
  overflow-x: auto; margin: 1.5rem 0; font-size: .85rem; line-height: 1.6;
}
.entry-content pre code { background: none; color: inherit; padding: 0; }
.entry-content hr { border: none; border-top: 1px solid var(--c-border); margin: 2.25rem 0; }

/* Page links (paginated posts) */
.page-links { margin: 2rem 0; font-size: .9rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-links span:first-child { font-weight: 600; color: var(--c-primary); margin-right: .25rem; }
.page-links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 .5rem;
  border: 1px solid var(--c-border); border-radius: var(--r);
  color: var(--c-text); text-decoration: none;
}
.page-links a:hover, .page-links > span.current {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}

/* Tags */
.single-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin: 2rem 0; }
.tag-pill {
  font-size: .8rem; font-weight: 600; background: var(--c-light); color: var(--c-muted);
  padding: .3rem .85rem; border-radius: 100px; text-decoration: none; transition: all var(--ease);
}
.tag-pill:hover { background: var(--c-accent); color: #fff; }

/* Author box */
.author-box {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--c-light); border-radius: var(--r-lg);
  padding: 1.5rem; margin: 2.5rem 0;
}
.author-box-avatar img, .author-avatar-img {
  width: 64px; height: 64px; border-radius: 50%; display: block; flex-shrink: 0;
}
.author-box-name { font-weight: 700; color: var(--c-primary); margin-bottom: .35rem; font-size: 1rem; }
.author-box-bio { font-size: .9rem; color: var(--c-muted); margin: 0; line-height: 1.6; }

/* Prev / Next post navigation */
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 2.5rem 0; padding-top: 2rem; border-top: 1px solid var(--c-border);
}
.post-nav-item { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.post-nav-next { text-align: right; align-items: flex-end; }
.post-nav-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-accent); }
.post-nav-title {
  font-size: .95rem; font-weight: 600; color: var(--c-primary);
  text-decoration: none; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-nav-title:hover { color: var(--c-accent); }

/* Comments */
.single-comments { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--c-border); }
.single-comments .comment-list { list-style: none; padding: 0; margin: 0; }
.single-comments .comment-respond { margin-top: 2rem; }
.single-comments input[type="text"],
.single-comments input[type="email"],
.single-comments input[type="url"],
.single-comments textarea {
  width: 100%; padding: .7rem 1rem; border: 1.5px solid var(--c-border);
  border-radius: var(--r); font-family: var(--font-body); font-size: .92rem;
  margin-bottom: .9rem; background: #fff; color: var(--c-text);
}
.single-comments textarea { min-height: 110px; resize: vertical; }
.single-comments input:focus, .single-comments textarea:focus {
  outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(26,107,255,.12);
}
.single-comments .form-submit input[type="submit"] {
  width: auto; background: var(--c-accent); color: #fff; border: none;
  padding: .8rem 2rem; border-radius: var(--r); font-weight: 600; cursor: pointer;
  transition: all var(--ease);
}
.single-comments .form-submit input[type="submit"]:hover { background: var(--c-accent-h); }


/* =============================================
   404
   ============================================= */
.not-found {
  min-height: 62vh; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 4rem 1.5rem;
}
.not-found-code { font-family: var(--font-head); font-size: 6rem; font-weight: 700;
                  color: var(--c-border); line-height: 1; }
.not-found h1   { font-size: 1.8rem; margin: .5rem 0 .85rem; }
.not-found p    { color: var(--c-muted); margin-bottom: 2rem; }
.not-found-btns { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }

/* =============================================
   RESPONSIVE — tablet
   ============================================= */
@media (max-width: 1024px) {
  .services-grid  { grid-template-columns: repeat(2, 1fr); }
  .stats-grid     { grid-template-columns: repeat(2, 1fr); }
  .team-grid      { grid-template-columns: repeat(2, 1fr); }
  .testi-grid     { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid   { grid-template-columns: repeat(2, 1fr); }
  .blog-grid      { grid-template-columns: repeat(2, 1fr); }
  .footer-grid    { grid-template-columns: 1fr 1fr; }
  .contact-grid   { grid-template-columns: 1fr; }
  .page-layout    { grid-template-columns: 1fr; }
  .single-layout  { grid-template-columns: 1fr; }
  .hero-grid      { grid-template-columns: 1fr; }
  .hero-card      { display: none; }
  .why-grid       { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-badge      { right: 0; bottom: -1rem; }
  .person-card    { grid-template-columns: 1fr; gap: 2rem; }
  .person-photo   { min-height: 320px; }
  .person-info    { padding: 0; }
  .person-creds-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================
   RESPONSIVE — mobile
   ============================================= */
@media (max-width: 640px) {
  .pad, .pad-lg { padding: 3.5rem 0; }
  .services-grid,
  .team-grid,
  .testi-grid,
  .blog-grid    { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid  { grid-template-columns: 1fr; }
  .form-row     { grid-template-columns: 1fr; }
  .hero-btns    { flex-direction: column; }
  .cta-band-btns { flex-direction: column; align-items: center; }
  .why-badge    { position: static; margin-top: 1.25rem; min-width: auto; }
  .post-nav     { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; align-items: flex-start; }
  .person-creds-grid { grid-template-columns: 1fr 1fr; }
  .person-stats       { grid-template-columns: 1fr 1fr; }
}