/* ============================================================
   W4Y Pergola 350 — landing page
   Palette and type derived from the Figma design.
   ============================================================ */

:root{
  --nav-h:      112px;
  --ink:        rgb(11,18,32);
  --ink-2:      rgb(7,12,20);
  --muted:      rgb(88,97,116);
  --border:     rgb(219,226,234);
  --border-2:   rgb(199,211,225);
  --bg:         #ffffff;
  --bg-alt:     rgb(245,247,250);
  --bg-soft:    rgb(241,245,249);
  --blue:       rgb(7,95,202);
  --blue-2:     rgb(3,47,103);
  --blue-soft:  rgb(232,240,250);
  --green:      rgb(0,182,122);

  --radius:     8px;
  --radius-lg:  14px;

  --shadow-sm:  0 1px 2px rgba(11,18,32,.04);
  --shadow:     0 8px 24px -12px rgba(11,18,32,.12), 0 2px 4px rgba(11,18,32,.04);
  --shadow-lg:  0 24px 56px -20px rgba(11,18,32,.28);

  --font: "Arial", "Helvetica Neue", Helvetica, system-ui, sans-serif;

  --container-px: clamp(20px, 6vw, 96px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:1344px;
  margin:0 auto;
  padding-left:var(--container-px);
  padding-right:var(--container-px);
}
.container--faq{ max-width:960px; }

/* ============================ TYPE ============================ */

.eyebrow{
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 14px;
}
.eyebrow--light{ color:#8FC1FF; }

.h2{
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.06;
  margin:0 0 24px;
  letter-spacing:-.01em;
  font-weight:700;
  color:var(--ink);
  max-width:22ch;
  text-wrap:pretty;
}
.h2--light{ color:#fff; }

.lede{
  font-size:18px;
  line-height:1.62;
  color:var(--muted);
  margin:0 0 18px;
  max-width:62ch;
}
.lede--light{ color:rgb(217,228,239); }
.lede--wide{ max-width:80ch; }

.muted{ color:var(--muted); }

.fine{
  font-size:13px;
  line-height:1.55;
  color:rgb(183,198,214);
  margin:18px 0 0;
}

.section{ padding:96px 0; position:relative; }
.section--alt{ background:var(--bg-alt); }
.section--dark{ background:var(--ink); color:#fff; }
.section--dark .h2{ color:#fff; }
.section--dark .lede{ color:rgb(217,228,239); }

/* ============================ BUTTONS ============================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:52px;
  padding:0 24px;
  border-radius:var(--radius);
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn--primary{
  background:var(--blue); color:#fff;
  box-shadow:0 6px 14px -8px rgba(7,95,202,.7);
}
.btn--primary:hover{ background:#0556B6; text-decoration:none; transform:translateY(-1px); }

.btn--secondary{
  background:#fff; color:var(--blue);
  border-color:var(--border);
}
.btn--secondary:hover{ border-color:var(--blue); text-decoration:none; }

.btn--ghost{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.48);
  color:#fff;
}
.btn--ghost:hover{ background:rgba(0,0,0,.45); text-decoration:none; }

.btn--wa{
  background:#25D366;
  border:none;
  color:#fff;
  box-shadow:0 6px 14px -8px rgba(37,211,102,.65);
}
.btn--wa:hover{ background:#1DA851; text-decoration:none; transform:translateY(-1px); }

.btn--block{ width:100%; }

.ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:28px; }
.ctas--center{ justify-content:center; margin-top:36px; }

/* ============================ HERO ============================ */

.hero{
  position:relative;
  background:var(--ink);
  color:#fff;
  min-height:760px;
  padding-bottom:80px;
}
.hero__bg{
  position:absolute; inset:0;
  background:url('assets/hero.jpg') center / cover no-repeat;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,10,18,.55) 0%, rgba(5,10,18,.35) 35%, rgba(5,10,18,.78) 100%),
    radial-gradient(80% 60% at 20% 30%, rgba(5,10,18,.35), rgba(5,10,18,0) 60%);
}
.hero > .hero__content { position:relative; z-index:1; }

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:20px;
  padding-bottom:20px;
  padding-left:var(--container-px);
  padding-right:var(--container-px);
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:200;
  transition:background .25s ease, padding .2s ease, box-shadow .25s ease, transform .3s ease;
}
.nav__logo{
  width:108px; height:72px;
  border-radius:8px;
  background:rgba(255,255,255,.94);
  display:flex; align-items:center; justify-content:center;
  padding:6px;
  flex-shrink:0;
}
.nav__logo img{ width:96px; height:60px; object-fit:contain; }

.nav__links{
  display:flex;
  gap:28px;
  list-style:none;
  padding:0; margin:0;
  align-items:center;
}
.nav__links a{
  color:rgba(255,255,255,.86);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
}
.nav__links a:hover{ color:#fff; text-decoration:none; }
.nav__cta{
  background:#fff;
  color:var(--ink) !important;
  padding:12px 22px;
  border-radius:8px;
  font-size:15px;
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.nav__cta:hover{ background:rgba(255,255,255,.9); box-shadow:0 4px 12px rgba(0,0,0,.22); }

.nav--scrolled{
  background:rgba(5,10,18,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
  padding-top:14px;
  padding-bottom:14px;
}
.nav--hidden{ transform:translateY(-100%); }

.hero__content{
  padding-top:calc(var(--nav-h) + 24px);
  padding-bottom:32px;
  max-width:1344px;
}

.hero__title{
  font-size:clamp(40px, 5.6vw, 78px);
  line-height:1.02;
  letter-spacing:-.02em;
  font-weight:900;
  margin:0 0 24px;
  max-width:18ch;
  color:#fff;
  text-wrap:balance;
}

.hero__lede{
  font-size:20px;
  line-height:1.55;
  color:rgba(232,240,250,.92);
  max-width:72ch;
  margin:0 0 28px;
}
.hero__lede strong{ color:#fff; font-weight:700; }

.hero__bullets{
  list-style:none; padding:0; margin:0 0 32px;
  display:grid; gap:10px;
  max-width:62ch;
}
.hero__bullets li{
  position:relative;
  padding-left:30px;
  font-size:16px;
  color:rgba(244,248,253,.92);
}
.hero__bullets li::before{
  content:"";
  position:absolute; left:0; top:5px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--green);
  background-image:linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  box-shadow:0 0 0 4px rgba(0,182,122,.18);
}
.hero__bullets li::after{
  content:"";
  position:absolute; left:4px; top:9px;
  width:10px; height:5px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

.hero__chips{
  list-style:none; padding:0;
  margin:36px 0 0;
  display:flex; gap:24px; flex-wrap:wrap;
  font-size:14px;
  color:rgba(232,240,250,.85);
  font-weight:600;
}
.hero__chips li{ display:flex; align-items:center; gap:10px; }
.dot{ width:8px; height:8px; border-radius:50%; background:#fff; display:inline-block; }
.dot--green{ background:var(--green); box-shadow:0 0 0 3px rgba(0,182,122,.25); }

/* ============================ TRUST BAR ============================ */

.trust{
  background:var(--border);
  padding:0;
}
.trust__inner{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1px;
  background:var(--border);
}
.trust__card{
  background:#fff;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  min-height:115px;
}
.trust__brand{ display:flex; align-items:center; justify-content:center; gap:2px; font-size:22px; line-height:1; font-weight:700; }
.trust__brand--row{ gap:8px; }
.trust__brand strong{ font-size:22px; font-weight:900; letter-spacing:-.01em; color:var(--ink); }
.g-g{ font-family:Arial; font-weight:900; font-size:24px; letter-spacing:-.02em; }
.g-g--blue{ color:#4285F4; }
.g-g--red{ color:#EA4335; }
.g-g--yellow{ color:#FBBC05; }
.g-g--green{ color:#34A853; }
.stars{ display:flex; gap:2px; }
.trust__tp{ font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }

.trust__rating{ font-size:20px; font-weight:700; color:var(--ink); line-height:1.1; }
.trust__rating--small{ font-size:18px; }
.trust__sub{ font-size:13px; font-weight:700; color:var(--muted); }

/* ============================ INTRO GRID ============================ */

.intro-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:80px;
  align-items:start;
}
.intro-grid--narrow{ gap:60px; }

.feature-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:28px;
}
.feature-list li{
  display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start;
}
.feature-list h3{ margin:0 0 6px; font-size:20px; font-weight:700; color:var(--ink); }
.feature-list p{ margin:0; color:var(--muted); font-size:16px; line-height:1.55; }
.badge{
  width:64px; height:64px;
  border-radius:14px;
  background:var(--blue-soft);
  color:var(--blue);
  font-weight:900;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:-.01em;
}

/* ============================ SPLIT (image + body) ============================ */

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:stretch;
}
.split--reverse{ direction:rtl; }
.split--reverse > *{ direction:ltr; }

.split__media{
  border-radius:var(--radius);
  background:var(--border) center / cover no-repeat;
  min-height:360px;
  box-shadow:var(--shadow);
}

.benefits{
  list-style:none; padding:0; margin:0 0 28px;
  display:grid; gap:22px;
}
.benefits li{ display:grid; grid-template-columns:56px 1fr; gap:18px; }
.benefits h3{ margin:0 0 4px; font-size:18px; font-weight:700; }
.benefits p{ margin:0; color:var(--muted); font-size:16px; line-height:1.55; }
.benefit-num{
  width:48px; height:48px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--border);
  color:var(--blue);
  font-weight:900; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:.05em;
  box-shadow:var(--shadow-sm);
}

/* ============================ CARDS / ROUTES ============================ */

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.routes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  margin-top:36px;
}
.route{
  padding:32px;
  position:relative;
  display:flex; flex-direction:column;
}
.route--featured{
  border:1px solid var(--blue);
  box-shadow:0 24px 48px -28px rgba(7,95,202,.4), var(--shadow-sm);
}
.route__pin{
  position:absolute; top:-12px; right:24px;
  background:var(--blue); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:99px;
}
.route__title{ font-size:30px; font-weight:700; margin:0 0 10px; }
.route__lede{ color:var(--muted); font-size:18px; line-height:1.55; margin:0 0 24px; }
.route__foot{ margin-top:auto; padding-top:20px; border-top:1px solid var(--border); font-size:14px; color:var(--muted); }

.checks{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; }
.checks li{
  position:relative;
  padding-left:30px;
  font-size:16px;
  line-height:1.55;
}
.checks li::before{
  content:"";
  position:absolute; left:0; top:4px;
  width:20px; height:20px; border-radius:50%;
  background:rgba(7,95,202,.1);
}
.checks li::after{
  content:"";
  position:absolute; left:6px; top:9px;
  width:9px; height:5px;
  border-left:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}

/* ============================ TABLES ============================ */

.table-wrap{
  margin-top:32px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.ptable{ width:100%; border-collapse:collapse; }
.ptable th, .ptable td{
  text-align:left;
  padding:18px 24px;
  border-bottom:1px solid var(--border);
  font-size:16px;
  color:var(--ink);
}
.ptable th{
  font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
  background:var(--bg-alt);
}
.ptable tr:last-child td{ border-bottom:0; }

.fits{
  padding:32px;
  align-self:start;
}
.fits h3{ margin:0 0 12px; font-size:22px; font-weight:700; }
.fits .muted{ margin:0 0 24px; font-size:16px; line-height:1.55; }
.fits__list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.fits__list li{
  display:grid; grid-template-columns:120px 1fr; gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
  font-size:16px;
  color:var(--ink);
}
.fits__list li:last-child{ border:0; padding-bottom:0; }
.fits__val{ font-weight:700; color:var(--blue); }

/* ============================ PRICING TABLE (DARK) ============================ */

.price-table{
  margin-top:36px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.price-table__head,
.price-table__row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:0;
  align-items:center;
}
.price-table__head{
  background:rgba(255,255,255,.06);
  padding:18px 24px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgb(143,193,255);
}
.price-table__row{
  padding:22px 24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:17px;
  color:#fff;
}
.price{ font-size:18px; font-weight:700; color:#fff; }
.price--accent{ color:#8FC1FF; }

.includes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:32px;
}
.includes__card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:28px;
}
.includes__card h3{ margin:0 0 12px; font-size:22px; font-weight:700; color:#fff; }
.includes__card p{ margin:0; color:rgb(217,228,239); font-size:18px; line-height:1.55; }

/* ============================ ROOF STATES (illustrated strip) ============================ */

.roof-strip{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin:36px 0 28px;
}
.roof-strip figure{ margin:0; }
.roof-strip figcaption{ padding-top:16px; }
.roof-strip h3{ margin:0 0 4px; font-size:20px; font-weight:700; }
.roof-strip p{ margin:0; color:var(--muted); font-size:16px; line-height:1.55; }

.roof-art{
  height:120px;
  border-radius:var(--radius);
  background:var(--bg-soft);
  border:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
  padding:18px;
  align-items:center;
}
.roof-art span{
  display:block;
  background:linear-gradient(180deg, #C7D3E1, #8896AB);
  border-radius:3px;
  height:60%;
  transform-origin:center;
  transition:transform .4s ease;
}
.roof-art--open span{ transform:rotate(0deg) scaleY(.2); }
.roof-art--tilt span{ transform:rotate(0deg) scaleY(.6); }
.roof-art--closed span{ transform:rotate(0deg) scaleY(1); background:linear-gradient(180deg,#5A6678,#2D3540); }

.photo-wide{
  width:100%;
  height:410px;
  border-radius:var(--radius);
  background-color:var(--bg-soft);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  margin-top:32px;
  box-shadow:var(--shadow);
}
img.photo-wide{
  height:auto;
  background:none;
  display:block;
}

/* ============================ SWATCHES ============================ */

.swatches{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
  margin-top:36px;
}
.swatch{ }
.swatch__chip{
  height:140px;
  border-radius:var(--radius);
  margin-bottom:14px;
  box-shadow:inset 0 -10px 30px rgba(0,0,0,.18), var(--shadow-sm);
}
.swatch h3{ margin:0 0 4px; font-size:16px; font-weight:700; }
.swatch p{ margin:0; font-size:14px; color:var(--muted); line-height:1.5; }

/* ============================ FACTORS ============================ */

.factors{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
  margin-top:36px;
}
.factor{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.factor__num{
  display:inline-block;
  font-weight:900;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--blue);
  background:var(--blue-soft);
  padding:4px 10px;
  border-radius:99px;
  margin-bottom:14px;
}
.factor h3{ margin:0 0 6px; font-size:17px; font-weight:700; }
.factor p{ margin:0; font-size:15px; line-height:1.55; color:var(--muted); }

/* ============================ IN / OUT ============================ */

.in-out{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.in-out__card{ padding:30px; }
.in-out__card h3{ margin:0 0 16px; font-size:22px; font-weight:700; display:flex; align-items:center; gap:10px; }
.tick{
  width:28px; height:28px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900;
}
.tick--in{ background:rgba(0,182,122,.16); color:var(--green); }
.tick--out{ background:rgba(217,143,31,.16); color:rgb(217,143,31); }

.bullets{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.bullets li{ position:relative; padding-left:24px; font-size:16px; line-height:1.55; }
.bullets--in li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--green); font-weight:900;
}
.bullets--out li{ color:var(--muted); }
.bullets--out li::before{
  content:"–"; position:absolute; left:0; top:0;
  color:rgb(217,143,31); font-weight:900;
}

/* ============================ STEPS ============================ */

.steps{
  list-style:none; padding:0; margin:0 0 28px;
  display:grid; gap:22px;
}
.steps li{ display:grid; grid-template-columns:48px 1fr; gap:16px; }
.steps__num{
  width:40px; height:40px; border-radius:50%;
  background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:16px;
}
.steps h3{ margin:0 0 4px; font-size:18px; font-weight:700; }
.steps p{ margin:0; color:var(--muted); font-size:16px; line-height:1.55; }

/* ============================ ABOUT ============================ */

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-content:start;
}
.about-card{
  padding:24px;
  display:flex; flex-direction:column;
  background:var(--bg-soft);
}
.about-card--logo{
  display:flex; align-items:center; justify-content:center;
  padding:28px;
  background:#fff;
  min-height:170px;
}
.about-card--logo img{ max-width:200px; height:auto; }
.about-card--wide{ grid-column:1 / -1; }
.about-card__stat{
  font-size:46px; font-weight:900; color:var(--ink);
  line-height:1.05; letter-spacing:-.02em;
  margin-bottom:8px;
}
.about-card__stat--small{ font-size:30px; }
.about-card p{ margin:0; font-size:15px; line-height:1.55; color:var(--muted); }

.ticks{
  list-style:none; padding:0; margin:24px 0 0;
  display:grid; gap:14px;
}
.ticks li{
  position:relative;
  padding-left:30px;
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
}
.ticks li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:18px; height:18px; border-radius:50%;
  background:rgba(7,95,202,.1);
}
.ticks li::after{
  content:"";
  position:absolute; left:4px; top:13px;
  width:9px; height:5px;
  border-left:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}

/* ============================ REVIEWS ============================ */

.reviews{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:36px;
}
.review{ padding:28px; display:flex; flex-direction:column; gap:14px; }
.review blockquote{
  margin:0;
  font-size:17px; line-height:1.55;
  color:var(--ink);
  text-wrap:pretty;
}
.review cite{
  font-style:normal;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  margin-top:auto;
  padding-top:8px;
}

/* ============================ PROCESS ============================ */

.process{
  list-style:none; padding:0; margin:36px 0 0;
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:14px;
  counter-reset:step;
  position:relative;
}
.process::before{
  content:"";
  position:absolute;
  left:6%; right:6%; top:20px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
  z-index:0;
}
.process li{
  position:relative;
  background:transparent;
  z-index:1;
  text-align:center;
  padding:0 4px;
}
.process__num{
  width:40px; height:40px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--blue);
  color:var(--blue);
  font-weight:900; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.process h3{ margin:0 0 6px; font-size:16px; font-weight:700; }
.process p{ margin:0; font-size:13px; line-height:1.45; color:var(--muted); }

/* ============================ FAQ ============================ */

.faq{
  margin-top:36px;
  display:grid;
  gap:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  overflow:hidden;
}
.faq details{
  border-bottom:1px solid var(--border);
}
.faq details:last-child{ border-bottom:0; }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:22px 28px;
  font-size:18px; font-weight:700;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px;
  color:var(--ink);
  user-select:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.chev{
  width:14px; height:14px;
  border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  transform:rotate(45deg);
  transition:transform .2s ease;
  flex-shrink:0;
}
.faq details[open] .chev{ transform:rotate(-135deg); }
.faq details > div{
  padding:0 28px 24px;
}
.faq details > div p{ margin:0; color:var(--muted); font-size:17px; line-height:1.6; }

/* ============================ FINAL CTA + FORM ============================ */

.final{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:60px;
  align-items:start;
}
.final__photo{
  width:100%;
  height:410px;
  border-radius:var(--radius);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  margin:28px 0 16px;
  box-shadow:var(--shadow);
}

.form{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:32px;
  display:grid; gap:18px;
}
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.field{ display:grid; gap:8px; }
.field span{
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:rgb(232,240,250);
}
.field input,
.field select,
.field textarea{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  color:#fff;
  padding:12px 14px;
  font-family:inherit;
  font-size:15px;
  line-height:1.4;
  outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:rgb(183,198,214); }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23DCE8F5' d='M0 0l6 8 6-8z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}
.field select option{ background:var(--ink); color:#fff; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:#8FC1FF;
  background:rgba(255,255,255,.16);
}
.field--block{ grid-column:1 / -1; }

.dropzone{
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.36);
  border-radius:8px;
  padding:26px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag{
  border-color:#8FC1FF;
  background:rgba(143,193,255,.1);
}
.dropzone__inner{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:rgb(220,232,245);
  font-size:15px;
}

.checkbox{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:rgb(220,232,245); line-height:1.5;
  padding:14px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
}
.checkbox input{ margin-top:3px; flex-shrink:0; }
.checkbox .link{ color:#8FC1FF; text-decoration:underline; }

.form__thanks{
  background:rgba(0,182,122,.16);
  border:1px solid rgba(0,182,122,.5);
  color:#7FE6BB;
  padding:14px 18px;
  border-radius:8px;
  font-size:15px;
  margin:0;
}

/* ============================ FOOTER ============================ */

.footer{
  background:var(--ink-2);
  border-top:1px solid rgba(255,255,255,.14);
  color:rgb(183,198,214);
  padding:32px 0;
  font-size:13px;
}
.footer__row{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; }
.footer__center{ text-align:center; }

/* ============================ RESPONSIVE ============================ */

@media (max-width: 1100px){
  .swatches{ grid-template-columns:repeat(3, 1fr); }
  .factors{ grid-template-columns:repeat(3, 1fr); }
  .process{ grid-template-columns:repeat(4, 1fr); }
  .process::before{ display:none; }
  .trust__inner{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 900px){
  .section{ padding:64px 0; }
  .intro-grid, .split, .final, .routes, .in-out, .includes, .reviews, .roof-strip{
    grid-template-columns:1fr; gap:36px;
  }
  .split--reverse{ direction:ltr; }
  .price-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .price-table__head, .price-table__row{ min-width:520px; padding:16px; }
  .price-table__head > div:nth-child(n){ font-size:11px; }
  .nav__links{ gap:14px; }
  .nav__links li:not(:last-child){ display:none; }
  .form__row{ grid-template-columns:1fr; }
  .hero__title{ font-size:42px; }
  .hero{ min-height:auto; padding-bottom:48px; }

  /* Stack the about stat cards vertically */
  .about-grid{ grid-template-columns:1fr; }
  .about-card--wide{ grid-column:auto; }

  /* Process: collapse to 4 columns on tablet */
  .process{ grid-template-columns:repeat(4, 1fr); }
}

@media (max-width: 640px){
  .swatches{ grid-template-columns:repeat(2, 1fr); }
  .factors{ grid-template-columns:1fr 1fr; }
  .process{ grid-template-columns:1fr 1fr; }
  .trust__inner{ grid-template-columns:1fr 1fr; }
  .h2{ font-size:30px; }
  .btn--block{ width:100%; }
  .ctas{ flex-direction:column; align-items:stretch; }
  .ctas .btn{ width:100%; }

  /* Prevent lone orphan in 2-column grids (5 or 7 items) */
  .trust__inner > :last-child:nth-child(odd),
  .factors > :last-child:nth-child(odd),
  .process > :last-child:nth-child(odd){ grid-column:1 / -1; }

  /* Keep swatch chip normal width when it spans a full row */
  .swatches > :last-child:nth-child(odd){
    grid-column:1 / -1;
    max-width:calc(50% - 10px);
    justify-self:center;
  }

  /* Tables: horizontal scroll instead of squishing */
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .ptable{ min-width:420px; }

  .price-table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .price-table__head,
  .price-table__row{
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    min-width:520px;
    row-gap:0;
  }

  /* Trust bar: tighter text on very small screens */
  .trust__sub{ font-size:11px; }
  .trust__rating{ font-size:17px; }
}