@charset "UTF-8";

/* ===================================================================
   Drone Fidelity - base.css (ASCII only)
   Scope: global layout, sections, rows/columns, lists, grid helpers
   Depends on: tokens.css (for --brand-cyan / --brand-navy variables)
   =================================================================== */

@layer base, components, utilities, pages;

/* ---------- Base resets (safe, global) ---------- */
@layer base {
  html { color: inherit; background: inherit; }
  img { max-width: 100%; height: auto; }
}

/* =================================================
   GLOBAL PAGE & LAYOUT STYLES
   ================================================= */
@media (min-width: 1025px) {
  .site-content,
  .content-area,
  .entry-content,
  .page-content,
  .wpcf7 {
    width: 100%;
    max-width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
  }
}


/* =================================================
   FONT DECLARATIONS
   ================================================= */
/* ===== Local Font: Barlow Condensed (400 + 700) ===== */
@font-face {
  font-family: "Barlow Condensed";
  src: url("/wp-content/uploads/fonts/BarlowCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/wp-content/uploads/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lock infobox numeral to correct condensed 700 */
.infobox-number,
.infobox-number::before {
  font-family: "Barlow Condensed", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-synthesis: none;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: 0;
}

.infobox-number::before {
  content: attr(data-content);
  display: block;
  font-size: 100px;    /* keep your previous styling */
  line-height: 0.85;
  opacity: .14;
}

.infobox-number {
  color: transparent; /* hide duplicate inline number if necessary */
}


/* =================================================
   SECTION WRAPPER: vertical rhythm, backgrounds, accents
   ================================================= */
.section-wrapper {
  padding: 28px 24px;               /* base padding */
  margin: 28px auto;                 /* space between sections */
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.section-wrapper.white { background: #fff; }
.section-wrapper.gray  { background: #f7f7f7; }

/* Slightly different inner padding for white vs gray */
@media (min-width: 1024px) {
  .section-wrapper.white { padding: 32px 30px; }
  .section-wrapper.gray  { padding: 36px 32px; }
}

/* Keep first/last child spacing tidy inside each section */
.section-wrapper > *:first-child { margin-top: 0; }
.section-wrapper > *:last-child  { margin-bottom: 0; }

/* Headings & underline rhythm inside sections */
.section-wrapper h2 {
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.section-wrapper .h2-underline {
  display: block;
  height: 3px;
  margin: 12px auto 22px;
  background: linear-gradient(90deg, var(--brand-cyan, #00ccff), #00a6e6);
  border-radius: 3px;
}

/* Optional accent borders */
.section-wrapper.accent-left   { border-left:   4px solid var(--brand-cyan, #00ccff); padding-left: 20px; }
.section-wrapper.accent-right  { border-right:  4px solid var(--brand-cyan, #00ccff); padding-right: 20px; }
.section-wrapper.accent-top    { border-top:    4px solid var(--brand-cyan, #00ccff); padding-top: 20px; border-radius: 8px 8px 6px 6px; }
.section-wrapper.accent-bottom { border-bottom: 4px solid var(--brand-cyan, #00ccff); padding-bottom: 20px; border-radius: 6px 6px 8px 8px; }

@media (min-width: 1280px) {
  .section-wrapper.white.accent-top:last-of-type {
    background: linear-gradient(180deg, #ffffff 0%, #fcfeff 100%);
  }
}

/* Smooth shadow animation */
.section-wrapper { transition: box-shadow .18s ease; }

/* Darker, deeper hover for white/gray */
.section-wrapper.white:hover,
.section-wrapper.gray:hover {
  /* slightly larger + darker than base */
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    0 3px 10px rgba(0,0,0,.12);
}

/* Optional: also when the section contains a focused element (keyboard users) */
.section-wrapper.white:focus-within,
.section-wrapper.gray:focus-within {
  box-shadow:
    0 6px 18px rgba(0,0,0,.14),
    0 2px 6px rgba(0,0,0,.10);
}

/* =================================================
   TYPOGRAPHY HELPERS
   ================================================= */
.justify { text-align: justify; }

/* Paragraph measure inside sections (responsive) */
.section-wrapper .justify {
  max-width: 90ch;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width:1600px) { .section-wrapper .justify { max-width: 105ch; } }
@media (min-width:2200px) { .section-wrapper .justify { max-width: 120ch; } }

/* Allow a section to go full width if needed */
.section-wrapper.wide .justify { max-width: none;}

/* Apply to the element that has .justify */
.justify.widest { max-width: 125ch; }
.justify.wider { max-width: 110ch; }
.justify.pad22  { max-width: none; padding: 0 22px 0 22px; }
.justify.full  { max-width: none; }
.justify.tight { max-width: 80ch; }
.justify.tighter { max-width: 60ch; }


/* =================================================
   ROWS / COLUMNS (shortcode-style [row]/[column] helpers)
   ================================================= */

/* Normalize inner padding added inline by editors/builders */
.section-wrapper [column] > div[style*="padding"] { padding: 0 !important; }

/* Default two-column gutters (text left col=8, image right col=4) */
.section-wrapper .split-even   [column][col="8"] { padding-right: 24px; }
.section-wrapper .split-even   [column][col="4"] { padding-left:  24px; }

/* Reversed gutters (image left, text right) */
.section-wrapper .split-reverse[column][col="4"] { padding-right: 24px; }
.section-wrapper .split-reverse[column][col="8"] { padding-left:  24px; }

/* Neutralize legacy WP float helpers inside our columns */
.section-wrapper [column] img.alignleft,
.section-wrapper [column] img.alignright {
  margin: 0 !important;
  float: none !important;
}

/* Image column: true centering + sane sizes */
.section-wrapper [column][col="4"] > div,
.section-wrapper [column][col="4"] img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.section-wrapper [column][col="4"] img { max-width: 100%; height: auto; }

/* Stack breakpoint: go single column on narrower viewports */
@media (max-width: 980px) {
  [row] { display: block !important; }
  [row] [column] { width: 100% !important; padding: 0 !important; margin-bottom: 18px; }

  .section-wrapper.split-even [column][col="8"],
  .section-wrapper.split-even [column][col="4"],
  .section-wrapper.split-reverse [column][col="8"],
  .section-wrapper.split-reverse [column][col="4"] {
    padding: 0 8px !important;
  }

  .section-wrapper .h2-underline { margin: 10px auto 18px; height: 3px; }
}

/* =================================================
   DIVIDERS
   ================================================= */
hr,
.wp-block-separator {
  border: 0;
  height: 2px;
  width: 110px;
  margin: 22px auto;
  background: linear-gradient(90deg, var(--brand-cyan, #00ccff), #00a6e6);
  border-radius: 2px;
}

/* =================================================
   LISTS (custom icon-list — FA bullets consolidated later)
   ================================================= */

/* Generic icon-list variant (kept) */
.icon-list,
.icon-list li { list-style: none !important; margin: 0; padding: 0; }
.icon-list li { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; line-height: 1.25; text-align: left; }
.icon-list > li > i { display: inline-block; margin-right: .5em; color: var(--brand-cyan, #00ccff); }
.icon-list li i.fa-solid {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.25em; flex: 0 0 1.15em; min-width: 1.15em;
  color: var(--brand-cyan, #00ccff); transition: color .25s ease;
}
.icon-list li:hover i.fa-solid { color: #0077aa; }
.icon-list li .item-text,
.icon-list li span,
.icon-list li strong,
.icon-list li em {
  flex: 1 1 auto; min-width: 0; display: inline; text-align: justify;
}

/* ICON LIST — lock brand cyan at rest, darker blue on hover (beats gray overrides) */
.section-wrapper .icon-list li i.fa-solid,
.icon-list li i.fa-solid {
  color: var(--brand-cyan, #00ccff) !important;
  transition: color .25s ease;
}
.section-wrapper .icon-list li:hover i.fa-solid,
.icon-list li:hover i.fa-solid {
  color: #0077aa !important; /* darker brand blue */
}

/* If the gray variant had its own rule, force-reset it too */
.section-wrapper.gray .icon-list li i.fa-solid {
  color: var(--brand-cyan, #00ccff) !important;
}

/* Align icon with the first text baseline, then nudge it up a hair */
.icon-list li{ align-items: baseline; }
.section-wrapper .icon-list li i.fa-solid{ position: relative; top: 0px !important; }
.section-wrapper .icon-list > li > i{ position: relative; top: 0px !important; }
.section-wrapper .icon-list li .fa-li i{ position: relative; top: 0px !important; }


/* =================================================
   INFOBOX GRID (six-up services) - equal heights and spacing
   ================================================= */
.custom-service-grid p,
.custom-service-grid ul { max-width: 70ch; }

/* Reduce vertical space above/below the 6-service grid */
.custom-service-grid section,
.custom-service-grid .section,
.custom-service-grid [section] {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Tighten spacing inside each column */
.custom-service-grid .column_content,
.custom-service-grid [column] {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Equal heights and aligned lists (desktop) */
@media (min-width: 992px) {
  .custom-service-grid .row { display: flex; flex-wrap: wrap; align-items: stretch; }
  .custom-service-grid [column] { display: flex; }
  .custom-service-grid .infobox {
    display: flex; flex-direction: column; justify-content: space-between; width: 100%;
  }
  .custom-service-grid .infobox ul { margin-top: auto; padding-top: 10px; }
}

/* Mobile and small tablets: stack naturally */
@media (max-width: 991.98px) {
  .custom-service-grid .row { display: block !important; }
  .custom-service-grid [column] { width: 100% !important; display: block !important; margin-bottom: 16px; }
  .custom-service-grid .infobox { display: block; }
  .custom-service-grid .infobox ul { margin-top: .6em; padding-top: 0; }
}

/* =================================================
   REVEAL (graceful if JS does not run) + Reduced Motion
   ================================================= */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in-view {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* =================================================
   About-right spacing helper (tiny)
   ================================================= */
.section-wrapper.gray .about-right [class*="sub"]{ margin:0 0 .6rem !important; }
.section-wrapper.gray .about-right .page-hero-style.page-hero-top{ margin:.6rem 0 !important; }
.section-wrapper.gray .about-right p.justify:first-of-type,
.section-wrapper.gray .about-right p:first-of-type{ margin-top:.6rem !important; }

/* Universal button (global) */
:root{
  --btn-bg:#00ccff; --btn-text:#fff; --btn-bg-hover:#000; --btn-text-hover:#00ccff;
  --btn-border:#00ccff; --btn-radius:50px;
  --btn-shadow:0 4px 8px rgba(0,0,0,.2); --btn-shadow-hover:0 6px 12px rgba(0,0,0,.3);
  --btn-padding:12px 28px; --btn-font-size:1rem; --btn-font-weight:600; --btn-letter-spacing:0;
}
.universal-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--btn-bg); color:var(--btn-text);
  padding:var(--btn-padding); border-radius:var(--btn-radius);
  border:2px solid var(--btn-border); box-shadow:var(--btn-shadow);
  font-size:var(--btn-font-size); font-weight:var(--btn-font-weight); letter-spacing:var(--btn-letter-spacing);
  text-decoration:none; cursor:pointer; transition:all .3s ease; line-height:1.2;
}
.universal-button:hover{
  background:var(--btn-bg-hover); color:var(--btn-text-hover); box-shadow:var(--btn-shadow-hover);
}
.universal-button.block{ display:block; width:fit-content; margin:0 auto; }

@media (hover:hover){
  .section-wrapper:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
}

/* ===== GRAY SECTION ACCENT RESTORE ===== */
:root{
  --brand-cyan: #00ccff;           /* original */
  --brand-cyan-dark: #0077aa;      /* darker for gray sections */
  --brand-cyan-dark-2: #006699;    /* a hair darker for gradients/hover */
}

/* Accent borders on gray sections */
.section-wrapper.gray.accent-left   { border-left-color:  var(--brand-cyan-dark) !important; }
.section-wrapper.gray.accent-right  { border-right-color: var(--brand-cyan-dark) !important; }
.section-wrapper.gray.accent-top    { border-top-color:   var(--brand-cyan-dark) !important; }
.section-wrapper.gray.accent-bottom { border-bottom-color:var(--brand-cyan-dark) !important; }

/* H2 underline inside gray sections */
.section-wrapper.gray .h2-underline{
  background: linear-gradient(90deg, var(--brand-cyan-dark), var(--brand-cyan-dark-2)) !important;
}

/* ===== GRAY SECTION CTA: darker brand accent ===== */
.section-wrapper.gray .universal-button,
.section-wrapper.gray .wpcf7 input[type="submit"]{
  --btn-bg:         var(--brand-cyan-dark);
  --btn-border:     var(--brand-cyan-dark);
  --btn-text:       #ffffff;
  --btn-bg-hover:   #000000;
  --btn-text-hover: var(--brand-cyan-dark);
  --btn-shadow:       0 4px 10px rgba(0,0,0,.22);
  --btn-shadow-hover: 0 6px 14px rgba(0,0,0,.28);
}

/* Focus visibility (keyboard users) */
.section-wrapper.gray .universal-button:focus-visible,
.section-wrapper.gray .wpcf7 input[type="submit"]:focus-visible{
  outline: 2px solid var(--brand-cyan-dark);
  outline-offset: 2px;
}

/* If you use CF7 icon-on-submit, keep the icon in sync on hover */
.section-wrapper.gray .wpcf7 .wpcf7-submit-wrap:hover::before,
.section-wrapper.gray .wpcf7 .wpcf7-submit-wrap:focus-within::before{
  color: var(--btn-text-hover);
}

/* --- Universal Button: force brand look inside gray sections --- */
.section-wrapper.gray .universal-button,
.section-wrapper.gray .wpcf7 input[type="submit"].universal-button{
  --btn-bg: #00ccff;
  --btn-text: #ffffff;
  --btn-border: #00ccff;
  --btn-bg-hover: #000000;
  --btn-text-hover: #00ccff;

  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-border) !important;
}

/* anchor-specific color override (gray sections set <a> colors) */
.section-wrapper.gray a.universal-button{
  color: var(--btn-text) !important;
}
.section-wrapper.gray a.universal-button:hover{
  color: var(--btn-text-hover) !important;
}

/* hover state stays the same cyan-on-black brand look */
.section-wrapper.gray .universal-button:hover,
.section-wrapper.gray .wpcf7 input[type="submit"].universal-button:hover{
  background: var(--btn-bg-hover) !important;
  color: var(--btn-text-hover) !important;
  border-color: var(--btn-border) !important;
}

/* make sure icons follow the text color */
.universal-button i{ color: currentColor !important; }

/* Footer contact icons: brand cyan, consistent across gray/white */
.foot-two-box h4 i[class*="fa-"]{
  color: var(--brand-cyan, #00ccff) !important;
  line-height: 1;
}


/* === Custom Service Grid: fix small-tablet (Galaxy landscape) layout === */

/* Base: neutralize legacy floats/widths just in this component */
.custom-service-grid [column]{
  box-sizing: border-box;
  padding-left: 12px; padding-right: 12px;
  float: none !important;
  max-width: none !important;
}
.custom-service-grid .row{
  margin-left: -12px; margin-right: -12px;
}

/* Phones: keep single column */
@media (max-width: 599.98px){
  .custom-service-grid .row,
  .custom-service-grid [row]{ display: block !important; }
  .custom-service-grid [column]{ width: 100% !important; }
}

/* Small tablets / landscape phones (Galaxy S25U ~880–930px) -> 2 columns */
@media (min-width: 600px) and (max-width: 991.98px){
  .custom-service-grid .row,
  .custom-service-grid [row]{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
  }
  .custom-service-grid [column]{ width: 50% !important; }
}

/* Desktop and up -> 3 columns */
@media (min-width: 992px){
  .custom-service-grid .row,
  .custom-service-grid [row]{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
  }
  .custom-service-grid [column]{ width: 33.3333% !important; }
}

/* Card fill & tidy lists */
.custom-service-grid .infobox{
  display: flex; flex-direction: column; width: 100%;
}
.custom-service-grid .infobox ul{ margin-top: auto; }

/* Guard: if a global rule forces 100% width under 980px, this wins in our scope */
@media (max-width: 991.98px){
  .custom-service-grid .row{ display: flex !important; }
}


/* === Custom Service Grid — phone portrait hard reset (<=600px) === */
@media (max-width: 599.98px){
  .custom-service-grid,
  .custom-service-grid .row,
  .custom-service-grid [row]{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  .custom-service-grid [column]{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 0 16px 0 !important;
    padding: 0 12px !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box;
    flex: none !important;
  }
  .custom-service-grid [column] > div{
    width: 100% !important;
    max-width: 100% !important;
  }

  .custom-service-grid *[style*="width"]{ width: 100% !important; }
  .custom-service-grid *[style*="max-width"]{ max-width: 100% !important; }

  .custom-service-grid p,
  .custom-service-grid ul{
    max-width: none !important;
  }

  .custom-service-grid img,
  .custom-service-grid figure{
    max-width: 100% !important;
    height: auto !important;
  }
}


/* FA5/early FA6 duotone fallback -> render as solid with FA6 kit */
.fad,
.fa-duotone { font-weight: 900 !important; }
.fad::before,
.fa-duotone::before {
  font-family: "Font Awesome 6 Pro","Font Awesome 6 Free" !important;
}


/* ==== ABOUT_RIGHT: reset alignment so normal paragraphs justify properly ==== */
.about-right { text-align: initial; }
.about-right p { text-align: left; margin: 0 0 1em; }
.about-right p.justify { text-align: justify; }
.about-right .icon-list,
.about-right .fa-ul { text-align: left; }

/* Keep only the sub_title centered, not the whole block */
.about-right .section_sub_title {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}

/* ==== INFOBOX2: force left-align on titles and content even inside centered wrappers ==== */
.infobox2,
.df-infobox2 { text-align: left !important; }

.infobox2 h3,
.infobox2 .title,
.infobox2 .ibox-title { 
  text-align: left !important;
  margin-left: 0;
  margin-right: auto;
}
.infobox2 .icon-list,
.infobox2 .fa-ul { text-align: left !important; }
.infobox2 .icon-list li,
.infobox2 .fa-ul li { list-style: none; }

/* Force justify utility no matter the wrapper alignment */
p.justify,
.justify { 
  text-align: justify !important;
  text-justify: inter-word;
}

/* Make sure icon lists stay left aligned inside about_right */
.about-right .icon-list,
.about-right .fa-ul { text-align: left !important; }


/* Same idea, but target infobox2 output */
.ibx-solar2 .infobox2 .num,
.ibx-solar2 .df-infobox2 .num,
.ibx-solar2 .infobox2 .ibox-num,
.ibx-solar2 .df-infobox2 .ibox-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:9999px;
  background:#00ccff; border:2px solid #00ccff;
  color:transparent !important;
}
.ibx-solar2 .infobox2 .num::before,
.ibx-solar2 .df-infobox2 .num::before,
.ibx-solar2 .infobox2 .ibox-num::before,
.ibx-solar2 .df-infobox2 .ibox-num::before{
  content:"\f5ba"; /* FA solar-panel */
  font-family:"Font Awesome 6 Pro","Font Awesome 6 Free";
  font-weight:900; line-height:1; color:#ffffff;
}
.ibx-solar2 .infobox2:hover .num,
.ibx-solar2 .df-infobox2:hover .num,
.ibx-solar2 .infobox2:hover .ibox-num,
.ibx-solar2 .df-infobox2:hover .ibox-num{ background:#ffffff; }
.ibx-solar2 .infobox2:hover .num::before,
.ibx-solar2 .df-infobox2:hover .num::before,
.ibx-solar2 .infobox2:hover .ibox-num::before,
.ibx-solar2 .df-infobox2:hover .ibox-num::before{ color:#00ccff; }

/* Custom Service Grid — center short last row on desktop */
@media (min-width: 992px){
  .custom-service-grid .row,
  .custom-service-grid [row]{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    justify-content: center !important;
  }
  .custom-service-grid [column]{
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}

/* Custom Service Grid — center short last row on small tablets/landscape phones */
@media (min-width: 600px) and (max-width: 991.98px){
  .custom-service-grid .row,
  .custom-service-grid [row]{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch;
    justify-content: center !important;
  }
  .custom-service-grid [column]{
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}


/* ---------- WHY CHOOSE US (features) ---------- */
.features-box .fea-inner{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}
.features-box .fea-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 0 12px 0 !important;
}
.features-box .fea-icon i{
  display:block !important;
  line-height:1 !important;
  font-size:40px;
  transform:translateY(0px);
}
.features-box .fea-content h4{ margin:8px 0 6px 0; text-align:center; }
.features-box .fea-content p{  margin:0; text-align:center; }


/* ---------- FOOTER ICON ALIGNMENT ---------- */
#footer-wrapper .foot-two-box h4{
  display:inline-flex !important;
  align-items:center !important;
  gap:2px;
  line-height:1.2;
}
#footer-wrapper .foot-two-box h4 i{
  display:inline-block;
  line-height:1;
  transform:translateY(0px);
}
#footer-wrapper .social-icons i.fab{
  display:inline-block;
  line-height:1;
  transform:translateY(0px);
}

/* =========================
   DF Base Essentials (ASCII)
   ========================= */

/* Flow container: classic text flow with floats contained */
.df-flow { display: flow-root; }
.df-flow > * { margin: 0; }
.df-flow > * + * { margin-top: var(--flow-gap, 1rem); }

/* Comfortable padding for content boxes */
.df-comfort-pad {
  --pad-inline: 40px;
  --pad-block: 28px;
  padding-inline: var(--pad-inline);
  padding-block: var(--pad-block);
}
@media (max-width: 1024px){
  .df-comfort-pad { --pad-inline: 32px; --pad-block: 24px; }
}
@media (max-width: 640px){
  .df-comfort-pad { --pad-inline: 20px; --pad-block: 20px; }
}


/* ===== DF: text alignment utilities (opt-in) ===== */
.df-justify p,
.justify p,
p.justify{
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
}
@media (max-width: 900px){
  .df-justify p,
  .justify p,
  p.justify{
    hyphens: auto;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}
.df-center p,
.center p,
p.center{
  text-align: center;
  text-align-last: center;
}
.df-left p,
.left p,
p.left{
  text-align: left;
  text-align-last: auto;
}
.balance-lines{ text-wrap: balance; }

/* Strong center override for headings inside .df-center */
.section-wrapper .df-center h1,
.section-wrapper .df-center h2,
.section-wrapper .df-center h3,
.section-wrapper .df-center h4,
.section-wrapper .df-center h5,
.section-wrapper .df-center h6 {
  text-align: center !important;
}

/* ----------------------------------------------------
   Breadcrumbs – global font size fix (for NavXT)
---------------------------------------------------- */
.breadcrumbs [property="itemListElement"] [property="name"],
.breadcrumbs a.post-root,
.breadcrumbs a.post-root [property="name"],
.breadcrumbs a.post-root.post.post-post [property="name"] {
  font-size: 17px !important;
  line-height: 1.35;
}

/* =======================================================================
   CONSOLIDATED FONT AWESOME LIST SYSTEM (single source of truth) — v2.0
   Place all FA UL rules here; no other fa-ul CSS exists above this block.
   ======================================================================= */

/* ---------- Defaults & resets ---------- */
:root{
  /* global tunables for default fa-ul layout */
  --faul-icon-w: 1.6em;        /* width of icon column */
  --faul-gap: 10px;            /* space between icon and text */
  --faul-leading: 1.35;        /* line-height for items */
  --faul-row-gap: 10px;        /* vertical space between items */
  --faul-color: var(--brand-cyan, #00ccff);
  --faul-color-hover: #0077aa;
}

ul.fa-ul,
.fa-ul{
  list-style: none !important;
  margin: 0 0 0 0.20in;        /* classic indent */
  padding: 0;
  text-align: left;
}

.fa-ul > li{
  position: relative;
  line-height: var(--faul-leading);
  margin: var(--faul-row-gap) 0;
  padding-left: calc(var(--faul-icon-w) + var(--faul-gap));
  text-align: left;
}

/* Icon cell — absolute so text never shifts on hover */
.fa-ul .fa-li{
  position: absolute;
  left: 0;
  width: var(--faul-icon-w);
  text-align: center;
  line-height: 1;
  pointer-events: none; /* keep clicks on the content */
}

/* Icon glyph: cyan at rest, darker on hover */
.fa-ul .fa-li > i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.1em;          /* stable box to avoid baseline drift */
  color: var(--faul-color) !important;
  transition: color .25s ease;
}
.fa-ul li:hover .fa-li > i{ color: var(--faul-color-hover) !important; }

/* Links inside bullets inherit color rules cleanly */
.fa-ul li a{ line-height: inherit; text-decoration: none; }

/* ---------- Inside/baseline variant (no absolute positioning) ----------
   Usage: <ul class="fa-ul df-inside df-baseline"> */
.fa-ul.df-inside.df-baseline > li{
  display: flex;
  align-items: baseline;
  gap: var(--faul-gap);
  margin: 0 0 var(--faul-row-gap) 0;
  padding-left: 0;
}
.fa-ul.df-inside.df-baseline > li > .fa-li{
  position: static;
  flex: 0 0 var(--faul-icon-w);
  width: var(--faul-icon-w);
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 0;
  line-height: 1;
  pointer-events: none;
}
.fa-ul.df-inside.df-baseline > li > .fa-li > i{
  font-size: 1.05em;
  transform: translateY(0);    /* no jumping */
  color: var(--faul-color) !important;
  transition: color .25s ease;
}
.fa-ul.df-inside.df-baseline > li:hover > .fa-li > i{
  color: var(--faul-color-hover) !important;
}

/* Mobile safeguard: let long answers wrap sanely in tight spaces */
@media (max-width: 900px){
  .fa-ul.df-inside.df-baseline li{ display: block; }
  .fa-ul.df-inside.df-baseline .fa-li{ position: relative; top: .22em; }
}

/* ---------- FAQ variant (Q on row1, A on row2) ---------- */
.fa-ul.df-faq{
  --faq-icon-w: 2.2em;
  --faq-col-gap: 0.4rem;
  --faq-row-gap: 0.4rem;
  --faq-item-gap: 12px;
  margin: 0;
  padding: 0;
}
.fa-ul.df-faq > li{
  list-style: none;
  position: relative;
  margin: var(--faq-item-gap) 0 !important;
  line-height: 1.4;
  padding-left: var(--faq-icon-w);
}
.fa-ul.df-faq .fa-li{
  position: absolute;
  left: 0;
  top: .15em;
  width: var(--faq-icon-w);
  text-align: center;
}
.fa-ul.df-faq .q{ display: block; font-weight: 700; margin-bottom: 4px; }
.fa-ul.df-faq .a{ display: block; }

/* ---------- Section color integrations ---------- */
.section-wrapper .fa-ul .fa-li > i{
  color: var(--brand-cyan, #00ccff) !important;
}
.section-wrapper .fa-ul li:hover .fa-li > i{
  color: #0077aa !important;
}
.section-wrapper.gray .fa-ul .fa-li > i{
  color: var(--brand-cyan-dark, #0077aa) !important;
}
.section-wrapper.gray .fa-ul li:hover .fa-li > i{
  color: var(--brand-cyan-dark-2, #006699) !important;
}

/* ---------- Offset helpers (nudge whole list left/right) ---------- */
.fa-ul.df-inside{ margin-left: var(--df-list-offset, 0); }
.df-list-left-05in { --df-list-offset: -0.5in; }
.df-list-left-10   { --df-list-offset: -10px; }
.df-list-left-14   { --df-list-offset: -14px; }
.df-list-left-20   { --df-list-offset: -20px; }
.df-list-left-24   { --df-list-offset: -24px; }
.df-list-left-40   { --df-list-offset: -40px; }
.df-list-right-10  { --df-list-offset: 10px; }
.df-list-right-12  { --df-list-offset: 12px; }
.df-list-right-14  { --df-list-offset: 14px; }
.df-list-right-20  { --df-list-offset: 20px; }
@media (max-width: 900px){
  .fa-ul.df-inside{ margin-left: 0; }
}

/* ---------- Component-specific tweaks preserved (migrated here) ---------- */
.custom-service-grid .fa-ul{ margin: .5em 0 0 0; padding-left: 1.8em; }
.custom-service-grid .fa-ul .fa-li{ width: 1.2em; }
.custom-service-grid .fa-ul li{ margin-bottom: .4em; }

/* End consolidated FA list system */

/* =======================================================================
   FA UL FINAL OVERRIDES — color + baseline, all contexts (Our Services, FAQs, Posts)
   Version: base.css v2.4
   ======================================================================= */

/* One knob for vertical alignment (positive = DOWN, negative = UP) */
:root{
  --faul-nudge-y: 0.10em;   /* try 0.12–0.18em to taste */
}

/* 0) Kill default markers so black dots never appear */
.fa-ul, .section-wrapper .fa-ul{ list-style: none !important; }
.fa-ul > li{ list-style: none !important; background: none !important; }
.fa-ul > li::marker{ content: "" !important; }
.fa-ul > li::before{ content: none !important; }

/* 1) STANDARD FA-UL PATTERN  <li><span class="fa-li"><i …></i></span>Text…  */
.fa-ul .fa-li{
  position: absolute;
  left: 0;
  width: var(--faul-icon-w, 1.6em);
  text-align: center;
  line-height: 1;
  pointer-events: none;
}
.fa-ul .fa-li > i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.1em;
  transform: translateY(var(--faul-nudge-y));
  color: var(--brand-cyan, #00ccff) !important;   /* CYAN at rest — force in ALL scopes */
  transition: color .25s ease;
}

/* 2) NAKED PATTERN used on posts  <li><i …></i>Text… */
.fa-ul > li > i[class*="fa-"]{
  position: absolute;
  left: 0;
  width: var(--faul-icon-w, 1.6em);
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.1em;
  transform: translateY(var(--faul-nudge-y));
  color: var(--brand-cyan, #00ccff) !important;   /* CYAN at rest */
  pointer-events: none;
  transition: color .25s ease;
}

/* 3) Hover color (applies to BOTH patterns) */
.fa-ul li:hover .fa-li > i,
.fa-ul > li:hover > i[class*="fa-"]{
  color: #0077aa !important;                         /* darker teal/blue on hover */
}

/* 4) Context fixes that were forcing dark teal at rest — beat them explicitly */
.section-wrapper.gray .fa-ul .fa-li > i,
.section-wrapper.gray .fa-ul > li > i[class*="fa-"],
.infobox2 .fa-ul .fa-li > i,
.infobox .fa-ul .fa-li > i{
  color: var(--brand-cyan, #00ccff) !important;      /* keep CYAN at rest in gray + infobox2 */
}

/* 5) Optional: if a theme rule colors ALL <i> inside gray/infobox,
      this guard keeps our bullets on-brand without touching other icons */
.section-wrapper.gray .fa-ul li:hover .fa-li > i,
.section-wrapper.gray .fa-ul > li:hover > i[class*="fa-"],
.infobox2 .fa-ul li:hover .fa-li > i,
.infobox .fa-ul li:hover .fa-li > i{
  color: #0077aa !important;
}



/* ===== DF Float Precision Lock (v2.3, ASCII only) ===== */
:root{
  /* tune these sitewide if needed */
  --df-float-lock-min: 770px;    /* start of lock band (stays floated) */
  --df-float-lock-max: 1500px;   /* end of lock band */
  --df-float-width:     400px;   /* fixed figure width inside the band */
  --df-float-gap:         28px;  /* fixed text gap inside the band */
}

/* Base floats (desktop defaults) */
.df-float--right,
.df-float--left{
  width: var(--w, var(--df-float-width));   /* inline --w still allowed */
  margin-block: var(--gap-y, 0);
  box-sizing: content-box;
}
.df-float--right{
  float: right;
  margin-left: var(--gap-x, var(--df-float-gap));
  margin-right: 0;
  margin-top: var(--offset-top, 0);
  shape-outside: inset(0 round 12px);
  shape-margin: var(--shape-gap, 12px);
}
.df-float--left{
  float: left;
  margin-right: var(--gap-x, var(--df-float-gap));
  margin-left: 0;
  margin-top: var(--offset-top, 0);
  shape-outside: inset(0 round 12px);
  shape-margin: var(--shape-gap, 12px);
}

/* Wrap helpers (same side gap semantics) */
.df-wrap-right{ margin-left: var(--gap-x, var(--df-float-gap)); margin-right:0; shape-outside: margin-box; shape-margin: var(--shape-gap,12px);}
.df-wrap-left { margin-right: var(--gap-x, var(--df-float-gap)); margin-left:0;  shape-outside: margin-box; shape-margin: var(--shape-gap,12px);}

/* >>> Precision lock band: keep width constant and honor per-figure gap */
@media (min-width: 770px) and (max-width: 1500px){
  .df-float--right,
  .df-float--left{
    width: var(--df-float-width) !important;
  }
  /* Use inline --gap-x if present; else fall back to sitewide --df-float-gap */
  .df-float--right{ margin-left: var(--gap-x, var(--df-float-gap)) !important; }
  .df-float--left { margin-right: var(--gap-x, var(--df-float-gap)) !important; }
  .df-wrap-right  { margin-left: var(--gap-x, var(--df-float-gap)) !important; }
  .df-wrap-left   { margin-right: var(--gap-x, var(--df-float-gap)) !important; }
}

/* Mobile stack (unchanged) */
@media (max-width: 768px){
  .df-float--right,
  .df-float--left{
    float: none;
    margin: 0 auto var(--gap-y, 12px) !important;
    max-width: min(100%, var(--w, var(--df-float-width)));
    shape-outside: none !important;
    shape-margin: 0 !important;
  }
  .df-wrap-right, .df-wrap-left{
    margin-left: 0 !important;
    margin-right: 0 !important;
    shape-outside: none !important;
  }
}

/* Quality-of-life: image box is predictable and never clips shadows */
.df-float--right img,
.df-float--left  img{
  display:block; width:100%; height:auto; max-width:none;
  box-sizing:border-box; overflow:visible;
}

/* === DF: Narrow-view side padding clamp (keeps ~1/4" per side) === */
@media (max-width: 900px){
  /* Override any inline variables by setting the actual property */
  .section-wrapper .df-comfort-pad{
    padding-inline: clamp(12px, 5vw, 24px) !important; /* ~0.125"–0.25" */
  }
}

/* Optional: slightly looser on small tablets (keeps symmetry, not skinny) */
@media (min-width: 901px) and (max-width: 1088px){
  .section-wrapper .df-comfort-pad{
    padding-inline: clamp(20px, 4.5vw, 40px) !important; /* tops out at ~0.55" */
  }
}


/* === DF: Wide-screen balance v2 (keeps image side + proper gap) === */
/* Opt-in on the flow container: .df-balance-wide */
@media (min-width: 1500px){
  .df-balance-wide{
    display: flex;
    align-items: center; 
    /* Use the same spacing you tuned before. Override per-section with --balance-gap */
    gap: var(--balance-gap, var(--gap-x, 46px));
  }

  /* Flatten float behavior only in this mode (don’t affect other screens) */
  .df-balance-wide .df-float--left,
  .df-balance-wide .df-float--right{
    float: none !important;
    margin: 0 !important;
    shape-outside: none !important;
    shape-margin: 0 !important;
    width: var(--w, 400px) !important;
    flex: 0 0 auto;
  }

  /* Text column flexes to fill remaining width */
  .df-balance-wide .df-text{
    flex: 1 1 0;
    min-width: 0;
  }

  /* Preserve side: 
     - If the figure has df-float--left, keep it on the LEFT (image left | text right)
     - If the figure has df-float--right, keep it on the RIGHT (text left | image right) */
  .df-balance-wide .df-float--left  { order: 0; }
  .df-balance-wide .df-text         { order: 1; }
  .df-balance-wide .df-float--right { order: 2; } /* pushes image to the right */
}

/* Footer phone link look */
.foot-two-box a.tel{
  color: inherit;
  text-decoration: none;     /* no underline */
  font-weight: 400;          /* normal weight */
  transition: color .2s ease, font-weight .2s ease;
  cursor: pointer;
}

.foot-two-box a.tel:hover,
.foot-two-box a.tel:focus-visible{
  text-decoration: none;     /* keep underline off */
  font-weight: 700;          /* bold on hover/focus */
  color: #00ccff;            /* optional: cyan on hover; remove if you want same color */
}

/* (Optional) active tap feedback */
.foot-two-box a.tel:active{
  font-weight: 700;
  opacity: .9;
}

/* Accent styling for FAQ cross-links */
.section-wrapper a[href*="/faq/"] {
  color: #00ccff;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.section-wrapper a[href*="/faq/"]:hover {
  text-decoration: underline;
  color: #00e0ff; /* subtle lighter tint */
}

.section-wrapper a[href*="/faq/"]::after {
  content: " \f0c1"; /* Font Awesome chain-link icon */
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  margin-left: 4px;
  font-size: 0.8em;
  opacity: 0.8;
}
.section-wrapper a[href*="/faq/"]:hover::after {
  opacity: 1;
}

/* --- Mobile fix: keep first FAQ bullet from sliding up next to the image --- */
@media (max-width: 768px){
  /* Ensure the text column starts below the image stack */
  .df-flow .df-text{ clear: both; }

  /* Extra safety if a list is the first child */
  .df-flow .df-text > .fa-ul:first-child{ clear: both; }

  /* Gentle spacing so the first bullet never kisses the image edge */
  .df-flow .df-text > .fa-ul.df-faq:first-child{ margin-top: 12px; }
}