@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap');
/* Commercial Kitchen Solution — style.css 2026 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #082B4C;
  --navy-dark: #051D33;
  --orange: #F58220;
  --orange-hover: #D96E10;
  --orange-light: #fff4e6;
  --ink: #17212B;
  --muted: #536273;
  --line: #E4E8EC;
  --soft: #F6F8FA;
  --white: #fff;
  --shadow-sm: 0 2px 8px rgba(8,43,76,.07);
  --shadow: 0 12px 36px rgba(5,29,51,.12);
  --radius: 12px;
  --radius-img: 14px;
  --radius-btn: 8px;
  --section: 80px;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--white); line-height: 1.6; font-size: 16px; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Topbar ── */
.topbar { background: var(--navy-dark); color: rgba(255,255,255,.78); font-size: 13px; padding: 0; }
.topbar-inner { display: flex; align-items: center; justify-content: flex-end; padding: 7px 0; }
.topbar-links { display: flex; gap: 24px; align-items: center; }
.topbar-links a, .topbar-address { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.82); font-weight: 500; font-size: 13px; transition: color .2s; white-space: nowrap; }
.topbar-links a:hover { color: var(--orange); }
.topbar-links svg, .topbar-address svg { opacity: .65; flex-shrink: 0; }

/* ── Header ── */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; }
.nav-wrap { display: flex; align-items: center; gap: 20px; padding: 0; height: 78px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 46px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.brand > span:last-child { font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }
.brand > span:last-child small { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .01em; margin-top: 2px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 7px; font-size: 15px; font-weight: 500; color: var(--muted); transition: color .18s, background .18s; white-space: nowrap; position: relative; }
.nav a:hover { color: var(--navy); background: var(--soft); }
.nav a.active { color: var(--navy); font-weight: 600; }
.nav a.active::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 18px; height: 2px; border-radius: 2px; background: var(--orange); }
.header-quote { margin-left: 10px; white-space: nowrap; flex-shrink: 0; }
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--navy); }

/* ── Container ── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 26px; border-radius: var(--radius-btn); font-weight: 600; font-size: 15px; cursor: pointer; border: none; transition: background .18s, color .18s, box-shadow .18s; white-space: nowrap; font-family: inherit; }
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-dark { background: var(--navy); color: var(--white); }
.btn-dark:hover { background: var(--navy-dark); }
.btn-outline { border: 1.5px solid var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--navy); }

/* ── Hero ── */
.hero {
  position: relative;
  background-image: url('../images/home-banner.png');
  background-size: cover;
  background-position: center 40%;
  min-height: 400px;
  padding: 32px 0 40px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    #fff 0%,
    #fff 28%,
    rgba(255,255,255,.94) 42%,
    rgba(255,255,255,.55) 56%,
    rgba(255,255,255,.12) 70%,
    rgba(255,255,255,0) 82%
  );
  z-index: 0;
}
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 460px 240px; gap: 64px; align-items: center; min-height: 300px; }
.hero-copy { max-width: 460px; }
.eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--orange); text-transform: uppercase; margin-bottom: 18px; }
.hero-copy h1 { font-size: clamp(26px, 2vw, 38px); font-weight: 800; line-height: 1.08; margin-bottom: 18px; letter-spacing: -.02em; color: var(--navy); max-width: 480px; }
.hero-copy h1 span { color: var(--orange); }
.hero-copy > p { font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 440px; margin-bottom: 10px; }
.hero-copy .hero-partner-note { font-size: 13.5px; color: var(--muted); margin-bottom: 28px; max-width: 480px; }
.hero-copy .hero-partner-note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hero-copy .hero-partner-note a:hover { color: var(--orange); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
/* Hero panel — floats over the right side of the banner image */
.hero-panel {
  background: var(--navy);
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 10px 32px rgba(5,29,51,.24);
}
.hero-panel h3 { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--orange); text-transform: uppercase; margin-bottom: 13px; }
.quick { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.quick:last-child { margin-bottom: 0; }
.quick-icon { width: 24px; height: 24px; border: 1.5px solid rgba(245,130,32,.45); border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-icon svg { stroke: var(--orange); }
.quick-text { font-size: 13px; color: rgba(255,255,255,.9); line-height: 1.4; font-weight: 500; }

/* ── Partnership Tile (directly below hero) ── */
.pt-section { background: var(--white); border-bottom: 1px solid var(--line); padding: 28px 0 40px; }
.pt-tile { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 16px rgba(8,43,76,.05); overflow: hidden; }
.pt-col { padding: 36px 40px; }
.pt-col:not(:last-child) { border-right: 1px solid var(--line); }
.pt-col .kicker { display: block; margin-bottom: 14px; }
.pt-col h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.12; }
.pt-col > p { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
.pt-col > p:last-of-type { margin-bottom: 0; }
.pt-col .pt-note { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
/* Companies side-by-side */
.pt-companies { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.pt-co { flex: 1; }
.pt-logo { width: 44px; height: 44px; border-radius: 9px; overflow: hidden; background: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.pt-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.pt-sep { width: 28px; height: 28px; border-radius: 50%; background: var(--orange-light); color: var(--orange); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 4px; }
.pt-co-name { font-size: 13.5px; font-weight: 800; color: var(--navy); margin-bottom: 4px; letter-spacing: -.01em; line-height: 1.3; }
.pt-co-role { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pt-visit { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--orange); padding-bottom: 1px; transition: color .18s; }
.pt-visit:hover { color: var(--orange); }

/* ── Sections ── */
.section { padding: var(--section) 0; }
.section.soft { background: var(--soft); }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; letter-spacing: -.02em; margin-top: 6px; color: var(--navy); }
.section-head p { font-size: 16px; color: var(--muted); max-width: 420px; line-height: 1.65; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .13em; color: var(--orange); text-transform: uppercase; }

/* ── Grids ── */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* ── Cards ── */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.icon-box { width: 44px; height: 44px; border-radius: 10px; background: var(--orange-light); color: var(--orange); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.icon-box svg { stroke: var(--orange); }
.card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.card p { font-size: 15px; color: var(--muted); line-height: 1.6; }
.link { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--navy); transition: color .18s; }
.link:hover { color: var(--orange); }

/* ── Split ── */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; }
.image-frame { border-radius: var(--radius-img); overflow: hidden; position: relative; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.image-frame:hover <strong>img</strong> { transform: scale(1.03); }
.floating-stat { position: absolute; bottom: 20px; left: 20px; background: var(--white); border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow); }
.floating-stat strong { display: block; font-size: 14px; font-weight: 800; color: var(--navy); }
.floating-stat span { font-size: 12px; color: var(--muted); }
.list { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.list-item { display: flex; gap: 12px; align-items: flex-start; }
.dot-check { color: var(--orange); font-size: 16px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.list-item > div { font-size: 15.5px; color: var(--muted); line-height: 1.55; }
.list-item > div b { color: var(--ink); display: block; margin-bottom: 2px; }

/* ── Showroom Section ── */
.showroom-section { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.showroom-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; padding: var(--section) 0; }
.showroom-image { border-radius: var(--radius-img); overflow: hidden; aspect-ratio: 4/3; }
.showroom-image img { width: 100%; height: 100%; object-fit: cover; }
.showroom-address { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.showroom-address strong { font-size: 15px; color: var(--navy); font-weight: 700; }
.showroom-address span { font-size: 14px; color: var(--muted); }
.showroom-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ── Process ── */
.process { display: grid; grid-template-columns: repeat(4,1fr); position: relative; }
.process::before { content: ""; position: absolute; top: 22px; left: 68px; right: 68px; height: 1px; background: var(--line); }
.process-step { padding: 0 20px 28px; z-index: 1; }
.num { width: 44px; height: 44px; border-radius: 11px; background: var(--orange); color: #fff; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; position: relative; z-index: 1; }
.process-step h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.process-step p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.process-step .step-partner { font-size: 12px; color: var(--orange); font-weight: 600; margin-top: 6px; }

/* ── ProTech Callout ── */
.protech-callout { background: #f0f6ff; border: 1px solid #d4e3f5; border-radius: var(--radius); padding: 32px 36px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 48px; }
.protech-callout h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.protech-callout p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ── CTA ── */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--navy); border-radius: var(--radius); padding: 44px 48px; flex-wrap: wrap; }
.cta h2 { font-size: clamp(20px, 1.9vw, 28px); font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; }
.cta p { font-size: 16px; color: rgba(255,255,255,.65); }

/* ── Page Hero ── */
.page-hero { background: var(--navy); padding: 52px 0 56px; }
.breadcrumb { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 12px; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
.page-hero h1 { font-size: clamp(30px, 2.8vw, 42px); font-weight: 800; color: #fff; line-height: 1.12; margin-bottom: 14px; letter-spacing: -.02em; }
.page-hero p { font-size: 17px; color: rgba(255,255,255,.65); max-width: 600px; line-height: 1.6; }

/* ── Products ── */
.product-card .product-image { aspect-ratio: 4/3; overflow: hidden; border-radius: 10px; margin-bottom: 16px; background: var(--soft); }
.product-card .product-image img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .35s; }
.product-card:hover .product-image img { transform: scale(1.05); }
.product-body { display: flex; flex-direction: column; }
.badge { display: inline-block; background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; margin-bottom: 9px; width: fit-content; }
.product-card h3 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.product-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; flex: 1; }
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-btn { padding: 7px 15px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--white); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s; font-family: inherit; }
.filter-btn.active, .filter-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.supplier-note { background: #f0f6ff; border: 1px solid #d4e3f5; border-radius: var(--radius); padding: 16px 22px; font-size: 14px; color: #374b63; margin-bottom: 36px; line-height: 1.6; }
.product-line-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 32px; }
.product-line-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.line-label { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 5px; margin-bottom: 10px; }
.line-label.cold { background: #ddf0ff; color: #075ca7; }
.line-label.lumin { background: #d4f5e2; color: #156c3c; }
.line-label.hot { background: #ffe8d4; color: #b84a00; }
.product-line-panel h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.category-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.category-tags span { font-size: 12px; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; }
.catalog-callout { background: var(--navy); border-radius: var(--radius); padding: 44px 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.catalog-callout .kicker { color: rgba(255,255,255,.55); display: block; margin-bottom: 8px; }
.catalog-callout h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 10px; }
.catalog-callout p { font-size: 14.5px; color: rgba(255,255,255,.65); line-height: 1.6; }

/* ── Projects ── */
.project-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.project { border-radius: var(--radius-img); overflow: hidden; position: relative; aspect-ratio: 4/3; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 4px 24px rgba(8,43,76,.16); }
.project img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.project:hover img { transform: scale(1.06); }
.project-content { position: relative; z-index: 1; padding: 20px; background: linear-gradient(to top, rgba(5,29,51,.85) 0%, transparent 100%); }
.project-content small { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--orange); text-transform: uppercase; display: block; margin-bottom: 4px; }
.project-content h3 { font-size: 16px; font-weight: 700; color: #fff; }

/* ── About ── */
.about-role-box { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin-top: 24px; }
.about-role-box h4 { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--orange); text-transform: uppercase; margin-bottom: 10px; }
.about-role-box p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.about-role-box a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Contact ── */
.contact-grid { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: flex-start; }
.contact-card { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 32px 28px; }
.contact-card h3 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.contact-card > p { font-size: 14px; color: rgba(255,255,255,.65); margin-bottom: 24px; line-height: 1.6; }
.contact-point { margin-bottom: 20px; }
.contact-point b { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 5px; }
.contact-point a { color: rgba(255,255,255,.85); font-size: 14.5px; display: block; transition: color .18s; }
.contact-point a:hover { color: var(--orange); }
.contact-point p { color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.55; }
.contact-card .partner-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.contact-card .partner-note p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; margin-bottom: 8px; }
.contact-card .partner-note a { color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.contact-card .partner-note a:hover { color: var(--orange); }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { border: 1.5px solid var(--line); border-radius: 8px; padding: 11px 14px; font-size: 14px; color: var(--ink); background: var(--white); font-family: inherit; transition: border-color .18s; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); }
.field textarea { min-height: 110px; resize: vertical; }
.field .helper { font-size: 12px; color: var(--muted); margin-top: 3px; }
.form-message { background: #d4f5e2; border: 1px solid #a3d9b8; color: #145228; border-radius: 8px; padding: 14px 16px; font-size: 14px; display: none; margin-bottom: 16px; }

/* ── FAQ ── */
.faq { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-q { width: 100%; background: none; border: none; padding: 18px 22px; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background .18s; font-family: inherit; }
.faq-q:hover { background: var(--soft); }
.faq-q span:last-child { font-size: 20px; color: var(--orange); flex-shrink: 0; font-weight: 400; }
.faq-a { display: none; padding: 0 22px 18px; font-size: 14px; color: var(--muted); line-height: 1.65; }
.faq-item.open .faq-a { display: block; }

/* ── Footer ── */
.footer { background: var(--soft); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding: 52px 0 44px; }
.footer .brand { opacity: 1; margin-bottom: 14px; }
.footer .brand > span:last-child { color: var(--navy); }
.footer .brand > span:last-child small { color: var(--muted); }
.footer-grid > div > p { font-size: 13.5px; color: var(--muted); line-height: 1.65; max-width: 280px; }
.footer h4 { color: var(--ink); margin: 0 0 14px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; }
.footer-grid a { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; transition: color .18s; }
.footer-grid a:hover { color: var(--orange); }
.footer-grid > div:last-child p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.footer-partner-line { display: none; }
.footer-partner-line a { color: var(--navy) !important; font-weight: 600; display: inline !important; }
.footer-partner-line a:hover { color: var(--orange) !important; }
.footer-bottom { border-top: 1px solid var(--line); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── Ventilation ── */
.ventilation-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }

/* ── Partnership (inner pages / small variant) ── */
.partnership-inner-compact { background: #f0f6ff; border: 1px solid #d4e3f5; border-radius: var(--radius); padding: 28px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 48px; }
.partnership-inner-compact h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.partnership-inner-compact p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ── Responsive ── */

/* ── Footer Partnership Banner ──────────────────────────────────────── */
.footer-partner-banner {
  background: var(--navy-dark);
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fpb-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.fpb-label {
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  letter-spacing: .01em;
}
.fpb-logos {
  display: flex;
  align-items: center;
  gap: 20px;
}
.fpb-logo-item {
  display: flex;
  align-items: center;
  gap: 9px;
}
.fpb-logo-item img { height: 32px; width: auto; }
.fpb-logo-text { font-size: 12.5px; font-weight: 700; color: var(--white); line-height: 1.25; }
.fpb-logo-text small { display: block; font-size: 10px; font-weight: 500; color: rgba(255,255,255,.5); }
.fpb-divider { width: 1px; height: 32px; background: rgba(255,255,255,.18); flex-shrink: 0; }
.fpb-plus {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Compact Home Partnership Card ──────────────────────────────────── */
.hpc-section { padding: 0 0 56px; }
.home-partner-card {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--white);
}
.hpc-left {}
.hpc-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; display: block;
}
.hpc-logos { display: flex; align-items: center; gap: 14px; }
.hpc-co-img { height: 36px; width: auto; display: block; margin-bottom: 5px; }
.hpc-co-name { font-size: 12px; font-weight: 700; color: var(--navy); }
.hpc-co-role { font-size: 10.5px; color: var(--muted); }
.hpc-sep {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hpc-visit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 700; color: var(--navy);
  border-bottom: 2px solid var(--orange); padding-bottom: 1px; text-decoration: none;
}
.hpc-visit:hover { color: var(--orange); }

/* ── About Page Partnership Section ─────────────────────────────────── */
.about-partner-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(8,43,76,.05);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  overflow: hidden;
}
.apb-left { padding: 32px 36px; border-right: 1px solid var(--line); }
.apb-right { padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; }
.about-partner-block .apb-kicker {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 12px; display: block;
}
.about-partner-block h3 { font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.2; margin-bottom: 10px; letter-spacing: -.015em; }
.about-partner-block p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-bottom: 0; }
.apb-logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.apb-co img { height: 44px; width: 44px; border-radius: 9px; object-fit: contain; padding: 3px; background: var(--navy); display: block; margin-bottom: 10px; }
.apb-co-name { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 3px; }
.apb-co-role { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.apb-sep {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange-light); color: var(--orange);
  font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.apb-visit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 700;
  color: var(--navy); border-bottom: 2px solid var(--orange);
  padding-bottom: 2px; text-decoration: none; width: fit-content;
}
.apb-visit:hover { color: var(--orange); }


/* ── Pro Tech styled brand mark (no logo file available) ─────────── */
.pt-brand-mark {
  width: 44px; height: 44px; border-radius: 9px;
  background: var(--navy); color: var(--white);
  font-size: 13px; font-weight: 800; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; flex-shrink: 0;
}
.apb-brand-mark {
  width: 44px; height: 44px; border-radius: 9px;
  background: var(--navy); color: var(--white);
  font-size: 13px; font-weight: 800; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; flex-shrink: 0;
}


/* About partner right — stacked company cards */
.apb-co-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 12px;
  background: var(--soft);
}
.apb-co-card:last-child { margin-bottom: 0; }
.apb-co-card-info { flex: 1; }
.apb-co-card-name { font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 3px; }
.apb-co-card-role { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── Responsive adjustments ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .fpb-inner { gap: 16px; }
  .home-partner-card { flex-direction: column; align-items: flex-start; }
  .about-partner-block { padding: 28px 24px; }
}

@media(max-width:1100px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
  .process { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .process::before { display: none; }
  .product-line-grid { grid-template-columns: 1fr; }
  .showroom-inner { grid-template-columns: 1fr; }
  .catalog-callout { grid-template-columns: 1fr; }
  .protech-callout { grid-template-columns: 1fr; }
  .pt-tile { grid-template-columns: 1fr; }
  .pt-col:not(:last-child) { border-right: none; border-bottom: 1px solid var(--line); }
  .hero .container { grid-template-columns: 420px 220px; gap: 48px; }
}
@media(max-width:820px) {
  :root { --section: 56px; }
  .hero .container { grid-template-columns: 1fr; justify-content: initial; }
  .hero-panel { display: none; }
  .hero::before { background: linear-gradient(to right, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 55%, rgba(255,255,255,.82) 100%); }
  .split, .ventilation-split { grid-template-columns: 1fr; gap: 36px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .project-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
  .section-head { flex-direction: column; gap: 12px; }
  .section-head p { max-width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
  .topbar-address { display: none; }
  .mobile-toggle { display: flex; align-items: center; justify-content: center; margin-left: auto; }
  .nav { display: none; flex-direction: column; align-items: flex-start; gap: 0; position: absolute; top: 78px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px 0; box-shadow: 0 8px 24px rgba(8,43,76,.1); z-index: 200; }
  .nav.open { display: flex; }
  .nav a { padding: 13px 24px; border-radius: 0; width: 100%; color: var(--ink); font-size: 16px; }
  .nav a.active { background: transparent; }
  .nav a.active::after { display: none; }
  .header-quote { display: none; }
  .hero-copy > p { font-size: 16px; }
  .process { grid-template-columns: 1fr; }
  .pt-companies { flex-direction: column; }
}
@media(max-width:480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .showroom-actions { flex-direction: column; }
  .topbar-links a[href^="mailto"] { display: none; }
}


/* =========================================================
   SEPTEMBER 2026 HOME / BRAND REFINEMENTS
   ========================================================= */

/* Updated CKS logo: no navy/blue tile or border around the supplied icon */
.brand-mark,
.pt-logo{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.brand-mark img,
.pt-logo img{
  padding: 0 !important;
  object-fit: contain !important;
}

/* Make the navy/blue banner panel slightly more prominent */
.hero .container{
  grid-template-columns: 460px 280px !important;
  gap: 58px !important;
}
.hero-panel{
  padding: 23px 21px !important;
  min-height: 226px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Full Pro Tech wordmark replaces the old PT square */
.protech-wordmark{
  width:118px;
  min-height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  margin-bottom:10px;
  color:var(--navy);
  line-height:1;
}
.protech-wordmark strong{
  display:block;
  font-size:16px;
  font-weight:800;
  letter-spacing:.035em;
  white-space:nowrap;
}
.protech-wordmark strong::after{
  content:"";
  display:block;
  width:100%;
  height:3px;
  margin-top:4px;
  border-radius:4px;
  background:var(--orange);
}
.protech-wordmark small{
  display:block;
  margin-top:5px;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.13em;
  color:#536273;
}

/* Center the Pro Tech visit link below both company headings */
.pt-col .pt-visit{
  display:flex !important;
  width:max-content;
  margin:4px auto 0 !important;
  text-align:center;
  justify-content:center;
}
.home-partner-card .hpc-visit{
  text-align:center;
}

/* Slightly stronger secondary text contrast throughout the site */
.hero-copy > p,
.hero-copy .hero-partner-note,
.pt-col > p,
.pt-col .pt-note,
.pt-co-role,
.section-head p,
.card p,
.list-item > div,
.showroom-address span,
.process-step p,
.protech-callout p,
.product-card p,
.category-tags span,
.about-role-box p,
.faq-a,
.footer-grid > div > p,
.footer-grid a,
.footer-bottom,
.hpc-label,
.hpc-co-role,
.apb-co-role,
.apb-co-card-role{
  color:#536273;
}

@media(max-width:1100px){
  .hero .container{grid-template-columns:420px 250px !important;gap:42px !important}
}
@media(max-width:820px){
  .hero .container{grid-template-columns:1fr !important}
}


/* Supplied Protech HVAC & Refrigeration logo — used site-wide */
.protech-logo-img{
  display:block;
  width:86px;
  height:86px;
  object-fit:contain;
  flex:0 0 auto;
}
.pt-col .protech-logo-img{
  margin:0 auto 10px;
}
.home-partner-card .protech-logo-img,
.about-partner-block .protech-logo-img,
.apb-co-card .protech-logo-img{
  margin:0 auto 10px;
}
@media(max-width:700px){
  .protech-logo-img{
    width:76px;
    height:76px;
  }
}


/* =========================================================
   Partner logo/layout consistency update
   ========================================================= */

/* Same logo footprint for CKS and Pro Tech in Home/About cards */
.hpc-company-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  display:block;
  margin:0 auto 9px;
}
.hpc-co{
  min-width:190px;
  text-align:center;
}
.hpc-logos{
  align-items:center;
  gap:22px;
}
.hpc-sep{
  margin-top:0;
}
.home-partner-card{
  align-items:center;
}
.home-partner-card .hpc-left{
  flex:1;
}
.home-partner-card .hpc-visit{
  flex:0 0 auto;
}

/* About uses exactly the same partner card language as Home */
.about-home-partner-section{
  padding-top:64px;
  padding-bottom:64px;
}
.about-partner-home-style{
  margin:0;
}

/* Footer navy/blue partner bar: Pro Tech icon appears after + */
.fpb-protech-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
  flex:0 0 34px;
  border-radius:50%;
}

/* Equal project spacing horizontally and vertically */
.project-grid{
  column-gap:28px !important;
  row-gap:28px !important;
}

/* Responsive partner layout */
@media(max-width:820px){
  .home-partner-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .hpc-logos{
    justify-content:center;
  }
  .home-partner-card .hpc-visit{
    margin-left:auto;
    margin-right:auto;
  }
}
@media(max-width:560px){
  .hpc-logos{
    flex-direction:column;
  }
  .hpc-co{
    min-width:0;
  }
}


/* =========================================================
   HOME PARTNER ALIGNMENT — final refinement
   ========================================================= */

/* Section directly below the Home banner:
   keep both company headings on one line and align the two brands */
.pt-companies{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) !important;
  align-items:start !important;
  gap:12px !important;
}
.pt-co{
  min-width:0;
  text-align:center;
}
.pt-co-name{
  white-space:nowrap !important;
  font-size:12.5px !important;
  line-height:1.2 !important;
}
.pt-logo{
  width:44px !important;
  height:44px !important;
  margin:0 auto 10px !important;
  background:transparent !important;
  border:0 !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.pt-logo img{
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  object-fit:contain !important;
}
.pt-logo-protech{
  width:38px !important;
  height:38px !important;
  margin-top:3px !important;
  margin-bottom:13px !important;
}
.pt-sep{
  align-self:start;
  margin-top:8px !important;
}

/* Bottom "Our Installation & Service Partner":
   identical logo footprint for CKS and Pro Tech */
.hpc-logo-box{
  width:58px;
  height:58px;
  margin:0 auto 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.hpc-logo-box .hpc-company-logo{
  display:block !important;
  width:58px !important;
  height:58px !important;
  max-width:58px !important;
  max-height:58px !important;
  margin:0 !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
}
.hpc-logo-box .hpc-protech-logo{
  width:54px !important;
  height:54px !important;
  max-width:54px !important;
  max-height:54px !important;
}
.hpc-co-name{
  white-space:nowrap;
}

/* Ensure Pro Tech icon remains visible in the navy footer partner bar */
.fpb-protech-logo{
  display:block !important;
  width:34px !important;
  height:34px !important;
  object-fit:contain !important;
  opacity:1 !important;
  visibility:visible !important;
}

@media(max-width:1100px){
  .pt-co-name{
    font-size:11.5px !important;
  }
}
@media(max-width:820px){
  .pt-companies{
    grid-template-columns:1fr !important;
  }
  .pt-sep{
    margin:0 auto !important;
  }
  .pt-co-name{
    white-space:normal !important;
  }
}


/* =========================================================
   HOME HEADER + HERO BALANCE + PRODUCT CARD WHITE UPDATE
   ========================================================= */

/* Top-left brand: keep icon unchanged, force company name to one line */
.brand > .brand-copy{
  display:flex !important;
  flex-direction:column !important;
  line-height:1.15 !important;
  min-width:0;
}
.brand-title{
  display:block;
  white-space:nowrap;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-.012em;
}
.brand > .brand-copy small{
  font-size:10.5px !important;
  margin-top:3px !important;
  white-space:nowrap;
}

/* Home banner: move the blue panel to the right and enlarge it */
.hero .container{
  grid-template-columns:minmax(430px,460px) 310px !important;
  justify-content:space-between !important;
  gap:74px !important;
}
.hero-copy{
  max-width:470px !important;
}
.hero-panel{
  width:310px !important;
  min-height:244px !important;
  padding:26px 24px !important;
  transform:translateX(28px);
}
.hero-panel h3{
  font-size:10.5px !important;
  margin-bottom:15px !important;
}
.quick{
  gap:11px !important;
  margin-bottom:11px !important;
}
.quick-icon{
  width:27px !important;
  height:27px !important;
}
.quick-text{
  font-size:13.5px !important;
}

/* Products page: all cards under Popular models are fully white */
.product-card{
  background:#fff !important;
  border:1px solid #D9DEE5 !important;
  box-shadow:none !important;
}
.product-card .product-image{
  background:#fff !important;
  border:0 !important;
}
.product-card .product-body{
  background:#fff !important;
}
.product-card .badge{
  background:#fff !important;
  border:1px solid #D9DEE5 !important;
}
.product-card:hover{
  background:#fff !important;
  border-color:#C9D0D8 !important;
  box-shadow:0 8px 24px rgba(8,43,76,.08) !important;
}

@media(max-width:1100px){
  .brand-title{font-size:13px}
  .brand > .brand-copy small{font-size:9.8px !important}
  .hero .container{
    grid-template-columns:420px 270px !important;
    gap:48px !important;
  }
  .hero-panel{
    width:270px !important;
    transform:translateX(10px);
  }
}
@media(max-width:820px){
  .brand-title{font-size:13px}
  .brand > .brand-copy small{white-space:normal}
  .hero .container{grid-template-columns:1fr !important}
  .hero-panel{transform:none}
}


/* =========================================================
   SEPTEMBER 2026 — Banner + page spacing refinements
   ========================================================= */

/* New Home banner image */
.hero{
  background-image:url('../images/home-banner-new.png') !important;
  background-position:center 48% !important;
  min-height:420px !important;
}

/* Move navy panel slightly left from previous position while keeping it larger.
   Align its right edge visually with the header Get a Quote area. */
.hero .container{
  grid-template-columns:minmax(430px,460px) 300px !important;
  gap:58px !important;
  justify-content:space-between !important;
}
.hero-panel{
  width:300px !important;
  min-height:238px !important;
  transform:translateX(8px) !important;
  padding:24px 22px !important;
}

/* About — Our Company: tighter, cleaner vertical rhythm */
.split > div:first-child .kicker{
  margin-bottom:7px !important;
}
.split > div:first-child h2{
  margin-top:0 !important;
  margin-bottom:10px !important;
  line-height:1.2 !important;
}
.split > div:first-child > p{
  margin-bottom:0 !important;
  line-height:1.55 !important;
}
.split > div:first-child .list{
  margin-top:16px !important;
  gap:10px !important;
}
.split > div:first-child .list-item{
  gap:10px !important;
}
.split > div:first-child .list-item > div{
  line-height:1.45 !important;
}

/* Ventilation page — compact content spacing */
.ventilation-split > div:last-child .kicker{
  margin-bottom:7px !important;
}
.ventilation-split > div:last-child h2{
  margin-top:0 !important;
  margin-bottom:10px !important;
  line-height:1.2 !important;
}
.ventilation-split > div:last-child > p{
  margin-bottom:0 !important;
  line-height:1.55 !important;
}
.ventilation-split > div:last-child .list{
  margin-top:15px !important;
  gap:9px !important;
}
.ventilation-split > div:last-child .list-item{
  gap:10px !important;
}
.ventilation-split > div:last-child .list-item > div{
  line-height:1.42 !important;
}

/* Apply consistent tighter rhythm to Ventilation section headers/cards */
.ventilation-split + *{}
body:has(.ventilation-split) .section-head{
  margin-bottom:30px !important;
}
body:has(.ventilation-split) .section-head h2{
  margin-top:4px !important;
}
body:has(.ventilation-split) .section-head p{
  line-height:1.55 !important;
}
body:has(.ventilation-split) .card{
  padding:22px 22px !important;
}
body:has(.ventilation-split) .card h3{
  margin-bottom:6px !important;
}
body:has(.ventilation-split) .card p{
  line-height:1.5 !important;
}
body:has(.ventilation-split) .protech-callout{
  margin-top:34px !important;
}

/* Projects — stronger equal separation between all six images */
.project-grid{
  column-gap:34px !important;
  row-gap:34px !important;
}

@media(max-width:1100px){
  .hero .container{
    grid-template-columns:420px 270px !important;
    gap:42px !important;
  }
  .hero-panel{
    width:270px !important;
    transform:translateX(0) !important;
  }
}
@media(max-width:820px){
  .hero .container{
    grid-template-columns:1fr !important;
  }
  .hero-panel{
    transform:none !important;
  }
  .project-grid{
    gap:28px !important;
  }
}
\n\n/* =========================================================
   SEPTEMBER 2026 — Hero buttons, inner-page banner line spacing,
   and project gallery spacing refinement
   ========================================================= */

/* Home hero: keep both primary actions on one row on desktop */
.hero-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:12px !important;
}
.hero-actions .btn{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Inner page banners: two-line headings behave as one heading,
   eliminating the oversized gap between separate H1 elements. */
.page-hero h1{
  line-height:1.08 !important;
  margin-bottom:12px !important;
}
.page-hero h1 br{
  display:block;
}

/* Projects: equal, more generous spacing between all cards */
.project-grid{
  column-gap:42px !important;
  row-gap:42px !important;
}

@media(max-width:820px){
  .hero-actions{
    flex-wrap:wrap !important;
  }
  .project-grid{
    gap:30px !important;
  }
}


/* =========================================================
   REFERENCE MATCH — Home hero buttons + Projects gallery gap
   ========================================================= */

/* Home hero CTA buttons: same row, balanced widths and spacing */
.hero-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:22px !important;
}
.hero-actions .btn{
  min-height:54px;
  padding:0 28px !important;
  font-size:15px !important;
  font-weight:700 !important;
  border-radius:8px !important;
}
.hero-actions .btn-primary{
  min-width:280px;
}
.hero-actions .btn-outline{
  min-width:205px;
  background:#fff !important;
}

/* Projects reference: equal clean separation in both directions */
.project-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  column-gap:30px !important;
  row-gap:30px !important;
}
.project{
  margin:0 !important;
}

@media(max-width:900px){
  .hero-actions{
    flex-wrap:wrap !important;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline{
    min-width:0;
  }
  .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:26px !important;
  }
}
@media(max-width:560px){
  .hero-actions{
    flex-direction:column;
    align-items:stretch !important;
  }
  .hero-actions .btn{
    width:100%;
  }
  .project-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
}


/* =========================================================
   FINAL REFERENCE MATCH — Projects + Explore Equipment hover
   ========================================================= */

/* Projects gallery: match supplied reference with clearly separated,
   equal horizontal and vertical gaps across all 6 cards. */
.project-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  column-gap:30px !important;
  row-gap:30px !important;
  align-items:stretch !important;
}
.project{
  margin:0 !important;
  width:100% !important;
}

/* Home hero Explore Equipment hover */
.hero-actions .btn-outline{
  background:#fff !important;
  color:var(--navy) !important;
  border-color:var(--navy) !important;
  transition:
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}
.hero-actions .btn-outline:hover,
.hero-actions .btn-outline:focus-visible{
  background:var(--navy) !important;
  color:#fff !important;
  border-color:var(--navy) !important;
  box-shadow:0 8px 18px rgba(8,43,76,.18) !important;
  transform:translateY(-1px);
}

@media(max-width:900px){
  .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:26px !important;
    row-gap:26px !important;
  }
}
@media(max-width:560px){
  .project-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
}


/* =========================================================
   ABOUT PAGE — Installation Partner reference design match
   ========================================================= */
.about-reference-partner-section{
  padding:44px 0 !important;
  background:#F5F7F9 !important;
}

.about-reference-partner{
  display:grid;
  grid-template-columns:38.5% 61.5%;
  min-height:304px;
  background:#fff;
  border:1px solid #DCE2E8;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 7px 22px rgba(8,43,76,.04);
}

.about-reference-copy{
  padding:37px 40px 34px;
  border-right:1px solid #E1E5EA;
}

.about-reference-kicker{
  display:block;
  margin:0 0 15px;
  color:#F58220;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
}

.about-reference-copy h2{
  margin:0 0 14px;
  color:#082B4C;
  font-size:20px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.025em;
}

.about-reference-copy p{
  max-width:360px;
  margin:0;
  color:#5C6C7E;
  font-size:15px;
  line-height:1.62;
  font-weight:400;
}

.about-reference-brands{
  padding:34px 42px 30px;
  display:flex;
  flex-direction:column;
}

.about-reference-company-card{
  min-height:84px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:17px 20px;
  background:#F7F9FB;
  border:1px solid #DDE3E9;
  border-radius:12px;
}

.about-reference-company-card + .about-reference-company-card{
  margin-top:13px;
}

.about-reference-logo{
  width:46px;
  height:46px;
  flex:0 0 46px;
  object-fit:contain;
  display:block;
}

.about-reference-protech{
  width:48px;
  height:48px;
  flex-basis:48px;
}

.about-reference-company-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.about-reference-company-copy strong{
  display:block;
  margin:0 0 4px;
  color:#082B4C;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
}

.about-reference-company-copy span{
  display:block;
  color:#5C6C7E;
  font-size:12.5px;
  line-height:1.35;
  white-space:nowrap;
}

.about-reference-link{
  align-self:flex-end;
  margin-top:15px;
  padding-bottom:3px;
  color:#082B4C;
  border-bottom:2px solid #F58220;
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  text-decoration:none;
  transition:color .18s ease;
}

.about-reference-link:hover{
  color:#F58220;
}

@media(max-width:900px){
  .about-reference-partner{
    grid-template-columns:1fr;
  }
  .about-reference-copy{
    border-right:0;
    border-bottom:1px solid #E1E5EA;
  }
  .about-reference-company-copy span{
    white-space:normal;
  }
}
@media(max-width:560px){
  .about-reference-copy,
  .about-reference-brands{
    padding:28px 24px;
  }
  .about-reference-company-card{
    padding:15px 16px;
  }
  .about-reference-link{
    align-self:flex-start;
  }
}


/* =========================================================
   CHIMNEY & VENTILATION — reference-matched first content block
   ========================================================= */
.ventilation-reference-section{
  padding:58px 0 64px !important;
  background:#fff !important;
}
.ventilation-reference-layout{
  display:grid !important;
  grid-template-columns:minmax(0, 600px) minmax(0, 1fr) !important;
  column-gap:76px !important;
  align-items:center !important;
  max-width:1280px !important;
}
.ventilation-reference-layout > .image-frame{
  width:100% !important;
  height:450px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  align-self:center !important;
}
.ventilation-reference-layout > .image-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.ventilation-reference-copy{
  align-self:center !important;
  padding:0 !important;
}
.ventilation-reference-copy .kicker{
  display:block !important;
  margin:0 0 8px !important;
  color:#F58220 !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
}
.ventilation-reference-copy h2{
  margin:0 0 8px !important;
  max-width:575px !important;
  color:#071D33 !important;
  font-size:27px !important;
  line-height:1.55 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}
.ventilation-reference-copy > p{
  max-width:580px !important;
  margin:0 !important;
  color:#17212B !important;
  font-size:15px !important;
  line-height:1.78 !important;
}
.ventilation-reference-copy .list{
  margin-top:23px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:13px !important;
}
.ventilation-reference-copy .list-item{
  display:grid !important;
  grid-template-columns:18px 1fr !important;
  column-gap:10px !important;
  align-items:start !important;
}
.ventilation-reference-copy .dot-check{
  margin-top:0 !important;
  color:#F58220 !important;
  font-size:16px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
}
.ventilation-reference-copy .list-item > div{
  color:#5C6C7E !important;
  font-size:14px !important;
  line-height:1.55 !important;
}
.ventilation-reference-copy .list-item > div b{
  display:block !important;
  margin:0 0 5px !important;
  color:#071D33 !important;
  font-size:15px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
}

@media(max-width:1100px){
  .ventilation-reference-layout{
    grid-template-columns:1fr 1fr !important;
    column-gap:44px !important;
  }
  .ventilation-reference-layout > .image-frame{height:390px !important}
  .ventilation-reference-copy h2{font-size:25px !important}
}
@media(max-width:820px){
  .ventilation-reference-section{padding:44px 0 50px !important}
  .ventilation-reference-layout{
    grid-template-columns:1fr !important;
    row-gap:30px !important;
  }
  .ventilation-reference-layout > .image-frame{height:auto !important;aspect-ratio:4/3}
}


/* =========================================================
   VENTILATION REFERENCE — reduce checklist vertical gaps
   ========================================================= */

/* Tighten only the checklist spacing shown in the marked reference */
.ventilation-reference-copy .list{
  margin-top:18px !important;
  gap:6px !important;
}

.ventilation-reference-copy .list-item{
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
}

.ventilation-reference-copy .list-item + .list-item{
  margin-top:4px !important;
}

.ventilation-reference-copy .list-item > div{
  line-height:1.38 !important;
}

.ventilation-reference-copy .list-item > div b{
  margin-bottom:2px !important;
  line-height:1.25 !important;
}

.ventilation-reference-copy .dot-check{
  margin-top:1px !important;
}


/* =========================================================
   HEADING TYPOGRAPHY SYSTEM — Pro Tech inspired
   Main/page/banner headings only. Body, navigation, buttons,
   labels and small text remain unchanged.
   ========================================================= */

.hero-copy h1,
.page-hero h1,
.section-head h2,
.split h2,
.showroom-inner h2,
.pt-col h2,
.cta h2,
.catalog-callout h2,
.ventilation-reference-copy h2,
.about-reference-copy h2,
.protech-callout h2{
  font-family:'Manrope','Inter',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-0.035em !important;
  line-height:1.10 !important;
}

/* Preserve existing sizes/layout while creating one consistent
   visual heading language across desktop, tablet and mobile. */
.hero-copy h1,
.page-hero h1{
  font-style:normal !important;
}

@media(max-width:820px){
  .hero-copy h1,
  .page-hero h1,
  .section-head h2,
  .split h2,
  .showroom-inner h2,
  .pt-col h2,
  .cta h2,
  .catalog-callout h2,
  .ventilation-reference-copy h2,
  .about-reference-copy h2,
  .protech-callout h2{
    letter-spacing:-0.03em !important;
    line-height:1.12 !important;
  }
}

/* =========================================================
   BANNER H1 TYPOGRAPHY — Plus Jakarta Sans only
   Applies exclusively to Home and inner-page banner H1s.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500&display=swap');

.hero-copy h1,
.page-hero h1{
  font-family:"Plus Jakarta Sans", sans-serif !important;
  font-weight:500 !important;
  font-style:normal !important;
  letter-spacing:-0.025em !important;
  line-height:1.12 !important;
}

@media(max-width:820px){
  .hero-copy h1,
  .page-hero h1{
    font-family:"Plus Jakarta Sans", sans-serif !important;
    font-weight:500 !important;
    letter-spacing:-0.02em !important;
    line-height:1.14 !important;
  }
}


/* =========================================================
   HOME PARTNERSHIP SECTION — requested revision
   ========================================================= */
.pt-section{
  background:var(--navy) !important;
  border-bottom:0 !important;
}
.pt-tile{
  background:var(--navy) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 12px 32px rgba(5,29,51,.18) !important;
}
.pt-col{
  background:transparent !important;
}
.pt-col:not(:last-child){
  border-right:1px solid rgba(255,255,255,.14) !important;
}
.pt-col .kicker,
.pt-col .partnership-kicker{
  color:rgba(255,255,255,.82) !important;
}
.pt-col .partnership-kicker .accent-orange{
  color:var(--orange) !important;
}
.pt-col h2{
  color:#fff !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
  line-height:1.08 !important;
}
.pt-col > p,
.pt-col .pt-note,
.pt-co-role{
  color:rgba(255,255,255,.78) !important;
}
.pt-co-name{
  color:#fff !important;
}
.pt-sep{
  background:rgba(245,130,32,.14) !important;
  color:var(--orange) !important;
  border:1px solid rgba(245,130,32,.22) !important;
}
.pt-visit{
  color:#fff !important;
  border-bottom-color:var(--orange) !important;
}
.pt-visit:hover{
  color:var(--orange) !important;
}

/* Consistent partner logo footprint */
.pt-logo,
.pt-logo-protech{
  width:52px !important;
  height:52px !important;
  margin:0 auto 12px !important;
  background:#fff !important;
  border-radius:10px !important;
  padding:6px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.08) !important;
}
.pt-logo img,
.pt-logo-protech img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:0 !important;
}
@media(max-width:1100px){
  .pt-col:not(:last-child){
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.14) !important;
  }
}


/* Home banner: Edmonton color only */
.hero-edmonton-blue{color:var(--navy) !important;}


/* =========================================================
   HOME PARTNERSHIP SECTION — FINAL REFERENCE MATCH
   Dark blue is restricted to the LEFT column only.
   ========================================================= */
.pt-section{
  background:#fff !important;
  border-bottom:1px solid var(--line) !important;
  padding:28px 0 40px !important;
}

.pt-tile{
  grid-template-columns:1.3fr 1fr !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 2px 16px rgba(8,43,76,.05) !important;
  overflow:hidden !important;
}

/* Left panel only */
.pt-tile > .pt-col:first-child{
  background:var(--navy) !important;
  border-right:0 !important;
}

/* Right panel remains white */
.pt-tile > .pt-col:last-child{
  background:#fff !important;
}

.pt-col{
  padding:36px 40px !important;
}

/* Left panel typography */
.pt-tile > .pt-col:first-child .partnership-kicker{
  display:block !important;
  margin-bottom:14px !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.pt-tile > .pt-col:first-child .partnership-orange{
  color:var(--orange) !important;
}

.pt-tile > .pt-col:first-child .partnership-white{
  color:#fff !important;
}

.pt-tile > .pt-col:first-child h2{
  color:#fff !important;
  font-weight:500 !important;
  letter-spacing:-.02em !important;
  line-height:1.12 !important;
}

.pt-tile > .pt-col:first-child > p,
.pt-tile > .pt-col:first-child .pt-note{
  color:rgba(255,255,255,.86) !important;
}

/* Restore reference styling on right side */
.pt-tile > .pt-col:last-child .pt-co-name{
  color:var(--navy) !important;
}

.pt-tile > .pt-col:last-child .pt-co-role{
  color:var(--muted) !important;
}

.pt-tile > .pt-col:last-child .pt-visit{
  color:var(--navy) !important;
  border-bottom-color:var(--orange) !important;
}

.pt-tile > .pt-col:last-child .pt-visit:hover{
  color:var(--orange) !important;
}

.pt-tile > .pt-col:last-child .pt-sep{
  background:var(--orange-light) !important;
  color:var(--orange) !important;
  border:0 !important;
}

/* Keep logo sizing/alignment consistent with the supplied reference */
.pt-tile > .pt-col:last-child .pt-logo,
.pt-tile > .pt-col:last-child .pt-logo-protech{
  width:44px !important;
  height:44px !important;
  margin:0 auto 10px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:9px !important;
  box-shadow:none !important;
}

.pt-tile > .pt-col:last-child .pt-logo-protech{
  width:38px !important;
  height:38px !important;
  margin-top:3px !important;
  margin-bottom:13px !important;
}

.pt-tile > .pt-col:last-child .pt-logo img,
.pt-tile > .pt-col:last-child .pt-logo-protech img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:0 !important;
}

@media(max-width:1100px){
  .pt-tile{
    grid-template-columns:1fr !important;
  }
  .pt-tile > .pt-col:first-child{
    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.14) !important;
  }
}

@media(max-width:820px){
  .pt-col{
    padding:30px 26px !important;
  }
}


/* =========================================================
   HOME PARTNERSHIP — exact requested changes only
   ========================================================= */

/* Entire line orange */
.pt-tile > .pt-col:first-child .partnership-kicker,
.pt-tile > .pt-col:first-child .partnership-kicker .partnership-orange{
  color:var(--orange) !important;
}

/* Exact supplied icons, increased only slightly from prior reference size */
.pt-tile > .pt-col:last-child .pt-logo{
  width:48px !important;
  height:48px !important;
  margin:0 auto 10px !important;
}

.pt-tile > .pt-col:last-child .pt-logo-protech{
  width:42px !important;
  height:42px !important;
  margin-top:3px !important;
  margin-bottom:13px !important;
}

.pt-tile > .pt-col:last-child .pt-logo img,
.pt-tile > .pt-col:last-child .pt-logo-protech img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  padding:0 !important;
}


/* =========================================================
   HOME PARTNERSHIP — RIGHT SIDE reference alignment only
   ========================================================= */

/* Move the right-side content slightly downward to match supplied reference */
.pt-tile > .pt-col:last-child{
  padding-top:39px !important;
}

/* Increase both supplied logos while preserving all other styling */
.pt-tile > .pt-col:last-child .pt-logo{
  width:58px !important;
  height:58px !important;
  margin:0 auto 13px !important;
}

.pt-tile > .pt-col:last-child .pt-logo-protech{
  width:54px !important;
  height:54px !important;
  margin:2px auto 15px !important;
}

/* Keep both brand columns aligned consistently */
.pt-tile > .pt-col:last-child .pt-companies{
  align-items:start !important;
}

.pt-tile > .pt-col:last-child .pt-co{
  text-align:center !important;
}

.pt-tile > .pt-col:last-child .pt-sep{
  margin-top:12px !important;
}