/*
Theme Name:     Cyre Partners Child
Theme URI:      https://cyrepartners.com.au
Description:    Divi child theme for Cyre Partners
Author:         Cyre Partners
Author URI:     https://cyrepartners.com.au
Template:       Divi
Version:        2.0.0
*/

/* =====================================================
   CYRE PARTNERS — DIVI CHILD THEME
   v2.0 | Rebuilt for CSS stability & WCAG 2.1 AA
   ===================================================== */

/* =====================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ===================================================== */

:root {
  /* Brand Colours */
  --cyre-blue:         #1A3C6E;   /* dominant — headings, sections, primary UI */
  --cyre-blue-dark:    #122B52;   /* hover/active state for blue elements */
  --cyre-blue-light:   rgba(26, 60, 110, 0.08); /* tint for backgrounds */
  --cyre-red:          #C0392B;   /* sparingly — emphasis, ribbon device */
  --cyre-red-btn:      #A6310B;   /* WCAG-safe button red (5.5:1 contrast) */
  --cyre-red-hover:    #8B2817;   /* button hover (6.8:1 contrast) */
  --cyre-charcoal:     #2C3E50;   /* body text */
  --cyre-grey:         #7F8C8D;   /* secondary text, captions */
  --cyre-light:        #F5F6FA;   /* card/section backgrounds */
  --cyre-white:        #FFFFFF;

  /* Typography */
  --font-body:         Calibri, 'Segoe UI', Arial, sans-serif;
  --font-heading:      'Merriweather', Georgia, serif;
  --font-logo:         'Desyrel', cursive;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  32px;
  --space-lg:  64px;
  --space-xl:  96px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-card: 0 2px 16px rgba(26, 60, 110, 0.10);
  --shadow-hover: 0 6px 28px rgba(26, 60, 110, 0.18);

  /* Transitions */
  --transition: 0.25s ease;
}


/* =====================================================
   2. GLOBAL BASE
   ===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--cyre-charcoal);
  background-color: var(--cyre-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background-color: var(--cyre-blue);
  color: var(--cyre-white);
}


/* =====================================================
   3. TYPOGRAPHY
   ===================================================== */

h1, h2, h3, h4, h5, h6,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3,
.et_pb_text h4 {
  font-family: var(--font-heading);
  color: var(--cyre-blue);
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 0.6em;
}

h1, .et_pb_text h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2, .et_pb_text h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3, .et_pb_text h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
h4, .et_pb_text h4 { font-size: 1.2rem; }

p {
  margin-bottom: 1.2em;
  color: var(--cyre-charcoal);
}

a {
  color: var(--cyre-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

a:hover {
  color: var(--cyre-red-btn);
}

strong, b {
  font-weight: 700;
  color: var(--cyre-charcoal);
}

/* Tagline / sub-headline style */
.cyre-tagline {
  font-family: var(--font-logo);
  color: var(--cyre-red);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}


/* =====================================================
   4. ACCESSIBILITY — WCAG 2.1 AA
   ===================================================== */

/* Skip navigation link */
.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  background-color: var(--cyre-blue);
  color: var(--cyre-white);
  padding: 14px 20px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 9999;
  transition: top var(--transition);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--cyre-white);
  outline-offset: 2px;
  color: var(--cyre-white);
}

/* Focus indicators — all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cyre-blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.et_pb_button:focus-visible {
  outline: 3px solid var(--cyre-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(26, 60, 110, 0.15);
}

nav a:focus-visible {
  outline: 3px solid var(--cyre-blue);
  outline-offset: -3px;
  background-color: var(--cyre-blue-light);
  border-radius: var(--radius-sm);
}

/* Maintain Divi compatibility — don't strip outlines globally */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}


/* =====================================================
   5. NAVIGATION
   ===================================================== */

/* Primary nav */
#main-header {
  background-color: var(--cyre-white);
  border-bottom: 2px solid var(--cyre-blue-light);
}

#et-top-navigation nav > ul > li > a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--cyre-charcoal);
  letter-spacing: 0.02em;
  transition: color var(--transition);
  text-decoration: none;
  padding: 0 14px;
}

#et-top-navigation nav > ul > li > a:hover,
#et-top-navigation nav > ul > li.current-menu-item > a,
#et-top-navigation nav > ul > li.current-page-ancestor > a {
  color: var(--cyre-blue);
  border-bottom: 2px solid var(--cyre-blue);
}

/* Dropdown menu */
#et-top-navigation nav > ul > li ul.sub-menu {
  background-color: var(--cyre-white);
  border-top: 3px solid var(--cyre-blue);
  box-shadow: var(--shadow-card);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

#et-top-navigation nav > ul > li ul.sub-menu li a {
  color: var(--cyre-charcoal);
  font-size: 14px;
  padding: 10px 18px;
  transition: background-color var(--transition), color var(--transition);
  text-decoration: none;
}

#et-top-navigation nav > ul > li ul.sub-menu li a:hover {
  background-color: var(--cyre-blue);
  color: var(--cyre-white);
}

/* Logo area */
#logo {
  max-height: 60px;
  width: auto;
}

/* Mobile nav toggle */
#et_mobile_nav_menu .mobile_nav.opened span,
#et_mobile_nav_menu .mobile_nav.closed span {
  background-color: var(--cyre-blue);
}


/* =====================================================
   6. BUTTONS & CTAs
   ===================================================== */

/*
  Divi uses inline styles on buttons — these overrides require
  !important only on properties where Divi inlines them.
  Colour and background are the main inline-styled properties.
*/

/* Primary button — "Book a Discovery Call" */
.et_pb_button,
a.et_pb_button {
  background-color: var(--cyre-red-btn) !important;
  color: var(--cyre-white) !important;
  border: 2px solid var(--cyre-red-btn) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 14px 28px !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition) !important;
  cursor: pointer;
  display: inline-block;
}

.et_pb_button:hover,
a.et_pb_button:hover {
  background-color: var(--cyre-red-hover) !important;
  border-color: var(--cyre-red-hover) !important;
  color: var(--cyre-white) !important;
  box-shadow: 0 4px 16px rgba(139, 40, 23, 0.3) !important;
  text-decoration: none !important;
}

/* Secondary / ghost button */
.et_pb_button.cyre-btn-secondary,
a.et_pb_button.cyre-btn-secondary {
  background-color: transparent !important;
  color: var(--cyre-blue) !important;
  border: 2px solid var(--cyre-blue) !important;
}

.et_pb_button.cyre-btn-secondary:hover,
a.et_pb_button.cyre-btn-secondary:hover {
  background-color: var(--cyre-blue) !important;
  color: var(--cyre-white) !important;
  border-color: var(--cyre-blue) !important;
}

/* Button on dark/blue backgrounds */
.et_pb_section--dark .et_pb_button,
.et_pb_section--dark a.et_pb_button {
  background-color: var(--cyre-white) !important;
  color: var(--cyre-blue) !important;
  border-color: var(--cyre-white) !important;
}

.et_pb_section--dark .et_pb_button:hover,
.et_pb_section--dark a.et_pb_button:hover {
  background-color: var(--cyre-light) !important;
  border-color: var(--cyre-light) !important;
}


/* =====================================================
   7. SECTIONS — GLOBAL PATTERNS
   ===================================================== */

/* Standard section padding */
.et_pb_section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* White section */
.et_pb_section--white {
  background-color: var(--cyre-white) !important;
}

/* Light grey section */
.et_pb_section--light {
  background-color: var(--cyre-light) !important;
}

/* Cyre Blue section */
.et_pb_section--blue {
  background-color: var(--cyre-blue) !important;
}

.et_pb_section--blue h1,
.et_pb_section--blue h2,
.et_pb_section--blue h3,
.et_pb_section--blue p {
  color: var(--cyre-white) !important;
}

/* Red ribbon accent — horizontal bar */
.cyre-ribbon {
  display: block;
  width: 56px;
  height: 4px;
  background-color: var(--cyre-red);
  margin-bottom: var(--space-sm);
  border-radius: 2px;
}

/* Section intro label (small caps above heading) */
.cyre-section-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyre-red);
  margin-bottom: var(--space-xs);
}


/* =====================================================
   8. HERO SECTIONS
   ===================================================== */

/* Full-width hero */
.et_pb_fullwidth_header.cyre-hero {
  min-height: 600px;
  display: flex;
  align-items: center;
}

.et_pb_fullwidth_header.cyre-hero .et_pb_fullwidth_header_container {
  padding: var(--space-xl) 0;
}

.et_pb_fullwidth_header.cyre-hero .et_pb_fullwidth_header_container .title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.75rem);
  font-weight: 700;
  color: var(--cyre-white) !important;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
}

.et_pb_fullwidth_header.cyre-hero .et_pb_fullwidth_header_container .et_pb_fullwidth_header_subhead {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 600px;
  line-height: 1.65;
}

/* Hero overlay — blue tint over industry hero images */
.cyre-hero-overlay {
  position: relative;
}

.cyre-hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26, 60, 110, 0.82) 0%,
    rgba(26, 60, 110, 0.60) 60%,
    rgba(26, 60, 110, 0.40) 100%
  );
  z-index: 1;
}

.cyre-hero-overlay > * {
  position: relative;
  z-index: 2;
}

/* Industry hero rotating background (homepage) */
.cyre-hero-industry {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.8s ease;
}


/* =====================================================
   9. SERVICE TIER CARDS
   ===================================================== */

/* Card grid wrapper — use Divi row with equal-height columns */
.cyre-service-card {
  background-color: var(--cyre-white);
  border: 1px solid #E8EDF5;
  border-top: 4px solid var(--cyre-blue);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  height: 100%;
  transition: box-shadow var(--transition), transform var(--transition);
}

.cyre-service-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.cyre-service-card__tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyre-grey);
  margin-bottom: var(--space-xs);
}

.cyre-service-card__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cyre-blue);
  margin-bottom: var(--space-sm);
}

.cyre-service-card__title span {
  color: var(--cyre-red);
}

.cyre-service-card__body {
  font-size: 15px;
  color: var(--cyre-charcoal);
  line-height: 1.65;
}

.cyre-service-card__ideal {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--cyre-light);
  font-size: 13px;
  color: var(--cyre-grey);
  font-style: italic;
}

/* Tier accent colour overrides — top border */
.cyre-service-card--1 { border-top-color: #1A3C6E; }
.cyre-service-card--2 { border-top-color: #2255A0; }
.cyre-service-card--3 { border-top-color: #2E6E9E; }
.cyre-service-card--4 { border-top-color: #A6310B; }
.cyre-service-card--5 { border-top-color: #1A3C6E; }
.cyre-service-card--6 { border-top-color: #C0392B; }
.cyre-service-card--7 { border-top-color: #2C3E50; }


/* =====================================================
   10. PERSONA CARDS (Three Types of Clients)
   ===================================================== */

.cyre-persona {
  background-color: var(--cyre-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cyre-persona::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--cyre-blue);
}

.cyre-persona__icon {
  width: 64px;
  height: 64px;
  background-color: var(--cyre-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}

.cyre-persona__name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cyre-blue);
  margin-bottom: var(--space-xs);
}

.cyre-persona__stage {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyre-red);
  margin-bottom: var(--space-sm);
}

.cyre-persona__body {
  font-size: 15px;
  color: var(--cyre-charcoal);
  line-height: 1.65;
}

.cyre-persona__hook {
  margin-top: var(--space-sm);
  font-weight: 700;
  color: var(--cyre-blue);
  font-style: italic;
}


/* =====================================================
   11. TESTIMONIAL
   ===================================================== */

.cyre-testimonial {
  background-color: var(--cyre-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  position: relative;
}

.cyre-testimonial::before {
  content: '\201C';
  position: absolute;
  top: -20px;
  left: var(--space-md);
  font-family: Georgia, serif;
  font-size: 120px;
  color: rgba(255, 255, 255, 0.12);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.cyre-testimonial__quote {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--cyre-white);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.cyre-testimonial__attribution {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.80);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.cyre-testimonial__attribution::before {
  content: '— ';
}


/* =====================================================
   12. VALUES / HOW WE WORK GRID
   ===================================================== */

.cyre-value {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--cyre-light);
}

.cyre-value:last-child {
  border-bottom: none;
}

.cyre-value__number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: var(--cyre-blue);
  color: var(--cyre-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}

.cyre-value__title {
  font-weight: 700;
  color: var(--cyre-blue);
  margin-bottom: 4px;
}

.cyre-value__body {
  font-size: 15px;
  color: var(--cyre-charcoal);
  line-height: 1.6;
  margin: 0;
}


/* =====================================================
   13. CONTACT FORM
   ===================================================== */

/* WPForms / Gravity Forms / Ninja Forms compatibility */
.cyre-contact-form .wpforms-container,
.cyre-contact-form .gform_wrapper,
.cyre-contact-form form {
  max-width: 640px;
  margin: 0 auto;
}

.cyre-contact-form label,
.cyre-contact-form .wpforms-field-label,
.cyre-contact-form .gfield_label {
  font-weight: 700;
  font-size: 15px;
  color: var(--cyre-blue);
  margin-bottom: 6px;
  display: block;
}

.cyre-contact-form input[type="text"],
.cyre-contact-form input[type="email"],
.cyre-contact-form input[type="tel"],
.cyre-contact-form textarea,
.cyre-contact-form select,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #D0D7E8;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--cyre-charcoal);
  background-color: var(--cyre-white);
  transition: border-color var(--transition), outline var(--transition);
  appearance: none;
}

.cyre-contact-form input:focus-visible,
.cyre-contact-form textarea:focus-visible,
.wpforms-container input:focus-visible,
.wpforms-container textarea:focus-visible {
  outline: 3px solid var(--cyre-blue);
  outline-offset: 2px;
  border-color: var(--cyre-blue);
}

.cyre-contact-form .wpforms-field,
.cyre-contact-form .gfield {
  margin-bottom: 20px;
}

/* Required marker */
.cyre-contact-form .wpforms-required-label,
.cyre-contact-form .gfield_required {
  color: var(--cyre-red);
  margin-left: 3px;
}

/* Submit button (inherits .et_pb_button) */
.cyre-contact-form .wpforms-submit,
.cyre-contact-form input[type="submit"],
.cyre-contact-form button[type="submit"] {
  background-color: var(--cyre-red-btn) !important;
  color: var(--cyre-white) !important;
  border: 2px solid var(--cyre-red-btn) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  cursor: pointer;
  transition: background-color var(--transition), box-shadow var(--transition) !important;
}

.cyre-contact-form .wpforms-submit:hover,
.cyre-contact-form input[type="submit"]:hover,
.cyre-contact-form button[type="submit"]:hover {
  background-color: var(--cyre-red-hover) !important;
  border-color: var(--cyre-red-hover) !important;
  box-shadow: 0 4px 16px rgba(139, 40, 23, 0.3) !important;
}

/* Error state */
.cyre-contact-form input:invalid,
.cyre-contact-form textarea:invalid,
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error {
  border-color: var(--cyre-red) !important;
  background-color: rgba(192, 57, 43, 0.04) !important;
}

/* Error messages */
.wpforms-error,
.gfield_error,
.cyre-form-error {
  color: var(--cyre-red);
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* Address block on contact page */
.cyre-address {
  background-color: var(--cyre-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border-left: 4px solid var(--cyre-blue);
}

.cyre-address h3 {
  font-size: 1.1rem;
  color: var(--cyre-blue);
  margin-bottom: var(--space-sm);
}

.cyre-address p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--cyre-charcoal);
  margin: 0;
}

.cyre-address a {
  color: var(--cyre-blue);
  font-weight: 600;
}


/* =====================================================
   14. FOOTER
   ===================================================== */

#main-footer {
  background-color: var(--cyre-blue) !important;
}

#main-footer .footer-widget h4,
#main-footer .footer-widget h3,
.et_pb_widget_area_header {
  font-family: var(--font-heading);
  color: var(--cyre-white) !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
}

#main-footer .footer-widget,
#main-footer .et_pb_widget,
#main-footer p,
#main-footer li,
#main-footer a {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 14px;
  line-height: 1.75;
}

#main-footer a:hover {
  color: var(--cyre-white) !important;
  text-decoration: underline;
}

/* Footer bottom bar */
#footer-bottom {
  background-color: var(--cyre-blue-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#footer-bottom,
#footer-bottom p,
#footer-bottom a {
  color: rgba(255, 255, 255, 0.60) !important;
  font-size: 13px;
}

#footer-bottom a:hover {
  color: var(--cyre-white) !important;
}

/* Tagline in footer */
.cyre-footer-tagline {
  font-family: var(--font-logo);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.70) !important;
  margin-top: var(--space-xs);
}


/* =====================================================
   15. ANIMATED LOGO
   ===================================================== */

/* Container for the animated logo embed */
.cyre-animated-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyre-animated-logo iframe,
.cyre-animated-logo embed {
  border: none;
  max-width: 100%;
}


/* =====================================================
   16. UTILITY CLASSES
   ===================================================== */

.cyre-text-blue    { color: var(--cyre-blue) !important; }
.cyre-text-red     { color: var(--cyre-red) !important; }
.cyre-text-white   { color: var(--cyre-white) !important; }
.cyre-text-grey    { color: var(--cyre-grey) !important; }
.cyre-text-charcoal { color: var(--cyre-charcoal) !important; }

.cyre-bg-blue      { background-color: var(--cyre-blue) !important; }
.cyre-bg-light     { background-color: var(--cyre-light) !important; }
.cyre-bg-white     { background-color: var(--cyre-white) !important; }

.cyre-center       { text-align: center; }
.cyre-max-narrow   { max-width: 680px; margin-left: auto; margin-right: auto; }
.cyre-max-mid      { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Visually hidden (for screen readers) */
.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;
}


/* =====================================================
   17. DIVI MODULE OVERRIDES
   ===================================================== */

/* Blurb module — service/feature icons */
.et_pb_blurb .et_pb_main_blurb_image {
  margin-bottom: var(--space-sm);
}

.et_pb_blurb_content .et_pb_blurb_container .et_pb_blurb_description p {
  color: var(--cyre-charcoal);
  font-size: 15px;
}

/* Text module */
.et_pb_text_inner p:last-child {
  margin-bottom: 0;
}

/* Divider */
.et_pb_divider_internal {
  border-top-color: var(--cyre-blue-light) !important;
}

.et_pb_divider--red .et_pb_divider_internal {
  border-top-color: var(--cyre-red) !important;
  border-top-width: 3px !important;
}

/* CTA module */
.et_pb_cta {
  border-radius: var(--radius-md);
}

/* Testimonial module */
.et_pb_testimonial {
  border: none !important;
  background-color: var(--cyre-blue) !important;
  border-radius: var(--radius-lg) !important;
}

.et_pb_testimonial .et_pb_testimonial_description p {
  color: var(--cyre-white) !important;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.75;
}

.et_pb_testimonial .et_pb_testimonial_author {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 700;
}

.et_pb_testimonial_portrait {
  border: 3px solid rgba(255, 255, 255, 0.3) !important;
}

/* Row & column tightening */
.et_pb_row {
  max-width: 1200px;
}

.et_pb_row.cyre-row--wide {
  max-width: 1400px;
}

.et_pb_row.cyre-row--narrow {
  max-width: 800px;
}


/* =====================================================
   18. RESPONSIVE
   ===================================================== */

@media screen and (max-width: 980px) {
  :root {
    --space-lg: 48px;
    --space-xl: 72px;
  }

  .et_pb_section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .cyre-testimonial {
    padding: var(--space-md);
  }

  .cyre-testimonial::before {
    font-size: 80px;
    top: -10px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --space-lg: 40px;
    --space-xl: 56px;
  }

  body {
    font-size: 16px;
  }

  .et_pb_fullwidth_header.cyre-hero {
    min-height: 460px;
  }

  .cyre-service-card {
    margin-bottom: var(--space-sm);
  }

  .cyre-persona {
    margin-bottom: var(--space-sm);
  }

  .cyre-testimonial {
    padding: var(--space-sm) var(--space-md);
  }

  /* Stack value items */
  .cyre-value {
    flex-direction: column;
  }

  /* Touch target minimum 44x44 */
  .et_pb_button,
  a.et_pb_button,
  nav a,
  button {
    min-height: 44px;
  }
}

@media screen and (max-width: 480px) {
  .et_pb_button,
  a.et_pb_button {
    width: 100%;
    text-align: center;
    display: block;
  }

  .cyre-contact-form .wpforms-submit,
  .cyre-contact-form input[type="submit"] {
    width: 100% !important;
  }
}


/* =====================================================
   19. PRINT
   ===================================================== */

@media print {
  #main-header,
  #main-footer,
  .et_pb_button,
  .skip-link {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10pt;
    color: #555;
  }
}


/* =====================================================
   20. HERO TAGLINE
   ===================================================== */

/* Ensure hero text module content renders above overlay */
.cyre-hero-overlay .et_pb_row {
  position: relative;
  z-index: 2;
}

.cyre-hero-overlay .et_pb_text .et_pb_module_inner p,
.cyre-hero-overlay .et_pb_text .et_pb_module_inner h1,
.cyre-hero-overlay .et_pb_text .et_pb_module_inner h2 {
  color: #FFFFFF !important;
}

.cyre-hero .hero-tagline {
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: 0.02em;
  line-height: 1.7;
  margin-top: 16px;
  margin-bottom: 0;
}


/* =====================================================
   21. ANIMATED HEADER LOGO
   ===================================================== */

/* Hide static Divi logo img when animated logo is injected */
.cyre-header-anim-logo ~ img,
.et_pb_menu__logo .cyre-logo-replaced {
  display: none !important;
}

/* Animated logo wrapper in header */
.cyre-header-anim-logo {
  display: block;
  width: 200px;
  max-width: 100%;
}

.cyre-header-anim-logo svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Initial hidden states */
.cyre-header-anim-logo .ribbon-top,
.cyre-header-anim-logo .ribbon-bottom {
  clip-path: inset(0 100% 0 0);
}

.cyre-header-anim-logo .text-group {
  clip-path: inset(0 100% 0 0);
}

.cyre-header-anim-logo .tagline {
  opacity: 0;
}

/* Animated states */
.cyre-header-anim-logo.animate .ribbon-top {
  animation: cyre-sweep-in 2s cubic-bezier(0.22, 0.61, 0.36, 1) 0s forwards;
}

.cyre-header-anim-logo.animate .ribbon-bottom {
  animation: cyre-sweep-in 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}

.cyre-header-anim-logo.animate .text-group {
  animation: cyre-write-in 2.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.9s forwards;
}

.cyre-header-anim-logo.animate .tagline {
  animation: cyre-fade-in 0.9s ease-out 2.8s forwards;
}

@keyframes cyre-sweep-in {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

@keyframes cyre-write-in {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 -5% 0 0); }
}

@keyframes cyre-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Responsive sizing */
@media (max-width: 767px) {
  .cyre-header-anim-logo {
    width: 150px;
  }
}

/* -------------------------------------------------------
   22. Hide original logo image when animated logo injected
   ------------------------------------------------------- */
img.cyre-logo-replaced {
  display: none !important;
}

/* -------------------------------------------------------
   20. Hero section — overlay z-index & text colours
   ------------------------------------------------------- */
.cyre-hero-overlay .et_pb_row { position: relative; z-index: 2; }
.cyre-hero-overlay .et_pb_text .et_pb_module_inner p,
.cyre-hero-overlay .et_pb_text .et_pb_module_inner h1,
.cyre-hero-overlay .et_pb_text .et_pb_module_inner h2 { color: #FFFFFF !important; }

/* -------------------------------------------------------
   23. Hero section — padding, tagline alignment & red rule
   ------------------------------------------------------- */
/* Push content below the absolute-positioned header overlay */
.cyre-hero.et_pb_section {
  padding-top: 240px !important;
  padding-bottom: 100px !important;
  min-height: 520px;
}

/* Tagline: right-aligned, italic, with red decorative rule */
.cyre-hero .hero-tagline {
  text-align: right !important;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  letter-spacing: 0.03em;
  line-height: 1.75;
  margin-top: 20px;
  padding-bottom: 0;
}
.cyre-hero .hero-tagline::after {
  content: '';
  display: block;
  width: 55%;
  height: 3px;
  background: #be1e2d;
  margin-left: auto;
  margin-top: 14px;
  border-radius: 2px;
}

/* h1 sizing */
.cyre-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
}

@media (max-width: 980px) {
  .cyre-hero.et_pb_section { padding-top: 200px !important; }
}
@media (max-width: 767px) {
  .cyre-hero.et_pb_section { padding-top: 160px !important; padding-bottom: 60px !important; }
  .cyre-hero .hero-tagline::after { margin-left: auto; width: 60%; }
}
/* -------------------------------------------------------
   24. Hero section — animated logo overlay
   ------------------------------------------------------- */
.cyre-hero-anim-logo {
  display: block;
  width: 480px;
  max-width: 88%;
  margin: 0 auto 32px;
}
.cyre-hero-anim-logo svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Animation initial states */
.cyre-hero-anim-logo .ribbon-top,
.cyre-hero-anim-logo .ribbon-bottom { clip-path: inset(0 100% 0 0); }
.cyre-hero-anim-logo .text-group    { clip-path: inset(0 100% 0 0); }
.cyre-hero-anim-logo .tagline       { opacity: 0; }
/* Animate in */
.cyre-hero-anim-logo.animate .ribbon-top    { animation: cyre-sweep-in  2s   cubic-bezier(0.22,0.61,0.36,1)  0s    forwards; }
.cyre-hero-anim-logo.animate .ribbon-bottom { animation: cyre-sweep-in  1.8s cubic-bezier(0.22,0.61,0.36,1)  0.15s forwards; }
.cyre-hero-anim-logo.animate .text-group    { animation: cyre-write-in  2.2s cubic-bezier(0.25,0.1,0.25,1)   0.9s  forwards; }
.cyre-hero-anim-logo.animate .tagline       { animation: cyre-fade-in   0.9s ease-out                        2.8s  forwards; }
@media (max-width: 767px) {
  .cyre-hero-anim-logo { width: 300px; }
}