/* =========================================================================
   Northlight Windows & Glass — Global Stylesheet
   Palette: UCLA-inspired soft baby blue + warm gold, clean & minimal.
   Edit the CSS variables in :root below to adjust colors site-wide.
   ========================================================================= */

:root{
  /* Brand colors */
  --blue:        #6CACE4;   /* soft baby blue (primary accent) */
  --blue-600:    #3E7CB1;   /* deeper blue for links/hover */
  --blue-700:    #244E72;   /* deep navy-blue for headings */
  --blue-050:    #EAF4FB;   /* pale blue tint for section backgrounds */
  --blue-100:    #D6E9F7;
  --gold:        #FFC72C;   /* warm gold (sparingly, for CTAs/accents) */
  --gold-600:    #E9A100;

  /* Neutrals */
  --ink:         #16232E;   /* primary text */
  --slate:       #57687A;   /* muted text */
  --line:        #E4ECF2;   /* hairline borders */
  --bg:          #FFFFFF;
  --bg-soft:     #F6FAFD;   /* off-white section */
  --white:       #FFFFFF;

  /* System */
  --radius:      16px;
  --radius-sm:   10px;
  --shadow-sm:   0 1px 3px rgba(22,35,46,.06), 0 1px 2px rgba(22,35,46,.04);
  --shadow-md:   0 10px 30px rgba(36,78,114,.10);
  --shadow-lg:   0 24px 60px rgba(36,78,114,.16);
  --maxw:        1160px;
  --font-head:   'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue-600); text-decoration:none; transition:color .18s ease; }
a:hover{ color:var(--blue-700); }

h1,h2,h3,h4{ font-family:var(--font-head); color:var(--blue-700); line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; font-weight:800; }
h1{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); }
h2{ font-size:clamp(1.6rem, 3.3vw, 2.4rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1rem; color:var(--ink); }
.lead{ font-size:1.18rem; color:var(--slate); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ padding:84px 0; }
.section-soft{ background:var(--bg-soft); }
.section-blue{ background:linear-gradient(180deg,var(--blue-050),#fff); }

/* ---------- Utility ---------- */
.center{ text-align:center; }
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:.78rem;
  color:var(--blue-600); margin-bottom:.6rem;
}
.muted{ color:var(--slate); }
.max-680{ max-width:680px; }
.mx-auto{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:999px; border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:var(--blue-700); box-shadow:0 6px 18px rgba(233,161,0,.28); }
.btn-gold:hover{ background:var(--gold-600); color:#3a2c00; }
.btn-blue{ background:var(--blue-600); color:#fff; }
.btn-blue:hover{ background:var(--blue-700); color:#fff; }
.btn-outline{ background:transparent; color:var(--blue-700); border-color:var(--blue-100); }
.btn-outline:hover{ border-color:var(--blue-600); color:var(--blue-700); background:var(--blue-050); }
.btn-ghost-light{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.5); backdrop-filter:blur(4px); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.24); color:#fff; }
.btn-lg{ padding:1rem 1.9rem; font-size:1.06rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-head); font-weight:800; color:var(--blue-700); font-size:1.22rem; letter-spacing:-.02em; }
.brand:hover{ color:var(--blue-700); }
.brand .logo-mark{ flex:0 0 auto; }
.brand small{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-top:-2px; }
.nav-links{ display:flex; align-items:center; gap:1.7rem; list-style:none; margin:0; padding:0; }
.nav-links a{ font-family:var(--font-head); font-weight:600; color:var(--ink); font-size:.98rem; }
.nav-links a:hover,.nav-links a.active{ color:var(--blue-600); }
.nav-cta{ display:flex; align-items:center; gap:.8rem; }
.nav-phone{ font-family:var(--font-head); font-weight:700; color:var(--blue-700); }
.nav-phone:hover{ color:var(--blue-600); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--blue-700); margin:5px 0; border-radius:2px; transition:.2s; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:0; background:linear-gradient(135deg,#F2F8FD 0%,#E7F1FA 55%,#DCEBF7 100%); }
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:stretch; padding:32px 0 52px; }
.hero-copy{ align-self:center; }
.hero h1 span{ color:var(--blue-600); }
.hero p.lead{ margin-bottom:1.7rem; max-width:34ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.5rem; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem; padding-top:.4rem; }
.hero-trust li{ list-style:none; display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.94rem; color:var(--blue-700); }
.hero-media{ position:relative; display:flex; }
.hero-media .media-frame{ flex:1 1 auto; width:100%; min-height:440px; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); }
.hero-badge{
  position:absolute; left:-18px; bottom:26px; z-index:3; background:#fff; border-radius:16px;
  box-shadow:var(--shadow-md); padding:14px 18px; display:flex; align-items:center; gap:.7rem;
  border:1px solid var(--line);
}
.hero-badge .num{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:var(--blue-700); line-height:1; }
.hero-badge small{ color:var(--slate); font-size:.8rem; }

/* ---------- Image frames / placeholders ---------- */
.media-frame{ position:relative; background:linear-gradient(135deg,var(--blue-100),var(--blue-050)); }
.media-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
/* graceful gradient shows if a photo hasn't been added / fails to load */
.media-fallback{
  position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; color:var(--blue-600); background:
    radial-gradient(120% 120% at 20% 10%, #fff 0%, var(--blue-050) 40%, var(--blue-100) 100%);
  text-align:center; padding:20px;
}
.media-fallback svg{ opacity:.7; }
.media-fallback span{ font-family:var(--font-head); font-weight:700; font-size:.9rem; letter-spacing:.02em; }
.media-fallback small{ color:var(--slate); font-weight:500; }

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--blue-700); color:#fff; }
.trust-strip .container{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem 2.8rem; padding:22px 24px; }
.trust-strip .item{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:600; font-size:.98rem; }
.trust-strip .item svg{ flex:0 0 auto; }

/* ---------- Grid / Cards ---------- */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue-100); }
.card .icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-050); color:var(--blue-600); margin-bottom:16px;
}
.card h3{ margin-bottom:.4rem; }
.card p{ color:var(--slate); font-size:.98rem; margin-bottom:0; }
.card .card-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:16px; font-family:var(--font-head); font-weight:700; font-size:.95rem; }

/* service card with image */
.service-card{ overflow:hidden; padding:0; display:flex; flex-direction:column; }
.service-card .media-frame{ aspect-ratio:16/10; }
.service-card .body{ padding:26px 28px 30px; }
.service-card .body h3{ margin-bottom:.4rem; }
.service-card .body p{ margin-bottom:0; }

/* ---------- Feature list ---------- */
.feature-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.feature-list li{ display:flex; gap:.75rem; align-items:flex-start; }
.feature-list .tick{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--blue-050); color:var(--blue-600); display:flex; align-items:center; justify-content:center; margin-top:2px; }
.feature-list strong{ color:var(--blue-700); font-family:var(--font-head); }

/* ---------- Split section ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.reverse .split-media{ order:-1; }
.split-media .media-frame{ border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:5/4; }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ text-align:center; padding:20px; }
.stat .num{ font-family:var(--font-head); font-weight:800; font-size:2.4rem; color:var(--blue-600); line-height:1; }
.stat .num .gold{ color:var(--gold-600); }
.stat small{ display:block; margin-top:.4rem; color:var(--slate); font-weight:600; }

/* ---------- Steps / Process ---------- */
.steps{ counter-reset:step; display:grid; gap:24px; grid-template-columns:repeat(4,1fr); }
.step{ position:relative; padding:26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.step::before{
  counter-increment:step; content:counter(step);
  font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:#fff;
  width:40px; height:40px; border-radius:50%; background:var(--blue-600);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.step h3{ font-size:1.1rem; margin-bottom:.35rem; }
.step p{ margin:0; color:var(--slate); font-size:.95rem; }

/* ---------- Rebate cards ---------- */
.rebate-card:hover{ border-color:#F2D98C; border-left-color:var(--gold); }
.rebate-card{ background:linear-gradient(180deg,#FFF7D6,#FFEFB4); border:1px solid #F2D98C; border-left:4px solid var(--gold); }
.rebate-card .tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-700); background:#fff; border:1px solid #F2D98C; padding:4px 10px; border-radius:999px; margin-bottom:12px; }

/* ---------- CTA band ---------- */
.cta-band{ background:linear-gradient(120deg,var(--blue-700),var(--blue-600)); color:#fff; border-radius:24px; padding:56px; text-align:center; box-shadow:var(--shadow-md); }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.9); max-width:560px; margin:0 auto 1.6rem; }
.cta-band .btn-outline{ color:#fff; border-color:rgba(255,255,255,.6); }
.cta-band .btn-outline:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ---------- Forms ---------- */
.form-wrap{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow-md); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--blue-700); margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; padding:.8rem .9rem; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:1rem; color:var(--ink); background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-050); }
.field textarea{ min-height:120px; resize:vertical; }
.field .req{ color:var(--gold-600); }
.form-note{ font-size:.85rem; color:var(--slate); margin-top:6px; }
.form-success{ display:none; background:#EAF7EE; border:1px solid #BFE6CC; color:#1E6B3A; border-radius:var(--radius-sm); padding:16px 18px; font-weight:600; }

/* ---------- Contact info list ---------- */
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.contact-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.contact-list .ci{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:var(--blue-050); color:var(--blue-600); display:flex; align-items:center; justify-content:center; }
.contact-list strong{ font-family:var(--font-head); color:var(--blue-700); display:block; }
.contact-list span{ color:var(--slate); }

/* ---------- Brands strip ---------- */
.brands{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 22px; }
.brand-chip.chip-more{ background:var(--gold); color:var(--blue-700); border-color:transparent; }
.brand-chip{ font-family:var(--font-head); font-weight:700; color:var(--blue-700); background:#fff; border:1px solid var(--line); border-radius:999px; padding:.6rem 1.2rem; font-size:.95rem; box-shadow:var(--shadow-sm); }

/* ---------- Breadcrumb / page header ---------- */
.page-hero{ background:linear-gradient(180deg,var(--blue-050),#fff); padding:64px 0 40px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:.4rem; }
.page-hero p{ max-width:640px; }
.crumb{ font-size:.85rem; color:var(--slate); margin-bottom:1rem; }
.crumb a{ color:var(--slate); }
.crumb a:hover{ color:var(--blue-600); }

/* ---------- FAQ ---------- */
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 22px; margin-bottom:14px; box-shadow:var(--shadow-sm); }
.faq summary{ cursor:pointer; font-family:var(--font-head); font-weight:700; color:var(--blue-700); padding:14px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--blue); font-weight:600; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:0 0 16px; color:var(--slate); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--blue-700); color:#cfe2f2; padding:64px 0 30px; }
.site-footer a{ color:#cfe2f2; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; }
.footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:1rem; }
.footer-brand .brand{ color:#fff; margin-bottom:1rem; }
.footer-brand .brand small{ color:var(--blue); }
.footer-brand p{ color:#b8d3ea; font-size:.95rem; }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.footer-links a{ font-size:.96rem; }
.footer-contact li{ list-style:none; margin-bottom:.7rem; font-size:.95rem; color:#cfe2f2; display:flex; gap:.55rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.14); margin-top:40px; padding-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.85rem; color:#9fc0dd; }

/* ---------- Logo mark inline sizing ---------- */
.logo-mark svg{ display:block; }

/* ---------- Feature callout (e.g. Doors) ---------- */
.callout{ position:relative; display:grid; grid-template-columns:1.35fr .65fr; gap:40px; align-items:center;
  background:linear-gradient(120deg,var(--blue-050),#fff 72%); border:1px solid var(--blue-100);
  border-radius:24px; padding:44px 48px 44px 52px; box-shadow:var(--shadow-md); overflow:hidden; }
.callout::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--gold); }
.callout .eyebrow{ margin-bottom:.5rem; }
.callout h2{ margin-bottom:.6rem; }
.callout p{ color:var(--slate); margin-bottom:0; }
.callout .callout-media{ display:flex; align-items:center; justify-content:center; }
.callout .callout-icon{ width:134px; height:134px; border-radius:30px; background:#fff; border:1px solid var(--blue-100);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; color:var(--blue-600); }
.callout .badge-pill{ position:absolute; right:26px; top:22px; background:var(--gold); color:var(--blue-700);
  font-family:var(--font-head); font-weight:800; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; }
@media (max-width:860px){
  .callout{ grid-template-columns:1fr; padding:34px 24px 36px; }
  .callout .callout-media{ order:-1; justify-content:flex-start; }
  .callout .callout-icon{ width:92px; height:92px; border-radius:22px; }
  .callout .badge-pill{ position:static; display:inline-block; margin-bottom:14px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-inner{ grid-template-columns:1fr; gap:40px; padding:64px 0 72px; }
  .hero-media{ max-width:440px; margin:0 auto; width:100%; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .split.reverse .split-media{ order:0; }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .cta-band{ padding:40px 26px; }
}
@media (max-width: 680px){
  body{ font-size:16px; }
  section{ padding:60px 0; }
  .nav-links, .nav-cta .nav-phone{ display:none; }
  .nav-toggle{ display:block; }
  .nav.open .nav-links{
    display:flex; flex-direction:column; position:absolute; top:74px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); padding:18px 24px; gap:1rem; box-shadow:var(--shadow-md);
  }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-badge{ left:0; }
}