/*
Theme Name: OrgreenX 2026
Template: twentytwentyfive
Version: 0.1.0
Author: Netsville
Description: OrgreenX brand child theme of Twenty Twenty-Five. Pure core blocks, palette and typography extracted from the production Avada build.
*/

/* === Full-bleed band rail: bg spans viewport, content constrained to the content span. One decision: theme.json contentSize, surfaced by WP as --wp--style--global--content-size === */
:root{--ox-rail:max(20px,calc((100% - var(--wp--style--global--content-size,1160px))/2))} /* floor = theme.json root padding (20px): below ~1224px viewport the band gutters must match the body gutters, not exceed them */
/* === OrgreenX header composition === */
.ox-header{position:relative;z-index:100;width:100%;background:#fff;transition:background .25s ease}
.ox-header-top{padding:.6rem var(--ox-rail)}
.ox-logo-card img{background:#fff;padding:.45rem .8rem;border-radius:6px}
.ox-phone{display:flex;align-items:center;gap:.7rem;margin:0}
.ox-phone-text{text-align:left;line-height:1.2;margin:0;font-size:.875rem;font-weight:700} /* prod: 14px Ubuntu 700 */
.ox-phone a{font-size:1.8rem;font-weight:700;line-height:1.1;text-decoration:none} /* prod: 29px Ubuntu 700 */
.ox-phone-icon{margin:0}
.ox-phone-icon img{display:block;width:44px;height:auto;filter:brightness(0) invert(.25)} /* white PNG -> dark gray on white interior header */
.ox-navbar{padding:.3rem var(--ox-rail)}
.ox-navbar .wp-block-navigation a,
.ox-navbar .wp-block-navigation .wp-block-navigation-item__content,
.ox-navbar .wp-block-navigation .wp-block-navigation-item__content:where(:not(.wp-element-button)){color:#fff !important;font-size:14px;font-weight:700;padding:.45rem .35rem} /* prod .fusion-main-menu a: 14px/700, same in sticky */
.ox-navbar .wp-block-navigation a:hover{color:#f6f6f6 !important;text-decoration:underline}
.ox-quote-btn .wp-block-button__link{color:#fff;border:2px solid #fff;border-radius:999px;padding:.35rem 1.2rem;background:transparent}
/* Hero pages (body class ox-has-hero, incl. home): transparent header floating over the hero */
body.ox-has-hero .ox-header{position:absolute;top:0;left:0;background:transparent}
body.ox-has-hero.admin-bar .ox-header{top:32px}
body.ox-has-hero .ox-phone,body.ox-has-hero .ox-phone a{color:#fff}
body.ox-has-hero .ox-phone-icon img{filter:none}
/* Scrolled: white sticky header everywhere */
.ox-header.ox-stuck{position:fixed !important;top:0;left:0;right:0;width:100%;background:#fff !important;box-shadow:0 2px 12px rgba(0,0,0,.18)}
body.admin-bar .ox-header.ox-stuck{top:32px}
.ox-stuck .ox-phone,.ox-stuck .ox-phone a{color:#414042}


/* === Stuck: merge to single row like production === */
.ox-header.ox-stuck{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:.35rem var(--ox-rail)}
.ox-header.ox-stuck .ox-header-top{padding:0;margin:0;width:auto}
.ox-header.ox-stuck .ox-phone{display:none}
.ox-header.ox-stuck .custom-logo{width:150px;height:auto}
.ox-header.ox-stuck .ox-logo-card img{padding:0;background:transparent;border-radius:0}
.ox-header.ox-stuck .ox-navbar{background:transparent !important;padding:0;margin:0;width:auto;flex-wrap:nowrap}
.ox-header.ox-stuck .ox-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) a,
.ox-header.ox-stuck .ox-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content{color:#414042 !important}
.ox-header.ox-stuck .ox-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) a:hover{color:#649114 !important;text-decoration:none}
.ox-header.ox-stuck .ox-quote-btn .wp-block-button__link{color:#649114;border-color:#649114}
/* === Header, narrow widths: the top tier WRAPS (flexWrap) at desktop scale, which left-aligns
   both rows and makes the absolute-positioned header tall over the hero. Recompose: center the
   rows, shrink the logo and the phone to phone-scale. === */
@media (max-width:600px){
  .ox-header-top{justify-content:center;gap:.35rem;padding-top:.75rem;padding-bottom:.75rem}
  .ox-header-top .custom-logo{width:150px;height:auto}
  .ox-logo-card img{padding:.3rem .55rem}
  .ox-phone{gap:.5rem}
  .ox-phone-icon img{width:32px}
  .ox-phone-text{font-size:.75rem}
  .ox-phone a{font-size:1.35rem}
}

/* === Hero banners === */
.ox-hero .wp-block-cover__inner-container{width:100%;max-width:min(var(--wp--style--global--content-size,1160px),calc(100% - 40px));margin-inline:auto} /* prod rails banner content to the fusion-row cap */
.ox-hero-sub{font-size:27px;line-height:32px;font-weight:400;text-transform:uppercase;letter-spacing:.06em;margin-top:.5em} /* prod .below-main-heading: Ubuntu 400 27/32 uppercase .06em */
@media (max-width:1024px){.ox-hero-sub{font-size:22px}}
@media (max-width:640px){.ox-hero-sub{font-size:18px;line-height:26px}}
/* === Current-page nav item: underline, never a color change === */
.ox-navbar .wp-block-navigation a[aria-current="page"],
.ox-navbar .wp-block-navigation .current-menu-item > a{color:#fff !important;text-decoration:underline;text-underline-offset:.35em}
.ox-header.ox-stuck .ox-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) a[aria-current="page"],
.ox-header.ox-stuck .ox-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > a{color:#649114 !important;text-decoration:none}
/* === Footer (part 83 carries ox-footer hook) === */
.ox-footer h4{font-size:20px;line-height:26px;font-weight:700} /* prod .fusion-footer-widget-area .widget-title: Ubuntu 20/26 700 */
.ox-footer .wp-block-list li::marker{color:#649114}
.ox-footer .wp-block-list li{margin-bottom:8px}
.ox-footer .wp-block-list li:last-child{margin-bottom:0}
.ox-footer a{color:inherit;text-decoration:none}
.ox-footer .wp-block-list a:hover,.ox-footer p a:hover{color:#649114}
/* === Mobile nav: hamburger at 945px (core hard-codes 600px; prod flips ~1000px) === */
@media (max-width:945px){
  .ox-navbar .wp-block-navigation__responsive-container-open{display:flex !important;color:#fff}
  .ox-navbar .wp-block-navigation__responsive-container:not(.is-menu-open){display:none !important}
}
/* Open overlay: brand green, white links/close in BOTH header states.
   !important needed: core defaults .wp-block-navigation:not(.has-background) modal to #fff at higher
   specificity, and our own .ox-stuck link rule (#414042 !important) must lose inside the modal. */
.ox-navbar .wp-block-navigation__responsive-container.is-menu-open{background-color:#649114 !important}
.ox-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-size:1.4rem;padding:.6rem .35rem;color:#fff !important}
.ox-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{color:#fff !important}
/* Stuck white bar: dark hamburger icon */
.ox-header.ox-stuck .ox-navbar .wp-block-navigation__responsive-container-open{color:#414042}
/* TT5 draws a 2px outline on ANY :focus (mouse clicks, script focus into the nav modal).
   Keep the ring for keyboard users only. */
.wp-site-blocks *:focus:not(:focus-visible){outline:none}
/* === CTA band (template part 'cta', prod .cta-container) === */
.ox-cta{display:flex;overflow:hidden;background:#414042} /* ONE dark band, FULL-BLEED like the navbar: prod's cta-container is Avada hundred-percent-fullwidth (row cap removed, bgs edge-to-edge) and the CONTENT rails via inner wrapper max-widths -- ours rails via --ox-rail padding on the halves. Arrow notch shows the band's dark (prod floats its arrow OVER the dark column) */
.ox-cta > *{margin-block-start:0} /* kill core flow blockGap: it pushed the actions box down inside the flex row (masked pre-rail by the uniform dark bg) */
.ox-cta-banner{flex:0 0 50%;background:#649114;min-height:168px;display:flex;flex-direction:column;justify-content:center;padding:30px 80px 30px 30px;clip-path:polygon(0 0,calc(100% - 52px) 0,100% 50%,calc(100% - 52px) 100%,0 100%)} /* arrow point clipped from the banner: scales with any content height, unlike prod's fixed 168px border-triangle */
.ox-cta-text{max-width:650px;margin-left:auto} /* prod .cta-wrapper: seam-hugging 650px box. NOT rail-pinned: left-padding the banner to the rail caps line length at a constant 500px (50vw minus rail minus arrow pad) and wraps the 44px line at every viewport */
.ox-cta-1{font-size:clamp(20px,3vw,44px);line-height:1.03;font-weight:700;color:#fff;margin:0}
.ox-cta-2{font-size:clamp(30px,4.3vw,63px);line-height:1;font-weight:700;color:rgba(255,255,255,.7);margin:0}
.ox-cta-actions{flex:1;align-items:center;gap:20px;padding:20px var(--ox-rail) 20px 90px} /* left pad clears the arrow (prod: 80px off the seam); right pad rails the content edge */
.ox-cta-or{font-size:21px;font-style:italic;font-weight:700;color:#fff;margin:0}
.ox-cta .wp-block-button__link{border:2px solid #fff;color:#fff;font-weight:700;border-radius:8px;padding:.55rem 1.7rem}
.ox-cta-online .wp-block-button__link{background:#649114}
.ox-cta-online .wp-block-button__link:hover{background:#414042}
.ox-cta-phone .wp-block-button__link{background:#414042}
.ox-cta-phone .wp-block-button__link:hover{background:#649114}
@media (max-width:945px){
  .ox-cta{flex-direction:column}
  .ox-cta-banner{flex-basis:auto;min-height:0;padding:20px;text-align:center;clip-path:none}
  .ox-cta-text{margin-inline:auto}
  .ox-cta-actions{justify-content:center;flex-wrap:wrap;padding:20px}
}
/* === Shrink band just above mobile (946-1120px): keep nav on one line and CTA compact until the flip === */
@media (min-width:946px) and (max-width:1120px){
  .ox-navbar .wp-block-navigation a,
  .ox-navbar .wp-block-navigation .wp-block-navigation-item__content{font-size:13px;padding:.45rem .2rem}
  .ox-quote-btn .wp-block-button__link{padding:.3rem .9rem;font-size:13px}
  .ox-cta-1{font-size:24px}
  .ox-cta-2{font-size:34px}
  .ox-cta-actions{padding-left:60px}
}
/* === Section titles (prod .section-title: grass ornament lives in CSS, not HTML) === */
.ox-section-title{font-size:18px;line-height:24px;font-weight:700;color:#414042;text-align:center}
.ox-section-title::before{content:url(assets/img/grass-separator.png);display:block}
.ox-section-title-white{color:#fff}
.ox-section-title-white::before{content:url(assets/img/white-grass.png)}
.ox-section-title-big{font-size:36px;line-height:42px;font-weight:700;color:#414042}
@media (max-width:945px){.ox-section-title-big{font-size:30px;line-height:36px}}
@media (max-width:600px){.ox-section-title-big{font-size:22px;line-height:28px}} /* prod .section-title-big */
/* === Testimonials (synced pattern; carousel JS in functions.php) === */
.ox-testimonials{position:relative;max-width:820px;margin-left:auto;margin-right:auto;text-align:center}
.ox-testimonials::before{content:"\201C";display:block;font-size:72px;line-height:.6;font-weight:700;color:#649114;opacity:.35}
.ox-testimonials .wp-block-quote{border:none;margin:0;padding:10px 20px 0;font-size:17px;line-height:1.75;font-style:italic;color:#414042}
.ox-testimonials .wp-block-quote cite{display:block;margin-top:14px;font-style:normal;font-weight:700;font-size:15px;color:#649114} /* prod bug fix: author was invisible */
/* carousel mode: JS moves quotes into .ox-tstage (grid-stacked) for a true crossfade;
   without JS the stage never exists and quotes simply stack */
.ox-tstage{display:grid}
.ox-tstage .wp-block-quote{grid-area:1/1;opacity:0;transition:opacity .7s ease;pointer-events:none}
.ox-tstage .wp-block-quote.is-active{opacity:1;pointer-events:auto}
.ox-testimonial-dots{display:flex;gap:10px;justify-content:center;margin:20px 0 4px}
.ox-testimonial-dots button{width:12px;height:12px;border-radius:50%;border:2px solid #649114;background:transparent;padding:0;cursor:pointer}
.ox-testimonial-dots button.is-active{background:#649114}
/* === Services cards (prod: 3D icon flip + green title on hover; card buttons mobile-only) === */
.ox-services h3{font-size:27px;line-height:34px;font-weight:700;color:#414042;transition:color .3s}
.ox-services .wp-block-column img{transition:transform .4s linear}
@media (min-width:946px){.ox-services .wp-block-buttons{display:none}}

/* === Why Us band (prod .why-us-cont: green checklist / photo with badge) === */
.ox-whyus .ox-whyus-cols{gap:0;margin-bottom:0}
.ox-whyus-list{background:#649114;display:flex;align-items:center;justify-content:flex-end;padding:50px 50px 50px 20px}
.ox-whyus-inner{max-width:650px}
.ox-check{position:relative;padding:10px 0 10px 70px;margin:0;color:#fff;font-size:clamp(20px,2.2vw,32px);line-height:1.05;font-weight:700} /* prod .white-title-big 32px w/ responsive steps */
.ox-check::before{content:url(assets/img/checkmark.png);position:absolute;left:0;top:2px}
.ox-check-desc{color:#fff;padding-left:70px;margin:4px 0 12px}
.ox-whyus-photo .ox-whyus-cover{height:100%;min-height:420px}
.ox-whyus-tag{color:#fff;font-size:clamp(22px,2.4vw,32px);line-height:1.15;font-weight:700}
.ox-whyus-sub{color:#fff}
@media (max-width:781px){.ox-whyus-list{justify-content:center;padding:30px 20px}}
/* Inline brand-green emphasis (prod span.green) */
.ox-green{color:#649114}

/* ============================================================
   Hero form (Contact Form 7, hook: ox-hero-form)
   Look transcribed from production fusion-2.css (.main-banner
   #gform_1 rules): translucent dark panel, white outline
   inputs, green full-width submit.
   ============================================================ */
.ox-hero-form h3 {
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 36px;
	color: #fff;
	margin: 0 0 14px;
}
.ox-hero-form form.wpcf7-form {
	padding: 20px;
	border: 2px solid #fff;
	border-radius: 12px;
	background: rgba(51, 51, 51, .6);
}
.ox-hero-form .ox-f-field { margin-bottom: 16px; }
.ox-hero-form .ox-f-field .wpcf7-form-control-wrap { display: block; }
.ox-hero-form input[type="text"],
.ox-hero-form input[type="email"],
.ox-hero-form select {
	width: 100%;
	height: 50px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 12px;
	background: transparent;
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .02em;
	outline: none;
}
.ox-hero-form input::placeholder { color: #fff; opacity: 1; }
.ox-hero-form input:focus::placeholder { color: transparent; }
.ox-hero-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}
.ox-hero-form select option { color: #271818; }
.ox-hero-form input[type="submit"] {
	width: 100%;
	padding: 13px 29px;
	line-height: 17px;
	font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--accent-2);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: all .3s;
}
.ox-hero-form input[type="submit"]:hover { background: #271818; }
.ox-hero-form .ox-f-submit { margin-bottom: 0; }
.ox-hero-form .wpcf7-not-valid-tip {
	color: #ffd2d2;
	font-size: 13px;
	margin-top: 4px;
}
.ox-hero-form .wpcf7-response-output {
	color: #fff;
	border-radius: 12px;
	margin: 12px 0 0;
	padding: 8px 12px;
}
/* ============================================================
   Page form, light variant (Contact Form 7, hook: ox-page-form)
   Interior on-white version of the hero form: gray outline
   inputs (prod gform_3 rules), green chevron, green submit.
   Improvement over prod: typed text is body color #414042,
   only placeholders are gray (prod made both #999).
   ============================================================ */
.ox-page-form .ox-f-field { margin-bottom: 16px; }
.ox-page-form .ox-f-field .wpcf7-form-control-wrap { display: block; }
.ox-page-form input[type="text"],
.ox-page-form input[type="email"],
.ox-page-form input[type="tel"],
.ox-page-form select,
.ox-page-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #999999;
	border-radius: 12px;
	background: #fff;
	color: #414042;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .02em;
	outline: none;
}
.ox-page-form input[type="text"],
.ox-page-form input[type="email"],
.ox-page-form input[type="tel"],
.ox-page-form select {
	height: 50px;
	padding: 0 10px;
}
.ox-page-form textarea {
	height: 150px;
	padding: 10px;
}
.ox-page-form ::placeholder { color: #999999; opacity: 1; }
.ox-page-form :focus::placeholder { color: transparent; }
.ox-page-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23649114' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 34px;
}
.ox-f-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}
.ox-f-half { width: calc(50% - 8px); }
@media (max-width: 600px) {
	.ox-f-row { grid-template-columns: 1fr; }
	.ox-f-half { width: 100%; }
}
.ox-page-form input[type="submit"] {
	width: 100%;
	padding: 13px 29px;
	line-height: 17px;
	font-size: 14px;
	font-family: 'Ubuntu', sans-serif;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--accent-2);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	transition: all .3s;
}
.ox-page-form input[type="submit"]:hover { background: #271818; }
.ox-page-form .ox-f-submit { margin-bottom: 0; }
.ox-page-form .wpcf7-not-valid-tip {
	color: #b32d2e;
	font-size: 13px;
	margin-top: 4px;
}
.ox-page-form .wpcf7-response-output {
	border-radius: 12px;
	margin: 12px 0 0;
	padding: 8px 12px;
}
/* ============================================================
   Hero h1 (all pages with an ox-hero Cover)
   Promoted 2026-07-10 from per-page inline styles: size/weight
   of hero titles is a theme decision, not page content.
   54px = production's nominal banner h1; step-downs follow
   our own breakpoints (945 nav flip, 600 forms).
   ============================================================ */
.ox-hero h1 {
	font-size: 54px;
	line-height: 1.15;
	font-weight: 700;
}
@media (max-width: 945px) {
	.ox-hero h1 { font-size: 46px; line-height: 50px; }
}
@media (max-width: 600px) {
	.ox-hero h1 { font-size: 28px; line-height: 34px; }
}
/* ---------- Contact Us: info cells + map (page 67) ---------- */
/* Prod recipe (fusion-24.css): .contact-info label 18px #ccc, 70px indent,
   52x52 circle icons via ::before content:url(); .brown-link value 700 16/26
   #414042 with green hover; address value deliberately not a link.
   Icons harvested from prod uploads/2017/11 into assets/img/. */
.ox-contact-cell{font-family:Ubuntu,sans-serif;font-weight:400;font-size:18px;line-height:26px;color:#ccc;letter-spacing:.02em;position:relative;padding-left:70px;margin-bottom:30px}
.ox-contact-cell::before{position:absolute;left:0;top:2px}
.ox-ci-phone::before{content:url(assets/img/green-phone.png)}
.ox-ci-address::before{content:url(assets/img/green-pin.png)}
.ox-ci-email::before{content:url(assets/img/green-mail.png)}
.ox-contact-cell a,.ox-contact-cell .ox-ci-val{font-weight:700;font-size:16px;line-height:26px;color:#414042;text-decoration:none;transition:color .3s}
.ox-contact-cell a:hover{color:var(--wp--preset--color--accent-2)}
.ox-contact-map{display:block;width:100%;max-width:100%;border:0}
/* ---------- About Us: commitment/guarantee band + white titles ---------- */
/* Prod (.about-us-cont, fusion-24.css): left col 55% solid #649114, content
   right-floated max-width 695, pad 40/50/20/0; right col 45% family.jpg bg
   with rgba(51,51,51,.5) overlay (prod: inset 800px box-shadow), content
   max-width 540, pad 40/0/20/50; mobile: both 100%, pad 40/20.
   .white-title-big generic (32/32 Ubuntu 700 white; 28/24/20 step-downs ->
   ours is clamp). family.jpg harvested to assets/img (CSS background). */
.ox-about-band{gap:0;margin-top:40px;margin-bottom:0}
.ox-about-commit{background:var(--wp--preset--color--accent-2);display:flex;justify-content:flex-end;padding:40px 50px 20px 20px}
.ox-about-commit .ox-about-inner{max-width:695px}
.ox-about-guarantee{background:url(assets/img/family.jpg) center/cover no-repeat;box-shadow:inset 0 0 0 800px rgba(51,51,51,.5);padding:40px 20px 20px 50px}
.ox-about-guarantee .ox-about-inner{max-width:540px}
.ox-white-title-big{color:#fff;font-weight:700;font-size:clamp(20px,2.4vw,32px);line-height:1.1}
.ox-about-band p{color:#fff}
@media (max-width:781px){
  .ox-about-commit,.ox-about-guarantee{padding:30px 20px}
  .ox-about-commit .ox-about-inner,.ox-about-guarantee .ox-about-inner{max-width:100%}
}
/* ---------- Pest Control: parallax checklist band + bug grid ---------- */
/* Prod: .pest-paralax fixed-bg + rgba(51,51,51,.6) overlay -> core Cover with
   hasParallax + #333/60 dim. .list-border 2px solid #fff r12 pad 30;
   .white-list li 16px white, pad 6/0/6/40, small-checkmark.png bullet at 0,9
   (ornament in assets/img). .bug-image-frame 220px circle, 4px green ring,
   object-fit cover. .services-title Ubuntu 700 27/34 centered (generic -
   prod reuses it on other pages). */
.ox-list-border{border:2px solid #fff;border-radius:12px;padding:30px}
.ox-white-list{list-style:none;padding-left:0;margin:0}
.ox-white-list li{color:#fff;font-size:16px;padding:6px 0 6px 40px;position:relative}
.ox-white-list li::before{content:url(assets/img/small-checkmark.png);position:absolute;left:0;top:9px}
.ox-bug-frame{width:220px;height:220px;border:4px solid var(--wp--preset--color--accent-2);border-radius:50%;margin:0 auto 20px;overflow:hidden}
.ox-bug-frame img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ox-services-title{font-weight:700;font-size:27px;line-height:34px;color:#414042;text-align:center}
@media (max-width:781px){
  .ox-list-border{padding:20px}
}
/* ---------- Termite Control: click-to-swap gallery (ox-gallery) ---------- */
/* Prod: big image left (bg-cover col), text right (floated), 5 thumbs 20%/90px
   under the big image with 4px white separators; hover = white .6 fade
   (::before overlay); click swaps big image bg (Simple Custom CSS jQuery).
   Ours: core columns + images, 4px gap instead of border trick, vanilla JS
   in functions.php swaps the img src. JS-off = static image + thumbnails. */
.ox-gallery-col{display:flex;flex-direction:column}
.ox-gbig{margin:0}
.ox-gbig img{width:100%;height:auto;display:block}
.ox-gthumbs{gap:4px;margin-top:20px}
.ox-gthumb{flex:1;margin:0;position:relative;cursor:pointer}
.ox-gthumb::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.6);opacity:0;transition:opacity .3s ease-in-out}
.ox-gthumb img{width:100%;height:auto;aspect-ratio:11/9;object-fit:cover;display:block}
.ox-gallery-text{padding-top:30px}
/* ---------- Lawn Fertilization: alternating rows + green titles ---------- */
/* Prod: .green-title Ubuntu 700 32/36 green, .black spans #25260c (inverse of
   the section-title-big pattern); .lawn-fert-cont rows 50/50, image col
   bg-cover min-height 500 (250 mobile), text col pad 30/20/20/50 mirrored on
   reversed rows. Ours: media-text rows (ox-fert-row), object-fit cover. */
.ox-green-title{font-weight:700;font-size:32px;line-height:36px;color:var(--wp--preset--color--accent-2)}
.ox-green-title .ox-black{color:#25260c}
.ox-fert-row{margin-bottom:0}
.ox-fert-row .wp-block-media-text__media{height:500px;margin:0}
.ox-fert-row .wp-block-media-text__media img{width:100%;height:100%;object-fit:cover}
.ox-fert-row .wp-block-media-text__content{padding:30px 20px 20px 50px}
.ox-fert-row.has-media-on-the-right .wp-block-media-text__content{padding:30px 50px 20px 0}
@media (max-width:945px){.ox-green-title{font-size:26px;line-height:30px}}
@media (max-width:600px){
  .ox-green-title{font-size:22px;line-height:28px}
  .ox-fert-row .wp-block-media-text__media{height:250px}
  .ox-fert-row .wp-block-media-text__content,
  .ox-fert-row.has-media-on-the-right .wp-block-media-text__content{padding:30px 0 20px 0}
}
/* ---------- Commercial: service cards + affiliate logos ---------- */
/* Prod: .services2-col img margin-bottom 20; .affiliates logos grayscale,
   full color on hover. Prod wrapped logos in dead href="#" links to get
   a:hover; ours hovers the img directly - same visual, no dead links. */
.ox-services2 .wp-block-image{margin-bottom:20px}
.ox-affiliates img{filter:grayscale(100%);transition:filter .3s}
.ox-affiliates img:hover{filter:none}

/* ---- Honeypot decoy field (see ox_honeypot_check in functions.php) ----
   Off-screen, not display:none - some bots skip hidden inputs. */
.ox-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   iOS / touch hardening  (DEVICE-CLASS rules, not width rules)
   A desktop browser resized to phone WIDTH cannot surface any of
   these - they are Safari/touch behaviors. All four are
   deterministic, so they are fixed without a device in hand:
   1. iOS zooms the viewport whenever a focused input is under
      16px. -> 16px at narrow widths ONLY; desktop keeps prod's
      transcribed 13/14px.
   2. Safari repaints text inputs and submit buttons with its own
      inset shadow + corner radius unless -webkit-appearance:none
      (we had it on select only, for the chevron).
   3. background-attachment:fixed - what core's has-parallax
      compiles to - is broken on iOS (frozen or wrongly scaled
      image). Fall back to scroll on narrow/coarse-pointer.
      Avada disabled prod's mobile parallax for the same reason.
   4. Safari fires :hover on first TAP and KEEPS it. Effects that
      obscure or animate content must sit behind (hover:hover),
      or the first tap on a gallery thumb leaves a white veil
      stuck over it. Color-only hovers (links, buttons) are
      harmless and stay unconditional.
   ============================================================ */
html{-webkit-text-size-adjust:100%}
.ox-hero-form input[type="text"],.ox-hero-form input[type="email"],
.ox-page-form input[type="text"],.ox-page-form input[type="email"],
.ox-page-form input[type="tel"],.ox-page-form textarea,
.ox-hero-form input[type="submit"],.ox-page-form input[type="submit"]{-webkit-appearance:none;appearance:none}
@media (max-width:600px){
  .ox-hero-form input[type="text"],.ox-hero-form input[type="email"],.ox-hero-form select,
  .ox-page-form input[type="text"],.ox-page-form input[type="email"],
  .ox-page-form input[type="tel"],.ox-page-form select,.ox-page-form textarea{font-size:16px}
}
@media (max-width:945px),(hover:none){
  .wp-block-cover.has-parallax{background-attachment:scroll}
}
@media (hover:hover){
  .ox-services .wp-block-column:hover h3{color:#649114}
  .ox-services .wp-block-column:hover img{transform:rotateY(180deg)}
  .ox-gthumb:hover::after{opacity:1}
}