:root{
  --navy:#003087;--blue:#0057B8;--sky:#00AEEF;--ice:#E8F4FD;--cold:#C5E4F7;
  --white:#fff;--off:#F7F9FC;--slate:#4A5568;--dark:#0F1923;--mid:#2D3748;
  --border:#D6E4F0;--success:#00875A;
  --grad:linear-gradient(135deg,#003087 0%,#0057B8 50%,#00AEEF 100%);
  --grad-dark:linear-gradient(135deg,#0F1923 0%,#003087 100%);
  --fd:'Barlow Condensed',sans-serif;--fb:'Inter',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--fb);color:var(--dark);background:var(--white);line-height:1.6;}
img{max-width:100%;display:block;}a{color:inherit;text-decoration:none;}

/* TOPBAR */
.topbar{background:var(--navy);color:#A8C4E8;font-size:12px;text-align:center;padding:7px 20px;letter-spacing:.03em;}
.topbar a{color:var(--sky);font-weight:700;}

/* NAV */
nav{background:var(--white);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:200;box-shadow:0 2px 16px rgba(0,48,135,.08);}
.nav-in{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:70px;}
.logo{display:flex;align-items:center;gap:12px;}
.logo img{height:46px;width:auto;flex-shrink:0;max-width:none;}
.logo-sub{font-size:9px;font-weight:700;color:var(--sky);letter-spacing:.12em;text-transform:uppercase;margin-top:2px;}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;}
.nav-links a{padding:8px 14px;font-size:13px;font-weight:600;color:var(--mid);border-radius:6px;transition:.15s;white-space:nowrap;}
.nav-links a:hover{background:var(--ice);color:var(--navy);}
.nav-cta{background:var(--navy)!important;color:#fff!important;padding:8px 20px!important;border-radius:6px!important;}
.nav-cta:hover{background:var(--blue)!important;}

/* HERO */
.hero{background:var(--grad-dark);color:#fff;min-height:88vh;display:flex;align-items:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%2300AEEF' fill-opacity='0.04'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.hero-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(0,174,239,.15) 0%,transparent 70%);top:-100px;right:-100px;pointer-events:none;}
.hero-in{max-width:1280px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1;}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,174,239,.15);border:1px solid rgba(0,174,239,.3);color:var(--sky);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:24px;}
.badge::before{content:'●';font-size:8px;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-family:var(--fd);font-size:clamp(34px,6vw,80px);font-weight:900;line-height:1.02;letter-spacing:-.01em;margin-bottom:20px;overflow-wrap:break-word;}
.hero h1 span{color:var(--sky);}
.hero p{font-size:17px;color:#A8C4E8;line-height:1.7;margin-bottom:36px;max-width:480px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.btn-primary{background:var(--sky);color:var(--navy);font-weight:700;font-size:15px;padding:14px 28px;border-radius:8px;border:none;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:8px;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,174,239,.35);}
.btn-outline{background:transparent;color:#fff;font-weight:700;font-size:15px;padding:14px 28px;border-radius:8px;border:2px solid rgba(255,255,255,.25);cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:8px;}
.btn-outline:hover{border-color:var(--sky);background:rgba(0,174,239,.1);}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;text-align:center;}
.stat-num{font-family:var(--fd);font-size:38px;font-weight:900;color:var(--sky);line-height:1;}
.stat-label{font-size:12px;color:#A8C4E8;margin-top:4px;font-weight:500;}
.hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.hcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px 20px;text-align:center;transition:.2s;}
.hcard:hover{background:rgba(0,174,239,.12);}
.hcard:first-child{grid-column:span 2;}
.hcard-icon{font-size:40px;margin-bottom:12px;}
.hcard h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:6px;}
.hcard p{font-size:12px;color:#A8C4E8;line-height:1.5;}

/* BRANDS */
.brands{background:var(--off);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px;}
.brands-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;}
.brands-label{font-size:11px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.1em;}
.brand-pill{background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 16px;display:inline-flex;align-items:center;justify-content:center;min-width:104px;height:50px;box-sizing:border-box;transition:.2s;}.brand-pill img{max-height:28px;max-width:116px;width:auto;height:auto;object-fit:contain;display:block;}.brand-pill i{display:none;}.brand-pill:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,48,135,.12);}.brand-pill.txt{font-family:var(--fd);font-size:17px;font-weight:800;color:var(--slate);letter-spacing:.05em;padding:6px 16px;border:2px solid var(--border);border-radius:6px;height:auto;min-width:0;transform:none;box-shadow:none;}.brand-pill.txt img{display:none;}.brand-pill.txt i{display:inline;font-style:normal;}.brand-pill.txt:hover{border-color:var(--blue);color:var(--navy);transform:none;box-shadow:none;}


/* SECTIONS */
.section{padding:88px 24px;}.si{max-width:1280px;margin:0 auto;}
.s-dark{background:var(--dark);color:#fff;}.s-ice{background:var(--ice);}.s-off{background:var(--off);}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:12px;}
.divider{height:2px;background:var(--grad);width:56px;border-radius:2px;margin-bottom:20px;}
.ctr .divider{margin-left:auto;margin-right:auto;}
h2{font-family:var(--fd);font-size:clamp(32px,4vw,52px);font-weight:900;line-height:1.08;letter-spacing:-.01em;color:var(--navy);margin-bottom:16px;}
.s-dark h2{color:#fff;}
.lead{font-size:17px;color:var(--slate);max-width:600px;line-height:1.7;margin-bottom:48px;}
.s-dark .lead{color:#A8C4E8;}
.sh{margin-bottom:56px;}.sh.ctr{text-align:center;}.sh.ctr .lead{margin-left:auto;margin-right:auto;}

/* ROOM SIZE SELECTOR */
.room-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:40px;}
.room-card{background:#fff;border:2px solid var(--border);border-radius:14px;padding:20px 14px;text-align:center;cursor:pointer;transition:.2s;}
.room-card:hover,.room-card.active{border-color:var(--sky);background:var(--ice);}
.room-icon{font-size:28px;margin-bottom:8px;}
.room-size{font-family:var(--fd);font-size:18px;font-weight:800;color:var(--navy);}
.room-label{font-size:11px;color:var(--slate);margin-top:3px;}
.room-btu{font-size:10px;color:var(--sky);font-weight:700;margin-top:4px;}

/* SERVICES */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.svc-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:36px 28px;transition:.2s;position:relative;overflow:hidden;}
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--grad);opacity:0;transition:.2s;}
.svc-card:hover{box-shadow:0 12px 40px rgba(0,87,184,.12);transform:translateY(-4px);border-color:var(--cold);}
.svc-card:hover::after{opacity:1;}
.svc-card.featured{border:2px solid var(--sky);background:linear-gradient(135deg,var(--ice) 0%,#fff 100%);}
.svc-card.featured::after{opacity:1;}
.core-badge{display:inline-block;background:var(--sky);color:var(--navy);font-size:10px;font-weight:800;padding:3px 10px;border-radius:10px;letter-spacing:.06em;margin-bottom:12px;}
.svc-icon{width:56px;height:56px;background:var(--ice);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:20px;}
.svc-card.featured .svc-icon{background:rgba(0,174,239,.15);}
.svc-card h3{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:10px;}
.svc-card p{font-size:14px;color:var(--slate);line-height:1.65;margin-bottom:20px;}
.svc-link{font-size:13px;font-weight:700;color:var(--blue);}
.svc-link:hover{color:var(--navy);}

/* PRODUCTS */
.prod-tabs{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap;}
.tab{padding:9px 20px;border-radius:100px;font-size:13px;font-weight:700;cursor:pointer;border:2px solid var(--border);background:#fff;color:var(--slate);transition:.15s;}
.tab.active,.tab:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.prod-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.2s;}
.prod-card:hover{box-shadow:0 16px 48px rgba(0,48,135,.13);transform:translateY(-4px);}
.prod-img{background:var(--grad);height:180px;display:flex;align-items:center;justify-content:center;font-size:72px;position:relative;}
.prod-badge{position:absolute;top:14px;left:14px;background:var(--sky);color:var(--navy);font-size:11px;font-weight:800;padding:4px 10px;border-radius:100px;letter-spacing:.04em;}
.prod-body{padding:24px;}
.prod-brand{font-size:11px;font-weight:700;color:var(--sky);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;}
.prod-name{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.3;}
.prod-desc{font-size:13px;color:var(--slate);line-height:1.6;margin-bottom:20px;}
.prod-footer{display:flex;align-items:center;justify-content:space-between;}
.prod-size{font-size:12px;font-weight:600;color:#888;}
.btn-sm{background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:9px 18px;border-radius:8px;border:none;cursor:pointer;transition:.15s;}
.btn-sm:hover{background:var(--blue);}

/* ZONING */
.zone-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.zone-visual{background:var(--ice);border:2px solid var(--cold);border-radius:24px;padding:40px;}
.zone-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--navy);}
.zone-dot{width:10px;height:10px;border-radius:50%;background:var(--sky);}
.zone-temp{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--blue);}
.zone-pill{font-size:11px;font-weight:700;background:#E8F8EF;color:var(--success);padding:3px 10px;border-radius:100px;}
.why-pts{display:flex;flex-direction:column;gap:24px;}
.why-pt{display:flex;gap:18px;}
.why-num{width:40px;height:40px;min-width:40px;background:var(--ice);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:18px;font-weight:800;color:var(--navy);}
.why-pt h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.why-pt p{font-size:14px;color:var(--slate);line-height:1.6;}

/* WHY */
.why-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.why-visual{background:var(--grad);border-radius:24px;padding:48px;color:#fff;}
.why-visual h3{font-family:var(--fd);font-size:36px;font-weight:900;line-height:1.1;margin-bottom:20px;}
.checklist{list-style:none;display:flex;flex-direction:column;gap:12px;}
.checklist li{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.9);}
.checklist li::before{content:'✓';display:flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;background:rgba(255,255,255,.2);border-radius:50%;font-size:12px;font-weight:700;}

/* TESTI */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.tcard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px 28px;}
.stars{color:#FFD700;font-size:16px;margin-bottom:16px;}
.tcard p{font-size:15px;color:rgba(255,255,255,.85);line-height:1.7;margin-bottom:20px;font-style:italic;}
.tcard .author{font-size:13px;font-weight:700;color:var(--sky);}
.tcard .loc{font-size:12px;color:rgba(255,255,255,.45);}

/* ABOUT */
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;}
.about-img{background:var(--grad);border-radius:24px;height:440px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.about-img img{height:160px;width:auto;filter:brightness(0) invert(1);opacity:.9;}
.about-img::after{content:'PRIMAL AIR ZIMBABWE';position:absolute;bottom:28px;left:28px;font-family:var(--fd);font-size:13px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.45);}
.about-vals{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px;}
.val-box{background:var(--ice);border-radius:12px;padding:20px;}
.val-box h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:4px;}
.val-box p{font-size:13px;color:var(--slate);line-height:1.55;}

/* REFRIGERATION CARDS */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* CONTACT */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.contact-info{display:flex;flex-direction:column;gap:24px;}
.contact-row{display:flex;gap:16px;align-items:flex-start;}
.cicon{width:46px;height:46px;min-width:46px;background:rgba(255,255,255,.08);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.contact-row h4{font-size:13px;font-weight:700;color:var(--sky);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.contact-row p,.contact-row a{font-size:16px;font-weight:600;color:#fff;}
.cform{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:36px;}
.cform-title{font-family:var(--fd);font-size:24px;font-weight:700;color:#fff;margin-bottom:24px;}
.fg{margin-bottom:16px;}
.fg label{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:6px;}
.fg input,.fg select,.fg textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:12px 16px;font-size:15px;color:#fff;font-family:var(--fb);outline:none;transition:.15s;}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.35);}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--sky);}
.fg select option{background:var(--dark);}
.fg textarea{height:100px;resize:vertical;}
.fsubmit{width:100%;background:var(--sky);color:var(--navy);font-weight:700;font-size:16px;padding:14px;border-radius:10px;border:none;cursor:pointer;font-family:var(--fb);margin-top:4px;transition:.15s;}
.fsubmit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,174,239,.3);}

/* FOOTER */
footer{background:var(--dark);color:rgba(255,255,255,.6);padding:64px 24px 32px;}
.footer-in{max-width:1280px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-logo img{height:52px;width:auto;max-width:none;margin-bottom:16px;}
.footer-logo p{font-size:14px;color:rgba(255,255,255,.5);line-height:1.7;max-width:280px;margin-top:12px;}
.footer-col h4{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,.5);margin-bottom:10px;transition:.15s;cursor:pointer;}
.footer-col a:hover{color:var(--sky);}
.footer-brands{border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:24px 0;margin-bottom:32px;}
.footer-brands-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.1em;text-align:center;margin-bottom:16px;}
.footer-brands-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;}


.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;}

/* WA FAB */
.wa-fab{position:fixed;bottom:24px;right:24px;z-index:999;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 4px 20px rgba(37,211,102,.45);transition:.2s;}
.wa-fab:hover{transform:scale(1.1);}

/* RESPONSIVE */
@media(max-width:1100px){.room-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;}.hero-visual{display:none;}
  .svc-grid,.ref-grid{grid-template-columns:1fr 1fr;}
  .prod-grid{grid-template-columns:1fr 1fr;}
  .why-layout,.zone-layout,.about-layout,.contact-layout{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr 1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .room-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .svc-grid,.ref-grid,.prod-grid,.testi-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .hero-stats{grid-template-columns:1fr;}
  .about-vals{grid-template-columns:1fr;}
  .room-grid{grid-template-columns:1fr 1fr;}
}

/* ── SERVICE DETAIL SECTIONS ──────────────────────────────────── */
.detail-section { padding: 80px 24px; border-top: 1px solid var(--border); }
.detail-section:nth-child(even) { background: var(--off); }
.det-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 32px; }
.det-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px; transition: .2s; }
.det-card:hover { box-shadow: 0 8px 28px rgba(0,48,135,.1); border-color: var(--cold); transform: translateY(-3px); }
.det-card .dc-icon { font-size: 34px; margin-bottom: 12px; }
.det-card h3 { font-family: var(--fd); font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.det-card p { font-size: 13px; color: var(--slate); line-height: 1.65; }
.det-card ul { list-style: none; padding: 0; margin-top: 8px; }
.det-card ul li { font-size: 12.5px; color: var(--slate); padding: 4px 0 4px 16px; position: relative; line-height: 1.5; }
.det-card ul li::before { content: '✓'; position: absolute; left: 0; color: var(--sky); font-weight: 700; font-size: 11px; }
.det-card.dark { background: var(--navy); border-color: var(--navy); }
.det-card.dark h3 { color: var(--sky); }
.det-card.dark p { color: rgba(255,255,255,.7); }
.det-tag { display: inline-block; background: var(--ice); color: var(--navy); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; margin: 3px 2px 0; border: 1px solid var(--cold); }
.section-title { font-family: var(--fd); font-size: clamp(28px,4vw,44px); font-weight: 900; color: var(--navy); margin-bottom: 10px; line-height: 1.05; }
.section-sub { font-size: 15px; color: var(--slate); line-height: 1.75; max-width: 700px; margin-bottom: 8px; }
.hbox { background: var(--ice); border-left: 4px solid var(--sky); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 20px 0; }
.hbox p { font-size: 13.5px; color: var(--mid); line-height: 1.7; }
.hbox strong { color: var(--navy); }
.stbl { width: 100%; border-collapse: collapse; font-size: 13px; margin: 24px 0; }
.stbl th { background: var(--navy); color: #fff; padding: 10px 14px; text-align: left; font-weight: 700; font-size: 12px; }
.stbl td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.stbl tr:nth-child(even) td { background: var(--off); }
.stbl tr:hover td { background: var(--ice); }
.cr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 24px 0; }
.cr-card { border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border); transition: .2s; }
.cr-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,48,135,.1); }
.cr-hd { padding: 20px; text-align: center; color: #fff; }
.cr-hd.ch { background: linear-gradient(135deg,#0057B8,#00AEEF); }
.cr-hd.fz { background: linear-gradient(135deg,#003087,#0057B8); }
.cr-hd.bl { background: linear-gradient(135deg,#0F1923,#003087); }
.cr-hd .cr-sz { font-family: var(--fd); font-size: 26px; font-weight: 900; }
.cr-hd .cr-tp { font-size: 12px; opacity: .85; margin-top: 4px; }
.cr-hd .pir-tag { font-size: 10px; font-weight: 800; background: rgba(255,255,255,.18); border-radius: 6px; padding: 3px 10px; margin-top: 8px; display: inline-block; letter-spacing: .05em; }
.cr-bd { padding: 14px; background: #fff; }
.cr-bd ul { list-style: none; }
.cr-bd ul li { font-size: 12px; color: var(--slate); padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; }
.cr-bd ul li:last-child { border: none; }
.cr-bd ul li span { font-weight: 700; color: var(--navy); }
.ice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 24px 0; }
.ice-card { background: linear-gradient(135deg,#E8F4FD,#C5E4F7); border: 1.5px solid var(--cold); border-radius: 14px; padding: 20px; text-align: center; }
.ice-card .ii { font-size: 44px; margin-bottom: 8px; }
.ice-card h3 { font-family: var(--fd); font-size: 19px; font-weight: 800; color: var(--navy); margin-bottom: 5px; }
.ice-card p { font-size: 11.5px; color: var(--slate); line-height: 1.6; }
.ice-card .cap { font-family: var(--fd); font-size: 22px; font-weight: 900; color: var(--blue); margin-top: 8px; }
.ice-card .cap-sub { font-size: 10px; color: var(--slate); }
.iso-tbl { width: 100%; border-collapse: collapse; margin: 20px 0; }
.iso-tbl th { background: var(--navy); color: #fff; padding: 9px 14px; font-size: 11.5px; font-weight: 700; }
.iso-tbl td { padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.iso-tbl tr:nth-child(even) td { background: var(--off); }
.iso-badge { display: inline-block; background: var(--grad); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.m-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 24px; }
.mt { border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border); }
.mt-hd { padding: 18px; text-align: center; color: #fff; }
.mt-hd.silver { background: linear-gradient(135deg,#64748B,#94A3B8); }
.mt-hd.gold { background: linear-gradient(135deg,#B45309,#D97706); }
.mt-hd.plat { background: linear-gradient(135deg,#003087,#00AEEF); }
.mt-name { font-family: var(--fd); font-size: 22px; font-weight: 900; }
.mt-freq { font-size: 11px; opacity: .85; margin-top: 4px; }
.mt-bd { padding: 14px; }
.mt-bd ul { list-style: none; }
.mt-bd ul li { font-size: 12px; color: var(--slate); padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.mt-bd ul li:last-child { border: none; }
.mt-bd ul li::before { content: '✓'; color: var(--sky); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.loc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.loc { background: var(--ice); color: var(--navy); font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 20px; border: 1px solid var(--cold); }
.loc.city { background: var(--navy); color: #fff; }
.incl-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 20px 0; }
.incl-box { background: var(--ice); border-radius: 10px; padding: 14px; text-align: center; }
.incl-box .ii { font-size: 22px; margin-bottom: 6px; }
.incl-box strong { color: var(--navy); display: block; font-size: 12.5px; margin-bottom: 3px; }
.incl-box p { font-size: 11px; color: var(--slate); line-height: 1.5; }
.trailer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 24px; }
.t-card { border-radius: 14px; border: 1.5px solid var(--border); overflow: hidden; }
.t-hd { padding: 20px; text-align: center; color: #fff; }
.t-hd.sm { background: linear-gradient(135deg,#0057B8,#00AEEF); }
.t-hd.md { background: linear-gradient(135deg,#003087,#0057B8); }
.t-hd.lg { background: linear-gradient(135deg,#0F1923,#003087); }
.t-hd .t-sz { font-family: var(--fd); font-size: 24px; font-weight: 900; }
.t-bd { padding: 16px; background: #fff; }
.t-bd p { font-size: 12.5px; color: var(--slate); line-height: 1.65; margin-bottom: 12px; }
.t-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; font-size: 11.5px; }
.t-meta div { background: var(--off); border-radius: 6px; padding: 7px; }
.t-meta span { color: var(--slate); display: block; font-size: 10px; }
.t-meta strong { color: var(--navy); }
.g-incl { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 24px 0; }
.g-incl .gi { background: var(--ice); border-radius: 10px; padding: 14px; text-align: center; }
.g-incl .gi-i { font-size: 22px; margin-bottom: 6px; }
.g-incl .gi strong { display: block; font-size: 12.5px; color: var(--navy); margin-bottom: 3px; }
.g-incl .gi p { font-size: 11px; color: var(--slate); line-height: 1.5; }
.nav-anchor { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.nav-anchor a { padding: 7px 14px; background: var(--ice); color: var(--navy); border-radius: 100px; font-size: 12px; font-weight: 700; border: 1px solid var(--cold); transition: .15s; }
.nav-anchor a:hover { background: var(--navy); color: #fff; }
.sec-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.sec-cta a,.sec-cta button { padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 7px; border: none; }
.sec-cta .primary { background: var(--navy); color: #fff; }
.sec-cta .primary:hover { background: var(--blue); }
.sec-cta .wa { background: #25D366; color: #fff; }
.sec-cta .wa:hover { background: #20b558; }
@media(max-width:900px){
  .det-grid,.cr-grid,.ice-grid,.m-tiers,.trailer-grid { grid-template-columns: 1fr 1fr; }
  .incl-grid,.g-incl { grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px){
  .det-grid,.cr-grid,.ice-grid,.m-tiers,.trailer-grid { grid-template-columns: 1fr; }
  .incl-grid,.g-incl { grid-template-columns: 1fr 1fr; }
}


/* upgrades */
section[id],div[id]{scroll-margin-top:84px;}
@media(max-width:1240px){.nav-links a{padding:8px 9px;font-size:12.5px;}}
@media(max-width:1080px){.nav-links a{padding:7px 7px;font-size:12px;}.logo img{height:40px!important;}}
.about-img img{height:100%;width:100%;object-fit:cover;filter:none;opacity:1;}
.about-img::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,48,135,0) 40%,rgba(15,25,35,.55));z-index:1;}
.about-img::after{z-index:2;}
.hero-photo{position:absolute;inset:0;background:url('/assets/img/work/rooftop.jpg') center/cover no-repeat;opacity:.14;pointer-events:none;}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 36px;}
.photo-strip img{width:100%;height:210px;object-fit:cover;border-radius:16px;border:1px solid var(--border);box-shadow:0 8px 28px rgba(0,48,135,.10);}
@media(max-width:900px){.photo-strip{grid-template-columns:1fr 1fr;}.photo-strip img:nth-child(3){display:none;}}
@media(max-width:600px){.photo-strip{grid-template-columns:1fr;}.photo-strip img{height:180px;}.photo-strip img:nth-child(3){display:block;}}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;margin-left:auto;}
.nav-toggle span{display:block;width:24px;height:3px;background:var(--navy);border-radius:2px;margin:5px 0;transition:.25s;}
@media(max-width:900px){
 .nav-toggle{display:block;}
 nav{position:sticky;}
 .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:12px 20px 20px;border-bottom:2px solid var(--border);box-shadow:0 16px 32px rgba(0,48,135,.12);gap:2px;max-height:calc(100vh - 110px);overflow-y:auto;}
 nav.open .nav-links{display:flex;}
 .nav-links a{display:block;padding:11px 12px;font-size:14px;}
 .nav-links .nav-cta{margin-top:8px;text-align:center;}
 nav.open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg);}
 nav.open .nav-toggle span:nth-child(2){opacity:0;}
 nav.open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}
.fsubmit:disabled{opacity:.6;cursor:wait;}
.form-ok{display:none;background:rgba(37,211,102,.15);border:1px solid rgba(37,211,102,.5);color:#7ce8a9;border-radius:12px;padding:16px 18px;font-size:14px;font-weight:600;line-height:1.6;margin-top:14px;}
.form-err{display:none;background:rgba(220,53,69,.15);border:1px solid rgba(220,53,69,.45);color:#f1919b;border-radius:12px;padding:14px 16px;font-size:13.5px;font-weight:600;margin-top:14px;}
@media(prefers-reduced-motion:no-preference){
 .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
 .rv.in{opacity:1;transform:none;}
}

/* ── SVG icon system ── */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0;stroke-width:1.6;}
.dc-icon .ic,.det-card .dc-icon .ic{width:100%;height:100%;}
.det-card .dc-icon{width:46px;height:46px;font-size:0;margin-bottom:16px;display:flex;align-items:center;justify-content:center;
  background:var(--ice);border:1px solid var(--cold);border-radius:12px;color:var(--blue);}
.det-card .dc-icon .ic{width:24px;height:24px;}
.det-card.dark .dc-icon{background:rgba(0,174,239,.16);border-color:rgba(0,174,239,.3);color:var(--sky);}
.svc-icon{color:var(--blue);}
.svc-icon .ic{width:26px;height:26px;}
.svc-card.featured .svc-icon{color:var(--navy);}
.hcard-icon{color:var(--sky);line-height:0;}
.hcard-icon .ic{width:34px;height:34px;}
.cicon{color:var(--sky);}
.cicon .ic{width:21px;height:21px;}
.room-icon{color:var(--blue);line-height:0;}
.room-icon .ic{width:26px;height:26px;}
.room-card.active .room-icon,.room-card:hover .room-icon{color:var(--navy);}
.ice-card .ii{color:var(--blue);line-height:0;margin-bottom:10px;}
.ice-card .ii .ic{width:34px;height:34px;}
.mt-name .ic{width:20px;height:20px;margin-right:2px;}
.core-badge .ic{width:11px;height:11px;margin-right:3px;}
.stars .ic{width:15px;height:15px;color:#F6B21B;}
.sec-cta .ic,.btn-primary .ic,.btn-outline .ic,.fsubmit .ic,.nav-cta .ic{width:16px;height:16px;margin-right:7px;}
.topbar .ic{width:13px;height:13px;margin-right:4px;color:var(--sky);}
.form-ok .ic{width:16px;height:16px;margin-right:6px;color:#25D366;}
.hbox .ic,.checklist .ic{color:var(--sky);}
/* real product photography */
.prod-img{background:#F2F6FB;padding:0;font-size:0;}
.prod-img img{width:100%;height:100%;object-fit:cover;display:block;}
/* crisp SVG tick bullets */
.det-card ul li::before,.mt-bd ul li::before{content:'';width:13px;height:13px;background-color:var(--sky);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;}
.det-card ul li::before{position:absolute;left:0;top:6px;}
.mt-bd ul li::before{flex-shrink:0;}
.checklist li::before{content:'';background-color:#fff;border-radius:0;background-image:none;width:15px;height:15px;min-width:15px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;}
.why-num .ic{width:17px;height:17px;}
p.inc{display:flex;align-items:center;gap:8px;}
p.inc .ic{width:14px;height:14px;color:var(--sky);}

/* hero headline must never clip on small screens */
@media(max-width:760px){.hero h1{font-size:clamp(30px,7.6vw,44px);}.hero{min-height:auto;padding:52px 0 60px;}}
@media(max-width:420px){.hero h1{font-size:clamp(27px,7.4vw,34px);}}
.hero h1{overflow-wrap:break-word;}
/* topbar: keep to one tidy line, drop the least-critical items when tight */
@media(max-width:900px){.topbar{font-size:11px;}.topbar .tb-opt{display:none;}}
/* if JS is unavailable, never hide content behind the reveal animation */
.no-js .rv{opacity:1!important;transform:none!important;}

.zone-photo{width:100%;height:170px;object-fit:cover;border-radius:14px;margin-bottom:22px;border:1px solid var(--cold);}
.tech-band{max-width:1280px;margin:0 auto 12px;padding:0 24px 64px;display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;}
.tech-band img{width:100%;border-radius:18px;background:#0F1923;}
.tech-band h3{font-family:var(--fd);font-size:30px;font-weight:900;color:var(--navy);margin:6px 0 12px;line-height:1.1;}
.tech-band p:last-child{font-size:15px;color:var(--slate);line-height:1.75;}
@media(max-width:820px){.tech-band{grid-template-columns:1fr;gap:22px;padding-bottom:48px;}.tech-band h3{font-size:25px;}}

.prod-img img{width:100%;height:100%;object-fit:cover;display:block;}
.prod-tabs .tab{font:inherit;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--mid);
  font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:100px;transition:.18s;}
.prod-tabs .tab:hover{border-color:var(--sky);color:var(--navy);}
.prod-tabs .tab.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.prod-card[hidden]{display:none;}
.prod-name{font-family:var(--fd);font-size:19px;font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:8px;}
.prod-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;}
.prod-size{font-size:11.5px;font-weight:700;color:var(--blue);letter-spacing:.02em;}
.shop-cta{text-align:center;margin-top:40px;}
.shop-cta p{font-size:14px;color:var(--slate);margin-bottom:16px;}
.btn-shop{display:inline-block;background:var(--grad);color:#fff;font-size:14px;font-weight:700;
  padding:14px 30px;border-radius:10px;transition:.2s;box-shadow:0 8px 26px rgba(0,87,184,.22);}
.btn-shop:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,87,184,.3);}
.prod-empty{text-align:center;padding:44px 20px;border:2px dashed var(--border);border-radius:16px;margin-bottom:20px;}
.prod-empty p{font-size:15px;color:var(--slate);max-width:640px;margin:0 auto 18px;line-height:1.7;}
.card-shop{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:700;color:var(--blue);text-decoration:none;}
.card-shop:hover{color:var(--navy);text-decoration:underline;}
.brand-pill,a.brand-pill{cursor:pointer;text-decoration:none;}

/* ── mobile overflow fixes ───────────────────────────────────────────── */
/* grid/flex items default to min-width:auto, which stops scroll wrappers
   (and long tables) from shrinking and pushes the whole page wide */
.si,.si>div,.det-card,.det-grid>*,.prod-card,.prod-body{min-width:0;}
div[style*="overflow-x:auto"]{max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;}
div[style*="overflow-x:auto"] table{min-width:480px;}
/* hard-coded 4-column inline grids must collapse on small screens */
@media(max-width:900px){[style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}}
@media(max-width:560px){[style*="repeat(4,1fr)"]{grid-template-columns:1fr!important;}}
.hero{overflow:hidden;}

/* product card footer: spec shrinks, button always holds the right edge */
.prod-card{display:flex;flex-direction:column;}
.prod-body{display:flex;flex-direction:column;flex:1;}
.prod-desc{flex:1;}
.prod-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;margin-top:16px;}
.prod-size{flex:1 1 auto;min-width:0;line-height:1.45;}
.prod-footer .btn-sm{flex:0 0 auto;white-space:nowrap;}
@media(max-width:420px){.prod-footer{flex-wrap:wrap;}.prod-footer .btn-sm{width:100%;text-align:center;}}

/* room-size selector */
.room-card{font:inherit;width:100%;display:block;}
.room-card.active{border-color:var(--sky);background:var(--ice);box-shadow:0 8px 24px rgba(0,174,239,.16);}
.room-card:focus-visible{outline:3px solid var(--sky);outline-offset:2px;}
.room-result{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:#fff;border:1.5px solid var(--cold);
  border-left:5px solid var(--sky);border-radius:14px;padding:20px 24px;margin:0 0 32px;}
.rr-btu{font-family:var(--fd);font-size:28px;font-weight:900;color:var(--navy);line-height:1;white-space:nowrap;}
.rr-text{flex:1;min-width:200px;}
.rr-text strong{display:block;font-size:13px;color:var(--blue);font-weight:800;margin-bottom:3px;}
.rr-text p{font-size:13.5px;color:var(--slate);line-height:1.6;}
.rr-cta{background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:12px 22px;border-radius:9px;white-space:nowrap;transition:.2s;}
.rr-cta:hover{background:var(--blue);transform:translateY(-1px);}
@media(max-width:600px){.room-result{gap:14px;padding:18px;}.rr-cta{width:100%;text-align:center;}}

/* full-width reference tables (lifted out of the card grid so no column is clipped) */
.tbl-panel{background:#fff;border:1.5px solid var(--cold);border-radius:16px;overflow:hidden;margin:30px 0 8px;
  box-shadow:0 10px 30px rgba(0,48,135,.07);}
.tbl-panel-hd{display:flex;align-items:center;gap:14px;padding:18px 24px;background:var(--ice);border-bottom:1.5px solid var(--cold);}
.tbl-panel-hd h3{font-family:var(--fd);font-size:20px;font-weight:800;color:var(--navy);margin:0;}
.tbl-panel-hd .tp-ic{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--cold);border-radius:10px;color:var(--blue);}
.tbl-panel-hd .tp-ic .ic{width:20px;height:20px;}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl-panel table{width:100%;border-collapse:collapse;margin:0;min-width:560px;}
.tbl-panel th{background:var(--navy);color:#fff;text-align:left;padding:12px 20px;font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;}
.tbl-panel td{padding:13px 20px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--mid);}
.tbl-panel tr:last-child td{border-bottom:none;}
.tbl-panel tr:nth-child(even) td{background:#F7FAFD;}
.tbl-panel tr:hover td{background:var(--ice);}
.tbl-panel .iso-badge{background:var(--grad);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:5px;white-space:nowrap;}
@media(max-width:600px){.tbl-panel-hd{padding:15px 18px;}.tbl-panel-hd h3{font-size:17px;}.tbl-panel td,.tbl-panel th{padding:11px 15px;}}

/* real Google reviews */
.tcard .loc{font-size:12px;color:rgba(255,255,255,.5);}
.g-rating{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;max-width:560px;
  margin:36px auto 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:20px 28px;transition:.2s;}
.g-rating:hover{background:rgba(255,255,255,.1);border-color:rgba(0,174,239,.4);transform:translateY(-2px);}
.g-score{font-family:var(--fd);font-size:42px;font-weight:900;color:#fff;line-height:1;}
.g-stars{display:flex;gap:3px;color:#FFC107;}
.g-stars .ic{width:17px;height:17px;}
.g-meta{font-size:13px;color:rgba(255,255,255,.72);line-height:1.6;}
.g-meta strong{color:#fff;}
@media(max-width:600px){.g-rating{gap:12px;padding:18px;}.g-score{font-size:34px;}}
.tcard .tmeta{background:none;border:none;padding:0;border-radius:0;font-size:12px;font-weight:500;
  color:rgba(255,255,255,.5);letter-spacing:.01em;margin-top:4px;display:block;}

/* product spec bullets */
.prod-specs{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px;}
.prod-specs li{position:relative;padding-left:17px;font-size:12.2px;line-height:1.5;color:var(--slate);}
.prod-specs li::before{content:'';position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:2px;
  background:var(--grad);opacity:.85;}

.shop-cta{text-align:center;margin-top:40px;}
.shop-cta p{max-width:620px;margin:0 auto 18px;}
.shop-cta .btn-shop{display:inline-block;margin:6px;vertical-align:middle;}
.btn-shop.alt{background:#fff;color:var(--navy);border:2px solid var(--cold);box-shadow:none;}
.btn-shop.alt:hover{border-color:var(--sky);color:var(--blue);background:var(--ice);}
@media(max-width:480px){.shop-cta .btn-shop{display:block;margin:8px auto;max-width:280px;}}

/* ── product detail pages ── */
.pd-wrap{padding:34px 0 20px;background:var(--off);}
.pd-wrap .crumb{font-size:12.5px;color:var(--slate);margin-bottom:22px;}
.pd-wrap .crumb a{color:var(--blue);font-weight:600;}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
  background:#fff;border:1.5px solid var(--cold);border-radius:20px;padding:32px;
  box-shadow:0 14px 40px rgba(0,48,135,.07);}
.pd-media{position:relative;background:linear-gradient(160deg,#fff,var(--ice));border:1px solid var(--border);
  border-radius:14px;display:flex;align-items:center;justify-content:center;padding:22px;min-height:300px;}
.pd-media img{max-width:100%;height:auto;object-fit:contain;}
.pd-media .prod-badge{top:14px;left:14px;}
.pd-brand{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:8px;}
.pd-info h1{font-family:var(--fd);font-size:clamp(26px,3vw,38px);font-weight:900;color:var(--navy);line-height:1.1;margin-bottom:14px;}
.pd-desc{font-size:15.5px;color:var(--slate);line-height:1.75;margin-bottom:18px;}
.pd-size{display:inline-block;background:var(--ice);border:1px solid var(--cold);color:var(--navy);
  font-size:12.5px;font-weight:800;padding:7px 15px;border-radius:8px;margin-bottom:20px;}
.pd-specs{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:9px;}
.pd-specs li{position:relative;padding-left:26px;font-size:14px;color:var(--mid);line-height:1.55;}
.pd-specs li::before{content:'';position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:4px;background:var(--grad);}
.pd-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.pd-btn{flex:1 1 190px;text-align:center;background:var(--navy);color:#fff;font-size:14.5px;font-weight:700;
  padding:15px 22px;border-radius:10px;transition:.2s;}
.pd-btn:hover{background:var(--blue);transform:translateY(-2px);}
.pd-btn.wa{background:#25D366;}
.pd-btn.wa:hover{background:#1eb955;}
.pd-note{font-size:12.5px;color:var(--slate);line-height:1.6;}
.pd-cats{margin-top:14px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9AA9BC;}
.pd-included{background:#fff;border:1.5px solid var(--cold);border-radius:18px;padding:30px 34px;margin-top:26px;}
.pd-included h2{font-family:var(--fd);font-size:23px;font-weight:900;color:var(--navy);margin-bottom:16px;}
.pd-included ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 26px;}
.pd-included li{position:relative;padding-left:26px;font-size:13.5px;color:var(--slate);line-height:1.55;}
.pd-included li::before{content:'';position:absolute;left:2px;top:4px;width:8px;height:14px;
  border:solid var(--sky);border-width:0 2.5px 2.5px 0;transform:rotate(42deg);}
.pd-related{margin-top:34px;}
.pd-related h2{font-family:var(--fd);font-size:23px;font-weight:900;color:var(--navy);margin-bottom:18px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.rel-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;transition:.2s;display:block;}
.rel-card:hover{border-color:var(--sky);box-shadow:0 12px 30px rgba(0,48,135,.11);transform:translateY(-3px);}
.rel-img{height:130px;background:linear-gradient(160deg,#fff,var(--ice));display:flex;align-items:center;justify-content:center;padding:12px;}
.rel-img img{max-height:106px;max-width:100%;object-fit:contain;}
.rel-b{padding:13px 15px 16px;border-top:1px solid var(--border);}
.rel-b span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:4px;}
.rel-b strong{display:block;font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.35;}
@media(max-width:900px){.pd-grid{grid-template-columns:1fr;gap:26px;padding:22px;}
 .pd-included ul{grid-template-columns:1fr;}.rel-grid{grid-template-columns:1fr;}}
@media(max-width:600px){.pd-cta{flex-direction:column;}.pd-btn{flex:1 1 auto;}}

/* multi-page chrome */
.nav-links a.on{color:var(--navy);background:var(--ice);}
.page-hero{background:var(--grad-dark);color:#fff;padding:64px 0 56px;position:relative;overflow:hidden;}
.page-hero::after{content:'';position:absolute;inset:0;background:url('/assets/img/work/vrf-bank.jpg') center/cover no-repeat;opacity:.13;}
.page-hero .si{position:relative;z-index:2;}
.page-hero .crumb{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:14px;}
.page-hero .crumb a{color:rgba(255,255,255,.65);}
.page-hero .crumb a:hover{color:#fff;}
.page-hero h1{font-family:var(--fd);font-size:clamp(30px,4.4vw,52px);font-weight:900;line-height:1.05;margin-bottom:14px;}
.page-hero p{font-size:16px;color:rgba(255,255,255,.8);line-height:1.7;max-width:720px;}
@media(max-width:760px){.page-hero{padding:44px 0 40px;}}
.cta-band{background:var(--grad);color:#fff;text-align:center;padding:64px 24px;}
.cta-band h2{font-family:var(--fd);font-size:clamp(26px,3.4vw,40px);font-weight:900;margin-bottom:12px;color:#fff;}
.cta-band p{font-size:15.5px;color:rgba(255,255,255,.85);max-width:600px;margin:0 auto 26px;line-height:1.65;}
.cta-band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-band a{padding:15px 30px;border-radius:10px;font-size:14.5px;font-weight:700;transition:.2s;}
.cta-band .p1{background:#fff;color:var(--navy);}
.cta-band .p2{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.45);}
.cta-band a:hover{transform:translateY(-2px);}
/* 404 */
.nf-wrap{background:var(--off);padding:70px 0 80px;text-align:center;}
.nf-code{font-family:var(--fd);font-size:clamp(64px,13vw,130px);font-weight:900;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px;}
.nf-wrap h1{font-family:var(--fd);font-size:clamp(26px,4vw,42px);font-weight:900;color:var(--navy);margin-bottom:14px;}
.nf-lead{font-size:16px;color:var(--slate);line-height:1.75;max-width:620px;margin:0 auto 32px;}
.nf-lead a{color:var(--blue);font-weight:700;}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px;margin:0 auto 34px;}
.nf-links a{background:#fff;border:1.5px solid var(--cold);color:var(--navy);font-size:13.5px;font-weight:700;
  padding:11px 20px;border-radius:9px;transition:.2s;}
.nf-links a:hover{border-color:var(--sky);color:var(--blue);background:var(--ice);transform:translateY(-2px);}
.nf-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.nf-cta a{padding:15px 30px;border-radius:10px;font-size:14.5px;font-weight:700;transition:.2s;}
.nf-cta .p1{background:var(--navy);color:#fff;}
.nf-cta .p1:hover{background:var(--blue);}
.nf-cta .p2{background:#25D366;color:#fff;}
.nf-cta a:hover{transform:translateY(-2px);}

.page-hero + section{padding-top:56px;}
.page-hero + section .photo-strip{margin-top:0;}


/* Our Work gallery */
.gw-grid{columns:4 240px;column-gap:16px;}
.gw-item{break-inside:avoid;margin:0 0 16px;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,48,135,.08);background:#000;}
.gw-item img{display:block;width:100%;height:auto;transition:transform .45s ease,opacity .3s;}
.gw-item:hover img{transform:scale(1.05);opacity:.92;}
.gw-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;
  font-size:12px;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgba(6,14,24,.82));
  opacity:0;transform:translateY(6px);transition:.3s;}
.gw-item:hover figcaption{opacity:1;transform:none;}
@media(max-width:560px){.gw-grid{columns:2 140px;column-gap:12px;}.gw-item{margin-bottom:12px;}
  .gw-item figcaption{opacity:1;transform:none;font-size:11px;padding:16px 10px 8px;}}

/* Authorised-supplier logo chips (real logos on white, text-pill fallback) */
.f-brand{background:#fff;border-radius:8px;padding:9px 15px;display:inline-flex;align-items:center;justify-content:center;min-width:96px;height:46px;box-sizing:border-box;transition:.2s;}
.f-brand img{max-height:26px;max-width:110px;width:auto;height:auto;object-fit:contain;display:block;}
.f-brand i{display:none;}
.f-brand:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.28);}
.f-brand.txt{background:none;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:rgba(255,255,255,.5);font-family:var(--fd);font-size:14px;font-weight:800;letter-spacing:.06em;height:auto;padding:6px 16px;min-width:0;transform:none;box-shadow:none;}
.f-brand.txt img{display:none;}
.f-brand.txt i{display:inline;font-style:normal;}
.f-brand.txt:hover{color:#fff;border-color:rgba(255,255,255,.3);transform:none;box-shadow:none;}

/* case studies / our work */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.cs-card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.2s;display:flex;flex-direction:column;}
.cs-card:hover{box-shadow:0 16px 44px rgba(0,48,135,.13);transform:translateY(-4px);}
.cs-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0F1923;}
.cs-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cs-card:hover .cs-img img{transform:scale(1.05);}
.cs-tag{position:absolute;top:12px;left:12px;background:rgba(0,48,135,.92);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:100px;}
.cs-body{padding:22px 24px 26px;flex:1;}
.cs-body h3{font-family:var(--fd);font-size:21px;font-weight:800;color:var(--navy);line-height:1.15;margin-bottom:9px;}
.cs-body p{font-size:13.5px;color:var(--slate);line-height:1.65;}
.cs-note{text-align:center;font-size:14.5px;color:var(--slate);margin-top:40px;}
.cs-note a{color:var(--blue);font-weight:700;}
@media(max-width:900px){.cs-grid{grid-template-columns:1fr 1fr;gap:18px;}}
@media(max-width:560px){.cs-grid{grid-template-columns:1fr;}}