.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   ConstructionCalculatorNet.com — Homepage Redesign
   Full replacement of the previous phased design system per
   explicit redesign brief. Supersedes the Phase 1-10 stylesheet.
   ============================================================ */

:root{
  --cc-navy:#1E3A5F;
  --cc-blue:#2D5A87;
  --cc-teal:#0F766E;
  --cc-dark-teal:#134E4A;
  --cc-dark-text:#1E293B;
  --cc-secondary-text:#475569;
  --cc-light-text:#64748B;
  --cc-light-bg:#F8FAFC;
  --cc-white:#FFFFFF;
  --cc-border:#E5E7EB;
  --cc-gold:#CA8A04;
  --cc-footer-bg:#1E293B;
  --cc-transition:200ms ease;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--cc-teal);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  * { transition:none !important; }
}

/* ---------- Hero ---------- */
#cc-hero{
  position:relative;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 32px);
}
#cc-hero-inner{ width:100%; position:relative; z-index:1; }

.cc-hero-search{ width:100%; max-width:640px; margin:0 auto; }
.cc-search-field{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--cc-white);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  padding:6px 6px 6px 18px;
}
.cc-search-icon{ flex:0 0 auto; }
.cc-search-input{
  flex:1 1 auto;
  min-width:0;
  border:none;
  outline:none;
  font-size:16px;
  padding:14px 12px;
  color:var(--cc-dark-text);
  background:transparent;
}
.cc-search-input:focus-visible{ outline:none; }
.cc-search-btn{
  flex:0 0 auto;
  background:var(--cc-teal);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:14px 24px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:background-color var(--cc-transition);
}
.cc-search-btn:hover{ background:var(--cc-dark-teal); }
.cc-search-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

#cc-hero-pills{ width:100%; }
.cc-pill .elementor-button{
  background:rgba(255,255,255,0.12) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:999px !important;
  padding:8px 18px !important;
  font-weight:600;
  font-size:14px;
  transition:background-color var(--cc-transition), transform var(--cc-transition);
}
.cc-pill .elementor-button:hover{ background:rgba(255,255,255,0.22) !important; transform:translateY(-1px); }

@media (max-width:767px){
  .cc-hero-search{ max-width:100%; }
  .cc-search-field{ flex-wrap:wrap; padding:10px; }
  .cc-search-btn{ width:100%; margin-top:6px; }
}

/* ---------- Quick Unit Converter ---------- */
#cc-converter-inner{ width:100%; }
#cc-converter-card{ width:100%; }
#cc-converter-grid{ width:100%; }
.cc-mini-tile{
  flex:1 1 calc(50% - 8px);
  min-width:150px;
}
.cc-mini-label p{ margin:0; font-size:13px; opacity:0.9; }
.cc-mini-value p{ margin:0; font-size:18px; }
.cc-converter-link{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:480px){
  .cc-mini-tile{ flex:1 1 100%; }
}

/* ---------- Our Calculators grid ---------- */
#cc-calculators-inner{ width:100%; }
#cc-calculators-grid{ width:100%; }
.cc-calc-card{
  flex:1 1 calc(20% - 16px);
  min-width:210px;
  max-width:280px;
  position:relative;
  transition:transform var(--cc-transition), box-shadow var(--cc-transition);
}
.cc-calc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(15,23,42,0.14) !important;
}
.cc-calc-card-featured:hover{ box-shadow:0 10px 28px rgba(202,138,4,0.28) !important; }
.cc-card-emoji{ font-size:40px; line-height:1; }
.cc-calc-card h3{ margin:0; font-size:18px; }
.cc-calc-card p{ margin:0; font-size:14px; line-height:1.5; }
.cc-badge{
  position:absolute;
  top:14px;
  right:14px;
  background:var(--cc-navy);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
}
.cc-badge-gold{ background:var(--cc-gold); }
.cc-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.cc-tag{
  display:inline-block;
  background:var(--cc-light-bg);
  color:var(--cc-secondary-text);
  border:1px solid var(--cc-border);
  font-size:12px;
  font-weight:600;
  padding:3px 10px;
  border-radius:999px;
}
.cc-tag-gold{ background:#FEF3C7; border-color:#FDE68A; color:#92400E; }
.cc-tag-light{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.3); color:#fff; }
.cc-card-cta{ margin-top:auto; padding-left:0 !important; padding-right:0 !important; }
.cc-card-cta-solid{ padding:10px 18px !important; }
.cc-calc-card-green p, .cc-calc-card-green .cc-mini-label p{ color:#CCFBF1; }

@media (max-width:1024px){
  .cc-calc-card{ flex:1 1 calc(50% - 10px); max-width:none; }
}
@media (max-width:600px){
  .cc-calc-card{ flex:1 1 100%; }
}

/* ---------- Credibility strip ---------- */
#cc-cred-inner{ width:100%; }
#cc-cred-row{ width:100%; }
.cc-stat{ flex:1 1 180px; min-width:150px; }
.cc-stat-num{ font-size:28px; font-weight:800; }
.cc-stat p{ margin:0; font-size:14px; font-weight:600; }

/* ---------- How It Works ---------- */
#cc-how-inner{ width:100%; }
#cc-how-steps{ width:100%; position:relative; }
.cc-step{ flex:1 1 0; min-width:0; position:relative; z-index:1; }
.cc-step h3{ margin:0; }
.cc-step p{ margin:0; }
.cc-step-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--cc-teal);
  color:#fff;
  font-size:20px;
  font-weight:800;
}
@media (min-width:768px){
  #cc-how-steps::before{
    content:'';
    position:absolute;
    top:26px;
    left:16%;
    right:16%;
    height:2px;
    background:var(--cc-border);
    z-index:0;
  }
}
@media (max-width:767px){
  #cc-how-steps{ flex-direction:column; align-items:center; }
  .cc-step{ width:100%; max-width:320px; }
}

/* ---------- Why Use Us ---------- */
#cc-why-inner{ width:100%; }
#cc-why-grid{ width:100%; }
.cc-why-card{ flex:1 1 calc(33.333% - 19px); min-width:220px; max-width:320px; }
.cc-why-emoji{ font-size:36px; line-height:1; }
.cc-why-card h3{ margin:0; }
.cc-why-card p{ margin:0; font-size:14px; }

@media (max-width:1024px){
  .cc-why-card{ flex:1 1 calc(50% - 14px); }
}
@media (max-width:600px){
  .cc-why-card{ flex:1 1 100%; }
}

/* ---------- Construction Guides ---------- */
#cc-guides-inner{ width:100%; }
#cc-guides-row{ width:100%; }
.cc-guide-card{ flex:1 1 calc(33.333% - 11px); min-width:220px; }

@media (max-width:767px){
  .cc-guide-card{ flex:1 1 100%; }
}

/* ---------- Footer ---------- */
#cc-footer-inner{ width:100%; }
#cc-footer-cols{ width:100%; }
.cc-footer-col{ flex:1 1 calc(25% - 24px); min-width:180px; }
.cc-footer-col h4{ margin:0 0 4px; font-size:15px; letter-spacing:0.02em; }
.cc-footer-brand-name{ font-weight:700; }
.cc-footer-brand-name p{ margin:0; }
.cc-footer-col > .elementor-widget-text-editor p{ margin:0; }
.cc-footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cc-footer-list a{
  color:#CBD5E1;
  text-decoration:none;
  font-size:14px;
  transition:color var(--cc-transition);
}
.cc-footer-list a:hover{ color:#fff; text-decoration:underline; }
#cc-footer-bottom{ width:100%; }
#cc-footer-bottom p{ margin:0; font-size:13px; }

@media (max-width:1024px){
  .cc-footer-col{ flex:1 1 calc(50% - 16px); }
}
@media (max-width:600px){
  .cc-footer-col{ flex:1 1 100%; }
}/* End custom CSS */