/* === teewra-site.css (consolidated) === */


/* ============================================================
   Source: assets/styles.css
   Consolidated into teewra-site.css during V20.4.41 refactor
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
:root{
  --bg:#f6f7fb;--surface:#ffffff;--ink:#101828;--muted:#5f6b7a;--line:#dde3ef;
  --blue:#315efb;--mint:#17b26a;--violet:#7c3aed;--shadow:0 24px 60px rgba(16,24,40,.08);--radius:24px;--container:1240px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:radial-gradient(1200px 500px at 100% -10%, rgba(49,94,251,.10), transparent 55%),radial-gradient(900px 480px at -5% 15%, rgba(124,58,237,.08), transparent 45%),linear-gradient(180deg,#f8f9fc 0%, #f3f5fa 100%)}
a{text-decoration:none;color:inherit}.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:30;background:rgba(246,247,251,.82);backdrop-filter: blur(12px);border-bottom:1px solid rgba(16,24,40,.06)}
.nav-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg, rgba(49,94,251,.12), rgba(23,178,106,.10));border:1px solid rgba(49,94,251,.12)}.brand-name{font-weight:800;letter-spacing:.05em;font-size:20px;}.brand-sub{font-size:.78rem;color:var(--muted)}
.menu{display:flex;gap:24px;align-items:center}.menu a{color:#334155}.menu a:hover{color:var(--blue)}
.btns,.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;font-weight:800;border:1px solid transparent;cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;box-shadow:0 14px 30px rgba(49,94,251,.22)}.btn.secondary{background:#fff;border-color:var(--line);color:#172033}.btn.mint{background:linear-gradient(135deg,var(--mint),#46d28d);color:#042314}
.hero{padding:56px 0 28px}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:28px;align-items:stretch}.hero-copy{padding:30px 0 10px}
.kicker{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:#334155;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--mint))}
h1,h2,h3,h4{margin:0 0 14px;line-height:1.03} h1{font-size:clamp(1.5rem,3vw,2.8rem);letter-spacing:-0.04em;font-weight:600;} h1 .serif{font-family:Manrope,system-ui,sans-serif;font-style:italic;font-weight:400} h2{font-size:clamp(1.5rem,2.2vw,2.3rem);letter-spacing:-0.04em;font-weight:600;} h3{font-size:1.12rem;font-weight:600;}
p{margin:0 0 16px;color:var(--muted);line-height:1.78}.lead{max-width:650px;line-height:1.9;font-size:1.12rem;max-width:760px}.highlight{background:linear-gradient(90deg,var(--blue),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.metric{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:var(--shadow)}.metric strong{display:block;font-size:.98rem;color:var(--ink);margin-bottom:6px}
.hero-panel{min-height:620px;border-radius:32px;overflow:hidden;border:1px solid rgba(16,24,40,.08);box-shadow:var(--shadow);position:relative;background:radial-gradient(460px 220px at 20% 18%, rgba(49,94,251,.20), transparent 60%),radial-gradient(380px 220px at 80% 6%, rgba(23,178,106,.18), transparent 60%),linear-gradient(180deg,#f8fbff 0%, #eef3ff 40%, #f7fbff 100%)}
.badge{position:absolute;top:18px;right:18px;z-index:3;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(16,24,40,.08);font-size:.9rem;color:#1f2937}
.section{padding:88px 0}.section.tight{padding:62px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}.section-head p{max-width:700px}
.grid{display:grid;gap:22px}.g2{grid-template-columns:1.02fr .98fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card,.feature,.band,.callout{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .card.pad,.feature,.band,.callout{padding:22px}
.bento{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.stack{display:grid;gap:22px}.panel-hero{padding:34px;background:linear-gradient(180deg, rgba(49,94,251,.06), rgba(124,58,237,.04)),#fff}
.icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;margin-bottom:16px;background:linear-gradient(135deg, rgba(49,94,251,.12), rgba(23,178,106,.10));border:1px solid rgba(49,94,251,.10)}
.pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.label{display:inline-flex;padding:8px 12px;border-radius:999px;background:#f6f8fc;border:1px solid var(--line);font-size:.84rem;font-weight:800;color:#334155}
.feature-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.value-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.logo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.logo-box{min-height:84px;display:grid;place-items:center;border-radius:18px;background:#fff;border:1px dashed #cfd7e5;color:#334155;font-weight:800;letter-spacing:.06em}
.subnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.subnav a{display:inline-flex;padding:10px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.9rem;color:#344054}
ul.clean{list-style:none;padding:0;margin:0} ul.clean li{position:relative;padding-left:18px;margin:10px 0;color:var(--muted)} ul.clean li:before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--mint))}
form{display:grid;gap:14px} label{font-size:.92rem;color:#243244;font-weight:700} input,select,textarea{width:100%;padding:14px 15px;border-radius:14px;border:1px solid #d7deea;background:#fff;color:#111827;font:inherit;outline:none} input:focus,select:focus,textarea:focus{border-color:rgba(49,94,251,.6);box-shadow:0 0 0 4px rgba(49,94,251,.12)} textarea{min-height:124px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-note{font-size:.9rem;color:#667085}
.footer{padding:48px 0 60px;border-top:1px solid rgba(16,24,40,.08);background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.7))}.footer-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:24px}
.page-hero{padding:64px 0 34px}
@media (max-width:1100px){.hero-grid,.g2,.bento,.footer-grid{grid-template-columns:1fr}.g3,.g4,.feature-grid,.pipeline,.logo-row{grid-template-columns:1fr 1fr}.hero-panel{min-height:430px}.menu{display:none}}
@media (max-width:720px){.container{padding:0 18px}.section{padding:72px 0}.hero-metrics,.g3,.g4,.feature-grid,.pipeline,.logo-row,.form-grid,.value-list{grid-template-columns:1fr}}

h1{font-size:clamp(1.5rem,3vw,2.8rem);letter-spacing:-0.04em;font-weight:600;}h2{font-size:clamp(1.5rem,2.2vw,2.3rem);letter-spacing:-0.04em;font-weight:600;}h3{font-size:1.12rem;font-weight:600;}



/* Partners page subtle polish */
.partner-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.partner-card{
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.partner-card:hover{
  transform:translateY(-4px);
  border-color:rgba(126,160,255,.24);
  box-shadow:0 26px 80px rgba(0,0,0,.38);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.028));
}
.partner-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, var(--blue), var(--green));
  opacity:.0;
  transition:opacity .18s ease;
}
.partner-card:hover:before{
  opacity:.95;
}
.partner-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  background:linear-gradient(135deg, rgba(78,123,255,.18), rgba(24,195,126,.12));
  border:1px solid rgba(255,255,255,.09);
}
.partner-icon svg{
  width:24px;
  height:24px;
  opacity:.95;
}
.partner-card h3{
  margin-bottom:10px;
}
.partner-card p{
  margin-bottom:0;
}
.partner-note{
  max-width:760px;
}
@media (max-width:1120px){
  .partner-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  .partner-grid{grid-template-columns:1fr;}
}


/* Kicker polish */
.kicker{
  gap:10px;
  padding:10px 16px;
  margin-bottom:4px;
  animation:kickerFade .55s ease-out both;
}
.kicker .dot{
  flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(78,123,255,.0);
  animation:dotPulse .9s ease-out .18s both;
}
.section-head .kicker,
.page-hero .kicker,
.card .kicker{
  margin-bottom:8px;
}
.section-head h2{
  margin-top:2px;
}
.page-hero h1{
  margin-top:4px;
}
@keyframes kickerFade{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes dotPulse{
  0%{
    transform:scale(.7);
    box-shadow:0 0 0 0 rgba(78,123,255,.0);
  }
  60%{
    transform:scale(1.08);
    box-shadow:0 0 0 8px rgba(78,123,255,.0);
  }
  100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(78,123,255,.0);
  }
}


/* V13 consistency additions */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.partner-card{position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.partner-card:hover{transform:translateY(-4px);border-color:rgba(126,160,255,.24);box-shadow:0 26px 80px rgba(0,0,0,.38);background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.028))}
.partner-card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg, var(--blue), var(--green));opacity:0;transition:opacity .18s ease}
.partner-card:hover:before{opacity:.95}
.partner-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:14px;background:linear-gradient(135deg, rgba(78,123,255,.18), rgba(24,195,126,.12));border:1px solid rgba(255,255,255,.09)}
.partner-icon svg{width:24px;height:24px;opacity:.95}
.partner-note{max-width:760px}
@media (max-width:1120px){.partner-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.partner-grid{grid-template-columns:1fr}}


/* V14 safe hero polish - structure/spacing only, no color changes */
.hero-copy{
  max-width: 680px;
}
.hero-title{
  max-width: 12ch;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 14px;
}
.hero-lead{
  max-width: 625px;
  margin-bottom: 10px;
}
.hero-proof.strong{
  font-weight: 600;
  font-size: 0.8em;
  letter-spacing: -0.01em;
  margin-top: 8px;
  margin-bottom: 0;
}
.hero-actions{
  margin-top: 22px;
}
@media (max-width: 980px){
  .hero-title{max-width:none;}
}


/* V15.1 brand refinement */
@media (max-width: 720px){
  .brand-name{font-size:18px;}
  .brand-sub{font-size:10px;max-width:108px;}
}



/* V15.1.1 brand and interaction refinements */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.02;
}
.brand-name{
  font-size:30px !important;
  font-weight:800;
  letter-spacing:.05em;
  line-height:1;
  color:#4169E1 !important;
}
.brand-sub{
  display:block;
  margin-top:4px;
  font-size:12px !important;
  line-height:1.05;
  text-align:center;
  color:#7a1f2b;
  max-width:112px;
  white-space:nowrap;
}

/* Make hover work on all feature blocks and solution/core platform blocks */
.feature,
.feature-grid .feature,
.card,
.solution-card,
.partner-card,
.read-block{
  position:relative;
  overflow:hidden;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease, background .26s ease;
}

.feature:hover,
.feature-grid .feature:hover,
.card:hover,
.solution-card:hover,
.partner-card:hover,
.read-block:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(16,24,40,.12);
  border-color:rgba(65,105,225,.18);
}

.feature::before,
.feature-grid .feature::before,
.card::before,
.solution-card::before,
.partner-card::before,
.read-block::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg, rgba(65,105,225,.12), rgba(65,105,225,0) 60%);
  opacity:0;
  transition:opacity .26s ease;
  pointer-events:none;
}

.feature:hover::before,
.feature-grid .feature:hover::before,
.card:hover::before,
.solution-card:hover::before,
.partner-card:hover::before,
.read-block:hover::before{
  opacity:1;
}

@media (max-width:720px){
  .brand-name{
    font-size:24px !important;
  }
  .brand-sub{
    font-size:10px !important;
    max-width:98px;
  }
}


/* V15.2 tagline refinement */
.brand > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.brand-name{
  font-size:30px !important;
  color:#4169E1 !important;
  line-height:1;
}
.brand-sub{
  font-size:14px !important;
  line-height:1.02;
  text-align:center;
  display:inline-block;
  white-space:nowrap;
  margin-top:4px;
  color:#7a1f2b;
}

/* JS-controlled precise width */



/* -------------------------------------------------------
   V20.1.1 - fixes for proof chips, solutions hero, and headers
------------------------------------------------------- */

/* Home proof chips */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 18px;
}
.proof-chip {
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid rgba(11, 31, 51, 0.08);
  border-radius: 999px;
  color: #5C6B7A;
  font-size: 14px;
  line-height: 1;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.proof-chip:hover {
  border-color: #4169E1;
  color: #0B1F33;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(65, 105, 225, 0.15);
}

/* Stable Solutions page hero layout */
.solutions-page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr);
  gap:42px;
  align-items:center;
}
.solutions-page-hero-content{
  max-width:700px;
}
.solutions-page-hero-image-wrap{
  width:100%;
}
.solutions-page-hero-image{
  position:relative;
  background:#ffffff;
  border:1px solid rgba(11,31,51,0.07);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 38px rgba(15,23,42,0.08);
}
.solutions-page-hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(65,105,225,0.05), rgba(46,125,50,0.04));
  pointer-events:none;
}
.solutions-page-hero-image img{
  display:block;
  width:100%;
  height:auto;
}
.solutions-intro{
  font-size:18px;
  line-height:1.7;
  color:#5C6B7A;
  margin-top:14px;
}

/* Increase section headers across all pages by ~25% */
main section h2,
body section h2,
body .section h2,
body .section-head h2,
body .section.tight h2,
body .section.esg-impact h2,
body .section-head > div > h2,
body .container > .section-head h2 {
  font-size: 52px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  margin-bottom: 10px !important;
  color: #0B1F33 !important;
}

body .section-head .kicker,
body section .kicker,
body .section .kicker {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

body .section-head .kicker .dot,
body section .kicker .dot,
body .section .kicker .dot {
  width: 9px !important;
  height: 9px !important;
  margin-right: 8px !important;
}

@media (max-width: 1024px) {
  .solutions-page-hero-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .solutions-page-hero-content{
    max-width:none;
  }
  main section h2,
  body section h2,
  body .section h2,
  body .section-head h2,
  body .section.tight h2,
  body .section.esg-impact h2,
  body .section-head > div > h2,
  body .container > .section-head h2 {
    font-size: 44px !important;
  }
}
@media (max-width: 768px) {
  main section h2,
  body section h2,
  body .section h2,
  body .section-head h2,
  body .section.tight h2,
  body .section.esg-impact h2,
  body .section-head > div > h2,
  body .container > .section-head h2 {
    font-size: 36px !important;
  }
  body .section-head .kicker,
  body section .kicker,
  body .section .kicker {
    font-size: 15px !important;
  }
}


/* -------------------------------------------------------
   V20.1.2 - proof chip dedupe and balanced headers
------------------------------------------------------- */

/* Keep section headers clearly below hero H1 */
main section h2,
body section h2,
body .section h2,
body .section-head h2,
body .section.tight h2,
body .section.esg-impact h2,
body .section-head > div > h2,
body .container > .section-head h2 {
  font-size: 44px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}

body .section-head .kicker,
body section .kicker,
body .section .kicker {
  font-size: 16px !important;
}

@media (max-width: 1024px) {
  main section h2,
  body section h2,
  body .section h2,
  body .section-head h2,
  body .section.tight h2,
  body .section.esg-impact h2,
  body .section-head > div > h2,
  body .container > .section-head h2 {
    font-size: 38px !important;
  }
}

@media (max-width: 768px) {
  main section h2,
  body section h2,
  body .section h2,
  body .section-head h2,
  body .section.tight h2,
  body .section.esg-impact h2,
  body .section-head > div > h2,
  body .container > .section-head h2 {
    font-size: 32px !important;
  }

  body .section-head .kicker,
  body section .kicker,
  body .section .kicker {
    font-size: 14px !important;
  }
}



/* -------------------------------------------------------
   V20.2 - page image blocks and content refinements
------------------------------------------------------- */
.right-side-visual-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:36px;
  align-items:center;
}
.side-image-card{
  background:#fff;
  border:1px solid rgba(11,31,51,0.07);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 16px 34px rgba(15,23,42,0.07);
}
.side-image-card img{
  display:block;
  width:100%;
  height:auto;
}
.hero-support{
  margin-top:16px;
  color:#5C6B7A;
  line-height:1.7;
}
@media (max-width: 1024px){
  .right-side-visual-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
}


/* -------------------------------------------------------
   V20.2.2 Motion - smooth reveal and fluid section behavior
------------------------------------------------------- */
html{
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion: no-preference){
  body.motion-ready .reveal-on-scroll{
    opacity:0;
    transform:translate3d(0, 26px, 0);
    transition:
      opacity 0.72s ease,
      transform 0.72s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }

  body.motion-ready .reveal-on-scroll.is-visible{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="left"]{
    transform:translate3d(-26px, 0, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    transform:translate3d(26px, 0, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    transform:translate3d(0, 22px, 0) scale(.985);
  }

  body.motion-ready .reveal-stagger > *{
    opacity:0;
    transform:translate3d(0, 18px, 0);
    transition:
      opacity 0.62s ease,
      transform 0.62s cubic-bezier(.22,1,.36,1);
  }

  body.motion-ready .reveal-stagger.is-visible > *{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }

  body.motion-ready .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.04s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.10s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.16s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.22s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.28s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.34s}

  body.motion-ready .hero-panel,
  body.motion-ready .side-image-card,
  body.motion-ready .solutions-page-hero-image,
  body.motion-ready .card,
  body.motion-ready .partner-card{
    transition:
      transform .28s ease,
      box-shadow .28s ease,
      border-color .28s ease;
  }

  body.motion-ready .card:hover,
  body.motion-ready .partner-card:hover,
  body.motion-ready .hero-panel:hover,
  body.motion-ready .side-image-card:hover,
  body.motion-ready .solutions-page-hero-image:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 42px rgba(15,23,42,0.09);
  }

  body.motion-ready .parallax-soft{
    transform:translate3d(0, var(--parallax-y, 0px), 0);
    will-change:transform;
    transition:transform .12s linear;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  .reveal-on-scroll,
  .reveal-stagger,
  .reveal-stagger > *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

@media (max-width: 768px){
  body.motion-ready .reveal-on-scroll{
    transform:translate3d(0, 18px, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="left"],
  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    transform:translate3d(0, 18px, 0);
  }
}



/* -------------------------------------------------------
   V20.2.2 Motion Premium - richer dramatic motion
------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  body.motion-ready .reveal-on-scroll{
    opacity:0;
    transform:translate3d(0, 44px, 0);
    transition:
      opacity 0.95s cubic-bezier(.16,1,.3,1),
      transform 0.95s cubic-bezier(.16,1,.3,1),
      filter 0.95s cubic-bezier(.16,1,.3,1);
    filter:blur(4px);
  }

  body.motion-ready .reveal-on-scroll.is-visible{
    opacity:1;
    transform:translate3d(0, 0, 0);
    filter:blur(0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="left"]{
    transform:translate3d(-42px, 0, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    transform:translate3d(42px, 0, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    transform:translate3d(0, 34px, 0) scale(.965);
  }

  body.motion-ready .reveal-stagger > *{
    opacity:0;
    transform:translate3d(0, 26px, 0) scale(.985);
    transition:
      opacity 0.82s cubic-bezier(.16,1,.3,1),
      transform 0.82s cubic-bezier(.16,1,.3,1),
      filter 0.82s cubic-bezier(.16,1,.3,1);
    filter:blur(3px);
  }

  body.motion-ready .reveal-stagger.is-visible > *{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
    filter:blur(0);
  }

  body.motion-ready .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.06s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.16s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.26s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.36s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.46s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.56s}

  body.motion-ready .hero-panel,
  body.motion-ready .side-image-card,
  body.motion-ready .solutions-page-hero-image,
  body.motion-ready .card,
  body.motion-ready .partner-card,
  body.motion-ready .proof-chip{
    transition:
      transform .36s cubic-bezier(.16,1,.3,1),
      box-shadow .36s cubic-bezier(.16,1,.3,1),
      border-color .36s cubic-bezier(.16,1,.3,1),
      filter .36s cubic-bezier(.16,1,.3,1);
  }

  body.motion-ready .card:hover,
  body.motion-ready .partner-card:hover,
  body.motion-ready .hero-panel:hover,
  body.motion-ready .side-image-card:hover,
  body.motion-ready .solutions-page-hero-image:hover{
    transform:translateY(-7px) scale(1.008);
    box-shadow:0 26px 54px rgba(15,23,42,0.12);
  }

  body.motion-ready .proof-chip:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 12px 22px rgba(65,105,225,0.16);
  }

  body.motion-ready .parallax-soft{
    transform:translate3d(0, var(--parallax-y, 0px), 0);
    will-change:transform;
    transition:transform .10s linear;
  }

  body.motion-ready .hero,
  body.motion-ready .page-hero{
    animation:heroFadeIn 1.1s cubic-bezier(.16,1,.3,1) both;
  }

  @keyframes heroFadeIn{
    from{opacity:0; transform:translate3d(0,18px,0)}
    to{opacity:1; transform:translate3d(0,0,0)}
  }
}

@media (max-width: 768px){
  body.motion-ready .reveal-on-scroll{
    transform:translate3d(0, 26px, 0);
    filter:blur(2px);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="left"],
  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    transform:translate3d(0, 26px, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    transform:translate3d(0, 22px, 0) scale(.98);
  }

  body.motion-ready .reveal-stagger > *{
    transform:translate3d(0, 18px, 0) scale(.99);
  }
}



/* -------------------------------------------------------
   V20.2.2 Motion Fluid - continuous smooth page movement
------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference){
  body.motion-ready main > section,
  body.motion-ready .page-hero,
  body.motion-ready .hero {
    will-change: transform, opacity;
  }

  body.motion-ready .parallax-soft {
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    transition: transform .08s linear;
  }

  body.motion-ready .reveal-on-scroll{
    opacity:0;
    transform:translate3d(0, 54px, 0);
    transition:
      opacity 1.05s cubic-bezier(.16,1,.3,1),
      transform 1.05s cubic-bezier(.16,1,.3,1),
      filter 1.05s cubic-bezier(.16,1,.3,1);
    filter:blur(5px);
  }

  body.motion-ready .reveal-on-scroll.is-visible{
    opacity:1;
    transform:translate3d(0, 0, 0);
    filter:blur(0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="left"]{
    transform:translate3d(-50px, 0, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    transform:translate3d(50px, 0, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    transform:translate3d(0, 38px, 0) scale(.955);
  }

  body.motion-ready .reveal-stagger > *{
    opacity:0;
    transform:translate3d(0, 28px, 0) scale(.982);
    transition:
      opacity .88s cubic-bezier(.16,1,.3,1),
      transform .88s cubic-bezier(.16,1,.3,1),
      filter .88s cubic-bezier(.16,1,.3,1);
    filter:blur(3px);
  }

  body.motion-ready .reveal-stagger.is-visible > *{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
    filter:blur(0);
  }

  body.motion-ready .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.08s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.18s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.28s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.38s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.48s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.58s}

  body.motion-ready .card:hover,
  body.motion-ready .partner-card:hover,
  body.motion-ready .hero-panel:hover,
  body.motion-ready .side-image-card:hover,
  body.motion-ready .solutions-page-hero-image:hover{
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 28px 58px rgba(15,23,42,0.13);
  }
}

@media (max-width: 768px){
  body.motion-ready .reveal-on-scroll{
    transform:translate3d(0, 28px, 0);
    filter:blur(2px);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="left"],
  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    transform:translate3d(0, 28px, 0);
  }

  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    transform:translate3d(0, 24px, 0) scale(.98);
  }
}



/* -------------------------------------------------------
   V20.2.2 Motion Fluid Refined - header, motion, alignment uniformity
------------------------------------------------------- */

/* Brand name in royal blue on top and footer */
.brand-name,
footer .brand-name,
.site-footer .brand-name{
  color:#4169E1 !important;
}

/* Uniform section header dot placement */
.section-head .kicker,
.kicker{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
}
.section-head .kicker .dot,
.kicker .dot{
  width:8px !important;
  height:8px !important;
  margin:0 !important;
  flex:0 0 8px !important;
}

/* Make header blocks uniformly top aligned */
.section-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:16px !important;
}
.section-head > div{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
}
.section-head h2{
  margin-top:0 !important;
  margin-bottom:6px !important;
}
@media (max-width:768px){
  .section-head{
    flex-direction:column !important;
    gap:10px !important;
    margin-bottom:14px !important;
  }
}

/* Uniform section spacing */
main > section,
main .section,
body section,
body .section{
  padding-top:46px !important;
  padding-bottom:46px !important;
}
@media (max-width:1024px){
  main > section,
  main .section,
  body section,
  body .section{
    padding-top:40px !important;
    padding-bottom:40px !important;
  }
}
@media (max-width:768px){
  main > section,
  main .section,
  body section,
  body .section{
    padding-top:30px !important;
    padding-bottom:30px !important;
  }
}

/* Header CTA styling */
.nav .btns .btn.ghost{
  background:#4169E1 !important;
  border-color:#4169E1 !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(65,105,225,0.18) !important;
}
.nav .btns .btn.ghost:hover{
  background:#3559c7 !important;
  border-color:#3559c7 !important;
  color:#ffffff !important;
}
.nav .btns .btn.primary{
  display:none !important;
}

/* Mobile header layout: one CTA + hamburger to the far right */
.mobile-nav-toggle{
  display:none;
  width:40px;
  height:40px;
  border:1px solid rgba(11,31,51,0.10);
  border-radius:12px;
  background:#ffffff;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:0;
  box-shadow:0 6px 16px rgba(15,23,42,0.05);
  flex:0 0 auto;
}
.mobile-nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#0B1F33;
  border-radius:999px;
}
.mobile-nav-panel{ display:none; }

@media (max-width:768px){
  .mobile-nav-toggle{
    display:flex !important;
    justify-self:end;
  }
  .nav .menu{
    display:none !important;
  }
  .nav-inner{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:8px !important;
    align-items:center !important;
  }
  .brand{
    min-width:0;
    overflow:hidden;
  }
  .brand-name{
    font-size:24px !important;
    line-height:1 !important;
  }
  .brand-sub{
    font-size:10px !important;
    max-width:82px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .nav .btns{
    display:flex !important;
    align-items:center;
    justify-self:end;
    gap:8px;
  }
  .nav .btns .btn.ghost{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:8px 10px !important;
    min-height:36px !important;
    font-size:11px !important;
    line-height:1 !important;
    border-radius:10px !important;
    white-space:nowrap !important;
  }
  .mobile-nav-panel{
    display:block;
    position:sticky;
    top:0;
    z-index:40;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(11,31,51,0.07);
    padding:12px 14px 14px;
  }
  .mobile-nav-panel[hidden]{ display:none !important; }
  .mobile-nav-links{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .mobile-nav-links a{
    display:block;
    padding:12px 10px;
    border-radius:12px;
    color:#0B1F33;
    text-decoration:none;
    font-weight:600;
    background:#F8FBFF;
    border:1px solid rgba(11,31,51,0.05);
  }
  .mobile-nav-cta{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
  }
  .mobile-nav-cta .btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}
@media (max-width:430px){
  .nav-inner{
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:6px !important;
  }
  .brand-name{
    font-size:22px !important;
  }
  .nav .btns .btn.ghost{
    font-size:10.5px !important;
    padding:8px 9px !important;
  }
}

/* More visible block / section animation without blur haze */
@media (prefers-reduced-motion: no-preference){
  body.motion-ready .reveal-on-scroll{
    opacity:0 !important;
    transform:translate3d(0,56px,0) scale(.97) !important;
    transition:
      opacity 1.08s cubic-bezier(.16,1,.3,1),
      transform 1.08s cubic-bezier(.16,1,.3,1),
      filter 1.08s cubic-bezier(.16,1,.3,1) !important;
    filter:blur(2px) !important;
  }
  body.motion-ready .reveal-on-scroll[data-reveal="left"]{
    transform:translate3d(-46px,0,0) scale(.97) !important;
  }
  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    transform:translate3d(46px,0,0) scale(.97) !important;
  }
  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    transform:translate3d(0,42px,0) scale(.94) !important;
  }
  body.motion-ready .reveal-on-scroll.is-visible{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
    filter:blur(0) !important;
  }

  body.motion-ready .reveal-stagger > *{
    opacity:0 !important;
    transform:translate3d(0,32px,0) scale(.97) !important;
    transition:
      opacity .94s cubic-bezier(.16,1,.3,1),
      transform .94s cubic-bezier(.16,1,.3,1),
      filter .94s cubic-bezier(.16,1,.3,1) !important;
    filter:blur(1.5px) !important;
  }
  body.motion-ready .reveal-stagger.is-visible > *{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
    filter:blur(0) !important;
  }
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.06s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.14s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.22s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.30s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.38s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(6){transition-delay:.46s}
}
@media (max-width:768px){
  body.motion-ready .reveal-on-scroll,
  body.motion-ready .reveal-on-scroll[data-reveal="left"],
  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    transform:translate3d(0,28px,0) scale(.985) !important;
    filter:blur(1px) !important;
  }
  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    transform:translate3d(0,24px,0) scale(.975) !important;
  }
}

/* Footer brand name same color as top */
footer .brand-name,
.site-footer .brand-name{
  color:#4169E1 !important;
}



/* -------------------------------------------------------
   Narrow patch - submit CTA, darker royal blue brand, mobile-only blur removal
------------------------------------------------------- */

/* TEEWRA brand name darker royal blue */
.brand-name,
footer .brand-name,
.site-footer .brand-name{
  color:#244fd6 !important;
}

/* Make Submit a Site match the primary / Send Inquiry style */
.submit-site-btn{
  background:#4169E1 !important;
  border-color:#4169E1 !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(65,105,225,0.18) !important;
}
.submit-site-btn:hover{
  background:#3559c7 !important;
  border-color:#3559c7 !important;
  color:#ffffff !important;
}
.submit-site-btn:visited,
.submit-site-btn:active{
  color:#ffffff !important;
}
@media (max-width:768px){
  .nav .btns .submit-site-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:8px 10px !important;
    min-height:36px !important;
    font-size:11px !important;
    line-height:1 !important;
    border-radius:10px !important;
    white-space:nowrap !important;
  }
  .mobile-nav-cta .submit-site-btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}
@media (max-width:430px){
  .nav .btns .submit-site-btn{
    font-size:10.5px !important;
    padding:8px 9px !important;
  }
}

/* Mobile-only blur removal for affected sections while preserving desktop motion */
@media (max-width:768px) and (prefers-reduced-motion: no-preference){
  /* remove blur from text-led sections */
  .section-head.reveal-on-scroll,
  .no-blur-section.reveal-on-scroll,
  .no-blur-section .reveal-on-scroll,
  .no-blur-section .reveal-stagger > *,
  section:not(.hero):not(.page-hero) > .container > .section-head.reveal-on-scroll{
    filter:none !important;
  }

  /* soften mobile motion globally without desktop impact */
  body.motion-ready .reveal-on-scroll,
  body.motion-ready .reveal-on-scroll[data-reveal="left"],
  body.motion-ready .reveal-on-scroll[data-reveal="right"],
  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    filter:none !important;
  }

  body.motion-ready .reveal-stagger > *{
    filter:none !important;
  }
}



/* -------------------------------------------------------
   Patch v2 - submit CTA primary and chargezone-like mobile hamburger/dropdown
------------------------------------------------------- */

/* Submit a Site should look like the primary Send Inquiry style on all screens */
.submit-site-btn{
  background:#4169E1 !important;
  border-color:#4169E1 !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(65,105,225,0.18) !important;
}
.submit-site-btn:hover{
  background:#3559c7 !important;
  border-color:#3559c7 !important;
  color:#ffffff !important;
}
.submit-site-btn:visited,
.submit-site-btn:active{
  color:#ffffff !important;
}

/* Cleaner hamburger: not a boxed button, just lines */
.mobile-nav-toggle{
  display:none;
  width:24px;
  height:18px;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:0;
  flex:0 0 auto;
  appearance:none;
  -webkit-appearance:none;
}
.mobile-nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#0B1F33;
  border-radius:999px;
  transition:transform .22s ease, opacity .22s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.mobile-nav-panel{
  display:none;
}
.mobile-nav-panel.is-open{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:768px){
  .mobile-nav-toggle{
    display:flex !important;
    order:3 !important;
    justify-self:end !important;
    margin-left:8px !important;
  }

  .nav-inner{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    gap:8px !important;
    align-items:center !important;
  }

  .nav .btns{
    order:2 !important;
    display:flex !important;
    align-items:center;
    justify-self:end;
    gap:8px;
  }

  .nav .btns .submit-site-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:8px 10px !important;
    min-height:36px !important;
    font-size:11px !important;
    line-height:1 !important;
    border-radius:10px !important;
    white-space:nowrap !important;
  }

  .mobile-nav-panel{
    display:block;
    position:absolute;
    top:100%;
    left:12px;
    right:12px;
    z-index:60;
    background:rgba(255,255,255,0.99);
    backdrop-filter:blur(12px);
    border:1px solid rgba(11,31,51,0.07);
    border-radius:16px;
    box-shadow:0 16px 40px rgba(15,23,42,0.10);
    padding:12px;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease;
  }

  .mobile-nav-panel[hidden]{
    display:none !important;
  }

  .mobile-nav-links{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .mobile-nav-links a{
    display:block;
    padding:12px 10px;
    border-radius:12px;
    color:#0B1F33;
    text-decoration:none;
    font-weight:600;
    background:#F8FBFF;
    border:1px solid rgba(11,31,51,0.05);
  }

  .mobile-nav-cta{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
  }

  .mobile-nav-cta .submit-site-btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}

@media (max-width:430px){
  .nav .btns .submit-site-btn{
    font-size:10.5px !important;
    padding:8px 9px !important;
  }
}



/* -------------------------------------------------------
   V20.3.1 - top CTA style alignment + ESG green treatment
------------------------------------------------------- */

/* Top nav Submit a Site should match primary location/inquiry button style on desktop and mobile */
.submit-site-btn,
.nav .btns .submit-site-btn,
header .btns .submit-site-btn{
  background:#4169E1 !important;
  border-color:#4169E1 !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(65,105,225,0.18) !important;
}
.submit-site-btn:hover,
.nav .btns .submit-site-btn:hover,
header .btns .submit-site-btn:hover{
  background:#3559c7 !important;
  border-color:#3559c7 !important;
  color:#ffffff !important;
}
.submit-site-btn:visited,
.submit-site-btn:active{
  color:#ffffff !important;
}

@media (max-width:768px){
  .nav .btns .submit-site-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:8px 10px !important;
    min-height:36px !important;
    font-size:11px !important;
    line-height:1 !important;
    border-radius:10px !important;
    white-space:nowrap !important;
  }
}
@media (max-width:430px){
  .nav .btns .submit-site-btn{
    font-size:10.5px !important;
    padding:8px 9px !important;
  }
}

/* ESG & Impact richer leafy green treatment */
.section.esg-impact,
.esg-impact,
section[id*="esg"],
section[id*="impact"]{
  position:relative;
}

.section.esg-impact .card,
.esg-impact .card,
.section.esg-impact .feature,
.esg-impact .feature,
.section.esg-impact .partner-card,
.esg-impact .partner-card,
.section.esg-impact .metric-card,
.esg-impact .metric-card,
section[id*="esg"] .card,
section[id*="impact"] .card{
  background:
    linear-gradient(180deg, rgba(241, 249, 243, 0.98), rgba(232, 246, 236, 0.98)) !important;
  border:1px solid rgba(67, 160, 71, 0.22) !important;
  box-shadow:0 12px 28px rgba(46,125,50,0.08) !important;
}

.section.esg-impact .card:hover,
.esg-impact .card:hover,
.section.esg-impact .feature:hover,
.esg-impact .feature:hover,
.section.esg-impact .partner-card:hover,
.esg-impact .partner-card:hover,
.section.esg-impact .metric-card:hover,
.esg-impact .metric-card:hover,
section[id*="esg"] .card:hover,
section[id*="impact"] .card:hover{
  border-color:#43A047 !important;
  box-shadow:0 18px 34px rgba(46,125,50,0.14) !important;
}

.section.esg-impact .kicker,
.esg-impact .kicker,
.section.esg-impact h2,
.esg-impact h2,
section[id*="esg"] .kicker,
section[id*="impact"] .kicker,
section[id*="esg"] h2,
section[id*="impact"] h2{
  color:inherit;
}



/* -------------------------------------------------------
   V20.3.2 - top CTA style + richer ESG leafy green treatment
------------------------------------------------------- */

/* Submit a Site button in top nav should match primary/Send Inquiry style */
.submit-site-btn,
.nav .btns .submit-site-btn,
header .btns .submit-site-btn{
  background: linear-gradient(135deg, #4169E1, #3559C7) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(65, 105, 225, 0.25) !important;
  transition: all 0.25s ease !important;
}
.submit-site-btn:hover,
.nav .btns .submit-site-btn:hover,
header .btns .submit-site-btn:hover{
  background: linear-gradient(135deg, #3559C7, #2F4FB2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(65, 105, 225, 0.35) !important;
}
.submit-site-btn:visited,
.submit-site-btn:active{
  color:#ffffff !important;
}
@media (max-width:768px){
  .nav .btns .submit-site-btn{
    padding: 8px 12px !important;
    min-height: 36px !important;
    font-size: 11px !important;
    border-radius: 10px !important;
  }
}
@media (max-width:430px){
  .nav .btns .submit-site-btn{
    padding: 8px 10px !important;
    font-size: 10.5px !important;
  }
}

/* ESG & Impact richer leafy-green treatment inspired by V16 */
.section.esg-impact .card,
.esg-impact .card,
.section.esg-impact .feature,
.esg-impact .feature,
section[id*="esg"] .card,
section[id*="impact"] .card,
section[id*="esg"] .feature,
section[id*="impact"] .feature{
  position: relative !important;
  background:
    linear-gradient(180deg, rgba(242, 250, 244, 0.98) 0%, rgba(230, 246, 234, 0.98) 100%) !important;
  border: 1px solid rgba(76, 175, 80, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(46, 125, 50, 0.08) !important;
  overflow: hidden !important;
}

.section.esg-impact .card::before,
.esg-impact .card::before,
.section.esg-impact .feature::before,
.esg-impact .feature::before,
section[id*="esg"] .card::before,
section[id*="impact"] .card::before,
section[id*="esg"] .feature::before,
section[id*="impact"] .feature::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: linear-gradient(90deg, #2E7D32, #66BB6A) !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.section.esg-impact .card:hover,
.esg-impact .card:hover,
.section.esg-impact .feature:hover,
.esg-impact .feature:hover,
section[id*="esg"] .card:hover,
section[id*="impact"] .card:hover,
section[id*="esg"] .feature:hover,
section[id*="impact"] .feature:hover{
  border-color: #2E7D32 !important;
  box-shadow: 0 18px 36px rgba(46, 125, 50, 0.18) !important;
}

.section.esg-impact .card h3,
.esg-impact .card h3,
.section.esg-impact .feature h3,
.esg-impact .feature h3,
section[id*="esg"] .card h3,
section[id*="impact"] .card h3,
section[id*="esg"] .feature h3,
section[id*="impact"] .feature h3{
  color: #2E7D32 !important;
}

.section.esg-impact .kicker .dot,
.esg-impact .kicker .dot,
section[id*="esg"] .kicker .dot,
section[id*="impact"] .kicker .dot{
  background: #2E7D32 !important;
}



/* -------------------------------------------------------
   V20.3.8 - visible top-nav Submit a Site without breaking ESG
------------------------------------------------------- */

/* Root cause fix: override the global hide rule for top-nav primary button */
header .btns .btn.primary[href="partners.html?type=location#forms"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}

@media (max-width:768px){
  header .btns .btn.primary[href="partners.html?type=location#forms"]{
    display:inline-flex !important;
    min-height:36px !important;
    padding:8px 12px !important;
    font-size:11px !important;
    line-height:1 !important;
  }
}
@media (max-width:430px){
  header .btns .btn.primary[href="partners.html?type=location#forms"]{
    font-size:10.5px !important;
    padding:8px 10px !important;
  }
}



/* -------------------------------------------------------
   V20.3.9 - header CTA rename + home hero cleanup
------------------------------------------------------- */

/* Ensure top-nav Get Powered is visible despite global primary hide rule */
header .btns .btn.primary[href="partners.html?type=fleet#forms"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
@media (max-width:768px){
  header .btns .btn.primary[href="partners.html?type=fleet#forms"]{
    display:inline-flex !important;
    min-height:36px !important;
    padding:8px 12px !important;
    font-size:11px !important;
    line-height:1 !important;
  }
}
@media (max-width:430px){
  header .btns .btn.primary[href="partners.html?type=fleet#forms"]{
    font-size:10.5px !important;
    padding:8px 10px !important;
  }
}

/* Home hero cleanup */
.hero-panel .badge{
  display:none !important;
}

/* Make 'Infrastructure for energy without fuel.' slightly bigger on mobile only */
@media (max-width:768px){
  .hero-subtitle{
    font-size:20px !important;
    line-height:1.25 !important;
  }
}



/* -------------------------------------------------------
   V20.4.0 - hero subtitle size match + prettier ESG green treatment
------------------------------------------------------- */

/* Match subtitle size to main hero statement on both desktop and mobile */
.hero-subtitle{
  font-size: clamp(32px, 4.1vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
  color: #0B1F33 !important;
}
@media (max-width: 768px){
  .hero-subtitle{
    font-size: 34px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
}
@media (max-width: 430px){
  .hero-subtitle{
    font-size: 30px !important;
    line-height: 1.1 !important;
  }
}

/* ESG & Impact – prettier premium green treatment */
.section.esg-impact .card,
.esg-impact .card,
.section.esg-impact .feature,
.esg-impact .feature,
section[id*="esg"] .card,
section[id*="impact"] .card,
section[id*="esg"] .feature,
section[id*="impact"] .feature{
  position: relative !important;
  background:
    radial-gradient(circle at top right, rgba(129, 199, 132, 0.18), transparent 38%),
    radial-gradient(circle at bottom left, rgba(102, 187, 106, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(247, 252, 248, 0.98) 0%, rgba(239, 248, 242, 0.98) 100%) !important;
  border: 1px solid rgba(67, 160, 71, 0.18) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(46, 125, 50, 0.06) !important;
  overflow: hidden !important;
}

.section.esg-impact .card::before,
.esg-impact .card::before,
.section.esg-impact .feature::before,
.esg-impact .feature::before,
section[id*="esg"] .card::before,
section[id*="impact"] .card::before,
section[id*="esg"] .feature::before,
section[id*="impact"] .feature::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(135deg, rgba(76, 175, 80, 0.06), rgba(129, 199, 132, 0.02) 45%, transparent 70%) !important;
  pointer-events: none !important;
}

.section.esg-impact .card::after,
.esg-impact .card::after,
.section.esg-impact .feature::after,
.esg-impact .feature::after,
section[id*="esg"] .card::after,
section[id*="impact"] .card::after,
section[id*="esg"] .feature::after,
section[id*="impact"] .feature::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #2E7D32, #66BB6A, #A5D6A7) !important;
  opacity: 0.9 !important;
}

.section.esg-impact .card:hover,
.esg-impact .card:hover,
.section.esg-impact .feature:hover,
.esg-impact .feature:hover,
section[id*="esg"] .card:hover,
section[id*="impact"] .card:hover,
section[id*="esg"] .feature:hover,
section[id*="impact"] .feature:hover{
  border-color: #43A047 !important;
  box-shadow: 0 18px 36px rgba(46, 125, 50, 0.12) !important;
  transform: translateY(-3px) !important;
}

.section.esg-impact .card h3,
.esg-impact .card h3,
.section.esg-impact .feature h3,
.esg-impact .feature h3,
section[id*="esg"] .card h3,
section[id*="impact"] .card h3,
section[id*="esg"] .feature h3,
section[id*="impact"] .feature h3{
  color: #2E7D32 !important;
}

.section.esg-impact .kicker .dot,
.esg-impact .kicker .dot,
section[id*="esg"] .kicker .dot,
section[id*="impact"] .kicker .dot{
  background: #43A047 !important;
}



/* -------------------------------------------------------
   V20.4.1 - exact home hero title size match + ESG card style cleanup
------------------------------------------------------- */

/* Match the home H1 size to the 'Energy is changing...' section heading */
.hero-title{
  font-size: 52px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  margin-bottom: 10px !important;
  max-width: none !important;
}
.hero-title .highlight{
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-weight: inherit !important;
}
@media (max-width: 1024px){
  .hero-title{
    font-size: 44px !important;
    line-height: 1.18 !important;
  }
}
@media (max-width: 768px){
  .hero-title{
    font-size: 30px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.25px !important;
  }
}
@media (max-width: 430px){
  .hero-title{
    font-size: 27px !important;
    line-height: 1.18 !important;
  }
}

/* ESG & Impact: use the same clean block decoration as other cards, but with stronger green gradient */
.section.esg-impact .card,
.esg-impact .card,
.section.esg-impact .feature,
.esg-impact .feature,
section[id*="esg"] .card,
section[id*="impact"] .card,
section[id*="esg"] .feature,
section[id*="impact"] .feature{
  position: relative !important;
  background: linear-gradient(135deg, rgba(234, 247, 237, 0.98) 0%, rgba(204, 232, 211, 0.98) 100%) !important;
  border: 1px solid rgba(67, 160, 71, 0.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(15,23,42,0.06) !important;
  overflow: hidden !important;
}

/* remove the decorative overlays from the previous experiment */
.section.esg-impact .card::before,
.esg-impact .card::before,
.section.esg-impact .feature::before,
.esg-impact .feature::before,
section[id*="esg"] .card::before,
section[id*="impact"] .card::before,
section[id*="esg"] .feature::before,
section[id*="impact"] .feature::before,
.section.esg-impact .card::after,
.esg-impact .card::after,
.section.esg-impact .feature::after,
.esg-impact .feature::after,
section[id*="esg"] .card::after,
section[id*="impact"] .card::after,
section[id*="esg"] .feature::after,
section[id*="impact"] .feature::after{
  content: none !important;
  display: none !important;
}

.section.esg-impact .card:hover,
.esg-impact .card:hover,
.section.esg-impact .feature:hover,
.esg-impact .feature:hover,
section[id*="esg"] .card:hover,
section[id*="impact"] .card:hover,
section[id*="esg"] .feature:hover,
section[id*="impact"] .feature:hover{
  border-color: #43A047 !important;
  box-shadow: 0 18px 34px rgba(15,23,42,0.08) !important;
  transform: translateY(-3px) !important;
}

.section.esg-impact .card h3,
.esg-impact .card h3,
.section.esg-impact .feature h3,
.esg-impact .feature h3,
section[id*="esg"] .card h3,
section[id*="impact"] .card h3,
section[id*="esg"] .feature h3,
section[id*="impact"] .feature h3{
  color: #2E7D32 !important;
}

.section.esg-impact .kicker .dot,
.esg-impact .kicker .dot,
section[id*="esg"] .kicker .dot,
section[id*="impact"] .kicker .dot{
  background: #43A047 !important;
}



/* -------------------------------------------------------
   V20.4.2 - ESG cards matched closer to V16 reference
------------------------------------------------------- */

/* Clean, light cards with a strong green top accent and refined green hover */
.section.esg-impact .card,
.esg-impact .card,
.section.esg-impact .feature,
.esg-impact .feature,
section[id*="esg"] .card,
section[id*="impact"] .card,
section[id*="esg"] .feature,
section[id*="impact"] .feature{
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid rgba(11,31,51,0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(15,23,42,0.05) !important;
  overflow: hidden !important;
}

.section.esg-impact .card::before,
.esg-impact .card::before,
.section.esg-impact .feature::before,
.esg-impact .feature::before,
section[id*="esg"] .card::before,
section[id*="impact"] .card::before,
section[id*="esg"] .feature::before,
section[id*="impact"] .feature::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: linear-gradient(90deg, #2E7D32, #4CAF50, #66BB6A) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* remove previous decorative overlays */
.section.esg-impact .card::after,
.esg-impact .card::after,
.section.esg-impact .feature::after,
.esg-impact .feature::after,
section[id*="esg"] .card::after,
section[id*="impact"] .card::after,
section[id*="esg"] .feature::after,
section[id*="impact"] .feature::after{
  content: none !important;
  display: none !important;
}

.section.esg-impact .card:hover,
.esg-impact .card:hover,
.section.esg-impact .feature:hover,
.esg-impact .feature:hover,
section[id*="esg"] .card:hover,
section[id*="impact"] .card:hover,
section[id*="esg"] .feature:hover,
section[id*="impact"] .feature:hover{
  border-color: rgba(46,125,50,0.85) !important;
  box-shadow: 0 18px 34px rgba(46,125,50,0.14) !important;
  transform: translateY(-3px) !important;
}

/* optional "active" first-card feel similar to the reference */
.section.esg-impact .grid > *:first-child,
.esg-impact .grid > *:first-child,
section[id*="esg"] .grid > *:first-child,
section[id*="impact"] .grid > *:first-child{
  border-color: rgba(46,125,50,0.85) !important;
  box-shadow: 0 20px 42px rgba(46,125,50,0.16) !important;
}

.section.esg-impact .card h3,
.esg-impact .card h3,
.section.esg-impact .feature h3,
.esg-impact .feature h3,
section[id*="esg"] .card h3,
section[id*="impact"] .card h3,
section[id*="esg"] .feature h3,
section[id*="impact"] .feature h3{
  color: #2E7D32 !important;
}

.section.esg-impact .kicker .dot,
.esg-impact .kicker .dot,
section[id*="esg"] .kicker .dot,
section[id*="impact"] .kicker .dot{
  background: #43A047 !important;
}



/* -------------------------------------------------------
   V20.4.3 - ESG ribbon restore + sitewide spacing consistency pass
------------------------------------------------------- */

/* Sitewide section spacing consistency */
main > section,
main .section,
body section,
body .section {
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.section-head {
  margin-bottom: 16px !important;
}

.grid,
.partner-grid,
.form-grid,
.metric-grid,
.why-grid,
.g2 {
  gap: 20px !important;
}

.card,
.card.pad,
.feature,
.partner-card,
.solution-card {
  height: 100%;
}

@media (max-width: 1024px) {
  main > section,
  main .section,
  body section,
  body .section {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .grid,
  .partner-grid,
  .form-grid,
  .metric-grid,
  .why-grid,
  .g2 {
    gap: 18px !important;
  }
}

@media (max-width: 768px) {
  main > section,
  main .section,
  body section,
  body .section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .section-head {
    margin-bottom: 12px !important;
  }

  .grid,
  .partner-grid,
  .form-grid,
  .metric-grid,
  .why-grid,
  .g2 {
    gap: 14px !important;
  }

  .card,
  .card.pad,
  .feature,
  .partner-card,
  .solution-card {
    padding: 18px !important;
  }
}

/* ESG & Impact ribbon restored and matched to the attached reference */
.section.esg-impact .card,
.esg-impact .card,
.section.esg-impact .feature,
.esg-impact .feature,
section[id*="esg"] .card,
section[id*="impact"] .card,
section[id*="esg"] .feature,
section[id*="impact"] .feature {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid rgba(11,31,51,0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(15,23,42,0.05) !important;
  overflow: hidden !important;
}

.section.esg-impact .card::before,
.esg-impact .card::before,
.section.esg-impact .feature::before,
.esg-impact .feature::before,
section[id*="esg"] .card::before,
section[id*="impact"] .card::before,
section[id*="esg"] .feature::before,
section[id*="impact"] .feature::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: linear-gradient(90deg, #2E7D32, #43A047, #66BB6A) !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  opacity: 1 !important;
  display: block !important;
  pointer-events: none !important;
}

.section.esg-impact .card::after,
.esg-impact .card::after,
.section.esg-impact .feature::after,
.esg-impact .feature::after,
section[id*="esg"] .card::after,
section[id*="impact"] .card::after,
section[id*="esg"] .feature::after,
section[id*="impact"] .feature::after {
  content: none !important;
  display: none !important;
}

.section.esg-impact .card:hover,
.esg-impact .card:hover,
.section.esg-impact .feature:hover,
.esg-impact .feature:hover,
section[id*="esg"] .card:hover,
section[id*="impact"] .card:hover,
section[id*="esg"] .feature:hover,
section[id*="impact"] .feature:hover {
  border-color: rgba(46,125,50,0.85) !important;
  box-shadow: 0 18px 34px rgba(46,125,50,0.14) !important;
  transform: translateY(-3px) !important;
}

.section.esg-impact .grid > *:first-child,
.esg-impact .grid > *:first-child,
section[id*="esg"] .grid > *:first-child,
section[id*="impact"] .grid > *:first-child {
  border-color: rgba(46,125,50,0.85) !important;
  box-shadow: 0 20px 42px rgba(46,125,50,0.16) !important;
}

.section.esg-impact .card h3,
.esg-impact .card h3,
.section.esg-impact .feature h3,
.esg-impact .feature h3,
section[id*="esg"] .card h3,
section[id*="impact"] .card h3,
section[id*="esg"] .feature h3,
section[id*="impact"] .feature h3 {
  color: #2E7D32 !important;
}

.section.esg-impact .kicker .dot,
.esg-impact .kicker .dot,
section[id*="esg"] .kicker .dot,
section[id*="impact"] .kicker .dot {
  background: #43A047 !important;
}



/* -------------------------------------------------------
   V20.4.4 - mobile block spacing consistency pass
------------------------------------------------------- */

/* Mobile-only spacing normalization across all page grids/blocks */
@media (max-width: 768px){
  .grid,
  .feature-grid,
  .partner-grid,
  .form-grid,
  .metric-grid,
  .why-grid,
  .right-side-visual-grid,
  .solutions-page-hero-grid,
  .hero-grid,
  .g2,
  .g3,
  .g4{
    row-gap: 16px !important;
    column-gap: 16px !important;
  }

  /* Specific sections that were visually collapsing */
  .section.tight .container.grid.g2,
  .section .container.grid.g2,
  .section .grid.g3,
  .section .grid.g4,
  .section .feature-grid,
  .section .partner-grid,
  .section .form-grid{
    row-gap: 16px !important;
    column-gap: 16px !important;
  }

  /* Keep all mobile cards visually even */
  .card,
  .card.pad,
  .feature,
  .partner-card,
  .solution-card,
  .callout{
    margin: 0 !important;
    height: 100% !important;
  }

  /* The Shift / What we build / Why TEEWRA / partner blocks */
  .section .grid > *,
  .section .feature-grid > *,
  .section .partner-grid > *,
  .section .form-grid > *{
    margin: 0 !important;
  }

  /* Make sure stacked two-column sections do not visually collapse */
  .container.grid.g2 > *,
  .grid.g3 > *,
  .grid.g4 > *,
  .feature-grid > *,
  .partner-grid > *{
    min-width: 0 !important;
  }
}



/* -------------------------------------------------------
   V20.4.5 - deeper mobile spacing normalization + premium mobile motion
------------------------------------------------------- */

@media (max-width: 768px){
  /* Normalize every known mobile block/grid system into the same rhythm */
  .hero-grid,
  .right-side-visual-grid,
  .solutions-page-hero-grid,
  .container.grid.g2,
  .grid.g2,
  .grid.g3,
  .grid.g4,
  .feature-grid,
  .partner-grid,
  .form-grid,
  .metric-grid,
  .why-grid,
  .footer-grid,
  .g2,
  .g3,
  .g4{
    display:grid !important;
    grid-template-columns:1fr !important;
    row-gap:18px !important;
    column-gap:18px !important;
    align-items:start !important;
  }

  /* Remove accidental visual collisions from child blocks */
  .hero-grid > *,
  .right-side-visual-grid > *,
  .solutions-page-hero-grid > *,
  .container.grid.g2 > *,
  .grid.g2 > *,
  .grid.g3 > *,
  .grid.g4 > *,
  .feature-grid > *,
  .partner-grid > *,
  .form-grid > *,
  .metric-grid > *,
  .why-grid > *,
  .footer-grid > *{
    margin:0 !important;
    min-width:0 !important;
  }

  /* Even card rhythm inside all grids */
  .card,
  .card.pad,
  .feature,
  .partner-card,
  .solution-card,
  .panel-hero,
  .callout,
  .side-image-card{
    margin:0 !important;
    padding:18px !important;
    height:auto !important;
  }

  /* Keep image-only / hero / side-image cards visually consistent */
  .hero-panel,
  .side-image-card,
  .solutions-page-hero-image{
    margin:0 !important;
  }

  /* Section-to-block spacing */
  .section-head{
    margin-bottom:14px !important;
  }
  .section-head + .grid,
  .section-head + .feature-grid,
  .section-head + .partner-grid,
  .section-head + .form-grid,
  .section-head + .metric-grid,
  .section-head + .why-grid,
  .section-head + .container.grid.g2{
    margin-top:0 !important;
  }

  /* Common paragraph/list spacing inside cards so they don't look cramped or collapsed */
  .card p:last-child,
  .feature p:last-child,
  .partner-card p:last-child,
  .solution-card p:last-child,
  .callout p:last-child{
    margin-bottom:0 !important;
  }

  /* Make mobile reveal more visible and crisp */
  body.motion-ready .reveal-on-scroll,
  body.motion-ready .reveal-on-scroll[data-reveal="left"],
  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    opacity:0 !important;
    transform:translate3d(0,24px,0) scale(.985) !important;
    filter:none !important;
    transition:
      opacity .72s cubic-bezier(.22,1,.36,1),
      transform .72s cubic-bezier(.22,1,.36,1) !important;
  }

  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    opacity:0 !important;
    transform:translate3d(0,20px,0) scale(.965) !important;
    filter:none !important;
    transition:
      opacity .72s cubic-bezier(.22,1,.36,1),
      transform .72s cubic-bezier(.22,1,.36,1) !important;
  }

  body.motion-ready .reveal-on-scroll.is-visible{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
  }

  body.motion-ready .reveal-stagger > *{
    opacity:0 !important;
    transform:translate3d(0,18px,0) scale(.985) !important;
    filter:none !important;
    transition:
      opacity .62s cubic-bezier(.22,1,.36,1),
      transform .62s cubic-bezier(.22,1,.36,1) !important;
  }

  body.motion-ready .reveal-stagger.is-visible > *{
    opacity:1 !important;
    transform:translate3d(0,0,0) scale(1) !important;
  }

  body.motion-ready .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.04s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.10s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.16s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.22s}
}

@media (max-width: 430px){
  .hero-grid,
  .right-side-visual-grid,
  .solutions-page-hero-grid,
  .container.grid.g2,
  .grid.g2,
  .grid.g3,
  .grid.g4,
  .feature-grid,
  .partner-grid,
  .form-grid,
  .metric-grid,
  .why-grid,
  .footer-grid{
    row-gap:16px !important;
    column-gap:16px !important;
  }
}



/* -------------------------------------------------------
   V20.4.6 - stronger mobile page-scroll animation
------------------------------------------------------- */

@media (max-width: 768px) and (prefers-reduced-motion: no-preference){
  /* Make section/block reveals more noticeable on mobile */
  body.motion-ready .reveal-on-scroll,
  body.motion-ready .reveal-on-scroll[data-reveal="left"],
  body.motion-ready .reveal-on-scroll[data-reveal="right"]{
    opacity: 0 !important;
    transform: translate3d(0, 34px, 0) scale(0.975) !important;
    filter: none !important;
    transition:
      opacity 0.82s cubic-bezier(.22,1,.36,1),
      transform 0.82s cubic-bezier(.22,1,.36,1) !important;
  }

  body.motion-ready .reveal-on-scroll[data-reveal="scale"]{
    opacity: 0 !important;
    transform: translate3d(0, 26px, 0) scale(0.95) !important;
    filter: none !important;
    transition:
      opacity 0.82s cubic-bezier(.22,1,.36,1),
      transform 0.82s cubic-bezier(.22,1,.36,1) !important;
  }

  body.motion-ready .reveal-on-scroll.is-visible{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  body.motion-ready .reveal-stagger > *{
    opacity: 0 !important;
    transform: translate3d(0, 22px, 0) scale(0.98) !important;
    filter: none !important;
    transition:
      opacity 0.66s cubic-bezier(.22,1,.36,1),
      transform 0.66s cubic-bezier(.22,1,.36,1) !important;
  }

  body.motion-ready .reveal-stagger.is-visible > *{
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  body.motion-ready .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.12s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.19s}
  body.motion-ready .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s}

  /* Add subtle premium hover/settle feel to cards as they land */
  .card,
  .card.pad,
  .feature,
  .partner-card,
  .solution-card,
  .callout,
  .hero-panel,
  .side-image-card{
    transition:
      transform 0.26s cubic-bezier(.22,1,.36,1),
      box-shadow 0.26s cubic-bezier(.22,1,.36,1) !important;
  }
}



/* -------------------------------------------------------
   V20.4.6 reindexed baseline - home hero right image using uploaded collage
------------------------------------------------------- */
.hero-panel.hero-panel-image{
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-panel.hero-panel-image picture,
.hero-panel.hero-panel-image img{
  width: 100%;
  height: 100%;
  display: block;
}
.hero-panel.hero-panel-image img{
  object-fit: contain;      /* show full collage on desktop */
  object-position: center;
  background: #ffffff;
}

/* keep mobile visually strong and well-framed */
@media (max-width: 768px){
  .hero-panel.hero-panel-image{
    min-height: 240px;
  }
  .hero-panel.hero-panel-image img{
    object-fit: cover;
    object-position: center;
  }
}


/* -------------------------------------------------------
   Final Patch: Hero Right Image Aspect Ratio Adjustment
   Ensures the hero image box adapts to the collage image
   without white gaps on desktop or mobile.
------------------------------------------------------- */
.hero-panel.hero-panel-image {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;   /* Allow natural image ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  overflow: hidden;
}

.hero-panel.hero-panel-image img {
  width: 100%;
  height: auto;
  object-fit: contain;   /* Display full image without cropping */
  border-radius: 16px;
}

/* Ensure proper spacing within the hero grid */
.hero-grid {
  align-items: center;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .hero-panel.hero-panel-image {
    margin-top: 20px;
  }

  .hero-panel.hero-panel-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}



/* -------------------------------------------------------
   Home hero right-block ratio reset - remove white gaps
------------------------------------------------------- */

/* Stop the hero grid from stretching the image block taller than the image ratio */
.hero-grid{
  align-items: start !important;
}

/* Reset the existing hero image block to the collage image ratio */
.hero-panel.hero-panel-image{
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  align-self: start !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  display: block !important;
}

/* Make the image fully fill the box with no inner gaps */
.hero-panel.hero-panel-image picture,
.hero-panel.hero-panel-image img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.hero-panel.hero-panel-image img{
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
  border-radius: 16px !important;
}

/* Keep the same ratio on mobile so the image and box stay matched */
@media (max-width: 768px){
  .hero-panel.hero-panel-image{
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    margin-top: 18px !important;
  }
}



/* -------------------------------------------------------
   Desktop center alignment for home hero right image
------------------------------------------------------- */
@media (min-width: 769px){
  .hero-grid{
    align-items: center !important;
  }

  .hero-panel.hero-panel-image{
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* V20.4.7 - TEEWRA logo lockup in nav/footer */
.brand-logo{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:0 !important;}
.brand-logo img{display:block;width:172px;height:auto;max-height:44px;object-fit:contain;}
footer .brand-logo img,.site-footer .brand-logo img{width:160px;max-height:42px;}
.nav-inner > a{display:flex;align-items:center;text-decoration:none;}
@media (max-width:720px){.brand-logo img{width:138px;max-height:36px;}footer .brand-logo img{width:142px;}}

/* V20.4.9 - Corrected proportional logo sizing
   Previous package still rendered the logo too wide. These rules override V20.4.7 widths. */
header.nav .brand-logo,
.nav .brand-logo{
  width: auto !important;
  max-width: 124px !important;
  height: 32px !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

header.nav .brand-logo img,
.nav .brand-logo img{
  width: auto !important;
  height: 28px !important;
  max-width: 124px !important;
  max-height: 28px !important;
  object-fit: contain !important;
}

footer .brand-logo,
.site-footer .brand-logo{
  width: auto !important;
  max-width: 138px !important;
  height: 36px !important;
}

footer .brand-logo img,
.site-footer .brand-logo img{
  width: auto !important;
  height: 32px !important;
  max-width: 138px !important;
  max-height: 32px !important;
  object-fit: contain !important;
}

@media (max-width: 720px){
  header.nav .brand-logo,
  .nav .brand-logo{
    max-width: 104px !important;
    height: 28px !important;
  }

  header.nav .brand-logo img,
  .nav .brand-logo img{
    height: 24px !important;
    max-width: 104px !important;
    max-height: 24px !important;
  }

  footer .brand-logo,
  .site-footer .brand-logo{
    max-width: 118px !important;
    height: 32px !important;
  }

  footer .brand-logo img,
  .site-footer .brand-logo img{
    height: 28px !important;
    max-width: 118px !important;
    max-height: 28px !important;
  }
}


/* V20.4.10 - Final compact approved logo sizing
   The logo asset is cropped to remove transparent padding, and these rules override all older width-based logo rules. */
.nav-inner > a:has(.brand-logo),
.nav-inner > a:first-child{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  text-decoration:none !important;
}

header.nav .brand.brand-logo,
.nav .brand.brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  width:auto !important;
  max-width:none !important;
  height:24px !important;
  overflow:visible !important;
  flex:0 0 auto !important;
}

header.nav .brand.brand-logo img.teewra-logo-img,
.nav .brand.brand-logo img.teewra-logo-img,
header.nav .brand-logo img,
.nav .brand-logo img{
  display:block !important;
  width:auto !important;
  height:24px !important;
  max-width:122px !important;
  max-height:24px !important;
  object-fit:contain !important;
}

footer .brand.brand-logo,
.site-footer .brand.brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  height:30px !important;
  width:auto !important;
  max-width:none !important;
}

footer .brand.brand-logo img.teewra-logo-img,
.site-footer .brand.brand-logo img.teewra-logo-img,
footer .brand-logo img,
.site-footer .brand-logo img{
  display:block !important;
  width:auto !important;
  height:30px !important;
  max-width:152px !important;
  max-height:30px !important;
  object-fit:contain !important;
}

@media (max-width:720px){
  header.nav .brand.brand-logo,
  .nav .brand.brand-logo{ height:22px !important; }

  header.nav .brand.brand-logo img.teewra-logo-img,
  .nav .brand.brand-logo img.teewra-logo-img,
  header.nav .brand-logo img,
  .nav .brand-logo img{
    height:22px !important;
    max-width:112px !important;
    max-height:22px !important;
  }

  footer .brand.brand-logo,
  .site-footer .brand.brand-logo{ height:28px !important; }

  footer .brand.brand-logo img.teewra-logo-img,
  .site-footer .brand.brand-logo img.teewra-logo-img,
  footer .brand-logo img,
  .site-footer .brand-logo img{
    height:28px !important;
    max-width:142px !important;
    max-height:28px !important;
  }
}


/* =======================================================
   V20.4.13 REAL MOCKUP ALIGNMENT — final cascade override
   Rebuilds the actual visible nav/hero/footer using existing HTML.
======================================================= */
:root{
  --teewra-navy:#10265f;
  --teewra-navy-2:#071b4f;
  --teewra-blue:#22418f;
  --teewra-red:#a40f18;
  --teewra-soft:#f7fbff;
  --teewra-border:#e7edf7;
}

body{
  background:
    radial-gradient(900px 420px at 15% 18%, rgba(34,65,143,.08), transparent 62%),
    linear-gradient(180deg,#fbfdff 0%,#f5f9ff 48%,#ffffff 100%) !important;
  color:#111b35 !important;
}

/* Header/Nav like mockup */
.nav{
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid var(--teewra-border) !important;
  box-shadow:0 8px 26px rgba(16,38,95,.06) !important;
  backdrop-filter:blur(14px) !important;
}
.nav-inner{height:76px !important;}
.nav a:first-child{display:inline-flex;align-items:center;}
.teewra-logo-img{
  height:26px !important;
  width:auto !important;
  max-width:168px !important;
  object-fit:contain !important;
  display:block !important;
}
.footer .teewra-logo-img{height:28px !important;max-width:180px !important;}
.menu{gap:34px !important;}
.menu a{
  position:relative !important;
  color:#17213d !important;
  font-weight:700 !important;
  font-size:15px !important;
  padding:28px 0 26px !important;
}
.menu a:hover{color:var(--teewra-navy) !important;}
.menu a[aria-current="page"]::after,
.menu a:hover::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:16px;
  height:2px;
  background:var(--teewra-red);
  border-radius:999px;
}
.nav .btns .btn.primary,
header .btns .btn.primary,
.nav .btns .submit-site-btn,
header .btns .submit-site-btn{
  background:linear-gradient(180deg,#173170,#071e57) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:6px !important;
  min-height:42px !important;
  padding:0 22px !important;
  box-shadow:0 10px 22px rgba(7,30,87,.18) !important;
  font-weight:800 !important;
}

/* Hero section: clean split, large premium typography */
.hero{
  position:relative !important;
  padding:72px 0 54px !important;
  overflow:hidden !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(247,251,255,.94) 62%,rgba(240,247,255,.9) 100%) !important;
  border-bottom:1px solid var(--teewra-border) !important;
}
.hero::after{
  content:"";
  position:absolute;
  left:-140px;right:40%;bottom:-42px;height:160px;
  background:repeating-radial-gradient(ellipse at center, rgba(34,65,143,.12) 0 1px, transparent 2px 12px);
  opacity:.45;
  pointer-events:none;
}
.hero-grid{
  grid-template-columns:minmax(0,.86fr) minmax(420px,1fr) !important;
  gap:56px !important;
  align-items:center !important;
}
.hero-copy{padding:8px 0 0 !important;position:relative;z-index:1;}
.kicker{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  color:var(--teewra-red) !important;
  letter-spacing:.07em !important;
  font-size:14px !important;
  font-weight:900 !important;
  margin-bottom:22px !important;
}
.kicker .dot{display:none !important;}
.hero-title,
h1.hero-title{
  color:#10265f !important;
  font-size:clamp(42px,4.8vw,70px) !important;
  line-height:1.08 !important;
  letter-spacing:-.055em !important;
  font-weight:900 !important;
  max-width:680px !important;
  margin-bottom:24px !important;
}
.hero-title .highlight,
.highlight{
  color:#10265f !important;
  background:none !important;
  -webkit-text-fill-color:#10265f !important;
}
.hero-lead,
.lead.hero-lead{
  color:#4f5c72 !important;
  font-size:17px !important;
  line-height:1.75 !important;
  max-width:620px !important;
  margin-bottom:24px !important;
}
.hero-actions{gap:16px !important;margin-top:26px !important;}
.hero-actions .btn,
.btn{
  border-radius:6px !important;
  font-weight:800 !important;
}
.hero-actions .btn.primary,
.btn.primary{
  background:linear-gradient(180deg,#173170,#071e57) !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(7,30,87,.18) !important;
}
.hero-actions .btn.secondary,
.btn.secondary{
  background:#fff !important;
  border:1px solid #bdc8dc !important;
  color:#10265f !important;
  box-shadow:none !important;
}
.hero-proof{display:none !important;}
.hero-support{color:#536176 !important;margin-top:18px !important;}
.hero-panel.hero-panel-image,
.hero-panel{
  min-height:430px !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 16px 36px rgba(16,38,95,.12) !important;
  border:1px solid rgba(16,38,95,.09) !important;
}
.hero-panel-image img,
.hero-panel picture,
.hero-panel picture img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* General cards/sections closer to mockup */
.section{background:#fff !important;}
.card,.feature,.band,.callout,.partner-card,.solution-card{
  border-radius:14px !important;
  border:1px solid var(--teewra-border) !important;
  box-shadow:0 14px 34px rgba(16,38,95,.07) !important;
  background:#fff !important;
}
.panel-hero{
  background:linear-gradient(135deg,#10265f,#071b4f) !important;
  color:#fff !important;
}
.panel-hero h2,.panel-hero h3,.panel-hero p,.panel-hero strong{color:#fff !important;}

/* Footer: rebuilt mockup style */
.footer.teewra-mock-footer,
.footer{
  margin-top:0 !important;
  padding:0 !important;
  background:linear-gradient(135deg,#0d2b66 0%,#061b4c 100%) !important;
  border-top:0 !important;
  color:#dce7fb !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.footer-grid{
  display:grid !important;
  grid-template-columns:1.35fr .75fr .85fr 1.05fr !important;
  gap:44px !important;
  padding-top:48px !important;
  padding-bottom:44px !important;
}
.footer h4{
  color:#fff !important;
  font-size:18px !important;
  margin:0 0 18px !important;
}
.footer p,.footer a{
  color:#dce7fb !important;
  line-height:1.85 !important;
  font-size:15px !important;
}
.footer a:hover{color:#fff !important;}
.footer-brand-block > p{max-width:330px !important;margin-top:20px !important;}
.footer-social{display:flex;gap:14px;margin-top:28px;}
.footer-social a{
  width:42px;height:42px;border-radius:50%;display:inline-grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);
  color:#fff !important;font-weight:900;line-height:1 !important;
}
.footer-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  padding-top:22px !important;
  padding-bottom:28px !important;
  border-top:1px solid rgba(255,255,255,.16) !important;
}
.footer-bottom p{margin:0 !important;color:#dce7fb !important;}
.footer-bottom span{margin:0 14px;color:rgba(255,255,255,.45);}

/* Mobile mockup menu */
.mobile-nav-toggle{
  border:0 !important;background:transparent !important;box-shadow:none !important;
}
.mobile-nav-toggle span{background:#17213d !important;}
.mobile-nav-panel{
  background:#fff !important;
  border:1px solid var(--teewra-border) !important;
  box-shadow:0 18px 38px rgba(16,38,95,.14) !important;
}
.mobile-nav-links a{
  color:#17213d !important;
  font-weight:700 !important;
}
.mobile-nav-links a[aria-current="page"]{
  color:#10265f !important;
  text-decoration:underline;
  text-decoration-color:var(--teewra-red);
  text-underline-offset:9px;
}
.mobile-nav-cta .btn,
.mobile-nav-cta .submit-site-btn{
  width:100% !important;
  border-radius:6px !important;
  background:linear-gradient(180deg,#173170,#071e57) !important;
  color:#fff !important;
}

@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr !important;gap:30px !important;}
  .hero-panel.hero-panel-image{min-height:360px !important;}
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:28px !important;}
}
@media (max-width:768px){
  .nav-inner{height:64px !important;}
  .teewra-logo-img{height:24px !important;max-width:154px !important;}
  .hero{padding:52px 0 36px !important;}
  .hero-title,h1.hero-title{font-size:34px !important;line-height:1.14 !important;}
  .hero-lead,.lead.hero-lead{font-size:15px !important;line-height:1.7 !important;}
  .hero-panel.hero-panel-image{min-height:300px !important;border-radius:12px !important;}
  .footer-grid{grid-template-columns:1fr !important;padding-top:36px !important;padding-bottom:30px !important;}
  .footer-bottom{display:block !important;}
  .footer-bottom p + p{margin-top:12px !important;}
  .footer .teewra-logo-img{height:27px !important;}
}



/* =======================================================
   V20.4.15 — additional brand/content fixes
======================================================= */
:root{
  --teewra-navy:#061b4c;
  --teewra-blue:#14307e;
  --teewra-footer:#061b4c;
  --teewra-footer-2:#0d2b66;
  --teewra-red:#a40f18;
}

/* Top navigation CTA text changed in HTML; keep visual styling stable */
.nav .btns .btn.primary,
header.nav .btns .btn.primary,
.mobile-nav-cta .btn.primary{
  background:linear-gradient(180deg,#173170,#071e57) !important;
  color:#ffffff !important;
}

/* Slightly larger logo than compact baseline, with darker brand blue baked into image */
.brand.brand-logo img.teewra-logo-img,
.teewra-logo-img{
  height:30px !important;
  max-height:30px !important;
  width:auto !important;
  max-width:194px !important;
  object-fit:contain !important;
}
.brand.brand-logo{height:30px !important;align-items:center !important;}
@media (max-width:768px){
  .brand.brand-logo img.teewra-logo-img,
  .teewra-logo-img{height:26px !important;max-height:26px !important;max-width:170px !important;}
  .brand.brand-logo{height:26px !important;}
}

/* Footer: use white wordmark on dark blue footer for clarity */
.footer .footer-logo-white,
.footer .teewra-logo-img.footer-logo-white{
  height:34px !important;
  max-height:34px !important;
  max-width:220px !important;
  width:auto !important;
  object-fit:contain !important;
}
.footer .brand.brand-logo{height:34px !important;}
@media (max-width:768px){
  .footer .footer-logo-white,
  .footer .teewra-logo-img.footer-logo-white{height:31px !important;max-height:31px !important;max-width:202px !important;}
  .footer .brand.brand-logo{height:31px !important;}
}

/* Uniform blue feature panels: readable white text everywhere */
.card.panel-hero,
.panel-hero,
.card.panel-hero:hover{
  background:linear-gradient(135deg,#10265f 0%,#071b4f 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 18px 42px rgba(7,30,87,.18) !important;
}
.panel-hero *,
.card.panel-hero *,
.panel-hero h1,
.panel-hero h2,
.panel-hero h3,
.panel-hero h4,
.panel-hero p,
.panel-hero li,
.panel-hero strong,
.panel-hero .kicker,
.panel-hero .label{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.panel-hero .kicker{
  color:#dbe8ff !important;
  -webkit-text-fill-color:#dbe8ff !important;
}
.panel-hero p,
.panel-hero li{
  color:#eef4ff !important;
  -webkit-text-fill-color:#eef4ff !important;
}

/* Specific home blue sections requested by user */
section .panel-hero h2{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
section .panel-hero p{
  color:#eef4ff !important;
  -webkit-text-fill-color:#eef4ff !important;
}

/* Footer year/text + dark footer polish */
footer.footer,
.footer.teewra-mock-footer{
  background:linear-gradient(135deg,var(--teewra-footer-2) 0%,var(--teewra-footer) 100%) !important;
  color:#dce7fb !important;
}
.footer h4{color:#ffffff !important;}
.footer p,.footer a,.footer-bottom p,.footer-bottom a{color:#dce7fb !important;}
.footer a:hover{color:#ffffff !important;}


/* ============================================================
   Source: assets/css/teewra-final.css
   Consolidated into teewra-site.css during V20.4.41 refactor
   ============================================================ */

/* ===== mockup-v20-4-14.css ===== */

/* =======================================================
   V20.4.14 — Verified mockup-style override
   Loaded after assets/styles.css so these rules visibly win.
======================================================= */
:root{
  --mock-navy:#10265f;
  --mock-navy-dark:#061b4c;
  --mock-blue:#1f3f91;
  --mock-red:#a40f18;
  --mock-text:#17213d;
  --mock-muted:#536176;
  --mock-line:#e5ebf5;
  --mock-bg:#f6faff;
}
html{background:#fff;}
body{
  background:linear-gradient(180deg,#fbfdff 0%,#f6faff 44%,#ffffff 100%) !important;
  color:var(--mock-text) !important;
}
.container{max-width:1240px !important;}
/* NAV */
header.nav,.nav{
  position:sticky !important;top:0 !important;z-index:50 !important;
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid var(--mock-line) !important;
  box-shadow:0 8px 28px rgba(16,38,95,.07) !important;
  backdrop-filter:blur(14px) !important;
}
.nav-inner{height:78px !important;align-items:center !important;}
.nav-inner > a:first-child{display:inline-flex !important;align-items:center !important;text-decoration:none !important;}
.brand.brand-logo{height:27px !important;width:auto !important;max-width:none !important;overflow:visible !important;display:inline-flex !important;align-items:center !important;}
.brand.brand-logo img.teewra-logo-img,.teewra-logo-img{
  height:27px !important;width:auto !important;max-height:27px !important;max-width:175px !important;display:block !important;object-fit:contain !important;
}
.menu{display:flex !important;align-items:center !important;gap:34px !important;}
.menu a{
  position:relative !important;color:var(--mock-text) !important;font-size:15px !important;font-weight:700 !important;line-height:1 !important;
  padding:31px 0 28px !important;text-decoration:none !important;
}
.menu a:hover,.menu a[style]{color:var(--mock-navy) !important;}
.menu a[style]::after,.menu a:hover::after{
  content:"";position:absolute;left:0;right:0;bottom:17px;height:2px;border-radius:99px;background:var(--mock-red);
}
.nav .btns .btn.primary,.nav .btns .submit-site-btn,header .btns .btn.primary{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  min-height:44px !important;padding:0 22px !important;border-radius:6px !important;border:0 !important;
  background:linear-gradient(180deg,#173170,#071e57) !important;color:#fff !important;
  box-shadow:0 10px 22px rgba(7,30,87,.20) !important;font-weight:800 !important;
}
/* HERO - mockup inspired */
.hero{
  position:relative !important;overflow:hidden !important;padding:76px 0 58px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(246,250,255,.96) 64%,rgba(239,246,255,.94)) !important;
  border-bottom:1px solid var(--mock-line) !important;
}
.hero:after{
  content:"";position:absolute;left:-160px;bottom:-44px;width:720px;height:190px;opacity:.42;pointer-events:none;
  background:repeating-radial-gradient(ellipse at center, rgba(31,63,145,.15) 0 1px, transparent 2px 13px);
}
.hero-grid{grid-template-columns:minmax(0,.86fr) minmax(430px,1fr) !important;gap:58px !important;align-items:center !important;}
.hero-copy{position:relative;z-index:1;padding-top:4px !important;}
.kicker{color:var(--mock-red) !important;background:transparent !important;border:0 !important;padding:0 !important;font-size:14px !important;font-weight:900 !important;letter-spacing:.07em !important;text-transform:uppercase !important;}
.kicker .dot{display:none !important;}
.hero-title,h1.hero-title{color:var(--mock-navy) !important;font-size:clamp(44px,4.6vw,68px) !important;line-height:1.08 !important;letter-spacing:-.055em !important;font-weight:900 !important;margin:22px 0 24px !important;max-width:680px !important;}
.hero-title .highlight,.highlight{color:var(--mock-navy) !important;background:none !important;-webkit-text-fill-color:var(--mock-navy) !important;}
.hero-lead,.lead.hero-lead{font-size:17px !important;line-height:1.78 !important;color:var(--mock-muted) !important;max-width:650px !important;margin:0 0 24px !important;}
.hero-proof{display:none !important;}
.hero-support{color:var(--mock-muted) !important;font-size:16px !important;margin-top:18px !important;}
.hero-panel.hero-panel-image{min-height:430px !important;border-radius:14px !important;background:#fff !important;border:1px solid rgba(16,38,95,.09) !important;box-shadow:0 18px 42px rgba(16,38,95,.13) !important;overflow:hidden !important;}
.hero-panel-image img,.hero-panel picture,.hero-panel picture img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;}
/* CARDS */
.section{background:#fff !important;}
.card,.partner-card,.solution-card,.feature,.callout,.band{border-radius:14px !important;background:#fff !important;border:1px solid var(--mock-line) !important;box-shadow:0 14px 34px rgba(16,38,95,.07) !important;}
.panel-hero{background:linear-gradient(135deg,#10265f,#071b4f) !important;color:#fff !important;}
.panel-hero *{color:#fff !important;}
.btn,.hero-actions .btn{border-radius:6px !important;font-weight:800 !important;}
.btn.primary{background:linear-gradient(180deg,#173170,#071e57) !important;color:#fff !important;border:0 !important;}
.btn.secondary,.btn.ghost{background:#fff !important;color:var(--mock-navy) !important;border:1px solid #bdc8dc !important;}
/* FOOTER */
footer.footer,.footer.teewra-mock-footer{
  margin:36px auto 0 !important;padding:0 !important;background:linear-gradient(135deg,#0d2b66 0%,#061b4c 100%) !important;
  color:#dce7fb !important;border:0 !important;box-shadow:0 18px 44px rgba(7,30,87,.18) !important;
}
.footer-grid{display:grid !important;grid-template-columns:1.35fr .75fr .85fr 1.05fr !important;gap:46px !important;align-items:start !important;padding-top:48px !important;padding-bottom:44px !important;}
.footer h4{color:#fff !important;font-size:18px !important;line-height:1.2 !important;margin:0 0 18px !important;font-weight:850 !important;}
.footer p,.footer a{color:#dce7fb !important;font-size:15px !important;line-height:1.85 !important;text-decoration:none !important;}
.footer a:hover{color:#fff !important;}
.footer .brand.brand-logo{height:31px !important;}
.footer .teewra-logo-img{height:31px !important;max-height:31px !important;max-width:202px !important;}
.footer-brand-block > p{max-width:340px !important;margin:20px 0 0 !important;}
.footer-social{display:flex !important;gap:14px !important;margin-top:28px !important;}
.footer-social a{width:42px !important;height:42px !important;border-radius:50% !important;display:inline-grid !important;place-items:center !important;background:rgba(255,255,255,.10) !important;border:1px solid rgba(255,255,255,.08) !important;color:#fff !important;font-weight:900 !important;line-height:1 !important;}
.footer-bottom{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:20px !important;border-top:1px solid rgba(255,255,255,.16) !important;padding-top:22px !important;padding-bottom:28px !important;}
.footer-bottom p{margin:0 !important;color:#dce7fb !important;}
.footer-bottom span{margin:0 14px !important;color:rgba(255,255,255,.45) !important;}
/* MOBILE */
.mobile-nav-toggle{border:0 !important;background:transparent !important;box-shadow:none !important;}
.mobile-nav-toggle span{background:var(--mock-text) !important;}
.mobile-nav-panel{background:#fff !important;border:1px solid var(--mock-line) !important;box-shadow:0 18px 40px rgba(16,38,95,.16) !important;}
.mobile-nav-links a{color:var(--mock-text) !important;font-weight:700 !important;}
.mobile-nav-cta .btn,.mobile-nav-cta .submit-site-btn{width:100% !important;background:linear-gradient(180deg,#173170,#071e57) !important;color:#fff !important;border-radius:6px !important;}
@media (max-width:1100px){.hero-grid{grid-template-columns:1fr !important;gap:32px !important}.hero-panel.hero-panel-image{min-height:360px !important}.footer-grid{grid-template-columns:1fr 1fr !important;gap:30px !important}.menu{display:none !important;}}
@media (max-width:768px){.nav-inner{height:66px !important}.brand.brand-logo,.brand.brand-logo img.teewra-logo-img,.teewra-logo-img{height:24px !important;max-height:24px !important;max-width:156px !important}.hero{padding:54px 0 38px !important}.hero-title,h1.hero-title{font-size:35px !important;line-height:1.13 !important}.hero-lead,.lead.hero-lead{font-size:15px !important}.hero-panel.hero-panel-image{min-height:300px !important}.footer-grid{grid-template-columns:1fr !important;padding-top:36px !important;padding-bottom:30px !important}.footer-bottom{display:block !important}.footer-bottom p + p{margin-top:12px !important}.footer .teewra-logo-img{height:29px !important;max-height:29px !important;max-width:188px !important}}


/* ===== mockup-v20-4-15.css ===== */


/* =======================================================
   V20.4.15 — additional brand/content fixes
======================================================= */
:root{
  --teewra-navy:#061b4c;
  --teewra-blue:#14307e;
  --teewra-footer:#061b4c;
  --teewra-footer-2:#0d2b66;
  --teewra-red:#a40f18;
}

/* Top navigation CTA text changed in HTML; keep visual styling stable */
.nav .btns .btn.primary,
header.nav .btns .btn.primary,
.mobile-nav-cta .btn.primary{
  background:linear-gradient(180deg,#173170,#071e57) !important;
  color:#ffffff !important;
}

/* Slightly larger logo than compact baseline, with darker brand blue baked into image */
.brand.brand-logo img.teewra-logo-img,
.teewra-logo-img{
  height:30px !important;
  max-height:30px !important;
  width:auto !important;
  max-width:194px !important;
  object-fit:contain !important;
}
.brand.brand-logo{height:30px !important;align-items:center !important;}
@media (max-width:768px){
  .brand.brand-logo img.teewra-logo-img,
  .teewra-logo-img{height:26px !important;max-height:26px !important;max-width:170px !important;}
  .brand.brand-logo{height:26px !important;}
}

/* Footer: use white wordmark on dark blue footer for clarity */
.footer .footer-logo-white,
.footer .teewra-logo-img.footer-logo-white{
  height:34px !important;
  max-height:34px !important;
  max-width:220px !important;
  width:auto !important;
  object-fit:contain !important;
}
.footer .brand.brand-logo{height:34px !important;}
@media (max-width:768px){
  .footer .footer-logo-white,
  .footer .teewra-logo-img.footer-logo-white{height:31px !important;max-height:31px !important;max-width:202px !important;}
  .footer .brand.brand-logo{height:31px !important;}
}

/* Uniform blue feature panels: readable white text everywhere */
.card.panel-hero,
.panel-hero,
.card.panel-hero:hover{
  background:linear-gradient(135deg,#10265f 0%,#071b4f 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 18px 42px rgba(7,30,87,.18) !important;
}
.panel-hero *,
.card.panel-hero *,
.panel-hero h1,
.panel-hero h2,
.panel-hero h3,
.panel-hero h4,
.panel-hero p,
.panel-hero li,
.panel-hero strong,
.panel-hero .kicker,
.panel-hero .label{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.panel-hero .kicker{
  color:#dbe8ff !important;
  -webkit-text-fill-color:#dbe8ff !important;
}
.panel-hero p,
.panel-hero li{
  color:#eef4ff !important;
  -webkit-text-fill-color:#eef4ff !important;
}

/* Specific home blue sections requested by user */
section .panel-hero h2{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
section .panel-hero p{
  color:#eef4ff !important;
  -webkit-text-fill-color:#eef4ff !important;
}

/* Footer year/text + dark footer polish */
footer.footer,
.footer.teewra-mock-footer{
  background:linear-gradient(135deg,var(--teewra-footer-2) 0%,var(--teewra-footer) 100%) !important;
  color:#dce7fb !important;
}
.footer h4{color:#ffffff !important;}
.footer p,.footer a,.footer-bottom p,.footer-bottom a{color:#dce7fb !important;}
.footer a:hover{color:#ffffff !important;}


/* ===== mockup-v20-4-16.css ===== */


/* =======================================================
   V20.4.16 — uniform captions inside blue panels
   Loaded last to normalize all blue box kicker/caption colors.
======================================================= */

/* Blue panel caption/kicker treatment: same light caption color everywhere */
.card.panel-hero .kicker,
.panel-hero .kicker,
.card.panel-hero .eyebrow,
.panel-hero .eyebrow,
.card.panel-hero .label,
.panel-hero .label{
  color:#dbe8ff !important;
  -webkit-text-fill-color:#dbe8ff !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}

.card.panel-hero .kicker .dot,
.panel-hero .kicker .dot{
  background:#ffffff !important;
  opacity:.9 !important;
}

/* Ensure all text inside the blue feature panels remains readable */
.card.panel-hero h1,
.card.panel-hero h2,
.card.panel-hero h3,
.card.panel-hero h4,
.panel-hero h1,
.panel-hero h2,
.panel-hero h3,
.panel-hero h4{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

.card.panel-hero p,
.card.panel-hero li,
.panel-hero p,
.panel-hero li{
  color:#eef4ff !important;
  -webkit-text-fill-color:#eef4ff !important;
}


/* ===== mockup-v20-4-17.css ===== */

/* =======================================================
   V20.4.17 — blue panel caption color parity
   Makes captions inside all navy/blue feature boxes match
   the red caption treatment used by "WHAT WE BUILD".
======================================================= */
:root{--mock-red:#a40f18;}

/* Captions/kickers inside blue panels/cards only */
.card.panel-hero .kicker,
.panel-hero .kicker,
.card.panel-hero .eyebrow,
.panel-hero .eyebrow,
.card.panel-hero .label,
.panel-hero .label,
.card.panel-hero [class*="kicker"],
.panel-hero [class*="kicker"]{
  color:var(--mock-red) !important;
  -webkit-text-fill-color:var(--mock-red) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
  letter-spacing:.07em !important;
}

/* Keep section captions uniform with the same red token */
.section-head .kicker,
section .kicker,
.section .kicker{
  color:var(--mock-red) !important;
  -webkit-text-fill-color:var(--mock-red) !important;
}

/* The dot/icon should not introduce another color next to captions */
.card.panel-hero .kicker .dot,
.panel-hero .kicker .dot,
.section-head .kicker .dot,
section .kicker .dot,
.section .kicker .dot{
  display:none !important;
}

/* Preserve blue-panel readability for body/header text */
.card.panel-hero h1,
.card.panel-hero h2,
.card.panel-hero h3,
.card.panel-hero h4,
.panel-hero h1,
.panel-hero h2,
.panel-hero h3,
.panel-hero h4{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.card.panel-hero p,
.card.panel-hero li,
.panel-hero p,
.panel-hero li{
  color:#eef4ff !important;
  -webkit-text-fill-color:#eef4ff !important;
}


/* ===== mockup-v20-4-18.css ===== */

/* =======================================================
   V20.4.18 — ESG card highlight should be hover-only
   Removes the always-on highlight from the first ESG card
   such as "Reduce carbon intensity" while preserving the
   same highlight treatment on mouse hover/focus.
======================================================= */

/* Reset the first ESG/impact card to the same default state as the others */
.section.esg-impact .grid > *:first-child,
.esg-impact .grid > *:first-child,
section[id*="esg"] .grid > *:first-child,
section[id*="impact"] .grid > *:first-child {
  border-color: rgba(11,31,51,0.06) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,0.05) !important;
  transform: none !important;
}

/* Apply the green highlight only when the user interacts with any ESG/impact card */
.section.esg-impact .card:hover,
.esg-impact .card:hover,
.section.esg-impact .feature:hover,
.esg-impact .feature:hover,
section[id*="esg"] .card:hover,
section[id*="impact"] .card:hover,
section[id*="esg"] .feature:hover,
section[id*="impact"] .feature:hover,
.section.esg-impact .card:focus-within,
.esg-impact .card:focus-within,
.section.esg-impact .feature:focus-within,
.esg-impact .feature:focus-within,
section[id*="esg"] .card:focus-within,
section[id*="impact"] .card:focus-within,
section[id*="esg"] .feature:focus-within,
section[id*="impact"] .feature:focus-within {
  border-color: rgba(46,125,50,0.85) !important;
  box-shadow: 0 20px 42px rgba(46,125,50,0.16) !important;
  transform: translateY(-3px) !important;
}


/* ===== mockup-v20-4-21.css ===== */


/* V20.4.21 content and image fit refinements */
.footer-brand-block .footer-social{display:none !important;}
.footer-brand-block p{max-width:360px !important;}

/* New image assets: keep all hero visuals crisp, proportionate, and non-distorted */
.hero-panel.hero-panel-image,
.side-image-card,
.solutions-page-hero-image{
  background:#07162f !important;
  overflow:hidden !important;
}

.hero-panel.hero-panel-image picture,
.hero-panel.hero-panel-image img,
.side-image-card img,
.solutions-page-hero-image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Home image is wide/cinematic; keep it visually balanced in the right hero card. */
.hero-panel.hero-panel-image img{
  object-position:center center !important;
}

/* Inner page images are full-bleed hero cards; remove SVG-style padding and overlays. */
.side-image-card{
  padding:0 !important;
  min-height:420px !important;
  border-radius:24px !important;
}
.side-image-card img{
  border-radius:inherit !important;
}
.solutions-page-hero-image{
  min-height:420px !important;
  border-radius:24px !important;
}
.solutions-page-hero-image::after{display:none !important;}

@media (max-width:1100px){
  .side-image-card,.solutions-page-hero-image{min-height:360px !important;}
}
@media (max-width:768px){
  .hero-panel.hero-panel-image{min-height:300px !important;}
  .side-image-card,.solutions-page-hero-image{min-height:300px !important;border-radius:16px !important;}
}


/* ===== mockup-v20-4-22.css ===== */

/* V20.4.22 - Inner page hero image alignment
   Keeps About, Solutions, and Partners hero images visually aligned with the page caption/text,
   instead of appearing vertically lifted above the caption area. */

/* Desktop/tablet: align the visual card with the top of the text column. */
.page-hero .right-side-visual-grid,
.page-hero .solutions-page-hero-grid{
  align-items:start !important;
}

/* About + Partners hero image cards: start at the same visual line as the caption. */
.page-hero .right-side-visual-grid .side-image-card{
  margin-top:0 !important;
  align-self:start !important;
}

/* Solutions hero image: same alignment behavior as About/Partners. */
.page-hero .solutions-page-hero-image-wrap,
.page-hero .solutions-page-hero-image{
  margin-top:0 !important;
  align-self:start !important;
}

/* Preserve non-distorted image rendering and center crop inside the card. */
.page-hero .side-image-card img,
.page-hero .solutions-page-hero-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Keep the image card proportionate and not visually overpowering on inner pages. */
.page-hero .side-image-card,
.page-hero .solutions-page-hero-image{
  min-height:390px !important;
}

@media (max-width:1100px){
  .page-hero .side-image-card,
  .page-hero .solutions-page-hero-image{
    min-height:340px !important;
  }
}

@media (max-width:768px){
  .page-hero .right-side-visual-grid,
  .page-hero .solutions-page-hero-grid{
    align-items:start !important;
  }
  .page-hero .side-image-card,
  .page-hero .solutions-page-hero-image{
    min-height:280px !important;
    margin-top:8px !important;
  }
}


/* ===== mockup-v20-4-25.css ===== */

/* V20.4.25 - Inner hero image alignment refinement
   About, Solutions, and Partners now follow the home hero alignment principle:
   the visual column is vertically centered with the text column, while the image
   height is capped so it does not visually overpower or rise above the copy. */

@media (min-width: 901px){
  /* Match home hero behavior: image and text columns share the same vertical center. */
  body:not(.home) .page-hero .right-side-visual-grid,
  body:not(.home) .page-hero .solutions-page-hero-grid{
    align-items:center !important;
  }

  /* About + Partners: reduce previous oversized 420px image cards. */
  body:not(.home) .page-hero .right-side-visual-grid .side-image-card{
    height:clamp(300px, 24vw, 350px) !important;
    min-height:0 !important;
    max-height:350px !important;
    margin-top:0 !important;
    align-self:center !important;
    padding:0 !important;
  }

  /* Solutions has more text, so allow a little more height without looking top-heavy. */
  body:not(.home) .page-hero .solutions-page-hero-image-wrap{
    align-self:center !important;
    margin-top:0 !important;
  }
  body:not(.home) .page-hero .solutions-page-hero-image{
    height:clamp(320px, 26vw, 380px) !important;
    min-height:0 !important;
    max-height:380px !important;
    margin-top:0 !important;
    align-self:center !important;
    padding:0 !important;
  }

  body:not(.home) .page-hero .side-image-card img,
  body:not(.home) .page-hero .solutions-page-hero-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px){
  body:not(.home) .page-hero .right-side-visual-grid .side-image-card{
    height:320px !important;
    max-height:320px !important;
  }
  body:not(.home) .page-hero .solutions-page-hero-image{
    height:340px !important;
    max-height:340px !important;
  }
}

@media (max-width: 900px){
  body:not(.home) .page-hero .right-side-visual-grid,
  body:not(.home) .page-hero .solutions-page-hero-grid{
    align-items:start !important;
  }
  body:not(.home) .page-hero .side-image-card,
  body:not(.home) .page-hero .solutions-page-hero-image{
    height:300px !important;
    min-height:0 !important;
    max-height:300px !important;
    margin-top:18px !important;
  }
}

@media (max-width: 520px){
  body:not(.home) .page-hero .side-image-card,
  body:not(.home) .page-hero .solutions-page-hero-image{
    height:240px !important;
    max-height:240px !important;
    border-radius:16px !important;
  }
}


/* ===== mockup-v20-4-26.css ===== */

/* V20.4.26 - Solutions hero image clarity fix
   The Solutions image is a 4:3 visual. The previous forced-height cover crop made it look compressed/cropped.
   This keeps the natural 4:3 proportion, gives the visual column more room, and aligns it with the text column. */

@media (min-width: 901px){
  body:not(.home) .solutions-page-hero .solutions-page-hero-grid{
    grid-template-columns:minmax(0, .92fr) minmax(460px, 1.08fr) !important;
    gap:48px !important;
    align-items:center !important;
  }

  body:not(.home) .solutions-page-hero .solutions-page-hero-image-wrap{
    align-self:center !important;
    width:100% !important;
    max-width:620px !important;
    justify-self:end !important;
    margin-top:0 !important;
  }

  body:not(.home) .solutions-page-hero .solutions-page-hero-image{
    width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    max-height:none !important;
    min-height:0 !important;
    margin-top:0 !important;
    border-radius:20px !important;
    overflow:hidden !important;
  }

  body:not(.home) .solutions-page-hero .solutions-page-hero-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px){
  body:not(.home) .solutions-page-hero .solutions-page-hero-grid{
    grid-template-columns:minmax(0, .95fr) minmax(390px, 1.05fr) !important;
    gap:36px !important;
  }
  body:not(.home) .solutions-page-hero .solutions-page-hero-image-wrap{
    max-width:540px !important;
  }
}

@media (max-width: 900px){
  body:not(.home) .solutions-page-hero .solutions-page-hero-image{
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    max-height:none !important;
  }
  body:not(.home) .solutions-page-hero .solutions-page-hero-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
  }
}


/* ===== mockup-v20-4-27.css ===== */

/* V20.4.27 - Solutions image readability fix
   The Solutions artwork contains embedded labels/text, so it needs more rendered width and no crop.
   Keep About/Partners/Home unchanged. */

@media (min-width: 901px){
  body:not(.home) .solutions-page-hero > .container{
    max-width:1320px !important;
  }

  body:not(.home) .solutions-page-hero .solutions-page-hero-grid{
    grid-template-columns:minmax(0, .74fr) minmax(620px, 1.26fr) !important;
    gap:44px !important;
    align-items:center !important;
  }

  body:not(.home) .solutions-page-hero .solutions-page-hero-content{
    max-width:560px !important;
  }

  body:not(.home) .solutions-page-hero .solutions-page-hero-image-wrap{
    width:100% !important;
    max-width:780px !important;
    justify-self:end !important;
    align-self:center !important;
    margin-top:0 !important;
  }

  body:not(.home) .solutions-page-hero .solutions-page-hero-image{
    width:100% !important;
    aspect-ratio:4 / 3 !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    border-radius:22px !important;
    overflow:hidden !important;
    background:#f5f8ff !important;
  }

  body:not(.home) .solutions-page-hero .solutions-page-hero-image img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px){
  body:not(.home) .solutions-page-hero .solutions-page-hero-grid{
    grid-template-columns:minmax(0, .82fr) minmax(520px, 1.18fr) !important;
    gap:34px !important;
  }
  body:not(.home) .solutions-page-hero .solutions-page-hero-image-wrap{
    max-width:660px !important;
  }
}

@media (max-width: 900px){
  body:not(.home) .solutions-page-hero .solutions-page-hero-image{
    aspect-ratio:4 / 3 !important;
    height:auto !important;
    background:#f5f8ff !important;
  }
  body:not(.home) .solutions-page-hero .solutions-page-hero-image img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}


/* ===== mockup-v20-4-28.css ===== */

/* V20.4.28 - Solutions hero image replacement + alignment
   New Solutions artwork is screenshot-cropped to remove the right black strip.
   Keep the image's natural ratio and center-align it with the text column. */

@media (min-width: 901px){
  .solutions-page-hero > .container{
    max-width: 1240px !important;
  }

  .solutions-page-hero .solutions-page-hero-grid{
    grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr) !important;
    gap: 42px !important;
    align-items: center !important;
  }

  .solutions-page-hero .solutions-page-hero-content{
    max-width: 600px !important;
    align-self: center !important;
  }

  .solutions-page-hero .solutions-page-hero-image-wrap{
    width: 100% !important;
    max-width: 680px !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .solutions-page-hero .solutions-page-hero-image{
    width: 100% !important;
    aspect-ratio: 911 / 682 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #eef4fb !important;
    box-shadow: 0 24px 54px rgba(8, 24, 54, 0.16) !important;
  }

  .solutions-page-hero .solutions-page-hero-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px){
  .solutions-page-hero .solutions-page-hero-grid{
    grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr) !important;
    gap: 32px !important;
  }
  .solutions-page-hero .solutions-page-hero-image-wrap{
    max-width: 580px !important;
  }
}

@media (max-width: 900px){
  .solutions-page-hero .solutions-page-hero-grid{
    align-items: start !important;
  }
  .solutions-page-hero .solutions-page-hero-image-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 22px !important;
  }
  .solutions-page-hero .solutions-page-hero-image{
    width: 100% !important;
    aspect-ratio: 911 / 682 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #eef4fb !important;
  }
  .solutions-page-hero .solutions-page-hero-image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}



/* ===== V20.4.29 final production polish ===== */
:root{
  --teewra-navy:#071b46;
  --teewra-blue:#123a8c;
  --teewra-royal:#173f9a;
  --teewra-red:#9b0d18;
  --teewra-soft:#f5f8fd;
}

/* Use consistent premium hero media cards on inner pages while preserving home layout */
.page-hero .right-side-visual-grid{
  align-items:center !important;
}
.page-hero .side-image-card{
  align-self:center !important;
  margin-top:0 !important;
}
.page-hero .side-image-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Solutions image: keep readable and balanced */
.solutions-page-hero-grid{
  align-items:center !important;
}
.solutions-page-hero-image-wrap{
  align-self:center !important;
  margin-top:0 !important;
}
.solutions-page-hero-image{
  aspect-ratio: 1.34 / 1 !important;
  min-height: 430px !important;
  max-height: 560px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#eef4ff !important;
}
.solutions-page-hero-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Content readability */
.page-hero .lead, .solutions-intro{
  max-width: 68ch;
}
.card.pad h2, .card.pad h3{
  letter-spacing:-0.02em;
}

/* Consistent link/button polish */
.btn{
  border-radius:10px !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.btn:hover{
  transform:translateY(-1px);
}

/* Footer cleanup */
.footer-brand-block .footer-socials, .footer-socials, .social-row{
  display:none !important;
}
.teewra-mock-footer .footer-grid{
  align-items:flex-start !important;
}
.teewra-mock-footer a{
  text-decoration:none;
}
.teewra-mock-footer a:hover{
  text-decoration:underline;
}

@media (max-width: 900px){
  .solutions-page-hero-image{
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.34 / 1 !important;
  }
}


/* ============================================================
   Source: assets/css/teewra-final-v38.css
   Consolidated into teewra-site.css during V20.4.41 refactor
   ============================================================ */
/* V20.4.38 correction pass: logo, uniform background, full-visible inner hero images, icon hover */
:root{
  --teewra-page-bg:#f4f8ff;
  --teewra-navy:#071b4f;
  --teewra-cyan:#5ee7ff;
}
html,body{background:var(--teewra-page-bg) !important;}
body{overflow-x:hidden !important;}
body main, main, .hero, .page-hero, .section, section, body section, body .section{
  background:var(--teewra-page-bg) !important;
}
header.nav,.nav{
  background:rgba(244,248,255,.96) !important;
  box-shadow:0 10px 30px rgba(7,27,79,.055) !important;
  border-bottom:1px solid rgba(7,27,79,.08) !important;
}
.nav-inner{min-height:78px !important;padding-top:8px !important;padding-bottom:8px !important;align-items:center !important;}
/* 1. Reduce logo 10% from previous V37, and force exact same visual width in nav + footer */
header.nav .brand.brand-logo,
.nav .brand.brand-logo,
footer .brand.brand-logo,
.footer .brand.brand-logo{
  display:inline-flex !important;align-items:center !important;width:auto !important;height:auto !important;min-height:0 !important;line-height:0 !important;margin:0 !important;
}
header.nav .brand.brand-logo img.teewra-logo-img,
header.nav img.teewra-logo-img,
.nav .brand.brand-logo img.teewra-logo-img,
.nav img.teewra-logo-img,
footer .brand.brand-logo img.teewra-logo-img,
footer img.teewra-logo-img,
.footer .brand.brand-logo img.teewra-logo-img,
.footer-logo-white{
  width:214px !important;
  min-width:214px !important;
  max-width:214px !important;
  height:auto !important;
  max-height:none !important;
  display:block !important;
  object-fit:contain !important;
  transform:none !important;
}
.footer .brand.brand-logo,footer .brand.brand-logo{margin-bottom:16px !important;}
/* Keep major heading scale uniform with the refined home statement */
.hero-title,
.card.panel-hero h2,.panel-hero h2,
.card.panel-hero h3,.panel-hero h3,
.section-head h2{
  font-size:clamp(2.0rem,4vw,3.35rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
}
/* 2. About / Partners / Contact hero images: same principle as Solutions page; full image visible, no crop */
.about-page .page-hero .container,
.partners-page .page-hero .container,
.contact-page .page-hero .container{max-width:1280px !important;}
.about-page .right-side-visual-grid,
.partners-page .right-side-visual-grid,
.contact-page .right-side-visual-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr) !important;
  gap:42px !important;
  align-items:center !important;
}
.about-page .side-image-card.inner-hero-image-card,
.partners-page .side-image-card.inner-hero-image-card,
.contact-page .side-image-card.inner-hero-image-card,
.about-page .page-hero .side-image-card,
.partners-page .page-hero .side-image-card,
.contact-page .page-hero .side-image-card{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  background:#ffffff !important;
  border:1px solid rgba(11,31,51,.07) !important;
  border-radius:20px !important;
  overflow:visible !important;
  align-self:center !important;
  justify-self:end !important;
  box-shadow:0 18px 38px rgba(15,23,42,.08) !important;
}
.about-page .side-image-card.inner-hero-image-card img,
.partners-page .side-image-card.inner-hero-image-card img,
.contact-page .side-image-card.inner-hero-image-card img,
.about-page .page-hero .side-image-card img,
.partners-page .page-hero .side-image-card img,
.contact-page .page-hero .side-image-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  aspect-ratio:auto !important;
  border-radius:20px !important;
  transform:none !important;
  filter:none !important;
}
/* Make Contact visual comfortable despite a slightly different ratio */
.contact-page .right-side-visual-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;}
/* 3. Feature icons: slightly reduced, no internal gap, illumination restored */
.feature-tile,
.home-page .section .grid.g4 .card .feature-tile,
.partner-icon-imgwrap,
.partner-card .partner-icon-imgwrap{
  width:71px !important;height:71px !important;min-width:71px !important;min-height:71px !important;max-width:71px !important;max-height:71px !important;
  padding:0 !important;margin:0 0 16px !important;border:0 !important;border-radius:17px !important;overflow:hidden !important;
  display:grid !important;place-items:center !important;background:transparent !important;
  box-shadow:0 12px 28px rgba(7,27,79,.12) !important;
  transition:box-shadow .22s ease, transform .22s ease, filter .22s ease !important;
}
.feature-tile-img,
.feature-tile img,
.partner-icon-img,
.partner-icon-imgwrap img,
.partner-card .partner-icon-imgwrap img{
  width:100% !important;height:100% !important;min-width:100% !important;min-height:100% !important;max-width:100% !important;max-height:100% !important;
  object-fit:cover !important;object-position:center center !important;display:block !important;padding:0 !important;margin:0 !important;border-radius:inherit !important;
  transform:none !important;transition:transform .22s ease, filter .22s ease !important;
}
.card:hover .feature-tile,.feature:hover .feature-tile,.partner-card:hover .partner-icon-imgwrap,.feature-tile:hover,.partner-icon-imgwrap:hover{
  box-shadow:0 0 0 1px rgba(94,231,255,.52),0 0 32px rgba(94,231,255,.46),0 18px 36px rgba(7,27,79,.18) !important;
  transform:translateY(-2px) !important;
}
.card:hover .feature-tile-img,.card:hover .feature-tile img,.feature:hover .feature-tile-img,.feature:hover .feature-tile img,.partner-card:hover .partner-icon-img,.partner-card:hover .partner-icon-imgwrap img,.feature-tile:hover img,.partner-icon-imgwrap:hover img{
  filter:brightness(1.16) saturate(1.32) contrast(1.04) !important;
  transform:scale(1.035) !important;
}
/* How it works remains text-only */
.home-page .feature-grid .feature .feature-tile,
.home-page .feature-grid .feature img.feature-tile-img{display:none !important;}
/* Maintain color uniformity */
.btn.primary,button.btn.primary,a.btn.primary,.btn.dark,a.btn.dark{background:var(--teewra-navy) !important;border-color:var(--teewra-navy) !important;}
.panel-hero,.card.panel-hero{background:linear-gradient(135deg,#10265f 0%,var(--teewra-navy) 100%) !important;}
.teewra-mock-footer,.footer{background:linear-gradient(135deg,#10265f 0%,var(--teewra-navy) 100%) !important;}
.panel-hero .kicker,.card.panel-hero .kicker{color:var(--teewra-cyan) !important;}
@media (max-width:1180px){
  header.nav .brand.brand-logo img.teewra-logo-img,header.nav img.teewra-logo-img,.nav .brand.brand-logo img.teewra-logo-img,.nav img.teewra-logo-img,footer .brand.brand-logo img.teewra-logo-img,footer img.teewra-logo-img,.footer .brand.brand-logo img.teewra-logo-img,.footer-logo-white{width:196px !important;min-width:196px !important;max-width:196px !important;}
  .about-page .right-side-visual-grid,.partners-page .right-side-visual-grid,.contact-page .right-side-visual-grid{grid-template-columns:1fr !important;gap:28px !important;}
  .about-page .page-hero .side-image-card,.partners-page .page-hero .side-image-card,.contact-page .page-hero .side-image-card{justify-self:center !important;max-width:780px !important;}
}
@media (max-width:900px){
  .nav-inner{min-height:72px !important;}
  header.nav .brand.brand-logo img.teewra-logo-img,header.nav img.teewra-logo-img,.nav .brand.brand-logo img.teewra-logo-img,.nav img.teewra-logo-img,footer .brand.brand-logo img.teewra-logo-img,footer img.teewra-logo-img,.footer .brand.brand-logo img.teewra-logo-img,.footer-logo-white{width:176px !important;min-width:176px !important;max-width:176px !important;}
  .hero-title,.card.panel-hero h2,.panel-hero h2,.card.panel-hero h3,.panel-hero h3,.section-head h2{font-size:clamp(1.8rem,7vw,2.7rem) !important;}
}
@media (max-width:560px){
  header.nav .brand.brand-logo img.teewra-logo-img,header.nav img.teewra-logo-img,.nav .brand.brand-logo img.teewra-logo-img,.nav img.teewra-logo-img,footer .brand.brand-logo img.teewra-logo-img,footer img.teewra-logo-img,.footer .brand.brand-logo img.teewra-logo-img,.footer-logo-white{width:154px !important;min-width:154px !important;max-width:154px !important;}
  .feature-tile,.home-page .section .grid.g4 .card .feature-tile,.partner-icon-imgwrap,.partner-card .partner-icon-imgwrap{width:66px !important;height:66px !important;min-width:66px !important;min-height:66px !important;}
}


/* ============================================================
   V20.4.41 STRUCTURAL REFACTOR LAYER
   Single source of truth for future tuning.
   This layer is intentionally conservative: it normalizes selectors
   and layout hooks without changing the approved V20.4.38 visual baseline.
   ============================================================ */
:root{
  --teewra-page-bg:#f7faff;
  --teewra-surface:#ffffff;
  --teewra-navy:#071b4f;
  --teewra-navy-2:#10265f;
  --teewra-cyan:#5ee7ff;
  --teewra-text:#0b1f33;
  --teewra-muted:#5b6b83;
  --teewra-border:rgba(11,31,51,.08);
  --teewra-radius-xl:24px;
  --teewra-logo-width:196px;
  --teewra-feature-icon-size:71px;
  --teewra-inner-hero-ratio:16/10;
  --teewra-inner-hero-max:720px;
}
html,body{background:var(--teewra-page-bg);}
body{color:var(--teewra-text);}
.nav{background:var(--teewra-page-bg);}
section,.section,.page-hero,.hero{background:transparent;}

/* Logo: one shared rule for header and footer. */
.site-logo-img,
.teewra-logo-img{
  width:var(--teewra-logo-width) !important;
  min-width:var(--teewra-logo-width) !important;
  max-width:var(--teewra-logo-width) !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  image-rendering:auto !important;
  display:block !important;
}
.footer .site-logo-img,
.footer .teewra-logo-img,
.footer-logo-white{
  width:var(--teewra-logo-width) !important;
  min-width:var(--teewra-logo-width) !important;
  max-width:var(--teewra-logo-width) !important;
  height:auto !important;
}

/* Shared inner hero layout for About / Partners / Contact and similar pages. */
.inner-hero-grid,
.right-side-visual-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.inner-hero-visual,
.hero-visual-card,
.inner-hero-image-card,
.side-image-card{
  width:100%;
  max-width:var(--teewra-inner-hero-max);
  margin:0;
  justify-self:end;
  align-self:center;
  border-radius:var(--teewra-radius-xl);
  overflow:hidden;
  background:var(--teewra-surface);
  border:1px solid var(--teewra-border);
  box-shadow:0 18px 38px rgba(15,23,42,.08);
}
.inner-hero-visual img,
.hero-visual-card img,
.inner-hero-image-card img,
.side-image-card img{
  width:100%;
  height:auto;
  aspect-ratio:var(--teewra-inner-hero-ratio);
  object-fit:contain;
  object-position:center center;
  display:block;
  border-radius:inherit;
  background:var(--teewra-surface);
}

/* Solutions keeps its approved image behavior but now shares the same hook. */
.solutions-page-hero-image.hero-visual-card img,
.solutions-page-hero-image img{
  object-fit:contain;
  object-position:center center;
}

/* Blue surface system: footer, blue panels, primary buttons, and captions. */
.btn.primary,button.btn.primary,a.btn.primary,.btn.dark,a.btn.dark{
  background:var(--teewra-navy) !important;
  border-color:var(--teewra-navy) !important;
}
.card.panel-hero,.panel-hero{
  background:linear-gradient(135deg,var(--teewra-navy-2) 0%,var(--teewra-navy) 100%) !important;
}
.teewra-mock-footer,.footer{
  background:linear-gradient(135deg,var(--teewra-navy-2) 0%,var(--teewra-navy) 100%) !important;
}
.card.panel-hero .kicker,.panel-hero .kicker,
.card.panel-hero .kicker .dot + *, .panel-hero .kicker .dot + *{
  color:var(--teewra-cyan) !important;
}
.panel-hero .kicker,.card.panel-hero .kicker{color:var(--teewra-cyan) !important;}

/* Feature icon tiles: one global pattern, no placeholder gap, premium hover illumination. */
.feature-tile,
.partner-icon-imgwrap{
  width:var(--teewra-feature-icon-size) !important;
  height:var(--teewra-feature-icon-size) !important;
  min-width:var(--teewra-feature-icon-size) !important;
  min-height:var(--teewra-feature-icon-size) !important;
  padding:0 !important;
  border:0 !important;
  border-radius:17px !important;
  overflow:hidden !important;
  display:grid !important;
  place-items:center !important;
  background:transparent !important;
  box-shadow:0 12px 28px rgba(7,27,79,.12) !important;
  transition:box-shadow .22s ease, transform .22s ease, filter .22s ease !important;
}
.feature-tile img,.feature-tile-img,
.partner-icon-imgwrap img,.partner-icon-img{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:inherit !important;
  filter:contrast(1.05) saturate(1.08) brightness(1.02);
  transition:transform .22s ease, filter .22s ease !important;
}
.card:hover .feature-tile,
.feature:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  box-shadow:0 0 0 1px rgba(94,231,255,.52),0 0 32px rgba(94,231,255,.46),0 18px 36px rgba(7,27,79,.18) !important;
  transform:translateY(-2px) !important;
}
.card:hover .feature-tile img,
.card:hover .feature-tile-img,
.feature:hover .feature-tile img,
.feature:hover .feature-tile-img,
.partner-card:hover .partner-icon-imgwrap img,
.partner-card:hover .partner-icon-img{
  filter:brightness(1.16) saturate(1.32) contrast(1.06) !important;
  transform:scale(1.035) !important;
}
.home-page .feature-grid .feature .feature-tile,
.home-page .feature-grid .feature img.feature-tile-img{display:none !important;}

@media (max-width:1180px){
  :root{--teewra-logo-width:196px;--teewra-inner-hero-max:780px;}
  .inner-hero-grid,.right-side-visual-grid{grid-template-columns:1fr;gap:28px;}
  .inner-hero-visual,.hero-visual-card,.inner-hero-image-card,.side-image-card{justify-self:center;}
}
@media (max-width:900px){
  :root{--teewra-logo-width:176px;}
  .nav-inner{min-height:72px;}
}
@media (max-width:560px){
  :root{--teewra-logo-width:154px;--teewra-feature-icon-size:66px;}
}

/* ============================================================
   V20.4.43 AUTHORITATIVE FIX LAYER
   Built from verified V20.4.41 baseline. This is the final
   source of truth for logo, background, captions, hero visuals,
   and feature image tiles.
   ============================================================ */
:root{
  --teewra-page-bg:#f7faff !important;
  --teewra-navy:#071b4f !important;
  --teewra-navy-2:#10265f !important;
  --teewra-cyan:#5ee7ff !important;
  --teewra-logo-width:196px !important;
  --teewra-feature-icon-size:72px !important;
}
html,
body{
  background:#f7faff !important;
}
body,
.nav,
header.nav,
main,
section,
.section,
.hero,
.page-hero{
  background:#f7faff !important;
  background-image:none !important;
}
.nav{
  border-bottom:1px solid rgba(7,27,79,.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Logo: exact same visual width in nav and footer, SVG in nav for sharpness */
header.nav .brand.brand-logo,
footer .brand.brand-logo{
  width:var(--teewra-logo-width) !important;
  min-width:var(--teewra-logo-width) !important;
  max-width:var(--teewra-logo-width) !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
}
header.nav .brand.brand-logo img,
footer .brand.brand-logo img,
.site-logo-img,
.teewra-logo-img,
.footer-logo-white{
  width:var(--teewra-logo-width) !important;
  min-width:var(--teewra-logo-width) !important;
  max-width:var(--teewra-logo-width) !important;
  height:auto !important;
  max-height:none !important;
  display:block !important;
  object-fit:contain !important;
}
.nav-inner{min-height:78px !important;}
/* Blue surfaces and buttons use the same navy system */
.btn.primary,
button.btn.primary,
a.btn.primary,
.btn.dark,
a.btn.dark,
.submit-site-btn{
  background:var(--teewra-navy) !important;
  background-image:none !important;
  border-color:var(--teewra-navy) !important;
  color:#fff !important;
}
.card.panel-hero,
.panel-hero{
  background:linear-gradient(135deg,var(--teewra-navy-2),var(--teewra-navy)) !important;
  color:#fff !important;
}
.teewra-mock-footer,
.footer{
  background:linear-gradient(135deg,var(--teewra-navy-2),var(--teewra-navy)) !important;
  color:#fff !important;
}
/* Blue box captions: override the old maroon/red kicker globally when inside blue panels */
body .panel-hero .kicker,
body .card.panel-hero .kicker,
body .callout.panel-hero .kicker,
body .panel-hero .kicker span,
body .card.panel-hero .kicker span,
body .callout.panel-hero .kicker span{
  color:var(--teewra-cyan) !important;
  -webkit-text-fill-color:var(--teewra-cyan) !important;
}
body .panel-hero .kicker .dot,
body .card.panel-hero .kicker .dot{
  background:var(--teewra-cyan) !important;
}
/* Inner hero images: use the exact uploaded assets, show the full image, no crop/chop */
.about-page .page-hero .right-side-visual-grid,
.partners-page .page-hero .right-side-visual-grid,
.contact-page .page-hero .right-side-visual-grid,
.about-page .page-hero .inner-hero-grid,
.partners-page .page-hero .inner-hero-grid,
.contact-page .page-hero .inner-hero-grid{
  display:grid !important;
  grid-template-columns:minmax(0,0.98fr) minmax(440px,1.02fr) !important;
  align-items:center !important;
  gap:clamp(34px,5vw,66px) !important;
}
.about-page .page-hero .side-image-card,
.partners-page .page-hero .side-image-card,
.contact-page .page-hero .side-image-card,
.about-page .page-hero .hero-visual-card,
.partners-page .page-hero .hero-visual-card,
.contact-page .page-hero .hero-visual-card{
  width:100% !important;
  max-width:760px !important;
  justify-self:end !important;
  align-self:center !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
  border-radius:24px !important;
  border:1px solid rgba(7,27,79,.10) !important;
  box-shadow:0 18px 42px rgba(7,27,79,.10) !important;
}
.about-page .page-hero .side-image-card img,
.partners-page .page-hero .side-image-card img,
.contact-page .page-hero .side-image-card img,
.about-page .page-hero .hero-visual-card img,
.partners-page .page-hero .hero-visual-card img,
.contact-page .page-hero .hero-visual-card img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  background:#fff !important;
  border-radius:24px !important;
}
/* Home and Partners feature title images: visible, gapless, crisp, premium illumination */
.feature-tile,
.partner-icon-imgwrap{
  width:var(--teewra-feature-icon-size) !important;
  height:var(--teewra-feature-icon-size) !important;
  min-width:var(--teewra-feature-icon-size) !important;
  min-height:var(--teewra-feature-icon-size) !important;
  max-width:var(--teewra-feature-icon-size) !important;
  max-height:var(--teewra-feature-icon-size) !important;
  padding:0 !important;
  margin:0 0 16px 0 !important;
  border:1px solid rgba(7,27,79,.12) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  display:block !important;
  background:#fff !important;
  box-shadow:0 10px 24px rgba(7,27,79,.12) !important;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease !important;
}
.feature-tile img,
.feature-tile-img,
.partner-icon-imgwrap img,
.partner-icon-img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:15px !important;
  filter:saturate(1.15) contrast(1.08) brightness(1.04) !important;
  transform:translateZ(0) !important;
  transition:filter .22s ease, transform .22s ease !important;
}
.card:hover .feature-tile,
.feature:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  border-color:rgba(94,231,255,.72) !important;
  box-shadow:0 0 0 1px rgba(94,231,255,.52),0 0 34px rgba(94,231,255,.48),0 18px 38px rgba(7,27,79,.20) !important;
  transform:translateY(-2px) !important;
}
.card:hover .feature-tile img,
.card:hover .feature-tile-img,
.feature:hover .feature-tile img,
.feature:hover .feature-tile-img,
.partner-card:hover .partner-icon-imgwrap img,
.partner-card:hover .partner-icon-img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  filter:brightness(1.18) saturate(1.38) contrast(1.10) !important;
  transform:scale(1.035) !important;
}
/* Do not add images to the Home 'How it works' text-only feature grid. */
.home-page .feature-grid .feature .feature-tile,
.home-page .feature-grid .feature img.feature-tile-img{
  display:none !important;
}
@media (max-width:1180px){
  :root{--teewra-logo-width:188px !important;}
  .about-page .page-hero .right-side-visual-grid,
  .partners-page .page-hero .right-side-visual-grid,
  .contact-page .page-hero .right-side-visual-grid,
  .about-page .page-hero .inner-hero-grid,
  .partners-page .page-hero .inner-hero-grid,
  .contact-page .page-hero .inner-hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .about-page .page-hero .side-image-card,
  .partners-page .page-hero .side-image-card,
  .contact-page .page-hero .side-image-card{
    justify-self:center !important;
    max-width:760px !important;
  }
}
@media (max-width:720px){
  :root{--teewra-logo-width:158px !important;--teewra-feature-icon-size:66px !important;}
  .nav-inner{min-height:72px !important;}
}

/* ============================================================
   V20.4.44 SINGLE FIX: top nav logo visual match to footer
   Footer logo size is kept as-is. Header logo is optically enlarged
   because the blue-on-light SVG appears smaller than the white footer mark.
   ============================================================ */
header.nav .nav-inner > a,
header.nav .brand.brand-logo{
  width:216px !important;
  min-width:216px !important;
  max-width:216px !important;
  display:flex !important;
  align-items:center !important;
}
header.nav .brand.brand-logo img,
header.nav img.teewra-logo-img,
header.nav img.site-logo-img{
  width:216px !important;
  min-width:216px !important;
  max-width:216px !important;
  height:auto !important;
  max-height:none !important;
  display:block !important;
  object-fit:contain !important;
}
footer .brand.brand-logo,
footer .brand.brand-logo img,
footer img.teewra-logo-img,
footer img.site-logo-img,
.footer-logo-white{
  width:196px !important;
  min-width:196px !important;
  max-width:196px !important;
  height:auto !important;
  max-height:none !important;
}
@media (max-width:720px){
  header.nav .nav-inner > a,
  header.nav .brand.brand-logo,
  header.nav .brand.brand-logo img,
  header.nav img.teewra-logo-img,
  header.nav img.site-logo-img{
    width:170px !important;
    min-width:170px !important;
    max-width:170px !important;
  }
  footer .brand.brand-logo,
  footer .brand.brand-logo img,
  footer img.teewra-logo-img,
  footer img.site-logo-img,
  .footer-logo-white{
    width:154px !important;
    min-width:154px !important;
    max-width:154px !important;
  }
}


/* ============================================================
   V20.4.45 VERIFIED SINGLE FIX: Top nav logo visual match
   Use tight-cropped high-resolution PNG in header and size it to
   the same apparent width as footer mark. Footer remains unchanged.
   ============================================================ */
header.nav .nav-inner > a:first-child{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:196px !important;
  min-width:196px !important;
  max-width:196px !important;
  height:auto !important;
  overflow:visible !important;
  flex:0 0 196px !important;
}
header.nav .brand.brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:196px !important;
  min-width:196px !important;
  max-width:196px !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
header.nav .brand.brand-logo img.teewra-logo-img,
header.nav .brand.brand-logo img.site-logo-img,
header.nav img.teewra-logo-img.site-logo-img{
  display:block !important;
  width:196px !important;
  min-width:196px !important;
  max-width:196px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  image-rendering:auto !important;
}
@media (max-width:720px){
  header.nav .nav-inner > a:first-child,
  header.nav .brand.brand-logo,
  header.nav .brand.brand-logo img.teewra-logo-img,
  header.nav .brand.brand-logo img.site-logo-img,
  header.nav img.teewra-logo-img.site-logo-img{
    width:158px !important;
    min-width:158px !important;
    max-width:158px !important;
    flex-basis:158px !important;
  }
}


/* V21.2 uniform SVG asset integration
   - all hero visuals use the same 911x683 SVG ratio
   - hero images are fully visible with no cropping or distortion
   - feature/partner SVG tiles fit cleanly and keep premium hover illumination
*/
:root{
  --teewra-hero-aspect: 911 / 684;
}
.hero-grid,
.page-hero .right-side-visual-grid,
.solutions-page .right-side-visual-grid{
  align-items:center !important;
}
.hero-panel.hero-panel-image,
.page-hero .side-image-card,
.solutions-page-hero-image,
.solutions-page .solutions-page-hero-image{
  aspect-ratio:var(--teewra-hero-aspect) !important;
  min-height:0 !important;
  height:auto !important;
  width:100% !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  background:#fff !important;
}
.hero-panel.hero-panel-image picture,
.hero-panel.hero-panel-image picture img,
.hero-panel.hero-panel-image > img,
.page-hero .side-image-card img,
.solutions-page-hero-image img,
.solutions-page .solutions-page-hero-image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}
.about-page .page-hero .right-side-visual-grid,
.partners-page .page-hero .right-side-visual-grid,
.contact-page .page-hero .right-side-visual-grid,
.solutions-page .page-hero .right-side-visual-grid{
  grid-template-columns:minmax(0,1fr) minmax(480px,0.96fr) !important;
  gap:48px !important;
}
.feature-tile,
.home-page .section .grid.g4 .card .feature-tile,
.partner-icon-imgwrap,
.partner-card .partner-icon-imgwrap{
  width:76px !important;
  height:76px !important;
  min-width:76px !important;
  min-height:76px !important;
  max-width:76px !important;
  max-height:76px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:transparent !important;
  box-shadow:0 12px 26px rgba(7,27,79,.14) !important;
  transition:box-shadow .22s ease, transform .22s ease, filter .22s ease !important;
}
.feature-tile-img,
.feature-tile img,
.partner-icon-img,
.partner-icon-imgwrap img,
.partner-card .partner-icon-imgwrap img{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:inherit !important;
  image-rendering:auto !important;
  filter:contrast(1.03) saturate(1.08) !important;
}
.card:hover .feature-tile,
.feature:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  box-shadow:0 0 0 1px rgba(94,231,255,.62),0 0 30px rgba(94,231,255,.42),0 18px 34px rgba(7,27,79,.18) !important;
  transform:translateY(-2px) !important;
}
.card:hover .feature-tile-img,
.card:hover .feature-tile img,
.feature:hover .feature-tile-img,
.feature:hover .feature-tile img,
.partner-card:hover .partner-icon-img,
.partner-card:hover .partner-icon-imgwrap img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  filter:brightness(1.12) contrast(1.08) saturate(1.18) drop-shadow(0 0 10px rgba(94,231,255,.28)) !important;
}
@media (max-width:1100px){
  .about-page .page-hero .right-side-visual-grid,
  .partners-page .page-hero .right-side-visual-grid,
  .contact-page .page-hero .right-side-visual-grid,
  .solutions-page .page-hero .right-side-visual-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .hero-panel.hero-panel-image,
  .page-hero .side-image-card,
  .solutions-page-hero-image{max-width:760px !important;justify-self:center !important;}
}
@media (max-width:768px){
  .feature-tile,
  .home-page .section .grid.g4 .card .feature-tile,
  .partner-icon-imgwrap,
  .partner-card .partner-icon-imgwrap{width:68px !important;height:68px !important;min-width:68px !important;min-height:68px !important;}
}

/* ============================================================
   V21.3 - About page hero image enlargement
   - make About hero visual larger without cropping
   - slightly reduce the left text column so image gets more room
   ============================================================ */
@media (min-width:1101px){
  .about-page .page-hero .right-side-visual-grid.inner-hero-grid{
    grid-template-columns:minmax(0,0.82fr) minmax(560px,1.18fr) !important;
    gap:38px !important;
    align-items:center !important;
  }
  .about-page .page-hero .side-image-card.inner-hero-image-card,
  .about-page .page-hero .side-image-card.hero-visual-card{
    width:100% !important;
    max-width:none !important;
    aspect-ratio:911 / 683 !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
  }
  .about-page .page-hero .side-image-card.inner-hero-image-card img,
  .about-page .page-hero .side-image-card.hero-visual-card img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
  }
  .about-page .page-hero h1{
    max-width:620px !important;
  }
  .about-page .page-hero .lead{
    max-width:640px !important;
  }
}

/* ============================================================
   V21.4 - About hero image 4:3 proportion fix
   - Maintain true 4:3 display area for About hero visual
   - Give the image enough height, not only width
   - Keep the full SVG visible without cropping or distortion
   ============================================================ */
@media (min-width: 1101px) {
  body.about-page .page-hero .container {
    max-width: 1360px !important;
  }

  body.about-page .page-hero .right-side-visual-grid.inner-hero-grid,
  body.about-page .page-hero .right-side-visual-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(620px, 1.22fr) !important;
    gap: 40px !important;
    align-items: center !important;
  }

  body.about-page .page-hero .right-side-visual-grid.inner-hero-grid > div:first-child {
    max-width: 590px !important;
  }

  body.about-page .page-hero .side-image-card.inner-hero-image-card,
  body.about-page .page-hero .side-image-card.hero-visual-card,
  body.about-page .page-hero .inner-hero-visual {
    width: 100% !important;
    max-width: 780px !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    align-self: center !important;
    background: #ffffff !important;
  }

  body.about-page .page-hero .side-image-card.inner-hero-image-card img,
  body.about-page .page-hero .side-image-card.hero-visual-card img,
  body.about-page .page-hero .inner-hero-visual img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: inherit !important;
    background: transparent !important;
  }

  body.about-page .page-hero h1 {
    max-width: 560px !important;
  }

  body.about-page .page-hero .lead {
    max-width: 590px !important;
  }
}

@media (max-width: 1100px) {
  body.about-page .page-hero .side-image-card.inner-hero-image-card,
  body.about-page .page-hero .side-image-card.hero-visual-card,
  body.about-page .page-hero .inner-hero-visual {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    max-width: 780px !important;
    margin-inline: auto !important;
  }

  body.about-page .page-hero .side-image-card.inner-hero-image-card img,
  body.about-page .page-hero .side-image-card.hero-visual-card img,
  body.about-page .page-hero .inner-hero-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* V21.6 — About hero zoom-only tuning
   Baseline: V21.4 About 4:3 Image. Keeps the existing About hero layout/card ratio,
   and only slightly enlarges the image inside the card to reduce side whitespace. */
.about-page .page-hero .side-image-card.inner-hero-image-card,
.about-page .page-hero .side-image-card.hero-visual-card{
  overflow: hidden !important;
}
.about-page .page-hero .side-image-card.inner-hero-image-card img,
.about-page .page-hero .side-image-card.hero-visual-card img{
  object-fit: contain !important;
  transform: scale(1.045) !important;
  transform-origin: center center !important;
}

/* V21.7 — About hero no-chop verification
   Priority: render the complete About SVG without any cropping. */
@media (min-width: 1101px) {
  body.about-page .page-hero .right-side-visual-grid.inner-hero-grid,
  body.about-page .page-hero .right-side-visual-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(640px, 1.22fr) !important;
    align-items: center !important;
    gap: 40px !important;
  }
  body.about-page .page-hero .side-image-card.inner-hero-image-card,
  body.about-page .page-hero .side-image-card.hero-visual-card,
  body.about-page .page-hero .inner-hero-visual {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    max-width: 800px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
  }
}
body.about-page .page-hero .side-image-card.inner-hero-image-card img,
body.about-page .page-hero .side-image-card.hero-visual-card img,
body.about-page .page-hero .inner-hero-visual img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  display: block !important;
}

/* ============================================================
   V21.8 — SVG-only asset cleanup + no-chop hero rendering
   Purpose: make all uniform 911×683 hero SVGs render fully, with
   no cropping on left/right/top/bottom, and make feature SVGs crisp.
   ============================================================ */
:root{
  --teewra-page-bg:#f6f8fc;
  --teewra-card-bg:#ffffff;
  --teewra-navy:#071b4f;
  --teewra-cyan:#5ee7ff;
}
html,body{
  background:
    radial-gradient(1100px 460px at 100% -12%, rgba(49,94,251,.08), transparent 54%),
    radial-gradient(800px 420px at -8% 12%, rgba(94,231,255,.06), transparent 45%),
    linear-gradient(180deg, var(--teewra-page-bg) 0%, #f6f8fc 100%) !important;
}
.nav,
header.nav{
  background:rgba(246,248,252,.92) !important;
  backdrop-filter:blur(14px) !important;
}

/* Header/footer logo now use SVG assets only */
header.nav .brand.brand-logo,
footer .brand.brand-logo{
  height:40px !important;
  display:flex !important;
  align-items:center !important;
}
header.nav .brand.brand-logo img.site-logo-img,
header.nav img.teewra-logo-img,
footer .brand.brand-logo img.site-logo-img,
footer img.teewra-logo-img{
  width:184px !important;
  height:auto !important;
  max-width:184px !important;
  max-height:40px !important;
  object-fit:contain !important;
  display:block !important;
  transform:none !important;
}
@media (max-width:768px){
  header.nav .brand.brand-logo,
  footer .brand.brand-logo{height:34px !important;}
  header.nav .brand.brand-logo img.site-logo-img,
  header.nav img.teewra-logo-img,
  footer .brand.brand-logo img.site-logo-img,
  footer img.teewra-logo-img{
    width:154px !important;
    max-width:154px !important;
    max-height:34px !important;
  }
}

/* Blue panels/buttons/captions consistency */
.panel-hero,
.card.panel-hero,
.teewra-mock-footer,
.footer{
  background:linear-gradient(135deg,#10265f 0%,var(--teewra-navy) 100%) !important;
}
.btn.primary,
.nav .btns .btn,
button.btn.primary,
.submit-site-btn{
  background:linear-gradient(135deg,#10265f 0%,var(--teewra-navy) 100%) !important;
  border-color:rgba(94,231,255,.18) !important;
  color:#fff !important;
}
.panel-hero .kicker,
.card.panel-hero .kicker,
.panel-hero .label,
.card.panel-hero .label,
.panel-hero .kicker *,
.card.panel-hero .kicker *{
  color:var(--teewra-cyan) !important;
}
.panel-hero h1,.panel-hero h2,.panel-hero h3,
.card.panel-hero h1,.card.panel-hero h2,.card.panel-hero h3{
  color:#ffffff !important;
}
.panel-hero p,.card.panel-hero p{
  color:#dce7fb !important;
}

/* Definitive no-chop rule for every hero SVG image card.
   The SVGs are 911×683. The card keeps that exact ratio.
   Padding gives a safe inset so edge text/graphics are never clipped by rounded corners. */
.hero-panel.hero-panel-image,
.solutions-page-hero-image,
.page-hero .side-image-card,
.page-hero .inner-hero-image-card,
.page-hero .hero-visual-card,
.page-hero .inner-hero-visual{
  aspect-ratio:911 / 683 !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:18px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
  border-radius:24px !important;
  box-sizing:border-box !important;
}
.hero-panel.hero-panel-image img,
.solutions-page-hero-image img,
.page-hero .side-image-card img,
.page-hero .inner-hero-image-card img,
.page-hero .hero-visual-card img,
.page-hero .inner-hero-visual img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  border-radius:18px !important;
  background:transparent !important;
}
@media (min-width:1101px){
  .about-page .page-hero .right-side-visual-grid,
  .partners-page .page-hero .right-side-visual-grid,
  .contact-page .page-hero .right-side-visual-grid,
  .solutions-page .page-hero .right-side-visual-grid{
    grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr) !important;
    align-items:center !important;
    gap:42px !important;
  }
  .about-page .page-hero .side-image-card,
  .partners-page .page-hero .side-image-card,
  .contact-page .page-hero .side-image-card{
    max-width:780px !important;
    justify-self:end !important;
  }
  .page-hero .right-side-visual-grid > div:first-child{
    min-width:0 !important;
  }
}
@media (max-width:1100px){
  .about-page .page-hero .right-side-visual-grid,
  .partners-page .page-hero .right-side-visual-grid,
  .contact-page .page-hero .right-side-visual-grid,
  .solutions-page .page-hero .right-side-visual-grid{
    grid-template-columns:1fr !important;
  }
  .page-hero .side-image-card,
  .solutions-page-hero-image,
  .hero-panel.hero-panel-image{
    max-width:820px !important;
    margin-inline:auto !important;
  }
}
@media (max-width:768px){
  .hero-panel.hero-panel-image,
  .solutions-page-hero-image,
  .page-hero .side-image-card,
  .page-hero .inner-hero-image-card,
  .page-hero .hero-visual-card,
  .page-hero .inner-hero-visual{
    padding:10px !important;
    border-radius:18px !important;
  }
  .hero-panel.hero-panel-image img,
  .solutions-page-hero-image img,
  .page-hero .side-image-card img,
  .page-hero .inner-hero-image-card img,
  .page-hero .hero-visual-card img,
  .page-hero .inner-hero-visual img{
    border-radius:14px !important;
  }
}

/* Crisp, premium feature icon tiles with illumination hover. */
.feature-tile,
.partner-icon-imgwrap{
  width:76px !important;
  height:76px !important;
  min-width:76px !important;
  min-height:76px !important;
  max-width:76px !important;
  max-height:76px !important;
  padding:0 !important;
  margin-bottom:16px !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(7,27,79,.12), inset 0 0 0 1px rgba(49,94,251,.08) !important;
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease !important;
}
.feature-tile img,
.feature-tile-img,
.partner-icon-imgwrap img,
.partner-icon-img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  filter:contrast(1.06) saturate(1.12) brightness(1.02) !important;
}
.feature:hover .feature-tile,
.card:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 0 0 1px rgba(94,231,255,.75),0 0 34px rgba(94,231,255,.44),0 18px 36px rgba(7,27,79,.18) !important;
}
.feature:hover .feature-tile img,
.card:hover .feature-tile img,
.partner-card:hover .partner-icon-imgwrap img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  filter:brightness(1.15) contrast(1.12) saturate(1.20) drop-shadow(0 0 12px rgba(94,231,255,.34)) !important;
}
@media (max-width:768px){
  .feature-tile,.partner-icon-imgwrap{
    width:68px !important;height:68px !important;min-width:68px !important;min-height:68px !important;
  }
}

/* V21.8 SVG-only asset cleanup + no-chop hero rendering */
:root{
  --hero-uniform-ratio: 911 / 683;
  --about-hero-ratio: 1537 / 1023;
}

.hero-visual-card,
.side-image-card,
.inner-hero-image-card {
  overflow: hidden;
}

.hero-visual-card img,
.side-image-card img,
.inner-hero-image-card img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Uniform SVG hero images supplied for Home/Solutions/Partners/Contact */
.home-page .hero-visual-card,
.solutions-page .hero-visual-card,
.partners-page .hero-visual-card,
.contact-page .hero-visual-card,
.home-page .inner-hero-image-card,
.solutions-page .inner-hero-image-card,
.partners-page .inner-hero-image-card,
.contact-page .inner-hero-image-card {
  aspect-ratio: var(--hero-uniform-ratio) !important;
}

.home-page .hero-visual-card img,
.solutions-page .hero-visual-card img,
.partners-page .hero-visual-card img,
.contact-page .hero-visual-card img,
.home-page .inner-hero-image-card img,
.solutions-page .inner-hero-image-card img,
.partners-page .inner-hero-image-card img,
.contact-page .inner-hero-image-card img {
  object-fit: fill !important;
  object-position: center center !important;
}

/* New About SVG has a different true canvas. Match the card to it exactly: no crop, no whitespace. */
.about-page .hero-visual-card,
.about-page .inner-hero-image-card {
  aspect-ratio: var(--about-hero-ratio) !important;
}

.about-page .hero-visual-card img,
.about-page .inner-hero-image-card img {
  object-fit: fill !important;
  object-position: center center !important;
  transform: none !important;
}

/* SVG logos render crisp at any size. Keep header/footer using the same source sizing system. */
.nav .site-logo-img,
.footer .site-logo-img {
  image-rendering: auto;
}

/* Feature/partner SVG tiles: crisp, centered, gapless, and illuminated on hover. */
.feature-tile,
.partner-icon-imgwrap {
  overflow: hidden;
}
.feature-tile-img,
.partner-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}
.feature:hover .feature-tile-img,
.partner-card:hover .partner-icon-img {
  transform: scale(1.045);
  filter: drop-shadow(0 0 14px rgba(44, 192, 232, .55)) saturate(1.08) contrast(1.04);
}


/* =======================================================
   V21.10 — verified visual tuning from V21.9 baseline
   Purpose: uniform 4:3 hero image cards, gapless images,
   uniform page background, softer feature icon hover,
   and stable SEO-friendly rendering.
======================================================= */
:root{
  --v2110-page-bg:#f6faff;
  --v2110-surface:#ffffff;
  --v2110-navy:#061b4c;
  --v2110-cyan:#5ee7ff;
  --v2110-line:#e5ebf5;
  --v2110-shadow:0 16px 36px rgba(16,38,95,.10);
  --v2110-hero-ratio:4 / 3;
}
html,
body{
  background:var(--v2110-page-bg) !important;
}
body::before,
body::after{
  display:none !important;
  content:none !important;
}
.nav,
header.nav,
.hero,
.page-hero,
.section,
section,
main{
  background:var(--v2110-page-bg) !important;
}
.nav,
header.nav{
  box-shadow:0 8px 24px rgba(16,38,95,.055) !important;
  border-bottom:1px solid rgba(16,38,95,.07) !important;
  backdrop-filter:blur(10px) !important;
}
.hero,
.page-hero{
  border-bottom:0 !important;
}
.hero::after,
.page-hero::after{
  display:none !important;
  content:none !important;
}

/* Shared hero layout: every page uses a 4:3 visual card with no internal gap. */
.hero-grid,
.right-side-visual-grid,
.inner-hero-grid,
.solutions-page-hero-grid{
  align-items:center !important;
}
@media (min-width:1025px){
  .hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr) !important;
    gap:44px !important;
  }
  .right-side-visual-grid,
  .inner-hero-grid,
  .solutions-page-hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr) !important;
    gap:44px !important;
  }
}
.hero-panel.hero-panel-image,
.hero-visual-card,
.side-image-card,
.inner-hero-image-card,
.inner-hero-visual,
.solutions-page-hero-image{
  width:100% !important;
  aspect-ratio:var(--v2110-hero-ratio) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:var(--v2110-surface) !important;
  border:1px solid rgba(16,38,95,.08) !important;
  box-shadow:var(--v2110-shadow) !important;
  display:block !important;
}
.hero-panel.hero-panel-image picture,
.hero-panel.hero-panel-image img,
.hero-visual-card img,
.side-image-card img,
.inner-hero-image-card img,
.inner-hero-visual img,
.solutions-page-hero-image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:fill !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  transform:none !important;
}
/* About previously had a special ratio; all uploaded hero art is now treated uniformly. */
.about-page .hero-visual-card,
.about-page .inner-hero-image-card,
.about-page .side-image-card,
.partners-page .hero-visual-card,
.partners-page .inner-hero-image-card,
.partners-page .side-image-card,
.contact-page .hero-visual-card,
.contact-page .inner-hero-image-card,
.contact-page .side-image-card,
.solutions-page .hero-visual-card,
.solutions-page .solutions-page-hero-image{
  aspect-ratio:var(--v2110-hero-ratio) !important;
}
/* Make home and solutions visuals a touch more prominent without breaking the shared size system. */
.home-page .hero-panel.hero-panel-image,
.solutions-page .solutions-page-hero-image{
  max-width:680px !important;
  justify-self:end !important;
}
.about-page .page-hero .side-image-card,
.partners-page .page-hero .side-image-card,
.contact-page .page-hero .side-image-card{
  max-width:680px !important;
  justify-self:end !important;
  align-self:center !important;
}
@media (max-width:1024px){
  .hero-grid,
  .right-side-visual-grid,
  .inner-hero-grid,
  .solutions-page-hero-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .hero-panel.hero-panel-image,
  .hero-visual-card,
  .side-image-card,
  .inner-hero-image-card,
  .inner-hero-visual,
  .solutions-page-hero-image{
    max-width:720px !important;
    justify-self:center !important;
  }
}
@media (max-width:768px){
  .hero-panel.hero-panel-image,
  .hero-visual-card,
  .side-image-card,
  .inner-hero-image-card,
  .inner-hero-visual,
  .solutions-page-hero-image{
    border-radius:16px !important;
  }
}

/* Softer, premium feature icon tiles: crisp by default, illuminated only on hover. */
.feature-tile,
.partner-icon-imgwrap{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
  max-width:72px !important;
  max-height:72px !important;
  padding:0 !important;
  margin:0 0 16px 0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  border:1px solid rgba(16,38,95,.08) !important;
  box-shadow:0 8px 18px rgba(16,38,95,.08) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.feature-tile-img,
.partner-icon-img,
.feature-tile img,
.partner-icon-imgwrap img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:fill !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  filter:contrast(1.02) saturate(1.03) brightness(1.01) !important;
  transition:transform .22s ease, filter .22s ease !important;
}
.feature:hover .feature-tile,
.card:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(94,231,255,.55) !important;
  box-shadow:0 0 0 1px rgba(94,231,255,.30),0 0 18px rgba(94,231,255,.26),0 12px 24px rgba(16,38,95,.12) !important;
}
.feature:hover .feature-tile-img,
.card:hover .feature-tile-img,
.partner-card:hover .partner-icon-img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  transform:scale(1.025) !important;
  filter:brightness(1.08) contrast(1.06) saturate(1.08) drop-shadow(0 0 8px rgba(94,231,255,.22)) !important;
}
@media (max-width:768px){
  .feature-tile,.partner-icon-imgwrap{
    width:66px !important;height:66px !important;min-width:66px !important;min-height:66px !important;
    max-width:66px !important;max-height:66px !important;
  }
}

/* Keep blue panel caption/kicker readable and elegant. */
.panel-hero .kicker,
.card.panel-hero .kicker,
.panel-hero .kicker span,
.card.panel-hero .kicker span{
  color:var(--v2110-cyan) !important;
  -webkit-text-fill-color:var(--v2110-cyan) !important;
}

/* Button/nav/footer blue consistency. */
.btn.primary,
.nav .btns .btn.primary,
.nav .btns .submit-site-btn,
header .btns .btn.primary,
.mobile-nav-cta .btn.primary{
  background:linear-gradient(180deg,#10265f,#061b4c) !important;
  border-color:#061b4c !important;
  color:#fff !important;
}
.footer,
.footer.teewra-mock-footer{
  background:linear-gradient(135deg,#10265f 0%,#061b4c 100%) !important;
}


/* ============================================================
   V21.11 targeted visual correction
   - same visual logo size in header/footer
   - uniform 4:3 hero cards with no image gap
   - uniform page/nav background
   - cyan blue-panel captions
   - premium feature icon tiles with subtle hover illumination
   ============================================================ */
:root{
  --teewra-page-bg:#f6faff;
  --teewra-panel-navy:#061b4c;
  --teewra-panel-navy-2:#10265f;
  --teewra-cyan:#5ee7ff;
  --teewra-hero-ratio:4 / 3;
  --teewra-logo-h:31px;
  --teewra-icon-size:68px;
}
html,
body{
  background:var(--teewra-page-bg) !important;
}
body,
main,
.nav,
header.nav,
.hero,
.page-hero,
.section,
section:not(.footer){
  background:var(--teewra-page-bg) !important;
}
.nav,
header.nav{
  background:var(--teewra-page-bg) !important;
  box-shadow:0 8px 24px rgba(16,38,95,.045) !important;
  border-bottom:1px solid rgba(16,38,95,.07) !important;
  backdrop-filter:none !important;
}
.hero::after,
.page-hero::after{display:none !important;content:none !important;}

/* Header and footer logo must be optically the same size. */
.nav .brand.brand-logo,
header.nav .brand.brand-logo,
.footer .brand.brand-logo{
  height:var(--teewra-logo-h) !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
  display:inline-flex !important;
  align-items:center !important;
}
.nav .brand.brand-logo img,
header.nav .brand.brand-logo img,
.nav img.teewra-logo-img,
header.nav img.teewra-logo-img,
.footer .brand.brand-logo img,
.footer img.teewra-logo-img,
.site-logo-img{
  height:var(--teewra-logo-h) !important;
  max-height:var(--teewra-logo-h) !important;
  width:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  display:block !important;
}
@media (max-width:768px){
  :root{--teewra-logo-h:28px;--teewra-icon-size:64px;}
}

/* Shared desktop hero geometry: all page hero visuals use the same 4:3 size. */
.hero-grid,
.right-side-visual-grid,
.inner-hero-grid,
.solutions-page-hero-grid{
  align-items:center !important;
}
@media (min-width:1025px){
  .hero-grid,
  .right-side-visual-grid,
  .inner-hero-grid,
  .solutions-page-hero-grid{
    grid-template-columns:minmax(0,.93fr) minmax(520px,1.07fr) !important;
    gap:46px !important;
  }
}
.hero-panel.hero-panel-image,
.hero-visual-card,
.side-image-card,
.inner-hero-image-card,
.inner-hero-visual,
.solutions-page-hero-image{
  width:100% !important;
  max-width:700px !important;
  aspect-ratio:var(--teewra-hero-ratio) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:transparent !important;
  border:1px solid rgba(16,38,95,.10) !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
  display:block !important;
  justify-self:end !important;
  align-self:center !important;
}
.hero-panel.hero-panel-image picture,
.hero-panel.hero-panel-image img,
.hero-visual-card img,
.side-image-card img,
.inner-hero-image-card img,
.inner-hero-visual img,
.solutions-page-hero-image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  transform:none !important;
}
/* About art is a wider source file; cover removes top/bottom white bands and keeps the card 4:3. */
.about-page .side-image-card img,
.about-page .inner-hero-image-card img,
.about-page .hero-visual-card img{
  object-fit:cover !important;
  object-position:center center !important;
}
@media (max-width:1024px){
  .hero-grid,
  .right-side-visual-grid,
  .inner-hero-grid,
  .solutions-page-hero-grid{grid-template-columns:1fr !important;gap:24px !important;}
  .hero-panel.hero-panel-image,
  .hero-visual-card,
  .side-image-card,
  .inner-hero-image-card,
  .inner-hero-visual,
  .solutions-page-hero-image{justify-self:center !important;max-width:720px !important;}
}

/* Blue panel captions: cyan, not maroon. */
.panel-hero .kicker,
.card.panel-hero .kicker,
.panel-hero .kicker span,
.card.panel-hero .kicker span,
.panel-hero > .kicker{
  color:var(--teewra-cyan) !important;
  -webkit-text-fill-color:var(--teewra-cyan) !important;
}
.panel-hero .kicker .dot{display:none !important;}

/* Feature icons: no internal gap, crisp default, subtle premium illumination on hover. */
.feature-tile,
.partner-icon-imgwrap{
  width:var(--teewra-icon-size) !important;
  height:var(--teewra-icon-size) !important;
  min-width:var(--teewra-icon-size) !important;
  min-height:var(--teewra-icon-size) !important;
  max-width:var(--teewra-icon-size) !important;
  max-height:var(--teewra-icon-size) !important;
  padding:0 !important;
  margin:0 0 16px 0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  border:1px solid rgba(16,38,95,.09) !important;
  box-shadow:0 8px 16px rgba(16,38,95,.075) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease !important;
}
.feature-tile img,
.partner-icon-imgwrap img,
.feature-tile-img,
.partner-icon-img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  image-rendering:auto !important;
  filter:contrast(1.04) saturate(1.04) brightness(1.01) !important;
  transition:transform .22s ease, filter .22s ease !important;
}
.feature:hover .feature-tile,
.card:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(94,231,255,.48) !important;
  box-shadow:0 0 0 1px rgba(94,231,255,.20),0 0 16px rgba(94,231,255,.22),0 12px 22px rgba(16,38,95,.11) !important;
}
.feature:hover .feature-tile img,
.card:hover .feature-tile img,
.partner-card:hover .partner-icon-imgwrap img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  transform:scale(1.018) !important;
  filter:brightness(1.07) contrast(1.08) saturate(1.08) drop-shadow(0 0 7px rgba(94,231,255,.18)) !important;
}

/* Button/panel/footer navy stays consistent with the footer system. */
.btn.primary,
.nav .btns .btn.primary,
.nav .btns .submit-site-btn,
header .btns .btn.primary,
.mobile-nav-cta .btn.primary{
  background:linear-gradient(180deg,var(--teewra-panel-navy-2),var(--teewra-panel-navy)) !important;
  border-color:var(--teewra-panel-navy) !important;
  color:#fff !important;
}
.panel-hero{
  background:linear-gradient(135deg,var(--teewra-panel-navy-2),var(--teewra-panel-navy)) !important;
}
.footer,
.footer.teewra-mock-footer{
  background:linear-gradient(135deg,var(--teewra-panel-navy-2),var(--teewra-panel-navy)) !important;
}

/* ============================================================
   V21.13 — Rendering-only correction
   Source: V21.11 images restored. No hero/feature image assets changed.
   Fixes only layout/rendering rules that were not visibly applying.
   ============================================================ */
:root{
  --teewra-page-bg:#f6faff;
  --teewra-navy:#061b4c;
  --teewra-navy-2:#10265f;
  --teewra-cyan:#5ee7ff;
  --teewra-logo-width:190px;
  --teewra-feature-tile:76px;
}
html,body,main,.nav,header.nav,.hero,.page-hero,.section,section:not(.footer){
  background:var(--teewra-page-bg) !important;
}
.nav,header.nav{
  background:var(--teewra-page-bg) !important;
  border-bottom:1px solid rgba(16,38,95,.07) !important;
  box-shadow:0 8px 24px rgba(16,38,95,.045) !important;
  backdrop-filter:none !important;
}
/* Header/footer logo: same visual width, using existing V21.11 assets. */
header.nav .brand.brand-logo,
.nav .brand.brand-logo,
.footer .brand.brand-logo{
  width:var(--teewra-logo-width) !important;
  min-width:var(--teewra-logo-width) !important;
  max-width:var(--teewra-logo-width) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:inline-flex !important;
  align-items:center !important;
  overflow:visible !important;
}
header.nav .brand.brand-logo img,
.nav .brand.brand-logo img,
header.nav img.teewra-logo-img,
.nav img.teewra-logo-img,
.footer .brand.brand-logo img,
.footer img.teewra-logo-img,
.site-logo-img{
  width:var(--teewra-logo-width) !important;
  min-width:var(--teewra-logo-width) !important;
  max-width:var(--teewra-logo-width) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
}
@media (max-width:768px){
  :root{--teewra-logo-width:156px;--teewra-feature-tile:72px;}
}
/* Keep existing images, only normalize hero rendering. */
.hero-grid,.right-side-visual-grid,.inner-hero-grid,.solutions-page-hero-grid{
  align-items:center !important;
}
@media (min-width:1025px){
  .hero-grid,.right-side-visual-grid,.inner-hero-grid,.solutions-page-hero-grid{
    grid-template-columns:minmax(0,.95fr) minmax(500px,1.05fr) !important;
    gap:42px !important;
  }
}
.hero-panel.hero-panel-image,
.hero-visual-card,
.side-image-card,
.inner-hero-image-card,
.inner-hero-visual,
.solutions-page-hero-image{
  width:100% !important;
  max-width:700px !important;
  aspect-ratio:4 / 3 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:transparent !important;
  border:1px solid rgba(16,38,95,.10) !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
  display:block !important;
  justify-self:end !important;
  align-self:center !important;
}
.hero-panel.hero-panel-image picture,
.hero-panel.hero-panel-image img,
.hero-visual-card img,
.side-image-card img,
.inner-hero-image-card img,
.inner-hero-visual img,
.solutions-page-hero-image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  transform:none !important;
}
@media (max-width:1024px){
  .hero-grid,.right-side-visual-grid,.inner-hero-grid,.solutions-page-hero-grid{grid-template-columns:1fr !important;gap:24px !important;}
  .hero-panel.hero-panel-image,.hero-visual-card,.side-image-card,.inner-hero-image-card,.inner-hero-visual,.solutions-page-hero-image{justify-self:center !important;max-width:720px !important;}
}
/* Blue panel captions stay cyan. */
.panel-hero .kicker,
.card.panel-hero .kicker,
.panel-hero .kicker span,
.card.panel-hero .kicker span,
.panel-hero > .kicker{
  color:var(--teewra-cyan) !important;
  -webkit-text-fill-color:var(--teewra-cyan) !important;
}
.panel-hero .kicker .dot{display:none !important;}
/* Existing feature SVGs already include their own tile/background; remove duplicate wrapper border/gap. */
.feature-tile,
.partner-icon-imgwrap{
  width:var(--teewra-feature-tile) !important;
  height:var(--teewra-feature-tile) !important;
  min-width:var(--teewra-feature-tile) !important;
  min-height:var(--teewra-feature-tile) !important;
  max-width:var(--teewra-feature-tile) !important;
  max-height:var(--teewra-feature-tile) !important;
  padding:0 !important;
  margin:0 0 16px 0 !important;
  border:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:transparent !important;
  box-shadow:0 8px 18px rgba(16,38,95,.08) !important;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.feature-tile img,
.partner-icon-imgwrap img,
.feature-tile-img,
.partner-icon-img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  filter:contrast(1.05) saturate(1.05) brightness(1.01) !important;
  transition:transform .22s ease, filter .22s ease !important;
}
.feature:hover .feature-tile,
.card:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 0 0 1px rgba(94,231,255,.22),0 0 18px rgba(94,231,255,.24),0 12px 24px rgba(16,38,95,.12) !important;
}
.feature:hover .feature-tile img,
.card:hover .feature-tile img,
.partner-card:hover .partner-icon-imgwrap img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  transform:scale(1.012) !important;
  filter:brightness(1.06) contrast(1.08) saturate(1.08) drop-shadow(0 0 7px rgba(94,231,255,.16)) !important;
}
.btn.primary,
.nav .btns .btn.primary,
.nav .btns .submit-site-btn,
header .btns .btn.primary,
.mobile-nav-cta .btn.primary{
  background:linear-gradient(180deg,var(--teewra-navy-2),var(--teewra-navy)) !important;
  border-color:var(--teewra-navy) !important;
  color:#fff !important;
}
.panel-hero,.footer,.footer.teewra-mock-footer{
  background:linear-gradient(135deg,var(--teewra-navy-2),var(--teewra-navy)) !important;
}


/* V21.18 - About hero restored to 100% layout with new image asset */
body.about-page .page-hero .inner-hero-grid{
  align-items:center !important;
}
body.about-page .page-hero .side-image-card.inner-hero-image-card{
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
  align-self:center !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
body.about-page .page-hero .side-image-card.inner-hero-image-card img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* V21.19 About hero width alignment fix
   Keep the About hero inside the same container rhythm as the rest of the page
   and reduce only the image column enough to avoid the hero appearing wider. */
body.about-page .page-hero > .container{
  max-width:1240px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
body.about-page .page-hero .right-side-visual-grid,
body.about-page .page-hero .inner-hero-grid{
  max-width:100% !important;
  width:100% !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
@media (min-width:1025px){
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .inner-hero-grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.82fr) !important;
    gap:42px !important;
    align-items:center !important;
  }
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .inner-hero-image-card,
  body.about-page .page-hero .inner-hero-visual,
  body.about-page .page-hero .hero-visual-card{
    max-width:610px !important;
    width:100% !important;
    justify-self:end !important;
    align-self:center !important;
    aspect-ratio:4 / 3 !important;
    overflow:hidden !important;
  }
}
@media (max-width:1024px){
  body.about-page .page-hero > .container{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .inner-hero-image-card,
  body.about-page .page-hero .inner-hero-visual,
  body.about-page .page-hero .hero-visual-card{
    max-width:720px !important;
    justify-self:center !important;
  }
}
@media (max-width:720px){
  body.about-page .page-hero > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}


/* ============================================================
   V21.20 — Targeted partners/contact hero + logo + icon refinement
   Baseline: V21.19. Scope intentionally limited to requested changes.
   ============================================================ */
:root{
  --teewra-logo-width:181px !important;
  --teewra-mobile-logo-width:148px !important;
  --teewra-page-bg:#f6faff !important;
  --teewra-cyan:#5ee7ff !important;
}
html,body,main,.nav,header.nav,.hero,.page-hero,.section,section:not(.footer){
  background:var(--teewra-page-bg) !important;
}
header.nav,.nav{
  background:var(--teewra-page-bg) !important;
}
/* Match top nav and footer logo visual size, overriding inline history and earlier patch CSS. */
header.nav .nav-inner > a:first-child,
header.nav a:has(.brand-logo),
header.nav .brand.brand-logo,
header.nav .brand-logo,
footer .brand.brand-logo,
.footer .brand.brand-logo{
  width:var(--teewra-logo-width) !important;
  min-width:var(--teewra-logo-width) !important;
  max-width:var(--teewra-logo-width) !important;
  flex:0 0 var(--teewra-logo-width) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
header.nav img.teewra-logo-img,
header.nav img.site-logo-img,
header.nav .brand-logo img,
footer img.teewra-logo-img,
footer img.site-logo-img,
footer .brand-logo img,
.footer-logo-white{
  width:var(--teewra-logo-width) !important;
  min-width:var(--teewra-logo-width) !important;
  max-width:var(--teewra-logo-width) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
}
/* Partners and Contact: use the same 4:3 visual card behavior as the stable hero image system. */
body.partners-page .page-hero > .container,
body.contact-page .page-hero > .container{
  max-width:1240px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
@media (min-width:1025px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .inner-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,0.98fr) minmax(0,1.02fr) !important;
    gap:42px !important;
    align-items:center !important;
    max-width:100% !important;
    width:100% !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }
}
body.partners-page .page-hero .side-image-card,
body.partners-page .page-hero .inner-hero-image-card,
body.partners-page .page-hero .inner-hero-visual,
body.partners-page .page-hero .hero-visual-card,
body.contact-page .page-hero .side-image-card,
body.contact-page .page-hero .inner-hero-image-card,
body.contact-page .page-hero .inner-hero-visual,
body.contact-page .page-hero .hero-visual-card{
  width:100% !important;
  max-width:700px !important;
  aspect-ratio:4 / 3 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  justify-self:end !important;
  align-self:center !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:transparent !important;
  border:1px solid rgba(16,38,95,.10) !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
}
body.partners-page .page-hero .side-image-card img,
body.partners-page .page-hero .inner-hero-image-card img,
body.partners-page .page-hero .inner-hero-visual img,
body.partners-page .page-hero .hero-visual-card img,
body.contact-page .page-hero .side-image-card img,
body.contact-page .page-hero .inner-hero-image-card img,
body.contact-page .page-hero .inner-hero-visual img,
body.contact-page .page-hero .hero-visual-card img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
}
@media (max-width:1024px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .inner-hero-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  body.partners-page .page-hero .side-image-card,
  body.partners-page .page-hero .inner-hero-image-card,
  body.contact-page .page-hero .side-image-card,
  body.contact-page .page-hero .inner-hero-image-card{
    max-width:720px !important;
    justify-self:center !important;
  }
}
@media (max-width:720px){
  :root{--teewra-logo-width:var(--teewra-mobile-logo-width) !important;}
  body.partners-page .page-hero > .container,
  body.contact-page .page-hero > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}
/* Feature icon tiles: eliminate apparent inner gap and make the default/hover states more premium without excessive shine. */
.feature-tile,
.partner-icon-imgwrap{
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:0 10px 22px rgba(16,38,95,.10) !important;
  border-radius:18px !important;
}
.feature-tile img,
.partner-icon-imgwrap img,
.feature-tile-img,
.partner-icon-img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:18px !important;
  transform:scale(1.055) !important;
  filter:contrast(1.08) saturate(1.08) brightness(1.02) !important;
  transition:transform .22s ease, filter .22s ease !important;
}
.feature:hover .feature-tile,
.card:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  box-shadow:0 0 0 1px rgba(94,231,255,.20),0 0 16px rgba(94,231,255,.22),0 14px 26px rgba(16,38,95,.14) !important;
  transform:translateY(-2px) !important;
}
.feature:hover .feature-tile img,
.card:hover .feature-tile img,
.partner-card:hover .partner-icon-imgwrap img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  transform:scale(1.075) !important;
  filter:brightness(1.06) contrast(1.10) saturate(1.12) drop-shadow(0 0 6px rgba(94,231,255,.14)) !important;
}


/* ============================================================
   V21.21 — Logo restore + Partners/Contact exact hero rendering
   Scope: restore top-nav logo quality/size and make Partners/Contact
   hero images render at their full provided 4:3-style ratio without crop.
   ============================================================ */
:root{
  --teewra-header-logo-width-v2114:228px !important;
}
header.nav .nav-inner > a:first-child,
header.nav a:has(.brand-logo),
header.nav .brand.brand-logo,
header.nav .brand-logo,
header.nav .brand.brand-logo img,
header.nav .brand-logo img,
header.nav img.teewra-logo-img,
header.nav img.site-logo-img{
  width:228px !important;
  min-width:228px !important;
  max-width:228px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  transform:none !important;
  image-rendering:auto !important;
}
@media (max-width:768px){
  :root{--teewra-header-logo-width-v2114:180px !important;}
  header.nav .nav-inner > a:first-child,
  header.nav a:has(.brand-logo),
  header.nav .brand.brand-logo,
  header.nav .brand-logo,
  header.nav .brand.brand-logo img,
  header.nav .brand-logo img,
  header.nav img.teewra-logo-img,
  header.nav img.site-logo-img{
    width:180px !important;
    min-width:180px !important;
    max-width:180px !important;
  }
}
body.partners-page .page-hero > .container,
body.contact-page .page-hero > .container{
  max-width:var(--container) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
@media (min-width:1025px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .inner-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:34px !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }
}
body.partners-page .page-hero .side-image-card,
body.partners-page .page-hero .inner-hero-image-card,
body.partners-page .page-hero .inner-hero-visual,
body.partners-page .page-hero .hero-visual-card,
body.contact-page .page-hero .side-image-card,
body.contact-page .page-hero .inner-hero-image-card,
body.contact-page .page-hero .inner-hero-visual,
body.contact-page .page-hero .hero-visual-card{
  width:100% !important;
  max-width:620px !important;
  aspect-ratio:911 / 683 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 !important;
  margin:0 !important;
  justify-self:end !important;
  align-self:center !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:transparent !important;
  border:1px solid rgba(16,38,95,.10) !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
}
body.partners-page .page-hero .side-image-card img,
body.partners-page .page-hero .inner-hero-image-card img,
body.partners-page .page-hero .inner-hero-visual img,
body.partners-page .page-hero .hero-visual-card img,
body.contact-page .page-hero .side-image-card img,
body.contact-page .page-hero .inner-hero-image-card img,
body.contact-page .page-hero .inner-hero-visual img,
body.contact-page .page-hero .hero-visual-card img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  transform:none !important;
}
@media (max-width:1024px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .inner-hero-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  body.partners-page .page-hero .side-image-card,
  body.partners-page .page-hero .inner-hero-image-card,
  body.contact-page .page-hero .side-image-card,
  body.contact-page .page-hero .inner-hero-image-card{
    max-width:720px !important;
    justify-self:center !important;
  }
}
@media (max-width:720px){
  body.partners-page .page-hero > .container,
  body.contact-page .page-hero > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}



/* === topnav-logo-v21-14.css (consolidated) === */
/* V21.14 — Top navigation logo optical match only
   Purpose: make the top navigation logo visually match the existing footer logo size.
   No layout, image, background, or content changes. */
:root{
  --teewra-header-logo-width-v2114: 228px;
}
header.nav .nav-inner > a:first-child,
header.nav a:has(.brand-logo){
  width: var(--teewra-header-logo-width-v2114) !important;
  min-width: var(--teewra-header-logo-width-v2114) !important;
  max-width: var(--teewra-header-logo-width-v2114) !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 var(--teewra-header-logo-width-v2114) !important;
  overflow: visible !important;
}
header.nav .brand.brand-logo,
header.nav .brand-logo{
  width: var(--teewra-header-logo-width-v2114) !important;
  min-width: var(--teewra-header-logo-width-v2114) !important;
  max-width: var(--teewra-header-logo-width-v2114) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  transform: none !important;
}
header.nav .brand.brand-logo img,
header.nav .brand-logo img,
header.nav img.teewra-logo-img,
header.nav img.site-logo-img{
  width: var(--teewra-header-logo-width-v2114) !important;
  min-width: var(--teewra-header-logo-width-v2114) !important;
  max-width: var(--teewra-header-logo-width-v2114) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  image-rendering: auto !important;
}
header.nav .nav-inner{
  min-height: 82px !important;
}
@media (max-width: 768px){
  :root{ --teewra-header-logo-width-v2114: 180px; }
  header.nav .nav-inner{ min-height: 72px !important; }
}



/* === v21-22-hero-width-fix.css (consolidated) === */
/* V21.22 — Uniform hero image rendering and page width verification layer
   Scope: keep existing images; fix rendering, aspect ratio, gaps, and container alignment. */
:root{
  --teewra-container:1240px;
  --teewra-page-bg:#f6faff;
  --teewra-hero-card-width:651px;
  --teewra-hero-ratio:911 / 683;
  --teewra-feature-tile-size:72px;
}
html,body,main,
header.nav,.nav,
.hero,.page-hero,.section,section:not(.footer){
  background:var(--teewra-page-bg) !important;
}
.container,
.hero > .container,
.page-hero > .container,
.section > .container,
footer > .container,
.footer > .container{
  max-width:var(--teewra-container) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
@media (max-width:720px){
  .container,
  .hero > .container,
  .page-hero > .container,
  .section > .container,
  footer > .container,
  .footer > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}
@media (min-width:1025px){
  .hero-grid,
  .right-side-visual-grid,
  .inner-hero-grid,
  .solutions-page-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--teewra-hero-card-width)) !important;
    gap:42px !important;
    align-items:center !important;
    max-width:100% !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }
}
.hero-panel.hero-panel-image,
.hero-visual-card,
.side-image-card,
.inner-hero-image-card,
.inner-hero-visual,
.solutions-page-hero-image{
  width:100% !important;
  max-width:var(--teewra-hero-card-width) !important;
  aspect-ratio:var(--teewra-hero-ratio) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  justify-self:end !important;
  align-self:center !important;
  box-sizing:border-box !important;
  display:block !important;
  overflow:hidden !important;
  border-radius:20px !important;
  background:transparent !important;
  border:1px solid rgba(16,38,95,.10) !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
}
.hero-panel.hero-panel-image picture{
  width:100% !important;
  height:100% !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}
.hero-panel.hero-panel-image img,
.hero-visual-card img,
.side-image-card img,
.inner-hero-image-card img,
.inner-hero-visual img,
.solutions-page-hero-image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  transform:none !important;
}
@media (max-width:1024px){
  .hero-grid,
  .right-side-visual-grid,
  .inner-hero-grid,
  .solutions-page-hero-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .hero-panel.hero-panel-image,
  .hero-visual-card,
  .side-image-card,
  .inner-hero-image-card,
  .inner-hero-visual,
  .solutions-page-hero-image{
    max-width:min(100%,720px) !important;
    justify-self:center !important;
  }
}
/* Feature icon tiles: tighter, premium, no visible inner gap. */
.feature-tile,
.partner-icon-imgwrap{
  width:var(--teewra-feature-tile-size) !important;
  height:var(--teewra-feature-tile-size) !important;
  min-width:var(--teewra-feature-tile-size) !important;
  min-height:var(--teewra-feature-tile-size) !important;
  max-width:var(--teewra-feature-tile-size) !important;
  max-height:var(--teewra-feature-tile-size) !important;
  padding:0 !important;
  margin:0 0 16px 0 !important;
  border:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:transparent !important;
  box-shadow:0 10px 22px rgba(16,38,95,.10) !important;
  line-height:0 !important;
  transition:transform .22s ease, box-shadow .22s ease !important;
}
.feature-tile img,
.partner-icon-imgwrap img,
.feature-tile-img,
.partner-icon-img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  transform:scale(1.08) !important;
  filter:contrast(1.08) saturate(1.08) brightness(1.02) !important;
  transition:transform .22s ease, filter .22s ease !important;
}
.feature:hover .feature-tile,
.card:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 0 0 1px rgba(94,231,255,.22),0 0 16px rgba(94,231,255,.22),0 14px 26px rgba(16,38,95,.13) !important;
}
.feature:hover .feature-tile img,
.card:hover .feature-tile img,
.partner-card:hover .partner-icon-imgwrap img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  transform:scale(1.105) !important;
  filter:brightness(1.07) contrast(1.1) saturate(1.12) drop-shadow(0 0 7px rgba(94,231,255,.16)) !important;
}



/* === v21-23-final-fixes.css (consolidated) === */
/* V21.23 final requested fixes: color consistency, hero card fit, footer spacing/logo, and solutions width. */
:root{
  --teewra-navy:#061b4c;
  --teewra-cyan:#5ee7ff;
  --teewra-container:1240px;
  --teewra-page-bg:#f6faff;
  --teewra-hero-card-width:651px;
  --teewra-hero-ratio:911 / 683;
}

html,body,main,
header.nav,.nav,
.hero,.page-hero,.section,section:not(.footer){
  background:var(--teewra-page-bg) !important;
}

.container,
.hero > .container,
.page-hero > .container,
.section > .container,
.footer > .container,
footer > .container{
  max-width:var(--teewra-container) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

/* One navy system: footer, blue panels, and all primary buttons use the same color. */
.footer,
.footer.teewra-mock-footer,
.teewra-mock-footer{
  background:var(--teewra-navy) !important;
  background-image:none !important;
}
.panel-hero,
.card.panel-hero,
.callout.panel-hero{
  background:var(--teewra-navy) !important;
  background-image:none !important;
  color:#fff !important;
}
.btn.primary,
a.btn.primary,
button.btn.primary,
.nav .btns .btn.primary,
.mobile-nav-cta .btn.primary,
form .btn.primary{
  background:var(--teewra-navy) !important;
  background-image:none !important;
  border-color:var(--teewra-navy) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(6,27,76,.22) !important;
}
.btn.primary:hover,
a.btn.primary:hover,
button.btn.primary:hover{
  background:#08245f !important;
  border-color:#08245f !important;
  box-shadow:0 18px 36px rgba(6,27,76,.28) !important;
}
.panel-hero .kicker,
.card.panel-hero .kicker,
.panel-hero .kicker span,
.card.panel-hero .kicker span,
.panel-hero .label,
.card.panel-hero .label{
  color:var(--teewra-cyan) !important;
}
.panel-hero h1,.panel-hero h2,.panel-hero h3,.panel-hero h4,
.card.panel-hero h1,.card.panel-hero h2,.card.panel-hero h3,.card.panel-hero h4{
  color:#fff !important;
}
.panel-hero p,.panel-hero li,.card.panel-hero p,.card.panel-hero li{
  color:rgba(255,255,255,.84) !important;
}

/* Footer: reduce gap between logo and brand statement, and keep logo at current visual size. */
.footer-brand-block .brand.brand-logo,
.footer-brand-block .brand-logo{
  margin:0 0 8px 0 !important;
  padding:0 !important;
  line-height:1 !important;
}
.footer-brand-block p{
  margin-top:0 !important;
  max-width:360px !important;
}
.footer .footer-grid{
  align-items:start !important;
}

/* Normalize every hero grid to the same page width and same visual column. */
@media (min-width:1025px){
  .hero-grid,
  .right-side-visual-grid,
  .inner-hero-grid,
  .solutions-page-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--teewra-hero-card-width)) !important;
    gap:42px !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }
  .solutions-page-hero-image-wrap{
    width:100% !important;
    max-width:var(--teewra-hero-card-width) !important;
    justify-self:end !important;
    align-self:center !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* Exact same hero card size/ratio everywhere. Border hugs the image; no padding/gap. */
.hero-panel.hero-panel-image,
.hero-visual-card,
.side-image-card,
.inner-hero-image-card,
.inner-hero-visual,
.solutions-page-hero-image{
  width:100% !important;
  max-width:var(--teewra-hero-card-width) !important;
  aspect-ratio:var(--teewra-hero-ratio) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  justify-self:end !important;
  align-self:center !important;
  display:block !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border:1px solid rgba(16,38,95,.12) !important;
  border-radius:20px !important;
  background:transparent !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
}
.hero-panel.hero-panel-image picture{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
}
.hero-panel.hero-panel-image img,
.hero-visual-card img,
.side-image-card img,
.inner-hero-image-card img,
.inner-hero-visual img,
.solutions-page-hero-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:transparent !important;
  transform:none !important;
}
/* Small internal-safe enlargement only for the two pages where the image art showed a visual edge gap. */
body.partners-page .page-hero .hero-visual-card img,
body.partners-page .page-hero .side-image-card img,
body.contact-page .page-hero .hero-visual-card img,
body.contact-page .page-hero .side-image-card img{
  transform:scale(1.015) !important;
  transform-origin:center center !important;
}

/* Feature icon/title images: no visible gap, premium default, softer hover illumination. */
.feature-tile,
.partner-icon-imgwrap{
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(16,38,95,.10) !important;
  background:#fff !important;
  border-radius:18px !important;
  box-shadow:0 10px 22px rgba(16,38,95,.10) !important;
}
.feature-tile img,
.partner-icon-imgwrap img,
.feature-tile-img,
.partner-icon-img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:17px !important;
  transform:scale(1.025) !important;
  filter:contrast(1.08) saturate(1.06) brightness(1.02) !important;
  transition:transform .22s ease, filter .22s ease !important;
}
.feature:hover .feature-tile,
.card:hover .feature-tile,
.partner-card:hover .partner-icon-imgwrap,
.feature-tile:hover,
.partner-icon-imgwrap:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 0 0 1px rgba(94,231,255,.18),0 0 14px rgba(94,231,255,.20),0 14px 26px rgba(16,38,95,.14) !important;
}
.feature:hover .feature-tile img,
.card:hover .feature-tile img,
.partner-card:hover .partner-icon-imgwrap img,
.feature-tile:hover img,
.partner-icon-imgwrap:hover img{
  transform:scale(1.045) !important;
  filter:brightness(1.06) contrast(1.10) saturate(1.10) drop-shadow(0 0 5px rgba(94,231,255,.13)) !important;
}

@media (max-width:1024px){
  .hero-grid,
  .right-side-visual-grid,
  .inner-hero-grid,
  .solutions-page-hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .hero-panel.hero-panel-image,
  .hero-visual-card,
  .side-image-card,
  .inner-hero-image-card,
  .inner-hero-visual,
  .solutions-page-hero-image,
  .solutions-page-hero-image-wrap{
    max-width:720px !important;
    justify-self:center !important;
  }
}
@media (max-width:720px){
  .container,
  .hero > .container,
  .page-hero > .container,
  .section > .container,
  .footer > .container,
  footer > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

/* V21.24: tighten Partners/Contact hero image border-to-art fit.
   The supplied SVG canvases include a small internal light margin, so the image
   itself is enlarged inside the existing 4:3 card while the card/container width
   remains unchanged. */
body.partners-page .page-hero .hero-visual-card,
body.partners-page .page-hero .side-image-card,
body.partners-page .page-hero .inner-hero-image-card,
body.contact-page .page-hero .hero-visual-card,
body.contact-page .page-hero .side-image-card,
body.contact-page .page-hero .inner-hero-image-card{
  padding:0 !important;
  background:transparent !important;
  overflow:hidden !important;
  aspect-ratio:911 / 683 !important;
}
body.partners-page .page-hero .hero-visual-card img,
body.partners-page .page-hero .side-image-card img,
body.partners-page .page-hero .inner-hero-image-card img,
body.contact-page .page-hero .hero-visual-card img,
body.contact-page .page-hero .side-image-card img,
body.contact-page .page-hero .inner-hero-image-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:scale(1.06) !important;
  transform-origin:center center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* V21.25: Partners/Contact hero card border should wrap the actual 4:3 SVG image.
   Do NOT scale or crop the image. The card height is generated by the image's
   intrinsic 911x683 ratio so the border exactly hugs the rendered image. */
@media (min-width:1025px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .inner-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,651px) !important;
    gap:42px !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    box-sizing:border-box !important;
  }
}
body.partners-page .page-hero .hero-visual-card,
body.partners-page .page-hero .side-image-card,
body.partners-page .page-hero .inner-hero-image-card,
body.contact-page .page-hero .hero-visual-card,
body.contact-page .page-hero .side-image-card,
body.contact-page .page-hero .inner-hero-image-card{
  width:100% !important;
  max-width:651px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:transparent !important;
  border:1px solid rgba(16,38,95,.12) !important;
  border-radius:20px !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
  justify-self:end !important;
  align-self:center !important;
}
body.partners-page .page-hero .hero-visual-card img,
body.partners-page .page-hero .side-image-card img,
body.partners-page .page-hero .inner-hero-image-card img,
body.contact-page .page-hero .hero-visual-card img,
body.contact-page .page-hero .side-image-card img,
body.contact-page .page-hero .inner-hero-image-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:19px !important;
  object-fit:initial !important;
  object-position:center center !important;
  transform:none !important;
  background:transparent !important;
}
@media (max-width:1024px){
  body.partners-page .page-hero .hero-visual-card,
  body.partners-page .page-hero .side-image-card,
  body.partners-page .page-hero .inner-hero-image-card,
  body.contact-page .page-hero .hero-visual-card,
  body.contact-page .page-hero .side-image-card,
  body.contact-page .page-hero .inner-hero-image-card{
    max-width:min(100%,720px) !important;
    justify-self:center !important;
  }
}



/* === v21-26-partners-contact-hero-4x3.css (consolidated) === */
/* V21.26: Partners/Contact hero image cards — true 4:3 card, no crop, no gap.
   This intentionally overrides V21.24/V21.25 experiments.
   The card itself is 4:3 and the SVG fills that card exactly. */
:root{
  --teewra-hero-card-width: 651px;
  --teewra-hero-ratio: 4 / 3;
  --teewra-container: 1240px;
}

/* Keep the whole hero section aligned with the same page width system. */
body.partners-page .page-hero > .container,
body.contact-page .page-hero > .container{
  max-width: var(--teewra-container) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (min-width: 1025px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .inner-hero-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--teewra-hero-card-width) !important;
    gap: 42px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

/* The image card is the border. No padding. No internal wrapper space. */
body.partners-page .page-hero .hero-visual-card,
body.partners-page .page-hero .side-image-card,
body.partners-page .page-hero .inner-hero-image-card,
body.contact-page .page-hero .hero-visual-card,
body.contact-page .page-hero .side-image-card,
body.contact-page .page-hero .inner-hero-image-card{
  width: var(--teewra-hero-card-width) !important;
  max-width: 100% !important;
  aspect-ratio: var(--teewra-hero-ratio) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  justify-self: end !important;
  align-self: center !important;
  background: transparent !important;
  border: 1px solid rgba(16,38,95,.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 42px rgba(16,38,95,.13) !important;
}

/* Fill the 4:3 card exactly. Because the provided art is 4:3, this does not visibly distort,
   and it prevents both white gaps and edge cropping. */
body.partners-page .page-hero .hero-visual-card > img,
body.partners-page .page-hero .side-image-card > img,
body.partners-page .page-hero .inner-hero-image-card > img,
body.contact-page .page-hero .hero-visual-card > img,
body.contact-page .page-hero .side-image-card > img,
body.contact-page .page-hero .inner-hero-image-card > img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 19px !important;
  object-fit: fill !important;
  object-position: center center !important;
  transform: none !important;
  background: transparent !important;
}

@media (max-width: 1024px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .inner-hero-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  body.partners-page .page-hero .hero-visual-card,
  body.partners-page .page-hero .side-image-card,
  body.partners-page .page-hero .inner-hero-image-card,
  body.contact-page .page-hero .hero-visual-card,
  body.contact-page .page-hero .side-image-card,
  body.contact-page .page-hero .inner-hero-image-card{
    width: min(100%, 651px) !important;
    justify-self: center !important;
  }
}

@media (max-width: 720px){
  body.partners-page .page-hero > .container,
  body.contact-page .page-hero > .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}



/* === v21-27-partners-contact-border-fit.css (consolidated) === */
/* V21.27: Partners/Contact hero image border-fit correction.
   Goal: true 911:683 (~4:3) display, no crop, no gap between image and border.
   Border/shadow are applied directly to the image so the visible border hugs the artwork. */
:root{
  --teewra-inner-hero-image-width: 560px;
  --teewra-inner-hero-gap: 48px;
  --teewra-inner-hero-container: 1240px;
}

body.partners-page .page-hero > .container,
body.contact-page .page-hero > .container{
  width:100% !important;
  max-width:var(--teewra-inner-hero-container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}

@media (min-width: 1025px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .inner-hero-grid{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) var(--teewra-inner-hero-image-width) !important;
    gap:var(--teewra-inner-hero-gap) !important;
    align-items:center !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* The wrapper is now only a positioning shell. It is NOT the visible card. */
body.partners-page .page-hero .side-image-card,
body.partners-page .page-hero .inner-hero-image-card,
body.partners-page .page-hero .hero-visual-card,
body.contact-page .page-hero .side-image-card,
body.contact-page .page-hero .inner-hero-image-card,
body.contact-page .page-hero .hero-visual-card{
  width:var(--teewra-inner-hero-image-width) !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  line-height:0 !important;
  display:block !important;
  justify-self:end !important;
  align-self:center !important;
  box-sizing:border-box !important;
}

/* The image itself becomes the visible 4:3 card. No crop, no internal gap. */
body.partners-page .page-hero .side-image-card > img,
body.partners-page .page-hero .inner-hero-image-card > img,
body.partners-page .page-hero .hero-visual-card > img,
body.contact-page .page-hero .side-image-card > img,
body.contact-page .page-hero .inner-hero-image-card > img,
body.contact-page .page-hero .hero-visual-card > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:911 / 683 !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  max-width:100% !important;
  max-height:none !important;
  border:1px solid rgba(16,38,95,.12) !important;
  border-radius:20px !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
  background:transparent !important;
  box-sizing:border-box !important;
  transform:none !important;
}

@media (max-width: 1024px){
  body.partners-page .page-hero .right-side-visual-grid,
  body.partners-page .page-hero .inner-hero-grid,
  body.contact-page .page-hero .right-side-visual-grid,
  body.contact-page .page-hero .inner-hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  body.partners-page .page-hero .side-image-card,
  body.partners-page .page-hero .inner-hero-image-card,
  body.partners-page .page-hero .hero-visual-card,
  body.contact-page .page-hero .side-image-card,
  body.contact-page .page-hero .inner-hero-image-card,
  body.contact-page .page-hero .hero-visual-card{
    width:min(100%, var(--teewra-inner-hero-image-width)) !important;
    justify-self:center !important;
  }
}

@media (max-width: 720px){
  body.partners-page .page-hero > .container,
  body.contact-page .page-hero > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}



/* === V21.29 Launch Cleanup: final maintenance-only overrides === */
:root{
  --teewra-navy:#071b4f;
  --teewra-page-bg:#f5f8ff;
  --teewra-hero-aspect: 911 / 684;
  --teewra-logo-desktop:196px;
  --teewra-logo-tablet:176px;
  --teewra-logo-mobile:154px;
  --teewra-card-radius:20px;
  --teewra-card-border:rgba(16,38,95,.12);
  --teewra-card-shadow:0 18px 42px rgba(16,38,95,.13);
}
html,body{background:var(--teewra-page-bg) !important;}
.nav,.hero,.page-hero,main,section{background-color:transparent;}

/* Single source of truth for logo sizing across desktop and mobile. */
header.nav .brand.brand-logo,
footer .brand.brand-logo,
.footer .brand.brand-logo{height:auto !important;line-height:0 !important;display:inline-flex !important;align-items:center !important;}
header.nav img.site-logo-img,
header.nav img.teewra-logo-img,
footer img.site-logo-img,
footer img.teewra-logo-img,
.footer-logo-white{width:var(--teewra-logo-desktop) !important;min-width:0 !important;max-width:var(--teewra-logo-desktop) !important;height:auto !important;max-height:none !important;display:block !important;object-fit:contain !important;}
@media (max-width:900px){
  header.nav img.site-logo-img,header.nav img.teewra-logo-img,footer img.site-logo-img,footer img.teewra-logo-img,.footer-logo-white{width:var(--teewra-logo-tablet) !important;max-width:var(--teewra-logo-tablet) !important;}
}
@media (max-width:520px){
  header.nav img.site-logo-img,header.nav img.teewra-logo-img,footer img.site-logo-img,footer img.teewra-logo-img,.footer-logo-white{width:var(--teewra-logo-mobile) !important;max-width:var(--teewra-logo-mobile) !important;}
}

/* Uniform hero visual rendering: the image itself owns the visible border, so there is no inner gap. */
.hero-panel.hero-panel-image,
.page-hero .hero-visual-card,
.page-hero .side-image-card,
.page-hero .inner-hero-image-card,
.solutions-page-hero-image{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  line-height:0 !important;
  aspect-ratio:auto !important;
  min-height:0 !important;
  max-height:none !important;
  box-sizing:border-box !important;
}
.hero-panel.hero-panel-image picture{display:block !important;width:100% !important;line-height:0 !important;}
.hero-panel.hero-panel-image img,
.page-hero .hero-visual-card > img,
.page-hero .side-image-card > img,
.page-hero .inner-hero-image-card > img,
.solutions-page-hero-image > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:var(--teewra-hero-aspect) !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--teewra-card-border) !important;
  border-radius:var(--teewra-card-radius) !important;
  box-shadow:var(--teewra-card-shadow) !important;
  background:transparent !important;
  box-sizing:border-box !important;
  transform:none !important;
}

/* Keep hero grids within the same page width rhythm. */
.page-hero > .container,
.hero > .container{max-width:1240px !important;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box !important;}
@media (min-width:1025px){
  .page-hero .right-side-visual-grid,
  .page-hero .inner-hero-grid,
  .solutions-page-hero-grid{display:grid !important;grid-template-columns:minmax(0,1fr) 560px !important;gap:48px !important;align-items:center !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
  .solutions-page-hero-image-wrap,.page-hero .inner-hero-visual{width:560px !important;max-width:100% !important;justify-self:end !important;}
  .solutions-page-hero-image,.page-hero .hero-visual-card,.page-hero .side-image-card,.page-hero .inner-hero-image-card{width:560px !important;max-width:100% !important;justify-self:end !important;}
}
@media (max-width:1024px){
  .page-hero .right-side-visual-grid,.page-hero .inner-hero-grid,.solutions-page-hero-grid{display:grid !important;grid-template-columns:1fr !important;gap:28px !important;}
  .solutions-page-hero-image-wrap,.page-hero .inner-hero-visual{width:min(100%,560px) !important;max-width:100% !important;justify-self:center !important;}
  .solutions-page-hero-image,.page-hero .hero-visual-card,.page-hero .side-image-card,.page-hero .inner-hero-image-card{width:min(100%,560px) !important;max-width:100% !important;justify-self:center !important;}
}
@media (max-width:720px){
  .hero-panel.hero-panel-image,
  .solutions-page-hero-image,
  .page-hero .hero-visual-card,
  .page-hero .side-image-card,
  .page-hero .inner-hero-image-card{width:100% !important;max-width:100% !important;}
  .hero-panel.hero-panel-image img,
  .page-hero .hero-visual-card > img,
  .page-hero .side-image-card > img,
  .page-hero .inner-hero-image-card > img,
  .solutions-page-hero-image > img{border-radius:16px !important;}
}

/* Softer premium icon treatment without excessive shine. */
.feature-card .visual-tile,
.partner-card .visual-tile,
.feature-icon-card,
.feature-visual{padding:0 !important;overflow:hidden !important;line-height:0 !important;}
.feature-card .visual-tile img,
.partner-card .visual-tile img,
.feature-icon-card img,
.feature-visual img{display:block !important;width:100% !important;height:100% !important;object-fit:cover !important;margin:0 !important;padding:0 !important;filter:saturate(1.04) contrast(1.02) !important;transition:transform .28s ease, filter .28s ease, box-shadow .28s ease !important;}
.feature-card:hover .visual-tile img,
.partner-card:hover .visual-tile img,
.feature-icon-card:hover img,
.feature-visual:hover img{filter:saturate(1.12) contrast(1.05) brightness(1.04) !important;transform:scale(1.015) !important;}

/* === V21.29 verification refinement: same desktop hero visual width on home and inner pages === */
@media (min-width:1025px){
  .hero-grid{display:grid !important;grid-template-columns:minmax(0,1fr) 560px !important;gap:48px !important;align-items:center !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
  .hero-panel.hero-panel-image{width:560px !important;max-width:100% !important;justify-self:end !important;}
}
@media (max-width:1024px){
  .hero-grid{display:grid !important;grid-template-columns:1fr !important;gap:28px !important;}
  .hero-panel.hero-panel-image{width:min(100%,560px) !important;max-width:100% !important;justify-self:center !important;}
}

/* === V21.30 final targeted fixes: logo parity + mobile about hero visibility === */
:root{
  --teewra-logo-desktop-final:196px;
  --teewra-logo-tablet-final:176px;
  --teewra-logo-mobile-final:154px;
}
/* Match header and footer logos by giving the anchor, wrapper, and image the same rendered width. */
header.nav .nav-inner > a:first-child,
footer .footer-brand-block .brand.brand-logo,
.footer .footer-brand-block .brand.brand-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:var(--teewra-logo-desktop-final) !important;
  min-width:var(--teewra-logo-desktop-final) !important;
  max-width:var(--teewra-logo-desktop-final) !important;
  height:auto !important;
  overflow:visible !important;
  line-height:0 !important;
  flex:0 0 var(--teewra-logo-desktop-final) !important;
}
header.nav .brand.brand-logo,
footer .brand.brand-logo,
.footer .brand.brand-logo{
  width:var(--teewra-logo-desktop-final) !important;
  min-width:var(--teewra-logo-desktop-final) !important;
  max-width:var(--teewra-logo-desktop-final) !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  line-height:0 !important;
}
header.nav .brand.brand-logo img.teewra-logo-img,
header.nav img.site-logo-img,
header.nav img.teewra-logo-img,
footer .brand.brand-logo img.teewra-logo-img,
footer img.site-logo-img,
footer img.teewra-logo-img,
.footer-logo-white{
  display:block !important;
  width:var(--teewra-logo-desktop-final) !important;
  min-width:var(--teewra-logo-desktop-final) !important;
  max-width:var(--teewra-logo-desktop-final) !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  transform:none !important;
}
@media (max-width:900px){
  header.nav .nav-inner > a:first-child,
  footer .footer-brand-block .brand.brand-logo,
  .footer .footer-brand-block .brand.brand-logo,
  header.nav .brand.brand-logo,
  footer .brand.brand-logo,
  .footer .brand.brand-logo,
  header.nav .brand.brand-logo img.teewra-logo-img,
  header.nav img.site-logo-img,
  header.nav img.teewra-logo-img,
  footer .brand.brand-logo img.teewra-logo-img,
  footer img.site-logo-img,
  footer img.teewra-logo-img,
  .footer-logo-white{
    width:var(--teewra-logo-tablet-final) !important;
    min-width:var(--teewra-logo-tablet-final) !important;
    max-width:var(--teewra-logo-tablet-final) !important;
    flex-basis:var(--teewra-logo-tablet-final) !important;
  }
}
@media (max-width:520px){
  header.nav .nav-inner > a:first-child,
  footer .footer-brand-block .brand.brand-logo,
  .footer .footer-brand-block .brand.brand-logo,
  header.nav .brand.brand-logo,
  footer .brand.brand-logo,
  .footer .brand.brand-logo,
  header.nav .brand.brand-logo img.teewra-logo-img,
  header.nav img.site-logo-img,
  header.nav img.teewra-logo-img,
  footer .brand.brand-logo img.teewra-logo-img,
  footer img.site-logo-img,
  footer img.teewra-logo-img,
  .footer-logo-white{
    width:var(--teewra-logo-mobile-final) !important;
    min-width:var(--teewra-logo-mobile-final) !important;
    max-width:var(--teewra-logo-mobile-final) !important;
    flex-basis:var(--teewra-logo-mobile-final) !important;
  }
}

/* About desktop already looked correct. On mobile, remove fixed/cropping behavior and let the SVG render fully inside the card. */
@media (max-width:720px){
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .inner-hero-grid{
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:26px !important;
  }
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .inner-hero-image-card,
  body.about-page .page-hero .hero-visual-card{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 auto !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    line-height:0 !important;
    aspect-ratio:auto !important;
  }
  body.about-page .page-hero .side-image-card > img,
  body.about-page .page-hero .inner-hero-image-card > img,
  body.about-page .page-hero .hero-visual-card > img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center center !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid var(--teewra-card-border) !important;
    border-radius:16px !important;
    box-shadow:var(--teewra-card-shadow) !important;
    background:transparent !important;
    transform:none !important;
  }
}


/* === V21.31 Official Teewra Brand Color Alignment ===
   Source palette:
   Primary Blue #153E90, Deep Navy #061A3D, Maroon #9B0D1A,
   Energy Green #2E7D32, Soft Cyan #38BDF8, White #FFFFFF,
   Light Background #F6F8FC, Text Navy #111827.
*/
:root{
  --bg:#F6F8FC !important;
  --surface:#FFFFFF !important;
  --ink:#111827 !important;
  --muted:#475569 !important;
  --line:#DDE3EF !important;
  --blue:#153E90 !important;
  --mint:#2E7D32 !important;
  --violet:#153E90 !important;
  --teewra-primary-blue:#153E90 !important;
  --teewra-deep-navy:#061A3D !important;
  --teewra-maroon:#9B0D1A !important;
  --teewra-green:#2E7D32 !important;
  --teewra-cyan:#38BDF8 !important;
  --teewra-page-bg:#F6F8FC !important;
  --teewra-navy:#153E90 !important;
  --teewra-card-border:rgba(21,62,144,.16) !important;
  --teewra-card-shadow:0 18px 42px rgba(21,62,144,.12) !important;
}
html,
body,
main,
header.nav,
.nav,
.hero,
.page-hero,
.section,
section:not(.footer){
  background:#F6F8FC !important;
  color:#111827 !important;
}
body{
  background:#F6F8FC !important;
}
.nav{
  background:rgba(246,248,252,.94) !important;
  border-bottom-color:rgba(17,24,39,.08) !important;
}
.menu a{color:#111827 !important;}
.menu a:hover,
.menu a.active{color:#153E90 !important;}
.footer,
.footer.teewra-mock-footer,
.teewra-mock-footer,
.panel-hero,
.card.panel-hero,
.callout.panel-hero{
  background:#153E90 !important;
  background-image:none !important;
}
.btn.primary,
a.btn.primary,
button.btn.primary,
.nav .btns .btn.primary,
.mobile-nav-cta .btn.primary,
form .btn.primary{
  background:#153E90 !important;
  background-image:none !important;
  border-color:#153E90 !important;
  color:#FFFFFF !important;
  box-shadow:0 14px 30px rgba(21,62,144,.22) !important;
}
.btn.primary:hover,
a.btn.primary:hover,
button.btn.primary:hover{
  background:#061A3D !important;
  border-color:#061A3D !important;
  box-shadow:0 18px 36px rgba(6,26,61,.28) !important;
}
.btn.secondary{
  background:#FFFFFF !important;
  border-color:#DDE3EF !important;
  color:#111827 !important;
}
.kicker,
.label{
  color:#153E90 !important;
}
.dot,
ul.clean li:before{
  background:#2E7D32 !important;
  background-image:none !important;
}
.highlight{
  background:linear-gradient(90deg,#153E90,#2E7D32) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.panel-hero .kicker,
.card.panel-hero .kicker,
.callout.panel-hero .kicker,
.panel-hero .kicker span,
.card.panel-hero .kicker span,
.callout.panel-hero .kicker span,
.panel-hero .label,
.card.panel-hero .label,
.callout.panel-hero .label{
  color:#38BDF8 !important;
}
.panel-hero h1,.panel-hero h2,.panel-hero h3,.panel-hero h4,
.card.panel-hero h1,.card.panel-hero h2,.card.panel-hero h3,.card.panel-hero h4,
.callout.panel-hero h1,.callout.panel-hero h2,.callout.panel-hero h3,.callout.panel-hero h4{
  color:#FFFFFF !important;
}
.panel-hero p,.panel-hero li,
.card.panel-hero p,.card.panel-hero li,
.callout.panel-hero p,.callout.panel-hero li{
  color:rgba(255,255,255,.86) !important;
}
.card,.feature,.band,.callout:not(.panel-hero),.metric,.logo-box{
  background:#FFFFFF !important;
  border-color:#DDE3EF !important;
}
body, p, li, input, select, textarea{color:#111827;}
p, .lead, .form-note, ul.clean li{color:#475569 !important;}
input:focus,select:focus,textarea:focus{
  border-color:rgba(21,62,144,.60) !important;
  box-shadow:0 0 0 4px rgba(21,62,144,.12) !important;
}
.feature-card:hover .visual-tile img,
.partner-card:hover .visual-tile img,
.feature-icon-card:hover img,
.feature-visual:hover img{
  filter:saturate(1.10) contrast(1.05) brightness(1.04) drop-shadow(0 0 10px rgba(56,189,248,.18)) !important;
}

/* === V21.32 Deep Navy Background Alignment ===
   Use Deep Navy (#061A3D) wherever a solid blue background is used,
   while keeping Primary Blue (#153E90) for logo/brand accents and text links.
*/
:root{
  --teewra-bg-blue:#061A3D !important;
  --teewra-bg-blue-hover:#0A2556 !important;
}

/* Primary blue backgrounds: footer, blue panels/boxes, CTA bands */
.footer,
.footer.teewra-mock-footer,
.teewra-mock-footer,
.panel-hero,
.card.panel-hero,
.callout.panel-hero,
.band.panel-hero,
.blue-panel,
.blue-box,
.navy-panel,
.cta-band,
.cta-panel,
.dark-panel,
section.panel-hero,
section.blue-panel{
  background:#061A3D !important;
  background-image:none !important;
  color:#FFFFFF !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* Buttons and blue CTAs should match the same Deep Navy background */
.btn.primary,
a.btn.primary,
button.btn.primary,
.nav .btns .btn.primary,
header .btns .btn.primary,
.mobile-nav-cta .btn.primary,
form .btn.primary,
.submit-site-btn,
button[type="submit"]{
  background:#061A3D !important;
  background-image:none !important;
  border-color:#061A3D !important;
  color:#FFFFFF !important;
  box-shadow:0 14px 30px rgba(6,26,61,.24) !important;
}
.btn.primary:hover,
a.btn.primary:hover,
button.btn.primary:hover,
.nav .btns .btn.primary:hover,
header .btns .btn.primary:hover,
.mobile-nav-cta .btn.primary:hover,
form .btn.primary:hover,
.submit-site-btn:hover,
button[type="submit"]:hover{
  background:#0A2556 !important;
  border-color:#0A2556 !important;
  box-shadow:0 18px 36px rgba(6,26,61,.30) !important;
}

/* Keep blue-panel typography readable and brand-aligned */
.panel-hero .kicker,
.card.panel-hero .kicker,
.callout.panel-hero .kicker,
.band.panel-hero .kicker,
.blue-panel .kicker,
.blue-box .kicker,
.navy-panel .kicker,
.panel-hero .label,
.card.panel-hero .label,
.callout.panel-hero .label,
.band.panel-hero .label,
.blue-panel .label,
.blue-box .label,
.navy-panel .label{
  color:#38BDF8 !important;
  background:transparent !important;
  border-color:rgba(56,189,248,.30) !important;
}
.panel-hero h1,.panel-hero h2,.panel-hero h3,.panel-hero h4,
.card.panel-hero h1,.card.panel-hero h2,.card.panel-hero h3,.card.panel-hero h4,
.callout.panel-hero h1,.callout.panel-hero h2,.callout.panel-hero h3,.callout.panel-hero h4,
.band.panel-hero h1,.band.panel-hero h2,.band.panel-hero h3,.band.panel-hero h4,
.blue-panel h1,.blue-panel h2,.blue-panel h3,.blue-panel h4,
.blue-box h1,.blue-box h2,.blue-box h3,.blue-box h4,
.navy-panel h1,.navy-panel h2,.navy-panel h3,.navy-panel h4{
  color:#FFFFFF !important;
}
.panel-hero p,.panel-hero li,
.card.panel-hero p,.card.panel-hero li,
.callout.panel-hero p,.callout.panel-hero li,
.band.panel-hero p,.band.panel-hero li,
.blue-panel p,.blue-panel li,
.blue-box p,.blue-box li,
.navy-panel p,.navy-panel li{
  color:rgba(255,255,255,.86) !important;
}

/* Inline links / text accents can still use Primary Blue on light surfaces */
a:hover,
.menu a:hover,
.menu a.active{
  color:#153E90 !important;
}

/* Formspree inquiry form status */
.form-status {
  color: var(--text-navy, #111827);
  font-size: 0.95rem;
  line-height: 1.5;
}
button[disabled] {
  cursor: wait;
  opacity: 0.75;
}

/* Legal pages and form notice */
.form-consent {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(17, 24, 39, 0.72);
}
.legal-hero .container {
  max-width: 980px;
}
.legal-section .container {
  max-width: 980px;
}
.legal-card h2 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: 1.22rem;
  color: var(--text-navy, #111827);
}
.legal-card p {
  color: rgba(17, 24, 39, 0.78);
  line-height: 1.72;
}
.legal-card a {
  color: var(--primary-blue, #153E90);
  font-weight: 700;
}


/* V21.35 compact legal document pages */
body.privacy-page main,
body.terms-page main {
  background: var(--light-bg, #F6F8FC);
}
body.privacy-page .legal-hero,
body.terms-page .legal-hero {
  padding: 54px 0 18px !important;
  background: transparent !important;
}
body.privacy-page .legal-hero .container,
body.terms-page .legal-hero .container,
body.privacy-page .legal-section .container,
body.terms-page .legal-section .container {
  max-width: 860px !important;
}
body.privacy-page .legal-hero .kicker,
body.terms-page .legal-hero .kicker {
  font-size: 0.76rem !important;
  letter-spacing: .16em;
  color: var(--primary-blue, #153E90) !important;
}
body.privacy-page .legal-hero h1,
body.terms-page .legal-hero h1 {
  font-size: clamp(2rem, 3.2vw, 2.7rem) !important;
  line-height: 1.08 !important;
  margin: 0 0 12px !important;
  color: var(--text-navy, #111827) !important;
}
body.privacy-page .legal-hero .lead,
body.terms-page .legal-hero .lead {
  max-width: 760px;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: rgba(17,24,39,.72) !important;
}
body.privacy-page .legal-section,
body.terms-page .legal-section {
  padding: 18px 0 76px !important;
}
body.privacy-page .legal-card,
body.terms-page .legal-card {
  padding: clamp(26px, 4vw, 42px) !important;
  border: 1px solid rgba(6,26,61,.10) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 50px rgba(6,26,61,.08) !important;
}
body.privacy-page .legal-card p,
body.terms-page .legal-card p,
body.privacy-page .legal-card li,
body.terms-page .legal-card li {
  font-size: .94rem !important;
  line-height: 1.68 !important;
  color: rgba(17,24,39,.76) !important;
}
body.privacy-page .legal-card p:first-child,
body.terms-page .legal-card p:first-child {
  margin-top: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(6,26,61,.08);
  color: rgba(17,24,39,.62) !important;
  font-size: .88rem !important;
}
body.privacy-page .legal-card h2,
body.terms-page .legal-card h2 {
  margin-top: 26px !important;
  margin-bottom: 8px !important;
  font-size: 1.08rem !important;
  line-height: 1.25 !important;
  color: var(--deep-navy, #061A3D) !important;
}
body.privacy-page .legal-card a,
body.terms-page .legal-card a {
  color: var(--primary-blue, #153E90) !important;
  font-weight: 700;
  text-decoration: none;
}
body.privacy-page .legal-card a:hover,
body.terms-page .legal-card a:hover {
  text-decoration: underline;
}
@media (max-width: 720px) {
  body.privacy-page .legal-hero,
  body.terms-page .legal-hero {
    padding-top: 34px !important;
  }
  body.privacy-page .legal-card,
  body.terms-page .legal-card {
    border-radius: 20px !important;
    padding: 24px !important;
  }
}

/* ============================================================
   V21.36 PNG feature icon production layer
   Uses designer-provided PNG icons at a uniform tile size.
   Tile border hugs the image edge: no padding, no inner gap.
   ============================================================ */
:root{
  --teewra-feature-icon-size:72px;
  --teewra-feature-icon-radius:18px;
}
.feature-tile,
.home-page .section .grid.g4 .card .feature-tile,
.partner-icon-imgwrap,
.partner-card .partner-icon-imgwrap{
  width:var(--teewra-feature-icon-size) !important;
  height:var(--teewra-feature-icon-size) !important;
  min-width:var(--teewra-feature-icon-size) !important;
  min-height:var(--teewra-feature-icon-size) !important;
  max-width:var(--teewra-feature-icon-size) !important;
  max-height:var(--teewra-feature-icon-size) !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin:0 0 16px !important;
  border:1px solid rgba(21,62,144,.16) !important;
  border-radius:var(--teewra-feature-icon-radius) !important;
  overflow:hidden !important;
  background:#fff !important;
  display:block !important;
  line-height:0 !important;
}
.feature-tile img,
.feature-tile-img,
.partner-icon-imgwrap img,
.partner-icon-img,
.partner-card .partner-icon-imgwrap img{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  box-sizing:border-box !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:calc(var(--teewra-feature-icon-radius) - 1px) !important;
}
@media (max-width:560px){
  .feature-tile,
  .home-page .section .grid.g4 .card .feature-tile,
  .partner-icon-imgwrap,
  .partner-card .partner-icon-imgwrap{
    width:66px !important;
    height:66px !important;
    min-width:66px !important;
    min-height:66px !important;
    max-width:66px !important;
    max-height:66px !important;
  }
}


/* === V21.37 production hero/logo asset refresh ===
   Designer hero SVGs are all 911x684 (4:3). This block is the final source of truth
   for hero visual dimensions and removes page-specific visual sizing differences. */
:root{
  --teewra-hero-aspect: 911 / 684;
  --teewra-hero-visual-width: 560px;
  --teewra-hero-visual-radius: 20px;
}
.hero-panel.hero-panel-image,
.page-hero .hero-visual-card,
.page-hero .side-image-card,
.page-hero .inner-hero-image-card,
.solutions-page-hero-image{
  width:var(--teewra-hero-visual-width) !important;
  max-width:100% !important;
  aspect-ratio:var(--teewra-hero-aspect) !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  line-height:0 !important;
  min-height:0 !important;
  max-height:none !important;
  justify-self:end !important;
}
.hero-panel.hero-panel-image picture{
  display:block !important;
  width:100% !important;
  height:100% !important;
  line-height:0 !important;
}
.hero-panel.hero-panel-image img,
.page-hero .hero-visual-card > img,
.page-hero .side-image-card > img,
.page-hero .inner-hero-image-card > img,
.solutions-page-hero-image > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:var(--teewra-hero-aspect) !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--teewra-card-border) !important;
  border-radius:var(--teewra-hero-visual-radius) !important;
  box-shadow:var(--teewra-card-shadow) !important;
  background:transparent !important;
  box-sizing:border-box !important;
  transform:none !important;
}
@media (min-width:1025px){
  .hero-grid,
  .page-hero .right-side-visual-grid,
  .page-hero .inner-hero-grid,
  .solutions-page-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) var(--teewra-hero-visual-width) !important;
    gap:48px !important;
    align-items:center !important;
  }
  .solutions-page-hero-image-wrap,
  .page-hero .inner-hero-visual{
    width:var(--teewra-hero-visual-width) !important;
    max-width:100% !important;
    justify-self:end !important;
  }
}
@media (max-width:1024px){
  .hero-grid,
  .page-hero .right-side-visual-grid,
  .page-hero .inner-hero-grid,
  .solutions-page-hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .hero-panel.hero-panel-image,
  .page-hero .hero-visual-card,
  .page-hero .side-image-card,
  .page-hero .inner-hero-image-card,
  .solutions-page-hero-image,
  .solutions-page-hero-image-wrap,
  .page-hero .inner-hero-visual{
    width:min(100%, var(--teewra-hero-visual-width)) !important;
    max-width:100% !important;
    justify-self:center !important;
  }
}
@media (max-width:720px){
  .hero-panel.hero-panel-image,
  .page-hero .hero-visual-card,
  .page-hero .side-image-card,
  .page-hero .inner-hero-image-card,
  .solutions-page-hero-image{
    width:100% !important;
  }
  .hero-panel.hero-panel-image img,
  .page-hero .hero-visual-card > img,
  .page-hero .side-image-card > img,
  .page-hero .inner-hero-image-card > img,
  .solutions-page-hero-image > img{
    border-radius:16px !important;
  }
}

/* ============================================================
   V21.38 hero visual size alignment + footer logo color fix
   Match About and Solutions hero visual rendering to Contact.
   The wrapper is only a shell; the image itself carries the border.
   ============================================================ */
:root{
  --teewra-v2138-hero-image-width:560px;
  --teewra-v2138-hero-gap:48px;
  --teewra-v2138-hero-aspect:911 / 684;
}
@media (min-width:1025px){
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .inner-hero-grid,
  body.solutions-page .page-hero .solutions-page-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) var(--teewra-v2138-hero-image-width) !important;
    gap:var(--teewra-v2138-hero-gap) !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}
body.about-page .page-hero .side-image-card,
body.about-page .page-hero .inner-hero-image-card,
body.about-page .page-hero .hero-visual-card,
body.solutions-page .page-hero .solutions-page-hero-image-wrap,
body.solutions-page .page-hero .solutions-page-hero-image,
body.solutions-page .page-hero .hero-visual-card{
  width:var(--teewra-v2138-hero-image-width) !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  line-height:0 !important;
  display:block !important;
  justify-self:end !important;
  align-self:center !important;
  box-sizing:border-box !important;
}
body.about-page .page-hero .side-image-card > img,
body.about-page .page-hero .inner-hero-image-card > img,
body.about-page .page-hero .hero-visual-card > img,
body.solutions-page .page-hero .solutions-page-hero-image > img,
body.solutions-page .page-hero .hero-visual-card > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:var(--teewra-v2138-hero-aspect) !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  max-width:100% !important;
  max-height:none !important;
  border:1px solid rgba(16,38,95,.12) !important;
  border-radius:20px !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
  background:transparent !important;
  box-sizing:border-box !important;
  transform:none !important;
}
body.solutions-page .page-hero .solutions-page-hero-image::after{display:none !important;}
@media (max-width:1024px){
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .inner-hero-grid,
  body.solutions-page .page-hero .solutions-page-hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .inner-hero-image-card,
  body.about-page .page-hero .hero-visual-card,
  body.solutions-page .page-hero .solutions-page-hero-image-wrap,
  body.solutions-page .page-hero .solutions-page-hero-image,
  body.solutions-page .page-hero .hero-visual-card{
    width:min(100%, var(--teewra-v2138-hero-image-width)) !important;
    justify-self:center !important;
  }
}
@media (max-width:720px){
  body.about-page .page-hero .side-image-card > img,
  body.about-page .page-hero .inner-hero-image-card > img,
  body.about-page .page-hero .hero-visual-card > img,
  body.solutions-page .page-hero .solutions-page-hero-image > img,
  body.solutions-page .page-hero .hero-visual-card > img{
    border-radius:16px !important;
  }
}

/* ============================================================
   V21.39 - About hero image final size match to Contact
   Force About hero to use the exact same visual box rules as Contact.
   ============================================================ */
body.about-page .page-hero .right-side-visual-grid,
body.about-page .page-hero .inner-hero-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) var(--teewra-inner-hero-image-width) !important;
  gap:48px !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
body.about-page .page-hero .side-image-card,
body.about-page .page-hero .inner-hero-image-card,
body.about-page .page-hero .hero-visual-card{
  width:var(--teewra-inner-hero-image-width) !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  line-height:0 !important;
  display:block !important;
  justify-self:end !important;
  align-self:center !important;
  box-sizing:border-box !important;
}
body.about-page .page-hero .side-image-card > img,
body.about-page .page-hero .inner-hero-image-card > img,
body.about-page .page-hero .hero-visual-card > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:911 / 683 !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  max-width:100% !important;
  max-height:none !important;
  border:1px solid rgba(16,38,95,.12) !important;
  border-radius:20px !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
  background:transparent !important;
  box-sizing:border-box !important;
  transform:none !important;
}
@media (max-width:1024px){
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .inner-hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .inner-hero-image-card,
  body.about-page .page-hero .hero-visual-card{
    width:min(100%, var(--teewra-inner-hero-image-width)) !important;
    justify-self:center !important;
  }
}

/* ============================================================
   V21.40 — Definitive About hero size match to Contact
   Root cause: older About-specific rules later widened the About
   hero container/visual column to 1360px/800px, making it render
   larger than Contact. This final override puts About back on the
   same container, grid, card, and image rules as Contact.
   ============================================================ */
:root{
  --teewra-hero-aspect: 911 / 684;
}
@media (min-width:1101px){
  body.about-page .page-hero .container{
    max-width:1280px !important;
  }
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .right-side-visual-grid.inner-hero-grid,
  body.about-page .page-hero .inner-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr) !important;
    align-items:center !important;
    gap:42px !important;
  }
  body.about-page .page-hero .right-side-visual-grid > div:first-child,
  body.about-page .page-hero .right-side-visual-grid.inner-hero-grid > div:first-child{
    max-width:none !important;
    min-width:0 !important;
  }
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .side-image-card.inner-hero-image-card,
  body.about-page .page-hero .side-image-card.hero-visual-card,
  body.about-page .page-hero .inner-hero-visual{
    width:100% !important;
    max-width:780px !important;
    aspect-ratio:var(--teewra-hero-aspect) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:18px !important;
    margin:0 !important;
    justify-self:end !important;
    align-self:center !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%) !important;
    border:1px solid rgba(7,27,79,.10) !important;
    border-radius:24px !important;
    box-shadow:0 18px 42px rgba(7,27,79,.10) !important;
  }
  body.about-page .page-hero .side-image-card img,
  body.about-page .page-hero .side-image-card.inner-hero-image-card img,
  body.about-page .page-hero .side-image-card.hero-visual-card img,
  body.about-page .page-hero .inner-hero-visual img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    transform:none !important;
    border-radius:18px !important;
    background:transparent !important;
  }
}
@media (max-width:1100px){
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .right-side-visual-grid.inner-hero-grid,
  body.about-page .page-hero .inner-hero-grid{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .side-image-card.inner-hero-image-card,
  body.about-page .page-hero .side-image-card.hero-visual-card,
  body.about-page .page-hero .inner-hero-visual{
    width:100% !important;
    max-width:820px !important;
    aspect-ratio:var(--teewra-hero-aspect) !important;
    margin-inline:auto !important;
    padding:18px !important;
    overflow:hidden !important;
  }
}
@media (max-width:768px){
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .side-image-card.inner-hero-image-card,
  body.about-page .page-hero .side-image-card.hero-visual-card,
  body.about-page .page-hero .inner-hero-visual{
    padding:10px !important;
    border-radius:18px !important;
  }
  body.about-page .page-hero .side-image-card img,
  body.about-page .page-hero .side-image-card.inner-hero-image-card img,
  body.about-page .page-hero .side-image-card.hero-visual-card img,
  body.about-page .page-hero .inner-hero-visual img{
    border-radius:14px !important;
  }
}

/* ============================================================
   V21.41 — About hero final size/border match to Contact
   Purpose: force About to use the same rendered image-column width as
   Contact and place the visible border directly on the SVG image so the
   border hugs the artwork with no wrapper padding/gap.
   ============================================================ */
:root{
  --teewra-about-contact-hero-image-width: 560px;
  --teewra-about-contact-hero-gap: 48px;
  --teewra-about-contact-hero-container: 1240px;
}
body.about-page .page-hero > .container{
  width:100% !important;
  max-width:var(--teewra-about-contact-hero-container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
@media (min-width:1025px){
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .right-side-visual-grid.inner-hero-grid,
  body.about-page .page-hero .inner-hero-grid{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) var(--teewra-about-contact-hero-image-width) !important;
    gap:var(--teewra-about-contact-hero-gap) !important;
    align-items:center !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}
body.about-page .page-hero .side-image-card,
body.about-page .page-hero .inner-hero-image-card,
body.about-page .page-hero .inner-hero-visual,
body.about-page .page-hero .hero-visual-card{
  width:var(--teewra-about-contact-hero-image-width) !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  line-height:0 !important;
  display:block !important;
  justify-self:end !important;
  align-self:center !important;
  box-sizing:border-box !important;
}
body.about-page .page-hero .side-image-card > img,
body.about-page .page-hero .inner-hero-image-card > img,
body.about-page .page-hero .inner-hero-visual > img,
body.about-page .page-hero .hero-visual-card > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:911 / 684 !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  max-width:100% !important;
  max-height:none !important;
  border:1px solid rgba(16,38,95,.12) !important;
  border-radius:20px !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
  background:transparent !important;
  box-sizing:border-box !important;
  transform:none !important;
}
@media (max-width:1024px){
  body.about-page .page-hero .right-side-visual-grid,
  body.about-page .page-hero .right-side-visual-grid.inner-hero-grid,
  body.about-page .page-hero .inner-hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .inner-hero-image-card,
  body.about-page .page-hero .inner-hero-visual,
  body.about-page .page-hero .hero-visual-card{
    width:min(100%, var(--teewra-about-contact-hero-image-width)) !important;
    justify-self:center !important;
  }
}
@media (max-width:720px){
  body.about-page .page-hero > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

/* ============================================================
   V21.42 — About hero image fill-to-border correction
   Keep the V21.41 About hero box size, but make the actual SVG fill
   the box edge-to-edge so there is no inner white/transparent gap.
   ============================================================ */
body.about-page .page-hero .side-image-card,
body.about-page .page-hero .inner-hero-image-card,
body.about-page .page-hero .inner-hero-visual,
body.about-page .page-hero .hero-visual-card{
  width:var(--teewra-about-contact-hero-image-width) !important;
  max-width:100% !important;
  aspect-ratio:911 / 684 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(16,38,95,.12) !important;
  border-radius:20px !important;
  box-shadow:0 18px 42px rgba(16,38,95,.13) !important;
  background:#fff !important;
  overflow:hidden !important;
  line-height:0 !important;
  display:block !important;
  position:relative !important;
  box-sizing:border-box !important;
}
body.about-page .page-hero .side-image-card > img,
body.about-page .page-hero .inner-hero-image-card > img,
body.about-page .page-hero .inner-hero-visual > img,
body.about-page .page-hero .hero-visual-card > img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  box-sizing:border-box !important;
  transform:scale(1.035) !important;
  transform-origin:center center !important;
}
@media (max-width:1024px){
  body.about-page .page-hero .side-image-card,
  body.about-page .page-hero .inner-hero-image-card,
  body.about-page .page-hero .inner-hero-visual,
  body.about-page .page-hero .hero-visual-card{
    width:min(100%, var(--teewra-about-contact-hero-image-width)) !important;
  }
}

/* ============================================================
   V21.43 — Solutions hero site-width alignment fix
   Keep Solutions hero constrained by the same site container used by
   the rest of the page content, instead of inheriting older page-specific
   hero width overrides.
   ============================================================ */
body.solutions-page .solutions-page-hero > .container{
  width:100% !important;
  max-width:var(--container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
}
body.solutions-page .solutions-page-hero .solutions-page-hero-grid{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}
@media (min-width:1025px){
  body.solutions-page .solutions-page-hero .solutions-page-hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) var(--teewra-v2138-hero-image-width) !important;
    gap:var(--teewra-v2138-hero-gap) !important;
    align-items:center !important;
  }
  body.solutions-page .solutions-page-hero .solutions-page-hero-content{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    justify-self:start !important;
  }
  body.solutions-page .solutions-page-hero .solutions-page-hero-image-wrap,
  body.solutions-page .solutions-page-hero .solutions-page-hero-image{
    justify-self:end !important;
  }
}
@media (max-width:1024px){
  body.solutions-page .solutions-page-hero .solutions-page-hero-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
}
@media (max-width:720px){
  body.solutions-page .solutions-page-hero > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}