/* ==========================================================================
   GERHA UPVC — design system
   Tokens come from the official brand palette (#d6d7df #86a4bf #224372 #fff #000).
   Rules: --blue is text-safe ONLY on dark (7.7:1); never as text on light (2.6:1).
          --navy is text-safe on light (9.9:1); on dark it is decoration only (2.0:1).
   Motion: transform + opacity only; 150–200ms feedback, 450–700ms reveal, hero ≤1.4s.
   ========================================================================== */


/* Self-hosted fonts (latin subset) — no third-party request, preloaded in <head>. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/montserrat-300-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	--ink: #05070d;
	--deep: #0b1a33;
	--navy: #224372;
	--navy-2: #2c5591;
	--blue: #86a4bf;
	--blue-2: #a9c0d6;
	--grey: #d6d7df;
	--paper: #f2f3f5;
	--white: #fff;

	--text: #131a28;
	--muted: #5a6478;
	--line: rgba(34, 67, 114, .14);
	--line-d: rgba(255, 255, 255, .12);
	--check: linear-gradient(100deg, #86a4bf 0%, #224372 100%);
	--focus: #224372;

	--ff-h: 'Montserrat', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
	--ff-b: 'Poppins', 'Avenir', 'Segoe UI', system-ui, sans-serif;

	--r: 14px;
	--r-lg: 24px;
	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-io: cubic-bezier(.65, 0, .35, 1);
	--wrap: 1240px;
	--gut: clamp(20px, 4vw, 48px);
	--sec: clamp(76px, 10vw, 140px);
	--hdr: 76px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 20px); }
body.g-body { margin: 0; font: 400 16px/1.65 var(--ff-b); color: var(--text); background: #fff; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (min-width: 1200px) { body.g-body { font-size: 17px; } }
img, svg, video, iframe { max-width: 100%; display: block; }
.g-ico { width: 1.25em; height: 1.25em; flex: none; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.g-hero, .g-phero, .g-header, .g-footer, .g-menu, .g-sec--dark, .g-sec--navy, .g-sec--deep, .g-sec--cta, .g-ticker, .g-sticky { --focus: #86a4bf; }
::selection { background: var(--navy); color: #fff; }
.g-skip { position: fixed; left: 16px; top: -80px; z-index: 200; background: #fff; color: var(--ink); padding: 12px 18px; border-radius: 10px; font-weight: 600; transition: top .2s; }
.g-skip:focus { top: 12px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.elementor-widget-shortcode .elementor-widget-container, .elementor-widget-html .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.elementor-shortcode { display: block; }
.e-con.g-sc { padding: 0 !important; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; gap: 0; }

/* ---------- layout ---------- */
.g-wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.g-wrap--narrow { width: min(100% - 2 * var(--gut), 780px); }
.g-center { text-align: center; margin-top: clamp(32px, 4vw, 56px); }
.g-empty { color: var(--muted); padding: 40px 0; }
.g-sec { position: relative; padding-block: var(--sec); overflow: clip; isolation: isolate; }
.g-sec--light { background: var(--paper); }
.g-sec--white { background: #fff; }
.g-sec--dark { background: radial-gradient(1100px 620px at 0% 100%, rgba(34, 67, 114, .5), transparent 62%), var(--ink); background-color: #05070d; color: #fff; }
.g-sec--deep { background: radial-gradient(900px 520px at 100% 0%, rgba(44, 85, 145, .45), transparent 60%), linear-gradient(165deg, #0b1a33, #05070d 85%); background-color: #070f1f; color: #fff; }
.g-sec--navy { background: linear-gradient(170deg, #0d2347, #081428); background-color: #0a1a35; color: #fff; }
.g-sec--cta { background: var(--ink); color: #fff; }

.g-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.g-split__side { position: sticky; top: calc(var(--hdr) + 36px); }
.g-split--pay, .g-split--faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }

/* decorative dot grid (brand device) */
.g-dots { position: absolute; z-index: -1; width: 190px; height: 210px; pointer-events: none; opacity: .55;
	background-image: radial-gradient(var(--blue) 1.7px, transparent 2px); background-size: 30px 30px; }
.g-dots--tr { top: 110px; right: 3vw; }
.g-dots--tl { top: 40px; left: 2vw; }
/* hero: peeks out from behind the frame's bottom-right corner, clear of the "Custom ukuran" badge on the left */
.g-dots--br { right: -30px; bottom: -34px; width: 150px; height: 120px; opacity: .45; }
/* section dots live inside the section's top padding (two rows), so they can never sit under a heading; hidden where that padding is too small */
.g-sec > .g-dots { top: 22px; height: 60px; }
@media (max-width: 1099px) { .g-sec > .g-dots { display: none; } }
.g-sec--light .g-dots, .g-sec--white .g-dots { background-image: radial-gradient(var(--navy) 1.7px, transparent 2px); opacity: .18; }

/* ---------- type ---------- */
.g-kicker { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--ff-h); letter-spacing: .18em; text-transform: uppercase; color: var(--navy); margin-bottom: 22px; }
.g-kicker::before { content: ""; width: 34px; height: 2px; background: var(--check); border-radius: 2px; }
.g-sec--dark .g-kicker, .g-sec--deep .g-kicker, .g-sec--navy .g-kicker, .g-sec--cta .g-kicker, .g-phero .g-kicker { color: var(--blue); }
.g-title { font: 300 clamp(32px, 4.6vw, 62px)/1.06 var(--ff-h); letter-spacing: -.025em; color: #5d6678; text-wrap: balance; }
.g-title b { font-weight: 700; color: var(--navy); }
.g-title--xl { font-size: clamp(38px, 5.6vw, 76px); }
.g-sec--dark .g-title, .g-sec--deep .g-title, .g-sec--navy .g-title, .g-sec--cta .g-title { color: var(--grey); }
.g-sec--dark .g-title b, .g-sec--deep .g-title b, .g-sec--navy .g-title b, .g-sec--cta .g-title b { color: var(--blue); }
.g-lead { margin-top: 22px; max-width: 58ch; font-size: clamp(16px, 1.35vw, 19px); color: var(--muted); font-weight: 300; }
.g-sec--dark .g-lead, .g-sec--deep .g-lead, .g-sec--navy .g-lead, .g-sec--cta .g-lead { color: #b4bccb; }
.g-head { margin-bottom: clamp(36px, 5vw, 64px); }
.g-split__side .g-head { margin-bottom: clamp(24px, 3vw, 40px); }

/* ---------- buttons ---------- */
.g-btn { --b-bg: var(--navy); --b-fg: #fff; --b-hv: var(--navy-2);
	position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 999px;
	font: 600 15px/1 var(--ff-h); letter-spacing: .01em; color: var(--b-fg); background: var(--b-bg); overflow: hidden; isolation: isolate;
	transition: transform .25s var(--ease), box-shadow .3s; box-shadow: 0 10px 28px -12px rgba(34, 67, 114, .55); white-space: nowrap; }
.g-btn__bg { position: absolute; inset: 0; background: var(--b-hv); transform: translateY(101%); transition: transform .45s var(--ease); z-index: -1; border-radius: inherit; }
.g-btn__txt { display: inline-flex; align-items: center; gap: 10px; }
.g-btn__ico { width: 20px; height: 20px; flex: none; transition: transform .3s var(--ease); }
.g-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(34, 67, 114, .65); }
.g-btn:hover .g-btn__bg { transform: translateY(0); }
.g-btn:hover .g-btn__ico { transform: translateX(3px); }
.g-btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.g-btn--sm { min-height: 44px; padding: 0 22px; font-size: 14px; }
.g-btn--ghost { --b-bg: transparent; --b-fg: currentColor; --b-hv: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(214, 215, 223, .45); }
.g-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.g-btn--dark { --b-bg: transparent; --b-fg: var(--navy); --b-hv: rgba(34, 67, 114, .08); box-shadow: inset 0 0 0 1.5px var(--navy); }
.g-btn--dark:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.g-btn--light { --b-bg: #fff; --b-fg: var(--ink); --b-hv: var(--blue-2); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); }
/* On dark surfaces the action colour is the brand soft-blue with ink text (7.7:1). */
.g-hero .g-btn--primary, .g-sec--dark .g-btn--primary, .g-sec--deep .g-btn--primary, .g-sec--cta .g-btn--primary, .g-header .g-btn--primary, .g-menu .g-btn--primary, .g-sticky .g-btn--primary, .g-btn--wa {
	--b-bg: var(--blue); --b-fg: var(--ink); --b-hv: #b9cde0; box-shadow: 0 12px 30px -12px rgba(134, 164, 191, .6); }

/* Elementor's frontend CSS says `.elementor a { box-shadow: none }` (specificity 0,1,1), which beats the single-class button rules above and wiped the rings of the
   outline buttons (and every drop shadow) on pages built with Elementor. Same values again, one notch more specific. */
.elementor a.g-btn { box-shadow: 0 10px 28px -12px rgba(34, 67, 114, .55); }
.elementor a.g-btn:hover { box-shadow: 0 16px 34px -12px rgba(34, 67, 114, .65); }
.elementor a.g-btn--ghost { box-shadow: inset 0 0 0 1.5px rgba(214, 215, 223, .45); }
.elementor a.g-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.elementor a.g-btn--dark, .elementor a.g-btn--dark:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.elementor a.g-btn--light { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); }
.elementor .g-hero a.g-btn--primary, .elementor .g-sec--dark a.g-btn--primary, .elementor .g-sec--deep a.g-btn--primary, .elementor .g-sec--cta a.g-btn--primary, .elementor a.g-btn--wa { box-shadow: 0 12px 30px -12px rgba(134, 164, 191, .6); }
.elementor .g-offer a.g-btn { box-shadow: 0 12px 26px -10px rgba(255, 198, 26, .6); }

/* ---------- scroll progress ---------- */
.g-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.g-progress i { display: block; height: 100%; background: var(--check); transform: scaleX(0); transform-origin: left; }
.admin-bar .g-progress { top: 32px; }

/* ---------- header ---------- */
.g-header { position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--hdr); color: #fff; transition: transform .5s var(--ease), background .35s, box-shadow .35s; }
.admin-bar .g-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .g-header { top: 46px; } .admin-bar .g-progress { top: 46px; } }
.g-header.is-stuck { background: rgba(5, 7, 13, .78); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.g-header.is-hidden { transform: translateY(-110%); }
.g-header__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.g-logo img { width: auto; height: 40px; }
.g-nav { margin-left: auto; }
.g-nav__list { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.g-nav__list a { position: relative; display: inline-block; padding: 10px 0; font: 500 14.5px/1 var(--ff-h); color: #d6d7df; transition: color .2s; }
.g-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--check); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.g-nav__list a:hover, .g-nav__list a[aria-current] { color: #fff; }
.g-nav__list a:hover::after, .g-nav__list a[aria-current]::after { transform: scaleX(1); }
.g-header__tools { display: flex; align-items: center; gap: 14px; }
.g-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .09); }
.g-lang a { min-width: 40px; height: 34px; display: grid; place-items: center; border-radius: 999px; font: 600 12px/1 var(--ff-h); letter-spacing: .08em; color: #b4bccb; transition: background .2s, color .2s; }
.g-lang a:hover { color: #fff; }
.g-lang a.is-on { background: #fff; color: var(--ink); }
.g-burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .09); position: relative; }
.g-burger i { position: absolute; left: 14px; right: 14px; height: 2px; background: #fff; border-radius: 2px; transition: transform .45s var(--ease), top .45s var(--ease); }
.g-burger i:nth-child(1) { top: 19px; } .g-burger i:nth-child(2) { top: 26px; }
.g-burger[aria-expanded="true"] i:nth-child(1) { top: 22px; transform: rotate(45deg); }
.g-burger[aria-expanded="true"] i:nth-child(2) { top: 22px; transform: rotate(-45deg); }
@media (max-width: 1099px) { .g-nav { display: none; } .g-burger { display: block; } .g-header__tools { margin-left: auto; } }
@media (max-width: 639px) { .g-header__cta { display: none; } .g-logo img { height: 34px; } }

/* ---------- mobile menu ---------- */
.g-menu { position: fixed; inset: 0; z-index: 80; color: #fff; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io), visibility 0s .7s; overflow-y: auto; }
.g-menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-io), visibility 0s; }
.g-menu__bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 600px at 0% 100%, rgba(34, 67, 114, .7), transparent 60%), var(--ink); }
.g-menu__in { min-height: 100%; padding-top: calc(var(--hdr) + 28px); padding-bottom: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.g-menu__list a { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line-d); opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.g-menu.is-open .g-menu__list a { opacity: 1; transform: none; }
.g-menu.is-open .g-menu__list li:nth-child(1) a { transition-delay: .25s; } .g-menu.is-open .g-menu__list li:nth-child(2) a { transition-delay: .31s; }
.g-menu.is-open .g-menu__list li:nth-child(3) a { transition-delay: .37s; } .g-menu.is-open .g-menu__list li:nth-child(4) a { transition-delay: .43s; }
.g-menu.is-open .g-menu__list li:nth-child(5) a { transition-delay: .49s; } .g-menu.is-open .g-menu__list li:nth-child(6) a { transition-delay: .55s; }
.g-menu__n { font: 500 13px var(--ff-h); color: var(--blue); }
.g-menu__t { font: 300 clamp(34px, 9vw, 64px)/1.1 var(--ff-h); letter-spacing: -.02em; }
.g-menu__foot { display: grid; gap: 14px; color: #b4bccb; font-size: 15px; }
.g-menu__foot .g-btn { justify-self: start; }
body.g-lock { overflow: hidden; }

/* ---------- hero ---------- */
.g-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr) + 48px) 0 96px; color: #fff; background: var(--ink); overflow: clip; isolation: isolate; }
.g-hero__bg { position: absolute; inset: 0; z-index: -3; background: var(--ink) var(--facade) center / cover no-repeat; }
.g-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 13, .55) 0%, rgba(5, 7, 13, .35) 40%, rgba(5, 7, 13, .9) 100%); }
.g-hero__glow { position: absolute; z-index: -2; left: -24%; bottom: -38%; width: 90vw; height: 90vw; max-width: 1300px; max-height: 1300px; background: radial-gradient(closest-side, rgba(34, 67, 114, .8), rgba(34, 67, 114, 0)); pointer-events: none; }
.g-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.g-eyebrow { font: 600 clamp(17px, 1.7vw, 23px)/1.3 var(--ff-h); color: var(--grey); margin-bottom: 26px; }
.g-eyebrow span { color: var(--blue); font-weight: 700; }
.g-hero__title { font: 300 clamp(38px, 5.3vw, 80px)/1.04 var(--ff-h); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.g-hero__title b { font-weight: 700; color: var(--blue); }
.g-hero__sub { margin-top: 28px; max-width: 50ch; font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; color: #c3cada; }
.g-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.g-chips { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 40px; font-size: 14px; color: #cfd5e2; }
.g-chips li { display: inline-flex; align-items: center; gap: 10px; }
.g-chip__ck { width: 24px; height: 24px; border-radius: 50%; background: var(--check); display: inline-grid; place-items: center; flex: none; }
.g-chip__ck svg { width: 14px; height: 14px; color: #fff; stroke-width: 2.4; }
.g-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; font: 500 11px var(--ff-h); letter-spacing: .22em; text-transform: uppercase; color: #8e97ab; }
.g-scroll i { width: 1.5px; height: 44px; background: linear-gradient(var(--blue), transparent); transform-origin: top; animation: gscroll 2.4s var(--ease-io) infinite; }
@keyframes gscroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* the "window that opens" */
.g-scene { position: relative; aspect-ratio: 5 / 4; perspective: 1500px; justify-self: end; width: 100%; max-width: 720px; }
.g-scene__frame { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(135deg, #eceef3, #9a9ca8 46%, #d3d5dd); box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .35); transform-style: preserve-3d; }
.g-scene__view { position: absolute; inset: 14px; overflow: hidden; background: #0c121f; touch-action: pan-y; }
/* The pictures behind the window. The container carries the opening effect (dim and slightly enlarged, then clear and settled, driven by GSAP);
   each slide only cross-fades and drifts a few percent in the direction of travel (--dx is set by gerha.js). */
.g-slides { position: absolute; inset: 0; transform: scale(1.1); }
.js .g-slides { filter: brightness(.35); }
.g-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(var(--dx, 3%)) scale(1.04); pointer-events: none; transition: opacity .55s var(--ease-io), transform .85s var(--ease); }
.g-slide.is-on { opacity: 1; transform: none; }
.g-slide.is-leave { opacity: 0; transform: translateX(calc(var(--dx, 3%) * -.6)) scale(1.02); }
.g-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* picture switcher: progress segments + pause, inside the glass at the bottom centre; it appears once the window has opened */
.g-scene__nav { position: absolute; z-index: 5; left: 50%; bottom: 16px; transform: translateX(-50%); display: none; align-items: center; padding: 0 10px 0 4px; border-radius: 999px; background: rgba(5, 7, 13, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-d); opacity: 0; visibility: hidden; transition: opacity .7s, visibility 0s linear .7s; --focus: #86a4bf; }
.js .g-scene__nav { display: flex; }
.g-scene.is-ready .g-scene__nav { opacity: 1; visibility: visible; transition: opacity .7s; }   /* hidden (and out of the tab order) until the window has opened */
.g-pp { width: 40px; height: 44px; display: grid; place-items: center; color: #fff; border-radius: 999px; }
.g-pp svg { width: 16px; height: 16px; }
.g-pp .g-pp__play { display: none; }
.g-pp[aria-pressed="true"] .g-pp__pause { display: none; } .g-pp[aria-pressed="true"] .g-pp__play { display: block; }
.g-scene.is-static .g-pp { display: none; }
.g-seg { position: relative; width: 38px; height: 44px; display: grid; place-items: center; border-radius: 8px; }
.g-seg::before { content: ""; width: 28px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .32); transition: background .3s; }
.g-seg:hover::before { background: rgba(255, 255, 255, .6); }
.g-seg i { position: absolute; left: 5px; top: 50%; width: 28px; height: 4px; margin-top: -2px; border-radius: 4px; background: #fff; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.g-seg.is-done i, .g-scene.is-static .g-seg.is-on i { transform: scaleX(1); }
.g-scene.is-play .g-seg.is-on i { animation: gseg var(--dur, 3.5s) linear forwards; }
.g-scene.is-hold .g-seg.is-on i { animation-play-state: paused; }
@keyframes gseg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.g-scene__badge [data-slide-label] { display: inline-block; transition: opacity .25s, transform .25s var(--ease); }
.g-scene__badge [data-slide-label].is-swap { opacity: 0; transform: translateY(6px); }
.g-scene--multi .g-scene__badge { bottom: 84px; }
.g-sash { position: absolute; top: 14px; bottom: 14px; width: calc(50% - 14px); overflow: hidden; background: linear-gradient(140deg, rgba(228, 232, 240, .28), rgba(9, 16, 30, .78)); border: 11px solid #d9dbe3; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18), 0 0 30px rgba(0, 0, 0, .35); backface-visibility: hidden; }
/* The light glint is a child of the sash: the sash clips it to the glass (inside the frame border), it turns with the sash,
   and it can never spill onto the frame, the mullion or the page. GSAP drives it (see the hero timeline in gerha.js). */
.g-glint { position: absolute; top: -25%; bottom: -25%; left: 0; width: 56%; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .07) 16%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .07) 84%, rgba(255, 255, 255, 0) 100%); }
.g-sash::after { content: ""; position: absolute; top: 50%; width: 5px; height: 54px; margin-top: -27px; border-radius: 3px; background: linear-gradient(#f5f6f9, #8e93a2); }
.g-sash--l { left: 14px; transform-origin: left center; } .g-sash--l::after { right: 10px; }
.g-sash--r { right: 14px; transform-origin: right center; } .g-sash--r::after { left: 10px; }
.js .g-sash { animation: gsashfb .01s linear 3.4s forwards; }
html:not(.js) .g-sash--l { transform: rotateY(-108deg); } html:not(.js) .g-sash--r { transform: rotateY(108deg); }
@keyframes gsashfb { to { transform: rotateY(var(--ry, -108deg)); } }
.g-sash--r { --ry: 108deg; }
.js .g-slides { animation: gimgfb .01s linear 3.4s forwards; }
/* The two safety nets above only exist for "JS is on but GSAP never started". Once GSAP runs they must not fire (on a slow phone the timeline
   can still be running at 3.4s and the net would snap the window open mid-swing). */
.g-scene.is-anim .g-sash, .g-scene.is-anim .g-slides { animation: none; }
@keyframes gimgfb { to { filter: none; transform: none; } }
.g-scene__badge { position: absolute; left: -22px; bottom: 36px; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: 999px; background: rgba(5, 7, 13, .78); backdrop-filter: blur(12px); border: 1px solid var(--line-d); font: 600 14px var(--ff-h); color: #fff; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7); }
.g-scene__mark { position: absolute; right: -14px; top: -34px; width: 92px; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }

/* ---------- limited offer: sticker on the hero window + the door that swings open ---------- */
.g-offer-tag { position: absolute; z-index: 6; left: -10px; top: -26px; display: grid; justify-items: start; transform: rotate(-6deg); transform-origin: left bottom; cursor: pointer; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)); animation: gtagin .9s var(--ease) 3.1s both; transition: transform .35s var(--ease); }
.g-offer-tag:hover, .g-offer-tag:focus-visible { transform: rotate(-3deg) scale(1.06); }
.g-offer-tag__red { padding: 9px 15px 8px; border-radius: 9px 9px 0 0; border: 2px solid #fff; border-bottom: 0; background: linear-gradient(180deg, #e5252b, #b3121a); color: #fff; font: 800 13px/1 var(--ff-h); letter-spacing: .06em; text-transform: uppercase; }
.g-offer-tag__gold { padding: 8px 15px 9px; border-radius: 0 0 9px 9px; border: 2px solid #fff; border-top: 0; background: linear-gradient(180deg, #ffe27a, #ffb400); color: #0b1a33; font: 700 12.5px/1 var(--ff-h); }
@keyframes gtagin { from { opacity: 0; transform: translateY(-14px) rotate(-14deg) scale(.9); } }
@media (max-width: 960px) { .g-offer-tag { left: 4px; top: -20px; } }
@media (prefers-reduced-motion: reduce) { .g-offer-tag { animation: none; } }

.g-offer { --dw: min(400px, calc(100vw - 28px)); --dh: min(calc(var(--dw) / .62), calc(100dvh - 24px)); width: var(--dw); height: var(--dh); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; --focus: #86a4bf; }
.g-offer:focus { outline: 0; }
.g-offer::backdrop { background: rgba(5, 7, 13, .78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.g-offer__door { position: relative; container-type: inline-size; width: 100%; height: 100%; padding: 12px; border-radius: 10px 10px 4px 4px; background: linear-gradient(135deg, #f4f5f8, #aab0bf 52%, #e6e8ee); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .55); transform-origin: left center; }
.g-offer[open] .g-offer__door { animation: gdoor 1s var(--ease) both; }
@keyframes gdoor { from { opacity: 0; transform: perspective(1400px) rotateY(-88deg); } 45% { opacity: 1; } to { opacity: 1; transform: perspective(1400px) rotateY(0); } }
.g-offer__hinge { position: absolute; left: -2px; width: 6px; height: 40px; border-radius: 2px; background: linear-gradient(90deg, #8b91a1, #eceef3, #8b91a1); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.g-offer__hinge:nth-of-type(1) { top: 12%; } .g-offer__hinge:nth-of-type(2) { top: 48%; } .g-offer__hinge:nth-of-type(3) { top: 82%; }
.g-offer__handle { position: absolute; right: 2px; top: 50%; width: 7px; height: 64px; margin-top: -32px; border-radius: 4px; background: linear-gradient(#f4f5f8, #8b91a1); box-shadow: 0 2px 5px rgba(0, 0, 0, .4); }
.g-offer__x { position: absolute; right: 20px; top: 20px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(5, 7, 13, .6); transition: background .2s; }
.g-offer__x:hover { background: rgba(5, 7, 13, .85); }
.g-offer__x svg { width: 20px; height: 20px; }
.g-offer__leaf { height: 100%; display: grid; grid-template-rows: 1.12fr .8fr 1fr; gap: 3.2cqw; padding: 3.6cqw; overflow: auto; overscroll-behavior: contain; border-radius: 4px; background: radial-gradient(120% 60% at 50% 0%, #2c5591 0%, #17305a 45%, #0b1a33 100%); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 0 40px rgba(0, 0, 0, .45); }
.g-offer__panel { display: grid; place-items: center; align-content: center; gap: 2.4cqw; padding: 3cqw; text-align: center; border-radius: 4px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 3px 3px 10px rgba(0, 0, 0, .35), inset -2px -2px 6px rgba(255, 255, 255, .06); }
.g-offer__stamp { position: relative; display: grid; justify-items: start; margin-top: 1cqw; }
.g-offer__l1, .g-offer__l2 { display: block; font-family: var(--ff-h); font-weight: 800; line-height: 1; text-transform: uppercase; border-radius: 1.4cqw; }
.g-offer__l1 { padding: 1.7cqw 4.4cqw; font-size: 9.4cqw; color: #fff; background: linear-gradient(180deg, #e5252b, #b3121a); border: .6cqw solid #fff; box-shadow: 0 .9cqw 0 #7d0b10, 0 2.2cqw 3.2cqw rgba(0, 0, 0, .5); transform: skewX(-9deg) rotate(-3deg); }
.g-offer__l2 { margin: -.4cqw 0 0 4.5cqw; padding: 1.4cqw 5.4cqw; font-size: 11.6cqw; color: #0b1a33; background: linear-gradient(180deg, #ffe27a, #ffb400); border: .6cqw solid #fff; box-shadow: 0 .9cqw 0 #a96a00, 0 2.2cqw 3.2cqw rgba(0, 0, 0, .5); transform: skewX(-9deg) rotate(-3deg); }
.g-offer__clock { position: absolute; right: -9cqw; top: -4.4cqw; z-index: 1; width: 11cqw; height: 11cqw; display: grid; place-items: center; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, #ff5a5f, #c1121a); border: .7cqw solid #ffd34d; box-shadow: 0 1.4cqw 2.4cqw rgba(0, 0, 0, .5); }
.g-offer__clock svg { width: 62%; height: 62%; stroke-width: 2; }
.g-offer__item { font: 800 6.6cqw/1.1 var(--ff-h); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.g-offer__item b { color: var(--blue-2); font-weight: 800; }
.g-offer__price { display: flex; align-items: flex-end; justify-content: center; gap: 1.2cqw; line-height: 1; }
.g-offer__cur, .g-offer__unit { font: 800 8cqw/1 var(--ff-h); color: #ffd34d; padding-bottom: 2.6cqw; }
.g-offer__amt { font: 800 25cqw/.9 var(--ff-h); letter-spacing: -.04em; background: linear-gradient(180deg, #fff2b3, #ffc61a 55%, #f09a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1cqw 0 rgba(122, 74, 0, .95)) drop-shadow(0 2.2cqw 2.4cqw rgba(0, 0, 0, .5)); }
.g-offer__sub { display: inline-block; padding: 1.7cqw 5cqw; font: 800 5cqw/1 var(--ff-h); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #e5252b, #b3121a); border-bottom: .8cqw solid #ffc61a; transform: skewX(-9deg); box-shadow: 0 1.6cqw 2.4cqw rgba(0, 0, 0, .4); }
.g-offer__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw; }
.g-offer__chips li { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.5cqw 2.6cqw; border-radius: 999px; background: #fff; color: #0b1a33; font: 600 3.2cqw/1.1 var(--ff-h); }
.g-offer__chips svg { width: 4.2cqw; height: 4.2cqw; flex: none; color: var(--navy); }
.g-offer .g-btn { --b-bg: #ffc61a; --b-fg: #0b1a33; --b-hv: #ffd75a; width: 100%; min-height: 50px; padding: 0 18px; font-size: 15px; box-shadow: 0 12px 26px -10px rgba(255, 198, 26, .6); }
.g-offer__later { padding: 6px 14px; min-height: 32px; font: 500 13px var(--ff-h); color: #b4bccb; text-decoration: underline; text-underline-offset: 3px; }
.g-offer__later:hover { color: #fff; }
.g-offer__panel--low { gap: 2.2cqw; }

/* ---------- ticker ---------- */
.g-ticker { background: var(--ink); color: #fff; border-block: 1px solid var(--line-d); overflow: hidden; padding: 22px 0; }
.g-ticker__track { display: flex; width: max-content; animation: gtick 46s linear infinite; }
.g-ticker:hover .g-ticker__track { animation-play-state: paused; }
.g-ticker__list { display: flex; flex: none; align-items: center; }
.g-ticker__list li { display: inline-flex; align-items: center; gap: 36px; padding-right: 36px; }
.g-ticker__list span { font: 300 clamp(24px, 3.2vw, 44px)/1 var(--ff-h); letter-spacing: -.01em; color: var(--grey); white-space: nowrap; }
.g-ticker__list img { width: 46px; height: auto; opacity: .95; }
@keyframes gtick { to { transform: translateX(-50%); } }

/* ---------- stats ---------- */
.g-stats { background: #fff; padding-block: clamp(44px, 6vw, 80px); }
.g-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.g-stat { padding: 8px clamp(14px, 3vw, 40px); border-left: 1px solid var(--line); }
.g-stat:first-child { border-left: 0; padding-left: 0; }
.g-stat__v { display: block; font: 700 clamp(40px, 5.4vw, 74px)/1 var(--ff-h); letter-spacing: -.03em; color: var(--navy); }
.g-stat__v--txt { display: flex; align-items: center; min-height: clamp(40px, 5.4vw, 74px); font-size: clamp(30px, 3.9vw, 54px); }
.g-stat__l { display: block; margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.45; max-width: 22ch; }

/* ---------- why UPVC ---------- */
.g-photo { position: relative; overflow: hidden; border-radius: var(--r-lg); margin-top: 36px; }
.g-photo img { width: 100%; height: 100%; object-fit: cover; }
.g-photo--tall { aspect-ratio: 4 / 4.6; }
.g-photo--tall img { object-position: 50% 38%; }   /* when the box turns landscape on tablets/phones, keep the roof of the house in frame */
.g-photo__grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13, 35, 71, .65)); }
.g-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g-why__card { position: relative; padding: 34px 30px 32px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; overflow: hidden; }
.g-why__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(34, 67, 114, .4); border-color: rgba(34, 67, 114, .3); }
.g-why__card:last-child { grid-column: 1 / -1; }
.g-why__n { position: absolute; right: 22px; top: 10px; }
.g-why__n::after, .g-step__n::after, .g-pay__n::after { content: attr(data-n); }
.g-why__n::after { font: 800 64px/1 var(--ff-h); color: rgba(34, 67, 114, .07); }
.g-icon { width: 54px; height: 54px; border-radius: 15px; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 24px -10px rgba(34, 67, 114, .6); }
.g-icon svg { width: 27px; height: 27px; }
.g-why__card h3 { margin-top: 24px; font: 700 20px/1.25 var(--ff-h); color: var(--navy); }
.g-why__card p { margin-top: 10px; color: var(--muted); font-size: 15.5px; max-width: 42ch; }

/* ---------- numbered pins (shared: material cut-away, logo meaning) ---------- */
.g-pin { --pin-bg: var(--blue); --pin-fg: var(--ink); --pin-ring: #fff; position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; }
.g-pin::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid var(--pin-bg); animation: gpulse 2.6s ease-out infinite; }
.g-pin__dot { position: relative; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--pin-bg); color: var(--pin-fg); border: 2px solid var(--pin-ring); font: 700 12px/1 var(--ff-h); box-shadow: 0 6px 14px rgba(0, 0, 0, .45); transition: transform .35s var(--ease), background .25s, color .25s; }
.g-pin:hover .g-pin__dot, .g-pin.is-on .g-pin__dot { transform: scale(1.22); background: var(--pin-on-bg, #fff); color: var(--pin-on-fg, var(--ink)); }
.g-pin.is-on::before { border-width: 2.5px; animation-duration: 1.5s; }
@keyframes gpulse { 0% { transform: scale(.7); opacity: .95; } 100% { transform: scale(1.8); opacity: 0; } }
.g-pm { transition: opacity .35s var(--ease), background .3s, border-color .3s; }
[data-pinmap][data-active] .g-pm:not(.is-on) { opacity: .4; }

/* ---------- material: real cut-away photo with direct callouts ---------- */
.g-mat__stage { position: relative; }
.g-mat__fig { position: relative; margin: 0 auto; width: min(100%, 300px); aspect-ratio: var(--ar, 840 / 1554); }
.g-mat__fig::before { content: ""; position: absolute; inset: -4% -70%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(134, 164, 191, .3), rgba(134, 164, 191, .08) 58%, transparent); }
.g-mat__fig img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .6)); }
.g-mat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g-mat__lines { display: none; }
.g-mat__co { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-d); }
.g-mat__co.is-on { background: rgba(134, 164, 191, .16); border-color: rgba(134, 164, 191, .55); }
.g-mat__n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: var(--ink); font: 700 13px/1 var(--ff-h); }
.g-mat__txt h3 { font: 600 17px/1.3 var(--ff-h); color: #fff; padding-top: 4px; }
.g-mat__txt p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; font-weight: 300; color: #b4bccb; }
.g-mat__note { margin-top: clamp(22px, 3vw, 36px); font-size: 13px; line-height: 1.6; color: #8e97ab; max-width: 62ch; }
@media (min-width: 720px) and (max-width: 1099px) {
	.g-mat__stage { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 56px); align-items: center; }
	.g-mat__fig { width: min(100%, 320px); }
}
@media (max-width: 719px) {
	.g-mat__fig { width: min(72%, 260px); margin-bottom: 26px; }
	.g-mat__co { padding: 14px 16px; border-radius: 16px; }
	.g-mat__txt h3 { font-size: 16px; }
	.g-mat__txt p { font-size: 14px; }
}
@media (min-width: 1100px) {
	.g-mat__stage { aspect-ratio: 1000 / 520; }
	.g-mat__fig { position: absolute; left: var(--fl); top: var(--ft); width: var(--fw); height: var(--fh); margin: 0; aspect-ratio: auto; }
	.g-mat__lines { display: block; position: absolute; inset: 0; pointer-events: none; }
	.g-mat__ln { position: absolute; top: var(--y); left: var(--x1); width: var(--w); height: 0; border-top: 1.5px solid rgba(134, 164, 191, .72); }
	.g-mat__ln::before { content: ""; position: absolute; top: -4.25px; width: 7px; height: 7px; background: var(--blue); }
	.g-mat__ln--l { transform-origin: left center; } .g-mat__ln--l::before { left: -1px; }
	.g-mat__ln--r { transform-origin: right center; } .g-mat__ln--r::before { right: -1px; }
	.g-mat__ln.is-on { border-top-color: #fff; } .g-mat__ln.is-on::before { background: #fff; }
	.g-mat__list { display: block; position: absolute; inset: 0; pointer-events: none; }
	.g-mat__co { position: absolute; top: var(--y); width: var(--col); transform: translateY(-50%); padding: 0; background: none; border: 0; border-radius: 0; pointer-events: auto; }
	.g-mat__co--l { left: 0; grid-template-columns: minmax(0, 1fr) 30px; text-align: right; padding-right: 12px; }
	.g-mat__co--l .g-mat__n { order: 2; }
	.g-mat__co--r { right: 0; padding-left: 12px; }
	.g-mat__co.is-on, .g-mat__co { background: none; border-color: transparent; }
	.g-mat__co.is-on .g-mat__txt h3 { color: var(--blue-2); }
	.g-mat__txt h3 { font-size: clamp(16px, 1.45vw, 19px); }
	.g-mat__txt p { font-size: clamp(13.5px, 1.1vw, 14.5px); }
	.js .g-mat__stage.is-in .g-mat__ln { animation: gline .9s var(--ease) both; animation-delay: calc(.55s + var(--i) * .14s); }
	.js .g-mat__stage.is-in .g-mat__co { animation: gco .8s var(--ease) both; animation-delay: calc(.4s + var(--i) * .14s); }
	.js .g-mat__stage.is-in .g-pin { animation: gpin .6s var(--ease) both; animation-delay: calc(.9s + var(--i, 0) * .1s); }
}
.js .g-mat__stage.is-in .g-pin { animation: gpin .6s var(--ease) both; animation-delay: calc(.5s + var(--i, 0) * .1s); }
@keyframes gline { from { transform: scaleX(0); } }
@keyframes gco { from { opacity: 0; translate: 0 10px; } }
@keyframes gpin { from { opacity: 0; scale: .4; } }

/* ---------- comparison ---------- */
.g-cmp__wrap { overflow: visible; }
/* Every cell is its own rounded tile (same 14px radius, 8px gutters), so the header row, the row labels and the
   highlighted UPVC column all read as one family instead of a mix of rounded and square ends. */
.g-cmp__table { width: calc(100% + 16px); min-width: 0; margin: -8px; border-collapse: separate; border-spacing: 8px; table-layout: fixed; }
.g-cmp__table thead th, .g-cmp__table tbody th, .g-cmp__table td { border-radius: 14px; }
.g-cmp__table thead td { background: none; padding: 0; }
.g-cmp__table thead th { padding: 22px 20px; font: 700 14px var(--ff-h); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); background: rgba(255, 255, 255, .07); }
.g-cmp__table thead th.is-upvc { color: var(--ink); background: var(--blue); box-shadow: 0 14px 30px -14px rgba(134, 164, 191, .55); }
.g-cmp__star { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; vertical-align: -5px; border-radius: 50%; background: var(--ink); color: var(--blue); }
.g-cmp__star svg { width: 13px; height: 13px; stroke-width: 2.6; }
.g-cmp__table tbody th { width: 17%; padding: 20px; text-align: left; font: 600 14px/1.4 var(--ff-h); color: #fff; background: rgba(5, 7, 13, .5); }
.g-cmp__table td { padding: 20px; font-size: 14.5px; line-height: 1.55; color: #aab2c3; background: rgba(255, 255, 255, .05); vertical-align: middle; }
.g-cmp__table td.is-upvc { color: #fff; font-weight: 600; background: rgba(134, 164, 191, .2); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* ---------- filter chips ---------- */
.g-filter { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; margin-bottom: 36px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.g-filter button { position: relative; z-index: 1; min-height: 44px; padding: 0 24px; border-radius: 999px; font: 600 14px var(--ff-h); color: var(--navy); transition: color .3s; }
.g-filter button.is-on { color: #fff; }
.g-filter__ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: 0; border-radius: 999px; background: var(--navy); transition: transform .5s var(--ease), width .5s var(--ease); }
.g-sec--white .g-filter { background: var(--paper); }

/* ---------- product cards ---------- */
.g-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 26px; }
.g-pcard { background: #fff; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.g-pcard.is-hide { display: none; }
.g-pcard:hover { transform: translateY(-8px); box-shadow: 0 34px 64px -30px rgba(34, 67, 114, .5); }
.g-pcard__link { display: block; }
.g-pcard__media { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; background: #dfe3ec; }
.g-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.g-pcard:hover .g-pcard__media img { transform: scale(1.07); }
.g-pcard__grad { position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(13, 35, 71, .55)); pointer-events: none; }
.g-pcard__tag { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 7px 14px; border-radius: 999px; background: rgba(5, 7, 13, .72); backdrop-filter: blur(8px); color: #fff; font: 600 11.5px var(--ff-h); letter-spacing: .1em; text-transform: uppercase; }
.g-pcard__body { padding: 24px 26px 28px; }
.g-pcard__body h3 { font: 700 20px/1.25 var(--ff-h); color: var(--navy); }
.g-pcard__body p { margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.g-pcard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 600 13.5px var(--ff-h); color: var(--navy); }
.g-pcard__more svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.g-pcard:hover .g-pcard__more svg, .g-post:hover .g-pcard__more svg { transform: translateX(5px); }
.g-soon { display: grid; justify-items: center; gap: 14px; max-width: 620px; margin: 8px auto 0; padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 48px); text-align: center; border-radius: var(--r-lg); background: #fff; border: 1.5px dashed rgba(34, 67, 114, .3); }
.g-soon[hidden] { display: none; }
.g-soon h3 { font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--ff-h); color: var(--navy); }
.g-soon p { color: var(--muted); max-width: 44ch; margin-bottom: 8px; }

/* ---------- colour configurator ---------- */
.g-colors__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.g-colors__tabs { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.g-colors__tabs button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; font: 600 14px var(--ff-h); color: #b4bccb; transition: background .3s, color .3s; }
.g-colors__tabs button svg { width: 19px; height: 19px; }
.g-colors__tabs button.is-on { background: #fff; color: var(--ink); }
.g-prev { --tile: 112px; container-type: inline-size; position: relative; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #e2e4ea; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.g-prev__wall { position: absolute; inset: 0; background: radial-gradient(75% 65% at 50% 40%, #cdd3df, #aeb7c8 80%), #b8c0d0; }
.g-prev__wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(#9aa4b8, #8892a8); }
.g-prev__frame, .g-prev__sash, .g-prev__dframe, .g-prev__leaf { background-color: var(--hex); background-image: var(--tex); background-size: var(--tile); background-position: 0 0; }
@supports (width: 1cqw) { .g-prev { --tile: 17cqw; } }
.g-prev__win { position: absolute; left: 50%; top: 46%; width: 60%; transform: translate(-50%, -50%); transition: transform .5s var(--ease); }
.g-prev__frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3.4%; aspect-ratio: 1.2 / 1; padding: 3.4%; border-radius: 4px; box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .16), inset 0 0 26px rgba(0, 0, 0, .28); }
.g-prev__sash { padding: 5.5%; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .2), inset 0 0 12px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .06); }
.g-prev__glass { display: block; position: relative; overflow: hidden; height: 100%; background: linear-gradient(158deg, #d5e4f1 0%, #a2bbd4 38%, #e3ecf5 60%, #7f9dbd 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 6px 14px rgba(0, 0, 0, .12); }
.g-prev__glass::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%); transform: translateX(-30%); transition: transform 1.2s var(--ease); }
.g-prev:hover .g-prev__glass::after { transform: translateX(30%); }
.g-prev__handle { position: absolute; left: 50%; top: 50%; width: 1.2%; height: 14%; transform: translate(-50%, -50%); border-radius: 3px; background: linear-gradient(#f4f5f8, #8b91a1); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.g-prev__sill { height: 4.5%; margin: 1.2% -3% 0; border-radius: 3px; background: linear-gradient(#f2f3f6, #b7bcc8); box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .35); aspect-ratio: auto; padding-bottom: 3.5%; }
.g-prev__door { position: absolute; left: 50%; top: 52%; width: 31%; transform: translate(-50%, -50%); display: none; }
.g-prev__dframe { position: relative; aspect-ratio: .46 / 1; padding: 6%; border-radius: 4px; box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .16), inset 0 0 26px rgba(0, 0, 0, .28); }
.g-prev__leaf { position: relative; height: 100%; padding: 12% 11%; display: grid; grid-template-rows: 1fr 1fr 1.2fr; gap: 6%; border-radius: 2px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .22), inset 0 0 14px rgba(0, 0, 0, .3); }
.g-prev__panel { display: block; border-radius: 2px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25), inset 3px 3px 8px rgba(0, 0, 0, .25), inset -2px -2px 5px rgba(255, 255, 255, .12); }
.g-prev__panel--w { background: linear-gradient(158deg, #d5e4f1, #9fb9d3 45%, #e3ecf5 62%, #7f9dbd); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25); }
.g-prev__dhandle { position: absolute; right: 7%; top: 52%; width: 6%; height: 4%; border-radius: 3px; background: linear-gradient(#f4f5f8, #8b91a1); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.g-prev.is-door .g-prev__win { display: none; } .g-prev.is-door .g-prev__door { display: block; }
.g-prev.pop .g-prev__win, .g-prev.pop .g-prev__door { animation: gpop .6s var(--ease); }
@keyframes gpop { 0% { filter: brightness(1.25); transform: translate(-50%, -50%) scale(.985); } 100% { filter: none; transform: translate(-50%, -50%) scale(1); } }
.g-colors__tabs[hidden] { display: none; }
.g-prev__photo { position: absolute; inset: 0; z-index: 2; margin: 0; background: #eef0f4; }
.g-prev__photo[hidden] { display: none; }
.g-prev__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease); }
.g-prev__photo.is-swap img { opacity: 0; }
.g-prev.has-photo .g-prev__wall, .g-prev.has-photo .g-prev__win, .g-prev.has-photo .g-prev__door { display: none; }
.g-colors__note { margin-top: 14px; font-size: 13px; color: #8e97ab; max-width: 60ch; }
.g-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.g-swatch { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1.5px solid var(--line-d); background: rgba(255, 255, 255, .03); text-align: left; transition: border-color .3s, background .3s, transform .35s var(--ease); }
.g-swatch:hover { transform: translateY(-3px); border-color: rgba(134, 164, 191, .6); }
.g-swatch__dot { width: 52px; height: 52px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 8px 16px -6px rgba(0, 0, 0, .6); transition: box-shadow .3s; }
.g-swatch__name { font: 600 14.5px/1.25 var(--ff-h); color: #d6d7df; }
.g-swatch.is-on { border-color: var(--blue); background: rgba(134, 164, 191, .14); }
.g-swatch.is-on .g-swatch__dot { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--blue); }
.g-swatch.is-on .g-swatch__name { color: #fff; }
.g-colors__info { margin-top: 28px; min-height: 120px; }
.g-colors__info h3 { font: 700 clamp(26px, 3vw, 38px)/1.1 var(--ff-h); color: #fff; }
.g-colors__info p { margin-top: 10px; color: #b4bccb; max-width: 44ch; font-weight: 300; }
.g-colors__cta { margin-top: 24px; }

/* ---------- projects ---------- */
.g-pj { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #0b1a33; }
.g-pj.is-hide { display: none; }
.g-pj__link { position: relative; display: block; height: 100%; color: #fff; }
.g-pj img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 1.2s var(--ease); }
.g-pj:hover img { transform: scale(1.07); }
.g-pj__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 13, 0) 28%, rgba(11, 26, 51, .72) 60%, rgba(11, 26, 51, .96)); }
.g-pj__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 26px 24px; display: grid; gap: 8px; }
.g-pj__meta { font: 600 11.5px var(--ff-h); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-2); }
.g-pj__body h3 { font: 600 clamp(17px, 1.5vw, 21px)/1.25 var(--ff-h); text-wrap: balance; }
.g-pj__go { position: absolute; right: 18px; top: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); opacity: 0; transform: scale(.7) rotate(-20deg); transition: opacity .35s, transform .5s var(--ease); }
.g-pj__go svg { width: 20px; height: 20px; }
.g-pj:hover .g-pj__go, .g-pj__link:focus-visible .g-pj__go { opacity: 1; transform: none; }
.g-pjgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.g-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; padding-inline: max(var(--gut), calc((100% - var(--wrap)) / 2)); scroll-padding-inline: max(var(--gut), calc((100% - var(--wrap)) / 2)); overscroll-behavior-x: contain; }
.g-rail::-webkit-scrollbar { display: none; }
.g-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.g-rail.is-drag a { pointer-events: none; }
.g-rail__track { display: flex; gap: 22px; width: max-content; }
.g-pj--rail { flex: 0 0 min(80vw, 460px); scroll-snap-align: start; }
.g-pj--rail img { aspect-ratio: 4 / 4.8; }
.g-rail__ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.g-rail__hint { display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--ff-h); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.g-rail__hint svg { width: 18px; height: 18px; }
.g-rail__btns { display: flex; gap: 10px; }
.g-circle { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--navy); color: var(--navy); transition: background .3s, color .3s, transform .3s var(--ease); }
.g-circle svg { width: 22px; height: 22px; }
.g-circle:hover { background: var(--navy); color: #fff; transform: scale(1.06); }

/* ---------- customer reviews ---------- */
.g-circle--light { border-color: rgba(255, 255, 255, .4); color: #fff; }
.g-circle--light:hover { background: #fff; color: var(--ink); }
.g-reviews .g-rail__hint { color: #8e97ab; }
.g-rail--rv .g-rail__track { align-items: stretch; }
.g-rv { position: relative; flex: 0 0 min(86vw, 410px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 20px; padding: 30px 30px 26px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid var(--line-d); color: #fff; overflow: hidden; }
.g-rv__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.g-stars { display: inline-flex; gap: 3px; }
.g-star { display: inline-grid; color: rgba(255, 255, 255, .2); }
.g-star.is-on { color: var(--blue); }
.g-star svg { width: 20px; height: 20px; }
.g-rv__tag { font: 600 10.5px/1 var(--ff-h); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(134, 164, 191, .55); color: var(--blue-2); }
.g-rv__mark { position: absolute; right: 20px; top: 52px; opacity: .07; pointer-events: none; }
.g-rv__mark svg { width: 76px; height: 76px; }
.g-rv__q { flex: 1; }
.g-rv__q p { font: 400 16.5px/1.7 var(--ff-b); color: #e4e9f3; }
.g-rv__who { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line-d); }
.g-rv__av { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--navy); border: 1px solid rgba(255, 255, 255, .22); font: 700 15px var(--ff-h); color: #fff; }
.g-rv__av img { width: 100%; height: 100%; object-fit: cover; }
.g-rv__who b { display: block; font: 700 15.5px/1.3 var(--ff-h); color: #fff; }
.g-rv__who span span { display: block; margin-top: 2px; font-size: 13px; color: #9aa4ba; }
.g-empty--rv { text-align: center; color: #b4bccb; padding: 8px 0 0; }
.g-reviews__write { margin-top: 40px; }
/* live from Google (inc/google-reviews.php): the cards reuse .g-rv; the bar carries the rating, the Google links and the required "Google Maps" attribution + notice */
.g-rv--g .g-rv__q p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.g-rv--g .g-rv__av > * { grid-area: 1 / 1; }
.g-rv--g .g-rv__av i { font-style: normal; }
.g-rv--g .g-rv__who a { color: inherit; text-decoration: none; }
.g-rv--g .g-rv__who b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-rv--g .g-rv__who [data-gr-link] { color: var(--blue-2); text-decoration: underline; text-underline-offset: 3px; }
.g-rv--g .g-rv__who small { font-size: 13px; color: #9aa4ba; }
.g-reviews.is-google .g-reviews__write { display: none; }
.g-gr__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 34px; padding: 22px 28px; border-radius: 22px; border: 1px solid var(--line-d); background: rgba(255, 255, 255, .04); }
.g-gr__bar[hidden], .g-gr__sum[hidden], .g-gr__count[hidden] { display: none; }
.g-gr__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.g-gr__score { font: 800 clamp(34px, 4.2vw, 46px)/1 var(--ff-h); color: #fff; }
.g-gr__sum .g-star svg { width: 22px; height: 22px; }
.g-gr__count { font: 500 15px/1.4 var(--ff-b); color: #cfd6e4; }
.g-gr__links { display: flex; flex-wrap: wrap; gap: 12px; }
.g-gr__src { flex: 0 0 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--line-d); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 13px; line-height: 1.55; color: #a3adc2; }
.g-gr__gm { font: 400 1rem/1 Roboto, Arial, "Helvetica Neue", sans-serif; color: #fff; white-space: nowrap; }   /* Google's text attribution: as given, never translated, capitalised or wrapped */
.g-rv--sk { min-height: 270px; gap: 14px; }
.g-rv--sk i { display: block; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.g-rv--sk i:nth-child(1) { width: 34%; height: 18px; margin-bottom: 8px; }
.g-rv--sk i:nth-child(3) { width: 92%; }
.g-rv--sk i:nth-child(4) { width: 64%; }
@media (prefers-reduced-motion: no-preference) {
	.g-rv--sk { animation: grvsk 1.4s ease-in-out infinite; }
	.g-rv--g { animation: grvfade .5s var(--ease) both; }
}
@keyframes grvsk { 50% { opacity: .55; } }
@keyframes grvfade { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 640px) { .g-gr__bar { padding: 20px; } }
/* the "write a review" dialog (a native <dialog>: focus trap, Esc and backdrop come with it); a bottom sheet on phones */
.g-rvdlg { width: min(560px, calc(100% - 28px)); max-width: none; max-height: calc(100dvh - 28px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.g-rvdlg::backdrop { background: rgba(5, 7, 13, .78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.g-rvdlg[open] { animation: grvin .45s var(--ease); }
@keyframes grvin { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.g-rvform { max-height: calc(100dvh - 28px); overflow: auto; overscroll-behavior: contain; }
.g-rvform__x { position: absolute; right: 14px; top: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); background: var(--paper); transition: background .2s; }
.g-rvform__x:hover { background: #e4e7ee; }
.g-rvform__x svg { width: 20px; height: 20px; }
.g-rvform .g-form__title { padding-right: 52px; }
.g-rvform__sub { margin: 8px 0 22px; padding-right: 20px; color: var(--muted); font-size: 15px; }
.g-rvform .g-field small { font-size: 12.5px; color: var(--muted); }
.g-rvform .g-field textarea { min-height: 124px; }
[data-rv-count] { justify-self: end; }
.g-rvform__nav { display: flex; justify-content: flex-end; margin-top: 4px; }
.g-rvform__nav .g-btn { --b-bg: var(--navy); --b-fg: #fff; --b-hv: var(--navy-2); }
.g-rvform.is-sent .g-rvform__body { display: none; }
.g-rate { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.g-rate legend { font: 600 13px var(--ff-h); color: var(--muted); padding: 0; margin-bottom: 4px; }
.g-rate__row { display: inline-flex; flex-direction: row-reverse; gap: 2px; border-radius: 14px; }
.g-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.g-rate label { width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer; color: #cdd2dd; border-radius: 12px; transition: color .15s, transform .2s var(--ease); }
.g-rate label svg { width: 32px; height: 32px; }
.g-rate input:checked ~ label, .g-rate label:hover, .g-rate label:hover ~ label { color: var(--navy); }
.g-rate label:hover { transform: scale(1.08); }
.g-rate input:focus-visible + label { outline: 3px solid var(--navy); outline-offset: 2px; }
.g-rate.has-err .g-rate__row { box-shadow: 0 0 0 3px rgba(192, 57, 43, .18); }
@media (max-width: 767px) {
	.g-rvdlg { width: 100%; margin: auto 0 0; max-height: 94dvh; }
	.g-rvform { border-radius: 26px 26px 0 0; max-height: 94dvh; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
	.g-rv { padding: 26px 24px 22px; }
}

/* ---------- process ---------- */
.g-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 26px; }
.g-steps__line { position: absolute; left: 22px; right: 22px; top: 102px; height: 2px; background: rgba(255, 255, 255, .16); }
.g-steps__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), #fff); transform: scaleX(0); transform-origin: left; }
.g-step { position: relative; z-index: 1; }
.g-step__n { display: block; height: 64px; font: 800 62px/1 var(--ff-h); letter-spacing: -.04em; color: rgba(134, 164, 191, .3); margin-bottom: 14px; }
.g-step__dot { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); border: 1.5px solid rgba(255, 255, 255, .28); color: transparent; transition: background .5s var(--ease), border-color .5s, color .4s .15s, transform .5s var(--ease); }
.g-step__dot svg { width: 20px; height: 20px; stroke-width: 2.4; }
.g-step.is-done .g-step__dot { background: var(--check); border-color: transparent; color: #fff; transform: scale(1.1); }
.g-step h3 { margin-top: 24px; font: 700 17px/1.3 var(--ff-h); color: #fff; }
.g-step p { margin-top: 10px; font-size: 14px; line-height: 1.65; color: #aab2c3; font-weight: 300; }
.g-pay__list { display: grid; }
.g-pay__row { display: grid; grid-template-columns: auto auto 1fr; gap: 22px; align-items: start; padding: 30px 0; border-top: 1px solid var(--line); }
.g-pay__row:last-child { border-bottom: 1px solid var(--line); }
.g-pay__n { font: 800 clamp(34px, 4vw, 50px)/1 var(--ff-h); letter-spacing: -.03em; color: rgba(34, 67, 114, .28); min-width: 1.6em; }
.g-pay__row .g-step__dot { background: var(--check); color: #fff; border-color: transparent; }
.g-pay__row h3 { font: 700 20px/1.3 var(--ff-h); color: var(--navy); }
.g-pay__row p { margin-top: 8px; color: var(--muted); max-width: 54ch; }

/* ---------- why gerha / checks ---------- */
.g-wg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.g-wg__media { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 4.7; background: #0b1a33; }
.g-wg__media > img { width: 100%; height: 100%; object-fit: cover; }
.g-wg__card { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px; background: rgba(5, 7, 13, .72); backdrop-filter: blur(14px); color: #fff; font: 600 15px/1.3 var(--ff-h); }
.g-wg__card img { width: 46px; height: auto; }
.g-checks li { display: flex; align-items: center; gap: 16px; }
.g-checks li + li { margin-top: 14px; }
.g-checks .g-step__dot { width: 30px; height: 30px; background: var(--check); color: #fff; border-color: transparent; }
.g-checks .g-step__dot svg { width: 16px; height: 16px; }
.g-checks--big li { align-items: flex-start; gap: 20px; padding: 22px 0; margin: 0; border-bottom: 1px solid var(--line); }
.g-checks--big li:first-child { border-top: 1px solid var(--line); }
.g-checks--big .g-step__dot { width: 44px; height: 44px; margin-top: 2px; }
.g-checks--big .g-step__dot svg { width: 22px; height: 22px; }
.g-checks--big b { display: block; font: 700 clamp(20px, 2vw, 26px)/1.2 var(--ff-h); color: var(--navy); }
.g-checks--big span { color: var(--muted); }
.g-checks--dark li { color: var(--text); }
.g-edges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.g-edges li { padding: 10px 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font: 500 13.5px var(--ff-h); color: var(--navy); }

/* ---------- about ---------- */
.g-prose { font-size: 17px; line-height: 1.85; color: #2b3345; }
.g-prose > * + * { margin-top: 1.25em; }
.g-prose__lead { font: 300 clamp(20px, 2.2vw, 28px)/1.5 var(--ff-h); color: var(--navy); letter-spacing: -.01em; }
.g-prose h2, .g-prose h3 { font-family: var(--ff-h); color: var(--navy); line-height: 1.2; margin-top: 1.8em; letter-spacing: -.01em; }
.g-prose h2 { font-size: 28px; } .g-prose h3 { font-size: 22px; }
.g-prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.g-prose ul, .g-prose ol { padding-left: 1.3em; } .g-prose ul { list-style: disc; } .g-prose ol { list-style: decimal; }
.g-prose li + li { margin-top: .4em; }
.g-prose blockquote { padding: 6px 0 6px 24px; border-left: 3px solid var(--blue); font: 300 22px/1.5 var(--ff-h); color: var(--navy); }
.g-prose img { border-radius: var(--r); }
.g-prose--page { padding-block: 0; }
/* ---------- logo meaning: large lockup with numbered parts + matching cards ---------- */
/* (kept off the ".g-logo" name on purpose: that class is the header logo and caps its image at 40px) */
.g-meaning__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.g-meaning__stage { position: relative; margin: 0; display: grid; place-items: center; min-height: clamp(260px, 30vw, 440px); padding: clamp(28px, 4.6vw, 68px); border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(75% 70% at 50% 42%, #fff, var(--paper)); overflow: hidden; }
.g-meaning__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--navy) 1.2px, transparent 1.6px); background-size: 26px 26px; opacity: .07; -webkit-mask-image: radial-gradient(closest-side, transparent 38%, #000); mask-image: radial-gradient(closest-side, transparent 38%, #000); }
.g-meaning__logo { position: relative; width: 100%; max-width: 580px; }
.g-meaning__logo img { display: block; width: 100%; height: auto; }
.g-meaning .g-pin { --pin-bg: var(--navy); --pin-fg: #fff; --pin-ring: #fff; --pin-on-bg: var(--blue); --pin-on-fg: var(--ink); }
.g-meaning .g-pin .g-pin__dot { box-shadow: 0 6px 14px rgba(34, 67, 114, .45); }
@media (max-width: 719px) { .g-meaning .g-pin { width: 36px; height: 36px; margin: -18px 0 0 -18px; } .g-meaning .g-pin::before { inset: 5px; } .g-meaning .g-pin__dot { width: 22px; height: 22px; font-size: 11px; } }
.g-meaning .g-pin:hover .g-pin__dot, .g-meaning .g-pin.is-on .g-pin__dot { border-color: var(--navy); }
.g-meaning__cards { display: grid; gap: 14px; align-content: center; }
.g-card--flat { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; transition: border-color .3s, box-shadow .3s; }
.g-card--flat.is-on { border-color: var(--navy); box-shadow: 0 22px 44px -26px rgba(34, 67, 114, .55); }
.g-card--flat .g-icon { grid-row: span 2; position: relative; }
.g-icon__n { position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: var(--ink); border: 2px solid #fff; font: 700 11px/1 var(--ff-h); }
.g-card--flat h3 { font: 700 19px var(--ff-h); color: var(--navy); }
.g-card--flat p { color: var(--muted); font-size: 15px; }
.g-values { background: var(--ink); }
.g-values .g-hero__bg { z-index: -1; opacity: .8; }
.g-values__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.g-values__list li { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line-d); }
.g-values__n { font: 600 13px var(--ff-h); color: var(--blue); }
.g-values__list b { font: 300 clamp(34px, 5.6vw, 76px)/1 var(--ff-h); letter-spacing: -.03em; color: var(--grey); }
.g-values__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.g-values__gallery figure { aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: var(--r-lg); }
.g-values__gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- posts ---------- */
.g-postgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.g-post { border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.g-post.is-hide { display: none; }
.g-post:hover { transform: translateY(-8px); box-shadow: 0 34px 64px -30px rgba(34, 67, 114, .5); }
.g-post__media { aspect-ratio: 16 / 10; overflow: hidden; background: #dfe3ec; }
.g-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.g-post:hover .g-post__media img { transform: scale(1.06); }
.g-post__body { padding: 26px 28px 30px; }
.g-post__meta { font: 600 11.5px var(--ff-h); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.g-post__body h3 { margin-top: 12px; font: 700 21px/1.3 var(--ff-h); color: var(--navy); }
.g-post__body p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.g-pager { margin-top: 48px; display: flex; justify-content: center; }
.g-pager .nav-links { display: flex; gap: 8px; }
.g-pager a, .g-pager span { min-width: 46px; height: 46px; display: grid; place-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font: 600 14px var(--ff-h); color: var(--navy); }
.g-pager .current { background: var(--navy); color: #fff; border-color: var(--navy); }
.g-article__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 28px; font: 600 12px var(--ff-h); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.g-article__img { margin-bottom: 40px; border-radius: var(--r-lg); overflow: hidden; }
.g-article__share { display: flex; align-items: center; gap: 18px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font: 600 13px var(--ff-h); color: var(--muted); }
.g-article__share a { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); }
.g-article__share svg { width: 22px; height: 22px; }

/* ---------- article pieces (inc/article.php): answer, key points, contents, tables, questions, sources, author ---------- */
.g-answer { margin: 0 0 24px; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--navy); }
.g-answer__l, .g-points__l, .g-toc__t { display: block; margin-bottom: 10px; font: 700 11.5px var(--ff-h); letter-spacing: .14em; text-transform: uppercase; color: var(--navy-2); }
.g-answer__text { font: 500 clamp(17px, 1.6vw, 19.5px)/1.7 var(--ff-b); color: var(--ink); }
.g-points { margin: 0 0 24px; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); border-radius: var(--r-lg); background: var(--deep); color: #e6eaf2; }
.g-points__l { color: var(--blue-2); }
.g-points ul { display: grid; gap: 12px; }
.g-points li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.6; }
.g-points .g-step__dot { width: 26px; height: 26px; margin-top: 1px; background: var(--check); color: #fff; border-color: transparent; }
.g-points .g-step__dot svg { width: 14px; height: 14px; }
.g-toc { margin: 0 0 40px; padding: clamp(18px, 3vw, 24px) clamp(20px, 3vw, 32px); border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; }
.g-toc ol { display: grid; gap: 8px; padding-left: 1.4em; list-style: decimal; }
.g-toc li::marker { color: var(--blue); font-weight: 600; }
.g-toc a { color: var(--navy); text-underline-offset: 3px; } .g-toc a:hover { text-decoration: underline; }
.g-article .g-prose figure { margin-block: 1.8em; } .g-article .g-prose figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.g-article .g-prose .wp-block-image img { width: 100%; height: auto; }
.g-article .g-prose .wp-block-table { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: #fff; -webkit-overflow-scrolling: touch; }
.g-article .g-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.g-article .g-prose th, .g-article .g-prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.g-article .g-prose .wp-block-table th, .g-article .g-prose .wp-block-table td { border: 0; border-bottom: 1px solid var(--line); }   /* the block library draws a dark box round every cell */
.g-article .g-prose thead th { background: var(--navy); color: #fff; font: 600 13px var(--ff-h); letter-spacing: .04em; }
.g-article .g-prose tbody tr:nth-child(even) td { background: var(--paper); }
.g-article .g-prose tbody tr:last-child td { border-bottom: 0; }
.g-article .g-prose strong { color: var(--ink); font-weight: 600; }
@media (max-width: 719px) {
	.g-article .g-prose .wp-block-table:has(.is-stack) { overflow: visible; border: 0; background: none; }
	.g-article .g-prose table.is-stack, .g-article .g-prose table.is-stack tbody, .g-article .g-prose table.is-stack tr, .g-article .g-prose table.is-stack td { display: block; width: 100%; }
	.g-article .g-prose table.is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.g-article .g-prose table.is-stack tbody tr { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
	.g-article .g-prose table.is-stack tbody tr td { display: grid; grid-template-columns: minmax(78px, 32%) minmax(0, 1fr); gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: none; font-size: 14.5px; }
	.g-article .g-prose table.is-stack td::before { content: attr(data-label); padding-top: 2px; font: 600 11.5px/1.4 var(--ff-h); letter-spacing: .06em; text-transform: uppercase; color: var(--navy-2); }
	.g-article .g-prose table.is-stack tbody tr td:first-child { background: var(--paper); font-weight: 600; color: var(--navy); }
	.g-article .g-prose table.is-stack tbody tr td:last-child { border-bottom: 0; }
}
.g-article__faq { margin-top: 56px; }
.g-article__faq > h2, .g-refs > h2 { margin-bottom: 18px; font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--ff-h); color: var(--navy); letter-spacing: -.01em; }
.g-faq__q h3, .g-article__faq h3 { font: inherit; }
.g-refs { margin-top: 44px; font-size: 15px; }
.g-refs > h2 { font-size: 20px; }
.g-refs ol { padding-left: 1.4em; list-style: decimal; display: grid; gap: 6px; color: var(--muted); }
.g-refs a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.g-author { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: center; margin-top: 48px; padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 30px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.g-author__av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; }
.g-author__av svg { width: 26px; height: 26px; }
.g-author b { display: block; font: 700 16px var(--ff-h); color: var(--navy); }
.g-author p { margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 719px) { .g-author { grid-template-columns: auto minmax(0, 1fr); } .g-author .g-btn { grid-column: 1 / -1; justify-self: start; } }

/* ---------- FAQ ---------- */
.g-faq__item { border-bottom: 1px solid var(--line); }
.g-faq__item:first-child { border-top: 1px solid var(--line); }
.g-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px; text-align: left; font: 600 clamp(16px, 1.5vw, 19px)/1.4 var(--ff-h); color: var(--navy); }
.g-faq__q i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); transition: transform .5s var(--ease), background .3s, color .3s; }
.g-faq__q i svg { width: 18px; height: 18px; }
.g-faq__q:hover i { background: var(--paper); }
.g-faq__q[aria-expanded="true"] i { transform: rotate(135deg); background: var(--navy); color: #fff; border-color: var(--navy); }
.g-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.g-faq__a > div { overflow: hidden; }
.g-faq__a p { padding: 0 60px 28px 4px; color: var(--muted); max-width: 64ch; }
.g-faq__q[aria-expanded="true"] + .g-faq__a, .g-faq__item.is-open .g-faq__a { grid-template-rows: 1fr; }

/* ---------- CTA + form ---------- */
.g-cta { overflow: clip; }
.g-cta__bg { position: absolute; inset: 0; z-index: -2; background: var(--bg) center / cover; opacity: .45; }
.g-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(5, 7, 13, .92) 25%, rgba(11, 26, 51, .72) 70%, rgba(34, 67, 114, .55)); }
.g-cta__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.g-cta .g-checks { margin: 8px 0 34px; color: #d6d7df; }
.g-cta__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.g-cta__tel { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.g-cta__tel a { display: inline-flex; align-items: center; gap: 8px; color: #d6d7df; font: 500 15px var(--ff-h); transition: color .2s; }
.g-cta__tel a:hover { color: #fff; }
.g-cta__tel svg { width: 18px; height: 18px; color: var(--blue); }
.g-partner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 44px; padding: 20px 24px; border-radius: 20px; border: 1px solid var(--line-d); background: rgba(255, 255, 255, .04); }
.g-partner > div { flex: 1 1 240px; display: grid; gap: 2px; }
.g-partner b { font: 700 16px var(--ff-h); color: #fff; }
.g-partner > div span { font-size: 14px; color: #aab2c3; font-weight: 300; }
.g-partner__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(134, 164, 191, .18); color: var(--blue); }
.g-partner__ico svg { width: 24px; height: 24px; }

.g-form { position: relative; padding: clamp(26px, 3.4vw, 40px); border-radius: 28px; background: #fff; color: var(--text); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .75); --focus: #224372; }
.g-form__title { font: 700 22px var(--ff-h); color: var(--navy); }
.g-form__steps { display: flex; gap: 6px; margin-top: 18px; }
.g-form__steps li { flex: 1; display: flex; align-items: center; gap: 8px; font: 600 12px var(--ff-h); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.g-form__steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-size: 12px; transition: background .3s, color .3s; }
.g-form__steps li.is-on, .g-form__steps li.is-done { color: var(--navy); }
.g-form__steps li.is-on span { background: var(--navy); color: #fff; }
.g-form__steps li.is-done span { background: var(--check); color: #fff; }
.g-form__bar { height: 4px; margin: 16px 0 26px; border-radius: 4px; background: var(--paper); overflow: hidden; }
.g-form__bar i { display: block; height: 100%; width: 100%; background: var(--check); transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease); }
.g-fs { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.g-fs.is-on { display: block; animation: gfs .5s var(--ease); }
@keyframes gfs { from { opacity: 0; transform: translateX(18px); } }
.g-fs legend { font: 600 17px var(--ff-h); color: var(--text); margin-bottom: 18px; padding: 0; }
.g-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.g-opt { position: relative; cursor: pointer; }
.g-opt input { position: absolute; opacity: 0; inset: 0; }
.g-opt span { display: flex; flex-direction: column; gap: 12px; min-height: 108px; padding: 18px; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; transition: border-color .25s, background .25s, transform .3s var(--ease), box-shadow .3s; }
.g-opt svg { width: 28px; height: 28px; color: var(--navy); }
.g-opt b { font: 600 14.5px/1.3 var(--ff-h); color: var(--text); }
.g-opt:hover span { transform: translateY(-3px); border-color: rgba(34, 67, 114, .45); }
.g-opt input:checked + span { border-color: var(--navy); background: rgba(34, 67, 114, .06); box-shadow: 0 0 0 3px rgba(34, 67, 114, .12); }
.g-opt input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 3px; }
.g-field { display: grid; gap: 6px; margin-bottom: 14px; }
.g-field span { font: 600 13px var(--ff-h); color: var(--muted); }
.g-field input, .g-field select, .g-field textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: 400 16px var(--ff-b); color: var(--text); transition: border-color .2s, box-shadow .2s; }
.g-field textarea { resize: vertical; min-height: 96px; }
.g-field input:focus, .g-field select:focus, .g-field textarea:focus { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(34, 67, 114, .14); }
.g-field.has-err input { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }
.g-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.g-form__msg { min-height: 22px; margin: 4px 0 8px; font-size: 14px; color: #b3261e; }
.g-form__nav { display: flex; justify-content: space-between; gap: 12px; }
.g-form__nav .g-btn { --b-bg: var(--navy); --b-fg: #fff; --b-hv: var(--navy-2); }
.g-form__nav .g-btn--ghost { --b-bg: transparent; --b-fg: var(--navy); --b-hv: rgba(34, 67, 114, .08); box-shadow: inset 0 0 0 1.5px var(--line); }
.g-form__nav [data-next], .g-form__nav [data-send] { margin-left: auto; }
.g-form__nav [hidden] { display: none; }
.g-form__privacy { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.g-form__privacy svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--navy); }
.g-form__ok { text-align: center; padding: 14px 0 6px; }
.g-form__ok[hidden] { display: none; }
.g-form__okck { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--check); color: #fff; animation: gpopin .7s var(--ease); }
.g-form__okck svg { width: 38px; height: 38px; stroke-width: 2.4; }
@keyframes gpopin { from { transform: scale(.4); opacity: 0; } }
.g-form__ok h3 { font: 700 26px var(--ff-h); color: var(--navy); }
.g-form__ok p { margin: 12px auto 26px; max-width: 38ch; color: var(--muted); }
.g-form.is-sent .g-form__head, .g-form.is-sent .g-fs, .g-form.is-sent .g-form__nav, .g-form.is-sent .g-form__privacy, .g-form.is-sent .g-form__msg { display: none; }

/* ---------- contact ---------- */
.g-contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.g-contact__list { display: grid; gap: 14px; }
.g-contact__list li { display: flex; gap: 20px; padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.g-contact__list b { display: block; font: 700 15px var(--ff-h); color: var(--navy); margin-bottom: 4px; }
.g-contact__list div > span, .g-contact__list div > a { display: block; color: var(--muted); font-size: 15.5px; }
.g-contact__list .g-icon { color: #fff; flex: none; }
.g-contact__list a svg { display: inline-block; width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; }
.g-contact__list a:hover { color: var(--navy); }
.g-contact__list a + a { margin-top: 2px; }
.g-contact__list a small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.g-contact__list div > a:last-child { font-weight: 500; color: var(--navy); }
.g-map { margin-top: clamp(32px, 5vw, 56px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 6; min-height: 280px; background: #dfe3ec; }
.g-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.g-contact .g-form { box-shadow: 0 30px 70px -40px rgba(34, 67, 114, .5); border: 1px solid var(--line); }

/* ---------- google business profile + map ---------- */
.g-gbp__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.g-gbp .g-head { margin-bottom: clamp(24px, 3vw, 36px); }
.g-gbp__facts li { display: flex; gap: 20px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.g-gbp__facts .g-icon { flex: none; }
.g-gbp__facts b { display: block; font: 700 15px var(--ff-h); color: var(--navy); margin-bottom: 4px; }
.g-gbp__facts div > span { display: block; color: var(--muted); font-size: 15.5px; }
.g-gbp__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.g-gbp__map { margin-top: 0; aspect-ratio: 4 / 3; min-height: 320px; box-shadow: 0 30px 70px -40px rgba(34, 67, 114, .5); }

/* ---------- inner page hero ---------- */
.g-phero { position: relative; padding: calc(var(--hdr) + clamp(56px, 9vw, 120px)) 0 clamp(56px, 8vw, 104px); background: var(--ink); color: #fff; overflow: clip; isolation: isolate; }
.g-phero .g-hero__bg::after { background: linear-gradient(180deg, rgba(5, 7, 13, .5), rgba(5, 7, 13, .9)); }
.g-phero__title { font: 300 clamp(38px, 6vw, 86px)/1.04 var(--ff-h); letter-spacing: -.035em; color: var(--grey); max-width: 18ch; text-wrap: balance; }
.g-phero__title b { font-weight: 700; color: var(--blue); }
.g-phero__sub { margin-top: 24px; max-width: 54ch; font-size: clamp(16px, 1.4vw, 19px); font-weight: 300; color: #b4bccb; }
.g-phero--compact { padding-bottom: clamp(44px, 6vw, 72px); }
.g-phero--compact .g-phero__title, .g-phero--article .g-phero__title { font-size: clamp(32px, 4.6vw, 62px); max-width: 24ch; }
.g-crumbs { margin-bottom: 30px; }
.g-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font: 500 13px var(--ff-h); color: #8e97ab; }
.g-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.g-crumbs a:hover { color: #fff; }
.g-crumbs [aria-current] { color: var(--grey); }

/* ---------- product / project detail ---------- */
.g-pdp__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.g-pdp__gallery { position: sticky; top: calc(var(--hdr) + 28px); }
.g-pdp__main { position: relative; aspect-ratio: 4 / 4.4; border-radius: var(--r-lg); overflow: hidden; background: #dfe3ec; }
.g-pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.g-pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.g-pdp__thumbs button { width: 78px; height: 78px; border-radius: 14px; overflow: hidden; border: 2px solid transparent; opacity: .65; transition: opacity .25s, border-color .25s; }
.g-pdp__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.g-pdp__thumbs button.is-on, .g-pdp__thumbs button:hover { opacity: 1; border-color: var(--navy); }
.g-pdp__h { margin: 34px 0 16px; font: 700 13px var(--ff-h); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.g-pdp__info > .g-pdp__h:first-child { margin-top: 0; }
.g-dotlist { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.g-dotlist li { display: inline-flex; align-items: center; gap: 10px; font: 500 14px var(--ff-h); color: var(--text); }
.g-dotlist span { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line), 0 4px 8px -2px rgba(0, 0, 0, .3); }
.g-specs { border-top: 1px solid var(--line); }
.g-specs > div { display: grid; grid-template-columns: minmax(110px, .4fr) 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.g-specs dt { font: 600 13.5px var(--ff-h); color: var(--muted); }
.g-specs dd { color: var(--text); }
.g-specs--stack > div { grid-template-columns: 1fr; gap: 2px; }
.g-pdp__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.g-prose--pdp { margin-top: clamp(40px, 6vw, 72px); }
.g-pjd__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.g-pjd__hero { border-radius: var(--r-lg); overflow: hidden; background: #0b1a33; }
.g-pjd__hero img { width: 100%; height: auto; }
.g-pjd__side { display: grid; gap: 26px; }
.g-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.g-gallery a { display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: #0b1a33; }
.g-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.g-gallery a:hover img { transform: scale(1.07); }
.g-lb { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(5, 7, 13, .94); opacity: 0; transition: opacity .35s; }
.g-lb.is-on { opacity: 1; }
.g-lb img { max-width: min(94vw, 1300px); max-height: 86vh; border-radius: 10px; transform: scale(.96); transition: transform .5s var(--ease); }
.g-lb.is-on img { transform: none; }
.g-lb button { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; --focus: #86a4bf; }
.g-lb button svg { width: 24px; height: 24px; }
.g-lb [data-x] { top: 20px; right: 20px; } .g-lb [data-p] { left: 20px; top: 50%; } .g-lb [data-n] { right: 20px; top: 50%; }

/* ---------- footer ---------- */
.g-footer { position: relative; background: var(--ink); color: #b4bccb; overflow: clip; border-top: 1px solid var(--line-d); }
.g-footer__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); padding-block: clamp(40px, 4.4vw, 56px) clamp(30px, 3.4vw, 40px); }
.g-footer__brand img { width: 128px; height: auto; margin-bottom: 16px; }
.g-footer__brand p { max-width: 34ch; font-size: 14.5px; line-height: 1.6; font-weight: 300; }
.g-social { display: flex; gap: 10px; margin-top: 20px; }
.g-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-d); color: #fff; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.g-social a:hover { background: var(--blue); border-color: var(--blue); color: var(--ink); transform: translateY(-2px); }
.g-social svg { width: 19px; height: 19px; }
.g-footer__col h2 { font: 700 12px var(--ff-h); letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.g-footer__col a { transition: color .2s; font-size: 14.5px; }
.g-footer__col a:hover { color: #fff; }
.g-footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(26px, 3.4vw, 52px); row-gap: 10px; }
.g-footer__ct li + li { margin-top: 11px; }
.g-footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.g-footer__contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--blue); }
.g-footer__bar { border-top: 1px solid var(--line-d); padding: 16px 0; font-size: 13px; }
.g-footer__bar .g-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.g-footer__tag { color: var(--blue); font-style: italic; }

/* ---------- floating whatsapp + sticky bar ---------- */
.g-wafloat { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 70; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #2c5591, #224372); box-shadow: 0 16px 36px -10px rgba(34, 67, 114, .8), 0 0 0 1.5px rgba(134, 164, 191, .55); opacity: 0; transform: translateY(24px) scale(.8); pointer-events: none; transition: opacity .4s, transform .6s var(--ease); --focus: #86a4bf; }
.g-wafloat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.g-wafloat svg { width: 30px; height: 30px; }
.g-wafloat::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue); animation: gpulse 2.8s ease-out infinite; }
.g-wafloat__tip { position: absolute; right: 74px; top: 50%; transform: translate(10px, -50%); padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 13px var(--ff-h); white-space: nowrap; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .25s, transform .4s var(--ease); }
.g-wafloat:hover .g-wafloat__tip, .g-wafloat:focus-visible .g-wafloat__tip { opacity: 1; transform: translate(0, -50%); }
.g-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 69; padding: 12px max(16px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-bottom)); background: rgba(5, 7, 13, .94); backdrop-filter: blur(14px); align-items: center; justify-content: space-between; gap: 14px; transform: translateY(110%); transition: transform .5s var(--ease); }
.g-sticky.is-on { transform: none; }
.g-sticky__t { font: 600 14px/1.3 var(--ff-h); color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-sticky .g-btn { min-height: 46px; padding: 0 20px; flex: none; }
.g-noimg { display: block; width: 100%; height: 100%; min-height: 160px; background: linear-gradient(135deg, #dfe3ec, #c4cad8); }

/* ---------- reveal system (progressive enhancement: content is visible without JS) ---------- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); animation: gfb .01s linear 4s forwards; }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; animation: none; }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.js [data-stagger] > * { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); animation: gfb .01s linear 4s forwards; }
.js [data-stagger].is-in > * { opacity: 1; transform: none; animation: none; }
.js [data-stagger].is-in > .g-pcard:hover, .js [data-stagger].is-in > .g-post:hover { transform: translateY(-8px); }
.js [data-stagger].is-in > .g-why__card:hover { transform: translateY(-6px); }
.g-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em 0; margin-bottom: -.14em; }
.g-wi { display: inline-block; transform: translate3d(0, 112%, 0); animation: gword 1.15s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + .12s); }
@keyframes gword { to { transform: none; } }
[data-hero-in] { animation: ghero 1.05s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms + 380ms); }
@keyframes ghero { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
/* Entrance for the first image of a detail page: pure CSS, starts on the first frame (no JS, so it never delays Largest Contentful Paint). */
.g-enter { animation: genter .7s var(--ease) both; }
.g-enter--clip { animation-name: gclip; animation-duration: .9s; }
@keyframes genter { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes gclip { from { clip-path: inset(0 0 100% 0); } }
.g-hero__copy > [data-hero-in]:nth-child(1) { --d: 0; } .g-hero__copy > [data-hero-in]:nth-child(3) { --d: 120; } .g-hero__copy > [data-hero-in]:nth-child(4) { --d: 220; } .g-hero__copy > [data-hero-in]:nth-child(5) { --d: 320; }
.g-phero__sub[data-hero-in] { --d: 260; }
.g-scroll[data-hero-in] { --d: 900; }
@keyframes gfb { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes gshow { to { visibility: visible; } }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
	.g-steps { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
	.g-steps__line { left: 21px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
	.g-steps__fill { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; }
	.g-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 24px; padding-bottom: 38px; }
	.g-step__n { position: absolute; right: 0; top: -6px; height: auto; font-size: 44px; margin: 0; }
	.g-step__dot { grid-row: span 2; }
	.g-step h3 { margin-top: 8px; padding-right: 70px; } .g-step p { grid-column: 2; margin-top: 6px; }
}
@media (max-width: 960px) {
	.g-hero { min-height: auto; padding-bottom: 80px; }
	.g-hero__grid, .g-split, .g-split--pay, .g-split--faq, .g-colors__grid, .g-wg__grid, .g-cta__grid, .g-contact__grid, .g-gbp__grid, .g-meaning__grid, .g-pdp__grid, .g-pjd__grid { grid-template-columns: minmax(0, 1fr); }
	.g-split__side, .g-pdp__gallery { position: static; }
	.g-scene { justify-self: center; max-width: 600px; margin-top: 12px; }
	.g-scene__badge { left: 10px; } .g-scene__mark { right: 4px; width: 70px; top: -26px; }
	.g-photo--tall { aspect-ratio: 4 / 3; }
	.g-pjgrid, .g-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-footer__grid { grid-template-columns: 1fr 1fr; } .g-footer__brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
	.g-footer__brand img, .g-footer__brand p { grid-column: 1; } .g-footer__brand .g-social { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
	.g-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
	.g-stat:nth-child(3) { border-left: 0; padding-left: 0; }
	.g-values__list, .g-values__gallery { grid-template-columns: 1fr; }
	.g-values__gallery figure { aspect-ratio: 16 / 10; }
	.g-sticky { display: flex; }
	body.single-gerha_product .g-wafloat { display: none; }
	body.single-gerha_product { padding-bottom: 76px; }
	.g-scroll { display: none; }
}
@media (max-width: 767px) {
	.g-cmp__wrap { overflow: visible; }
	.g-cmp__table { min-width: 0; width: auto; margin: 0; display: block; }
	.g-cmp__table thead { display: none; }
	.g-cmp__table tbody, .g-cmp__table tr { display: block; }
	.g-cmp__table tr { margin-bottom: 18px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .05); }
	.g-cmp__table tbody th { display: block; width: auto; border-radius: 0; padding: 16px 20px; background: rgba(5, 7, 13, .6); }
	.g-cmp__table td { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px 20px; background: transparent; border-top: 1px solid var(--line-d); border-radius: 0; }
	.g-cmp__table td::before { content: attr(data-label); font: 600 11.5px var(--ff-h); letter-spacing: .12em; text-transform: uppercase; color: #8e97ab; padding-top: 3px; }
	.g-cmp__table td.is-upvc { background: rgba(134, 164, 191, .22); box-shadow: none; border-radius: 0 !important; }
	.g-cmp__table td.is-upvc::before { color: var(--blue-2); }
	.g-cmp__table tbody tr:last-child td.is-upvc { box-shadow: none; }
}
@media (max-width: 640px) {
	.g-why { grid-template-columns: 1fr; } .g-why__card:last-child { grid-column: auto; }
	.g-pjgrid, .g-postgrid, .g-gallery { grid-template-columns: 1fr; }
	.g-swatches { grid-template-columns: repeat(2, 1fr); } .g-swatch { padding: 10px; gap: 10px; } .g-swatch__dot { width: 44px; height: 44px; }
	.g-opts { grid-template-columns: 1fr 1fr; }
	.g-form__steps li { font-size: 0; gap: 0; justify-content: center; } .g-form__steps li span { font-size: 12px; }
	.g-footer__grid { grid-template-columns: 1fr; gap: 26px; }
	.g-footer__brand { display: block; } .g-footer__brand .g-social { margin-top: 18px; }
	.g-footer__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-footer__bar .g-wrap { flex-direction: column; }
	.g-hero__cta .g-btn { flex: 1 1 100%; }
	.g-pay__row { grid-template-columns: auto 1fr; } .g-pay__n { display: none; }
	.g-faq__a p { padding-right: 8px; }
	.g-pdp__cta .g-btn { flex: 1 1 100%; }
	.g-map { aspect-ratio: 4 / 3; }
	.g-filter { display: flex; width: 100%; } .g-filter button { flex: 1; padding: 0 12px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
	.js [data-reveal], .js [data-stagger] > *, [data-hero-in], .g-enter { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
	.g-ticker__track { animation: none !important; }
	.g-sash--l { transform: rotateY(-108deg) !important; } .g-sash--r { transform: rotateY(108deg) !important; }
	.g-slides { filter: none !important; transform: none !important; }
}

/* ---------- Elementor editor: never hide content while editing ---------- */
.elementor-editor-active [data-reveal], .elementor-editor-active [data-stagger] > *, .elementor-editor-active [data-hero-in],
.elementor-editor-preview [data-reveal], .elementor-editor-preview [data-stagger] > *, .elementor-editor-preview [data-hero-in] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.elementor-editor-active .g-wi, .elementor-editor-preview .g-wi, .elementor-editor-active [data-hero-in], .elementor-editor-preview [data-hero-in], .elementor-editor-active .g-enter, .elementor-editor-preview .g-enter { transform: none !important; animation: none !important; opacity: 1 !important; clip-path: none !important; }
.elementor-editor-active .g-header, .elementor-editor-preview .g-header { position: absolute; }
.elementor-editor-active .g-tabbar, .elementor-editor-preview .g-tabbar, .elementor-editor-active .g-sheet, .elementor-editor-preview .g-sheet, .elementor-editor-active .g-install, .elementor-editor-preview .g-install, .elementor-editor-active .g-sticky, .elementor-editor-preview .g-sticky { display: none !important; }

/* ---------- native Elementor blocks inside our sections ---------- */
.g-native { position: relative; }
.g-native .elementor-heading-title { font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; padding: 0; }
.g-native .g-title { font-size: clamp(32px, 4.6vw, 62px); }
.g-native .g-prose p + p { margin-top: 1.25em; }
.g-native .g-prose > .elementor-widget-container > * + * { margin-top: 1.25em; }
.g-native .g-prose p:first-child { font: 300 clamp(20px, 2.2vw, 28px)/1.5 var(--ff-h); color: var(--navy); letter-spacing: -.01em; }
.g-native .g-prose strong { color: var(--navy); font-weight: 600; }
.g-scroll[data-hero-in] { animation-name: gfade; }
@keyframes gfade { from { opacity: 0; } }

/* ==========================================================================
   APP MODE: phones AND tablets, plus the installed PWA
   Why: Jakob's law (touch users expect native-app patterns), thumb zone (primary navigation at the bottom
   edge, Hoober), Fitts (44px+ targets), a tab bar of 3-5 destinations (Apple HIG / Material 3), Doherty (instant
   press feedback), progressive disclosure (a sheet for secondary pages), safe-area insets for notches and
   home indicators.
   Scope : any viewport up to 1099px, plus touch-first tablets in landscape (1100-1440px, hover:none + pointer:coarse).
           Keep the query below in sync with APP_MQ in gerha.js.
   Phones (<=767px): full-width tab bar on the edge, bottom-attached sheet, 2-column catalogue.
   Tablets (>=768px): floating tab bar, centred sheet, 3-column catalogue, CTA stays in the app bar
           (iPadOS 18 floating tab bar / Material 3 "medium" window).
   ========================================================================== */
:root { --tab-h: 64px; }
.g-tabbar, .g-sheet, .g-install, .g-back, .g-apptitle { display: none; }

/* Native-style page transitions (cross-document View Transitions; ignored where unsupported). */
@view-transition { navigation: auto; }
.g-header { view-transition-name: g-header; }
::view-transition-old(root) { animation: gvt-out .2s ease both; }
::view-transition-new(root) { animation: gvt-in .42s var(--ease) both; }
::view-transition-group(g-header), ::view-transition-group(g-tabbar), ::view-transition-group(g-pill) { animation-duration: .35s; animation-timing-function: var(--ease); }
@keyframes gvt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes gvt-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

html.is-standalone .g-install { display: none !important; }

@media (max-width: 1099px), (min-width: 1100px) and (max-width: 1440px) and (hover: none) and (pointer: coarse) {
	html { scroll-padding-top: calc(var(--hdr) + env(safe-area-inset-top) + 12px); }
	body.g-body { -webkit-tap-highlight-color: transparent; }
	a, button, label, select { touch-action: manipulation; }
	.g-tab, .g-btn, .g-swatch, .g-pin, .g-filter button, .g-sheet__tile, .g-sheet__actions a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
	.g-pcard:active, .g-pj:active, .g-post:active, .g-why__card:active, .g-sheet__tile:active, .g-swatch:active { transform: scale(.97) !important; transition: transform .12s ease !important; }
	/* the tab bar sits over the end of the page, so the footer carries the room for it (a body padding would show white) */
	.g-footer { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }

	/* --- app bar --- */
	.g-header { height: calc(var(--hdr) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
	.g-header.is-stuck { background: rgba(5, 7, 13, .9); }
	.g-nav, .g-burger { display: none !important; }
	.g-header__tools { gap: 8px; margin-left: auto; }
	.g-lang a { min-width: 38px; height: 32px; }
	.g-header.has-back .g-logo { display: none; }
	.g-back { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; color: #fff; }
	.g-back:active { background: rgba(255, 255, 255, .14); }
	.g-back svg { width: 26px; height: 26px; }
	.g-apptitle { display: block; flex: 1; min-width: 0; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 16px/1 var(--ff-h); color: #fff; }
	.g-crumbs { display: none; }
	.g-wafloat { display: none; }

	/* --- tab bar --- */
	.g-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 95; background: rgba(8, 12, 22, .88); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); view-transition-name: g-tabbar; transition: transform .35s var(--ease); }
	.is-kb .g-tabbar, .is-kb .g-sticky, .is-kb .g-install { transform: translateY(130%) !important; }
	.g-tab { position: relative; display: grid; justify-items: center; align-content: end; gap: 4px; padding-bottom: 7px; min-height: 52px; border-radius: 18px; color: #8e97ab; font: 600 10.5px/1 var(--ff-h); letter-spacing: .02em; transition: color .25s; }
	.g-tab svg { position: relative; width: 24px; height: 24px; transition: transform .35s var(--ease); }
	.g-tab__label { position: relative; }
	.g-tab__pill { position: absolute; top: 3px; left: 50%; width: 50px; height: 30px; margin-left: -25px; border-radius: 16px; background: rgba(134, 164, 191, .22); opacity: 0; transform: scale(.55); transition: opacity .3s, transform .45s var(--ease); }
	.g-tab.is-on { color: #fff; }
	.g-tab.is-on .g-tab__pill { opacity: 1; transform: none; }
	.g-tab[aria-current="page"] .g-tab__pill { view-transition-name: g-pill; }
	.g-tab:active svg { transform: scale(.86); }
	.g-tab--chat { color: #cfd5e2; }
	.g-tab--chat .g-tab__fab { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; background: var(--blue); color: var(--ink); box-shadow: 0 12px 26px -8px rgba(134, 164, 191, .75), 0 0 0 5px rgba(8, 12, 22, .95); transition: transform .3s var(--ease); }
	.g-tab--chat .g-tab__fab svg { width: 28px; height: 28px; }
	.g-tab--chat:active .g-tab__fab { transform: scale(.9); }

	/* --- bottom sheet (secondary pages, contact, language) --- */
	.g-sheet { --sheet-pad: 18px; display: block; position: fixed; inset: 0; z-index: 130; visibility: hidden; pointer-events: none; transition: visibility 0s .5s; }
	.g-sheet.is-open { visibility: visible; pointer-events: auto; transition: none; }
	.g-sheet__backdrop { position: absolute; inset: 0; background: rgba(5, 7, 13, .62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; transition: opacity .4s; }
	.g-sheet.is-open .g-sheet__backdrop { opacity: 1; }
	.g-sheet__panel { position: absolute; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sheet-pad) calc(22px + env(safe-area-inset-bottom)); background: #0c1527; color: #fff; box-shadow: 0 -30px 80px rgba(0, 0, 0, .55); transform: translateY(calc(100% + 30px)); transition: transform .55s var(--ease); --focus: #86a4bf; }
	.g-sheet.is-open .g-sheet__panel { transform: translateY(var(--dy, 0px)); }
	.g-sheet.is-drag .g-sheet__panel { transition: none; }
	.g-sheet__grab { position: sticky; top: 0; z-index: 2; display: grid; place-items: center; height: 28px; margin: 0 calc(var(--sheet-pad) * -1); background: #0c1527; touch-action: none; cursor: grab; }
	.g-sheet__grab i { width: 44px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
	.g-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
	.g-sheet__head h2 { font: 700 22px var(--ff-h); }
	.g-sheet__x { width: 44px; height: 44px; margin-right: -10px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
	.g-sheet__x svg { width: 20px; height: 20px; }
	.g-sheet__label { margin: 18px 0 10px; font: 600 11px var(--ff-h); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
	.g-sheet__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.g-sheet__tile { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .06); text-align: left; transition: background .2s; }
	.g-sheet__tile:hover { background: rgba(255, 255, 255, .1); }
	.g-sheet__tile b { font: 600 14px/1.25 var(--ff-h); }
	.g-sheet__ico { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(134, 164, 191, .18); color: var(--blue-2); }
	.g-sheet__ico svg { width: 21px; height: 21px; }
	.g-sheet__tile--install { grid-column: 1 / -1; background: rgba(134, 164, 191, .16); }
	.g-sheet__tile--install[hidden] { display: none; }
	.g-sheet__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
	.g-sheet__actions a { display: grid; justify-items: center; gap: 6px; padding: 10px 2px; border-radius: 16px; font: 600 11.5px var(--ff-h); color: #cfd5e2; }
	.g-sheet__actions a span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; }
	.g-sheet__actions a:first-child span, .g-sheet__actions a:nth-child(2) span { background: var(--blue); color: var(--ink); }
	.g-sheet__actions svg { width: 22px; height: 22px; }
	.g-sheet__seg { display: grid; grid-template-columns: repeat(2, 1fr); padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .07); }
	.g-sheet__seg a { display: grid; place-items: center; min-height: 46px; border-radius: 12px; font: 600 14px var(--ff-h); color: #aab2c3; }
	.g-sheet__seg a.is-on { background: #fff; color: var(--ink); }

	/* --- install card (shown only when the browser says the app can be installed) --- */
	.g-install { display: flex; align-items: center; gap: 12px; position: fixed; z-index: 96; padding: 12px; border-radius: 22px; background: #0f1b33; border: 1px solid rgba(134, 164, 191, .35); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .8); color: #fff; transform: translateY(140%); opacity: 0; transition: transform .55s var(--ease), opacity .3s; }
	.g-install[hidden] { display: none; }
	.g-install.is-on { transform: none; opacity: 1; }
	.g-install img { flex: none; width: 46px; height: 46px; border-radius: 12px; }
	.g-install__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
	.g-install__txt b { font: 700 14.5px var(--ff-h); }
	.g-install__txt span { font-size: 12.5px; line-height: 1.4; color: #aab2c3; }
	.g-install__btns { display: flex; align-items: center; gap: 4px; flex: none; }
	.g-install__go { min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--blue); color: var(--ink); font: 700 13px var(--ff-h); }
	.g-install__go[hidden] { display: none; }
	.g-install__x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #aab2c3; }
	.g-install__x svg { width: 18px; height: 18px; }

	/* --- chips become a swipeable row (native chip scroller) --- */
	.g-filter { display: flex; flex-wrap: nowrap; gap: 8px; width: auto; max-width: none; margin: 0 calc(var(--gut) * -1) 22px; padding: 2px var(--gut); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; background: transparent; border: 0; border-radius: 0; -webkit-overflow-scrolling: touch; }
	.g-filter::-webkit-scrollbar { display: none; }
	.g-filter__ind { display: none; }
	.g-filter button { flex: none; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); scroll-snap-align: center; transition: background .25s, color .25s, box-shadow .25s; }
	.g-filter button.is-on { background: var(--navy); color: #fff; box-shadow: none; }

	/* short viewports (a phone on its side): the tab bar slides away while reading down, back on scroll up */
	@media (max-height: 520px) { .is-tabs-off .g-tabbar { transform: translateY(140%); } }

	/* ---------------------------------------------------------------- phones */
	@media (max-width: 767px) {
		:root { --hdr: 56px; --sec: 56px; --gut: 18px; }
		.g-logo img { height: 30px; }
		.g-header__cta { display: none !important; }
		/* the hero copy runs edge to edge on a phone: decorative dots would sit under the headline */
		.g-hero > .g-dots, .g-phero > .g-dots { display: none; }
		.g-tabbar { left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom); border-top: 1px solid rgba(255, 255, 255, .08); }
		.g-sheet__panel { left: 0; right: 0; bottom: 0; border-radius: 28px 28px 0 0; }
		.g-install { left: 10px; right: 10px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px); }

		/* content density & app-like cards */
		.g-head { margin-bottom: 26px; }
		.g-title { font-size: clamp(27px, 7.6vw, 36px); line-height: 1.1; }
		.g-title--xl { font-size: clamp(30px, 8.6vw, 40px); }
		.g-lead { font-size: 15px; margin-top: 14px; }
		.g-hero { padding-top: calc(var(--hdr) + env(safe-area-inset-top) + 28px); padding-bottom: 52px; }
		.g-hero__title { font-size: clamp(34px, 10vw, 46px); }
		.g-phero { padding-top: calc(var(--hdr) + env(safe-area-inset-top) + 36px); padding-bottom: 36px; }
		.g-phero__title { font-size: clamp(30px, 9vw, 40px); }
		.g-phero--compact .g-phero__title, .g-phero--article .g-phero__title { font-size: clamp(26px, 7.6vw, 34px); }
		.g-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
		.g-pcard { border-radius: 18px; }
		.g-pcard__media { aspect-ratio: 4 / 4.7; }
		.g-pcard__body { padding: 12px 12px 14px; }
		.g-pcard__body h3 { font-size: 14px; line-height: 1.25; }
		.g-pcard__body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 12.5px; line-height: 1.45; }
		.g-pcard__more { display: none; }
		.g-pcard__tag { left: 8px; top: 8px; padding: 4px 9px; font-size: 9.5px; letter-spacing: .08em; }
		.g-pj { border-radius: 20px; }
		.g-pj--rail { flex-basis: 78vw; }
		.g-why__card, .g-post, .g-card--flat { border-radius: 20px; }
		.g-form { border-radius: 24px; padding: 22px 18px; }

		/* product page: the CTA bar floats above the tab bar */
		.g-sticky { display: flex; left: 10px; right: 10px; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px); padding: 10px 10px 10px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); }
		body.single-gerha_product .g-footer { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 78px); }
	}

	/* --------------------------------------------------------------- tablets */
	@media (min-width: 768px) {
		:root { --tab-h: 68px; --hdr: 64px; --sec: clamp(64px, 8vw, 96px); --gut: 28px; }
		.g-footer { padding-bottom: calc(var(--tab-h) + 36px + env(safe-area-inset-bottom)); }
		.g-logo img { height: 34px; }
		.g-header__tools { gap: 12px; }
		.g-header__cta { padding-inline: 20px; }

		/* floating tab bar, centred */
		.g-tabbar { left: 0; right: 0; margin-inline: auto; width: min(580px, calc(100% - 32px)); bottom: calc(12px + env(safe-area-inset-bottom)); height: var(--tab-h); padding: 6px 10px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .85); }
		.g-tab { font-size: 11.5px; }
		.g-tab__pill { width: 58px; height: 32px; margin-left: -29px; border-radius: 17px; }
		.g-tab--chat .g-tab__fab { width: 58px; height: 58px; margin-top: -28px; }

		/* centred sheet that floats above the tab bar area */
		.g-sheet { --sheet-pad: 24px; }
		.g-sheet__panel { left: 0; right: 0; margin-inline: auto; width: min(660px, calc(100% - 32px)); bottom: calc(12px + env(safe-area-inset-bottom)); max-height: calc(100svh - 96px); border-radius: 30px; padding-bottom: 26px; }
		.g-sheet__grid { grid-template-columns: repeat(3, 1fr); }
		.g-sheet__head h2 { font-size: 24px; }

		.g-install { left: 0; right: 0; margin-inline: auto; width: min(540px, calc(100% - 32px)); bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom) + 12px); }

		/* denser catalogue */
		.g-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
		.g-pcard__media { aspect-ratio: 4 / 4.9; }
		.g-pcard__body { padding: 16px 16px 18px; }
		.g-pcard__body h3 { font-size: 16px; }
		.g-pcard__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.55; }
		.g-title { font-size: clamp(32px, 4.8vw, 46px); line-height: 1.1; }
		.g-hero { padding-top: calc(var(--hdr) + env(safe-area-inset-top) + 40px); }
		.g-phero { padding-top: calc(var(--hdr) + env(safe-area-inset-top) + 56px); padding-bottom: 56px; }

		/* product page: CTA bar floats above the tab bar, centred */
		.g-sticky { display: flex; left: 0; right: 0; margin-inline: auto; width: min(620px, calc(100% - 32px)); bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom) + 12px); padding: 10px 10px 10px 18px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); }
		body.single-gerha_product .g-footer { padding-bottom: calc(var(--tab-h) + 36px + env(safe-area-inset-bottom) + 84px); }
	}
}