/* WYRA Group — Brand Light (1.2.23)
   Mobile-first, Elementor-friendly, performance-focused UI system
*/

/* ------------------------------
   1) Global Reset + Overflow Lock
------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", "Inter", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  position: relative;
}
img, video, svg, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Reduce accidental zoom on touch: */
a, button, input, textarea, select { touch-action: manipulation; }

/* ------------------------------
   2) Design Tokens (Brand System)
------------------------------ */
:root{
  --brand-primary: #7c3aed;   /* violet */
  --brand-primary2: #d946ef;  /* magenta */
  --brand-accent: #ec4899;    /* rose */
  --bg: #f6f4ff;
  --surface: rgba(255,255,255,0.86);
  --surface-strong: #ffffff;
  --text: #0b1020;
  --muted: rgba(11,16,32,0.66);
  --border: rgba(11,16,32,0.10);

  --grad-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary2) 55%, var(--brand-accent) 100%);
  --grad-accent: linear-gradient(135deg, #2563eb 0%, var(--brand-primary) 45%, var(--brand-accent) 100%);

  /* Back-compat alias used across components (buttons, CF7 submit, etc.) */
  --brand-gradient: var(--grad-primary);

  --radius: 12px;
  --shadow-1: 0 10px 30px rgba(12, 9, 26, 0.08);
  --shadow-2: 0 18px 60px rgba(12, 9, 26, 0.12);

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;

  --container: 1200px;
}

/* ------------------------------
   3) Background Scene (Light / Subtle)
------------------------------ */
.wyra-scene{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.wyra-noise{
  position: absolute;
  inset: -10%;
  opacity: 0.035;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.wyra-orb{
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.55;
  transform: translateZ(0);
}
.wyra-orb--a{
  left: -180px;
  top: -220px;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,0.55), rgba(217,70,239,0.0) 65%);
}
.wyra-orb--b{
  right: -200px;
  bottom: -240px;
  background: radial-gradient(circle at 60% 40%, rgba(236,72,153,0.45), rgba(37,99,235,0.0) 65%);
}

/* ------------------------------
   4) Accessibility
------------------------------ */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 10px;
  background: var(--surface-strong);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  z-index: 9999;
}
.skip-link:focus{ left: 10px; }

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* ------------------------------
   5) Layout
------------------------------ */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 560px){
  .container{ padding-left: 16px; padding-right: 16px; }
}

.site-content{ padding-top: var(--space-6); }
.wyra-page--full{ padding: 0; }

/* ------------------------------
   6) Header + Navigation
------------------------------ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(246, 244, 255, 0.78);
  border-bottom: 1px solid rgba(11,16,32,0.08);
  /* iOS notch support + CLS-safe sticky behavior */
  padding-top: env(safe-area-inset-top);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Sticky polish on scroll (no layout shift) */
.site-header.is-scrolled{
  background: rgba(255,255,255,0.88);
  border-bottom-color: rgba(11,16,32,0.12);
  box-shadow: 0 10px 28px rgba(17,24,39,0.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 72px;
  gap: var(--space-3);
}
.brand{ display:flex; align-items:center; min-width: 0; }
.brand-logo{ display:flex; align-items:center; }
.brand-logo__img{ display:block; height: 40px; width: auto; }
.brand .custom-logo{ display:block; height: 40px; width:auto; }
.brand .custom-logo-link{ display:flex; align-items:center; }
@media (max-width: 640px){
  .header-inner{ min-height: 64px; }
  .brand-logo__img, .brand .custom-logo{ height: 30px; }
}

.site-nav--desktop{ display:none; }
.nav-menu{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  gap: var(--space-4);
  align-items:center;
}
.nav-menu a{
  color: var(--text);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 2px;
  border-radius: 10px;
}
.nav-menu a:hover{
  color: var(--brand-primary);
}
.nav-menu .current-menu-item > a{
  color: var(--brand-primary);
}

/* Desktop nav appears on wider screens */
@media (min-width: 1024px){
  .site-nav--desktop{ display:block; }
  .nav-toggle{ display:none; }
}

/* Desktop nav — premium spacing + active underline + dropdown */
@media (min-width: 1024px){
  .site-nav--desktop{ display:flex; align-items:center; }
  .site-nav--desktop .nav-menu--desktop{ gap: 22px; }
  .site-nav--desktop .nav-menu--desktop > li{ position: relative; }
  .site-nav--desktop .nav-menu--desktop > li > a{
    position: relative;
    padding: 10px 10px;
    border-radius: 12px;
    transition: color .15s ease, background .15s ease, transform .15s ease;
  }
  .site-nav--desktop .nav-menu--desktop > li > a:hover{
    background: rgba(255,255,255,0.55);
    color: var(--brand-primary);
  }
  .site-nav--desktop .nav-menu--desktop > li > a:focus-visible{
    outline: 3px solid rgba(124,58,237,0.22);
    outline-offset: 2px;
  }

  /* Active state */
  .site-nav--desktop .nav-menu--desktop > li.current-menu-item > a,
  .site-nav--desktop .nav-menu--desktop > li.current_page_item > a,
  .site-nav--desktop .nav-menu--desktop > li.current-menu-ancestor > a,
  .site-nav--desktop .nav-menu--desktop > li.current_page_parent > a{
    color: var(--brand-primary);
    background: rgba(255,255,255,0.45);
  }
  .site-nav--desktop .nav-menu--desktop > li.current-menu-item > a::after,
  .site-nav--desktop .nav-menu--desktop > li.current_page_item > a::after,
  .site-nav--desktop .nav-menu--desktop > li.current-menu-ancestor > a::after,
  .site-nav--desktop .nav-menu--desktop > li.current_page_parent > a::after{
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand-gradient);
    opacity: .9;
  }

  /* Dropdown (depth 2) */
  .site-nav--desktop .nav-menu--desktop .sub-menu{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(11,16,32,0.10);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(17,24,39,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index: 1100;
  }
  .site-nav--desktop .nav-menu--desktop li:hover > .sub-menu,
  .site-nav--desktop .nav-menu--desktop li:focus-within > .sub-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .site-nav--desktop .nav-menu--desktop .sub-menu a{
    display: block;
    padding: 10px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
  }
  .site-nav--desktop .nav-menu--desktop .sub-menu a:hover{
    background: rgba(124,58,237,0.08);
    color: var(--brand-primary);
  }
}

/* Hamburger button */
.nav-toggle{
  border: 1px solid rgba(11,16,32,0.12);
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(12, 9, 26, 0.06);
}
.nav-toggle:focus-visible{ outline: 3px solid rgba(124,58,237,0.25); outline-offset: 2px; }
.nav-toggle__icon{
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 999px;
  position: relative;
  display:block;
  transform: translateZ(0);
}
.nav-toggle__icon::before,
.nav-toggle__icon::after{
  content:"";
  position:absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 999px;
}
.nav-toggle__icon::before{ top: -6px; }
.nav-toggle__icon::after{ top: 6px; }

/* Active state (turn into X) */
.nav-toggle.is-active .nav-toggle__icon{
  background: transparent;
}
.nav-toggle.is-active .nav-toggle__icon::before{
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__icon::after{
  top: 0;
  transform: rotate(-45deg);
}

/* ------------------------------
   7) Offcanvas Mobile Menu (Slide-in)
------------------------------ */
.offcanvas{
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease
}
.offcanvas.is-open{
  opacity: 1;
  pointer-events: auto;
}
.offcanvas__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  /* Subtle modern feel; safe fallback when unsupported */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.offcanvas__panel{
  position:absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(86vw, 420px);
  background: #fff;
  border-left: 1px solid rgba(11,16,32,0.10);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
  box-shadow: var(--shadow-2);
  display:flex;
  flex-direction:column;
}

/* Premium brand accent line on the panel */
.offcanvas__panel::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 4px;
  background: var(--brand-gradient);
}
.offcanvas.is-open .offcanvas__panel{ transform: translateX(0); }

/* Phone: use full-width panel for a true "pro" menu feel */
@media (max-width: 767.98px){
  .offcanvas__panel{
    width: 100vw;
    left: 0;
    right: 0;
    border-left: 0;
  }
}

.offcanvas__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 16px 12px;
  border-bottom: 1px solid rgba(11,16,32,0.08);
}
.offcanvas__title{
  font-weight: 800;
  letter-spacing: 0.02em;
}
.offcanvas__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(11,16,32,0.12);
  background: rgba(255,255,255,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.offcanvas__close:focus-visible{
  outline: 3px solid rgba(124,58,237,0.25);
  outline-offset: 2px;
}
.icon-x{
  width: 18px;
  height: 18px;
  position: relative;
  display:block;
}
.icon-x::before,
.icon-x::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 999px;
  transform-origin: center;
}
.icon-x::before{ transform: translate(-50%, -50%) rotate(45deg); }
.icon-x::after{ transform: translate(-50%, -50%) rotate(-45deg); }

.site-nav--mobile{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px 24px;
}

/* Mobile menu: centered, tap-friendly (one item per row) */
.site-nav--mobile .nav-menu--mobile{
  /* Extra specificity + !important to beat plugin/Elementor nav styles */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 360px;
  overflow: visible;
}
.site-nav--mobile .nav-menu--mobile li{ border: 0; width: 100%; }
.site-nav--mobile .nav-menu--mobile a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 44px;
  width: 100%;
  padding: 12px 14px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid rgba(11,16,32,0.08);
  background: rgba(255,255,255,0.75);
}
.site-nav--mobile .nav-menu--mobile a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-nav--mobile .nav-menu--mobile .current-menu-item > a{
  border-color: rgba(124,58,237,0.28);
  box-shadow: 0 10px 24px rgba(12, 9, 26, 0.08);
}

/* Scroll lock class used by JS */
html.wyra-menu-open,
body.wyra-scroll-lock{
  overflow: hidden;
}
body.wyra-scroll-lock{
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}



/* ==============================
   7B) Navigation hardening + Mobile menu polish
   - Ensure hamburger never appears on desktop
   - Ensure offcanvas never renders on desktop
   - Premium readable list (one item per row)
============================== */
@media (min-width: 1024px){
  .site-nav--desktop{ display:flex !important; }
  .nav-toggle{ display:none !important; }
  .offcanvas{ display:none !important; }
}

@media (max-width: 1023.98px){
  .site-nav--desktop{ display:none !important; }
}

/* Mobile offcanvas should feel like a real full-screen menu */
@media (max-width: 767.98px){
  .offcanvas__panel{
    left: 0;
    right: 0;
    width: 100vw;
    border-left: 0;
  }
}

/* On tablet, keep a premium drawer width */
@media (min-width: 768px) and (max-width: 1023.98px){
  .offcanvas__panel{ width: min(86vw, 420px); }
}

/* ==============================
   7C) Mobile menu final hardening (requested)
   - Full-width white panel on phone + tablet
   - True centered vertical list (one item per row)
   - Prevent awkward word wrapping
============================== */
@media (max-width: 1023.98px){
  /* Make it feel like a true mobile menu: full-height + full-width surface */
  .offcanvas__panel{
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    border-left: 0 !important;
  }

  /* Ensure the nav area can center items vertically */
  .site-nav--mobile{
    min-height: calc(100dvh - 64px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Force a strict vertical stack (beats Elementor/menu CSS) */
  .offcanvas .nav-menu--mobile,
  .offcanvas .nav-menu--mobile ul{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .offcanvas .nav-menu--mobile li{
    display: block !important;
    width: 100% !important;
  }
  .offcanvas .nav-menu--mobile a{
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap;
  }
}

/* Make sure the mobile nav area fills the panel height so items can center nicely */
.offcanvas__panel{ min-height: 100dvh; }
.site-nav--mobile{ min-height: calc(100dvh - 64px); }

/* Higher specificity to beat generic menu styles from plugins/builders */
.site-nav--mobile .nav-menu--mobile{ display:flex !important; flex-direction:column !important; }
.site-nav--mobile .nav-menu--mobile li{ width:100% !important; }
.site-nav--mobile .nav-menu--mobile a{ width:100% !important; text-align:center; }

/* Offcanvas panel: add safe-area padding and premium surface */
.offcanvas__panel{
  padding-bottom: env(safe-area-inset-bottom);
}

.site-nav--mobile{
  padding: 8px 16px 24px;
}

/* Menu “surface” block inside panel */
.nav-menu--mobile{
  max-width: 320px;
  width: 100%;
  gap: 16px;
}

.nav-menu--mobile a{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(11,16,32,0.10);
  box-shadow: 0 12px 28px rgba(12, 9, 26, 0.06);
  min-height: 48px;
  font-size: 17px;
  letter-spacing: 0.01em;
}

/* Active state: subtle gradient underline (premium, not neon) */
.nav-menu--mobile .current-menu-item > a{
  position: relative;
  font-weight: 800;
}
.nav-menu--mobile .current-menu-item > a::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: var(--brand-gradient);
  opacity: 0.9;
}

/* Contact inline (footer/contact sections) */
.contact-inline{
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.65);
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.contact-inline__label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.contact-inline__value{
  font-size: 14px;
  font-weight: 600;
}
.contact-inline a{ color: var(--text); }
.contact-inline a:hover{ text-decoration: underline; text-underline-offset: 3px; }
/* ------------------------------
   8) Typography
------------------------------ */
h1, h2, h3, h4{
  margin: 0 0 var(--space-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
h1{ font-size: clamp(32px, 5vw, 56px); }
h2{ font-size: clamp(24px, 3.2vw, 36px); }
h3{ font-size: 18px; }
p{ margin: 0 0 var(--space-4); color: var(--text); }
.muted{ color: var(--muted); }

/* ------------------------------
   9) Buttons
------------------------------ */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration:none;
  border: 1px solid rgba(11,16,32,0.12);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  will-change: transform;
  user-select:none;
}
.button:focus-visible{ outline: 3px solid rgba(124,58,237,0.25); outline-offset: 2px; }
.button--primary{
  color:#fff;
  background: var(--grad-primary);
  border-color: rgba(124,58,237,0.18);
  box-shadow: 0 16px 40px rgba(124,58,237,0.20);
}
.button--secondary{
  color: var(--text);
  background: rgba(255,255,255,0.65);
}
.button:hover{ transform: translateY(-1px); }
.button--primary:hover{ box-shadow: 0 18px 55px rgba(124,58,237,0.26); }
.button--secondary:hover{ border-color: rgba(124,58,237,0.22); }

/* ------------------------------
   9b) Global Buttons + Forms (Elementor/Gutenberg)
   - Unifies buttons/inputs across plugins while avoiding header UI controls
------------------------------ */

/* Elementor buttons */
.elementor a.elementor-button,
.elementor .elementor-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none !important;
  line-height: 1.1;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
  will-change: transform;
}
.elementor a.elementor-button:focus-visible,
.elementor .elementor-button:focus-visible{
  outline: 3px solid rgba(124,58,237,0.25);
  outline-offset: 2px;
}

/* Gutenberg buttons */
.wp-block-button__link,
.wp-element-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px !important;
  font-weight: 800;
  text-decoration: none !important;
  line-height: 1.1;
  border: 1px solid rgba(11,16,32,0.12);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, border-color 160ms ease;
}
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible{
  outline: 3px solid rgba(124,58,237,0.25);
  outline-offset: 2px;
}

/* Default Gutenberg fill */
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
  color: #fff;
  background: var(--grad-primary);
  border-color: rgba(124,58,237,0.18);
  box-shadow: 0 16px 40px rgba(124,58,237,0.18);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(124,58,237,0.22);
}

/* Gutenberg outline */
.wp-block-button.is-style-outline .wp-block-button__link{
  color: var(--text);
  background: rgba(255,255,255,0.65);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  transform: translateY(-1px);
}

/* Form submits (avoid styling header/mobile menu controls) */
main input[type="submit"],
main button[type="submit"],
.page-template-page-contact input[type="submit"],
.page-template-page-contact button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 14px 28px rgba(17,24,39,0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
main input[type="submit"]:hover,
main button[type="submit"]:hover,
.page-template-page-contact input[type="submit"]:hover,
.page-template-page-contact button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(17,24,39,0.16);
  filter: saturate(1.05);
}

/* Global inputs (frontend) */
main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="url"],
main input[type="password"],
main input[type="search"],
main input[type="number"],
main textarea,
main select{
  width: 100%;
  max-width: 100%;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(11,16,32,0.12);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  outline: none;
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}
main textarea{ min-height: 140px; resize: vertical; }
main input::placeholder,
main textarea::placeholder{ color: rgba(11,16,32,0.45); }

main input[type="text"]:focus,
main input[type="email"]:focus,
main input[type="tel"]:focus,
main input[type="url"]:focus,
main input[type="password"]:focus,
main input[type="search"]:focus,
main input[type="number"]:focus,
main textarea:focus,
main select:focus{
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.18);
}

/* ------------------------------
   10) Sections + Cards
------------------------------ */
.section{ padding: 56px 0; }
@media (max-width: 720px){ .section{ padding: 42px 0; } }
.section-title{ margin-bottom: 8px; }
.section-subtitle{ margin-bottom: var(--space-5); max-width: 70ch; }

.grid{
  display:grid;
  gap: var(--space-5);
}
.grid--verticals{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){
  .grid--verticals{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid--verticals{ grid-template-columns: 1fr; gap: var(--space-4); }
}

.card{
  background: var(--surface);
  border: 1px solid rgba(11,16,32,0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: rgba(124,58,237,0.18);
}
.card-body{ padding: 18px; }
.card-title{ margin-bottom: 10px; font-weight: 800; }
.card-excerpt{ margin-bottom: 14px; color: var(--muted); }

/* ------------------------------
   10.1) Core Verticals — premium cards
------------------------------ */
.section--verticals .grid--verticals{ align-items: stretch; }
.section--verticals .card--vertical{ position: relative; }
.section--verticals .card--vertical::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: var(--grad-primary);
  opacity:.95;
}
.section--verticals .card--vertical .card-body{
  padding: 20px;
  display:flex;
  flex-direction:column;
  height:100%;
}
.section--verticals .card--vertical .card-title{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}
.section--verticals .card--vertical .card-title::before{
  content:"";
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 18px;
  font-weight: 800;
  background: var(--grad-primary);
  box-shadow: 0 12px 28px rgba(124,58,237,0.18);
}
.section--verticals .grid--verticals .card--vertical:nth-child(1) .card-title::before{ content:"M"; }
.section--verticals .grid--verticals .card--vertical:nth-child(2) .card-title::before{ content:"T"; }
.section--verticals .grid--verticals .card--vertical:nth-child(3) .card-title::before{ content:"D"; }
.section--verticals .grid--verticals .card--vertical:nth-child(4) .card-title::before{ content:"C"; }
.section--verticals .grid--verticals .card--vertical:nth-child(5) .card-title::before{ content:"V"; }
.section--verticals .grid--verticals .card--vertical:nth-child(6) .card-title::before{ content:"L"; }
.section--verticals .card--vertical .card-excerpt{ margin-bottom: 18px; }
.section--verticals .card--vertical .button{
  margin-top: auto;
  width: 100%;
  justify-content: center;
  background: rgba(255,255,255,0.78);
}
.section--verticals .card--vertical:hover .card-title::before{
  transform: translateY(-1px);
}
.section--verticals .card--vertical .card-title::before{ transition: transform 180ms ease, box-shadow 180ms ease; }
@media (max-width: 640px){
  .section--verticals .card--vertical .card-body{ padding: 18px; }
  .section--verticals .card--vertical .card-title::before{ width: 42px; height: 42px; flex-basis: 42px; }
}

/* ------------------------------
   11) Hero (Reserved height, no CLS)
------------------------------ */
.hero{
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hero__inner{
  min-height: clamp(560px, 78vh, 760px);
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap: var(--space-6);
  /* Keep .container left/right padding (same element) */
  padding-top: 54px;
  padding-bottom: 44px;
}
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; padding-top: 44px; }
}
.hero__bg{
  position:absolute;
  inset: 0;
  pointer-events:none;
}
.hero__mesh{
  position:absolute;
  inset: -30%;
  background: radial-gradient(circle at 20% 20%, rgba(124,58,237,0.18), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(236,72,153,0.14), transparent 55%),
              radial-gradient(circle at 60% 20%, rgba(37,99,235,0.10), transparent 55%);
  filter: blur(10px);
}
.hero__content{
  position:relative;
  z-index: 1;
}
.hero__kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(11,16,32,0.10);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
}
.hero-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.hero__meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 22px; }
.hero__chip{
  font-size: 12px;
  font-weight: 700;
  color: rgba(11,16,32,0.72);
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(11,16,32,0.08);
  padding: 6px 10px;
  border-radius: 999px;
}
.hero__art{
  position: relative;
  min-height: 360px;
  z-index: 1;
}

/* Interactive Spline container (homepage hero) */
.hero__spline-shell{
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.60));
  border: 1px solid rgba(11,16,32,0.10);
  box-shadow: var(--shadow-2);
}
.hero__spline{
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

@media (max-width: 980px){
  .hero__art{ min-height: 320px; }
}
@media (max-width: 560px){
  .hero__art{ min-height: 280px; }
}
.hero__cube{
  position:absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.60));
  border: 1px solid rgba(11,16,32,0.10);
  box-shadow: var(--shadow-2);
}
.hero__ring{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  border: 1px solid rgba(124,58,237,0.25);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 12px rgba(124,58,237,0.06);
}
.hero__ring--b{
  width: 320px;
  height: 320px;
  border-color: rgba(236,72,153,0.22);
  box-shadow: 0 0 0 14px rgba(236,72,153,0.05);
}

/* ------------------------------
   12) Contact form (theme skin, Elementor-safe)
------------------------------ */
.wyra-form, .wpcf7 form{
  max-width: 760px;
}
input, textarea, select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(11,16,32,0.14);
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.15);
}

/* ------------------------------
   13) Footer
------------------------------ */
.site-footer{
  margin-top: 60px;
  border-top: 1px solid rgba(11,16,32,0.08);
  background: rgba(255,255,255,0.62);
}
/* Brand gradient accent line (3–4px) */
.site-footer::before{
  content: "";
  display:block;
  height: 4px;
  background: var(--grad-primary);
}

.site-footer__container{
  padding: 32px 16px;
}
@media (max-width: 560px){
  .site-footer__container{ padding: 24px 16px; }
}

.site-footer__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 100%;
}
@media (max-width: 1023px){
  .site-footer__grid{ grid-template-columns: 1fr; }
}

.site-footer__title{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.site-footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 8–10px */
  font-size: 14px;
  color: rgba(11,16,32,0.72);
}

.site-footer__address{
  display: block;
  margin-top: 4px;
  line-height: 1.5;
}

.site-footer__link{
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(11,16,32,0.22);
  text-underline-offset: 3px;
  transition: transform 150ms ease, text-decoration-color 150ms ease, opacity 150ms ease;
}
.site-footer__link:hover{
  text-decoration-color: rgba(11,16,32,0.55);
}
.site-footer__link:focus-visible{
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(124,58,237,0.16);
}

.site-footer__subfooter{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(11,16,32,0.08);
  font-size: 13px;
  color: rgba(11,16,32,0.62);
}

/* ------------------------------
   14) Scroll Reveal (optional)
------------------------------ */
[data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.is-in{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* ------------------------------
   15) WooCommerce Visual Readiness (design-level)
------------------------------ */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count{
  color: var(--muted);
}
.woocommerce ul.products{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-5);
}
@media (max-width: 980px){ .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .woocommerce ul.products{ grid-template-columns: 1fr; } }
.woocommerce ul.products li.product{
  margin: 0;
  background: var(--surface);
  border: 1px solid rgba(11,16,32,0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 14px;
}
.woocommerce ul.products li.product a{
  text-decoration:none;
  color: var(--text);
}
.woocommerce ul.products li.product img{
  border-radius: 14px;
  border: 1px solid rgba(11,16,32,0.08);
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  border-radius: 12px;
  font-weight: 800;
}
.woocommerce a.button,
.woocommerce button.button{
  background: var(--grad-primary);
  color: #fff;
  border: 1px solid rgba(124,58,237,0.18);
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info{
  border-top-color: var(--brand-primary);
}
.woocommerce-checkout #payment,
.woocommerce-cart .cart-collaterals .cart_totals{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(11,16,32,0.10);
  border-radius: var(--radius);
}

/* ------------------------------
   16) Hard guard: prevent horizontal overflow from rogue elements
------------------------------ */
body > *{ max-width: 100%; }


/* ------------------------------
   17) Additional section helpers
------------------------------ */
.section--alt{
  background: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(11,16,32,0.04);
  border-bottom: 1px solid rgba(11,16,32,0.04);
}
.meta{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11,16,32,0.48);
  margin-bottom: 10px;
}

/* Generic grid default: 2 columns desktop */
.grid{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 720px){
  .grid{ grid-template-columns: 1fr; }
}

/* Impact grid */
.grid--impact{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){
  .grid--impact{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid--impact{ grid-template-columns: 1fr; }
}

/* News tiles */
.news-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
@media (max-width: 980px){
  .news-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .news-grid{ grid-template-columns: 1fr; gap: var(--space-4); }
}
.news-thumb{
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(11,16,32,0.08);
  background: rgba(255,255,255,0.6);
}
.news-thumb img{
  display:block;
  width: 100%;
  height: auto;
  transition: transform 240ms ease;
}
.news-tile:hover .news-thumb img{ transform: scale(1.03); }
.news-meta{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.news-title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
}
.news-title a{ color: var(--text); text-decoration:none; }
.news-title a:hover{ color: var(--brand-primary); }
.news-more{
  font-weight: 800;
  color: var(--brand-primary);
  text-decoration:none;
}
.card-media--placeholder{
  width: 100%;
  aspect-ratio: 16/9;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,0.10), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(236,72,153,0.08), transparent 60%),
              rgba(255,255,255,0.65);
}

/* ==============================
   Posts listing (Blog/Archive/Search)
============================== */
.grid--posts{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}
@media (max-width: 980px){
  .grid--posts{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .grid--posts{ grid-template-columns: 1fr; gap: 16px; }
}

.card-media{
  display:block;
  width:100%;
  aspect-ratio: 16/9;
  overflow:hidden;
  background: rgba(255,255,255,0.60);
  border-bottom: 1px solid rgba(11,16,32,0.08);
}
.card-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: translateZ(0);
  transition: transform 240ms ease;
}
.card--post:hover .card-media img{ transform: scale(1.03); }

.card--post .card-title a{
  color: var(--text);
  text-decoration:none;
}
.card--post .card-title a:hover{ color: var(--brand-primary); }

.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(11,16,32,0.10);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11,16,32,0.70);
  text-decoration:none;
}
.meta-chip:hover{ border-color: rgba(124,58,237,0.24); color: var(--brand-primary); }

.meta-date{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11,16,32,0.48);
}

/* Post cards — title sizing + improved readability (show more of the title) */
.card--post .card-title{
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 10px;
  font-weight: 850;
  /* show more lines than before */
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.card--post .card-title,
.card--post .card-title a{
  color: var(--text);
  text-decoration: none;
}
.card--post .card-title a:hover{ text-decoration: underline; }

/* Keep excerpt clamped for consistent card heights */
.card--post .card-excerpt{
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Mobile: slightly smaller title and show even more lines */
@media (max-width: 640px){
  .card--post .card-title{
    font-size: 16px;
    -webkit-line-clamp: 4;
  }
}
/* Pagination (WP) */
.pagination{ margin-top: 28px; }
.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  justify-content:center;
}
.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(11,16,32,0.12);
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pagination .page-numbers:hover{
  transform: translateY(-1px);
  border-color: rgba(124,58,237,0.22);
  box-shadow: 0 12px 26px rgba(12, 9, 26, 0.06);
}
.pagination .page-numbers.current{
  background: var(--grad-primary);
  color:#fff;
  border-color: rgba(124,58,237,0.20);
}
.pagination .page-numbers.dots{
  background: transparent;
  border-color: transparent;
}

@media (max-width: 640px){
  .card--post .card-body{ padding: 16px; }
  .pagination .page-numbers{ min-width: 38px; height: 38px; }
}

/* Canvas template */
.wyra-canvas__content{
  padding: 0;
}


/* Hero sparks (subtle, no overflow) */
.hero__spark{
  position:absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  opacity: 0.22;
  filter: blur(6px);
  background: radial-gradient(circle at 35% 35%, rgba(124,58,237,0.9), rgba(124,58,237,0) 65%);
}
.hero__spark--a{ top: -80px; left: 6%; }
.hero__spark--b{ top: 18%; right: -80px; background: radial-gradient(circle at 35% 35%, rgba(236,72,153,0.85), rgba(236,72,153,0) 65%); }
.hero__spark--c{ bottom: -90px; left: 38%; background: radial-gradient(circle at 35% 35%, rgba(37,99,235,0.70), rgba(37,99,235,0) 65%); }

@media (max-width: 720px){
  .hero__spark{ opacity: 0.12; }
}


/* Footer menu */
.nav-menu--footer{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  justify-content:flex-end;
}
.nav-menu--footer a{
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 8px;
}
.nav-menu--footer a:hover{ color: var(--brand-primary); }


/* Page head + prose */
.page-head{
  padding: 28px 0 10px;
}
.page-title{
  font-size: clamp(28px, 4.2vw, 44px);
  margin-bottom: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.prose{
  /* Editorial rhythm (global longform) */
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.65;
}
.prose p{ color: rgba(11,16,32,0.86); }
.prose a{
  color: var(--brand-primary);
  text-decoration: none;
  text-underline-offset: 3px;
}
.prose a:hover{
  color: var(--brand-accent);
  text-decoration: underline;
}

.prose h2{ margin-top: 28px; margin-bottom: 12px; }
.prose h3{ margin-top: 22px; margin-bottom: 10px; }
.prose h4{ margin-top: 18px; margin-bottom: 10px; }

.prose ul, .prose ol{
  margin: 0 0 18px;
  padding-left: 1.15em;
}
.prose li{ margin: 8px 0; color: rgba(11,16,32,0.86); }

.prose blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(124,58,237,0.35);
  border-radius: 12px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.08);
  color: rgba(11,16,32,0.82);
}
.prose hr{
  border: 0;
  height: 1px;
  background: rgba(11,16,32,0.10);
  margin: 26px 0;
}

@media (max-width: 640px){
  .prose{ font-size: 15.5px; }
}



/* ==============================
   About page (Template: About)
============================== */
.about-hero{
  padding: 34px 0 18px;
}
.about-hero__inner{
  max-width: 980px;
  padding: 26px 26px 22px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(12, 9, 26, 0.06);
  position: relative;
  overflow: hidden;
}
.about-hero__inner::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: var(--brand-gradient);
}
.about-hero__badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11,16,32,0.70);
  margin-bottom: 10px;
}
.about-hero__title{
  font-size: clamp(30px, 4.6vw, 52px);
  margin-bottom: 8px;
}
.about-hero__subtitle{
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.55;
  max-width: 70ch;
}
.about-hero__kicker{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.70);
  font-weight: 700;
  color: rgba(11,16,32,0.86);
}

.about-prose{
  max-width: 78ch;
}
.about-section-head{
  max-width: 78ch;
  margin-bottom: 18px;
}
.about-section-head .muted{
  margin-bottom: 0;
}

.about-divider{
  max-width: 1200px;
  margin: 10px auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.10), transparent);
  position: relative;
}
.about-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top: -2px;
  transform: translateX(-50%);
  width: 140px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand-gradient);
  opacity: 0.85;
}

.about-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.about-card{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  padding: 16px 16px 14px;
  box-shadow: 0 10px 26px rgba(12, 9, 26, 0.04);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.about-card:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 16px 36px rgba(12, 9, 26, 0.06);
}
.about-card__icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 22px rgba(12, 9, 26, 0.05);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.about-card__icon::before{
  content:"";
  position:absolute;
  inset: 0;
  background: var(--brand-gradient);
  opacity: 0.12;
}
.about-card__icon svg{
  width: 20px;
  height: 20px;
  color: rgba(11,16,32,0.78);
  position: relative;
}
.about-card__title{
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 800;
}
.about-card__text{
  font-size: 14px;
  color: rgba(11,16,32,0.78);
  margin-bottom: 0;
  line-height: 1.55;
}

.about-callouts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.about-callout{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.about-callout::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-gradient);
  opacity: 0.9;
}
.about-callout__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11,16,32,0.68);
  margin-bottom: 10px;
}
.about-callout__quote{
  font-size: 15px;
  line-height: 1.6;
  color: rgba(11,16,32,0.90);
  font-weight: 650;
}

@media (max-width: 980px){
  .about-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .about-hero__inner{ padding: 20px 18px 18px; border-radius: 14px; }
  .about-hero__subtitle{ font-size: 15px; }
  .about-cards{ grid-template-columns: 1fr; }
  .about-callouts{ grid-template-columns: 1fr; }
}


/* Optional button modifiers used in templates */
.button--glow{ /* kept intentionally subtle (no neon) */ }
.button--sheen{
  position: relative;
  overflow: hidden;
}
.button--sheen::after{
  content:"";
  position:absolute;
  inset: -120% -60%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.35), transparent 60%);
  transform: translateX(-30%);
  opacity: 0;
  transition: opacity 180ms ease, transform 380ms ease;
  pointer-events:none;
}
.button--sheen:hover::after{
  opacity: 1;
  transform: translateX(30%);
}


/* =========================
   WYRA — Contact page layout
========================= */
.page-template-page-contact .contact-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 920px){
  .page-template-page-contact .contact-grid{ grid-template-columns: 1fr; }
}


/* =========================
   WYRA — Contact Form 7
   Premium light skin matching theme
========================= */
.page-template-page-contact .wpcf7{ max-width: 100%; }

.page-template-page-contact .wpcf7 form{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 14px 36px rgba(17,24,39,0.08);
  backdrop-filter: blur(8px);
  display: grid;
  gap: 14px;
}

@media (min-width: 720px){
  /* Two columns for name + email on desktop */
  .page-template-page-contact .wpcf7 form{ grid-template-columns: 1fr 1fr; }
  /* Subject, message and submit full width */
  .page-template-page-contact .wpcf7 form p:nth-of-type(3),
  .page-template-page-contact .wpcf7 form p:nth-of-type(4),
  .page-template-page-contact .wpcf7 form p:nth-of-type(5){
    grid-column: 1 / -1;
  }
}

.page-template-page-contact .wpcf7 form p{
  margin: 0;
}

.page-template-page-contact .wpcf7 label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(17,24,39,0.78);
}

.page-template-page-contact .wpcf7 input[type="text"],
.page-template-page-contact .wpcf7 input[type="email"],
.page-template-page-contact .wpcf7 input[type="tel"],
.page-template-page-contact .wpcf7 input[type="url"],
.page-template-page-contact .wpcf7 input[type="number"],
.page-template-page-contact .wpcf7 textarea,
.page-template-page-contact .wpcf7 select{
  width: 100%;
  display: block;
  margin-top: 8px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  outline: none;
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.page-template-page-contact .wpcf7 textarea{
  min-height: 150px;
  resize: vertical;
}

.page-template-page-contact .wpcf7 input::placeholder,
.page-template-page-contact .wpcf7 textarea::placeholder{
  color: rgba(17,24,39,0.45);
}

.page-template-page-contact .wpcf7 input[type="text"]:focus,
.page-template-page-contact .wpcf7 input[type="email"]:focus,
.page-template-page-contact .wpcf7 input[type="tel"]:focus,
.page-template-page-contact .wpcf7 input[type="url"]:focus,
.page-template-page-contact .wpcf7 input[type="number"]:focus,
.page-template-page-contact .wpcf7 textarea:focus,
.page-template-page-contact .wpcf7 select:focus{
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.18);
}

/* Submit button */
.page-template-page-contact .wpcf7 input[type="submit"],
.page-template-page-contact .wpcf7 button[type="submit"]{
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  color: #fff !important;
  background: var(--brand-gradient) !important;
  box-shadow: 0 14px 28px rgba(17,24,39,0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.page-template-page-contact .wpcf7 input[type="submit"]:hover,
.page-template-page-contact .wpcf7 button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(17,24,39,0.16);
  filter: saturate(1.05);
}

.page-template-page-contact .wpcf7 input[type="submit"]:active,
.page-template-page-contact .wpcf7 button[type="submit"]:active{
  transform: translateY(0);
}

/* Validation + response messages */
.page-template-page-contact .wpcf7 .wpcf7-not-valid-tip{
  font-size: 13px;
  margin-top: 8px;
  color: #b42318;
}

.page-template-page-contact .wpcf7 .wpcf7-response-output{
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  font-size: 14px;
}

.page-template-page-contact .wpcf7 .wpcf7-spinner{
  margin-left: 10px;
  vertical-align: middle;
}