/* ==========================================================================
   02 COMPONENTS: GEOSEO custom sections
   ==========================================================================

   Migrated from Appearance, Customise, Additional CSS on 30 July 2026.

   WHAT CHANGED IN THE MIGRATION
   1. The Google Fonts @import at the top was removed. It is now loaded
      properly from functions.php with a preconnect, which is faster. The
      font itself has not changed.
   2. Every hardcoded hex and every repeated "Manrope, sans-serif" now
      points at a token in 01-tokens.css.
   3. The !important declarations were left in place. They are fighting
      Contact Form 7 and Elementor specificity and removing them without
      being able to see the live page would risk breaking layout. They can
      be unwound later, one section at a time, with a staging site.

   ON page-id-7844
   The standalone form section below is targeted by WordPress page ID. If
   that page is ever deleted and rebuilt, the ID changes and the styling
   silently disappears. Every rule is therefore duplicated onto a
   .geo-form-page class. Add "geo-form-page" to that page's CSS class field
   in Elementor (Advanced, CSS Classes) and the ID selector can be deleted.
   ========================================================================== */


/* --------------------------------------------------------------------------
   GEO audit page
   -------------------------------------------------------------------------- */

.geo-audit-page {
  font-family: var(--geo-font);
  background: var(--geo-bg-deep);
  color: var(--geo-text-bright);
  max-width: var(--geo-container);
  margin: 40px auto;
  border-radius: var(--geo-radius-lg);
  overflow: hidden;
}

.geo-hero {
  padding: var(--geo-space-xl) 40px 36px;
  text-align: center;
  border-bottom: 1px solid var(--geo-surface-alt);
}

.geo-badge {
  display: inline-block;
  background: var(--geo-surface-alt);
  border: 1px solid var(--geo-accent);
  border-radius: var(--geo-radius-pill);
  padding: 5px 14px;
  font-size: var(--geo-fs-label);
  color: var(--geo-text-body);
  margin-bottom: var(--geo-space-md);
}

.geo-hero h2 {
  font-size: var(--geo-fs-h2);
  font-weight: var(--geo-fw-black);
  line-height: var(--geo-lh-heading);
  color: var(--geo-text-bright);
  margin-bottom: 16px;
}

.geo-accent { color: var(--geo-accent); }

.geo-sub {
  font-size: var(--geo-fs-body);
  color: var(--geo-text-muted);
  line-height: var(--geo-lh-body);
  max-width: 580px;
  margin: 0 auto 28px;
}

.geo-stat {
  display: inline-block;
  background: var(--geo-surface-alt);
  border-left: 3px solid var(--geo-accent);
  border-radius: 0 var(--geo-radius-sm) var(--geo-radius-sm) 0;
  padding: 10px 18px;
  font-size: var(--geo-fs-small);
  color: var(--geo-text-body);
}

.geo-includes {
  padding: 28px 40px;
  border-bottom: 1px solid var(--geo-surface-alt);
}

.geo-section-label {
  font-size: var(--geo-fs-label);
  font-weight: var(--geo-fw-bold);
  color: var(--geo-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.geo-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--geo-space-sm);
}

.geo-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--geo-fs-body);
  color: var(--geo-text-body);
  line-height: 1.6;
}

.geo-checklist li::before {
  content: '';
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  background: var(--geo-accent);
  margin-top: 3px;
}

.geo-form-wrap { padding: var(--geo-space-lg) 40px var(--geo-space-xl); }

.geo-form-wrap h2 {
  font-size: var(--geo-fs-h3);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  margin-bottom: var(--geo-space-xs);
}

.geo-form-sub {
  font-size: var(--geo-fs-small);
  color: var(--geo-text-muted);
  margin-bottom: 24px;
}

.geo-form-wrap .wpcf7 input[type="text"],
.geo-form-wrap .wpcf7 input[type="email"],
.geo-form-wrap .wpcf7 input[type="url"],
.geo-form-wrap .wpcf7 textarea {
  background: var(--geo-surface-alt) !important;
  border: 1px solid var(--geo-border-strong) !important;
  border-radius: var(--geo-radius-md) !important;
  padding: var(--geo-space-sm) 16px !important;
  color: var(--geo-text-bright) !important;
  font-family: var(--geo-font) !important;
  font-size: var(--geo-fs-body) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
}

.geo-form-wrap .wpcf7 input::placeholder,
.geo-form-wrap .wpcf7 textarea::placeholder { color: var(--geo-text-faint) !important; }

.geo-form-wrap .wpcf7 textarea { height: 90px; resize: none; }

.geo-form-wrap .wpcf7 input[type="submit"] {
  background: var(--geo-accent) !important;
  color: var(--geo-text-on-accent) !important;
  border: none !important;
  border-radius: var(--geo-radius-md) !important;
  padding: 14px 24px !important;
  font-family: var(--geo-font) !important;
  font-size: 16px !important;
  font-weight: var(--geo-fw-bold) !important;
  width: 100% !important;
  cursor: pointer !important;
  margin-top: 4px !important;
}

.geo-form-wrap .wpcf7 input[type="submit"]:hover { background: var(--geo-accent-pressed) !important; }

.geo-trust {
  text-align: center;
  font-size: var(--geo-fs-label);
  color: var(--geo-text-faint);
  margin-top: 14px;
}


/* --------------------------------------------------------------------------
   About me block
   -------------------------------------------------------------------------- */

.geo-about {
  width: 100%;
  padding: var(--geo-space-2xl) 24px;
  font-family: var(--geo-font);
}

.geo-about-inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--geo-container);
  margin: 0 auto;
  gap: 0;
}

.geo-photo-col { flex: 0 0 auto; position: relative; z-index: 2; }

.geo-photo-circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--geo-border);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.geo-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.geo-about-card {
  flex: 1;
  margin-left: -60px;
  padding: 44px 40px 40px 100px;
  z-index: 1;
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-xl);
  position: relative;
}

.geo-about-name {
  font-size: 26px;
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.geo-about-role {
  font-size: var(--geo-fs-fine);
  font-weight: var(--geo-fw-semi);
  color: var(--geo-text-muted);
  margin-bottom: 4px;
}

.geo-about-subrole {
  font-size: var(--geo-fs-label);
  font-weight: var(--geo-fw-medium);
  color: var(--geo-accent);
  margin-bottom: 22px;
  letter-spacing: 0.02em;
}

.geo-about-bio {
  font-size: var(--geo-fs-body);
  font-weight: var(--geo-fw-normal);
  color: var(--geo-text-soft);
  line-height: var(--geo-lh-loose);
  margin-bottom: var(--geo-space-lg);
}

.geo-about-bio p + p { margin-top: var(--geo-space-sm); }

.geo-about-socials {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
}

.geo-social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--geo-text-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--geo-transition), transform 0.15s ease;
  flex-shrink: 0;
}

.geo-social-btn:hover { background: var(--geo-accent); transform: translateY(-2px); }
.geo-social-btn svg { width: 18px; height: 18px; color: var(--geo-surface); transition: color var(--geo-transition); }
.geo-social-btn:hover svg { color: var(--geo-text-bright); }

.geo-about-divider {
  width: 100%;
  height: 1px;
  background: var(--geo-border);
  margin-bottom: 28px;
}

.geo-about-stats {
  display: flex;
  gap: 0;
  list-style: none;
  justify-content: center;
  border: none !important;
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.geo-stat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  text-align: center;
  border: none !important;
}

.geo-stat-value {
  font-size: var(--geo-fs-h4);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  letter-spacing: -0.02em;
  line-height: 1;
}

.geo-stat-label {
  font-size: var(--geo-fs-micro);
  font-weight: var(--geo-fw-medium);
  color: var(--geo-text-muted);
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
   Standalone Contact Form 7 page
   Targeted by page ID and by .geo-form-page. See the note at the top.
   -------------------------------------------------------------------------- */

.page-id-7844 .wpcf7-form p,
.geo-form-page .wpcf7-form p { margin-bottom: 16px; }

body.page-id-7844 .wpcf7-form input[type="text"],
body.page-id-7844 .wpcf7-form input[type="email"],
body.page-id-7844 .wpcf7-form input[type="url"],
body.page-id-7844 .wpcf7-form textarea,
body.geo-form-page .wpcf7-form input[type="text"],
body.geo-form-page .wpcf7-form input[type="email"],
body.geo-form-page .wpcf7-form input[type="url"],
body.geo-form-page .wpcf7-form textarea {
  /* Was #1A1B2E, two steps off the #1A1D2E used everywhere else for the
     same inset panel. Consolidated onto the one token. */
  background: var(--geo-surface-alt) !important;
  border: 1px solid var(--geo-border-input) !important;
  border-radius: var(--geo-radius-sm) !important;
  color: var(--geo-text-bright) !important;
  font-family: var(--geo-font) !important;
  font-size: var(--geo-fs-body) !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.page-id-7844 .wpcf7-form input::placeholder,
body.page-id-7844 .wpcf7-form textarea::placeholder,
body.geo-form-page .wpcf7-form input::placeholder,
body.geo-form-page .wpcf7-form textarea::placeholder {
  color: var(--geo-text-muted) !important;
  opacity: 1 !important;
}

body.page-id-7844 .wpcf7-form input[type="text"]:focus,
body.page-id-7844 .wpcf7-form input[type="email"]:focus,
body.page-id-7844 .wpcf7-form input[type="url"]:focus,
body.page-id-7844 .wpcf7-form textarea:focus,
body.geo-form-page .wpcf7-form input[type="text"]:focus,
body.geo-form-page .wpcf7-form input[type="email"]:focus,
body.geo-form-page .wpcf7-form input[type="url"]:focus,
body.geo-form-page .wpcf7-form textarea:focus {
  border-color: var(--geo-accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

body.page-id-7844 .wpcf7-form textarea,
body.geo-form-page .wpcf7-form textarea {
  min-height: 100px !important;
  resize: vertical !important;
}

body.page-id-7844 .wpcf7-form .wpcf7-submit,
body.geo-form-page .wpcf7-form .wpcf7-submit {
  background: var(--geo-accent) !important;
  border: none !important;
  border-radius: var(--geo-radius-sm) !important;
  color: var(--geo-text-on-accent) !important;
  cursor: pointer !important;
  font-family: var(--geo-font) !important;
  font-size: var(--geo-fs-body) !important;
  font-weight: var(--geo-fw-bold) !important;
  padding: 16px var(--geo-space-lg) !important;
  width: 100% !important;
  letter-spacing: 0.3px !important;
}

body.page-id-7844 .wpcf7-form .wpcf7-submit:hover,
body.geo-form-page .wpcf7-form .wpcf7-submit:hover { background: var(--geo-accent-hover) !important; }

body.page-id-7844 .wpcf7-not-valid-tip,
body.geo-form-page .wpcf7-not-valid-tip {
  color: var(--geo-error) !important;
  font-family: var(--geo-font) !important;
  font-size: var(--geo-fs-fine) !important;
  margin-top: 4px !important;
}

body.page-id-7844 .wpcf7-response-output,
body.geo-form-page .wpcf7-response-output {
  border: none !important;
  border-radius: var(--geo-radius-sm) !important;
  font-family: var(--geo-font) !important;
  font-size: var(--geo-fs-small) !important;
  margin: 16px 0 0 !important;
  padding: var(--geo-space-sm) 16px !important;
}

body.page-id-7844 .wpcf7-mail-sent-ok,
body.geo-form-page .wpcf7-mail-sent-ok { background: var(--geo-success-bg) !important; color: var(--geo-success) !important; }

body.page-id-7844 .wpcf7-validation-errors,
body.geo-form-page .wpcf7-validation-errors { background: var(--geo-error-bg) !important; color: var(--geo-error) !important; }


/* --------------------------------------------------------------------------
   Hero, two column
   -------------------------------------------------------------------------- */

.geo-hero-text {
  font-family: var(--geo-font);
  padding-right: var(--geo-space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.geo-hero-heading {
  font-size: var(--geo-fs-hero);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  line-height: var(--geo-lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--geo-space-md);
  font-family: var(--geo-font-heading);
}

.geo-hero-sub {
  font-size: var(--geo-fs-lead);
  color: var(--geo-text-muted);
  line-height: var(--geo-lh-body);
  font-family: var(--geo-font);
  margin-bottom: 0;
}

.geo-hero-cta {
  display: inline-block;
  background: var(--geo-accent);
  color: var(--geo-text-on-accent);
  font-family: var(--geo-font);
  font-size: var(--geo-fs-body);
  font-weight: var(--geo-fw-bold);
  padding: 14px 28px;
  border-radius: var(--geo-radius-md);
  text-decoration: none;
  margin-top: 28px;
  margin-bottom: var(--geo-space-md);
  transition: background var(--geo-transition);
  align-self: flex-start;
}

.geo-hero-cta:hover { background: var(--geo-accent-pressed); color: var(--geo-text-on-accent); }

.geo-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.geo-chip {
  font-family: var(--geo-font);
  font-size: var(--geo-fs-label);
  font-weight: var(--geo-fw-semi);
  color: var(--geo-text-chip);
  background: var(--geo-surface-chip);
  border: 1px solid var(--geo-border-chip);
  border-radius: var(--geo-radius-pill);
  padding: 6px 14px;
  white-space: nowrap;
}

.geo-hero-proof {
  font-family: var(--geo-font);
  font-size: var(--geo-fs-fine);
  color: var(--geo-text-dim);
  margin-top: 16px;
  font-style: italic;
}


/* --------------------------------------------------------------------------
   Hero form card
   -------------------------------------------------------------------------- */

.geo-hero-form {
  background: var(--geo-surface) !important;
  border: 1px solid var(--geo-border) !important;
  border-radius: var(--geo-radius-xl) !important;
  padding: 24px var(--geo-space-lg) var(--geo-space-lg) !important;
  position: relative !important;
  z-index: 2 !important;
}

.geo-hero-form::before {
  content: 'Get your free GEO audit.';
  display: block;
  font-family: var(--geo-font-heading);
  font-size: var(--geo-fs-h4);
  font-weight: var(--geo-fw-black);
  color: var(--geo-text-bright);
  margin-bottom: var(--geo-space-md);
  line-height: 1.3;
}

.geo-hero-form .wpcf7-form p { margin-bottom: var(--geo-space-sm); }

.geo-hero-form .wpcf7-form input[type="text"],
.geo-hero-form .wpcf7-form input[type="email"],
.geo-hero-form .wpcf7-form input[type="url"],
.geo-hero-form .wpcf7-form textarea {
  background: var(--geo-input-light-bg) !important;
  border: 1px solid var(--geo-input-light-border) !important;
  border-radius: var(--geo-radius-sm) !important;
  color: var(--geo-text-on-light) !important;
  font-family: var(--geo-font) !important;
  font-size: var(--geo-fs-body) !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.geo-hero-form .wpcf7-form input::placeholder,
.geo-hero-form .wpcf7-form textarea::placeholder { color: var(--geo-text-dim) !important; opacity: 1 !important; }

.geo-hero-form .wpcf7-form input[type="text"]:focus,
.geo-hero-form .wpcf7-form input[type="email"]:focus,
.geo-hero-form .wpcf7-form input[type="url"]:focus,
.geo-hero-form .wpcf7-form textarea:focus {
  border-color: var(--geo-accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

.geo-hero-form .wpcf7 textarea,
.geo-hero-form textarea {
  height: 80px !important;
  max-height: 80px !important;
  min-height: 0 !important;
  resize: vertical !important;
}

.geo-hero-form .wpcf7-form .wpcf7-submit {
  background: var(--geo-accent) !important;
  border: none !important;
  border-radius: var(--geo-radius-sm) !important;
  color: var(--geo-text-on-accent) !important;
  cursor: pointer !important;
  font-family: var(--geo-font) !important;
  font-size: var(--geo-fs-body) !important;
  font-weight: var(--geo-fw-bold) !important;
  padding: 16px var(--geo-space-lg) !important;
  width: 100% !important;
  letter-spacing: 0.3px !important;
  margin-top: var(--geo-space-xs) !important;
}

.geo-hero-form .wpcf7-form .wpcf7-submit:hover { background: var(--geo-accent-hover) !important; }


/* --------------------------------------------------------------------------
   Social proof box
   -------------------------------------------------------------------------- */

.geo-social-proof {
  border-radius: var(--geo-radius-lg) !important;
  padding: 24px var(--geo-space-lg) !important;
}


/* --------------------------------------------------------------------------
   What's included cards
   -------------------------------------------------------------------------- */

.geo-whatsinc { padding: var(--geo-space-2xl) 24px; font-family: var(--geo-font); }

.geo-whatsinc-inner { max-width: var(--geo-container); margin: 0 auto; text-align: center; }

.geo-whatsinc-label {
  font-size: var(--geo-fs-label);
  font-weight: var(--geo-fw-bold);
  color: var(--geo-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.geo-whatsinc-grid { display: flex; gap: var(--geo-space-md); }

.geo-inc-card {
  flex: 1;
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-radius-xl);
  padding: var(--geo-space-lg) 24px;
  text-align: center;
}

.geo-inc-num {
  font-size: 36px;
  font-weight: var(--geo-fw-black);
  color: var(--geo-accent);
  line-height: 1;
  margin-bottom: 16px;
  font-family: var(--geo-font-heading);
}

.geo-inc-title {
  font-size: 16px;
  font-weight: var(--geo-fw-bold);
  color: var(--geo-text-bright);
  margin-bottom: 10px;
  line-height: 1.4;
  font-family: var(--geo-font-heading);
}

.geo-inc-desc {
  font-size: var(--geo-fs-small);
  color: var(--geo-text-muted);
  line-height: var(--geo-lh-body);
  font-family: var(--geo-font);
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .geo-photo-circle { width: 220px; height: 220px; }
  .geo-about-card { padding: 40px 28px 36px 76px; }
  .geo-about-name { font-size: var(--geo-fs-h3); }
  .geo-about-bio { font-size: var(--geo-fs-small); }
  .geo-hero-heading { font-size: 40px; font-weight: var(--geo-fw-black) !important; }
  .geo-form-header { padding: 24px 24px 16px; }
  .geo-hero-form { padding: var(--geo-space-md) 24px 28px !important; }
}

@media (max-width: 700px) {
  .geo-audit-page { margin: 0; border-radius: 0; }
  .geo-hero { padding: 36px var(--geo-space-md) 28px; }
  .geo-hero h2 { font-size: 24px; }
  .geo-includes { padding: 24px var(--geo-space-md); }
  .geo-form-wrap { padding: 24px var(--geo-space-md) 40px; }
  .geo-about-inner { flex-direction: column; align-items: center; }
  .geo-photo-circle { width: 160px; height: 160px; margin-bottom: -28px; box-shadow: none; }
  .geo-about-card { width: 100%; margin-left: 0; padding: var(--geo-space-xl) 24px var(--geo-space-lg); }
  .geo-about-name { font-size: var(--geo-fs-h3); }
  .geo-hero-text { padding-right: 0; padding-bottom: var(--geo-space-lg); text-align: center; }
  .geo-hero-heading { font-size: 42px; }
  .geo-hero-cta { align-self: center; }
  .geo-hero-chips { justify-content: center; gap: var(--geo-space-xs); }
  .geo-form-header { border-radius: var(--geo-radius-lg) var(--geo-radius-lg) 0 0; margin-top: 0; }
  .geo-hero-form { border-radius: var(--geo-radius-xl) !important; }
  .geo-whatsinc-grid { flex-direction: column; }
  .geo-whatsinc { padding: 40px var(--geo-space-md); }
}

@media (max-width: 420px) {
  .geo-about { padding: var(--geo-space-xl) 16px; }
  .geo-about-stats { flex-direction: column; gap: 16px; }
  .geo-stat-col {
    padding: 0;
    min-height: 90px;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .geo-stat-col + .geo-stat-col { border-top: 1px solid var(--geo-border) !important; padding-top: 16px; }
  .geo-stat-label { font-size: var(--geo-fs-label); }
  .geo-hero-heading { font-size: var(--geo-fs-h2); }
  .geo-hero-cta { width: 100%; text-align: center; box-sizing: border-box; }
  .geo-chip { font-size: var(--geo-fs-micro); padding: 5px var(--geo-space-sm); }
}


/* --------------------------------------------------------------------------
   About block: hardening for hand written markup

   The about section on the GEO audit page is pasted into an Elementor HTML
   widget. It used to carry its own inline <style>, including a global
   `* { margin: 0; padding: 0 }` reset, which the markup quietly depended on.

   Removing that inline block is the right move: it duplicated these rules,
   overrode the design tokens so a brand colour change could not reach this
   section, and carried a second render-blocking Google Fonts @import.

   These rules replace what the reset was doing, so the markup renders
   identically with no inline CSS at all. Bootstrap's reboot already handles
   heading and dd margins, this covers the rest.

   Both markup shapes are supported: <ul><li class="geo-stat-col"><span>
   as produced by [geo_about], and <dl><div class="geo-stat-col"><dt>/<dd>
   as used in the hand written version. Use whichever you prefer.
   -------------------------------------------------------------------------- */

.geo-about-name,
.geo-about-role,
.geo-about-subrole { margin-top: 0; }

/* Bootstrap gives every <p> a 1rem bottom margin. Left alone that stacks on
   top of the 12px `p + p` rule above and opens the bio out to 28px gaps. */
.geo-about-bio p { margin-top: 0; margin-bottom: 0; }
.geo-about-bio p + p { margin-top: var(--geo-space-sm); }

.geo-about-stats { padding-left: 0 !important; }

.geo-about-stats dt,
.geo-about-stats dd { margin: 0; padding: 0; }

.geo-about-stats .geo-stat-value,
.geo-about-stats .geo-stat-label { display: block; }