/* ==========================================================================
   Smart Solutions — Smart Home | آسان زندگی
   Design system. Mobile-first: base styles are phone styles,
   min-width media queries layer on tablet/desktop.
   ========================================================================== */

:root {
  /* Brand — sampled from the logo and hero reference */
  --blue: #1273eb;
  --blue-bright: #2e92ff;
  --blue-dark: #0b4fa8;
  --blue-ink: #0a3b7d;
  --navy: #0a1a2f;
  --navy-2: #102a4c;
  --navy-3: #17395f;

  --white: #ffffff;
  --paper: #f4f8fd;
  --paper-2: #e9f1fb;
  --line: #dbe6f3;
  --ink: #0f2138;
  --body: #4a5b72;
  --muted: #7a8ba1;

  --amber: #f7b733;
  --green: #21c197;
  --danger: #e2574c;

  /* Type */
  --display: 'Poppins', system-ui, sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --urdu: 'Noto Nastaliq Urdu', serif;

  /* Space + shape */
  --gutter: 20px;
  --maxw: 1200px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(10, 26, 47, .06);
  --shadow: 0 10px 30px rgba(10, 26, 47, .09);
  --shadow-lg: 0 24px 60px rgba(10, 26, 47, .16);
  --shadow-blue: 0 12px 30px rgba(18, 115, 235, .28);

  --header-h: 68px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* Any class that sets display would otherwise beat the UA [hidden] rule, so
   panels toggled with the hidden attribute must be forced closed. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 56px; }
.section-sm { padding-block: 40px; }
.section-tint { background: var(--paper); }
.section-navy { background: var(--navy); color: #cfe0f2; }
.section-navy h2, .section-navy h3 { color: #fff; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 8vw, 58px); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(25px, 6vw, 40px); font-weight: 800; }
h3 { font-size: clamp(19px, 4.5vw, 24px); }
h4 { font-size: 17px; }
p { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 700; }

.lede { font-size: clamp(16px, 4vw, 18px); line-height: 1.7; }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
  background: var(--paper-2); padding: 7px 14px; border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.section-navy .kicker { background: rgba(46, 146, 255, .16); color: #7fbaff; }

.text-blue { color: var(--blue); }
.center { text-align: center; }

/* ---------- Urdu (Nastaliq accent) ---------- */
.ur {
  font-family: var(--urdu);
  direction: rtl;
  line-height: 2.3;
  font-size: .95em;
  font-weight: 500;
}
.ur-note {
  display: block;
  font-family: var(--urdu);
  direction: rtl;
  line-height: 2.4;
  font-size: 15px;
  color: var(--blue-ink);
  background: linear-gradient(90deg, var(--paper-2), rgba(233, 241, 251, 0));
  border-right: 3px solid var(--blue);
  padding: 10px 14px 12px;
  border-radius: 4px 0 0 4px;
  margin-top: 14px;
}
.section-navy .ur-note {
  color: #a9cdf7;
  background: linear-gradient(90deg, rgba(46, 146, 255, .13), transparent);
  border-right-color: var(--blue-bright);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  padding: 14px 24px; border-radius: var(--r-pill);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space: nowrap; text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-dark); }

.btn-white { background: #fff; color: var(--blue); box-shadow: var(--shadow); }
.btn-white:hover { background: var(--paper); }

.btn-outline { border: 1.5px solid var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-ghost-light { border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn-wa { background: #25d366; color: #fff; box-shadow: 0 12px 30px rgba(37, 211, 102, .3); }
.btn-wa:hover { background: #1db855; }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 30px; font-size: 16px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--blue);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Header
   ========================================================================== */
/* The top bar carries the phone number. Most visitors are on a phone, so it
   must be visible there too — a compact tap-to-call strip on mobile, the full
   address + email row from tablet up. */
.topbar { background: var(--navy); color: #a9c4e0; font-size: 13px; }
.topbar .container { display: flex; justify-content: center; align-items: center; gap: 18px; height: 36px; }
.topbar .topbar-left { display: none; }
.topbar a { font-weight: 600; color: #dceaf7; }
.topbar .topbar-right { gap: 18px; }
.topbar .tb-mail { display: none; }

@media (min-width: 768px) {
  .topbar .container { justify-content: space-between; height: 38px; }
  .topbar .topbar-left { display: block; }
  .topbar .tb-mail { display: inline-flex; }
  .topbar a { font-weight: 500; }
}
.topbar a { display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; color: var(--blue-bright); }
.topbar-right { display: flex; gap: 22px; align-items: center; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 34px; width: auto; }

.nav-links { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { padding: 11px 18px; font-size: 14px; }
.nav-actions .btn span { display: none; }

.menu-toggle {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0; z-index: 99;
  background: #fff;
  padding: 18px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  visibility: hidden;
}
.mobile-nav.open { transform: none; visibility: visible; }
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink);
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.mobile-nav a svg { width: 18px; height: 18px; color: var(--muted); }
.mobile-nav a[aria-current="page"] { color: var(--blue); }
.mnav-group { margin-top: 8px; }
.mnav-group > span {
  display: block; font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 18px 0 6px;
}
.mnav-group a { font-size: 15.5px; font-weight: 500; padding: 12px 0; }
.mobile-nav .btn { margin-top: 26px; }
.mnav-contact { margin-top: 20px; display: grid; gap: 10px; font-size: 14.5px; }
.mnav-contact a { border: 0; padding: 0; font-weight: 500; font-size: 14.5px; justify-content: flex-start; gap: 10px; color: var(--body); }
.mnav-contact svg { color: var(--blue); }
body.nav-open { overflow: hidden; }

/* Desktop nav */
@media (min-width: 1024px) {
  :root { --header-h: 78px; }
  .topbar { display: block; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none; }
  .brand img { height: 42px; }
  .nav-links { display: flex; align-items: center; gap: 4px; }
  .nav-links > li { position: relative; }
  .nav-links > li > a {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink);
    padding: 10px 14px; border-radius: var(--r-sm);
  }
  .nav-links > li > a svg { width: 15px; height: 15px; transition: transform .2s; }
  .nav-links > li > a:hover { color: var(--blue); background: var(--paper); }
  .nav-links > li > a[aria-current="page"] { color: var(--blue); }
  .nav-links > li > a[aria-current="page"]::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px;
    height: 2px; background: var(--blue); border-radius: 2px;
  }
  .nav-actions .btn span { display: inline; }

  /* Dropdown */
  .has-drop:hover > a svg { transform: rotate(180deg); }
  .drop {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(8px);
    width: 560px; padding: 12px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
  }
  .has-drop:hover .drop, .has-drop:focus-within .drop {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  .drop a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-sm); }
  .drop a:hover { background: var(--paper); }
  .drop .di {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center;
    border-radius: 10px; background: var(--paper-2); color: var(--blue);
  }
  .drop a:hover .di { background: var(--blue); color: #fff; }
  .drop .di svg { width: 19px; height: 19px; }
  .drop b { display: block; font-family: var(--display); font-size: 14.5px; color: var(--ink); font-weight: 600; }
  .drop small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
}

/* ==========================================================================
   Hero (homepage slideshow)
   ========================================================================== */
.hero { position: relative; background: var(--navy); overflow: hidden; }
.hero-slides { position: relative; min-height: 560px; display: grid; }
.hero-slide {
  grid-area: 1 / 1; position: relative;
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s;
}
.hero-slide.active { opacity: 1; visibility: visible; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 26, 47, .93) 0%, rgba(10, 26, 47, .8) 45%, rgba(10, 26, 47, .93) 100%);
}
.hero-inner { position: relative; z-index: 2; padding-block: 52px 150px; }
/* Only the first slide is an <h1>; the rest are <p> carrying the same class, so
   the page has exactly one h1 instead of one per rotating slide. */
.hero .hero-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 8vw, 58px); line-height: 1.15; letter-spacing: -.03em;
  color: #fff; margin-bottom: 16px;
}
.hero .hero-title .hl { color: var(--blue-bright); }
.hero-sub { color: #bed3ea; font-size: 16px; line-height: 1.7; max-width: 520px; margin-bottom: 26px; }
.hero-sub.ur { font-size: 16px; line-height: 2.4; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(46, 146, 255, .16); border: 1px solid rgba(46, 146, 255, .3);
  color: #9ecbff; padding: 8px 16px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; font-family: var(--display); margin-bottom: 18px;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(33, 193, 151, .22); }

.hero-dots { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 5; display: flex; gap: 9px; justify-content: center; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: all .25s; }
.hero-dots button.active { background: #fff; width: 26px; border-radius: var(--r-pill); }

.hero-arrow {
  position: absolute; top: 45%; z-index: 5; width: 42px; height: 42px; border-radius: 50%;
  display: none; place-items: center; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
.hero-arrow:hover { background: rgba(255, 255, 255, .24); }
.hero-arrow svg { width: 20px; height: 20px; }
.hero-prev { left: 16px; }
.hero-next { right: 16px; }

/* Feature strip under hero */
.hero-strip { position: relative; z-index: 6; margin-top: -72px; }
.hero-strip-inner {
  background: rgba(10, 26, 47, .82);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.hero-strip-item { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 16px 10px; }
.hero-strip-item svg { width: 24px; height: 24px; color: var(--blue-bright); }
.hero-strip-item b { font-family: var(--display); font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; }

@media (min-width: 768px) {
  .hero-slides { min-height: 620px; }
  .hero-inner { padding-block: 70px 170px; }
  .hero-strip-inner { grid-template-columns: repeat(4, 1fr); }
  .hero-arrow { display: grid; }
}
@media (min-width: 1024px) {
  .hero-slides { min-height: 680px; }
  .hero-bg::after {
    background: linear-gradient(95deg, rgba(10, 26, 47, .95) 0%, rgba(10, 26, 47, .82) 42%, rgba(10, 26, 47, .45) 100%);
  }
  .hero-inner { padding-block: 92px 180px; max-width: 640px; }
  .hero-sub { font-size: 17.5px; }
  .hero-dots { justify-content: flex-start; bottom: 104px; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
}

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 340px at 78% 0%, rgba(46, 146, 255, .3), transparent 62%),
    linear-gradient(180deg, var(--navy-2), var(--navy));
}
.page-hero .container { position: relative; z-index: 2; padding-block: 40px 48px; }
.page-hero h1 { color: #fff; margin-bottom: 12px; }
.page-hero p { color: #b6cde6; max-width: 640px; font-size: 16.5px; }
.page-hero .kicker { background: rgba(46, 146, 255, .18); color: #8fc2ff; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: #8fa9c4; margin-bottom: 18px; }
.crumbs a:hover { color: #fff; }
.crumbs svg { width: 13px; height: 13px; opacity: .55; }
.crumbs [aria-current] { color: #fff; }

@media (min-width: 768px) { .page-hero .container { padding-block: 56px 66px; } }

/* ==========================================================================
   Section heading
   ========================================================================== */
.sec-head { margin-bottom: 30px; }
.sec-head p { font-size: 16px; max-width: 620px; margin-top: 12px; }
.sec-head.center { text-align: center; }
.sec-head.center p { margin-inline: auto; }
.sec-head.center .kicker { justify-content: center; }

@media (min-width: 1024px) {
  .sec-head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
  .sec-head-split p { margin-top: 0; flex: 1; }
  .sec-head-split > div:first-child { flex: 1; }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr; }

@media (min-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .grid { gap: 22px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Service card */
.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 20px 24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue));
  color: #fff; box-shadow: var(--shadow-blue); margin-bottom: 16px;
}
.card-icon svg { width: 25px; height: 25px; }
.card h3 { font-size: 19px; margin-bottom: 9px; }
.card p { font-size: 14.5px; line-height: 1.65; }
/* De-scoped from .card: the same list is used standalone on service pages, where
   the markers were previously not rendering at all. */
.card-list { margin: 14px 0 0; display: grid; gap: 7px; }
.card-list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.6; }
.card-list li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--paper-2);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.card-list li::after {
  content: ''; position: absolute; left: 5px; top: 11px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--blue);
}
.card .card-list li { font-size: 13.8px; line-height: 1.5; padding-left: 22px; }
.card .card-list li::before { width: 13px; height: 13px; top: 7px; }
.card .card-list li::after { left: 4px; top: 11px; width: 4px; height: 4px; }
.card .link-arrow { margin-top: 18px; }
.card-foot { margin-top: auto; padding-top: 16px; }
.card-num {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--display); font-size: 34px; font-weight: 800; color: var(--paper-2);
  line-height: 1; letter-spacing: -.04em;
}

/* Stretched link makes the whole card clickable */
.card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* Feature (why choose us) */
.feature { display: flex; gap: 15px; align-items: flex-start; }
.feature-icon {
  width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: var(--paper-2); color: var(--blue);
}
.section-navy .feature-icon { background: rgba(46, 146, 255, .15); color: var(--blue-bright); }
.feature-icon svg { width: 22px; height: 22px; }
.feature h4 { margin-bottom: 5px; font-size: 16.5px; }
.section-navy .feature h4 { color: #fff; }
.feature p { font-size: 14.3px; line-height: 1.6; }

/* Stats */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: #fff; padding: 22px 16px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: clamp(27px, 7vw, 40px); font-weight: 800; color: var(--blue); letter-spacing: -.03em; line-height: 1.1; }
.stat span { display: block; font-size: 13px; margin-top: 5px; }
.section-navy .stats { background: rgba(255, 255, 255, .1); }
.section-navy .stat { background: var(--navy); }
.section-navy .stat b { color: var(--blue-bright); }
.section-navy .stat span { color: #9fb8d2; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* Media + text split */
.split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .split-rev > *:first-child { order: 2; }
}

/* Image frame */
.frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-tall { aspect-ratio: 4 / 5; }
.frame-wide { aspect-ratio: 16 / 10; }
.frame-square { aspect-ratio: 1 / 1; }

.frame-badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px);
  border-radius: var(--r); padding: 12px 16px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 11px; max-width: calc(100% - 32px);
}
.frame-badge svg { width: 22px; height: 22px; color: var(--blue); flex: none; }
.frame-badge b { display: block; font-family: var(--display); font-size: 14px; color: var(--ink); }
.frame-badge small { display: block; font-size: 12px; color: var(--muted); }

/* Placeholder shown until a generated photo is dropped in */
.ph {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 10px;
  background:
    radial-gradient(420px 220px at 30% 20%, rgba(46, 146, 255, .28), transparent 65%),
    linear-gradient(140deg, var(--navy-2), var(--navy));
  color: #7fb2f0;
}
.ph::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
}
.ph-inner { position: relative; text-align: center; padding: 20px; }
.ph svg { width: 44px; height: 44px; margin-inline: auto; opacity: .85; }
.ph b { display: block; font-family: var(--display); font-size: 13px; font-weight: 600; color: #cfe4fb; margin-top: 10px; }
.ph small { display: block; font-size: 11.5px; color: #6f9dd4; margin-top: 3px; }

/* ==========================================================================
   Process steps
   ========================================================================== */
.steps { display: grid; gap: 14px; counter-reset: step; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px 20px 20px 20px;
}
.step b.step-n {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--blue); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px;
  margin-bottom: 14px;
}
.step h4 { margin-bottom: 6px; }
.step p { font-size: 14.3px; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Projects
   ========================================================================== */
.project {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--navy);
}
.project img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.project:hover img { transform: scale(1.05); }
.project-body {
  position: absolute; inset: auto 0 0 0; z-index: 3; padding: 20px;
  background: linear-gradient(180deg, transparent, rgba(10, 26, 47, .9) 55%);
  color: #fff;
}
.project-tag {
  display: inline-block; font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #9ecbff;
  background: rgba(46, 146, 255, .2); border: 1px solid rgba(46, 146, 255, .35);
  padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: 9px;
}
.project-body h3 { color: #fff; font-size: 18px; margin-bottom: 4px; }
.project-body p { font-size: 13.5px; color: #b9d0e8; }
/* The feature card spans two grid rows. It must NOT also carry an aspect-ratio,
   or it sizes itself independently and leaves a gap beside the two cards it is
   meant to sit level with. Stretching to the row span is what keeps them equal. */
@media (min-width: 900px) {
  .project-lg { grid-row: span 2; aspect-ratio: auto; height: 100%; min-height: 380px; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px; }
.quote .stars { display: flex; gap: 3px; margin-bottom: 14px; }
.quote .stars svg { width: 16px; height: 16px; color: var(--amber); fill: var(--amber); }
.quote p { font-size: 15px; line-height: 1.7; color: var(--ink); }
.quote footer { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.quote .av {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue)); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.quote cite { display: block; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.quote small { color: var(--muted); font-size: 13px; }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.acc { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.acc + .acc { margin-top: 12px; }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; text-align: left;
  font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--ink);
}
.acc-btn svg { width: 20px; height: 20px; color: var(--blue); flex: none; transition: transform .25s; }
.acc[open] .acc-btn svg, .acc.open .acc-btn svg { transform: rotate(45deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-panel-inner { padding: 0 20px 20px; font-size: 14.8px; line-height: 1.7; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; background: var(--blue); color: #fff; border-radius: var(--r-lg); padding: 34px 24px; text-align: center; }
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 260px at 15% 10%, rgba(255, 255, 255, .22), transparent 60%),
              linear-gradient(120deg, var(--blue-dark), var(--blue) 55%, var(--blue-bright));
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: #d7e9ff; max-width: 560px; margin-inline: auto; }
.cta-band .ur-note { background: rgba(255, 255, 255, .12); border-right-color: #fff; color: #eaf3ff; display: inline-block; text-align: right; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
@media (min-width: 768px) { .cta-band { padding: 52px 40px; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 20px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 7px; }
.field label .req { color: var(--danger); }
.control {
  width: 100%; padding: 13px 15px; font-size: 15px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s, background .18s;
}
.control:focus { outline: none; border-color: var(--blue); background: #fff; }
textarea.control { min-height: 110px; resize: vertical; }
select.control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8ba1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.field-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 12.8px; color: var(--muted); margin-top: 12px; text-align: center; }

/* Contact tiles */
.contact-tile { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.contact-tile .ci { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--blue); }
.contact-tile .ci svg { width: 21px; height: 21px; }
.contact-tile b { display: block; font-family: var(--display); font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.contact-tile a, .contact-tile span { font-size: 14.3px; word-break: break-word; }
.contact-tile a:hover { color: var(--blue); }

/* ==========================================================================
   Home Load Calculator & Solar Configurator
   Keeps the established card / navy-panel language; only the layout and
   controls are new.
   ========================================================================== */
.lc { display: grid; gap: 20px; }
@media (min-width: 1040px) {
  .lc { grid-template-columns: .82fr 1.18fr; gap: 28px; align-items: start; }
  .lc-edu { position: sticky; top: calc(var(--header-h) + 18px); }
}

/* ---------- left: guidance ---------- */
.lc-edu-h { font-size: clamp(22px, 5vw, 30px); margin-bottom: 10px; }
.lc-edu-lede { font-size: 15.5px; line-height: 1.7; }
.lc-edu-list { display: grid; gap: 14px; margin-top: 22px; }
.lc-edu-item {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 15px;
}
.lc-edu-ico {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 11px; background: var(--paper-2); color: var(--blue);
}
.lc-edu-ico svg { width: 19px; height: 19px; }
.lc-edu-item h3 { font-size: 16px; margin-bottom: 5px; }
.lc-edu-item p { font-size: 14px; line-height: 1.6; }
.lc-edu-ur {
  display: block; font-family: var(--urdu); direction: rtl; text-align: right;
  font-size: 13.5px; line-height: 2.3; color: var(--blue-ink);
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line);
}
.lc-edu-tip {
  display: flex; gap: 11px; align-items: flex-start; margin-top: 16px;
  background: var(--paper-2); border-radius: var(--r); padding: 14px 15px;
}
.lc-edu-tip svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 2px; }
.lc-edu-tip p { font-size: 13.3px; line-height: 1.6; }

/* ---------- progress ---------- */
.lc-prog {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--paper); border-radius: var(--r-pill); padding: 5px;
  overflow-x: auto;
}
.lc-prog li {
  display: flex; align-items: center; gap: 7px; flex: 1; justify-content: center;
  padding: 8px 6px; border-radius: var(--r-pill); white-space: nowrap;
  font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--muted);
}
.lc-prog li span {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; background: var(--line); color: var(--white); font-size: 11px;
}
.lc-prog li.done { color: var(--blue); }
.lc-prog li.done span { background: var(--green); }
.lc-prog li.now { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.lc-prog li.now span { background: rgba(255,255,255,.28); color: #fff; }

/* ---------- panels ---------- */
.lc-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 17px; }
@media (min-width: 700px) { .lc-panel { padding: 26px 24px; } }
.lc-h { font-size: 19px; margin-bottom: 6px; }
.lc-hint { font-size: 13.8px; line-height: 1.6; margin-bottom: 18px; }
.lc-back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--blue);
}
.lc-back svg { width: 16px; height: 16px; }

/* ---------- mode tabs ---------- */
.lc-modes { display: flex; gap: 5px; background: var(--paper); border-radius: var(--r-pill); padding: 5px; margin-bottom: 12px; }
.lc-modes button {
  flex: 1; padding: 12px 8px; border-radius: var(--r-pill);
  font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--body);
  transition: background .18s, color .18s;
}
.lc-modes button.on { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }

/* ---------- appliance rows ---------- */
.lc-list { display: grid; gap: 9px; }
.lcq { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 13px; transition: border-color .16s, background .16s; }
.lcq.on { border-color: var(--blue); background: var(--paper-2); }
.lcq-top { display: flex; align-items: center; gap: 11px; }
.lcq-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--blue); }
.lcq.on .lcq-ico { background: var(--blue); color: #fff; }
.lcq-ico svg { width: 17px; height: 17px; }
.lcq-nm { flex: 1; min-width: 0; }
.lcq-nm b { display: block; font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.lcq-nm small { display: block; font-size: 11.8px; color: var(--muted); }
.lcq-x { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--danger); }
.lcq-x:hover { background: #fdecea; }
.lcq-x svg { width: 15px; height: 15px; }
.lcq-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 11px; }

/* big, tappable steppers */
.lcq-step { display: flex; align-items: center; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.lcq.on .lcq-step { border-color: #bcd6f5; }
.lcq-step button {
  width: 42px; height: 42px; flex: none;
  font-size: 20px; font-weight: 600; line-height: 1; color: var(--blue);
  transition: background .15s;
}
.lcq-step button:hover { background: var(--paper-2); }
.lcq-step button:active { background: #d8e8fb; }
.lcq-step input {
  width: 48px; height: 42px; text-align: center; border: 0; background: none;
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink);
}
.lcq-step.sm button { width: 36px; height: 36px; font-size: 17px; }
.lcq-step.sm input { width: 44px; height: 36px; font-size: 14px; }
.lcq-hrs { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lcq-hrs > span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.lcq input[type=number]::-webkit-outer-spin-button,
.lcq input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lcq input[type=number] { -moz-appearance: textfield; }

/* AC type segmented control */
.lcq-seg { display: flex; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.lcq-seg button { padding: 9px 13px; font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--body); }
.lcq-seg button.on { background: var(--blue); color: #fff; }

/* ---------- add more / library ---------- */
.lc-addrow { margin-top: 13px; }
.lc-addmore {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  padding: 13px 18px; border-radius: var(--r-pill);
  border: 1.5px dashed var(--line); background: #fff;
  font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--blue);
  transition: border-color .18s, background .18s;
}
.lc-addmore:hover { border-color: var(--blue); background: var(--paper-2); }
.lc-addmore svg { width: 17px; height: 17px; }

.lc-lib { margin-top: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.lc-searchwrap { display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 0 13px; }
.lc-searchwrap svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.lc-searchwrap input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 0; font-size: 15px; outline: none; }
.lc-liblist { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 12px; max-height: 300px; overflow-y: auto; }
@media (min-width: 620px) { .lc-liblist { grid-template-columns: 1fr 1fr; } }
.lc-libitem {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 10px 40px 10px 10px; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); text-align: left;
  transition: border-color .15s, background .15s;
}
.lc-libitem:hover { border-color: var(--blue); background: var(--paper-2); }
.lc-libitem .lc-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--paper-2); color: var(--blue); }
.lc-libitem .lc-ico svg { width: 15px; height: 15px; }
.lc-libitem .lc-nm { flex: 1; min-width: 0; font-family: var(--display); font-weight: 600; font-size: 13.4px; color: var(--ink); }
.lc-libitem .lc-w { font-size: 11.5px; color: var(--muted); flex: none; }
.lc-libitem .lc-plus {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--paper-2); color: var(--blue); font-weight: 700; font-size: 15px;
}
.lc-libitem:hover .lc-plus { background: var(--blue); color: #fff; }

.lc-custom { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.lc-custom h4 { font-size: 14px; margin-bottom: 10px; }
.lc-custrow { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .lc-custrow { grid-template-columns: 1.6fr .8fr .6fr auto; } }
.lc-custrow input {
  min-width: 0; padding: 12px 13px; font-size: 14.5px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
}
.lc-custrow input:focus { outline: none; border-color: var(--blue); }
.lc-custrow .btn { padding: 12px 20px; }
.lc-err { font-size: 12.8px; color: var(--danger); margin-top: 9px; }
.lc-empty { font-size: 13.5px; color: var(--muted); padding: 16px; text-align: center; grid-column: 1 / -1; }

/* ---------- step 1 result ---------- */
.lc-result { margin-top: 20px; background: var(--navy); color: #cfe0f2; border-radius: var(--r-lg); padding: 22px 18px; text-align: center; }
@media (min-width: 700px) { .lc-result { padding: 26px 24px; } }
.lc-nothing { font-size: 13.5px; color: #8fa9c4; margin-bottom: 14px; }
.lc-res-lbl { font-size: 12.5px; color: #9fb8d2; }
.lc-res-big { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 13vw, 60px); color: var(--blue-bright); letter-spacing: -.04em; line-height: 1.05; margin: 3px 0 2px; }
.lc-res-big small { font-size: 20px; font-weight: 600; color: #a8c8ea; letter-spacing: 0; }
.lc-bar { height: 6px; background: rgba(255,255,255,.13); border-radius: var(--r-pill); overflow: hidden; margin: 11px 0 7px; }
.lc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); border-radius: inherit; transition: width .4s ease; }
.lc-res-count { font-size: 12px; color: #8fa9c4; }

.lc-rec { margin-top: 18px; padding: 16px 14px; background: rgba(46,146,255,.12); border: 1px solid rgba(46,146,255,.26); border-radius: var(--r); }
.lc-rec > span { display: block; font-size: 12.5px; color: #a9c4e0; }
.lc-rec > b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 7vw, 32px); color: #fff; letter-spacing: -.02em; margin: 3px 0 6px; }
.lc-rec > em { display: block; font-style: normal; font-size: 11.8px; line-height: 1.55; color: #8fb5dd; }

.lc-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.12); margin-top: 16px; border-radius: var(--r); overflow: hidden; text-align: left; }
.lc-figs > div { background: var(--navy); padding: 13px 13px; }
.lc-figs span { display: block; font-size: 11.3px; color: #93aec9; }
.lc-figs b { display: block; font-family: var(--display); font-size: 17px; color: #fff; margin-top: 3px; }

.lc-rate { display: flex; align-items: center; gap: 10px; margin-top: 14px; text-align: left; }
.lc-rate label { font-size: 12.5px; color: #a9c4e0; flex: 1; }
.lc-rate input { width: 90px; padding: 10px; text-align: center; background: rgba(255,255,255,.08); border: 0; border-radius: var(--r-sm); color: #fff; font-family: var(--display); font-weight: 600; }

.lc-surge { font-size: 12.2px; color: #a9c4e0; line-height: 1.6; margin: 14px 0 16px; padding: 11px 13px; background: rgba(46,146,255,.1); border-left: 3px solid var(--blue-bright); border-radius: 0 6px 6px 0; text-align: left; }
.lc-result .btn:disabled { opacity: .45; pointer-events: none; box-shadow: none; }

/* ---------- choices ---------- */
.lc-choice { display: grid; gap: 12px; }
@media (min-width: 620px) { .lc-choice { grid-template-columns: 1fr 1fr; } }
.lc-card-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 20px 18px; text-align: left;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .18s, background .18s, transform .18s;
}
.lc-card-opt:hover { border-color: var(--blue); background: #fff; transform: translateY(-2px); }
.lc-card-opt.on { border-color: var(--blue); background: var(--paper-2); }
.lc-opt-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.lc-opt-ico svg { width: 22px; height: 22px; }
.lc-card-opt b { font-family: var(--display); font-size: 18px; color: var(--ink); }
.lc-card-opt small { font-size: 13.3px; line-height: 1.6; color: var(--body); }
.lc-opt-ur { font-family: var(--urdu); direction: rtl; font-size: 13px; line-height: 2.1; color: var(--blue-ink); }

.lc-field { display: block; margin-bottom: 18px; }
.lc-field > span { display: block; font-family: var(--display); font-weight: 600; font-size: 13.8px; color: var(--ink); margin-bottom: 8px; }
.lc-field select {
  width: 100%; padding: 13px 15px; font-size: 15px;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8ba1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px;
}
.lc-sublbl { display: block; font-family: var(--display); font-weight: 600; font-size: 13.8px; color: var(--ink); margin-bottom: 9px; }

.lc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--paper); border: 1.5px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--body);
}
.lc-pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.lc-pill em { font-style: normal; font-size: 11px; opacity: .85; }

.lc-leadnote {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
  padding: 13px 14px; background: #fff7e8; border: 1px solid #f3dcae; border-radius: var(--r);
  font-size: 13px; line-height: 1.6; color: #7a5a17;
}
.lc-leadnote svg { width: 18px; height: 18px; color: var(--amber); flex: none; margin-top: 1px; }

/* ---------- final summary ---------- */
.lc-summary { background: var(--navy); border-radius: var(--r-lg); padding: 22px 18px; color: #cfe0f2; }
@media (min-width: 700px) { .lc-summary { padding: 26px 24px; } }
.lc-sum-hero { text-align: center; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13); }
.lc-sum-hero > span { font-size: 12.5px; color: #9fb8d2; }
.lc-sum-hero strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 9vw, 42px); color: var(--blue-bright); letter-spacing: -.03em; line-height: 1.1; margin: 4px 0 6px; }
.lc-sum-hero em {
  display: inline-block; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 12.5px;
  background: rgba(46,146,255,.18); color: #9ecbff; padding: 5px 14px; border-radius: var(--r-pill);
}
.lc-sum-list { margin: 0; display: grid; gap: 1px; background: rgba(255,255,255,.12); margin-top: 18px; border-radius: var(--r); overflow: hidden; }
.lc-sum-list > div { background: var(--navy); padding: 13px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.lc-sum-list dt { font-size: 12.8px; color: #93aec9; }
.lc-sum-list dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 14.5px; color: #fff; text-align: right; }

.lc-price { margin-top: 16px; background: var(--paper-2); border: 1px solid #c9dcf3; border-radius: var(--r-lg); padding: 20px 18px; text-align: center; }
.lc-price-lbl { display: block; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.lc-price strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(21px, 6vw, 29px); color: var(--ink); letter-spacing: -.02em; margin: 7px 0 6px; }
.lc-price-mid { display: block; font-size: 13.5px; color: var(--body); }
.lc-price-mid b { font-family: var(--display); color: var(--blue-ink); }
.lc-price-note { font-size: 11.8px; line-height: 1.6; color: var(--muted); margin-top: 12px; }
.lc-price-date { display: block; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.lc-price-date b { color: var(--ink); }

.lc-final-cta { display: grid; gap: 10px; margin-top: 18px; }

/* ---------- narrow phones ---------- */
@media (max-width: 380px) {
  .lc-panel { padding: 16px 13px; }
  .lcq { padding: 11px 11px; }
  /* keep tap targets at 42px+ even on a 320px phone */
  .lcq-step button { width: 42px; height: 44px; }
  .lcq-step input { width: 40px; height: 44px; font-size: 14.5px; }
  .lcq-step.sm button { width: 38px; height: 40px; }
  .lcq-step.sm input { width: 38px; height: 40px; }
  .lcq-ctl { gap: 8px; }
  .lcq-hrs { margin-left: 0; width: 100%; justify-content: space-between; }
  .lcq-seg button { padding: 8px 10px; font-size: 11.5px; }
  .lc-prog li { font-size: 11px; padding: 7px 4px; gap: 5px; }
  .lc-prog li span { width: 18px; height: 18px; font-size: 10px; }
  .lc-sum-list > div { flex-direction: column; gap: 3px; }
  .lc-sum-list dd { text-align: left; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.post { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; position: relative; }
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.post .frame { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; }
.post-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.post-meta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.post-meta .tag { color: var(--blue); font-weight: 600; }
.post h3 { font-size: 18px; margin-bottom: 8px; }
.post p { font-size: 14.3px; }
.post .link-arrow { margin-top: auto; padding-top: 16px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy); color: #9fb8d2; padding-top: 44px; }
.footer-grid { display: grid; gap: 30px; padding-bottom: 34px; }
.footer-brand img { height: 40px; width: auto; margin-bottom: 16px; background: #fff; padding: 7px 11px; border-radius: var(--r-sm); }
.footer-brand p { font-size: 14.3px; line-height: 1.7; max-width: 330px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #cfe0f2; transition: background .2s, color .2s; }
.footer-social a:hover { background: var(--blue); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 15px; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14.2px; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; font-size: 14.2px; }
.footer-contact svg { width: 17px; height: 17px; color: var(--blue-bright); flex: none; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 20px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; font-size: 13px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 10px 28px rgba(37, 211, 102, .42);
  transition: transform .2s;
}
.fab:hover { transform: scale(1.07); }
.fab svg { width: 27px; height: 27px; }

/* ==========================================================================
   Motion
   ========================================================================== */
/* Content is visible by default. It is only hidden for animation once JS has
   confirmed it is running (html.js-anim), so a script failure can never leave
   a section blank. */
.js-anim .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 26px; }
.mb-2 { margin-bottom: 18px; }
.hide-sm { display: none; }
@media (min-width: 768px) { .hide-sm { display: block; } }

/* Full-bleed placeholder: gradient only, no caption (copy sits on top). */
.ph-plain { background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 55%, #071426 100%); }
.ph-plain::before { opacity: .5; }

/* --------------------------------------------------------------------------
   Narrow-phone fixes (360px and below)
   Grid and flex children default to min-width:auto, which stops them shrinking
   below their content and pushes the calculator wider than the viewport.
   -------------------------------------------------------------------------- */
/* Grid/flex items default to min-width:auto, so the widest child (the appliance
   rows) forces the whole calculator column wider than the viewport. Allowing
   these to shrink is what keeps 320px phones from clipping. */
.lc, .lc > *, .lc-right, .lc-edu, .lc-panel, .grid > *, .split > *,
.lcq > *, .lcq-ctl > *, .lc-custrow > *, .lc-sum-list > *, .field-row > * { min-width: 0; }

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .lc-figs b { font-size: 16px; }
  .btn { font-size: 14.5px; padding: 13px 18px; }
  .btn-lg { padding: 15px 22px; font-size: 15px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Homepage "Know your load" promo
   -------------------------------------------------------------------------- */
.lc-promo-box {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 20px; display: grid; gap: 24px; align-items: center;
}
@media (min-width: 960px) {
  .lc-promo-box { grid-template-columns: 1.05fr .95fr; padding: 40px 38px; gap: 44px; }
}
.lc-promo-list { display: grid; gap: 9px; margin-top: 18px; }
.lc-promo-list li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.lc-promo-list svg { width: 17px; height: 17px; color: var(--green); flex: none; }
.nav-calc { display: none; }
@media (min-width: 1200px) { .nav-calc { display: inline-flex; } }

/* ==========================================================================
   Featured hero — rebuilt from the supplied homepage comp.
   Urdu Nastaliq headline leads, phone mockup sits alongside on wide screens.
   ========================================================================== */
.hero-copy { position: relative; z-index: 2; }

/* Urdu headline: Nastaliq needs far more line-height than Latin, and sits
   right-aligned within its own column the way the comp has it. */
.hero-title-ur {
  font-family: var(--urdu);
  direction: rtl;
  text-align: right;
  font-weight: 600;
  font-size: clamp(34px, 11vw, 74px);
  line-height: 1.75;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 4px 24px rgba(4, 14, 28, .55);
  margin-bottom: 6px;
}
.hero-sub-lead {
  direction: rtl;
  text-align: right;
  font-size: clamp(14.5px, 4vw, 19px);
  line-height: 2.5;
  color: #dbe9f8;
  max-width: 100%;
}
.hero-featured .hero-sub:not(.ur) {
  font-size: 15px;
  color: #a8c4e0;
  margin-top: 10px;
  max-width: 480px;
}

/* Urdu CTA reads right-to-left, so the arrow leads on the left. */
.btn-ur {
  font-family: var(--urdu);
  direction: rtl;
  font-size: 16px;
  line-height: 2.1;
  padding: 10px 28px 14px;
  gap: 14px;
}
.btn-ur svg { width: 20px; height: 20px; }

@media (min-width: 1024px) {
  .hero-featured .hero-inner { max-width: var(--maxw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: center; }
  .hero-featured .hero-copy { max-width: 560px; }
  .hero-title-ur { text-shadow: 0 6px 30px rgba(4, 14, 28, .6); }
}

/* ---------- phone mockup ---------- */
.hero-phone { display: none; position: relative; z-index: 2; justify-self: center; }
.hp-body {
  width: 270px; padding: 14px 13px 18px;
  background: #0b1524; border: 3px solid #2b3f57; border-radius: 34px;
  box-shadow: 0 30px 70px rgba(4, 12, 24, .6);
}
.hp-status { display: flex; justify-content: space-between; align-items: center; padding: 2px 8px 10px; font-size: 11px; font-weight: 600; color: #cfe0f2; }
.hp-bars { width: 42px; height: 9px; border-radius: 3px; background: linear-gradient(90deg, #cfe0f2 0 60%, #52708f 60% 100%); opacity: .8; }
.hp-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 12px; }
.hp-head b { font-family: var(--display); font-size: 17px; color: #fff; font-weight: 600; }
.hp-plus { width: 22px; height: 22px; display: grid; place-items: center; color: #cfe0f2; font-size: 19px; line-height: 1; }
.hp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hp-tile {
  background: #16293f; border-radius: 14px; padding: 13px 11px 11px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
}
.hp-tile.on { background: #1b3552; }
.hp-ico { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 6px; }
.hp-ico svg { width: 22px; height: 22px; }
.hp-ico.amber { color: var(--amber); }
.hp-ico.blue { color: var(--blue-bright); }
.hp-ico.green { color: var(--green); }
.hp-tile b { font-family: var(--display); font-size: 13px; font-weight: 600; color: #fff; }
.hp-tile small { font-size: 12px; color: #8fa9c4; }

@media (min-width: 1024px) { .hero-phone { display: block; } }
@media (min-width: 1200px) { .hp-body { width: 300px; } }

/* Keep the featured slide tall enough for the Nastaliq headline on phones. */
@media (max-width: 520px) {
  .hero-featured .hero-title-ur { line-height: 1.85; }
  .hero-featured .hero-sub:not(.ur) { font-size: 14px; }
}

/* The featured slide carries a real photograph rather than an illustration, so
   the overlay only needs to darken the left where the headline sits. The house
   must stay clearly visible on the right, as in the supplied comp. */
.hero-featured .hero-bg::after {
  /* Darker where the Nastaliq headline sits, clearing toward the lower third so
     the lit house still reads on a phone. */
  background: linear-gradient(180deg,
    rgba(8, 20, 38, .88) 0%, rgba(8, 20, 38, .7) 34%,
    rgba(8, 20, 38, .42) 62%, rgba(8, 20, 38, .2) 84%,
    rgba(8, 20, 38, .55) 100%);
}
@media (min-width: 1024px) {
  .hero-featured .hero-bg::after {
    /* The comp is a dusk scene: the source photo averages ~83/255 brightness, so
       the overlay has to clear almost completely on the right or the house
       disappears. Left stays dark enough to carry white Nastaliq. */
    background:
      linear-gradient(100deg, rgba(8, 20, 38, .92) 0%, rgba(8, 20, 38, .72) 28%,
                      rgba(8, 20, 38, .3) 52%, rgba(8, 20, 38, .05) 78%,
                      rgba(8, 20, 38, 0) 100%);
  }
}

/* Give the featured slide the taller, more cinematic proportion of the comp,
   and pull the phone in from the far right so it overlaps the boundary between
   the copy and the house rather than sitting on top of the house. */
@media (min-width: 1024px) {
  .hero-featured .hero-slides, .hero-slides:has(.hero-featured) { min-height: 740px; }
  .hero-featured .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 24px; }
  .hero-featured .hero-bg img { object-position: 58% center; }
}
@media (min-width: 1280px) {
  .hero-featured .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
}

/* On a phone the copy block fills most of the hero, leaving the photograph no
   room to read. Extra height gives a clear band beneath the buttons where the
   house shows through at low overlay opacity. */
@media (max-width: 1023px) {
  .hero-featured .hero-inner { padding-bottom: 190px; }
}
@media (max-width: 520px) {
  .hero-featured .hero-inner { padding-bottom: 170px; }
  .hero-featured .hero-sub:not(.ur) { font-size: 13.5px; line-height: 1.6; }
}

/* --------------------------------------------------------------------------
   Hero arrows were pinned to the viewport edge (left:16px), which put them on
   top of the copy and the CTA at any width where the container is not inset —
   i.e. everything below ~1240px. Align them to the container's right edge
   beside the dots instead, and leave touch widths to swipe + dots.
   -------------------------------------------------------------------------- */
.hero-arrow { display: none; }

@media (min-width: 1024px) {
  .hero-arrow {
    display: grid;
    top: auto;
    bottom: 100px;
    left: auto;
  }
  .hero-next { right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); }
  .hero-prev { right: max(calc(var(--gutter) + 52px), calc((100% - var(--maxw)) / 2 + var(--gutter) + 52px)); }
}

/* ==========================================================================
   Banner slide — the artwork is a finished composite (blurred scene, sharp
   phone) that already carries its own left-hand wash, so the CSS overlay here
   only needs to guarantee text contrast, not darken the picture again.
   ========================================================================== */
.hero-banner .hero-bg::after {
  /* Copy sits over the upper half on a phone, so that band needs to be darker
     than desktop — the artwork behind it is the bright device screen. */
  background: linear-gradient(180deg,
    rgba(7, 19, 31, .88) 0%, rgba(7, 19, 31, .78) 34%,
    rgba(7, 19, 31, .5) 62%, rgba(7, 19, 31, .72) 100%);
}
/* A 16:9 banner in a tall phone viewport crops to a narrow vertical slice. At
   72% that slice landed inside the device screen, which read as clutter rather
   than a phone. 86% frames the whole handset. */
.hero-banner .hero-bg img { object-position: 86% center; }
.hero-banner .hero-inner { padding-bottom: 230px; }

@media (min-width: 1024px) {
  .hero-banner .hero-bg::after {
    background: linear-gradient(100deg,
      rgba(7, 19, 31, .84) 0%, rgba(7, 19, 31, .58) 32%,
      rgba(7, 19, 31, .12) 58%, rgba(7, 19, 31, 0) 78%);
  }
  /* Anchor the crop right so the phone hugs the right edge, and keep the copy
     column narrow enough that the RTL headline never reaches it. Around
     1024-1100px the image is cropped hardest, so this is the tight case. */
  .hero-banner .hero-bg img { object-position: right center; }
  /* Constrain the copy block, not the container — shrinking .container would
     centre it and push the RTL headline toward the phone instead of away. */
  /* .hero-inner is capped at 640px and centred by .container, which floats the
     copy into the middle of the screen — straight into the phone. Give this
     slide the full container so the copy starts at the page's left edge. */
  .hero-banner .hero-inner { max-width: var(--maxw); padding-bottom: 180px; }
  .hero-banner .hero-copy { max-width: 460px; }
}
@media (min-width: 1200px) {
  .hero-banner .hero-copy { max-width: 540px; }
}

/* The Urdu heading leads and the English line supports it, with no Urdu sub. */
.hero-banner .hero-sub:not(.ur) {
  font-size: clamp(15px, 4vw, 18.5px);
  color: #d6e6f7;
  max-width: 440px;
  margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Hero tagline — the English line demoted beneath an Urdu headline.
   Sized between the headline and the body copy so the hierarchy reads
   Urdu first, English second.
   -------------------------------------------------------------------------- */
.hero-tagline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 4.6vw, 28px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #fff;
  margin-top: 8px;
  text-shadow: 0 2px 14px rgba(4, 14, 28, .5);
}
.hero-tagline .hl { color: var(--blue-bright); }