/* =========================================================================
   Century Pools Northern NSW: interior page components (cpnnsw prototype)
   GENERATED from src/pages.src.css by src/build_css.py; fl(max,min) = clamp(min px, max/1920 vw, max px).
   Figma 1920 desktop frames only; tablet/mobile rules are proposals.
   ========================================================================= */

/* ---------- Shared bits ---------- */
.pg-ring { position: absolute; z-index: -1; pointer-events: none; height: auto; top: var(--top, 0); }
.pg-ring--right { width: 33.07vw; right: -9.2vw; }
.pg-ring--left { width: 37.5vw; left: -15vw; }
.pools--page, .detail-intro, .faq-sec, .proj-sec, .split, .shortlist, .team, .colors, .contact-top { position: relative; z-index: 0; isolation: isolate; }
.section-head--center { justify-content: center; text-align: center; }
.section-head--bottom { align-items: flex-end; }
.eyebrow--white { color: #fff; }
.ticks { display: grid; gap: 0; font-size: clamp(16px, 1.042vw, 20px); line-height: 1.63; color: var(--c-navy); margin-top: clamp(16px, 1.146vw, 22px); }
.ticks li { position: relative; padding-left: 1.2em; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--c-blue-500); }
.ticks--rule { margin-top: 0; }
.ticks--rule li { padding: clamp(14px, 1.146vw, 22px) 0 clamp(14px, 1.146vw, 22px) clamp(30px, 2.396vw, 46px); border-bottom: 1px solid #E3E3E3; line-height: 1.8; }
.ticks--rule li::before { left: 0; top: clamp(15px, 1.25vw, 24px); font-size: 1.2em; line-height: 1.5; }
.icon-circle { flex: none; width: clamp(56px, 4.271vw, 82px); aspect-ratio: 1; border-radius: 50%; background: var(--g-light-blue); display: grid; place-items: center; color: #fff; }
.icon-circle img { width: 52%; height: auto; max-height: 56%; object-fit: contain; }
.icon-circle--solid { background: var(--c-blue-500); }
.icon-circle--sm { width: clamp(38px, 2.292vw, 44px); }
.icon-circle--sm img { width: 54%; }
.icon-circle__tick { font-size: clamp(28px, 2.292vw, 44px); line-height: 1; }
[data-todo] { cursor: pointer; }

/* ---------- Page banner (530 tall, bottom radius 130) ---------- */
.banner { position: relative; z-index: 1; isolation: isolate; height: clamp(340px, 27.604vw, 530px); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; border-radius: 0 0 clamp(40px, 6.771vw, 130px) clamp(40px, 6.771vw, 130px); overflow: hidden; background: #2a6c8f; }
.banner__media { position: absolute; inset: 0; z-index: -1; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 32%), rgba(0,30,50,.12); }
.banner__inner { padding-top: clamp(64px, 3.125vw, 60px); }
.banner__title { font-size: var(--fs-h2); font-weight: 400; line-height: 1.317; text-shadow: 1.08px 1.08px 22px rgba(0,0,0,.43); }
.banner__title em { font-weight: 600; font-style: italic; }
.banner__crumbs { margin-top: clamp(6px, 0.417vw, 8px); font-size: clamp(16px, 1.458vw, 28px); line-height: 1.317; text-shadow: .57px .57px 11.7px rgba(0,0,0,.43); }
.banner__crumbs a { text-decoration: none; }
.banner__crumbs a:hover, .banner__crumbs a:focus-visible { text-decoration: underline; }
.banner__sep { margin-inline: .15em; }

/* ---------- Instant Estimate band (378:151) ---------- */
.estimate { position: relative; z-index: 3; background: linear-gradient(90deg, #169EEB 0%, #5BCAF4 100%); color: #fff; min-height: clamp(0px, 15.833vw, 304px); display: flex; align-items: center; padding-block: clamp(48px, 3.646vw, 70px); }
.estimate__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; }
.estimate__text { flex: 0 1 auto; }
.estimate__title { white-space: nowrap; font-size: clamp(28px, 2.625vw, 50.4px); font-weight: 400; line-height: 1.317; }
.estimate__title strong { font-weight: 700; }
.estimate__sub { margin-top: clamp(8px, 0.417vw, 8px); max-width: 632px; font-size: clamp(16px, 1.188vw, 22.8px); line-height: 1.317; }
.estimate__steps { display: flex; align-items: center; gap: clamp(20px, 2.396vw, 46px); margin-left: auto; margin-right: clamp(0px, 5.729vw, 110px); }
.estimate__step { display: flex; align-items: center; gap: clamp(10px, 1.146vw, 22px); font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; }
.estimate__num { width: clamp(36px, 2.604vw, 50px); aspect-ratio: 1; border-radius: 50%; border: 1.6px solid #fff; display: grid; place-items: center; font-size: clamp(18px, 1.583vw, 30.4px); font-weight: 500; }
.estimate__btn .btn__label { color: var(--c-blue-700); }
.estimate__btn { flex: none; }
.estimate__scroll { bottom: 0; }

/* ---------- Pool Designs page ---------- */
.pools--page { padding-top: clamp(64px, 6.198vw, 119px); padding-bottom: clamp(24px, 3.125vw, 60px); }
.pools--page .h2 { font-weight: 400; }
.pill-toggle { display: flex; gap: clamp(10px, 0.938vw, 18px); flex-wrap: wrap; margin-right: clamp(-6px, -0.312vw, 0px); }
.pill-toggle__btn { display: inline-flex; align-items: center; height: clamp(46px, 3.333vw, 64px); padding: 0 clamp(22px, 2.188vw, 42px); border-radius: 999px; border: 1.6px solid #CDEBFA; background: #F4FBFF; color: var(--c-blue-500); font-size: clamp(17px, 1.458vw, 28px); font-weight: 600; text-decoration: none; transition: background-color var(--dur), color var(--dur), border-color var(--dur); }
.pill-toggle__btn.is-active { background: linear-gradient(180deg, #0B8FDD 0%, #0079C1 100%); border-color: transparent; color: #fff; }
.pill-toggle__btn:not(.is-active):hover { background: #E2F4FE; }

/* ---------- Brochure (wave bg) ---------- */
.brochure { position: relative; z-index: 0; margin-top: clamp(48px, 5.729vw, 110px); padding-block: clamp(96px, 10.677vw, 205px) clamp(110px, 13.021vw, 250px); }
.brochure__bg { position: absolute; z-index: -1; top: 0; left: -2.78vw; width: 108.56vw; max-width: none; height: 100%; object-fit: fill; pointer-events: none; }
.brochure__inner { display: grid; grid-template-columns: minmax(0, 835fr) minmax(0, 905fr); column-gap: clamp(32px, 4.688vw, 90px); align-items: center; }
.brochure__text .lead { max-width: 555px; }
.brochure__text .btn { margin-top: clamp(28px, 2.24vw, 43px); }
.brochure__media { position: relative; margin-right: calc(-1 * var(--gutter) - 6vw); margin-top: clamp(-60px, -3.125vw, 0px); }
.brochure__blob { width: 100%; height: auto; }
.brochure__circle { position: absolute; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1.5px #D6EFFB inset; }
.brochure__circle img { width: 86%; height: 86%; border-radius: 50%; object-fit: cover; }
.brochure__circle--1 { left: -4.1%; top: 7.2%; width: 20.2%; }
.brochure__circle--2 { left: -17.2%; top: 59%; width: 14.6%; }
.brochure__circle--3 { left: 61.8%; top: 76.8%; width: 16.4%; }

/* ---------- Enquiry card (form + contact boxes) ---------- */
.enquiry { position: relative; z-index: 1; padding-block: clamp(48px, 4.167vw, 80px) clamp(48px, 6.25vw, 120px); }
.contact-top .enquiry { padding-top: clamp(56px, 7.135vw, 137px); }
.enquiry__card { display: grid; grid-template-columns: minmax(0, 516fr) minmax(0, 671fr); column-gap: clamp(48px, 11.562vw, 222px); max-width: 1627px; margin-inline: auto; background: #fff; border-radius: clamp(28px, 2.948vw, 56.6px); box-shadow: 1.24px 1.24px 12px rgba(0,0,0,.02), 0 0 34.8px rgba(91,202,244,.22); padding: clamp(28px, 3.073vw, 59px) clamp(24px, 6.667vw, 128px) clamp(28px, 2.708vw, 52px) clamp(24px, 4.479vw, 86px); }
.enquiry__title { font-size: clamp(26px, 2.182vw, 41.9px); font-weight: 400; line-height: 1.317; color: var(--c-navy); }
.enquiry__title em, .enquiry__h strong { color: var(--c-blue-500); }
.enquiry__title em { font-weight: 700; font-style: italic; }
.enquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.458vw, 28px) clamp(16px, 2.604vw, 50px); margin-top: clamp(16px, 1.042vw, 20px); }
.field { display: grid; gap: clamp(6px, 0.312vw, 6px); }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: clamp(16px, 1.094vw, 21px); line-height: 1.317; color: var(--c-navy); }
.field__input { width: 100%; height: clamp(44px, 2.474vw, 47.5px); border-radius: 8px; border: .6px solid rgba(180,180,180,.73); background: rgba(217,217,217,.22); padding: 0 clamp(12px, 0.677vw, 13px); font: inherit; font-size: clamp(16px, 0.875vw, 16.8px); color: var(--c-navy); letter-spacing: inherit; transition: border-color var(--dur), box-shadow var(--dur), background-color var(--dur); }
.field__input::placeholder { color: #C9C9C9; }
.field__input--area { height: clamp(150px, 11.979vw, 230px); padding-block: 12px; resize: vertical; }
.field__input:focus { outline: none; border-color: var(--c-blue-500); background: #fff; box-shadow: 0 0 0 3px rgba(22,158,235,.15); }
.enquiry__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(24px, 1.875vw, 36px); }
.check { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(14px, 0.875vw, 16.8px); color: var(--c-grey); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--c-blue-500); }
.enquiry__submit { border: 0; border-radius: 999px; height: clamp(46px, 2.656vw, 51px); padding: 0 clamp(22px, 1.198vw, 23px); background: linear-gradient(180deg, #169EEB 0%, #0079C1 100%); color: #fff; font-size: clamp(16px, 1.094vw, 21px); font-weight: 700; box-shadow: var(--sh-btn); transition: transform var(--dur) var(--ease-out), filter var(--dur); }
.enquiry__submit:hover, .enquiry__submit:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.enquiry__status { min-height: 1.4em; margin-top: 10px; font-size: .95rem; color: var(--c-blue-700); }
.enquiry__info { position: relative; padding-top: clamp(8px, 3.802vw, 73px); }
.enquiry__info::before { content: ""; position: absolute; left: clamp(-102px, -5.312vw, -24px); top: clamp(0px, 1.042vw, 20px); height: clamp(300px, 31.927vw, 613px); width: 1px; background: #E2E2E2; }
.enquiry__h { font-size: clamp(26px, 2.448vw, 47px); font-weight: 400; line-height: 1.317; color: var(--c-navy); }
.enquiry__h strong { font-weight: 700; }
.enquiry__lead { margin-top: clamp(10px, 0.521vw, 10px); font-size: clamp(17px, 1.469vw, 28.2px); line-height: 1.317; color: var(--c-grey); }
.enquiry__lead strong { font-weight: 700; }
.enquiry__boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 302px)); justify-content: space-between; gap: clamp(16px, 2.708vw, 52px) clamp(16px, 3.438vw, 66px); margin-top: clamp(28px, 2.917vw, 56px); }
.info-box { display: flex; align-items: center; gap: clamp(14px, 1.354vw, 26px); min-height: clamp(72px, 4.427vw, 85px); padding: 10px 14px 10px clamp(16px, 1.875vw, 36px); background: #fff; border-radius: 19px; box-shadow: 0 0 9.9px rgba(91,202,244,.3); }
.info-box__icon { flex: none; width: clamp(40px, 2.396vw, 46px); aspect-ratio: 1; border-radius: 50%; background: var(--g-light-blue); display: grid; place-items: center; }
.info-box__icon img { width: 46%; height: auto; max-height: 56%; object-fit: contain; filter: brightness(0) invert(1); }
.info-box__text { display: grid; min-width: 0; }
.info-box__title { font-size: clamp(17px, 1.135vw, 21.8px); font-weight: 600; line-height: 1.34; color: var(--c-blue-700); }
.info-box__value { font-size: clamp(16px, 1.135vw, 21.8px); line-height: 1.2; color: rgba(0,121,193,.5); overflow-wrap: anywhere; }
.info-box__value a { text-decoration: none; }
.info-box:nth-child(2) .info-box__value { font-size: clamp(13px, 0.724vw, 13.9px); line-height: 1.34; }
.info-box:nth-child(4) .info-box__value { font-size: clamp(13px, 0.792vw, 15.2px); line-height: 1.34; }

/* ---------- OUR WORKS mosaic ---------- */
.works { position: relative; z-index: 0; padding-top: clamp(64px, 6.771vw, 130px); }
.works__grid { display: grid; max-width: 1600px; margin: clamp(36px, 3.646vw, 70px) auto 0; gap: clamp(10px, 1.25vw, 24px);
  grid-template-columns: 381fr 374fr 392fr 381fr; grid-template-rows: 353fr 436fr 437fr; aspect-ratio: 1600 / 1274;
  grid-template-areas: "a a b b" "a a c d" "e f f g"; }
.works__img { overflow: hidden; border-radius: clamp(16px, 1.562vw, 30px); min-height: 0; }
.works__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.works__img:hover img { transform: scale(1.04); }
.works__img--1 { grid-area: a; } .works__img--2 { grid-area: b; } .works__img--3 { grid-area: c; } .works__img--4 { grid-area: d; }
.works__img--5 { grid-area: e; } .works__img--6 { grid-area: f; } .works__img--7 { grid-area: g; }
.page-contact .works { padding-bottom: clamp(24px, 3.125vw, 60px); }

/* ---------- Pool Details: gallery + intro ---------- */
.detail-intro { padding-top: clamp(56px, 6.198vw, 119px); }
.detail-intro__inner { display: grid; grid-template-columns: minmax(0, 755fr) minmax(0, 720fr); column-gap: clamp(40px, 5.938vw, 114px); align-items: center; padding-left: clamp(0px, 3.906vw, 75px); }
.gallery__main { position: relative; aspect-ratio: 755 / 517; border-radius: clamp(20px, 1.562vw, 30px); overflow: hidden; background: var(--c-ice); }
.gallery__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.gallery__slide.is-active { opacity: 1; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__bar { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.146vw, 22px); margin-top: clamp(16px, 1.458vw, 28px); }
.gallery__thumbs { display: flex; gap: clamp(10px, 1.25vw, 24px); }
.gallery__thumb { display: block; width: clamp(64px, 5.833vw, 112px); aspect-ratio: 112 / 95; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; opacity: .75; transition: opacity var(--dur), border-color var(--dur); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active, .gallery__thumb:hover { opacity: 1; border-color: var(--c-blue-500); }
.gallery__nav { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--c-navy); display: grid; place-items: center; }
.gallery__nav svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.gallery__nav:hover { color: var(--c-blue-500); }
.detail-intro__text .h2 { font-weight: 400; }
.detail-intro__text .lead { max-width: 710px; }
.detail-intro__text .btn { margin-top: clamp(28px, 2.292vw, 44px); }

/* Tabs + dimensions */
.dims { padding-top: clamp(56px, 6.25vw, 120px); }
.tabs { display: flex; gap: clamp(0px, 0.052vw, 1px); width: fit-content; border-bottom: 1.5px solid var(--c-blue-500); margin-left: clamp(0px, 3.906vw, 75px); }
.tabs__btn { position: relative; padding: 0 clamp(20px, 2.812vw, 54px) clamp(10px, 0.833vw, 16px) 0; border: 0; background: none; font-size: clamp(18px, 1.458vw, 28px); font-weight: 400; color: var(--c-navy); text-decoration: none; }
.tabs__btn + .tabs__btn { padding-left: clamp(20px, 2.812vw, 54px); padding-right: clamp(24px, 5.104vw, 98px); }
.tabs__btn.is-active { color: var(--c-blue-700); font-weight: 500; }
.tabs__btn.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 5px; border-radius: 3px; background: var(--c-blue-700); }
.dims__panel { display: grid; grid-template-columns: minmax(0, 632fr) minmax(0, 775fr); column-gap: clamp(24px, 2.812vw, 54px); align-items: start; margin-top: clamp(28px, 3.229vw, 62px); padding-inline: clamp(0px, 7.292vw, 140px) clamp(0px, 3.75vw, 72px); }
.dims__diagram { border: 2.5px solid #D9EFFB; border-radius: clamp(20px, 1.562vw, 30px); aspect-ratio: 632 / 512; display: grid; place-items: center; padding: 6%; }
.dims__diagram img { width: 42%; height: auto; object-fit: contain; }
.dims__table-wrap { overflow-x: auto; }
.dims__table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: center; font-size: clamp(15px, 1.146vw, 22px); color: var(--c-navy); }
.dims__table th { font-weight: 500; background: #E1F3FD; padding: clamp(12px, 1.042vw, 20px) 8px; }
.dims__table th:first-child { border-radius: 16px 0 0 16px; } .dims__table th:last-child { border-radius: 0 16px 16px 0; }
.dims__table td { padding: clamp(14px, 1.562vw, 30px) 8px; border-bottom: 1px solid #E8E8E8; }
.dims__table tbody tr:last-child td { border-bottom: 0; }
.dims__table tr.is-hl td { border-top: 2px solid var(--c-blue-500); border-bottom: 2px solid var(--c-blue-500); padding-block: clamp(10px, 1.042vw, 20px); }
.dims__table tr.is-hl td:first-child { border-left: 2px solid var(--c-blue-500); border-radius: 16px 0 0 16px; }
.dims__table tr.is-hl td:last-child { border-right: 2px solid var(--c-blue-500); border-radius: 0 16px 16px 0; }
.dims__table tbody tr:first-child td { position: relative; }
.dims__table tbody::before { content: ""; display: table-row; height: clamp(10px, 1.146vw, 22px); }

/* What's included */
.included { padding-top: clamp(64px, 6.771vw, 130px); padding-bottom: clamp(72px, 9.375vw, 180px); }
.inc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.438vw, 66px); max-width: 1630px; margin: clamp(36px, 3.646vw, 70px) auto 0; }
.inc-card { background: var(--c-ice); border-radius: clamp(22px, 1.667vw, 32px); padding: clamp(26px, 2.5vw, 48px) clamp(24px, 2.604vw, 50px) clamp(28px, 3.333vw, 64px); }
.inc-card .icon-circle { width: clamp(56px, 4.271vw, 82px); }
.inc-card .icon-circle img { width: 54%; }
.inc-card__title { margin-top: clamp(16px, 1.562vw, 30px); font-size: clamp(20px, 1.458vw, 28px); font-weight: 500; line-height: 1.317; color: var(--c-navy); }
.inc-card__text { margin-top: clamp(8px, 0.729vw, 14px); font-size: clamp(16px, 1.042vw, 20px); line-height: 1.5; color: var(--c-grey); max-width: 420px; }
.inc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 4.271vw, 82px); max-width: 1640px; margin: clamp(32px, 3.125vw, 60px) auto 0; padding-inline: clamp(0px, 0.521vw, 10px); }
.inc-list__right .btn { margin-top: clamp(28px, 2.292vw, 44px); }

/* ---------- Resources ---------- */
.faq-sec { padding-top: clamp(56px, 6.198vw, 119px); }
.faq-sec .section-head { justify-content: flex-start; text-align: left; }
.faq-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1590px; margin: clamp(40px, 4.479vw, 86px) auto 0; text-align: center; }
.faq-cat { position: relative; }
.faq-cat a { display: grid; justify-items: center; gap: clamp(12px, 1.458vw, 28px); text-decoration: none; color: var(--c-navy); }
.faq-cat::after { content: ""; position: absolute; top: clamp(40px, 4.062vw, 78px); left: calc(50% + clamp(56px, 5.729vw, 110px)); right: calc(-50% + clamp(56px, 5.729vw, 110px)); height: 5px; border-radius: 3px; background: var(--c-blue-500); }
.faq-cat:last-child::after { display: none; }
.faq-cat__icon { position: relative; width: clamp(72px, 6.458vw, 124px); aspect-ratio: 1; margin-top: clamp(8px, 0.833vw, 16px); border-radius: 50%; background: var(--g-light-blue); display: grid; place-items: center; transition: transform var(--dur) var(--ease-out); }
.faq-cat__glyph { width: 48%; height: auto; max-height: 50%; object-fit: contain; position: relative; }
.faq-cat.is-active .faq-cat__icon { background: none; margin-top: 0; }
.faq-cat__bubble { position: absolute; inset: 0; width: 100%; height: auto; }
.faq-cat.is-active .faq-cat__glyph { width: 42%; margin-top: -4%; }
.faq-cat__label { font-size: clamp(17px, 1.562vw, 30px); font-weight: 500; line-height: 1.317; }
.faq-cat.is-active .faq-cat__label { color: var(--c-blue-700); font-weight: 600; }
.faq-cat a:hover .faq-cat__icon { transform: translateY(-4px); }
.faq { display: grid; gap: clamp(12px, 1.146vw, 22px); max-width: 1288px; margin: clamp(40px, 4.479vw, 86px) auto 0; }
.faq__item { border: 1.5px solid #CFEAFB; background: #F5FBFF; border-radius: clamp(16px, 1.042vw, 20px); overflow: hidden; transition: background-color var(--dur); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: clamp(64px, 5.0vw, 96px); padding: 12px clamp(18px, 2.083vw, 40px) 12px clamp(20px, 3.021vw, 58px); border: 0; background: none; text-align: left; font-size: clamp(17px, 1.562vw, 30px); font-weight: 600; line-height: 1.3; color: var(--c-blue-500); }
.faq__icon { position: relative; flex: none; width: clamp(30px, 2.083vw, 40px); aspect-ratio: 1; border-radius: 50%; background: var(--c-blue-700); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 3px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease-out); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open { background: #0288D8; border-color: #0288D8; }
.faq__item.is-open .faq__q { color: #fff; }
.faq__item.is-open .faq__icon { background: #fff; }
.faq__item.is-open .faq__icon::before, .faq__item.is-open .faq__icon::after { background: #0288D8; }
.faq__item.is-open .faq__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.faq__item.is-open .faq__icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.faq__a { padding: 0 clamp(20px, 4.167vw, 80px) clamp(20px, 1.875vw, 36px) clamp(20px, 3.021vw, 58px); color: #fff; font-size: clamp(16px, 1.146vw, 22px); line-height: 1.42; }
.faq__a ul { list-style: disc; padding-left: 1.1em; }
.faq__item:not(.is-open) .faq__a { display: none; }

.ask { padding-top: clamp(64px, 8.333vw, 160px); }
.ask__card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; min-height: clamp(0px, 15.885vw, 305px); padding: clamp(32px, 3.646vw, 70px) clamp(24px, 4.375vw, 84px); border-radius: clamp(28px, 3.125vw, 60px); color: #fff; }
.ask__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ask__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,58,96,.55) 0%, rgba(0,121,193,.25) 60%, rgba(0,121,193,.15) 100%); }
.ask__title { font-size: var(--fs-h2); font-weight: 400; line-height: 1.317; }
.ask__title strong { font-weight: 700; }
.ask__text p { margin-top: 6px; max-width: 530px; font-size: clamp(16px, 1.25vw, 24px); line-height: 1.317; }
.ask__btns { display: flex; flex-wrap: wrap; gap: 16px clamp(16px, 1.875vw, 36px); margin-right: clamp(0px, 0.0vw, 0px); }
.page-resources .enquiry { padding-top: clamp(64px, 9.375vw, 180px); }

/* ---------- Projects ---------- */
.proj-sec .section-head { flex-direction: column; align-items: stretch; }
.proj-sec .filter { align-self: flex-end; margin-top: clamp(20px, 0.521vw, 10px); }
.proj-sec { padding-top: clamp(56px, 6.198vw, 119px); padding-bottom: clamp(72px, 9.375vw, 180px); }
.proj-sec .lead { max-width: 640px; }
.filter { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.771vw, 34px); margin-right: clamp(0px, 0.521vw, 10px); }
.filter__btn { display: inline-flex; align-items: center; gap: .45em; height: clamp(42px, 2.917vw, 56px); padding: 0 clamp(16px, 1.354vw, 26px); border-radius: 999px; border: 1.6px solid #CFEAFB; background: #F5FBFF; color: var(--c-blue-500); font-size: clamp(16px, 1.354vw, 26px); font-weight: 600; transition: background-color var(--dur), color var(--dur); }
.filter__count { color: #A7DAF6; font-weight: 500; }
.filter__btn.is-active { background: #0288D8; border-color: #0288D8; color: #fff; }
.filter__btn.is-active .filter__count { color: rgba(255,255,255,.6); }
.filter__btn:not(.is-active):hover { background: #E2F4FE; }
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 5.469vw, 105px) clamp(24px, 4.375vw, 84px); max-width: 1650px; margin: clamp(32px, 3.646vw, 70px) auto 0; }
.proj-card.is-hidden { display: none; }
.proj-card__link { display: block; height: 100%; background: #fff; border-radius: clamp(24px, 1.667vw, 32px); box-shadow: var(--sh-card); padding: clamp(12px, 0.833vw, 16px); text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.proj-card__media { display: block; overflow: hidden; border-radius: clamp(18px, 1.25vw, 24px); aspect-ratio: 461 / 389; }
.proj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.proj-card__body { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: clamp(14px, 1.25vw, 24px) clamp(12px, 1.562vw, 30px) clamp(14px, 1.458vw, 28px) clamp(8px, 0.938vw, 18px); }
.proj-card__text { display: grid; }
.proj-card__title { font-size: clamp(21px, 1.562vw, 30px); font-weight: 600; line-height: 1.317; color: #000; }
.proj-card__sub, .proj-card__count { font-size: clamp(16px, 1.146vw, 22px); line-height: 1.6; color: var(--c-grey); }
.proj-card__sub { margin-top: 6px; }
.proj-card .pool-card__arrow { width: clamp(44px, 3.021vw, 58px); margin-top: 8px; }
.proj-card__link:hover, .proj-card__link:focus-visible { transform: translateY(-8px); box-shadow: 1px 6px 22px rgba(0,0,0,.12), 0 0 40px rgba(91,202,244,.3); }
.proj-card__link:hover .proj-card__media img { transform: scale(1.05); }
.proj-card__link:hover .pool-card__arrow img { transform: rotate(0deg); }
.proj-empty { margin-top: 32px; text-align: center; color: var(--c-grey); font-size: clamp(16px, 1.146vw, 22px); }

/* ---------- Finance ---------- */
.split { padding-block: clamp(56px, 6.198vw, 119px) clamp(64px, 6.771vw, 130px); }
.split__inner { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 720fr); column-gap: clamp(40px, 8.854vw, 170px); align-items: center; }
.split__text .lead { max-width: 740px; }
.split__text .lead + .lead { margin-top: 1.2em; }
.tilt-photo { position: relative; isolation: isolate; margin-right: clamp(-26px, -1.354vw, 0px); }
.tilt-photo::before { content: ""; position: absolute; inset: -4.5% -3% -3% -3%; z-index: -1; background: #E9F7FF; border-radius: clamp(24px, 2.083vw, 40px); transform: rotate(-4deg); }
.tilt-photo img { width: 100%; height: auto; aspect-ratio: 688 / 526; object-fit: cover; border-radius: clamp(20px, 1.562vw, 30px); }
.tilt-photo--sq img { aspect-ratio: 1; }
.tilt-photo--sq::before { transform: rotate(-8deg); inset: -6% -4%; background: #EBF6FC; }
.fin-plan { background: var(--c-ice); padding-block: clamp(56px, 4.688vw, 90px) clamp(56px, 5.729vw, 110px); }
.fin-plan__inner { display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 970fr); column-gap: clamp(40px, 6.771vw, 130px); }
.fin-plan__text .lead { max-width: 600px; }
.fin-plan__photo { margin-top: clamp(32px, 10.417vw, 200px); max-width: 479px; border-radius: clamp(20px, 1.562vw, 30px); overflow: hidden; aspect-ratio: 479 / 298; }
.fin-plan__photo img { width: 100%; height: 100%; object-fit: cover; }
.fin-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.667vw, 32px) clamp(16px, 1.875vw, 36px); }
.fin-card { background: #fff; border-radius: clamp(22px, 1.667vw, 32px); padding: clamp(22px, 1.771vw, 34px) clamp(22px, 2.396vw, 46px) clamp(24px, 2.083vw, 40px); min-height: clamp(0px, 11.979vw, 230px); }
.fin-card__pct { font-size: clamp(16px, 1.042vw, 20px); font-weight: 600; line-height: 1; }
.fin-card__title { margin-top: clamp(12px, 0.729vw, 14px); font-size: clamp(19px, 1.458vw, 28px); font-weight: 500; line-height: 1.317; color: var(--c-blue-500); }
.fin-card__text { margin-top: clamp(6px, 0.521vw, 10px); font-size: clamp(15px, 1.042vw, 20px); line-height: 1.5; color: var(--c-sky); max-width: 360px; }
.split--apply { padding-top: clamp(64px, 9.896vw, 190px); padding-bottom: clamp(72px, 9.896vw, 190px); }
.split--apply .split__inner { grid-template-columns: minmax(0, 640fr) minmax(0, 560fr) minmax(0, 452fr); column-gap: clamp(32px, 7.812vw, 150px); align-items: start; grid-template-rows: auto auto 1fr; }
.split--apply .acc { margin-top: 0; align-self: start; }
.split--apply .split__text { display: contents; }
.split--apply .split__text > .eyebrow, .split--apply .split__text > .h2, .split--apply .split__text > .lead { grid-column: 1; }
.split--apply .split__text > .acc { grid-column: 2; grid-row: 1 / span 3; }
.split--apply .round-photo { grid-column: 3; grid-row: 1 / span 3; margin-left: clamp(-136px, -7.083vw, 0px); }
.round-photo { border-radius: clamp(20px, 1.562vw, 30px); overflow: hidden; aspect-ratio: 452 / 477; }
.round-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Accordion (finance + about) */
.acc { display: grid; gap: clamp(10px, 0.833vw, 16px); }
.acc__item { border: 1.5px solid #CFEAFB; background: #F5FBFF; border-radius: clamp(16px, 1.25vw, 24px); overflow: hidden; }
.acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: clamp(60px, 5.312vw, 102px); padding: clamp(12px, 0.938vw, 18px) clamp(16px, 2.083vw, 40px) clamp(12px, 0.938vw, 18px) clamp(18px, 1.979vw, 38px); border: 0; background: none; text-align: left; font-size: clamp(17px, 1.25vw, 24px); font-weight: 400; line-height: 1.3; color: var(--c-blue-700); }
.acc__q strong { font-weight: 700; }
.acc__icon { position: relative; flex: none; width: clamp(32px, 2.188vw, 42px); aspect-ratio: 1; border-radius: 50%; background: #0288D8; }
.acc__icon::before { content: ""; position: absolute; left: 50%; top: 45%; width: 30%; height: 30%; border: solid #fff; border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); transition: transform var(--dur) var(--ease-out); }
.acc__item.is-open { background: #0288D8; border-color: #0288D8; }
.acc__item.is-open .acc__q { color: #fff; font-weight: 500; }
.acc__item.is-open .acc__icon { background: #fff; }
.acc__item.is-open .acc__icon::before { border-color: #0288D8; }
.acc__a { padding: 0 clamp(18px, 2.083vw, 40px) clamp(18px, 1.667vw, 32px) clamp(18px, 1.979vw, 38px); color: #fff; font-size: clamp(15px, 0.859vw, 16.5px); line-height: 1.6; }
.acc__item:not(.is-open) .acc__a { display: none; }
.acc--card .acc__item { border-radius: clamp(18px, 1.562vw, 30px); }
.acc--card .acc__q { font-size: clamp(20px, 1.771vw, 34px); color: var(--c-blue-700); min-height: clamp(64px, 5.417vw, 104px); }
.acc--card .acc__item.is-open .acc__q { color: #fff; font-weight: 400; padding-top: clamp(16px, 1.875vw, 36px); }
.acc--card .acc__a { font-size: clamp(15px, 0.911vw, 17.5px); }

/* ---------- Installations ---------- */
.inst-intro { padding-block: clamp(56px, 7.292vw, 140px) clamp(56px, 5.729vw, 110px); }
.inst-intro__inner { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 480fr) minmax(0, 446fr); column-gap: clamp(32px, 5.208vw, 100px); align-items: center; padding-right: clamp(0px, 3.646vw, 70px); }
.ifeats { display: grid; gap: clamp(24px, 2.708vw, 52px); }
.ifeat { display: flex; align-items: flex-start; gap: clamp(16px, 1.771vw, 34px); }
.ifeat .icon-circle { width: clamp(56px, 4.271vw, 82px); }
.ifeat .icon-circle img { width: 48%; }
.ifeat__title { font-size: clamp(18px, 1.219vw, 23.4px); font-weight: 800; line-height: 1.317; color: #000; }
.ifeat__text { margin-top: 4px; font-size: clamp(15px, 1.042vw, 20px); line-height: 1.317; color: var(--c-grey); max-width: 340px; }
.e2e { position: relative; z-index: 0; padding-block: clamp(120px, 17.188vw, 330px) clamp(110px, 12.5vw, 240px); margin-top: clamp(24px, 4.167vw, 80px); }
.e2e__bg { position: absolute; z-index: -1; top: 0; left: -3.2vw; width: 108.56vw; max-width: none; height: 100%; object-fit: fill; pointer-events: none; }
.e2e__inner { display: grid; grid-template-columns: minmax(0, 545fr) minmax(0, 434fr) minmax(0, 620fr); column-gap: clamp(24px, 4.167vw, 80px); align-items: center; padding-left: clamp(0px, 0.938vw, 18px); }
.e2e__text .lead { line-height: 1.4; }
.e2e__small { padding: clamp(8px, 0.781vw, 15px); border: 1.5px solid var(--c-blue-500); border-radius: clamp(24px, 2.396vw, 46px); }
.e2e__small img, .e2e__big img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: clamp(20px, 1.667vw, 32px); }
.isteps-sec { padding-top: clamp(24px, 1.562vw, 30px); padding-bottom: clamp(80px, 11.458vw, 220px); }
.isteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3.646vw, 70px); max-width: 1670px; margin: clamp(48px, 7.292vw, 140px) auto 0; text-align: center; }
.istep { position: relative; }
.istep__badge { position: relative; display: block; width: clamp(88px, 6.458vw, 124px); aspect-ratio: 1; margin: 0 auto; left: clamp(-14px, -0.729vw, -10px); }
.istep__circle { position: absolute; inset: 0; border-radius: 50%; background: var(--g-light-blue); display: grid; place-items: center; }
.istep__circle img { width: 53%; height: auto; }
.istep__num { position: absolute; left: 86%; top: 25%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: #1DA1EE; border: 3px solid #fff; color: #fff; display: grid; place-items: center; font-size: clamp(24px, 2.016vw, 38.7px); font-weight: 500; line-height: 1; }
.istep::after { content: ""; position: absolute; top: calc(clamp(88px, 6.458vw, 124px) / 2 - 2.7px); left: calc(50% + clamp(90px, 7.812vw, 150px)); width: calc(100% + clamp(24px, 3.646vw, 70px) - clamp(180px, 15.625vw, 300px)); height: 5.36px; border-radius: 3px; background: var(--c-blue-500); transform-origin: left center; }
.istep:last-child::after { display: none; }
.istep__title { margin-top: clamp(16px, 1.562vw, 30px); font-size: clamp(20px, 1.667vw, 32px); font-weight: 700; line-height: 1.317; color: var(--c-navy); }
.istep__text { margin: 10px auto 0; max-width: 330px; font-size: clamp(15px, 1.115vw, 21.4px); line-height: 1.317; color: var(--c-grey); }
.build { background: var(--c-ice); padding-block: clamp(64px, 6.25vw, 120px) clamp(72px, 8.333vw, 160px); }
.build .lead { max-width: 840px; }
.build-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4.375vw, 84px) clamp(20px, 3.958vw, 76px); max-width: 1352px; margin: clamp(40px, 4.688vw, 90px) auto 0; }
.build-card { background: #fff; border-radius: clamp(22px, 1.667vw, 32px); padding: clamp(6px, 0.365vw, 7px) clamp(6px, 0.365vw, 7px) clamp(22px, 1.979vw, 38px); }
.build-card__media { position: relative; display: block; }
.build-card__media img { width: 100%; height: auto; aspect-ratio: 388 / 206; object-fit: cover; border-radius: clamp(18px, 1.458vw, 28px); }
.build-card__num { position: absolute; left: clamp(16px, 1.927vw, 37px); bottom: clamp(-22px, -1.146vw, -18px); width: clamp(36px, 2.344vw, 45px); aspect-ratio: 1; border-radius: 50%; background: #1DA1EE; border: 2.5px solid #fff; color: #fff; display: grid; place-items: center; font-size: clamp(18px, 1.542vw, 29.6px); font-weight: 500; }
.build-card__title { margin: clamp(28px, 1.771vw, 34px) clamp(14px, 1.146vw, 22px) 0; font-size: clamp(19px, 1.302vw, 25px); font-weight: 500; line-height: 1.4; color: #000; }
.build-card__text { margin: 8px clamp(14px, 1.146vw, 22px) 0; font-size: clamp(14px, 0.807vw, 15.5px); line-height: 1.6; color: #5B6684; }
.shortlist { padding-block: clamp(64px, 6.771vw, 130px) clamp(48px, 6.25vw, 120px); }
.short-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 400px)); justify-content: center; gap: clamp(24px, 5.0vw, 96px); margin-top: clamp(36px, 4.167vw, 80px); }
.short-card a { display: block; height: 100%; background: #fff; border-radius: clamp(26px, 2.135vw, 41px); box-shadow: 1px 1px 15.3px rgba(91,202,244,.43); padding: clamp(14px, 1.042vw, 20px) clamp(14px, 0.99vw, 19px) clamp(20px, 1.562vw, 30px); text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.short-card__media { display: block; border-radius: clamp(18px, 1.354vw, 26px); overflow: hidden; aspect-ratio: 363 / 328; }
.short-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.short-card__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(14px, 1.25vw, 24px) clamp(6px, 1.042vw, 20px) 0 clamp(6px, 1.094vw, 21px); }
.short-card__title { display: block; font-size: clamp(21px, 1.615vw, 31px); font-weight: 500; line-height: 1.317; color: var(--c-navy); }
.short-card__sub { display: block; margin-top: 4px; font-size: clamp(15px, 1.078vw, 20.7px); line-height: 1.35; color: var(--c-grey); }
.short-card__arrow { flex: none; width: clamp(44px, 2.943vw, 56.5px); aspect-ratio: 1; border-radius: 50%; background: var(--g-card-circle); display: grid; place-items: center; }
.short-card__arrow img { width: 42%; height: auto; transform: rotate(-45deg); transition: transform var(--dur) var(--ease-out); }
.short-card a:hover, .short-card a:focus-visible { transform: translateY(-8px); box-shadow: 1px 6px 22px rgba(0,0,0,.1), 0 0 40px rgba(91,202,244,.4); }
.short-card a:hover img { transform: scale(1.05); }
.short-card a:hover .short-card__arrow img { transform: rotate(0deg); }

/* ---------- About ---------- */
.story { padding-block: clamp(56px, 6.198vw, 119px) clamp(64px, 9.896vw, 190px); }
.story__inner { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 452fr) minmax(0, 560fr); column-gap: clamp(24px, 2.917vw, 56px); align-items: start; }
.story__text { padding-top: clamp(0px, 0.0vw, 0px); padding-right: clamp(0px, 4.688vw, 90px); }
.story__text .btn { margin-top: clamp(28px, 2.083vw, 40px); }
.story__photo { border-radius: clamp(20px, 1.562vw, 30px); overflow: hidden; aspect-ratio: 452 / 477; margin-left: clamp(0px, 3.958vw, 76px); }
.story__photo img { width: 100%; height: 100%; object-fit: cover; }
.story__inner > .acc { margin-left: clamp(-48px, -2.5vw, 0px); }
.core__card { position: relative; isolation: isolate; overflow: hidden; border-radius: clamp(28px, 3.125vw, 60px); aspect-ratio: 1730 / 720; padding: clamp(28px, 2.708vw, 52px) clamp(20px, 2.188vw, 42px) clamp(20px, 2.708vw, 52px) clamp(24px, 4.271vw, 82px); color: #fff; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.core__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.core__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(0,83,140,.55) 0%, rgba(0,121,193,.28) 50%, rgba(0,121,193,.15) 100%); }
.core__title { margin-top: clamp(8px, 0.521vw, 10px); max-width: 600px; font-size: clamp(28px, 3.021vw, 58px); font-weight: 400; line-height: 1.2; }
.core__title em { font-weight: 700; }
.core__stats { align-self: flex-end; display: grid; grid-template-columns: repeat(2, clamp(140px, 13.646vw, 262px)); gap: clamp(10px, 0.833vw, 16px); }
.stat { background: #fff; color: var(--c-navy); border-radius: clamp(16px, 1.25vw, 24px); padding: clamp(16px, 1.875vw, 36px) clamp(14px, 1.771vw, 34px) clamp(16px, 2.083vw, 40px); min-height: clamp(0px, 10.833vw, 208px); }
.stat strong { display: block; font-size: clamp(30px, 3.125vw, 60px); font-weight: 700; line-height: 1.1; color: var(--c-blue-700); }
.stat span { display: block; margin-top: clamp(8px, 0.729vw, 14px); font-size: clamp(13px, 1.042vw, 20px); line-height: 1.25; max-width: 200px; }
.stat--a { grid-column: 2; }
.warranty { background: #EBF6FC; padding-block: clamp(64px, 6.25vw, 120px) clamp(72px, 9.375vw, 180px); margin-top: clamp(72px, 10.208vw, 196px); }
.warranty .lead { max-width: 560px; margin-top: clamp(16px, 1.875vw, 36px); }
.war-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.812vw, 54px); margin-top: clamp(56px, 5.729vw, 110px); padding-inline: clamp(0px, 0.0vw, 0px); }
.war-card { position: relative; background: #fff; border-radius: clamp(24px, 1.875vw, 36px); padding: clamp(56px, 4.688vw, 90px) clamp(22px, 2.396vw, 46px) clamp(32px, 4.167vw, 80px); font-size: clamp(16px, 1.12vw, 21.5px); line-height: 1.55; color: var(--c-grey); }
.war-card:nth-child(n+3) { font-size: clamp(15px, 0.99vw, 19px); padding-top: clamp(56px, 3.542vw, 68px); }
.war-card__num { position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%); width: clamp(52px, 3.646vw, 70px); aspect-ratio: 1; border-radius: 50%; background: var(--g-light-blue); border: 5px solid #fff; box-shadow: 0 0 0 1.5px #CFEAFB; color: #fff; display: grid; place-items: center; font-size: clamp(22px, 1.771vw, 34px); font-weight: 500; }
.team { padding-block: clamp(72px, 8.854vw, 170px) clamp(48px, 6.25vw, 120px); }
.team__inner { display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 840fr); column-gap: clamp(40px, 7.812vw, 150px); align-items: center; }
.team__text .lead { max-width: 580px; }
.team__text .lead + .lead { margin-top: 1.4em; }
.team__visual { position: relative; width: min(100%, 790px); justify-self: end; aspect-ratio: 790 / 620; }
.team__ring { position: absolute; right: 2%; top: 1%; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 62%, #EAF6FD 62.5%); box-shadow: 0 0 0 1.5px #D7EEFB inset; display: grid; place-items: center; }
.team__photo { width: 88%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.team__note { position: absolute; left: 0; top: 7%; display: flex; align-items: center; gap: 10px; padding: 12px 22px 12px 16px; border-radius: 10px; background: #0A86D4; color: #fff; font-size: clamp(14px, 1.094vw, 21px); font-weight: 600; line-height: 1.35; max-width: 360px; box-shadow: 0 6px 18px rgba(0,58,96,.2); }
.team__check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.6px solid #fff; display: grid; place-items: center; font-size: 14px; }
.team__bubble { position: absolute; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--g-light-blue); color: #fff; box-shadow: 0 0 0 8px #fff, 0 0 0 9.5px #D7EEFB; line-height: 1.2; }
.team__bubble--a { right: 0; top: 0; width: 17.5%; aspect-ratio: 1; font-size: clamp(12px, 1.094vw, 21px); padding: 2%; }
.team__bubble--b { left: 8.5%; bottom: -1%; width: 27%; aspect-ratio: 1; font-size: clamp(14px, 1.302vw, 25px); padding: 3%; }
.page-about .enquiry { padding-top: clamp(32px, 3.125vw, 60px); padding-bottom: clamp(48px, 6.25vw, 120px); }

/* ---------- Pool Colors ---------- */
.colors { padding-top: clamp(56px, 6.198vw, 119px); padding-bottom: clamp(48px, 5.729vw, 110px); }
.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3.75vw, 72px) clamp(16px, 3.75vw, 72px); max-width: 1592px; margin: clamp(48px, 6.771vw, 130px) auto 0; }
.swatch { width: calc((100% - 3 * clamp(16px, 3.75vw, 72px)) / 4); }
.swatch button { position: relative; display: block; width: 100%; padding: clamp(10px, 0.833vw, 16px); border: 0; border-radius: clamp(18px, 1.458vw, 28px); background: #fff; box-shadow: 0 0 21px rgba(91,202,244,.28); text-align: left; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur); }
.swatch__img { display: block; overflow: hidden; border-radius: clamp(14px, 1.302vw, 25px) clamp(14px, 1.302vw, 25px) 0 0; aspect-ratio: 310 / 252; }
.swatch__img img { width: 100%; height: 100%; object-fit: cover; }
.swatch__name { display: flex; align-items: center; min-height: clamp(52px, 4.411vw, 84.7px); padding: 0 clamp(14px, 1.458vw, 28px); border-radius: 0 0 clamp(14px, 1.302vw, 25px) clamp(14px, 1.302vw, 25px); background: var(--sw); color: #fff; font-size: clamp(16px, 1.49vw, 28.6px); font-weight: 500; line-height: 1.2; }
.swatch__tick { position: absolute; right: clamp(20px, 1.875vw, 36px); top: clamp(20px, 1.875vw, 36px); width: clamp(30px, 2.292vw, 44px); aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--dur), transform var(--dur) var(--ease-out); }
.swatch__tick::before { content: ""; position: absolute; left: 50%; top: 45%; width: 24%; height: 44%; border: solid var(--c-blue-500); border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); }
.swatch button:hover { transform: translateY(-6px); }
.swatch.is-active button { transform: translateY(-14px); box-shadow: 0 14px 0 -2px #0B86D3, 0 0 21px rgba(91,202,244,.35); }
.swatch.is-active .swatch__tick { opacity: 1; transform: none; }
.chosen { position: relative; z-index: 0; padding-top: clamp(48px, 7.812vw, 150px); padding-bottom: clamp(120px, 13.021vw, 250px); }
.chosen::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; bottom: 0; z-index: -2; background: var(--c-ice); }
.chosen__wave { position: absolute; z-index: -1; left: -4vw; top: clamp(120px, 15.625vw, 300px); width: 117.5vw; height: calc(50% - clamp(120px, 15.625vw, 300px) + 2px); fill: var(--c-ice); }
.chosen__card { display: grid; grid-template-columns: minmax(0, 700fr) minmax(0, 722fr); column-gap: clamp(24px, 3.542vw, 68px); max-width: 1630px; margin-inline: auto; background: #fff; border-radius: clamp(26px, 2.083vw, 40px); box-shadow: 0 0 34px rgba(91,202,244,.25); padding: clamp(20px, 3.542vw, 68px); }
.chosen__tex { position: relative; border-radius: clamp(20px, 1.562vw, 30px); overflow: hidden; aspect-ratio: 700 / 520; }
.chosen__tex img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur); }
.chosen__badge { position: absolute; left: clamp(14px, 1.771vw, 34px); top: clamp(14px, 2.083vw, 40px); display: inline-flex; align-items: center; gap: 10px; padding: 8px 22px 8px 12px; border-radius: 999px; background: #fff; color: var(--c-navy); font-size: clamp(14px, 1.115vw, 21.4px); font-weight: 500; }
.chosen__badge-tick { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--c-blue-500); }
.chosen__badge-tick::before { content: ""; position: absolute; left: 50%; top: 45%; width: 26%; height: 46%; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -50%) rotate(45deg); }
.chosen__name { display: flex; align-items: center; gap: clamp(14px, 1.458vw, 28px); margin-top: clamp(20px, 2.604vw, 50px); font-size: clamp(26px, 2.391vw, 45.9px); font-weight: 500; line-height: 1.317; color: var(--c-navy); }
.chosen__dot { width: clamp(28px, 2.396vw, 46px); aspect-ratio: 1; border-radius: 50%; background: var(--sw); transition: background-color var(--dur); }
.chosen__range { margin-top: clamp(8px, 0.729vw, 14px); font-size: clamp(15px, 1.24vw, 23.8px); font-weight: 600; letter-spacing: .12em; color: var(--c-blue-500); padding-left: 4px; }
.chosen__desc { margin-top: clamp(12px, 1.562vw, 30px); max-width: 640px; font-size: clamp(15px, 1.094vw, 21px); line-height: 1.5; color: var(--c-grey); }
.chosen__desc[hidden] { display: none; }
.chosen__photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: clamp(10px, 1.146vw, 22px); align-content: start; }
.chosen__photos img { width: 100%; height: auto; object-fit: cover; border-radius: clamp(18px, 1.562vw, 30px); }
.chosen__p1 { grid-column: 1 / -1; aspect-ratio: 722 / 429; }
.chosen__p2, .chosen__p3 { aspect-ratio: 350 / 347; }
.chosen .section-head { margin-top: clamp(72px, 9.896vw, 190px); }
.chosen .lead { max-width: 520px; }
.factors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 4.167vw, 80px); margin-top: clamp(48px, 5.729vw, 110px); }
.factor__icon { width: clamp(110px, 8.542vw, 164px); aspect-ratio: 1; border-radius: 50%; background: #DDF1FC; display: grid; place-items: center; }
.factor__icon::before { content: ""; grid-area: 1 / 1; width: 82%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.factor__glyph { grid-area: 1 / 1; position: relative; width: 50%; aspect-ratio: 1; background: linear-gradient(180deg, #5BCAF4 0%, #169EEB 100%); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.factor__glyph--sun { --m: url(../assets/icons/glyph-sun.png); }
.factor__glyph--drop { --m: url(../assets/icons/glyph-drop.png); }
.factor__glyph--house { --m: url(../assets/icons/glyph-house.png); }
.factor__glyph--sparkle { --m: url(../assets/icons/glyph-sparkle.png); }
.factor__title { margin-top: clamp(16px, 1.771vw, 34px); font-size: clamp(20px, 1.562vw, 30px); font-weight: 500; line-height: 1.317; color: var(--c-navy); padding-left: clamp(0px, 0.729vw, 14px); }
.factor__text { margin-top: clamp(8px, 0.729vw, 14px); max-width: 300px; font-size: clamp(15px, 1.042vw, 20px); line-height: 1.4; color: var(--c-grey); padding-left: clamp(0px, 0.729vw, 14px); }

.fin-plan, .build, .warranty, .e2e, .brochure { position: relative; z-index: 1; }

/* CTA wave variants */
.cta--wave-ice .cta__wave { fill: var(--c-ice); }

/* =========================================================================
   Responsive (desktop-first; tablet/mobile are proposals, no Figma frames)
   ========================================================================= */
@media (max-width: 1440px) {
  .estimate__steps { margin-right: 0; }
  .story__photo { margin-left: 0; }
  .story__inner > .acc { margin-left: 0; }
  .split--apply .round-photo { margin-left: 0; }
}
@media (max-width: 1365px) {
  .estimate__title { white-space: normal; }
  .estimate__inner { flex-wrap: wrap; }
  .estimate__text { flex-basis: 100%; }
  .estimate__steps { margin-left: 0; }
  .estimate__btn { margin-left: auto; }
  .inst-intro__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 56px; padding-right: 0; }
  .inst-intro__text { grid-column: 1 / -1; }
  .story__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; }
  .story__text { grid-column: 1 / -1; padding-right: 0; }
  .split--apply .split__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--apply .split__text > .acc { grid-column: 1; grid-row: auto; margin-top: 32px; }
  .split--apply .round-photo { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
@media (max-width: 1279px) {
  .site-header--quote .site-header__quote { display: none; }
  .brochure__inner { grid-template-columns: 1fr; row-gap: 56px; }
  .brochure__media { margin: 0 auto; width: min(100%, 760px); }
  .brochure__circle--2 { left: -6%; }
  .detail-intro__inner { padding-left: 0; column-gap: 40px; }
  .dims__panel { padding-inline: 0; }
  .tabs { margin-left: 0; }
  .enquiry__card { column-gap: 72px; padding-right: 48px; padding-left: 48px; }
  .enquiry__info::before { left: -36px; }
  .enquiry__boxes { grid-template-columns: 1fr; }
  .e2e__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 40px; }
  .e2e__text { grid-column: 1 / -1; }
  .isteps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 64px; }
  .istep:nth-child(2n)::after { display: none; }
  .build-grid, .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .fin-plan__inner { grid-template-columns: 1fr; row-gap: 40px; }
  .fin-plan__photo { margin-top: 32px; }
  .war-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; }
  .core__card { aspect-ratio: auto; min-height: 520px; flex-direction: column; }
  .core__stats { align-self: flex-end; }
  .team__inner { grid-template-columns: 1fr; row-gap: 56px; }
  .team__visual { justify-self: center; }
  .chosen__card { grid-template-columns: 1fr; row-gap: 32px; }
  .factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches { gap: 40px 24px; }
  .swatch { width: calc((100% - 3 * 24px) / 4); }
}
@media (max-width: 1024px) {
  .detail-intro__inner { grid-template-columns: 1fr; row-gap: 40px; }
  .dims__panel { grid-template-columns: 1fr; row-gap: 32px; }
  .dims__diagram { max-width: 520px; width: 100%; margin-inline: auto; }
  .faq-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .faq-cat::after { left: calc(50% + 48px); right: calc(-50% + 48px); }
  .split__inner, .split--apply .split__inner { grid-template-columns: 1fr; row-gap: 48px; }
  .split--apply .split__text > .acc, .split--apply .round-photo { grid-column: 1; grid-row: auto; }
  .split--apply .round-photo { max-width: 560px; }
  .tilt-photo { margin: 24px 24px 0; }
  .inst-intro__inner { grid-template-columns: 1fr; }
  .tilt-photo--sq { max-width: 520px; }
  .story__inner { grid-template-columns: 1fr; }
  .story__photo { max-width: 560px; }
  .enquiry__card { grid-template-columns: 1fr; row-gap: 48px; }
  .enquiry__info { padding-top: 40px; border-top: 1px solid #E2E2E2; }
  .enquiry__info::before { display: none; }
  .enquiry__boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .short-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .swatch { width: calc((100% - 2 * 24px) / 3); }
  .ask__card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .banner__inner { padding-top: 56px; }
  .estimate__steps { flex-wrap: wrap; }
  .estimate__btn { margin-left: 0; }
  .section-head--bottom { align-items: flex-start; }
  .works__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 44vw; aspect-ratio: auto; grid-template-areas: "a a" "b b" "c d" "e g" "f f"; }
  .works__img--1 { grid-row: span 1; }
  .inc-cards, .inc-list { grid-template-columns: 1fr; }
  .inc-list__right .ticks--rule li:first-child { border-top: 0; }
  .isteps, .build-grid, .proj-grid, .short-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .istep::after { display: none !important; }
  .faq-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .faq-cat::after { display: none; }
  .fin-cards { grid-template-columns: 1fr; }
  .e2e__inner { grid-template-columns: 1fr; }
  .e2e__small { max-width: 360px; }
  .e2e__bg, .brochure__bg { width: 240vw; left: -70vw; }
  .war-grid { grid-template-columns: 1fr; }
  .core__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .stat--a { grid-column: 1 / -1; }
  .factors { grid-template-columns: 1fr 1fr; }
  .swatches { gap: 28px 16px; }
  .swatch { width: calc((100% - 16px) / 2); }
  .team__note { top: -2%; }
}
@media (max-width: 600px) {
  .banner { height: 300px; }
  .estimate__step span:last-child { font-size: 15px; }
  .estimate__btn { width: 100%; }
  .estimate .btn__label { flex: 1; justify-content: center; }
  .pill-toggle { width: 100%; }
  .filter { gap: 8px; }
  .brochure__circle--1 { left: 2%; top: -6%; }
  .brochure__circle--2 { left: -2%; }
  .brochure__media { margin-right: -12px; }
  .gallery__thumb { width: 72px; }
  .dims__table { font-size: 14px; }
  .enquiry__card { padding: 28px 20px; }
  .enquiry__grid { grid-template-columns: 1fr; }
  .enquiry__boxes { grid-template-columns: 1fr; }
  .enquiry__foot { flex-wrap: wrap; }
  .works__grid { grid-auto-rows: 52vw; }
  .faq__q { padding-left: 18px; }
  .ask__btns { flex-direction: column; align-items: flex-start; }
  .ask__title { font-size: 2rem; }
  .tilt-photo { margin: 16px 12px 0; }
  .core__card { padding: 28px 20px 20px; }
  .team__visual { aspect-ratio: 1 / 1.05; }
  .team__ring { width: 92%; right: 4%; top: 12%; }
  .team__note { left: 0; right: 0; max-width: none; }
  .team__bubble--a { width: 26%; top: 8%; }
  .team__bubble--b { width: 36%; left: 0; bottom: -4%; }
  .factors { grid-template-columns: 1fr; }
  .chosen__card { padding: 16px; }
  .chosen__wave { display: none; }
  .chosen::after { top: 30%; }
  .swatch__name { font-size: 15px; padding-inline: 10px; }
  .swatch button { padding: 8px; }
}