/* Grid Architects homepage. Desktop first; tablet <= 1199px, phone <= 809px at the end.
   Every section sits in a 1340px frame with hairline side borders; content runs 50px inside it. */
@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-text-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --navy: #222f37; --ink: #0c0e12; --orange: #e96131;   /* Shivam slate and orange, from the logo (28 Oct 2026) */ --white: #fff;
  --line-d: rgb(255 255 255 / .06); --line-dl: rgb(255 255 255 / .1); --line-l: rgb(0 0 0 / .08);
  --side: 50px; --frame: 1340px; --in: 50px;
  --font: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: var(--navy); color: var(--ink); font-family: var(--font); font-size: 19px; line-height: 26.6px; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
h2 { font-size: 64px; line-height: 65.92px; letter-spacing: -0.055em; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 16px; background: var(--orange); color: #fff; }
.skip:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 24px; height: 24px; flex: none; stroke-width: 1.5; }
.center { display: flex; justify-content: center; }
.right { display: flex; justify-content: flex-end; }

/* frames: a 1340px column with hairline side borders */
.sec, .logos, .band, .cta, .ftr, .hero { padding: 0 var(--side); }
.frame { position: relative; max-width: var(--frame); margin: 0 auto; }
.frame::after { content: ""; position: absolute; inset: 0; border-left: 1px solid var(--line-l); border-right: 1px solid var(--line-l); pointer-events: none; }
.frame--dark::after { border-color: var(--line-d); }
.frame--light-lines::after { border-color: var(--line-dl); }
.sec--light { background: #fff; }
.sec--dark { background: var(--navy); color: #fff; }
.pad { padding: 0 var(--in); }

/* rolling text */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll > span, .roll::after { display: block; transition: transform .45s var(--ease); }
.roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
a:hover .roll > span, a:hover .roll::after { transform: translateY(-100%); }

/* buttons: round icon + rectangle */
.btn { display: inline-flex; align-items: center; width: fit-content; font-size: 21px; line-height: 26.88px; letter-spacing: -0.025em; white-space: nowrap; }
.btn__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; transition: transform .45s var(--ease); }
.btn__ic .ic { width: 20px; height: 20px; stroke-width: 1.7; transition: transform .45s var(--ease); }
.btn:hover .btn__ic .ic { transform: rotate(45deg); }
.btn__txt { display: flex; align-items: center; justify-content: center; min-width: 180px; height: 40px; padding: 7px 28px; border-radius: 2px; }
.btn--orange .btn__ic, .btn--orange .btn__txt { background: var(--orange); color: #fff; }
.btn--white .btn__ic, .btn--white .btn__txt { background: #fff; color: var(--ink); }
.btn--lg .btn__ic { width: 52px; height: 52px; }
.btn--lg .btn__txt { min-width: 188px; height: 49px; padding: 11px 28px; }
.btn--sm { font-size: 17px; line-height: 22.95px; letter-spacing: -0.02em; }
.btn--sm .btn__ic { width: 38px; height: 38px; }
.btn--sm .btn__ic .ic { width: 18px; height: 18px; }
.btn--sm .btn__txt { min-width: 152px; height: 37px; padding: 7px 20px; }

/* labels, heads */
.label { color: var(--orange); font-size: 17px; line-height: 22.95px; font-weight: 500; letter-spacing: -0.02em; }
.label + h2, .label + .statement { margin-top: 14px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.head h2 { max-width: 640px; }
.head__text { max-width: 393px; margin-right: 0; padding-bottom: 6px; color: rgb(255 255 255 / .65); }
.head__text--dark { color: rgb(12 14 18 / .65); }
.head__side { display: flex; flex-direction: column; gap: 24px; max-width: 393px; }
.shead { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* rating chip */
.rating { display: flex; align-items: center; gap: 14px; color: #fff; }
.rating__faces { display: flex; }
.rating__faces img { position: relative; width: 39px; height: 39px; border-radius: 1px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .5); }
.rating__faces img + img { margin-left: -12px; }
.rating--dark .rating__faces img { box-shadow: 0 0 0 1px rgb(255 255 255 / .9); }
.rating__txt { display: flex; flex-direction: column; }
.rating__txt b { display: flex; align-items: center; gap: 4px; font-size: 17px; line-height: 22.95px; font-weight: 400; }
.rating__txt b .ic { width: 15px; height: 15px; }
.rating__txt > span { font-size: 15px; line-height: 21px; opacity: .8; }
.rating--dark { color: var(--ink); }

/* video cards + Watch pill */
.vcard { position: relative; padding: 10px; background: rgb(255 255 255 / .06); }
.vcard::after { content: ""; position: absolute; inset: 0; border-top: 1px solid rgb(255 255 255 / .08); border-bottom: 1px solid rgb(255 255 255 / .08); pointer-events: none; }
.vcard video { width: 100%; height: 100%; object-fit: cover; background: #111; }
.vcard--flat { padding: 0; background: none; }
.vcard--flat::after { display: none; }
.watch { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 9px; border-radius: 1px; background: #fff; color: var(--ink); font-size: 15px; line-height: 21px; transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.watch .ic { width: 16px; height: 16px; }
.watch:hover { transform: translate(-50%, -50%) scale(1.06); }
.is-playing .watch { opacity: 0; pointer-events: none; }

/* ---------- header ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 0 var(--side); color: #fff; transition: background-color .35s; }
.hdr.is-solid { background: var(--navy); }
.hdr__in { position: relative; display: flex; align-items: center; max-width: var(--frame); height: 70px; margin: 0 auto; padding: 0 var(--in); }
.hdr__in::after { content: ""; position: absolute; inset: 0; border-left: 1px solid var(--line-dl); border-right: 1px solid var(--line-dl); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 4px; font-size: 29px; line-height: 31.32px; letter-spacing: -0.05em; }
.brand__ic { width: 22px; height: 22px; }
.brand--lg { font-size: 44px; line-height: 33px; gap: 8px; }
.brand--lg .brand__ic { width: 34px; height: 34px; }
.hdr__nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hdr__nav ul { display: flex; gap: 32px; }
.hdr__nav a { display: block; font-size: 18px; line-height: 25.2px; letter-spacing: -0.01em; opacity: .85; transition: opacity .2s; }
.hdr__nav a:hover { opacity: 1; }
.hdr__cta { margin-left: auto; }
.hdr__burger, .mnav { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; height: max(640px, min(100vh, 900px)); height: max(640px, min(100svh, 900px)); overflow: hidden; color: #fff; background: var(--navy); }
.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, rgb(34 47 55 / .2), rgb(34 47 55 / 0) 40%, rgb(34 47 55 / .15)); }
.hero__frame { height: 100%; padding: 160px var(--in) 0; }
.hero__top { display: flex; justify-content: space-between; }
.hero__vcard { width: 390px; height: 240px; }
.hero__copy { width: 500px; }
.hero h1 { font-size: 26px; line-height: 31.2px; letter-spacing: -0.035em; }
.hero__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 34px; border-top: 1px solid rgb(255 255 255 / .1); }
/* Framer fits this to the 1240px column: 221px type in a 950px box scaled up, i.e. ~288px at 1440 */
.hero__word { position: absolute; left: var(--in); right: var(--in); bottom: 0; font-size: calc((min(100vw, 1440px) - 200px) * .2323); line-height: .95; font-weight: 500; letter-spacing: -0.07em; color: rgb(255 255 255 / .9); white-space: nowrap; }

/* ---------- logos ---------- */
.logos { background: var(--navy); color: #fff; }
.logos::after { content: ""; display: block; }
.logos__frame { padding-top: 100px; }
.logos__line { text-align: center; }
.logos__line b { font-weight: 400; color: var(--orange); }
.logos__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 51px; border-top: 1px solid var(--line-d); }
.logos__cell { height: 150px; overflow: hidden; border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.logos__cell:nth-child(4n) { border-right: 0; }
.logos__cell:nth-child(n+5) { border-bottom: 0; }
.logos__track { display: block; animation: logo-cycle 7s var(--ease) infinite; animation-delay: var(--d); }
.logos__item { display: grid; place-items: center; height: 150px; }
.logos__item img { width: auto; max-width: 110px; height: 30px; object-fit: contain; }
@keyframes logo-cycle { 0%, 42% { transform: none; } 50%, 92% { transform: translateY(-150px); } 100% { transform: translateY(-300px); } }

/* ---------- about ---------- */
.about__frame { padding: 120px 0 140px; }
.statement { max-width: 880px; font-size: 58px; line-height: 63.8px; font-weight: 500; letter-spacing: -0.05em; color: var(--ink); text-wrap: initial; }
.statement--center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; font-size: 64px; line-height: 65.92px; font-weight: 400; letter-spacing: -0.055em; }
.reveal-on .statement .w { color: rgb(0 0 0 / .08); transition: color .35s linear; }
.reveal-on .statement .w.on { color: var(--ink); }
.about__row { display: grid; grid-template-columns: minmax(0, 1fr) 496px; margin-top: 50px; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.about__img { padding: 50px; }
.about__img .parallax { height: 432px; overflow: hidden; }
.parallax img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.about__side { display: flex; flex-direction: column; align-items: flex-start; padding: 50px; border-left: 1px solid var(--line-l); }
.about__text { max-width: 400px; margin-top: 35px; color: rgb(12 14 18 / .75); }
.about__side .btn { margin-top: auto; }

/* ---------- impact ---------- */
.impact__frame { padding: 120px 0 80px; }
.impact .head h2 { max-width: 520px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 60px; border-top: 1px solid var(--line-d); }
.stat { display: grid; grid-template-columns: 291px minmax(0, 259px); align-items: start; height: 212px; padding: 60px; border-bottom: 1px solid var(--line-d); }
.stat:nth-child(odd) { border-right: 1px solid var(--line-d); }
.stat__n { display: flex; align-items: flex-start; font-size: 92px; line-height: 92px; letter-spacing: -0.04em; }
.stat__n b { margin-top: 6px; font-weight: 400; color: var(--orange); letter-spacing: -0.07em; line-height: 80.96px; }
.stat__t { margin-top: 16px; font-size: 18px; line-height: 25.2px; letter-spacing: -0.01em; color: rgb(255 255 255 / .8); }
.impact__video { padding: 50px; border-bottom: 1px solid var(--line-d); }
.impact__video .vcard { height: 615px; }

/* ---------- services ---------- */
.services__frame { padding: 140px 0; }
.svc-list { margin-top: 60px; border-bottom: 1px solid rgb(0 0 0 / .06); }
.svc-row { display: flex; align-items: flex-start; gap: 60px; padding: 33px var(--in) 40px; border-top: 1px solid rgb(0 0 0 / .06); transition: background-color .35s; }
.svc-row:hover, .svc-row:focus-visible { background: var(--orange); }
.svc-row__n { width: 64px; flex: none; font-size: 64px; line-height: 65.92px; letter-spacing: -0.055em; color: rgb(12 14 18 / .15); transition: color .35s; }
.svc-row:hover .svc-row__n { color: rgb(12 14 18 / .3); }
.svc-row h3 { max-width: 620px; font-size: 64px; line-height: 65.92px; letter-spacing: -0.055em; }
.svc-row__ic { width: 90px; height: 90px; margin: 0 0 0 auto; stroke-width: 1.5; transition: transform .45s var(--ease); }
.svc-row:hover .svc-row__ic { transform: translateX(8px); }
.services .center { margin-top: 59px; }

/* ---------- projects ---------- */
.projects { padding: 0; }
.projects__frame { padding-top: 120px; }
.carousel { position: relative; margin-top: 60px; overflow: hidden; }
.carousel__track { display: flex; gap: 20px; transform: translateX(calc(50vw - 400px - 3 * 820px)); transition: transform .7s var(--ease); }
.slide { width: 800px; flex: none; }
.slide__img { height: 499px; overflow: hidden; }
.slide__img img { width: 100%; height: 100%; object-fit: cover; }
.slide__name { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 24px; line-height: 28.8px; letter-spacing: -0.03em; }
.slide__name::before { content: ""; width: 6px; height: 6px; background: var(--orange); }
.carousel__nav { display: flex; justify-content: center; gap: 10px; margin-top: 13px; }
.carousel__nav button { display: grid; place-items: center; width: 39px; height: 39px; background: var(--orange); transition: opacity .25s; }
.carousel__nav button:hover { opacity: .8; }
.carousel__nav img { width: 18px; height: 18px; }
.projects__foot { padding: 28px var(--in) 140px; }
.projects { padding-left: 0; padding-right: 0; }
.projects .frame { margin: 0 var(--side); }
@media (min-width: 1441px) { .projects .frame { margin: 0 auto; } }

/* ---------- process ---------- */
.process__frame { padding: 140px var(--in) 0; }
.process__frame .pad { padding: 0; }
.process__track { position: relative; height: 1698px; margin-top: 80px; }
.process__cards { --stagger: 594; position: sticky; top: max(80px, calc(100vh - 638px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pcard { position: relative; display: flex; flex-direction: column; height: 510px; padding: 40px 32px; border-radius: 2px; background: var(--navy); transform: translateY(var(--y, calc(var(--i) * var(--stagger) * 1px))); }
.pcard:first-child { --y: 0px; }
.pcard::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / .08); border-radius: 2px; pointer-events: none; }
.pcard img { width: 76px; height: 60px; object-fit: contain; object-position: left; }
.pcard h3 { margin-top: 24px; font-size: 44px; line-height: 50.6px; letter-spacing: -0.045em; }
.pcard p { margin-top: auto; color: rgb(255 255 255 / .8); }
.band-cta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; margin: 173px 0 -101px; padding: 60px; background: var(--orange); color: #fff; }
.band-cta h2 { max-width: 650px; }

/* ---------- testimonials ---------- */
.testi__frame { padding: 250px 0 140px; }
.testi-feature { display: grid; grid-template-columns: 1fr 1fr; margin-top: 60px; border-top: 1px solid var(--line-l); }
.testi-feature__media { padding: 32px; border-bottom: 1px solid var(--line-l); }
.testi-feature__media .vcard { height: 321px; }
.vcard--light .watch { box-shadow: 0 2px 10px rgb(0 0 0 / .1); }
.quote { position: relative; display: flex; flex-direction: column; height: 385px; padding: 30px; background: #fff; border-left: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.quote__mark { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 56px; height: 56px; background: var(--orange); color: #fff; }
.quote__mark .ic { width: 30px; height: 30px; }
.quote blockquote { margin-top: 60px; padding-left: 20px; font-size: 21px; line-height: 26.88px; letter-spacing: -0.025em; }
.quote figcaption { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-left: 0; }
.quote figcaption img { width: 46px; height: 46px; border-radius: 1px; object-fit: cover; }
.quote figcaption > span { display: flex; flex-direction: column; }
.quote figcaption b { font-size: 18px; line-height: 25.2px; font-weight: 400; letter-spacing: -0.01em; }
.quote figcaption > span > span { font-size: 17px; line-height: 22.95px; opacity: .6; }
.quote--feature blockquote { padding-left: 20px; max-width: 610px; }
.testi-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.testi-cards .quote { padding: 30px; }
.testi-cards li:first-child .quote { border-left: 0; }
.quote--orange { background: var(--orange); color: #fff; }
.quote--orange .quote__mark { background: #fff; color: var(--orange); }

/* ---------- band ---------- */
.band { position: relative; height: max(520px, 75vh); height: max(520px, 75svh); overflow: hidden; background: var(--navy); color: #fff; }
.band__bg, .cta__bg { position: absolute; inset: 0; }
.band__bg .parallax, .cta__bg .parallax { height: 100%; }
.band__bg .parallax img, .cta__bg .parallax img { height: 130%; }
.band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(34 47 55 / .1), rgb(34 47 55 / .55)); }
.band__frame { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 48px var(--in) 60px; }
.band__low { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.band h2 { max-width: 450px; }
.band__low p { max-width: 560px; margin-top: 20px; color: rgb(255 255 255 / .9); }

/* ---------- team ---------- */
.team__frame { padding-top: 140px; }
.team h2 { max-width: 420px; margin-left: auto; margin-right: auto; }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 61px; border-top: 1px solid rgb(255 255 255 / .08); border-bottom: 1px solid rgb(255 255 255 / .08); }
.member { position: relative; padding: 26px 0 0; border-right: 1px solid rgb(255 255 255 / .08); }
.member:last-child { border-right: 0; }
.member__img { height: 358px; margin: 0 26px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 255 255 / .06); }
.member__img { position: relative; }
.member__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(34 47 55 / 0) 55%, var(--navy)); pointer-events: none; }
.member__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.member:hover .member__img img { transform: scale(1.04); }
.member h3 { margin: 19px 26px 0; font-size: 24px; line-height: 28.8px; letter-spacing: -0.03em; }
.member__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 23px; padding: 20px 26px 26px; border-top: 1px solid rgb(255 255 255 / .08); }
.member__foot p { display: flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .7); }
.member__foot p::before { content: ""; width: 6px; height: 6px; background: var(--orange); }
.member__foot a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); transition: background-color .25s; }
.member__foot a:hover { background: var(--orange); }
.member__foot .ic { width: 14px; height: 14px; }
.team__cta { padding: 50px 0 120px; }

/* ---------- faq ---------- */
.faq__frame { padding: 120px 0 140px; }
.faq h2 { max-width: 520px; }
.faq__row { display: grid; grid-template-columns: 603px minmax(0, 1fr); margin-top: 61px; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.faq__aside { display: flex; flex-direction: column; justify-content: flex-end; padding: 50px; }
.faq__aside img { width: 220px; height: 165px; object-fit: cover; border-radius: 1px; }
.faq__aside p { max-width: 220px; margin-top: 18px; }
.faq__aside .btn { margin-top: 18px; }
.faq__list { border-left: 1px solid var(--line-l); }
.qa { border-bottom: 1px solid var(--line-l); }
.qa:last-child { border-bottom: 0; }
.qa__btn { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 30px 40px; text-align: left; font-size: 21px; line-height: 26.88px; letter-spacing: -0.025em; }
.qa__plus { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fff; transition: transform .35s var(--ease); }
.qa__plus .ic { width: 22px; height: 22px; }
.qa__btn[aria-expanded="true"] .qa__plus { transform: rotate(45deg); }
.qa__a p { max-width: 737px; padding: 0 40px 32px; margin-top: -20px; font-size: 18px; line-height: 25.2px; letter-spacing: -0.01em; color: rgb(0 0 0 / .7); }

/* ---------- blog ---------- */
.blog { padding-bottom: 0; }
.blog__frame { padding-top: 140px; }

.blog .head__text { padding-bottom: 0; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 60px; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.post { display: block; height: 100%; padding: 26px 26px 40px; border-right: 1px solid var(--line-l); }
.posts li:last-child .post { border-right: 0; }
.post__img { height: 330px; overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post:hover .post__img img { transform: scale(1.04); }
.post__meta { display: flex; align-items: center; gap: 8px; margin-top: 40px; font-size: 16px; line-height: 21.6px; letter-spacing: -0.01em; color: rgb(12 14 18 / .6); }
.post__meta span::before { content: "•"; margin-right: 8px; }
.post h3 { max-width: 380px; margin-top: 8px; font-size: 24px; line-height: 28.8px; letter-spacing: -0.03em; }
.blog__spacer { height: 160px; }

/* ---------- closing cta ---------- */
.cta { position: relative; height: 574px; overflow: hidden; background: var(--navy); color: #fff; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: rgb(34 47 55 / .45); }
.cta__frame { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 180px var(--in) 0; text-align: center; }
.cta h2 { max-width: 560px; }
.cta__btn { margin-top: 59px; }
.cta__btn .btn__txt { min-width: 348px; }

/* ---------- footer ---------- */
.ftr { background: var(--navy); color: #fff; }
.ftr__grid { display: grid; grid-template-columns: 658px 306px minmax(0, 1fr); }
.ftr__brand { padding: 100px var(--in) 60px; }
.ftr__brand p { max-width: 440px; margin-top: 22px; color: rgb(255 255 255 / .8); }
.ftr__soc { display: flex; gap: 12px; margin-top: 50px; }
.ftr__soc a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); transition: background-color .25s; }
.ftr__soc a:hover { background: var(--orange); }
.ftr__soc .ic { width: 18px; height: 18px; }
.ftr__col { padding: 100px 0 60px; }
.ftr__col:first-of-type { padding-left: 80px; border-left: 1px solid rgb(255 255 255 / .08); }
.ftr__h { color: rgb(255 255 255 / .65); }
.ftr__h--gap { margin-top: 20px; }
.ftr__col ul { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; font-size: 21px; line-height: 26.88px; letter-spacing: -0.025em; }
.ftr__col ul + .ftr__h { margin-top: 20px; }
.ftr__col a:hover { color: var(--orange); }
.ftr__bottom { padding: 32px var(--in) 30px; border-top: 1px solid rgb(255 255 255 / .08); }

/* ---------- 404 ---------- */
.nf { display: grid; place-items: center; min-height: 80vh; padding: 160px var(--side) 80px; background: #fff; text-align: center; }
.nf h1 { font-size: 64px; line-height: 65.92px; letter-spacing: -0.055em; }
.nf p { margin: 16px auto 32px; color: rgb(12 14 18 / .65); }
.nf .btn { margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
  .process__track { height: auto; }
  .process__cards { position: static; }
  .pcard { --y: 0px !important; }
}

/* =================================================================
   Tablet (810-1199)
   ================================================================= */
@media (max-width: 1199px) {
  :root { --side: 14px; }
  h2 { font-size: 52px; line-height: 53.56px; letter-spacing: -0.048em; }
  .statement { font-size: 50px; line-height: 55px; }
  .statement--center { font-size: 52px; line-height: 53.56px; }
  .head__text { max-width: 318px; }
  .btn { font-size: 20px; line-height: 25.6px; }

  /* header: logo + "+" menu button */
  .hdr__nav, .hdr__cta { display: none; }
  .hdr__burger { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: 2px; background: rgb(255 255 255 / .12); }
  .hdr__burger i { position: absolute; width: 14px; height: 1.5px; background: #fff; transition: transform .3s; }
  .hdr__burger i:nth-of-type(2) { transform: rotate(90deg); }
  .nav-open .hdr__burger i:nth-of-type(1) { transform: rotate(45deg); }
  .nav-open .hdr__burger i:nth-of-type(2) { transform: rotate(135deg); }
  .mnav { display: block; max-width: var(--frame); margin: 0 auto; padding: 10px var(--in) 30px; background: var(--navy); border-left: 1px solid var(--line-dl); border-right: 1px solid var(--line-dl); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--ease), visibility .3s; }
  .nav-open .mnav { opacity: 1; visibility: visible; transform: none; }
  .mnav ul { display: flex; flex-direction: column; gap: 6px; }
  .mnav a { display: block; padding: 8px 0; font-size: 22px; line-height: 28px; letter-spacing: -0.03em; }
  .mnav__cta { margin-top: 18px; }

  /* hero */
  .hero__frame { padding-top: 120px; }
  .hero__vcard { width: 268px; height: 188px; }
  .hero__copy { width: 440px; }
  .hero h1 { font-size: 24px; line-height: 29px; }

  /* logos: 3 x 2 */
  .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos__cell:nth-child(4n) { border-right: 1px solid var(--line-d); }
  .logos__cell:nth-child(3n) { border-right: 0; }
  .logos__cell:nth-child(n+4) { border-bottom: 0; }
  .logos__cell:nth-child(n+7) { display: none; }

  /* about */
  .about__row { grid-template-columns: minmax(0, 1fr) 440px; }
  .about__img .parallax { height: 380px; }

  /* impact */
  .stat { grid-template-columns: 180px minmax(0, 1fr); align-items: center; height: auto; min-height: 190px; padding: 24px 40px; }
  .stat__n { font-size: 72px; line-height: 72px; }
  .stat__n b { line-height: 64px; }
  .stat__t { margin-top: 6px; }
  .impact__video .vcard { height: 380px; }

  /* services */
  .services__frame { padding: 110px 0; }
  .svc-row { padding: 24px var(--in) 25px; }
  .svc-row h3, .svc-row__n { font-size: 52px; line-height: 53.56px; letter-spacing: -0.048em; }
  .svc-row h3 { max-width: 437px; }

  /* projects */
  .slide { width: 691px; }
  .slide__img { height: 431px; }
  .carousel__track { transform: translateX(calc(50vw - 345px - 3 * 711px)); }

  /* process: same rise, narrower cards */
  .process__frame { padding-top: 110px; }
  .process__track { height: calc(440px + 100vh); margin-top: 60px; }
  .process__cards { --stagger: 384; gap: 16px; }
  .pcard { height: 470px; padding: 32px 24px; }
  .pcard h3 { font-size: 28px; line-height: 32.2px; }
  .pcard p { font-size: 17px; line-height: 23.8px; }
  .band-cta { margin-top: 36px; padding: 48px; }
  .band-cta h2 { max-width: 420px; }

  /* testimonials */
  /* below desktop the template shows two of the three smaller testimonials */
  .testi-cards li:nth-child(2) { display: none; }
  .testi-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .testi-feature__media { padding: 24px; }
  .quote { height: auto; min-height: 385px; }
  .quote blockquote { font-size: 20px; line-height: 25.6px; }
  .testi-cards { grid-template-columns: 1fr 1fr; }

  /* band */
  .band h2 { max-width: 380px; }

  /* team: 2 + 1 */
  /* two team members below desktop, as the template */
  .team__grid { grid-template-columns: 1fr 1fr; max-width: 700px; margin-left: auto; margin-right: auto; border-left: 1px solid rgb(255 255 255 / .08); border-right: 1px solid rgb(255 255 255 / .08); }
  .member:nth-child(2) { border-right: 0; }
  .member:nth-child(3) { display: none; }
  .member__img { height: 330px; }

  /* faq */
  .faq__row { grid-template-columns: 400px minmax(0, 1fr); }
  .qa__btn { padding: 26px 30px; font-size: 20px; line-height: 25.6px; }
  .qa__a p { padding: 0 30px 28px; }

  /* blog: 2 + 1 */
  .posts { grid-template-columns: 1fr 1fr; }
  .posts li:nth-child(2) .post { border-right: 0; }
  /* two posts below desktop, as the template */
  .posts li:nth-child(3) { display: none; }
  .post__img { height: 300px; }

  /* cta */
  .cta { height: 549px; }
  .cta__frame { padding-top: 150px; }
  .cta__btn .btn__txt { min-width: 300px; }

  /* footer: brand row, then two columns */
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: 1 / -1; padding: 80px var(--in) 50px; border-bottom: 1px solid rgb(255 255 255 / .08); }
  .ftr__col, .ftr__col:first-of-type { padding: 50px var(--in) 50px; border-left: 0; }
  .ftr__col:first-of-type { padding-left: var(--in); }
}

/* =================================================================
   Phone (<= 809)
   ================================================================= */
@media (max-width: 809px) {
  :root { --side: 0px; --in: 16px; }
  body { font-size: 18px; line-height: 25.2px; }
  h2 { font-size: 36px; line-height: 37.08px; letter-spacing: -0.046em; }
  .statement { font-size: 31px; line-height: 37.2px; }
  .statement--center { font-size: 36px; line-height: 37.08px; }
  .head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .head__text { max-width: none; padding-bottom: 0; }
  .btn { font-size: 19px; line-height: 24.32px; }
  .btn--lg .btn__ic, .btn__ic { width: 38px; height: 38px; }
  .btn--lg .btn__txt, .btn__txt { min-width: 150px; height: 38px; padding: 7px 22px; }
  .btn--sm, .btn--lg { font-size: 16px; line-height: 21.6px; }

  .hdr__in { height: 56px; }
  .brand { font-size: 24px; }

  /* hero: statement + one button, wordmark at the foot */
  .hero { height: 776px; padding: 0; }
  .hero__frame { padding: 100px var(--in) 0; }
  .hero__top { display: block; }
  .hero__vcard, .hero .rating { display: none; }
  .hero__copy { width: auto; max-width: 360px; }
  .hero h1 { font-size: 21px; line-height: 26px; }
  .hero__actions { margin-top: 28px; padding-top: 24px; }
  .hero__word { font-size: calc((100vw - 32px) * .2323); }

  /* logos: 2 x 4 */
  .logos { padding: 0; }
  .logos__frame { padding-top: 60px; }
  .logos__line { padding: 0 var(--in); font-size: 17px; line-height: 23px; }
  .logos__grid { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  .logos__cell, .logos__cell:nth-child(n) { display: block; border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
  .logos__cell:nth-child(2n) { border-right: 0; }
  .logos__cell:nth-child(n+3) { border-bottom: 0; }
  .logos__cell:nth-child(n+5) { display: none; }

  /* about */
  .sec { padding: 0; }
  .about__frame { padding: 80px 0; }
  .about__row { grid-template-columns: 1fr; margin-top: 40px; }
  .about__img { order: 2; padding: 16px; }
  .about__img .parallax { height: 236px; }
  .about__side { padding: 24px 16px 40px; border-left: 0; border-bottom: 1px solid var(--line-l); }
  .about__text { margin-top: 24px; }
  .about__side .btn { margin-top: 28px; }

  /* impact: one stat per row */
  .impact__frame { padding: 80px 0 40px; }
  .stats { grid-template-columns: 1fr; margin-top: 40px; }
  .stat, .stat:nth-child(odd) { grid-template-columns: 150px minmax(0, 1fr); min-height: 226px; padding: 30px 16px; border-right: 0; }
  .stat__n { font-size: 54px; line-height: 54px; }
  .stat__n b { line-height: 50px; }
  .stat__t { margin-top: 0; }
  .impact__video { padding: 20px 20px 100px; }
  .impact__video .vcard { height: 280px; }

  /* services: number above the title */
  .services__frame { padding: 80px 0; }
  .svc-list { margin-top: 40px; }
  .svc-row { flex-wrap: wrap; gap: 18px 12px; padding: 24px 16px 28px; }
  .svc-row__n { width: 100%; font-size: 36px; line-height: 37.08px; }
  .svc-row h3 { flex: 1; font-size: 36px; line-height: 37.08px; }
  .svc-row__ic { width: 36px; height: 36px; margin-top: 0; }
  .services .center { margin-top: 36px; }

  /* projects: one slide at a time */
  .projects .frame { margin: 0; }
  .projects__frame { padding-top: 80px; }
  .carousel { margin-top: 40px; }
  .carousel__track { gap: 16px; }
  .slide { width: calc(100vw - 32px); }
  .slide__img { height: 223px; }
  .slide__name { font-size: 22px; line-height: 26.4px; }
  .projects__foot { padding: 24px 16px 80px; }
  .projects__foot .right { justify-content: center; }

  /* process: plain stack */
  .process__frame { padding: 80px 16px 0; }
  .process__track { height: auto; margin-top: 40px; }
  .process__cards { position: static; grid-template-columns: 1fr; gap: 16px; }
  .pcard, .pcard:nth-child(n) { --y: 0px !important; height: auto; min-height: 340px; padding: 30px; }
  .pcard img { width: 54px; height: 46px; }
  .pcard h3 { font-size: 26px; line-height: 31.2px; }
  .pcard p { margin-top: 60px; font-size: 18px; line-height: 25.2px; }
  .band-cta { flex-direction: column; align-items: flex-start; gap: 28px; margin: 40px 0 -80px; padding: 32px 20px; }
  .band-cta h2 { font-size: 36px; line-height: 37.08px; }

  /* testimonials */
  .testi__frame { padding: 160px 0 80px; }
  .testi-feature { grid-template-columns: 1fr; margin-top: 40px; }
  .testi-feature__media { padding: 20px; }
  .testi-feature__media .vcard { height: 260px; }
  .quote, .testi-cards li:first-child .quote { min-height: 0; padding: 30px 16px; border-left: 0; }
  .quote blockquote { margin-top: 50px; padding-left: 0; font-size: 19px; line-height: 24.32px; }
  .quote figcaption { margin-top: 40px; }
  .testi-cards { grid-template-columns: 1fr; }

  /* band */
  .band { height: 673px; padding: 0; }
  .band__frame { padding: 40px 16px; }
  .band__low { flex-direction: column; align-items: flex-start; gap: 28px; }
  .band h2 { font-size: 36px; line-height: 37.08px; }

  /* team */
  .team__frame { padding-top: 80px; }
  .team__grid { grid-template-columns: 1fr; margin-top: 40px; border-left: 0; border-right: 0; }
  .member, .member:nth-child(n) { border-right: 0; border-top: 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
  .member:last-child { border-bottom: 0; }
  .member__img { height: 300px; margin: 0 16px; }
  .member h3 { margin: 18px 16px 0; font-size: 22px; line-height: 26.4px; }
  .member__foot { padding: 18px 16px 22px; }
  .team__cta { padding: 40px 0 80px; }

  /* faq: list first, aside after */
  .faq__frame { padding: 80px 0; }
  .faq__row { grid-template-columns: 1fr; margin-top: 40px; }
  .faq__aside { order: 2; padding: 40px 16px; }
  .faq__aside img { width: 200px; height: 150px; }
  .faq__aside p { max-width: 300px; }
  .faq__list { border-left: 0; border-bottom: 1px solid var(--line-l); }
  .qa__btn { padding: 22px 16px; font-size: 19px; line-height: 24.32px; }
  .qa__plus { width: 36px; height: 36px; }
  .qa__a p { padding: 0 16px 24px; margin-top: -10px; }

  /* blog */
  .blog__frame { padding-top: 80px; }
  .head__side { gap: 20px; }
  .posts { grid-template-columns: 1fr; margin-top: 40px; }
  .post, .posts li:nth-child(2) .post { padding: 20px 20px 32px; border-right: 0; border-bottom: 1px solid var(--line-l); }
  .posts li:last-child .post { border-bottom: 0; }
  .post__img { height: 240px; }
  .post__meta { margin-top: 24px; }
  .post h3 { font-size: 22px; line-height: 26.4px; }
  .blog__spacer { height: 60px; }

  /* cta */
  .cta { height: 440px; padding: 0; }
  .cta__frame { padding: 120px 16px 0; }
  .cta h2 { font-size: 36px; line-height: 37.08px; }
  .cta__btn { margin-top: 36px; }
  .cta__btn .btn__txt { min-width: 220px; }

  /* footer */
  .ftr { padding: 0; }
  .ftr__grid { grid-template-columns: 1fr; }
  .ftr__brand { padding: 60px 16px 40px; }
  .brand--lg { font-size: 36px; line-height: 30px; }
  .ftr__col, .ftr__col:first-of-type { padding: 36px 16px 0; }
  .ftr__col:last-child { padding-bottom: 40px; }
  .ftr__col ul { font-size: 19px; line-height: 24.32px; }
  .ftr__bottom { padding: 24px 16px; font-size: 17px; }
}

/* ==========================================================================================
   Shivam Constructions: what differs from the template
   ========================================================================================== */
/* the logo (partials/wordmark.html) in the header and footer */
.brand__mark { display: block; width: auto; height: 46px; aspect-ratio: 1082.89 / 219.99; color: #fff; }
.brand--lg .brand__mark { height: 72px; }

/* a figure in two lines where the template had its rating chip */
.fact { display: flex; flex-direction: column; color: #fff; }
.fact b { font-size: 21px; line-height: 26.88px; font-weight: 400; letter-spacing: -0.025em; }
.fact span { font-size: 15px; line-height: 21px; opacity: .8; }

/* hero: the house photo (phones get a portrait slice through <picture>) is pale at the top (sky) and at the foot
   (driveway), where the white copy and the giant name sit, so the navy shade is deeper there than the template's */
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { object-position: 50% 40%; }
.hero__bg::after { z-index: 3; background: linear-gradient(180deg, rgb(34 47 55 / .62) 0%, rgb(34 47 55 / .3) 34%, rgb(34 47 55 / .18) 58%, rgb(34 47 55 / .62) 100%); }
/* the user's three hero photos (28 Oct 2026) cross-fade, slowly and without zoom: the incoming photo fades in over the
   one it replaces (is-prev stays fully shown underneath until the fade is done). The second and third are not laid out
   (so not fetched) until the page has loaded; with reduced motion or without JS only the first shows. */
.hero__bg { z-index: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero__slide.is-on { opacity: 1; z-index: 2; }
.hero__slide.is-prev { opacity: 1; z-index: 1; transition: none; }
.hero__slide:not(.is-on):not(.is-ready) { display: none; }
/* the user's photos are bright daylight scenes, so the text over them was measured (_work/contrast.js + contrast.py:
   the worst 5% of the pixels behind each line): a deeper shade under the menu and behind the copy at the foot, the
   photo left clear between them; "one team" in full white */
.hero__bg::after { background: linear-gradient(180deg, rgb(34 47 55 / .78) 0, rgb(34 47 55 / .72) 56px, rgb(34 47 55 / .4) 130px, rgb(34 47 55 / .2) 34%, rgb(34 47 55 / .12) 50%, rgb(34 47 55 / .45) 74%, rgb(34 47 55 / .72) 100%); }
.hero .fact span { opacity: 1; }
@media (max-width: 809px) {
  .hero__bg::after { background: linear-gradient(180deg, rgb(34 47 55 / .62) 0, rgb(34 47 55 / .3) 16%, rgb(34 47 55 / .14) 36%, rgb(34 47 55 / .62) 64%, rgb(34 47 55 / .8) 100%); }
}
/* no video card and no giant "Shivam Constructions" name since 28 Oct 2026 (the user): the house photo carries the
   hero, and the copy sits low, near the foot (on the right on wide screens, full width on tablets and phones) */
.hero__copy { position: absolute; right: var(--in); bottom: 80px; z-index: 2; width: 500px; }
/* desktop header with the real logo (wider than the stand-in): the centred menu keeps one line (an absolutely
   placed box otherwise only gets half the bar), and from 1200 to 1319px the logo and menu tighten a little */
.hdr__nav { width: max-content; }
@media (min-width: 1200px) and (max-width: 1319px) {
  .brand__mark { height: 40px; }
  .hdr__nav ul { gap: 24px; }
  .hdr__nav a { font-size: 17px; }
}
/* desktop (the user, 28 Oct): the statement at the foot on the left, the button and "Plan to keys" on the right,
   their feet on one line */
@media (min-width: 1200px) {
  .hero__copy { left: var(--in); right: var(--in); width: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .hero h1 { max-width: 560px; }
  .hero__actions { flex: 0 0 500px; margin-top: 0; padding-top: 0; border-top: 0; }
}

/* what every home includes: eight ruled cells in the dark band (where the commercial option shows client logos) */
.logos__line { max-width: 760px; margin: 0 auto; font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: 400; }
.inc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 51px; border-top: 1px solid var(--line-d); }
.inc__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 180px; padding: 30px 20px; text-align: center; border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
.inc__cell:nth-child(4n) { border-right: 0; }
.inc__cell:nth-child(n+5) { border-bottom: 0; }
.inc__ic { width: 44px; height: 44px; color: var(--orange); }
.inc__cell p { font-size: 19px; line-height: 24px; letter-spacing: -0.02em; color: rgb(255 255 255 / .92); }

/* about: two short lines where the template had its rating chip */
.slogans { display: flex; flex-direction: column; font-size: 24px; line-height: 28.8px; letter-spacing: -0.03em; color: var(--ink); }
.slogans span + span { color: var(--orange); }

/* services: nine longer names, so the rows are set a size smaller than the template's five */
.svc-row h3, .svc-row__n { font-size: 52px; line-height: 53.56px; letter-spacing: -0.048em; }
.svc-row h3 { flex: 1; max-width: none; }
/* every name on exactly two lines (split in data/home.json), so every row is the same height at every size */
.svc-row h3 span { display: block; white-space: nowrap; }
.svc-row__n { width: 72px; }
.svc-row__ic { width: 64px; height: 64px; }

/* why choose Shivam: four ruled cells (the last one orange, as the template's last testimonial card) */
.why__frame { padding: 250px 0 140px; }
.why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 60px; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.why__cell { display: flex; flex-direction: column; min-height: 420px; padding: 0 30px 30px; border-left: 1px solid var(--line-l); }
.why__cell:first-child { border-left: 0; }
.why__n { display: grid; place-items: center; width: 56px; height: 56px; margin-left: -30px; background: var(--orange); color: #fff; font-size: 19px; letter-spacing: -0.02em; }
.why__cell h3 { margin-top: 56px; font-size: 26px; line-height: 30px; letter-spacing: -0.035em; }
.why__cell p { margin-top: auto; padding-top: 28px; font-size: 18px; line-height: 25.2px; letter-spacing: -0.01em; color: rgb(12 14 18 / .7); }
.why__cell--orange { background: var(--orange); color: #fff; }
.why__cell--orange .why__n { background: #fff; color: var(--orange); }
.why__cell--orange p { color: rgb(255 255 255 / .92); }

/* homes we build: three ruled cells with a photo each (the template's carousel is not used). The photos are the user's
   portraits (28 Oct 2026), so the boxes take their 3:4 shape and show each building whole (4:5 on phones, one card
   per row) */
.sectors__frame { padding: 140px 0 160px; }
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 60px; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.scard { padding: 26px 26px 40px; border-left: 1px solid var(--line-l); }
.scard:first-child { border-left: 0; }
.scard__img { aspect-ratio: 3 / 4; overflow: hidden; }
.scard__img img { width: 100%; height: 100%; object-fit: cover; }
.scard__meta { display: flex; align-items: center; gap: 8px; margin-top: 36px; font-size: 16px; line-height: 21.6px; letter-spacing: -0.01em; color: rgb(12 14 18 / .6); }
.scard__meta::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--orange); }
.scard h3 { margin-top: 10px; font-size: 26px; line-height: 30px; letter-spacing: -0.035em; }
.scard__text { margin-top: 10px; font-size: 18px; line-height: 25.2px; letter-spacing: -0.01em; color: rgb(12 14 18 / .7); }

/* band: no rating chip above, so the copy sits at the foot */
.band__low { margin-top: auto; }
/* the photo band's picture: pinned to its top edge so the parallax never takes the heads off; where the band is
   taller than wide only part of the width shows, so it centres on the people on the right */
.band__bg img { object-position: 50% 0%; }
@media (max-aspect-ratio: 1/1) { .band__bg img { object-position: 80% 0%; } }
/* since 28 Oct 2026 the band shows the user's "one team" picture (three people talking, heads near the top of the
   frame), so the parallax is short (the photo 106% of the band's height, not 130%) and the heads stay in at every
   scroll position. Since 29 Oct it is "one team2", with "one team2-wide" on wide desktop screens through <picture>
   (the media query is worked out in src/pages/index.html); the picture element takes no box of its own */
.band__bg picture { display: contents; }
.band__bg .parallax img { height: 106%; }
/* the shade rises from the bottom left, behind the copy, and leaves the faces clear (measured like the hero's) */
.band__bg::after { background: linear-gradient(20deg, rgb(34 47 55 / .8) 0%, rgb(34 47 55 / .55) 28%, rgb(34 47 55 / .15) 55%, rgb(34 47 55 / .05) 80%); }
.band__low p { color: #fff; }
/* phones and upright tablets: the whole photo shows, full width at its own shape, and the words and the button sit
   below it on the slate. The user, 28 Oct: "reduce height ... at least by half" (the band went from 673px to 336px);
   29 Oct: "on mobile i want to be able to see the guy on the left". With the words over the photo, a narrow screen
   only ever showed part of it (32% to 93% of its width at 390px, the man on the left cut off). The photo is drawn at
   exactly its own box here, so there is no parallax. The title still breaks after "Team." on phones. */
@media (max-width: 809px), (max-width: 1199px) and (max-aspect-ratio: 1/1) {
  .band { height: auto; }
  .band__bg { position: relative; margin: 0 calc(-1 * var(--side)); }
  .band__bg .parallax { height: auto; }
  .band__bg .parallax img { display: block; height: auto; }
  /* no shade or fade here: the photo meets the slate with a hard edge (the user, 29 Oct: "lets not use fade and have
     a hard edge for mobile", after trying a 56px fade and one over the lower half) */
  .band__bg::after { display: none; }
  .band__frame { height: auto; }
}
@media (max-width: 809px) {
  .band h2 { max-width: 6.6em; }
}

/* faq: the photo fills the aside column above the note, edge to edge, and grows with the answers beside it (the
   template had a small picture over the note) */
.faq__aside { justify-content: flex-start; padding: 0; }
.faq__photo { position: relative; flex: 1 1 auto; min-height: 280px; overflow: hidden; }
.faq__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.faq__note { padding: 32px 50px 50px; }
.faq__note p { max-width: 380px; margin-top: 0; }

/* footer: the office address under the phones. The contact column gets a fixed 360px so the email (one long word)
   fits from 1200px up; the brand column takes what is left */
@media (min-width: 1200px) { .ftr__grid { grid-template-columns: minmax(0, 1fr) 260px 360px; } }
.ftr__col a[href^="mailto"] { overflow-wrap: break-word; }
.ftr__addr { margin-top: 20px; font-style: normal; font-size: 21px; line-height: 26.88px; letter-spacing: -0.025em; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }

/* 404: navy, so the white header reads */
.nf { background: var(--navy); color: #fff; }
.nf p { color: rgb(255 255 255 / .72); }

/* tablet + phone menu: a full-height panel from the right over a dim backdrop; the page is locked and the "+"
   button (an x when open) stays on top. Replaces the template's drop-down under the bar. */
.mnav, .mnav-ov { display: none; }
@media (max-width: 1199px) {
  .mnav-ov { position: fixed; inset: 0; z-index: 1; display: block; background: rgb(4 10 18 / .55); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s linear .4s; }
  .nav-open .mnav-ov { opacity: 1; visibility: visible; transition: opacity .4s; }
  .mnav { position: fixed; top: 0; right: 0; z-index: 2; display: flex; flex-direction: column; width: min(420px, 86vw); max-width: none; height: 100vh; height: 100dvh; margin: 0; padding: 92px 28px 28px; overflow: auto; overscroll-behavior: contain; background: var(--navy); border: 0; border-left: 1px solid var(--line-dl); opacity: 1; visibility: hidden; transform: translateX(100%); transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .5s; }
  .nav-open .mnav { visibility: visible; transform: none; transition: transform .5s cubic-bezier(.32, .72, 0, 1); }
  .mnav ul { display: flex; flex-direction: column; gap: 0; }
  .mnav li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-dl); font-size: 26px; line-height: 31px; letter-spacing: -0.035em; }
  .mnav li:first-child a { border-top: 1px solid var(--line-dl); }
  .mnav li a:hover { color: var(--orange); }
  .mnav__cta { margin-top: 28px; }
  .mnav__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 28px; font-size: 16px; line-height: 22px; color: rgb(255 255 255 / .7); }
  .mnav__foot a { color: #fff; }
  /* the template's ".mnav a" (block, 22px) is meant for its links only: keep the button and the contact lines as they are */
  .mnav a.btn { display: inline-flex; padding: 0; font-size: 17px; line-height: 22.95px; letter-spacing: -0.02em; }
  .mnav__foot a { display: inline; padding: 0; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; }
  .hdr__burger { z-index: 3; }
  html.nav-open { overflow: hidden; }

  .brand__mark { height: 42px; }
  .hero__copy { left: var(--in); right: auto; bottom: 64px; width: 440px; }
  .faq__note { padding: 28px 40px 40px; }
  .inc__cell { min-height: 160px; gap: 14px; padding: 24px 14px; }
  .inc__ic { width: 40px; height: 40px; }
  .inc__cell p { font-size: 17px; line-height: 22px; }
  .ftr__col a[href^="mailto"] { font-size: 19px; }
  .svc-row h3, .svc-row__n { font-size: 40px; line-height: 42px; letter-spacing: -0.045em; }
  .svc-row__n { width: 56px; }
  .svc-row__ic { width: 48px; height: 48px; }
  .why__grid { grid-template-columns: 1fr 1fr; }
  .why__cell { min-height: 360px; }
  .why__cell:nth-child(3) { border-left: 0; }
  .why__cell:nth-child(n+3) { border-top: 1px solid var(--line-l); }
  .scard { padding: 20px 20px 32px; }
  .scard h3 { font-size: 24px; line-height: 28.8px; }
}
@media (max-height: 640px) and (max-width: 1199px) { .mnav li a { padding: 8px 0; font-size: 23px; line-height: 27px; } .mnav { padding-top: 76px; } .mnav__cta { margin-top: 20px; } }

@media (max-width: 809px) {
  .brand__mark { height: 36px; }
  .brand--lg .brand__mark { height: 52px; }
  /* without the giant name the phone hero follows the screen (still at most the template's 776px), so the button
     row stays on the first screen of short phones */
  .hero { height: max(560px, min(100vh, 776px)); height: max(560px, min(100svh, 776px)); }
  .hero__copy { left: var(--in); right: var(--in); bottom: 40px; width: auto; }
  .faq__photo { flex: none; height: 240px; min-height: 0; }
  .faq__note { padding: 28px 16px 40px; }
  .logos__line { max-width: none; }
  .inc__grid { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  .inc__cell, .inc__cell:nth-child(n) { min-height: 136px; padding: 22px 12px; border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); }
  .inc__cell:nth-child(2n) { border-right: 0; }
  .inc__cell:nth-child(n+7) { border-bottom: 0; }
  .inc__ic { width: 36px; height: 36px; }
  .inc__cell p { font-size: 16px; line-height: 21px; }
  .slogans { font-size: 21px; line-height: 25.2px; }
  .svc-row { flex-wrap: nowrap; align-items: center; gap: 14px; padding: 22px 16px; }
  .svc-row__n { width: 34px; font-size: 18px; line-height: 24px; color: rgb(12 14 18 / .35); }
  /* the longest line ("Custom House Plans") is ~9.25em and the name column is the screen less 122px, so the size
     comes down a little on phones under 390px to keep every name on its two lines */
  .svc-row h3 { font-size: min(26px, calc((100vw - 80px) / 9.3)); line-height: 1.12; letter-spacing: -0.04em; }   /* no arrow since 28 Oct */
  .svc-row__ic { width: 28px; height: 28px; }
  .why__frame { padding: 160px 0 80px; }
  .why__grid { margin-top: 40px; }
  .why__cell { min-height: 0; padding: 0 16px 24px; }
  .why__n { width: 44px; height: 44px; margin-left: -16px; font-size: 16px; }
  .why__cell h3 { margin-top: 28px; font-size: 21px; line-height: 25px; }
  .why__cell p { padding-top: 16px; font-size: 16px; line-height: 22.4px; }
  .sectors__frame { padding: 80px 0 60px; }
  .sgrid { grid-template-columns: 1fr; margin-top: 40px; }
  .scard, .scard:first-child { padding: 20px 16px 32px; border-left: 0; }
  .scard + .scard { border-top: 1px solid var(--line-l); }
  .scard__img { aspect-ratio: 4 / 5; }
  .scard__meta { margin-top: 24px; }
  .ftr__addr { font-size: 19px; line-height: 24.32px; }
  .ftr__bottom { flex-direction: column; }
}

/* ==========================================================================================
   Packages + cost calculator (src/partials/estimate.html, data/estimate.json, site.js)
   Steps on the left, the estimate on the right (it sticks below the header); below, what each
   package includes, one category at a time, with the chosen package's column marked.
   ========================================================================================== */
/* the menu marks the page you are on */
.hdr__nav a[aria-current="page"], .mnav a[aria-current="page"] { color: var(--orange); opacity: 1; }

/* the page's title band: navy, so the white header reads over it (as on the 404) */
.ptop__frame { padding: 160px 0 90px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: rgb(255 255 255 / .55); }
.crumbs a { color: rgb(255 255 255 / .8); transition: color .2s; }
.crumbs a:hover { color: var(--orange); }
.ptop .label + .ptop__title { margin-top: 14px; }
.ptop__title { max-width: 980px; font-size: 80px; line-height: 80px; letter-spacing: -0.055em; }
.ptop__text { max-width: 560px; margin-top: 26px; color: rgb(255 255 255 / .72); }

/* homepage: the four packages and their rates (Imperial on request), and the way into the calculator */
.pkt__frame { padding: 140px 0 160px; }
.pkt__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 60px; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.pkt__cell { display: flex; flex-direction: column; padding: 36px 36px 40px; border-left: 1px solid var(--line-l); }
.pkt__cell:first-child { border-left: 0; }
.pkt__name { font-size: 19px; line-height: 25px; letter-spacing: -0.02em; color: rgb(12 14 18 / .6); }
/* the rate, with "per sq. ft." under it; "On request" is set smaller on the same line height, so the lists line up */
.pkt__rate { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 56px; line-height: 58px; letter-spacing: -0.05em; }
.pkt__rate--ask { font-size: 40px; letter-spacing: -0.045em; }
.pkt__rate small { font-size: 16px; line-height: 21px; letter-spacing: -0.01em; color: rgb(12 14 18 / .55); }
.pkt__list { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-l); font-size: 17px; line-height: 23px; letter-spacing: -0.015em; color: rgb(12 14 18 / .72); }
.pkt__list li { display: flex; gap: 10px; }
.pkt__list li::before { content: ""; width: 6px; height: 6px; flex: none; margin-top: 8px; background: var(--orange); }
.pkt__link { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: auto; padding-top: 30px; font-size: 18px; line-height: 24px; letter-spacing: -0.02em; }
.pkt__link .ic { width: 22px; height: 22px; color: var(--orange); transition: transform .3s var(--ease); }
.pkt__link:hover .ic { transform: translateX(4px); }
/* smaller laptops: four cells are narrow, so less side padding and a slightly smaller link keep each link on one line */
@media (min-width: 1200px) and (max-width: 1365px) {
  .pkt__cell { padding-left: 24px; padding-right: 24px; }
  .pkt__link { font-size: 17px; }
}

.est__frame { padding: 70px 0 0; }
.est__grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.est__inputs { min-width: 0; }
.est__step { padding: 40px var(--in) 44px; border-bottom: 1px solid var(--line-l); }
.est__step:last-child { border-bottom: 0; }
.est__h { display: flex; align-items: center; gap: 16px; font-size: 26px; line-height: 30px; letter-spacing: -0.035em; }
.est__n { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--orange); color: #fff; font-size: 16px; letter-spacing: -0.02em; }
.est__opt { margin-left: 2px; font-size: 16px; color: rgb(12 14 18 / .5); letter-spacing: -0.01em; }
.est__h + * { margin-top: 26px; }
.est__hint { margin-top: 14px; font-size: 15px; line-height: 21px; letter-spacing: -0.01em; color: rgb(12 14 18 / .6); }
.est [hidden] { display: none !important; }

/* the radios sit invisibly over their labels; the labels are what you see and press */
.pkg input, .seg__opt input, .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pkg:has(input:focus-visible), .seg__opt:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: -2px; }

/* 01 packages: four cards, two by two (one column on phones) */
.pkgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line-l); }
.pkg { position: relative; display: flex; flex-direction: column; padding: 22px 22px 24px; border-left: 1px solid var(--line-l); cursor: pointer; transition: background-color .25s, color .25s; }
.pkg:nth-child(odd) { border-left: 0; }
.pkg:nth-child(n+3) { border-top: 1px solid var(--line-l); }
.pkg:hover { background: rgb(34 47 55 / .03); }
.pkg__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pkg__name { font-size: 18px; line-height: 24px; letter-spacing: -0.02em; }
.pkg__tick { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid rgb(0 0 0 / .2); color: transparent; transition: background-color .25s, border-color .25s; }
.pkg__tick .ic { width: 16px; height: 16px; }
.pkg__rate { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 14px; font-size: 38px; line-height: 40px; letter-spacing: -0.045em; }
.pkg__rate small { font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: rgb(12 14 18 / .55); }
.pkg__list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-l); font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: rgb(12 14 18 / .72); }
.pkg__list span { display: flex; gap: 9px; }
.pkg__list span::before { content: ""; width: 6px; height: 6px; flex: none; margin-top: 7px; background: var(--orange); }
.pkg.is-on { background: var(--navy); color: #fff; }
.pkg.is-on .pkg__tick { border-color: var(--orange); background: var(--orange); color: #fff; }
.pkg.is-on .pkg__rate small, .pkg.is-on .pkg__list { color: rgb(255 255 255 / .72); }
.pkg.is-on .pkg__list { border-color: var(--line-dl); }

/* 02 floors */
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-l); }
.seg__opt { position: relative; display: grid; place-items: center; height: 56px; border-left: 1px solid var(--line-l); font-size: 19px; letter-spacing: -0.02em; cursor: pointer; transition: background-color .25s, color .25s; }
.seg__opt:first-child { border-left: 0; }
.seg__opt:hover { background: rgb(34 47 55 / .03); }
.seg__opt.is-on { background: var(--navy); color: #fff; }

/* 03 built-up area: a number and a slider that move together; or one number per floor */
.area { display: grid; grid-template-columns: auto 200px minmax(0, 1fr); align-items: center; gap: 14px 24px; }
.area__label, .addon__label { font-size: 17px; line-height: 22px; letter-spacing: -0.015em; }
.field { display: flex; align-items: center; height: 52px; border: 1px solid rgb(0 0 0 / .2); background: #fff; transition: border-color .2s; }
.field:focus-within { border-color: var(--orange); }
.field input { width: 100%; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 20px; letter-spacing: -0.02em; outline: 0; -moz-appearance: textfield; appearance: textfield; }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field span { flex: none; padding-right: 12px; font-size: 15px; color: rgb(12 14 18 / .55); white-space: nowrap; }
.field--sm { height: 46px; }
.field--sm input { font-size: 18px; }
.range { width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--orange), var(--orange)) 0 0 / var(--p, 14%) 100% no-repeat, rgb(0 0 0 / .14); }
.range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -10px; border: 4px solid #fff; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); -webkit-appearance: none; }
.range::-moz-range-track { height: 2px; background: rgb(0 0 0 / .14); }
.range::-moz-range-progress { height: 2px; background: var(--orange); }
.range::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid #fff; border-radius: 0; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.range:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.est__floors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.est__floor label { display: block; margin-bottom: 8px; font-size: 15px; line-height: 20px; color: rgb(12 14 18 / .65); }
.check { display: inline-flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 17px; line-height: 22px; letter-spacing: -0.015em; cursor: pointer; }
.check input { display: grid; place-content: center; width: 22px; height: 22px; flex: none; margin: 0; border: 1px solid rgb(0 0 0 / .32); background: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .2s, border-color .2s; }
.check input::after { content: ""; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: translateY(-1px) rotate(-45deg); }
.check input:checked { border-color: var(--orange); background: var(--orange); }
.check input:checked::after { opacity: 1; }
.check input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* 04 add-ons */
.addon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; padding: 22px 0; border-top: 1px solid var(--line-l); }
.addon--family { display: block; padding-top: 0; border-top: 0; }
.addon:last-child { padding-bottom: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { position: relative; display: grid; place-items: center; min-width: 58px; height: 42px; padding: 0 16px; border: 1px solid rgb(0 0 0 / .2); font-size: 17px; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--navy); }
.chip.is-on { border-color: var(--navy); background: var(--navy); color: #fff; }
.addon__check { margin-top: 0; font-size: 19px; line-height: 24px; letter-spacing: -0.02em; }
.addon__cost { font-size: 19px; line-height: 24px; letter-spacing: -0.02em; white-space: nowrap; transition: opacity .2s; }
.addon__body { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; transition: opacity .2s; }
.addon__body .field { width: 200px; }
.addon__rate { font-size: 15px; color: rgb(12 14 18 / .55); }
.addon__x { font-size: 18px; color: rgb(12 14 18 / .5); }
.addon .est__hint { grid-column: 1 / -1; margin-top: -4px; }
.addon.is-off .addon__body, .addon.is-off .addon__cost, .addon.is-off .est__hint { opacity: .45; }

/* the estimate */
.est__sum { background: var(--navy); color: #fff; }
.est__sum-in { position: sticky; top: 70px; padding: 44px 40px 40px; }
.est__sum-label { color: var(--orange); font-size: 17px; line-height: 22.95px; font-weight: 500; letter-spacing: -0.02em; }
.est__total { margin-top: 14px; font-size: 54px; line-height: 56px; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
/* no package chosen yet: "Choose a package" in place of the total */
.est__total.is-prompt { font-size: 40px; line-height: 44px; letter-spacing: -0.04em; }
.est__lakh { margin-top: 6px; font-size: 19px; line-height: 25px; color: rgb(255 255 255 / .7); }
.est__ask { margin-top: 10px; font-size: 17px; line-height: 23px; letter-spacing: -0.015em; color: rgb(255 255 255 / .75); }
.est__lines { margin-top: 30px; border-top: 1px solid var(--line-dl); }
.est__lines div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-dl); font-size: 16px; line-height: 21px; letter-spacing: -0.01em; }
.est__lines dt { color: rgb(255 255 255 / .72); }
.est__lines dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.est__per { margin-top: 16px; font-size: 15px; line-height: 21px; color: rgb(255 255 255 / .65); }
.est__per b { font-weight: 400; color: #fff; }
.est__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 30px; }
/* "Download as PDF": a square outline button under the WhatsApp one */
.est__pdf { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px 10px 14px; border: 1px solid rgb(255 255 255 / .32); color: #fff; font-size: 17px; line-height: 22px; letter-spacing: -0.02em; text-align: left; transition: border-color .2s, background-color .2s; }
.est__pdf .ic { width: 22px; height: 22px; color: var(--orange); }
@media (hover: hover) { .est__pdf:hover { border-color: #fff; } }
.est__pdf:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* greyed until a package is chosen; while the PDF is being made it only dims a little */
.est__pdf:disabled { cursor: not-allowed; opacity: .4; }
.est__pdf[data-busy] { cursor: progress; opacity: .75; }
.est__mail { font-size: 17px; line-height: 22px; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.est__mail:hover { text-decoration-color: var(--orange); }
.est__note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-dl); font-size: 14px; line-height: 19.6px; color: rgb(255 255 255 / .55); }
.est__bar { display: none; }

/* what each package includes: a row per category (the user, 29 Oct: "vertical accordian style with expand collapse on
   each section" instead of tabs); each opens and closes on its own, the first starts open */
.cmp { padding: 100px 0 140px; }
.cmp__title { font-size: 40px; line-height: 44px; letter-spacing: -0.05em; }
.cmp__list { margin-top: 36px; border-top: 1px solid var(--line-l); }
.cmp__sec { border-bottom: 1px solid var(--line-l); }
.cmp__sec h4 { font-size: inherit; font-weight: 400; }
.cmp__btn { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 22px var(--in); text-align: left; font-size: 24px; line-height: 30px; letter-spacing: -0.035em; transition: background-color .25s; }
@media (hover: hover) { .cmp__btn:hover { background: rgb(34 47 55 / .03); } }
.cmp__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
/* a square that fills slate when open; only the plus turns, into a cross */
.cmp__plus { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid rgb(0 0 0 / .2); transition: background-color .25s, border-color .25s, color .25s; }
.cmp__plus .ic { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.cmp__btn[aria-expanded="true"] .cmp__plus { border-color: var(--navy); background: var(--navy); color: #fff; }
.cmp__btn[aria-expanded="true"] .cmp__plus .ic { transform: rotate(45deg); }
.cmp__panel { border-top: 1px solid var(--line-l); }
.cmp__table tbody tr:last-child > * { border-bottom: 0; }
.cmp__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp__table th, .cmp__table td { padding: 20px 24px; border-bottom: 1px solid var(--line-l); text-align: left; vertical-align: top; font-size: 17px; line-height: 23px; letter-spacing: -0.015em; font-weight: 400; }
.cmp__table tr > * + * { border-left: 1px solid var(--line-l); }
.cmp__corner, .cmp__table tbody th { width: 25%; padding-left: var(--in); }
.cmp__table tbody th { color: rgb(12 14 18 / .62); }
.cmp__pkg { font-size: 21px; line-height: 26px; letter-spacing: -0.025em; transition: background-color .25s, box-shadow .25s; }
.cmp__pkg small { display: block; margin-top: 2px; font-size: 15px; line-height: 20px; letter-spacing: -0.01em; color: rgb(12 14 18 / .55); }
.cmp__table .is-sel { background: rgb(233 97 49 / .07); }
.cmp__pkg.is-sel { box-shadow: inset 0 3px 0 var(--orange); }
.cmp__all { text-align: center !important; color: rgb(12 14 18 / .8); }
.cmp__table .is-no { color: rgb(12 14 18 / .4); }
.cmp__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 60px; margin-top: 36px; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; color: rgb(12 14 18 / .7); }
.cmp__foot-h { color: var(--ink); }
.cmp__excl { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cmp__excl li { display: flex; gap: 9px; }
.cmp__excl li::before { content: ""; width: 6px; height: 6px; flex: none; margin-top: 8px; background: var(--orange); }
.cmp__addons { max-width: 420px; }

@media (max-width: 1199px) {
  .ptop__frame { padding: 140px 0 72px; }
  .crumbs { margin-bottom: 40px; }
  .ptop__title { font-size: 62px; line-height: 64px; }
  .pkt__frame { padding: 110px 0 120px; }
  .pkt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkt__cell { padding: 30px 24px 34px; }
  .pkt__cell:nth-child(odd) { border-left: 0; }
  .pkt__cell:nth-child(n+3) { border-top: 1px solid var(--line-l); }
  .pkt__rate { font-size: 40px; line-height: 42px; }
  .pkt__list { font-size: 16px; line-height: 21px; }
  .est__frame { padding-top: 56px; }
  .est__grid { grid-template-columns: minmax(0, 1fr); }
  .est__sum-in { position: static; padding: 40px var(--in); }
  .pkg { padding: 20px 18px 22px; }
  .pkg__rate { font-size: 32px; line-height: 34px; }
  .area { grid-template-columns: auto 200px; }
  .area .range { grid-column: 1 / -1; }
  .cmp { padding: 80px 0 110px; }
  .cmp__title { font-size: 34px; line-height: 38px; }
  .cmp__btn { padding: 20px 24px; font-size: 22px; line-height: 28px; }
  .cmp__table th, .cmp__table td { padding: 18px 18px; font-size: 16px; line-height: 21px; }
}
@media (max-width: 809px) {
  .ptop__frame { padding: 104px 0 52px; }
  .crumbs { margin-bottom: 32px; font-size: 14px; }
  .ptop__title { font-size: 40px; line-height: 42px; letter-spacing: -0.05em; }
  .ptop__text { margin-top: 18px; font-size: 17px; line-height: 24px; }
  .pkt__frame { padding: 80px 0; }
  .pkt__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .pkt__cell { padding: 28px 16px 30px; border-left: 0; }
  .pkt__cell + .pkt__cell { border-top: 1px solid var(--line-l); }
  .pkt__rate { font-size: 44px; line-height: 46px; }
  .pkt__link { padding-top: 22px; }
  .est__frame { padding-top: 0; }
  .est__step { padding: 32px 16px 36px; }
  .est__h { gap: 12px; font-size: 22px; line-height: 26px; }
  .est__n { width: 34px; height: 34px; font-size: 14px; }
  .est__h + * { margin-top: 20px; }
  .pkgs { grid-template-columns: 1fr; }
  .pkg { padding: 18px 18px 20px; border-left: 0; }
  .pkg + .pkg { border-top: 1px solid var(--line-l); }
  .pkg__rate { margin-top: 8px; font-size: 30px; line-height: 32px; }
  .pkg__list { margin-top: 12px; padding-top: 12px; }
  .seg__opt { height: 50px; font-size: 17px; }
  .area { grid-template-columns: 1fr; gap: 10px; }
  .est__floors { gap: 12px; }
  .addon__body .field { width: calc(50% - 22px); min-width: 120px; }
  .addon[data-addon="sump"] .addon__body .field, .addon[data-addon="septic"] .addon__body .field { width: 170px; }
  .est__sum-in { padding: 36px 16px 40px; }
  .est__total { font-size: 44px; line-height: 46px; }
  .cmp { padding: 64px 0 80px; }
  .cmp__title { font-size: 28px; line-height: 32px; }
  .cmp__list { margin-top: 24px; }
  .cmp__btn { padding: 16px 16px; font-size: 20px; line-height: 25px; }
  .cmp__plus { width: 36px; height: 36px; }
  .cmp__plus .ic { width: 18px; height: 18px; }
  /* the table becomes one block per row: the item, then each package's value under its name */
  .cmp__table thead { display: none; }
  .cmp__table, .cmp__table tbody, .cmp__table tr, .cmp__table th, .cmp__table td { display: block; width: auto; }
  .cmp__table tr { padding: 18px 16px; border-bottom: 1px solid var(--line-l); }
  .cmp__table tr > * + * { border-left: 0; }
  .cmp__table th, .cmp__table td { padding: 0; border-bottom: 0; }
  .cmp__table tbody th { width: auto; padding: 0 0 10px; color: var(--ink); font-size: 18px; line-height: 23px; }
  .cmp__table td { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 6px 0; font-size: 16px; line-height: 21px; }
  .cmp__table td::before { content: attr(data-label); color: rgb(12 14 18 / .5); }
  .cmp__table td.is-sel { background: none; }
  .cmp__table td.is-sel::before { color: var(--orange); }
  .cmp__all { text-align: left !important; }
  .cmp__foot { flex-direction: column; margin-top: 28px; }
  /* the total stays in view at the foot of the screen while the steps are on screen */
  .est__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dl); background: var(--navy); color: #fff; transform: translateY(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
  .est__bar.is-shown { transform: none; visibility: visible; transition: transform .35s var(--ease); }
  .est__bar p { font-size: 15px; line-height: 20px; color: rgb(255 255 255 / .7); }
  .est__bar b { display: block; font-size: 22px; line-height: 26px; font-weight: 400; letter-spacing: -0.03em; color: #fff; }
  .est__bar button { height: 40px; padding: 0 14px; background: var(--orange); color: #fff; font-size: 15px; white-space: nowrap; }
}

/* "Chat on WhatsApp" (the user, 29 Oct 2026): the homepage only, fixed at the bottom centre. One green tab standing on
   the bottom edge of the screen, 39px tall, its sides angled 2:1 (the user's sketch) and its top corners slightly
   rounded (8px), the logo and the words inside, ink on WhatsApp's green (9.7:1). The shape is ::before's clip-path,
   worked out by _work/wa_shape.py for this height (run it again if --wa-h changes), so the focus outline is not
   clipped. The hero copy (tablets, phones) and the footer's last line keep clear of it. Under the header
   (z-index 50), so the phone menu covers it. */
:root { --wa-h: 39px; }
.wa-tab { position: fixed; left: 50%; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 9px; height: var(--wa-h); padding: 0 36px; transform: translateX(-50%); color: var(--ink); font-size: 16px; line-height: 21.6px; letter-spacing: -0.02em; white-space: nowrap; }
.wa-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #25d366; clip-path: polygon(0 100%, 17.29px 4.42px, 18.07px 3.17px, 19.06px 2.08px, 20.24px 1.19px, 21.56px 0.54px, 22.98px 0.14px, 24.44px 0px, calc(100% - 24.44px) 0px, calc(100% - 22.98px) 0.14px, calc(100% - 21.56px) 0.54px, calc(100% - 20.24px) 1.19px, calc(100% - 19.06px) 2.08px, calc(100% - 18.07px) 3.17px, calc(100% - 17.29px) 4.42px, 100% 100%); transition: background-color .3s; }
.wa-tab .ic { width: 20px; height: 20px; flex: none; }
.wa-tab__short { display: none; }
@media (hover: hover) { .wa-tab:hover::before { background: #2ee070; } }
html.motion .wa-tab { animation: wa-in .7s var(--ease) .4s both; }
@keyframes wa-in { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.has-wa .ftr__bottom { padding-bottom: calc(var(--wa-h) + 30px); }
@media (max-width: 1199px) {
  .has-wa .hero__copy { bottom: calc(var(--wa-h) + 32px); }
}
/* Phones (the user, 30 Oct 2026): the tab floats --wa-lift above the bottom edge, clear of the iPhone's toolbar and
   home bar, as a "diamond": flat top and bottom, a point at each side at the desktop tab's 2:1 angle, every corner
   rounded (_work/wa_shape_diamond.py 40 6 3 5). Only the logo and "WhatsApp", so it never runs out of room; the link
   is still named "Chat on WhatsApp" (aria-label). A soft shadow lifts it off photos and white alike. */
@media (max-width: 809px) {
  :root { --wa-h: 40px; --wa-lift: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .wa-tab { bottom: var(--wa-lift); gap: 8px; padding: 0 26px; filter: drop-shadow(0 6px 12px rgb(34 47 55 / .24)); }
  .wa-tab::before { clip-path: polygon(8.34px 3.32px, 9.06px 2.2px, 10.01px 1.28px, 11.14px 0.58px, 12.39px 0.15px, 13.71px 0px, calc(100% - 13.71px) 0px, calc(100% - 12.39px) 0.15px, calc(100% - 11.14px) 0.58px, calc(100% - 10.01px) 1.28px, calc(100% - 9.06px) 2.2px, calc(100% - 8.34px) 3.32px, calc(100% - 0.67px) 18.66px, calc(100% - 0.47px) 19.18px, calc(100% - 0.37px) 19.72px, calc(100% - 0.37px) 20.28px, calc(100% - 0.47px) 20.82px, calc(100% - 0.67px) 21.34px, calc(100% - 8.34px) 36.68px, calc(100% - 9.06px) 37.8px, calc(100% - 10.01px) 38.72px, calc(100% - 11.14px) 39.42px, calc(100% - 12.39px) 39.85px, calc(100% - 13.71px) 40px, 13.71px 40px, 12.39px 39.85px, 11.14px 39.42px, 10.01px 38.72px, 9.06px 37.8px, 8.34px 36.68px, 0.67px 21.34px, 0.47px 20.82px, 0.37px 20.28px, 0.37px 19.72px, 0.47px 19.18px, 0.67px 18.66px); }
  .wa-tab .roll { display: none; }
  .wa-tab__short { display: block; }
  html.motion .wa-tab { animation-name: wa-in-up; }
  @keyframes wa-in-up { from { transform: translate(-50%, calc(100% + var(--wa-lift) + 16px)); } to { transform: translate(-50%, 0); } }
  .has-wa .hero__copy { bottom: calc(var(--wa-h) + var(--wa-lift) + 18px); }
  .has-wa .ftr__bottom { padding-bottom: calc(var(--wa-h) + var(--wa-lift) + 24px); }
  /* the raised copy reaches about 300px up from the foot of the hero: the shade's deep part is held to at least that
     height (on short phones a percentage left the statement's first line on the pale wall, 2.7:1 at 320x568) */
  .has-wa .hero__bg::after { background: linear-gradient(180deg, rgb(34 47 55 / .62) 0, rgb(34 47 55 / .3) 16%, rgb(34 47 55 / .14) min(36%, calc(100% - 440px)), rgb(34 47 55 / .62) min(64%, calc(100% - 300px)), rgb(34 47 55 / .8) 100%); }
}
@media print { .wa-tab { display: none; } }