/* =========================================================
   Kanata Fire Protection — Cleaned Core Styles (v2)
   MOBILE-FIRST + MIN-WIDTH ONLY
   - Converts max-width breakpoints to min-width equivalents
   - Removes duplicate/redundant rules (esp. .tile-icon)
   - Normalizes tokens order (wrap/inset now compute correctly)
   - Keeps your existing look/intent, just cleaner and easier to scale
   ========================================================= */

/* -----------------------------
   Fonts
------------------------------ */
@font-face{
  font-family:"kudryashev";
  src:url("/css/fonts/KudryashevHeadlineSans.woff2") format("woff2"),
      url("/css/fonts/KudryashevHeadlineSans.ttf") format("truetype");
  font-display:swap;
}
@font-face{
  font-family:"poppins";
  src:url("/css/fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-display:swap;
}

/* -----------------------------
   Design Tokens (mobile-first defaults)
------------------------------ */
:root{
  /* Layout */
  --max: 1100px;

  /* Small-screen padding should be tighter than desktop */
  --pad: 12px; /* overridden up as screens grow */

  /* Content wrap + inset gutter */
  --wrap: min(var(--max), calc(100% - (var(--pad) * 2)));
  --inset: 8px; /* small screens: no extra inset */

  /* Type scale */
  --h1: clamp(28px, 4vw, 44px);
  --h2: clamp(22px, 3vw, 32px);
  --p:  clamp(16px, 1.4vw, 18px);

  /* UI */
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);

  /* Header height (small-screen default) */
  --header-h: 68px;

  /* Brand-ish colors */
  --red: #991607;
  --navy-dark: #030c33;
  --navy: #33437c;
  --gold: #bfa46c;
  --paper: #f1f1f1;
}

/* Grow the padding scale as the viewport grows */
@media (min-width: 401px){
  :root{
    --header-h: 86px;
    --pad: clamp(16px, 3vw, 28px);
  }
}

/* Restore inset gutters once you have enough horizontal real estate */
@media (min-width: 451px){
  :root{
    --wrap: min(var(--max), calc(100% - (var(--pad) * 2)));
    --inset: calc((100% - var(--wrap)) / 2);
  }
}

/* -----------------------------
   Resets / Base
------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body,h1,h2,h3,h4,p,ul,li,form{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }

body{
  font-family:"Poppins","poppins",Helvetica,Arial,sans-serif;
  font-size:var(--p);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  text-align:center;
  color:#000;
  background:#fff;
}

h1,h2,h3,h4{
  font-family:"Rubik",Helvetica,Arial,sans-serif;
  font-weight:700;
  line-height:1.1;
  font-style:normal;
}
h1{ font-size:var(--h1); line-height:1.15; margin:0 0 12px; }
h2{ font-size:var(--h2); line-height:1.2;  margin:0 0 12px; }
h3{ font-size:1.4em; }

/* Layout utilities */
.container{
  width:min(var(--max), calc(100% - (var(--pad) * 2)));
  margin-inline:auto;
}
.section{ padding-block:clamp(40px, 6vw, 80px); }
.clearfix::after{ content:""; display:table; clear:both; }

/* Simple helpers */
.red{ color:var(--red); }
.dark-navy{ color:var(--navy-dark); }
.light-navy{ color:var(--navy); }
.white{ color:#fff; }
.gold{ color:var(--gold); }
.upper{ text-transform:uppercase; }
.bold{ font-weight:700; }
.underline{
  text-decoration:underline;
  text-underline-position:under;
  text-decoration-thickness:2px;
}
.top-marg{ margin-top:10px; }

.bg-light-navy{ background-color:var(--navy); }
.bg-white{ background-color:#fff; }
.bg-gold{ background-color:var(--gold); }

.poppins-regular-upper{
  text-transform:uppercase;
  text-decoration:none;
  font-size:0.65em;
}
.poppins-regular{ font-size:0.9em; }

/* Buttons */
button{
  background:var(--red);
  color:#fff;
  padding:0.55rem 1rem;
  cursor:pointer;
  font-family:"Poppins","poppins",sans-serif;
  border:none;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
  font-size:1rem;
}

/* -----------------------------
   Header / Navigation
------------------------------ */
header{
  background:rgba(241,241,241,0.92);
  backdrop-filter:blur(8px);
  position:fixed;
  inset:0 0 auto 0;
  min-height:var(--header-h);
  height:auto;
  z-index:1000;
  box-shadow:0 4px 6px rgba(0,0,0,0.1);
}
header .container{
  display:flex;
  align-items: stretch;
  justify-content: space-between;
  container-type: inline-size;
  padding: 5px 0;
}

.nav-toggle{
  width:2.8em;
  height: 2.8em;
  display:grid;
  place-items: center;
  border-radius:0.7em;
}

/* Dim the page when mobile menu is open */
.nav-scrim{
  position:fixed;
  inset: calc(var(--header-h) + 2px) 0 0 0; /* starts below fixed header */
  background:rgba(0,0,0,0.28);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease-in-out;
  z-index:999; /* under menu (1002), above page */
}

/* When open */
.nav-scrim.is-open{
  opacity:1;
  pointer-events:auto;
}

/* Logo (mobile-first: slightly larger + aligned) */
.kfp-logo{
  display:flex;
  padding:0;
  max-width: 400px; /* slightly bigger than your previous 260 */
  margin-top: 5px;
}
.logo{
  width:100%;
  height:auto;
  display:block;
}

.header-icon{ padding:0; margin:0; }
.mobile-envelope{ height:20px; margin-top:6px; }
.header-slogan{ display:none; }

/* Desktop nav hidden by default (mobile-first) */
.lg-nav-menu{ display:none; }

/* Mobile nav wrapper */
.mobile-nav{
   display:flex;
   align-items: flex-end;
}


/* Hamburger */
.hamburger{
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:1.1rem;
  width:1.6rem;
  margin:0;
}
.bar{
  height:2px;
  width:100%;
  background-color:#000;
  border-radius:5px;
}

/* Mobile dropdown menu  */
.nav-menu{
  list-style:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;

  /* Full-width, anchored to header */
  width:100%;
  margin:0;
  background:#f9f9f8; 
padding:0;
border:0;
box-shadow:none;
border-radius:0 0 8px 8px; 

  text-align:left;
  z-index:1002;

  /* collapsed by default (JS height animation still works) */
  height:0;
  overflow:hidden;
  opacity: 1;
transform: translateY(0);
transform-origin: top;

  transition:
    height 260ms ease-out,
    opacity 180ms ease-out,
    transform 180ms ease-out;
}
/* Hidden state (applied AFTER close animation completes) */
.nav-menu.collapsed{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  padding:0;
  border:0;
  box-shadow:none;
}


/* If your JS can toggle a class when open, this is the payoff */
.nav-menu.show-menu,
.nav-menu.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding: 5px 0 10px 0;

border-top:2px solid var(--red);
border-bottom:1px solid rgba(0,0,0,0.10);

box-shadow:
  0 18px 40px rgba(0,0,0,0.12),
  0 1px 0 rgba(0,0,0,0.06);

}

/* Layout + separators */
.nav-menu li{
  margin:0;
  padding:0;
}

/* Subtle dividers without “template borders” */
.nav-menu li + li{
  border-top:1px solid rgba(0,0,0,0.07);
}

.nav-menu li:last-child{ border-bottom:none; }

.nav-menu li a{
  display:flex;
  align-items:center;


  min-height:46px;
 padding:0 18px;

  text-transform:uppercase;
  font-weight:650;
  letter-spacing:0.12em;
  font-size:0.95rem;
  line-height:1.1;

  color:#000;
  text-decoration:none;
}


.nav-menu .nav-phone{
  margin-top:8px;
  padding:12px 20px 4px;

  border-top:1px solid rgba(0,0,0,0.08);

 font-size:0.82rem;
letter-spacing:0.06em;

  color:#333;

  display:flex;
  align-items:center;
  gap:10px;

 opacity:0.85;
}


/* Tap feedback (mobile-first) */
.nav-menu li a:active{
  background:rgba(0,0,0,0.06);
}

/* Keyboard accessibility */
.nav-menu li a:focus-visible{
  outline:2px solid rgba(153,22,7,0.35);
  outline-offset:2px;
}

/* Hover feedback only when hover is real */
@media (hover:hover){
  .nav-menu li a:hover{
    background:rgba(0,0,0,0.045);
    box-shadow:inset 3px 0 0 var(--red);
  }
  .nav-menu li a:hover{
    color:var(--red);
  }
}


/* -----------------------------
   Sections
------------------------------ */
section{ padding:0; clear:both; }
section#About, section#Services{
  margin-bottom:25px;
  margin-top:0;
}

/* Offset first section under fixed header */
#Welcome{
  margin-top:var(--header-h);
}

/* -----------------------------
   Banner / Hero
------------------------------ */
.banner-photo-wrapper{ width:100%; position:relative; }

.banner-photo{
  position:relative;
  background-image:url(../images/extinguisher.jpg);
  overflow:hidden;
  min-height: clamp(320px, 44vh, 520px);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:35% center;
  display:flex;
  flex-direction: column;


  /* tighter padding on tiny screens, scales up via --pad/--inset */
  justify-content: center;
  padding-top: clamp(20px, 4vh, 40px);
  padding-left:calc(var(--inset) + var(--pad));
  padding-right:calc(var(--inset) + var(--pad));
}
  @media (hover: none) and (pointer: coarse){
  .banner-photo{
    padding-bottom: clamp(20px, 6vh, 60px);
  }
}
@media (hover: hover) and (pointer: fine){
  .banner-photo{
   padding-bottom: clamp(40px, 5vh, 55px);
  }
}



.banner-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.58) 58%,
    rgba(0,0,0,.34) 78%,
    rgba(0,0,0,.18) 100%);
}

.kfp-text-inner{
  position:relative;
  width: min(680px, 100%);
  margin:0;
  color:#fff;
  text-align:left;
  z-index:1;
}
.kfp-text-inner h1{
  font-weight:800;
  letter-spacing:0.01em;
  line-height:1.05;
  text-wrap:balance;
  margin:0 0 12px;
}
@media (min-width: 981px){
  .kfp-text-inner h1{
    font-size:clamp(34px, 3vw, 52px);
  }
}

.kfp-text-inner h3{
  border-left:10px solid var(--red);
  font-size:1.9em;
  padding-left:15px;
  padding-bottom:10px;
}
.kfp-text-inner p{
  color:#fff;
  margin-top:16px;
  max-width:52ch;
}

.hero-cred{
  margin-top:14px;
  display:none;
  flex-wrap:wrap;
  align-items:center;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.75);
}
.hero-cred span + span::before{
  content:"•";
  display:inline-block;
  margin:0 10px;
  color:rgba(255,255,255,0.45);
}

.kfp-text-inner .phone{ margin-top:18px; }

.phone-link{
  text-decoration:none;
  color:#fff;
  position:relative;
  margin-left:25px;
  font-weight:600;
}
.phone-link::before{
  position:absolute;
  display:inline-block;
  content:"";
  background-image:url("../images/phone-96-white.png");
  width:20px;
  height:20px;
  left:-25px;
  top:0.1em;
  background-size:contain;
  background-repeat:no-repeat;
}

.kfp-text-inner button{
  position:relative;
  margin-top:22px;
  padding:0.75rem 1.5rem;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
#kfp-text-inner-contact{
   padding: 12px 20px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:0.05em;
  box-shadow:0 10px 22px rgba(0,0,0,0.22);
  transition:transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
#kfp-text-inner-contact:hover{
  transform:translateY(-1px);
  filter:brightness(0.95);
  box-shadow:0 14px 28px rgba(0,0,0,0.26);
}

/* Scale up slightly once you have room */
@media (min-width: 361px){
  #kfp-text-inner-contact{
    padding: 14px 22px;
  }
  .banner-photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.58) 45%,
    rgba(0,0,0,.34) 78%,
    rgba(0,0,0,.18) 100%);
}
}

/* -----------------------------
   Tabs / Cards
------------------------------ */
.tabs-row{
  width:min(var(--wrap), 1100px);
  margin:24px auto 0;
  padding:0 var(--inset);
  display:flex;
  flex-direction:column; /* mobile-first stack */
  gap:16px;
  justify-content:center;
  background:transparent;
  border:0;
  transform:none;
  align-items:stretch;
}
.tile-text-wrapper{
  display:flex;
  flex-direction:column;
  gap:1px
}
@media (min-width: 445px){

}
@media (min-width: 475px){
    .nav-toggle{
    border-radius: 10px;
    background: rgba(0,0,0,0.04);
    justify-content: center;
    margin-right: 8px;
   
      translate: 0 -0.35em;
  }
  .tabs-row{
    flex-direction:row;
    gap: 2%;
    justify-content:start;
    margin:0 auto;
    padding:0;
    overflow:visible;
    transform:translateY(-25px); /* your premium overlap */
  }
  .tabs-row a{ overflow:hidden; }
   .tab-title{
    font-size: 1rem;
    line-height: 1.2;
    min-height: 2.4em;
    opacity: 0.85;
    letter-spacing: 0.1px;
  }
  .tabs-row .tile-sub{
    padding-top: 4px;
    font-size: 0.86rem;
    line-height: 1.35;
    max-width: 28ch;
    margin-inline: auto;
  }
  .inner-tab-1, .inner-tab-2, .inner-tab-3{
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (min-width: 800px){
.tab-title{
    font-size: 1rem;
    line-height: 1.2;
     min-height: 1.2em;
  }
}

@media (min-width: 850px){
  .tabs-row{
    gap:24px;
    width:min(var(--wrap), 1100px);
  }
   .tabs-row a{
  max-width: none; /* let them breathe in true 3-up */
    margin: 0;
   }
}
@media (min-width: 640px) and (max-width: 900px){

}

.tab{
  flex:1 1 0;
  text-align:center;
  background:#fff;
  border-radius:16px;
  padding: 0 5px 5px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position:relative;
  border-top: none;
}
.tab::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:8px;
  border-radius:14px 14px 0 0;
  background:var(--accent);
}
.tab:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(0,0,0,0.10);
}
.tabs-row a{
  text-decoration:none;
  color:#000;
  display:block;
  width:100%;
  max-width: 350px;
  margin: 0 auto;
}

/* Per-card accents */
.tab-1{ --accent:#b08f00; }
.tab-2{ --accent:#8f1b12; }
.tab-3{ --accent:#6f8fa3; }

.inner-tab-1,.inner-tab-2,.inner-tab-3{
  width:100%;
  height:100%;
  padding:1rem 0;
}

.tabs-row .inner-tab-1,
.tabs-row .inner-tab-2,
.tabs-row .inner-tab-3{
  font-weight:600;
  letter-spacing:.2px;
  gap:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 1rem 4px 20px;
  justify-content: start;
}

.tabs-row .tile-sub{
  font-size: 0.85em;
  opacity: 1;
  line-height:1.3;
  max-width:26ch;
  color: #5f5f5f;
}

/* Icon circles */
.yellow-circle-icon,
.red-circle-icon,
.blue-circle-icon{
  width:96px;
  height:96px;
  border-radius:999px;
  display:grid;
  place-items:center;
  margin:14px auto 0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18);
}
.yellow-circle-icon{ background:#b08f00; }
.red-circle-icon{ background:#8f1b12; }
.blue-circle-icon{ background:#6f8fa3; }

/* -----------------------------
   ICON SYSTEM (deduped)
------------------------------ */
.tile-icon{
  display:block;
  width:72%;
  height:72%;
  margin:auto;
  color:#fff; /* enables currentColor inside SVG */
}

/* Default: stroke-only, consistent line look */
.tile-icon *{
  vector-effect: non-scaling-stroke;
  stroke: currentColor;
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Optional: filled silhouette icon */
.tile-icon--fill,
.tile-icon--fill *{
  stroke-width: 3px;
}

/* Optical tweaks per icon */
.yellow-circle-icon .tile-icon{ transform:scale(1.00); width:68%; }
.red-circle-icon .tile-icon{width: 60%;overflow: visible;}
.blue-circle-icon .tile-icon{ transform:scale(1.04); width:74%; height:74%; }

/* -----------------------------
   Content Blocks (existing)
------------------------------ */
.content-header-1{
  text-align:left;
  width:91%;
  margin:10px auto 0;
  line-height:1.9;
  position:relative;
}
.banner-quote{
  color:#fff;
  position:relative;
  padding:0 20px;
  bottom:20px;
}
.content-body{
  width:88%;
  margin:30px auto 0;
  text-align:left;
  position:relative;
  padding-bottom:15px;
}
.content-body h3{
  font-size:1.9em;
  padding:5px 0;
}
.section-title{
  margin:30px auto 0;
  width:85%;
  text-align:left;
  font-size:1.9em;
}
section#Services{ margin-bottom:10px; }
section#Services .content-body{
  margin-top:25px;
  width:92%;
}

/* -----------------------------
   Accordion (Services page: integrated + grid animation)
------------------------------ */

/* Container */
.accordion{
  width:100%;
  max-width:800px;
  margin:15px auto;
  border-radius:20px;
}

/* One bordered component */
#Services .accordion-item{
  border: 1px solid var(--red);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

/* Button (parent owns border) */
#Services .accordion-button{
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  border: 0;
  background: transparent;

  padding: 14px 16px;
  margin: 0;

  text-align: left;
  text-transform: uppercase;
  color: #000;
  font-size: 0.9em;
  letter-spacing: 1px;
  cursor: pointer;
}

/* Title / icon slots */
#Services .button-left{
  display: inline-block;
  width: auto;
  padding-top: 0;
}

#Services .accordion-icon.button-right,
#Services .button-right{
  float: none;
  width: 40px;
  text-align: center;
}

/* + icon */
#Services .accordion-icon{
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--red);
  transition: transform 0.2s ease;
  transform-origin: center;
}
#Services .accordion-icon.open-icon{
  transform: rotate(45deg);
}

/* Panel (grid animation) */
#Services .accordion-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 260ms ease;
  position: relative;
}

/* Divider line (paint-only, avoids border “morph”) */
#Services .accordion-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: rgba(153,22,7,0.22);
  opacity: 0;
  transition: opacity 120ms ease;
}

/* Open panel */
#Services .accordion-panel.is-open{
  grid-template-rows: 1fr;
}
#Services .accordion-panel.is-open::before{
  opacity: 1;
  transition-delay: 0ms;
  z-index: 10;
}

/* Delay divider disappearance until collapse is basically done */
#Services .accordion-panel:not(.is-open)::before{
  transition-delay: 220ms;
}

/* Inner content */
#Services .accordion-panel > .accordion-content{
  overflow: hidden;
  padding: 0 16px;
  margin: 0;

  /* neutralize legacy accordion system constraints */
  max-height: unset;
  opacity: 1;
  transform: none;
  transition: none;
}

#Services .accordion-panel.is-open > .accordion-content{
  padding-bottom: 20px;
}

/* Typography */
#Services .accordion-content{
  background: transparent;
}
#Services .accordion-content p{
  color:#000;
  text-align:left;
  font-size:0.9em;
  padding-top:5px;
  line-height: 1.55;
}
#Services .accordion-content h4{ padding-top:20px; }

/* Lists */
#Services .accordion-content ul{
  padding-top:15px;
  position:relative;
}
#Services .accordion-content li{
  list-style:none;
  font-size:0.9em;
  padding-left:30px;
  position:relative;
}
#Services .accordion-content li::before{
  content:"";
  position:absolute;
  width:15px;
  height:15px;
  background-image:url("../images/check-mark-green.png");
  background-size:contain;
  left:0;
  top:0.25em;
  background-repeat:no-repeat;
}

/* Button is a top-cap when open OR during closing (JS-managed) */
#Services .accordion-button.accordion-open,
#Services .accordion-item.is-closing .accordion-button{
  border-radius: 20px 20px 0 0;
}


/* -----------------------------
   Acknowledgement
------------------------------ */
.acknowledgement{
  border-left:7px solid var(--red);
  padding-left:10px;
  width:88%;
  margin:0 auto;
}
.acknowledgement p{ font-size:0.95em; }

/* -----------------------------
   Footer
------------------------------ */
footer{
  background:#fff;
  color:var(--navy-dark);
  text-align:center;
}
.footer-links{
  padding:15px 0 10px;
  width:90%;
  margin:0 auto;
}
footer .container{ padding-top:15px; }

footer ul{ text-align:center; }
.footer-item{ display:inline-block; }

.footer-link{
  list-style:none;
  display:inline-block;
  font-size:0.8em;
  padding-left:4px;
}
.footer-link a{
  text-decoration:none;
  color:#000;
  font-size:1em;
}

.socials{
  margin:0 auto;
  padding-top:25px;
  width:90%;
  font-size:1em;
  color:#000;
  font-family:"Poppins","poppins",sans-serif;
  font-weight:600;
}
.socials ul{ text-align:center; margin-top:10px; }
.socials img{ height:32px; }
.socials a{ text-decoration:none; }

.social-link{
  list-style:none;
  display:inline-block;
  padding:0 2px;
}

.footer-container{
  padding:10px 0;
  background:var(--paper);
  margin-top:10px;
}
.footer-container p{
  color:#000;
  text-align:center;
  width:98%;
  font-size:0.75em;
}
/* ----------------------------- Desktop navigation ------------------------------ */ 
@media (min-width: 850px){ 
  .mobile-nav, .hamburger{ display:none; } 
  header .container{ align-items:center; gap:24px; }
  .lg-nav-menu{
    display:flex;
    align-items:center;
    margin-left:auto;
    width:auto;
    align-self: end;
    margin-bottom: 4px;
  }
  .lg-nav-menu nav{ 
    width:100%; 
  } 
  .lg-nav-menu ul{
    display:flex; justify-content:flex-end; gap:12px; } .lg-nav-menu li{ display:flex; } .lg-nav-menu a{ padding:10px 14px; border-radius:999px; text-decoration:none; color:#000; font-size:1.05rem; letter-spacing:0.08em; font-weight:600; text-transform:uppercase; white-space:nowrap; position:relative; } .lg-nav-menu a:hover{background:rgba(0,0,0,0.06);} .lg-nav-menu a::after{ /* content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:rgba(0,0,0,0.18); opacity:0; border-radius:999px; transition:opacity 160ms ease;*/ } .lg-nav-menu a:hover::after{ opacity:1; } .kfp-text-inner{max-width: 680px;} .accordion{ max-width:900px; margin-inline:auto; } } /* Optional wider desktop tweaks */ @media (min-width: 945px){ .lg-nav-menu{ margin-right:0; } .lg-nav-menu ul{ justify-content:center; } .lg-nav-menu li{ padding:0 5px; } } @media (min-width: 1200px){ .container{ width:min(var(--max), calc(100% - (var(--pad) * 2))); } }
/* -----------------------------
   Contact Popup / Modal (CONSOLIDATED)
------------------------------ */

.no-scroll{ overflow:hidden; }

.popup{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;

  justify-content:center;
  align-items:center;

  padding:28px 14px;

  background: rgba(10, 12, 16, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  opacity:0;
  transition:opacity 0.3s ease-in-out;
}

.popup.show{
  display:flex;
  opacity:1;
}

.popup-content{
  /* sizing */
  width: min(640px, 92vw);
  max-height: calc(100vh - 56px);
  overflow:auto;
  box-sizing:border-box;

  /* surface */
  background:#fbfbfc;
  border:1px solid rgba(0,0,0,0.08);
  border-top:none;
  border-radius:18px;

  /* spacing + type */
  padding:20px 18px 18px;
  font-family:"Poppins","poppins",sans-serif;
  font-size:0.95em;
  text-align:left;

  /* depth */
  box-shadow:
    0 28px 80px rgba(0,0,0,0.38),
    0 1px 0 rgba(255,255,255,0.55) inset;

  overflow:hidden; /* keeps the top accent clean */
}

/* Top accent (premium gradient bar) */
.popup-content::before{
  content:"";
  display:block;
  height:15px;
  margin:-20px -18px 14px; /* matches popup-content padding */
  background: linear-gradient(90deg, #8f1b12 0%, #b02a1f 55%, #8f1b12 100%);
  border-radius:14px 14px 0 0;
  opacity:0.95;
}

/* Header */
.contact-header{
  width:100%;
  position:relative;

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:12px;

  padding:2px 0 12px;
  margin-bottom:12px;
}

/* Soft divider under header */
.contact-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.10) 18%,
    rgba(0,0,0,0.10) 82%,
    rgba(0,0,0,0) 100%
  );
}

.contact-header h2{
  order:1;
  margin:0;
  margin-right:auto;
  font-size: 1.85rem;
  letter-spacing: 0.005em;
  font-weight: 800;
  line-height: 1.1;
}

/* Subheader line */
.contact-sub{
  order:3;
  flex-basis:100%;

  margin:6px 0 0;
  font-size:0.92rem;
  font-weight:600;
  color:rgba(0,0,0,0.60);
}

/* Close button */
.close-btn{
  order:2;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;

  border-radius:12px;
  border:1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  color:#000;

  cursor:pointer;
  line-height:1;
  font-size:22px;
  padding:0;

  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.close-btn:hover,
.close-btn:focus{
  background:#fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.14);
  outline:none;
}

/* -----------------------------
   Contact Form (SCOPED)
------------------------------ */

#contact-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}

/* Labels (kept for accessibility; visually hidden when class applied) */
#contact-form label{
  margin-top:6px;
  font-size:0.9rem;
  font-weight:700;
  color:rgba(0,0,0,0.72);
}

#contact-form .label-no-show{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/* Fields */
#contact-form input,
#contact-form textarea{
  margin-top:6px;
  width:100%;
  box-sizing:border-box;

  padding:11px 12px;
  border-radius:12px;

  border:1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.96);

  font-size:0.98rem;
  outline:none;

  box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

#contact-form textarea{
  min-height:140px;
  line-height:1.5;
  resize:vertical;
  max-height:40vh;
}

/* Focus */
#contact-form input:focus,
#contact-form textarea:focus{
  border-color: rgba(143,27,18,0.55);
  box-shadow:
    0 0 0 4px rgba(143,27,18,0.12),
    0 1px 0 rgba(0,0,0,0.02) inset;
  background:#fff;
}

/* Placeholders */
#contact-form input::placeholder,
#contact-form textarea::placeholder{
  color: rgba(0,0,0,0.50);
}

/* Validation (no JS) — only on focus */
#contact-form input:focus:invalid,
#contact-form textarea:focus:invalid{
  border-color: rgba(180, 40, 35, 0.75);
  box-shadow: 0 0 0 4px rgba(180, 40, 35, 0.12);
}

#contact-form input:focus:valid,
#contact-form textarea:focus:valid{
  border-color: rgba(26, 140, 92, 0.65);
  box-shadow: 0 0 0 4px rgba(26, 140, 92, 0.10);
}

/* Submit button */
#contact-form .form-button{
  margin-top:18px;
  width:100%;
  border:none;
  position: relative;
  overflow: hidden;

  padding:12px 16px;
  border-radius:14px;

  border:1px solid rgba(0,0,0,0.10);
  background: linear-gradient(180deg, #9b2117 0%, #7f160f 100%);
  color:#fff;

  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;

  box-shadow:
    0 14px 30px rgba(0,0,0,0.22),
    0 1px 0 rgba(255,255,255,0.22) inset;

  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
#contact-form .form-button::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.00) 40%
  );
  pointer-events:none;
}

#contact-form .form-button::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:8px;
  height:1px;
  background: rgba(0,0,0,0.25);
  opacity: 0.18;
  border-radius: 999px;
  pointer-events:none;
}

#contact-form .form-button:hover{
  transform: translateY(-1px);
  filter: brightness(0.98);
}
/* Slightly tighter stack + clearer grouping */
#contact-form{ gap: 12px; }
#contact-form input{ margin-top: 0; }
#contact-form textarea{ margin-top: 0; }

#contact-form input + label,
#contact-form textarea + label{ margin-top: 2px; } /* just in case labels appear */
#contact-form input,
#contact-form textarea{
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    transform 120ms ease;
}

@media (hover:hover){
  #contact-form input:hover,
  #contact-form textarea:hover{
    border-color: rgba(0,0,0,0.18);
  }
}

#contact-form input:focus,
#contact-form textarea:focus{
  transform: translateY(-1px);
}
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}