/* =========================================================
   CONVERRA INDUSTRIES — CORE STYLESHEET
   Design system: industrial precision / blueprint engineering
   ========================================================= */

/* -------------------- CSS VARIABLES -------------------- */
:root{
  /* Brand palette */
  --navy: #0B1F3A;
  --navy-2: #0E274A;
  --industrial-blue: #1261A0;
  --electric-blue: #1E88E5;
  --orange: #F58220;
  --orange-dark: #D96A0E;
  --steel: #5F6B7A;
  --light-grey: #F4F7FA;
  --white: #FFFFFF;
  --charcoal: #1A1F26;

  --border-hairline: rgba(15,31,58,0.10);
  --border-hairline-dark: rgba(255,255,255,0.12);

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* Type scale */
  --fs-display: clamp(2.4rem, 4vw + 1rem, 4.2rem);
  --fs-h1: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-h2: clamp(1.6rem, 2vw + 1rem, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.8rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5.5rem;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 2px 10px rgba(11,31,58,0.06);
  --shadow-md: 0 10px 30px rgba(11,31,58,0.10);
  --shadow-lg: 0 20px 50px rgba(11,31,58,0.16);
  --container: 1240px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

/* -------------------- RESET --------------------
   FIX (global overflow): html now also clips horizontal overflow — previously only body
   had overflow-x:hidden, which does not stop overflow caused by elements that escape the
   body's own containing block on some browsers (notably older Safari/iOS). Belt-and-braces.
------------------------------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
img,picture,svg,video,canvas{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea,select{font-family:inherit;font-size:inherit;max-width:100%;}
h1,h2,h3,h4{
  font-family: var(--font-heading);
  color: var(--navy);
  line-height:1.2;
  font-weight:600;
  overflow-wrap: break-word;
}
h1{font-size:var(--fs-h1);font-weight:700;}
h2{font-size:var(--fs-h2);font-weight:700;}
h3{font-size:var(--fs-h3);font-weight:600;}
p{color:var(--steel);overflow-wrap:break-word;}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

/* -------------------- SKIP LINK (accessibility fix) -------------------- */
.skip-link{
  position:absolute;
  left:-999px;top:auto;
  width:1px;height:1px;overflow:hidden;
  background:var(--orange);color:var(--white);
  padding:.75rem 1.25rem;border-radius:var(--radius);
  font-family:var(--font-heading);font-weight:600;font-size:0.9rem;
  z-index:2000;
}
.skip-link:focus{
  left:1rem;top:1rem;width:auto;height:auto;overflow:visible;
}

/* -------------------- UTILITIES -------------------- */
.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem;}
.section{padding:var(--space-xl) 0;}
.section-tight{padding:var(--space-lg) 0;}
.section-dark{background:var(--navy);color:var(--white);}
.section-dark h2, .section-dark h3, .section-dark p{color:var(--white);}
.section-dark p{color:rgba(255,255,255,0.72);}
.section-grey{background:var(--light-grey);}
.text-center{text-align:center;}
.mt-sm{margin-top:var(--space-sm);}
.mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);}
.mb-sm{margin-bottom:var(--space-sm);}
.mb-md{margin-bottom:var(--space-md);}
.mb-lg{margin-bottom:var(--space-lg);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.grid{display:grid;gap:var(--space-md);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.flex{display:flex;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.gap-sm{gap:var(--space-sm);}
.gap-md{gap:var(--space-md);}

/* -------------------- SECTION HEADERS / EYEBROW (SIGNATURE) --------------------
   Mono-font "spec tag" eyebrow — reads like a blueprint callout code.
------------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--space-sm);
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--orange);
  display:inline-block;
}
.section-dark .eyebrow{color:var(--orange);}
.section-header{max-width:680px;margin-bottom:var(--space-lg);}
.section-header.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-header p{margin-top:var(--space-sm);font-size:1.05rem;}

/* -------------------- WIRE-TRACE DIVIDER (SIGNATURE) --------------------
   A schematic circuit-trace line used between major sections
----------------------------------------------------------------------- */
.wire-divider{
  width:100%;
  height:34px;
  display:block;
  color: var(--border-hairline);
}
.section-dark + .wire-divider, .wire-divider.on-dark{color:var(--border-hairline-dark);}

/* -------------------- BUTTONS -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: 0.9rem 1.9rem;
  font-family: var(--font-heading);
  font-weight:600;
  font-size: 0.95rem;
  border-radius: var(--radius);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space:nowrap;
}
.btn-primary{
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(245,130,32,0.28);
}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);}
.btn-secondary{
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-secondary:hover{background:rgba(255,255,255,0.12);border-color:var(--white);}
.btn-outline-navy{
  background:transparent;
  color:var(--navy);
  border:1.5px solid var(--navy);
}
.btn-outline-navy:hover{background:var(--navy);color:var(--white);}
.btn-block{width:100%;}
.btn-sm{padding:0.6rem 1.2rem;font-size:0.85rem;min-height:44px;}

/* -------------------- HEADER / NAV -------------------- */
.top-bar{
  background: var(--charcoal);
  color: rgba(255,255,255,0.75);
  font-size: 0.82rem;
}
.top-bar .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:.5rem;padding-bottom:.5rem;
}
.top-bar a{color:rgba(255,255,255,0.85);}
.top-bar .top-bar-links{display:flex;gap:1.5rem;}
.top-bar .top-bar-links span{color:var(--orange);margin-right:.35rem;}

.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--border-hairline);
  position: sticky;
  top:0;
  z-index: 500;
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled{box-shadow: var(--shadow-sm);}
/* FIX (nav overflow root cause): the header was sharing the same 1240/1320px container as page
   content, but 8 top-level nav items + 2 dropdowns + logo + phone + CTA button genuinely don't
   fit in that width — the browser was shrinking flex items below their content size, which is
   what forced the link text (and the dropdown caret) to wrap onto a second line. The header
   gets a wider inner container than the content sections below it; this is a deliberate,
   common pattern (nav bars often run wider than body copy) rather than a hack. */
.site-header .container{
  max-width: 1400px;
  display:flex;align-items:center;justify-content:space-between;
  padding-top:1rem;padding-bottom:1rem;
  gap: 1rem;
}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--font-heading);flex-shrink:0;}
.brand-mark{
  width:42px;height:42px;border-radius:6px;
  background: linear-gradient(135deg, var(--navy), var(--industrial-blue));
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-weight:700;font-size:1.1rem;
  flex-shrink:0;
}
/* Real logo image mark (replaces the old "CI" placeholder square) */
.brand-mark-img{
  width:44px;height:44px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:0;
  background:none;
}
.brand-text{line-height:1.15;}
.brand-text strong{display:block;color:var(--navy);font-size:1.12rem;letter-spacing:.02em;white-space:nowrap;}
.brand-text span{display:block;color:var(--steel);font-family:var(--font-mono);font-size:0.68rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}

.main-nav{display:flex;align-items:center;gap:1.5rem;min-width:0;}
.nav-list{display:flex;align-items:center;gap:1.3rem;flex-wrap:nowrap;}
.nav-list > li{position:relative;flex-shrink:0;}
.nav-list > li > a{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:0.92rem;
  color: var(--navy);
  padding: .5rem 0;
  position:relative;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
}
.nav-list > li > a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--orange);transition:width var(--transition);
}
.nav-list > li > a:hover::after, .nav-list > li.active > a::after{width:100%;}
.nav-list > li.active > a{color:var(--industrial-blue);}
/* FIX: caret is now a real inline element (see shared.py) rather than a ::before pseudo —
   pseudo-content could wrap onto its own line independently of the link text when the flex
   item was squeezed, which is what caused the "floating caret above the word" glitch. */
.dd-caret{
  display:inline-block;
  margin-left:.35rem;
  font-size:.65em;
  color:var(--steel);
  flex-shrink:0;
}
.dropdown{
  position:absolute;top:100%;left:0;
  background:var(--white);
  box-shadow:var(--shadow-md);
  border-top:2px solid var(--orange);
  min-width:240px;
  padding:.6rem 0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index:600;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}
.dropdown a{display:block;padding:.55rem 1.2rem;font-size:.9rem;color:var(--charcoal);}
.dropdown a:hover{background:var(--light-grey);color:var(--industrial-blue);}
.nav-cta{display:flex;align-items:center;gap:1rem;flex-shrink:0;}
.menu-toggle{
  display:none;flex-direction:column;gap:5px;
  width:44px;height:44px;align-items:center;justify-content:center;
  flex-shrink:0;
}
.menu-toggle span{height:2px;width:22px;background:var(--navy);border-radius:2px;transition:var(--transition);}

/* FIX (dropdown viewport clipping): main.js adds .dropdown-align-right to any .has-dropdown
   whose panel would overflow the right edge of the viewport; this flips it to hang from the
   right edge of the trigger instead of the left. */
.has-dropdown.dropdown-align-right .dropdown{left:auto;right:0;}

/* -------------------- MOBILE OFF-CANVAS NAV (FIX) --------------------
   Rebuilt as a proper slide-in panel: fixed off-canvas panel + dimmed overlay, rather than an
   inline dropdown pushed under the header. Base (desktop) styles below are inert until the
   tablet/mobile breakpoint in responsive.css activates the off-canvas positioning. */
.nav-overlay{
  position:fixed;inset:0;
  background:rgba(11,31,58,0.55);
  opacity:0;visibility:hidden;
  transition:opacity var(--transition), visibility var(--transition);
  z-index:498;
}
.main-nav.open + .nav-overlay{opacity:1;visibility:visible;}
.mobile-nav-cta{display:none;}

/* -------------------- BREADCRUMB -------------------- */
.breadcrumb-bar{background:var(--light-grey);border-bottom:1px solid var(--border-hairline);}
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  font-family:var(--font-mono);font-size:0.78rem;color:var(--steel);
  padding: .85rem 0;
}
.breadcrumb a{color:var(--industrial-blue);}
.breadcrumb .sep{color:var(--steel);opacity:.5;}
.breadcrumb .current{color:var(--orange);}

/* -------------------- PAGE HERO (interior pages) -------------------- */
.page-hero{
  background: var(--navy);
  background-image:
    radial-gradient(circle at 85% 20%, rgba(30,136,229,0.35), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 42px);
  color:var(--white);
  padding: var(--space-xl) 0 var(--space-lg);
  position:relative;
}
.page-hero h1{color:var(--white);max-width:820px;}
.page-hero p{color:rgba(255,255,255,0.75);max-width:640px;margin-top:var(--space-sm);font-size:1.05rem;}

/* -------------------- HOME HERO -------------------- */
.hero{
  position:relative;
  background: var(--navy);
  background-image:
    radial-gradient(circle at 80% 10%, rgba(30,136,229,0.4), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(245,130,32,0.16), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 46px);
  color:var(--white);
  padding-top: 5rem;
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  align-items:center;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}
.hero-tag{
  font-family:var(--font-mono);
  font-size:0.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid rgba(245,130,32,0.4);
  padding:.4rem .85rem;
  border-radius:100px;
  margin-bottom:var(--space-md);
}
.hero h1{
  font-size:var(--fs-display);
  color:var(--white);
  margin-bottom:var(--space-md);
}
.hero p.lead{
  color:rgba(255,255,255,0.78);
  font-size:1.12rem;
  max-width:560px;
  margin-bottom:var(--space-lg);
}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-visual{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:visible;
}
.hero-visual .frame{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.15);
}
.hero-visual img{width:100%;height:420px;object-fit:cover;}
.hero-visual .spec-tag{
  position:absolute;
  background:rgba(11,31,58,0.92);
  border:1px solid rgba(255,255,255,0.2);
  color:var(--white);
  font-family:var(--font-mono);
  font-size:0.72rem;
  padding:.5rem .75rem;
  border-radius:4px;
  display:flex;align-items:center;gap:.5rem;
  backdrop-filter:blur(6px);
}
.hero-visual .spec-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);}
.hero-visual .spec-tag.tag-1{top:-16px;left:-16px;}
.hero-visual .spec-tag.tag-2{bottom:-16px;right:-16px;}

/* Trust strip */
.trust-strip{background:var(--charcoal);border-top:1px solid rgba(255,255,255,0.08);}
.trust-strip ul{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding: 1.3rem 0;
}
.trust-strip li{
  display:flex;align-items:center;gap:.6rem;
  color: rgba(255,255,255,0.85);
  font-family:var(--font-heading);font-weight:500;font-size:0.9rem;
}
.trust-strip li::before{content:"";width:8px;height:8px;background:var(--orange);flex-shrink:0;}

/* -------------------- IMAGE FRAME W/ CORNER BRACKETS (SIGNATURE) --------------------
   Blueprint style corner marks on imagery to reinforce "technical drawing" feel.
------------------------------------------------------------------------------------ */
.blueprint-frame{
  position:relative;
  display:block;
  border-radius: var(--radius);
  overflow:hidden;
}
.blueprint-frame img{width:100%;height:100%;object-fit:cover;}
.blueprint-frame::before,
.blueprint-frame::after{
  content:"";
  position:absolute;
  width:22px;height:22px;
  border-color: var(--orange);
  border-style:solid;
  z-index:2;
  pointer-events:none;
}
.blueprint-frame::before{top:8px;left:8px;border-width:2px 0 0 2px;}
.blueprint-frame::after{bottom:8px;right:8px;border-width:0 2px 2px 0;}

/* -------------------- CARDS -------------------- */
/* FIX (card grid): cards are now flex columns with the body stretching to fill the grid
   row height, so cards with shorter/longer copy stay the same height and the "Learn More"
   link is pinned to the bottom of every card instead of floating at different depths. */
.card{
  background:var(--white);
  border:1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.card .card-media{height:210px;position:relative;flex-shrink:0;}
.card .card-body{padding: 1.5rem;display:flex;flex-direction:column;flex:1;}
.card .card-body h3{margin-bottom:.6rem;overflow-wrap:break-word;}
.card .card-body p{font-size:0.93rem;margin-bottom:1.1rem;flex:1;}
.card .card-link{
  font-family:var(--font-heading);font-weight:600;font-size:0.88rem;
  color:var(--industrial-blue);display:inline-flex;align-items:center;gap:.4rem;
  margin-top:auto;
}
.card .card-link::after{content:"→";transition:transform var(--transition);}
.card:hover .card-link::after{transform:translateX(4px);}
.card-icon{
  width:52px;height:52px;border-radius:8px;
  background: var(--light-grey);
  display:flex;align-items:center;justify-content:center;
  color:var(--industrial-blue);font-size:1.4rem;
  margin-bottom:1rem;
}

/* Product/category grid variant.
   FIX: switched to minmax(0,1fr) tracks — a plain 1fr track can still overflow when a grid
   item contains long unbreakable content (e.g. a long product name), because 1fr's implicit
   minimum is auto, not 0. minmax(0,1fr) removes that implicit minimum and was the root cause
   of intermittent horizontal scroll on some product/blog cards. align-items:stretch is now
   explicit so every .card in a row matches the tallest card. */
.products-grid, .cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md);align-items:stretch;}
.cards-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cards-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}

/* -------------------- ICON TILES (industries / capabilities) -------------------- */
.tile{
  background:var(--white);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius);
  padding: 1.5rem 1.25rem;
  text-align:center;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.tile:hover{box-shadow:var(--shadow-sm);transform:translateY(-4px);border-color:var(--electric-blue);}
.tile .tile-icon{
  width:56px;height:56px;margin:0 auto .9rem;
  border-radius:50%;
  background: var(--light-grey);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:var(--orange);
}
.tile h4{font-size:0.98rem;color:var(--navy);}
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-sm);}

/* -------------------- PROCESS TIMELINE -------------------- */
.timeline{position:relative;padding-left: 2.5rem;}
.timeline::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background: repeating-linear-gradient(180deg, var(--electric-blue) 0 6px, transparent 6px 12px);
}
.timeline-step{position:relative;padding-bottom:2.1rem;}
.timeline-step:last-child{padding-bottom:0;}
.timeline-step::before{
  content:"";position:absolute;left:-2.5rem;top:2px;
  width:24px;height:24px;border-radius:50%;
  background:var(--white);border:2px solid var(--electric-blue);
}
.timeline-step .step-code{
  font-family:var(--font-mono);font-size:0.75rem;color:var(--orange);letter-spacing:.08em;
}
.timeline-step h4{margin:.25rem 0 .35rem;color:var(--navy);}
.timeline-step p{font-size:0.92rem;}

/* -------------------- WHY CHOOSE US LIST -------------------- */
.reason-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;}
.reason-item{display:flex;gap:.9rem;align-items:flex-start;}
.reason-item .check{
  width:26px;height:26px;border-radius:50%;background:var(--orange);
  color:var(--white);flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:0.8rem;font-weight:700;margin-top:.15rem;
}
.reason-item h4{font-size:0.98rem;margin-bottom:.15rem;color:var(--navy);}
.reason-item p{font-size:0.88rem;margin:0;}

/* -------------------- QUALITY GRID -------------------- */
.quality-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
.quality-item{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--white);border:1px solid var(--border-hairline);
  padding:1.25rem;border-radius:var(--radius);
}
.quality-item .num{font-family:var(--font-mono);color:var(--orange);font-weight:700;}
.quality-statement{
  border-left:3px solid var(--orange);
  padding: 1.25rem 1.75rem;
  background: var(--light-grey);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--navy);
  font-weight: 500;
}

/* -------------------- TESTIMONIALS -------------------- */
.testimonial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md);}
.testimonial{
  background:var(--white);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  padding: 1.75rem;
}
.testimonial .quote-mark{font-family:var(--font-heading);font-size:2.5rem;color:var(--orange);line-height:1;}
.testimonial p.quote{color:var(--charcoal);font-size:0.98rem;margin:.75rem 0 1.25rem;}
.testimonial .person{display:flex;align-items:center;gap:.8rem;}
.testimonial .avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--industrial-blue));
  color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;
}
.testimonial .person strong{display:block;font-size:0.9rem;color:var(--navy);}
.testimonial .person span{font-size:0.78rem;color:var(--steel);}

/* -------------------- CTA BANNER -------------------- */
.cta-banner{
  background: linear-gradient(120deg, var(--navy), var(--navy-2) 60%, var(--industrial-blue));
  color:var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cta-banner::after{
  content:"";position:absolute;inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 22px);
  pointer-events:none;
}
.cta-banner h2{color:var(--white);margin-bottom:.5rem;}
.cta-banner p{color:rgba(255,255,255,0.8);max-width:520px;}
.cta-banner .cta-actions{display:flex;gap:1rem;flex-wrap:wrap;position:relative;z-index:1;}
.cta-banner .cta-copy{position:relative;z-index:1;}

/* -------------------- FORMS -------------------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;}
.form-group{display:flex;flex-direction:column;gap:.4rem;}
.form-group.full{grid-column:1/-1;}
.form-group label{font-size:0.85rem;font-weight:600;color:var(--navy);font-family:var(--font-heading);}
.form-group .req{color:var(--orange);}
.form-group input,
.form-group select,
.form-group textarea{
  padding:.85rem 1rem;
  border:1.5px solid var(--border-hairline);
  border-radius:var(--radius);
  background:var(--white);
  color:var(--charcoal);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--electric-blue);
  box-shadow:0 0 0 4px rgba(30,136,229,0.12);
  outline:none;
}
.form-group textarea{resize:vertical;min-height:120px;}
.form-group.file-upload{
  border:1.5px dashed var(--border-hairline);
  border-radius:var(--radius);
  padding:1.5rem;text-align:center;
  cursor:pointer;
  background:var(--light-grey);
}
.form-group .field-error{color:#C0392B;font-size:0.78rem;display:none;}
.form-group.error input,
.form-group.error select,
.form-group.error textarea{border-color:#C0392B;}
.form-group.error .field-error{display:block;}
.form-note{font-size:0.8rem;color:var(--steel);margin-top:.5rem;}
.form-success{
  display:none;
  background:#EAF7EE;border:1px solid #B7E4C2;color:#1F7A37;
  padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1.25rem;
  font-size:0.92rem;
}
.form-success.show{display:block;}
.contact-panel{
  background:var(--navy);color:var(--white);border-radius:var(--radius-lg);
  padding:2rem;
}
.contact-panel h3{color:var(--white);}
.contact-panel .info-row{display:flex;gap:.9rem;margin-top:1.25rem;align-items:flex-start;}
.contact-panel .info-row .icon{color:var(--orange);font-family:var(--font-mono);}
.contact-panel .info-row p{color:rgba(255,255,255,0.8);font-size:0.92rem;margin:0;}
.contact-panel .info-row strong{display:block;color:var(--white);font-size:0.9rem;margin-bottom:.15rem;}

/* -------------------- FAQ ACCORDION -------------------- */
.accordion{border-top:1px solid var(--border-hairline);}
.accordion-item{border-bottom:1px solid var(--border-hairline);}
.accordion-question{
  width:100%;text-align:left;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding: 1.25rem 0;
  font-family:var(--font-heading);font-weight:600;color:var(--navy);font-size:1rem;
}
.accordion-question .icon{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--electric-blue);color:var(--electric-blue);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.accordion-item.open .accordion-question .icon{
  transform:rotate(45deg);background:var(--electric-blue);color:var(--white);
}
.accordion-answer{
  max-height:0;overflow:hidden;
  transition: max-height 320ms ease;
}
.accordion-answer p{padding-bottom:1.25rem;font-size:0.95rem;}

/* -------------------- GALLERY -------------------- */
.gallery-filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--space-md);}
.filter-btn{
  padding:.55rem 1.1rem;border:1.5px solid var(--border-hairline);
  border-radius:100px;font-size:0.85rem;font-family:var(--font-heading);font-weight:500;
  color:var(--navy);transition: var(--transition);
}
.filter-btn.active, .filter-btn:hover{background:var(--navy);color:var(--white);border-color:var(--navy);}
.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}
.gallery-item{
  position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  aspect-ratio: 4/3;
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 400ms ease;}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item .overlay{
  position:absolute;inset:0;background:linear-gradient(0deg, rgba(11,31,58,0.85), transparent 60%);
  display:flex;align-items:flex-end;padding:.9rem;opacity:0;transition:opacity var(--transition);
}
.gallery-item:hover .overlay{opacity:1;}
.gallery-item .overlay span{color:var(--white);font-size:0.85rem;font-family:var(--font-heading);font-weight:600;}
.gallery-item.hide{display:none;}
.lightbox{
  position:fixed;inset:0;background:rgba(11,31,58,0.95);
  display:none;align-items:center;justify-content:center;z-index:2000;padding:2rem;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw;max-height:85vh;max-height:85dvh;border-radius:var(--radius);}
.lightbox-close{
  position:absolute;top:1.5rem;right:1.5rem;color:var(--white);font-size:2rem;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.3);
  display:flex;align-items:center;justify-content:center;
}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--white);font-size:2rem;padding:1rem;}
.lightbox-prev{left:1rem;}
.lightbox-next{right:1rem;}

/* -------------------- BLOG -------------------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);}
.blog-card .card-media{height:190px;}
.blog-meta{display:flex;gap:1rem;font-family:var(--font-mono);font-size:0.72rem;color:var(--steel);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.06em;}
.blog-detail-body h2{margin-top:2rem;margin-bottom:1rem;}
.blog-detail-body p{margin-bottom:1.1rem;}
.blog-detail-body ul{margin:0 0 1.1rem 1.2rem;list-style:disc;color:var(--steel);}
.blog-author{
  display:flex;gap:1rem;align-items:center;padding:1.5rem;background:var(--light-grey);
  border-radius:var(--radius);margin:2rem 0;
}
.blog-sidebar .widget{margin-bottom:2rem;}
.blog-sidebar .widget h4{margin-bottom:1rem;border-bottom:2px solid var(--orange);padding-bottom:.5rem;display:inline-block;}
.related-post{display:flex;gap:.9rem;margin-bottom:1rem;align-items:center;}
.related-post img{width:64px;height:64px;object-fit:cover;border-radius:4px;flex-shrink:0;}
.related-post span{font-size:0.85rem;font-weight:600;color:var(--navy);font-family:var(--font-heading);}

/* -------------------- STATS / COUNTERS -------------------- */
.stats-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;}
.stat{text-align:center;}
.stat .num{
  font-family:var(--font-heading);font-weight:700;font-size:2.4rem;color:var(--orange);
  display:flex;align-items:baseline;justify-content:center;gap:.2rem;
}
.stat .label{font-size:0.85rem;color:var(--steel);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono);}
.section-dark .stat .label{color:rgba(255,255,255,0.65);}

/* -------------------- FOOTER -------------------- */
.site-footer{background:var(--charcoal);color:rgba(255,255,255,0.7);}
.footer-top{padding: var(--space-xl) 0 var(--space-lg);}
.footer-grid{display:grid;grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-lg);}
.footer-brand .brand-text strong{color:var(--white);}
.footer-brand .brand-text span{color:rgba(255,255,255,0.55);}
.footer-about{font-size:0.88rem;margin-top:1rem;color:rgba(255,255,255,0.6);}
.footer-social{display:flex;gap:.7rem;margin-top:1.3rem;}
.footer-social a{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;font-size:0.85rem;color:var(--white);
  transition:var(--transition);
}
.footer-social a:hover{background:var(--orange);border-color:var(--orange);}
.footer-col h4{color:var(--white);font-size:0.95rem;margin-bottom:1.2rem;font-family:var(--font-heading);}
.footer-col ul li{margin-bottom:.75rem;}
.footer-col a{font-size:0.88rem;color:rgba(255,255,255,0.65);transition:color var(--transition);}
.footer-col a:hover{color:var(--orange);}
.footer-contact li{display:flex;gap:.7rem;font-size:0.85rem;margin-bottom:1rem;align-items:flex-start;}
.footer-contact .icon{color:var(--orange);flex-shrink:0;font-family:var(--font-mono);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding: 1.25rem 0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  font-size:0.82rem;
}
.footer-bottom .legal-links{display:flex;gap:1.4rem;}
.footer-bottom .legal-links a{color:rgba(255,255,255,0.6);}
.footer-bottom .legal-links a:hover{color:var(--orange);}

/* -------------------- FLOATING BUTTONS --------------------
   FIX (overlap bug): back-to-top and the call/WhatsApp/quote fabs previously shared the exact
   same fixed bottom/right coordinates, so they rendered on top of each other. Both now live
   inside one flex column (.floating-stack) with back-to-top first, so normal flow stacks it
   above the fab group with a consistent gap — impossible to overlap at any screen size.
   Touch targets are also bumped to a 44px+ minimum per accessibility guidance. -------------- */
.floating-stack{
  position:fixed;right:1.5rem;bottom:1.5rem;
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;
  z-index:900;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.floating-actions{
  display:flex;flex-direction:column;gap:.75rem;
}
.fab{
  width:54px;height:54px;min-width:44px;min-height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:1.4rem;
  box-shadow:var(--shadow-md);
  transition: transform var(--transition);
}
.fab:hover{transform:scale(1.08);}
.fab-call{background:var(--industrial-blue);}
.fab-whatsapp{background:#25D366;}
.fab-quote{background:var(--orange);}
.back-to-top{
  width:46px;height:46px;min-width:44px;min-height:44px;border-radius:50%;
  background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition: var(--transition);
  box-shadow: var(--shadow-md);
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:not(.show){pointer-events:none;}

/* -------------------- SCROLL PROGRESS -------------------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;background:var(--orange);
  width:0%;z-index:1200;transition:width 80ms linear;
}

/* -------------------- ENQUIRY POPUP -------------------- */
.enquiry-popup{
  position:fixed;inset:0;background:rgba(11,31,58,0.7);
  display:none;align-items:center;justify-content:center;z-index:1500;padding:1.5rem;
}
.enquiry-popup.open{display:flex;}
.enquiry-popup-box{
  background:var(--white);border-radius:var(--radius-lg);
  max-width:460px;width:100%;padding:2rem;position:relative;
  box-shadow:var(--shadow-lg);
}
.enquiry-popup-close{
  position:absolute;top:.6rem;right:.6rem;
  width:44px;height:44px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:var(--steel);border-radius:50%;
  transition:background var(--transition);
}
.enquiry-popup-close:hover{background:var(--light-grey);}

/* -------------------- 404 -------------------- */
.error-page{
  min-height:60vh;min-height:60dvh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding: var(--space-xl) 0;
}
.error-code{
  font-family:var(--font-mono);font-size:6rem;font-weight:700;color:var(--orange);line-height:1;
}

/* -------------------- MISC PAGE COMPONENTS -------------------- */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg);align-items:center;}
.legal-content h2{margin-top:2rem;margin-bottom:.8rem;}
.legal-content p, .legal-content li{margin-bottom:.9rem;color:var(--steel);font-size:0.96rem;}
.legal-content ul{margin-left:1.3rem;list-style:disc;}
.legal-content{max-width:860px;}
.sitemap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
.sitemap-grid h4{margin-bottom:1rem;color:var(--navy);border-bottom:2px solid var(--orange);display:inline-block;padding-bottom:.4rem;}
.sitemap-grid li{margin-bottom:.6rem;font-size:0.92rem;}
.sitemap-grid a{color:var(--steel);}
.sitemap-grid a:hover{color:var(--industrial-blue);}

/* -------------------- REVEAL ANIMATION HOOK -------------------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 650ms ease, transform 650ms ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}