:root{
  --background:#F7F9FC;--surface:#FFFFFF;--surface-2:#F1F5F9;
  --text-primary:#12294B;--text-secondary:#64748B;--border:#E4E9F0;
  --yellow:#FFB800;--yellow-hover:#F5AE00;--orange:#E8890C;--blue:#2F80ED;
  --navy:#0F2B4C;--success:#16A34A;--cream:#FAF3E6;--cream-icon:#F6E8CB;
  --radius:8px;--shadow:0 1px 3px rgba(11,27,51,.06),0 1px 2px rgba(11,27,51,.04);
  --shadow-lg:0 6px 16px rgba(11,27,51,.08);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--background);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font-family:inherit;}
img{display:block;max-width:100%;}
.container{width:calc(100% - 2 * clamp(16px, 3.5vw, 64px));max-width:1800px;margin-inline:auto;}
.section{padding:48px 0;}

/* Header */
.site-header{background:var(--surface);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:96px;gap:16px;}
.logo{display:flex;align-items:center;flex-shrink:0;}
.logo-img{height:64px;width:auto;object-fit:contain;}
.main-nav{flex:1;display:flex;justify-content:center;}
.nav-links{display:flex;gap:32px;list-style:none;}
.nav-links a{color:var(--text-primary);font-size:15px;font-weight:600;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.nav-links a:hover{color:var(--blue);}
.chev{width:14px;height:14px;}

/* Header Categories dropdown (desktop) */
.nav-drop{position:relative;}
.nav-drop-toggle{cursor:pointer;background:none;border:none;font:inherit;color:inherit;padding:0;}
.nav-dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:20px 24px;z-index:120;min-width:680px;}
.nav-drop.open .nav-dropdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px;}
.nav-dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav-drop-group{display:flex;flex-direction:column;gap:3px;min-width:0;}
.nav-drop-cat{display:block;width:100%;box-sizing:border-box;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--navy);background:var(--yellow);border-radius:6px;padding:6px 10px;margin:0 0 10px;white-space:normal;overflow-wrap:break-word;}
.nav-drop-cat:hover{color:var(--navy);background:var(--yellow-hover);}
@media (max-width:1100px){
  .nav-drop.open .nav-dropdown{grid-template-columns:repeat(2,minmax(0,1fr));min-width:520px;}
}
.nav-drop-group a:not(.nav-drop-cat){font-size:14px;font-weight:600;color:var(--text-primary);padding:3px 0;}
.nav-drop-group a:not(.nav-drop-cat):hover{color:var(--blue);}
.nav-drop-all{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:12px;border-top:1px solid var(--border);font-size:14px;font-weight:800;color:var(--navy);}
.nav-drop-all:hover{color:var(--blue);}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.btn-projects{background:var(--yellow);color:var(--text-primary);padding:11px 22px;border-radius:8px;font-size:14px;font-weight:700;white-space:nowrap;}
.btn-projects:hover{background:var(--yellow-hover);}
.hamburger{display:none;color:var(--text-primary);font-size:24px;}

/* Mobile menu */
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;z-index:99;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);padding:8px 20px 16px;flex-direction:column;}
.mobile-menu a{padding:13px 6px;font-size:16px;font-weight:600;color:var(--text-primary);border-bottom:1px solid var(--surface-2);}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu.open{display:flex;}

/* Header Categories accordion (mobile) */
.mobile-cats{border-bottom:1px solid var(--surface-2);}
.mobile-cats-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;font:inherit;color:inherit;padding:13px 6px;font-size:16px;font-weight:600;text-align:left;cursor:pointer;}
.mobile-cats-toggle .chev{transition:transform .2s;}
.mobile-cats.open .mobile-cats-toggle .chev{transform:rotate(180deg);}
.mobile-cats-panel{display:none;padding:0 6px 14px;}
.mobile-cats.open .mobile-cats-panel{display:block;}
.mobile-cats-group{display:flex;flex-direction:column;gap:2px;padding:8px 0 6px;}
.mobile-menu .mobile-cats-cat{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--navy);background:var(--yellow);border-radius:6px;padding:5px 10px;margin:4px 6px 6px;border-bottom:none !important;}
.mobile-cats-group a:not(.mobile-cats-cat){padding:9px 12px;font-size:15px;font-weight:600;color:var(--text-primary);}
.mobile-cats-group a:not(.mobile-cats-cat):hover{color:var(--blue);}
.mobile-cats-all{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--navy);padding:10px 6px 2px !important;border-bottom:none !important;}

/* Hero */
.hero{background:linear-gradient(90deg,var(--background) 0%,var(--background) 42%,rgba(247,249,252,.88) 66%,rgba(247,249,252,.6) 100%),url('hero-bg.webp') right center / auto 100% no-repeat;padding:72px 0;}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,4vw,72px);align-items:center;}
.hero-left{min-width:0;}
.hero-badge{display:inline-block;background:var(--cream);color:var(--orange);border:1px solid #F3D9A8;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-bottom:20px;}
.hero-title{font-size:clamp(30px,3.2vw,44px);font-weight:800;line-height:1.15;letter-spacing:-1px;margin-bottom:18px;}
.hero-title span{color:var(--yellow);}
.hero-sub{font-size:16px;color:var(--text-secondary);max-width:520px;margin-bottom:28px;}
.hero-stats{display:flex;flex-wrap:wrap;gap:14px 0;margin-bottom:28px;}
.hstat{display:flex;align-items:center;gap:10px;padding:0 22px;border-left:1px solid var(--border);}
.hstat:first-child{border-left:none;padding-left:0;}
.hstat svg{width:26px;height:26px;flex-shrink:0;}
.hstat strong{display:block;font-size:15px;font-weight:800;line-height:1.2;}
.hstat span{font-size:13px;color:var(--text-secondary);}
.hero-search{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:6px 6px 6px 16px;max-width:560px;box-shadow:var(--shadow);margin-bottom:16px;}
.search-ic{width:18px;height:18px;color:var(--text-secondary);flex-shrink:0;}
.hero-search input{flex:1;border:none;outline:none;padding:10px 12px;font-size:15px;background:transparent;min-width:0;}
.hero-search button{background:var(--yellow);color:var(--text-primary);font-weight:700;font-size:15px;padding:11px 26px;border-radius:6px;flex-shrink:0;}
.hero-search button:hover{background:var(--yellow-hover);}
.popular-searches{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text-secondary);}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 14px;font-size:13px;font-weight:600;color:var(--text-secondary);}
.chip.active{color:var(--blue);background:#EAF2FD;border-color:#CFE2FB;text-decoration:underline;}
.hero-right{min-width:0;justify-self:end;width:100%;max-width:880px;}
.hero-tool-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;width:100%;}
.tool-bar{background:var(--navy);color:#fff;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:11px 20px;display:flex;align-items:center;gap:8px;}
.tool-bar::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--success);}
.tool-inner{padding:20px 22px 22px;}
.tool-head{font-size:15px;font-weight:800;margin-bottom:16px;}
.tool-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.tool-inputs{display:flex;flex-direction:column;gap:12px;min-width:0;}
.tool-inputs label{font-size:12px;font-weight:600;color:var(--text-secondary);}
.tool-inputs input{width:100%;height:42px;border:1px solid var(--border);border-radius:6px;padding:0 12px;font-size:15px;margin-top:5px;}
.tool-result{background:var(--navy);color:#fff;border-radius:8px;padding:18px;text-align:center;display:flex;flex-direction:column;justify-content:center;}
.tr-label{font-size:13px;font-weight:600;color:#CBD5E1;}
.tr-vol{font-size:36px;font-weight:800;color:var(--yellow);line-height:1.1;}
.tr-unit{font-size:13px;color:#CBD5E1;margin-bottom:10px;}
.tr-bags{font-size:12px;color:#CBD5E1;border-top:1px solid rgba(255,255,255,.15);padding-top:10px;}
.tool-cta{display:block;text-align:center;background:var(--yellow);color:var(--text-primary);font-weight:800;font-size:15px;padding:13px;border-radius:6px;}
.tool-cta:hover{background:var(--yellow-hover);}

/* Calculators grid — primary tool directory */
.calc-directory{padding:40px 0 48px;}
.calc-directory-head{text-align:center;margin-bottom:28px;}
.calc-directory-head .section-title{margin-bottom:8px;}
.section-sub{font-size:15px;color:var(--text-secondary);}
.section-title{font-size:26px;font-weight:800;}
.section-title.center{text-align:center;margin-bottom:32px;}
.calc-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:16px;}
.calc-card-link{background:var(--surface);border:1px solid var(--border);border-bottom:3px solid var(--yellow);border-radius:10px;box-shadow:var(--shadow);text-align:center;padding:0;display:flex;flex-direction:column;align-items:center;gap:0;min-width:0;transition:.2s;cursor:pointer;aspect-ratio:1/1;overflow:hidden;}
.calc-card-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#CBD5E1;border-bottom-color:var(--yellow-hover);}
.calc-card-link:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.calc-card-link img{width:100%;flex:1;min-height:0;object-fit:contain;object-position:center;padding:8px;box-sizing:border-box;}
.calc-card-link strong{font-size:14px;font-weight:800;background:var(--surface);width:100%;padding-top:12px;flex:0 0 auto;min-height:0;}
.calc-card-link span{font-size:12px;color:var(--text-secondary);background:var(--surface);width:100%;padding-bottom:14px;flex:0 0 auto;min-height:0;}
.more-circle{width:56px;height:56px;border:2px dashed #C7D2E0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--yellow);font-size:26px;font-weight:800;margin-bottom:10px;}

/* All-calculators directory page: full listing uses its own multi-column layout */
#dir-grid{grid-template-columns:repeat(6,1fr);gap:18px;}
#dir-grid .more-circle{width:72px;height:72px;font-size:30px;}

/* Trust band */
.trust-band{background:var(--cream);padding:48px 0;}
.trust-row{display:grid;grid-template-columns:repeat(5,1fr);}
.titem{text-align:center;padding:8px 20px;border-left:1px solid #EBDCC3;min-width:0;}
.titem:first-child{border-left:none;}
.ticon{width:64px;height:64px;border-radius:50%;background:var(--cream-icon);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.ticon svg{width:28px;height:28px;}
.titem h3{font-size:16px;font-weight:800;margin-bottom:8px;}
.titem p{font-size:13px;color:var(--text-secondary);}

/* Guides */
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px;gap:16px;flex-wrap:wrap;}
.link-blue{color:var(--blue);font-weight:600;font-size:14px;}
.guides-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.guide-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);min-width:0;transition:.2s;}
.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.guide-card img{width:100%;height:180px;object-fit:contain;box-sizing:border-box;background:var(--surface-2);}
.guide-body{padding:20px;}
.guide-body h3{font-size:16px;font-weight:800;margin-bottom:8px;}
.guide-body p{font-size:13px;color:var(--text-secondary);margin-bottom:14px;}
.read-link{color:var(--blue);font-size:13px;font-weight:700;}

/* How it works */
.hiw-grid{display:flex;align-items:stretch;justify-content:space-between;gap:16px;}
.hiw-step{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 20px;text-align:center;box-shadow:var(--shadow);min-width:0;}
.hiw-circle{width:44px;height:44px;background:var(--yellow);color:var(--text-primary);font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:18px;}
.hiw-step h3{font-size:15px;font-weight:800;margin-bottom:8px;}
.hiw-step p{font-size:13px;color:var(--text-secondary);}
.hiw-arrow{align-self:center;color:var(--text-primary);font-size:22px;font-weight:800;flex-shrink:0;}

/* Footer (light) */
.site-footer{background:var(--surface);color:var(--text-secondary);padding:56px 0 0;margin-top:48px;border-top:1px solid var(--border);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;}
.footer-logo-img{height:64px;width:auto;}
.brand-col p{font-size:14px;line-height:1.7;margin:16px 0 20px;max-width:280px;color:var(--text-secondary);}
.socials{display:flex;gap:10px;}
.socials a{width:36px;height:36px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-primary);}
.socials a:hover{background:var(--yellow);color:var(--text-primary);}
.socials svg{width:16px;height:16px;}
.footer-col h4{color:var(--text-primary);font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:11px;}
.footer-col a{font-size:14px;color:var(--text-secondary);}
.footer-col a:hover{color:var(--blue);}
.footer-bottom{border-top:1px solid var(--border);padding:20px 0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--text-secondary);}
.footer-bottom strong{color:var(--text-primary);}

/* Modal / toast */
.modal-overlay{position:fixed;inset:0;background:rgba(11,27,51,.5);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:10px;width:100%;max-width:500px;padding:32px;box-shadow:var(--shadow-lg);}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.modal-close{font-size:24px;color:var(--text-secondary);}
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:14px 28px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:var(--shadow-lg);border-left:4px solid var(--success);opacity:0;visibility:hidden;transition:.3s;z-index:300;}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* ===== Calculator page components ===== */
.ad-slot{display:flex;align-items:center;justify-content:center;background:#E9EFF7;border:2px dashed #94A3B8;border-radius:var(--radius);}
.ad-stack{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 20px;width:100%;margin-top:50px;}
.ad-slot-300x250{width:300px;max-width:100%;height:250px;min-height:250px;margin-top:0;}
.ad-label{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#475569;}
.calc-split{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;margin:40px 0 60px;align-items:start;}
.calc-left{display:flex;flex-direction:column;min-width:0;}
.concrete-calc{align-self:start;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;}
.calc-card{display:flex;flex-direction:column;}
.calc-header{display:flex;justify-content:space-between;margin-bottom:24px;}
.calc-title{font-size:28px;font-weight:800;margin-bottom:4px;}
.calc-desc{color:var(--text-secondary);font-size:15px;}
.live-badge{display:inline-flex;align-items:center;align-self:flex-start;width:auto;gap:8px;background:#DCFCE7;color:var(--success);padding:6px 12px;border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;}
.live-badge .dots{display:inline-flex;gap:4px;align-items:center;}
.live-badge .dots span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);animation:dotPulse 1.4s infinite;}
.live-badge .dots span:nth-child(2){animation-delay:.35s;}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.75);}}
.calc-tabs{display:flex;gap:8px;margin-bottom:24px;overflow-x:auto;padding-bottom:4px;}
.tab{padding:10px 16px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-weight:600;color:var(--text-secondary);white-space:nowrap;background:var(--surface);}
.tab.active{background:var(--yellow);color:var(--text-primary);border-color:var(--yellow);}
.tab:hover:not(.active){border-color:var(--text-secondary);}
.diagram-wrap{background:var(--surface-2);border-radius:var(--radius);padding:20px;margin-bottom:24px;display:flex;justify-content:center;align-items:center;max-height:320px;}
.iso-diagram{max-height:260px;width:auto;max-width:100%;height:auto;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;}
.field{min-width:0;}
.field label{display:block;font-size:13px;font-weight:700;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.info-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border:1.5px solid var(--text-secondary);border-radius:50%;font-size:10px;font-weight:700;line-height:1;color:var(--text-secondary);cursor:help;position:relative;vertical-align:middle;}
.info-icon .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:230px;background:#0F172A;color:#F8FAFC;font-size:12px;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;padding:9px 11px;border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.18);opacity:0;visibility:hidden;transition:opacity .15s ease;z-index:20;pointer-events:none;text-align:left;}
.info-icon .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#0F172A;}
.info-icon:hover .tip,.info-icon:focus .tip,.info-icon:focus-within .tip{opacity:1;visibility:visible;}
.info-icon:focus{outline:none;}
.input-group{display:flex;}
.field input,.field select{height:46px;border:1px solid var(--border);border-radius:6px;padding:0 12px;font-size:16px;font-weight:600;color:var(--text-primary);background:var(--surface);width:100%;outline:none;}
.field input:focus,.field select:focus{border-color:var(--yellow);}
.input-group input{border-right:none;border-radius:6px 0 0 6px;}
.input-group select{width:auto;min-width:64px;border-radius:0 6px 6px 0;background:var(--surface-2);font-weight:700;font-size:13px;}
.btn-primary-calc{width:100%;background:var(--yellow);color:var(--text-primary);font-weight:800;font-size:16px;padding:16px;border-radius:6px;}
.concrete-calc .btn-primary-calc{margin-top:24px;}
.btn-primary-calc:hover{filter:brightness(1.05);}
.sticky-results{display:flex;flex-direction:column;min-width:0;scroll-margin-top:120px;}
/* Desktop: the results panel stays in normal page flow — one page scrollbar, no sticky
   pinning, no internal scrolling. The two-column result layout that keeps the panel height
   close to the input card lives in the block at the end of this file. */
.res-hero{text-align:center;padding:14px 0;border-bottom:1px dashed var(--border);margin:10px 0 14px;}
.res-order-label{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);margin-bottom:6px;}
.res-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.res-vol-item{background:var(--surface-2);border:1px solid var(--border);padding:8px 12px;border-radius:6px;text-align:center;}
.res-vol-item span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:2px;}
.res-vol-item strong{font-size:17px;font-weight:800;color:var(--text-primary);}
.res-vol-item.waste{background:#FFF4D6;border-color:#FFE08A;color:#92400E;}
.res-vol-item.waste span{color:#92400E;}
.res-vol-item.waste strong{color:#92400E;}
.res-big{font-size:44px;font-weight:800;letter-spacing:-1.5px;}
.res-unit{font-size:15px;font-weight:600;color:var(--text-secondary);}
.res-wastage{background:#FFF4D6;color:#92400E;padding:8px 12px;border-radius:6px;text-align:center;font-size:13px;font-weight:600;margin-bottom:14px;}
.res-volume-detail{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border:1px solid var(--border);padding:7px 12px;border-radius:6px;font-size:13px;color:var(--text-secondary);margin-bottom:14px;}
.res-volume-detail strong{color:var(--text-primary);font-weight:700;}
.res-section{margin-bottom:14px;}
.assumptions{border:1px solid var(--border);border-radius:6px;padding:12px;background:var(--surface);}
.assumptions-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;margin-bottom:8px;}
.assumption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:13px;border-bottom:1px dashed var(--border);}
.assumption span{color:var(--text-secondary);font-weight:600;}
.assumption strong{color:var(--text-primary);font-weight:700;text-align:right;}
.assumptions-note{font-size:12px;color:var(--text-secondary);font-style:italic;border-top:1px solid var(--border);padding-top:8px;margin-top:8px;}
.style-info{grid-column:1 / -1;font-size:12.5px;color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin:0;}
.fit-warning{background:#FEE2E2;border:1px solid #FCA5A5;color:#B91C1C;border-radius:6px;padding:10px 14px;font-size:13px;font-weight:600;margin:-8px 0 18px;}
.results-warning{background:#FEE2E2;border:1px solid #FCA5A5;color:#B91C1C;border-radius:6px;padding:10px 12px;font-size:13px;font-weight:600;margin:0 0 18px;line-height:1.5;}
@media(max-width:560px){.assumptions-list{grid-template-columns:1fr;}.ad-slot-300x250{width:100%;height:auto;aspect-ratio:300/250;}}
.res-section h4{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--text-secondary);text-transform:uppercase;}
.mat-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:14px;border-radius:6px;margin-bottom:3px;gap:8px;}
.mat-row span:last-child{font-weight:700;}
.mat-row.selected-bag{background:#FFF7E0;border:1px solid #FFE08A;}
.mat-row.cost-row-res{background:var(--surface-2);border:1px solid var(--border);margin-top:6px;}
.cost-val{font-weight:800;color:var(--success);font-size:16px;}
.res-divider{height:1px;background:var(--border);margin:12px 0;}
.res-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:14px;}
.btn-yellow,.btn-dark,.btn-outline{padding:12px;border-radius:6px;font-size:14px;font-weight:700;text-align:center;}
.btn-yellow{background:var(--yellow);color:var(--text-primary);}
.btn-yellow:hover{background:var(--yellow-hover);}
.btn-dark{background:var(--navy);color:#fff;}
.btn-outline{background:var(--surface);border:1px solid var(--border);color:var(--text-primary);}
.ad-banner{background:#E9EFF7;border:2px dashed #94A3B8;border-radius:var(--radius);height:90px;min-height:90px;display:flex;align-items:center;justify-content:center;color:#475569;font-size:14px;margin:24px 0;}
.ad-wrap{display:flex;justify-content:center;margin:28px 0;}
.calc-grid .ad-wrap{grid-column:1/-1;width:100%;min-width:0;}
.ad-wrap .ad-banner,.ad-wrap .ad-slot-300x250{margin:0;}
.ad-wrap .ad-banner{width:100%;}
.edu-section .ad-wrap{grid-column:1/-1;width:100%;min-width:0;margin:6px 0 0;}

/* Concrete results panel: compact vertical spacing */
.concrete-results .res-hero{padding:14px 0;margin:10px 0 14px;}
.concrete-results .res-big{font-size:38px;}
.concrete-results .res-breakdown{margin-bottom:14px;}
.concrete-results .res-vol-item{padding:8px 12px;}
.concrete-results .res-vol-item strong{font-size:16px;}
.concrete-results .res-section{margin-bottom:14px;}
.concrete-results .res-section h4{margin-bottom:8px;}
.concrete-results .res-divider{margin:12px 0;}
.concrete-results .mat-row{padding:6px 10px;margin-bottom:3px;}
.concrete-results .mat-row.cost-row-res{margin-top:6px;}
.concrete-results .assumptions{padding:12px;}
.concrete-results .assumption{padding:4px 0;font-size:12.5px;}
.concrete-results .assumptions-list{margin-bottom:8px;}
.concrete-results .assumptions-note{padding-top:8px;margin-top:8px;}
.concrete-results .res-actions{padding-top:14px;}

/* ===== Educational content (reusable calculator-page sections) ===== */
/* Full page width (same as the calculator section) with a 2-col grid. */
.edu-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch;margin:8px 0 0;min-width:0;}
.edu-section .edu-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:24px;min-width:0;max-width:100%;}
.edu-section .edu-full{grid-column:1/-1;}
.edu-card-howto{align-self:start;}
.edu-section h2{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--navy);margin-bottom:14px;padding-bottom:9px;border-bottom:3px solid var(--yellow);}
.edu-section h3{font-size:16px;font-weight:800;color:var(--navy);margin:16px 0 6px;}
.edu-section p{font-size:14.5px;color:var(--text-primary);margin-bottom:10px;}
.edu-section p:last-child{margin-bottom:0;}
.edu-section .edu-lead{font-size:15px;color:var(--text-secondary);margin-bottom:12px;font-weight:500;}
.edu-list{margin:0 0 10px 0;padding:0;list-style:none;display:grid;gap:6px;}
.edu-list li{position:relative;padding-left:22px;font-size:14.5px;color:var(--text-primary);line-height:1.5;}
.edu-list li::before{content:'';position:absolute;left:1px;top:8px;width:7px;height:7px;border-radius:2px;background:var(--yellow);}
.edu-list li strong{color:var(--navy);font-weight:800;}
.edu-list-pairs li::before{top:9px;}
.edu-steps{margin:2px 0 0;padding:0;list-style:none;counter-reset:edu-step;display:grid;gap:12px;}
.edu-steps li{position:relative;padding-left:44px;counter-increment:edu-step;}
.edu-steps li::before{content:counter(edu-step);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--text-primary);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;}
.edu-steps li strong{display:block;color:var(--navy);font-weight:800;font-size:15px;margin-bottom:2px;}
.edu-steps li p{margin-bottom:0;color:var(--text-secondary);font-size:14px;}
.edu-formula{display:block;background:var(--surface-2);border-left:4px solid var(--yellow);border-radius:6px;padding:10px 14px;margin:8px 0 10px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:13px;color:var(--navy);overflow-x:auto;white-space:nowrap;}
.edu-example{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 8px;min-width:0;}
.edu-ex-col{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:14px 16px;min-width:0;}
.edu-ex-col h3{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);margin:0 0 4px;}
.edu-ex-col ul{list-style:none;margin:0;padding:0;}
.edu-ex-col li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed var(--border);min-width:0;}
.edu-ex-col li:last-child{border-bottom:none;}
.edu-ex-col li span{color:var(--text-secondary);}
.edu-ex-col li strong{color:var(--text-primary);font-weight:700;text-align:right;}
.edu-note{font-size:12.5px;color:var(--text-secondary);font-style:italic;margin-top:10px;}
.edu-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 8px;min-width:0;}
.edu-compare-col{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:14px 16px;}
.edu-compare-col h3{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);margin:0 0 6px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.edu-compare-col .edu-list{margin-bottom:0;}
.edu-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:8px;margin:4px 0 8px;background:var(--surface);}
.edu-table{width:100%;border-collapse:collapse;min-width:520px;font-size:13.5px;}
.edu-table th{background:var(--navy);color:#fff;text-align:left;padding:10px 14px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;}
.edu-table td{padding:10px 14px;border-top:1px solid var(--border);color:var(--text-primary);}
.edu-table tbody tr:nth-child(even){background:var(--surface-2);}
.edu-table tbody th{background:transparent;color:var(--navy);text-align:left;padding:10px 14px;border-top:1px solid var(--border);font-weight:700;}
.edu-faq{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;overflow:hidden;background:var(--surface);}
.edu-faq summary{list-style:none;cursor:pointer;padding:13px 42px 13px 16px;font-size:14.5px;font-weight:700;color:var(--navy);position:relative;display:block;}
.edu-faq summary::-webkit-details-marker{display:none;}
.edu-faq summary::after{content:'+';position:absolute;right:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--yellow);color:var(--text-primary);font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;}
.edu-faq[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.edu-faq[open]{border-color:var(--yellow);}
.edu-faq-body{padding:0 16px 14px;border-top:1px solid var(--border);}
.edu-faq-body p{margin:12px 0 0;color:var(--text-secondary);}
.edu-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:2px;min-width:0;}
.edu-rel-card{display:flex;flex-direction:column;justify-content:center;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:16px 18px;transition:.2s;min-height:0;min-width:0;}
.edu-rel-card:hover{border-color:var(--yellow);box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.edu-rel-card strong{display:block;color:var(--navy);font-weight:800;font-size:15px;margin-bottom:4px;}
.edu-rel-card span{font-size:13px;color:var(--text-secondary);line-height:1.45;}



/* ===== Educational content responsive ===== */
@media (max-width:1199px){
  .edu-section{gap:18px;}
  .edu-section .edu-card{padding:20px;}
}
@media (max-width:1024px){
  .edu-section h2{font-size:19px;}
  .edu-example{grid-template-columns:1fr;}
  .edu-compare{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .edu-section{grid-template-columns:minmax(0,1fr);gap:16px;}
}
@media (max-width:768px){
  .edu-section .edu-card{padding:18px;}
  .edu-steps li{padding-left:40px;}
  .edu-steps li::before{width:28px;height:28px;font-size:14px;}
  .edu-formula{white-space:normal;font-size:12.5px;}
  .edu-table{min-width:440px;font-size:13px;}
  .edu-related{grid-template-columns:1fr;}
  .edu-faq summary{font-size:14px;padding:12px 40px 12px 14px;}
}
@media (max-width:480px){
  .edu-section{gap:14px;}
  .edu-section .edu-card{padding:16px;}
  .edu-section h2{font-size:18px;}
  .edu-list li{font-size:14px;}
  .edu-steps li p{font-size:13.5px;}
  .edu-ex-col{padding:12px 14px;}
  .edu-ex-col li{flex-direction:column;align-items:flex-start;gap:2px;font-size:13px;}
  .edu-ex-col li strong{text-align:left;}
  .edu-compare-col{padding:12px 14px;}
}

/* ===== Responsive ===== */
@media (min-width:769px){ .mobile-menu{display:none !important;} }

@media (max-width:1199px){
  .calc-grid{grid-template-columns:repeat(3,1fr);gap:20px;}
  #dir-grid{grid-template-columns:repeat(4,1fr);}
  #dir-grid .more-circle{width:80px;height:80px;font-size:32px;}
  .more-circle{width:80px;height:80px;font-size:32px;}
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;max-width:760px;}
  .hero{background:var(--background);}
  .hero-right{width:100%;max-width:560px;margin:0 auto;}
  .calc-split{grid-template-columns:1fr;}
  .sticky-results{position:static;top:auto;max-height:none;overflow:visible;}
  .trust-row{grid-template-columns:repeat(3,1fr);gap:24px;}
  .titem{border-left:none;}
  .guides-grid{grid-template-columns:repeat(2,1fr);}
  .hiw-grid{flex-direction:column;}
  .hiw-arrow{transform:rotate(90deg);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .main-nav{display:none;}
  .hamburger{display:block;}
  .header-inner{height:64px;}
  .logo-img{height:40px;}
  .btn-projects{padding:8px 14px;font-size:12px;}
  .section{padding:36px 0;}
  .section-title{font-size:22px;}
  .hero{padding:40px 0;}
  .hero-title{font-size:32px;}
  .hero-sub{font-size:15px;}
  .hero-stats{gap:14px;}
  .hstat{border-left:none;padding:0;}
  .tool-body{grid-template-columns:1fr;}
  .calc-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  #dir-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .trust-row{grid-template-columns:1fr;}
  .guides-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:8px;}
  .form-grid-2{grid-template-columns:1fr;}
  .res-big{font-size:36px;}
  .sticky-results{scroll-margin-top:80px;}
  .calc-card,.card,.diagram-wrap,.form-grid-2,.field,.input-group,.calc-tabs,.res-actions{max-width:100%;min-width:0;}
  .calc-split>*{min-width:0;max-width:100%;}
  .iso-diagram{max-width:100%;width:100%;height:auto;max-height:none;}
  .field input,.field select,.input-group input,.input-group select{max-width:100%;}
  .calc-tabs{scrollbar-width:none;-ms-overflow-style:none;}
  .calc-tabs::-webkit-scrollbar{display:none;}
  .tab{flex-shrink:0;}
  .info-icon .tip{left:auto;right:0;transform:none;width:max-content;max-width:calc(100vw - 24px);}
}
@media (max-width:360px){
  .header-inner{gap:8px;}
  .logo-img{height:32px;}
  .btn-projects{padding:6px 10px;font-size:11px;}
  .header-actions{gap:8px;}
  .hero-badge{font-size:11px;}
}
@media (max-width:480px){
  .hero-title{font-size:27px;}
  .calc-grid{gap:12px;}
  .hiw-step{padding:22px 14px;}
  .trust-band{padding:36px 0;}
}
@media (max-width:350px){
  .calc-grid{grid-template-columns:1fr;}
  #dir-grid{grid-template-columns:1fr;}
}
@media (min-width:1600px){
  .calc-grid{gap:20px;}
  .guides-grid{gap:28px;}
  .hiw-grid{gap:24px;}
  .footer-grid{gap:48px;}
}

/* ===== Desktop readability bump (laptops and larger) ===== */
@media (min-width:1200px){
  body{font-size:17px;}
  .nav-links a{font-size:16px;}
  .btn-projects{font-size:15px;}
  .hero-badge{font-size:13px;}
  .hero-sub{font-size:17px;}
  .hstat strong{font-size:16px;}
  .hstat span{font-size:14px;}
  .section-title{font-size:30px;}
  .section-sub{font-size:17px;}
  .calc-card-link strong{font-size:16px;}
  .calc-card-link span{font-size:13.5px;}
  .titem h3{font-size:17px;}
  .titem p{font-size:14.5px;}
  .link-blue{font-size:15px;}
  .guide-body h3{font-size:17px;}
  .guide-body p{font-size:14.5px;}
  .read-link{font-size:14px;}
  .hiw-step h3{font-size:16px;}
  .hiw-step p{font-size:14.5px;}
  .brand-col p,.footer-col a{font-size:15px;}
  .footer-col h4{font-size:13px;}
  .footer-bottom{font-size:14px;}
  .calc-title{font-size:30px;}
  .calc-desc{font-size:16px;}
  .field label{font-size:14px;}
  .tab{font-size:15px;}
  .res-order-label{font-size:13px;}
  .res-vol-item span{font-size:12px;}
  .res-vol-item strong{font-size:18px;}
  .res-unit{font-size:16px;}
  .res-wastage{font-size:14px;}
  .res-volume-detail{font-size:14px;}
  .assumption{font-size:14px;}
  .assumptions-note{font-size:13px;}
  .mat-row{font-size:15px;}
  .cost-val{font-size:17px;}
  .res-section h4{font-size:13px;}
  .btn-yellow,.btn-dark,.btn-outline{font-size:15px;}
  .edu-section h2{font-size:22px;}
  .edu-section h3{font-size:17px;}
  .edu-section p{font-size:15.5px;}
  .edu-section .edu-lead{font-size:16px;}
  .edu-list li{font-size:15.5px;}
  .edu-steps li strong{font-size:16px;}
  .edu-steps li p{font-size:15px;}
  .edu-formula{font-size:14px;}
  .edu-ex-col h3{font-size:12px;}
  .edu-ex-col li{font-size:14.5px;}
  .edu-note{font-size:13.5px;}
  .edu-table{font-size:14.5px;}
  .edu-table th{font-size:13px;}
  .edu-faq summary{font-size:15.5px;}
  .edu-rel-card strong{font-size:16px;}
  .edu-rel-card span{font-size:14px;}
}

/* ===== Desktop two-column results (shared calculator layout) =====
   On desktop the results panel stays in normal document flow — one page scrollbar,
   no sticky pinning, no internal scrolling. Result rows and sections flow into two
   columns so the panel's natural height stays close to the input card instead of
   towering over it, which removes the empty band under the form. All result rows
   remain visible through normal page scrolling. Tablet/mobile (<=1024px) keep the
   single-column expanded layout via the reset above. */
@media (min-width:1025px){
  .sticky-results{position:static;top:auto;max-height:none;overflow:visible;}
  /* Equal-height columns: stretch both panels so the calculator card and
     results card end on the same line (results absorbs the slack via
     .res-actions{margin-top:auto}). Desktop only; mobile stacks naturally. */
  .calc-split{align-items:stretch;}
  .calc-left>.card{flex:1;}
  .calc-right>.card{height:100%;}
  .res-hero{padding:8px 0;margin:6px 0 10px;}
  .res-big{font-size:36px;line-height:1.15;}
  .res-unit{font-size:14px;}
  .res-wastage{padding:5px 10px;margin-bottom:8px;font-size:13px;}
  .res-volume-detail{margin-bottom:8px;padding:5px 12px;font-size:13.5px;}
  .res-section{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-bottom:10px;align-items:start;}
  .res-section h4{grid-column:1 / -1;margin-bottom:6px;}
  .res-section > .res-opt-row,
  .res-section > .mat-row.cost-row-res,
  .res-section > .res-breakdown,
  .res-section > .res-wastage,
  .res-section > .style-info{grid-column:1 / -1;}
  .res-section > div:not(.mat-row),
  .res-section > p{grid-column:1 / -1;}
  .res-section .mat-table{grid-column:1 / -1;}
  .res-section.assumptions{display:block;}
  .mat-row{min-width:0;padding:4px 8px;margin-bottom:3px;font-size:13.5px;}
  .mat-row span{min-width:0;}
  .res-vol-item{padding:5px 10px;}
  .res-vol-item strong{font-size:15px;}
  .cost-val{font-size:15px;}
  .assumption{padding:3px 0;font-size:12.5px;}
  .assumptions-note{padding-top:5px;margin-top:5px;font-size:12px;}
  .res-actions{padding-top:10px;}
  .res-divider{margin:8px 0;}
  /* Chicken-coop material table: two columns so the long material list stays compact */
  .mat-table{width:100%;border-collapse:collapse;}
  .mat-table tbody{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
  .mat-table tbody tr{display:flex;justify-content:space-between;gap:8px;align-items:center;}
  .mat-table tbody tr td:first-child{flex:1;min-width:0;}
  .mat-table thead{display:none;}
}