/* Pro Windows & Doors — site styles.
   The look is the existing site's, carried over rule for rule (same blue, same Nexa type, same spacing); what
   changed is underneath: one file instead of eight, no jQuery plugins and no icon font. Parts that are new are
   marked NEW (the conservatories choice on the home page, the enquiry form, the phone menu, the colour popup, the
   product ranges copied from OMEGA's viewer, Building Product Information). */

@font-face { font-family: "NexaExtraLight"; src: url("/fonts/NexaExtraLight.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "NexaTextHeavy"; src: url("/fonts/NexaTextHeavy.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "nexa_light"; src: url("/fonts/NexaLight.woff2") format("woff2"); font-display: swap; }

/* ------------------------------------------------------------------ reset */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, address, em, img, small, strong, sub, sup, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, figure, figcaption, footer, header, nav, section, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, nav, section { display: block; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body { line-height: 1; font-family: "NexaExtraLight", "Segoe UI", system-ui, sans-serif; color: #000; background: #fff; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; width: 100%; height: auto; }
sup { vertical-align: super; font-size: .7em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #044f88; outline-offset: 3px; }
[hidden] { display: none !important; }
.i { flex: none; width: 20px; height: 20px; }   /* NEW: the line icons (icons.mjs) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 2000; background: #044f88; color: #fff; padding: 12px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ layout */
.wrapper-wide { max-width: 95%; margin: 0 auto; }
.wrapper { max-width: 85%; margin: 0 auto; width: 100%; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 30px; }
.text-right { text-align: right !important; }
.max-80 { max-width: 80%; }
.m-t-50 { margin-top: 50px; }

/* ------------------------------------------------------------------ top bar and header */
.top-nav { background: #044f88; font-size: 12px; color: #a1a1a1; padding: 15px 0; }
.top-nav p a { color: #fff; text-decoration: none; }
.top-nav.points .wrapper-wide { text-align: center; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.top-nav.points p { line-height: 1.3; }
header { background: #fff; padding: 0; position: relative; z-index: 100; transition: background .6s ease; }
header .logo { width: 150px; display: flex; align-items: center; }
header .logo a { width: 100%; }
header .logo img { background: none !important; }
header .nav-wrapper { display: flex; justify-content: flex-end; align-items: center; }
header .grid { grid-template-columns: 450px 1fr; }
header .wrapper { max-width: 95%; }
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav ul li { display: inline-block; }
header nav ul li a { color: #044f88; text-decoration: none; display: block; margin-left: 10px; font-size: 18px; }

/* the Products menu: a full-width panel with a column per range */
.menu > ul { margin: 0 auto; width: 100%; list-style: none; padding: 0; display: flex; justify-content: flex-end; }
.menu > ul > li { padding: 0; margin: 0 12px; }
.menu > ul > li a { text-decoration: none; padding: 35px 0; display: block; color: #044f88; }
.menu > ul > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 #044f88; }
.menu > ul > li > ul { display: none; width: 100%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(85, 85, 85, .7); padding: 20px; position: absolute; z-index: 99; left: 0; top: 88px; margin: 0; list-style: none; text-align: center; }
.menu > ul > li:hover > ul, .menu > ul > li:focus-within > ul, .menu > ul > li.open > ul { display: flex; justify-content: center; animation: menu-in .15s ease; }
@keyframes menu-in { from { opacity: 0; } }
.menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; width: 33.33%; background: none; text-align: left; line-height: 1.5; display: block; }
.menu > ul > li > ul > li a { color: #fff; padding: 5px 0; width: 80%; margin: 0 auto; display: block; border-bottom: 2px solid #fffdfd99; }
.menu > ul > li > ul > li > a { font-family: "NexaTextHeavy"; padding: 35px 0 12px 0; text-transform: uppercase; }
.menu > ul > li > ul > li > ul { display: block; margin: 10px auto; width: 80%; list-style: none; padding: 10px 0 20px 0; }
.menu > ul > li > ul > li > ul > li { display: block; width: 100%; padding: 5px 0; margin: 0; font-size: .8em; }
.menu > ul > li > ul > li > ul > li a { border: 0; margin-left: 0; width: 100%; font-size: 16px; }
header nav ul li ul li a:hover { color: #d98a25; }
.hamburger { display: none; }

/* ------------------------------------------------------------------ banners */
.banner { position: relative; height: 96vh; overflow: hidden; }
.banner.home { background: #000; }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner.home > img { opacity: .8; }
.banner-overlay { position: absolute; width: 100%; height: 100%; top: 0; }
.banner.home .banner-overlay > .wrapper { display: flex; height: 85%; align-items: flex-end; }
.banner article { padding: 4vw 0; color: #fff; position: relative; z-index: 11; }
.banner p { text-transform: uppercase; letter-spacing: 2px; font-size: 20px; }
.banner h1 { font-size: 35px; margin-top: 15px; max-width: 600px; line-height: 44px; }
.banner.standard { height: 60vh; background: #000; }
/* the large Ω on the right of every inner banner */
.banner.standard::after { content: ""; width: 758px; height: 60vh; display: block; top: 0; position: absolute; right: -460px; z-index: 10; background: #fff7; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: url(/uploads/site/icon-overlay.svg); mask-image: url(/uploads/site/icon-overlay.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.banner.standard .wrapper { display: flex; align-items: flex-end; height: 100%; }
.banner.standard > img { opacity: .7; }

.breadcrumb { padding: 20px 0 0 0; text-decoration: none; color: #044f88; font-size: 14px; display: inline-block; margin: 0 5px; }
.breadcrumb.current { color: #044f88; }
.breadcrumb a { text-decoration: none; color: #a1a1a1; }

/* ------------------------------------------------------------------ content blocks */
blockquote { background-color: #dff0f7; border-radius: 2px; padding: 20px 30px 5px 30px; display: block; position: relative; font-size: 17px; margin: 40px 0; }
.block { padding: 6vw 0 8vw; position: relative; }
.block h5, .overlay-slide h5, .your-home-wrapper > h5 { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; line-height: 1.5; color: #a1a1a1; }
.block h2 { font-size: 2.7vw; line-height: 1.4; max-width: 85%; margin-bottom: 2.5vw; }
.block h3 { font-size: 24px; margin-top: 15px; line-height: 34px; max-width: 75%; }
.block h4 { font-size: 40px; margin-top: 15px; max-width: 600px; line-height: 34px; }
.block p { font-size: 17px; line-height: 1.6; margin: 0 0 25px 0; }
.block p a { text-decoration: none; border-bottom: 1px solid #044f88; color: #000; font-weight: 600; }
.block p strong { font-weight: normal; font-family: "NexaTextHeavy"; }
.block.two .right-col h3 { font-family: "NexaTextHeavy"; margin: 25px 0; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }
.block ul { list-style: none; margin: 20px 0; }
.block ul li { font-size: 17px; line-height: 1.6; margin: 0 0 5px 0; position: relative; padding-left: 20px; }
.block ul > li > a { border-bottom: 1px solid #044f88; color: #000; text-decoration: none; }
.block ul li::before { content: ""; position: absolute; background: #044f88; left: 0; top: 13px; height: 2px; width: 8px; }
.block ul li::after { content: ""; position: absolute; background: #044f88; left: 3px; top: 10px; height: 8px; width: 2px; }
.block.two h2 { max-width: 100%; font-size: 33px; }
.block.two .button { margin-top: 30px; display: inline-block; }
.with-images img { border-radius: 3px; margin: 3vw 0; position: relative; }
.left-col h3 { margin-bottom: 25px; }
.left-col small { line-height: 1.4; font-size: 14px; display: block; max-width: 80%; margin-top: 10px; }
.block.no-padding-top { padding-top: 0; }
.block.no-padding-bottom { padding-bottom: 0; }
.block .grid { grid-template-columns: 450px 1fr; }
.quality { padding: 6vw 0 0; }
.dark { background: #464646; }
.blue { background: #044f88; }
.dark.block article, .blue.block article { color: #fff; }
.dark.block a, .blue.block a { color: #fff; border-color: #fff; }

/* the underlined link with the small arrow */
.button { border-bottom: 1px solid #222; font-weight: normal !important; color: #222; text-decoration: none; padding: 10px 45px 10px 0; font-size: 24px; position: relative; line-height: 1.2; background: none; cursor: pointer; }
.button::after { content: ""; width: 14px; height: 14px; position: absolute; bottom: 17px; right: 4px; display: block; transition: .5s; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M1.5 1.5l11 11M12.5 4.5v8h-8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M1.5 1.5l11 11M12.5 4.5v8h-8'/%3E%3C/svg%3E") center / contain no-repeat; }
.button:hover { color: #044f88 !important; }
.button-2 { border: none; background: #044f88; border-radius: 50px; color: #fff !important; padding: 10px 20px; font-size: 17px; margin-top: 15px; display: inline-block; text-decoration: none !important; font-weight: normal !important; cursor: pointer; }
.block p a.button-2 { border-bottom: 0; }

/* ------------------------------------------------------------------ home: the picture slider */
.slider { margin-bottom: 50px; }
.slider h3 { color: #fff; font-size: 24px; font-weight: bold; margin-top: 15px; }
.slider a { display: block; height: 100%; overflow: hidden; background: #222; position: relative; }
.slides { display: flex; gap: 50px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: calc(25vw + 12.5px); cursor: grab; }
.slides::-webkit-scrollbar { display: none; }
.slides.dragging { scroll-snap-type: none; cursor: grabbing; scroll-behavior: auto; }
.slide { flex: 0 0 calc(50vw - 25px); scroll-snap-align: center; height: 450px; position: relative; }
.slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.overlay-slide { position: absolute; width: 100%; height: 100%; top: 0; display: flex; align-items: flex-end; justify-content: flex-start; }
.overlay-slide::after { content: ""; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 100%); height: 100%; width: 100%; z-index: 80; left: 0; position: absolute; }
.overlay-slide article { padding-bottom: 3vw; position: relative; z-index: 99; margin-left: 50px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: -42px; position: relative; z-index: 100; height: 12px; align-items: center; pointer-events: none; }
.dots button { pointer-events: auto; width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #fff; cursor: pointer; transition: width .2s, height .2s; }
.dots button[aria-current="true"] { width: 12px; height: 12px; }
.slider + .block { margin-top: 30px; }

/* ------------------------------------------------------------------ product ranges */
.your-home-wrapper { margin-top: 3vw; }
.your-home-wrapper h5 { margin-bottom: 30px; }
.your-home-wrapper > h3 { font-size: 24px; line-height: 34px; margin-top: 3vw; }
.your-home-wrapper > p { font-size: 17px; line-height: 1.6; margin: 0 0 25px 0; }
.series-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); grid-gap: 30px; margin-bottom: 50px; }
.series-grid .feature-item:only-child { max-width: 49%; }
.feature-item { position: relative; background: #000; height: 450px; cursor: pointer; transition: opacity .3s; }
.feature-item a { display: block; height: 100%; color: #fff; text-decoration: none; }
.feature-item h2 { margin-bottom: 10px; line-height: 1; font-size: 30px; max-width: none; }
.feature-item p { margin: 0; }
.feature-item article { position: absolute; bottom: 30px; left: 30px; z-index: 99; color: #fff; text-decoration: none; }
.feature-item figure img { margin: 0; opacity: .8; object-fit: cover; position: absolute; width: 100%; height: 100%; border-radius: 0; }
.feature-item:hover { opacity: .5; }
/* NEW: a range's products, as OMEGA's product viewer shows them (it used to be that viewer in a frame). The tiles are
   OMEGA's: the frame drawing on the gradient, the kind of product, its name. */
.omega-range h5 { margin-bottom: 30px; }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; }
.product-item { display: block; width: 100%; padding: 0; margin: 0; border: 1px solid #eee; border-radius: 0; background: #545a63 var(--tile-bg, none) center / cover; color: #fff; text-align: left; font: inherit; }
button.product-item { cursor: pointer; }
.product-item figure { overflow: hidden; aspect-ratio: 1000 / 773; }
.product-item figure img { height: 100%; object-fit: contain; transition: transform .6s ease; }
button.product-item:hover figure img, button.product-item:focus-visible figure img { transform: scale(1.04); }
.product-item .pi-text { display: block; padding: 25px 30px 30px; border-top: 1px solid rgba(136, 136, 136, .6); }
.product-item small { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; line-height: 1.5; color: #b4b4b4; }
.product-item strong { display: block; margin-top: 12px; text-transform: uppercase; font-size: 14px; line-height: 1.2; font-family: "NexaTextHeavy"; font-weight: normal; }
.block p.omega-src { margin: 25px 0 0; font-size: 14px; color: #666; }
.block p.omega-src a { font-weight: normal; }
/* NEW: the product popup — the colour on the frame (as the colour viewer below) beside the product and its swatches */
.pv-card { background: #fff; color: #000; padding: 44px; width: min(1100px, 94vw); max-height: 94dvh; overflow: auto; position: relative; }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px 40px; align-items: start; }
.pv figure { position: relative; border: 1px solid #eee; overflow: hidden; margin: 0; background: #fff; }
.pv .overlay-colour { display: block; overflow: hidden; aspect-ratio: 1000 / 773; mix-blend-mode: multiply; }
.pv .overlay-colour img { width: 100%; height: 100%; object-fit: cover; }
.pv .mask, .pv .layer { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.pv .layer { mix-blend-mode: multiply; }
.pv-colour-name { background: #444; color: #fff; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; line-height: 1.3; text-align: center; padding: 10px; min-height: 34px; }
.pv article h5 { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; line-height: 1.5; color: #a1a1a1; margin-bottom: 18px; }
.pv article h3 { font-family: "NexaTextHeavy"; text-transform: uppercase; font-size: 24px; line-height: 1.1; margin-bottom: 20px; }
.pv article p { font-size: 15px; line-height: 23px; margin-bottom: 20px; }
.pv article .pv-pick { font-family: "NexaTextHeavy"; margin-bottom: 14px; }
.pv .swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.pv .swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #cdcdcd; padding: 0; overflow: hidden; background: #eee; cursor: pointer; }
.pv .swatch img { width: 100%; height: 100%; object-fit: cover; }
.pv .swatch[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #044f88; }
.pv .pv-links .link { text-decoration: none; border-bottom: 1px solid #0399dd; color: inherit; font-family: "NexaTextHeavy"; margin-right: 22px; }
.pv .actions { margin-bottom: 18px; }
.pv article .pv-note { font-size: 12px; line-height: 1.4; color: #333; margin: 0; }
.pv-note b { font-family: "NexaTextHeavy"; font-weight: normal; }
/* NEW: Enquire Now beside the Building Product Information (BPIR) button */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.actions .button-2 { margin-top: 0; flex: none; white-space: nowrap; line-height: 1.3; }
.block p.actions { margin-top: 15px; }
.button-2.ghost { background: transparent; color: #044f88 !important; box-shadow: inset 0 0 0 1.5px #044f88; }
.button-2.ghost:hover { background: #044f88; color: #fff !important; }
.bpir-btn::before { content: ""; display: inline-block; width: 13px; height: 15px; margin: 0 7px -2px 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 15' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M1 1h7l4 4v9H1z M8 1v4h4 M3.5 9h6 M3.5 11.5h6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 15' fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M1 1h7l4 4v9H1z M8 1v4h4 M3.5 9h6 M3.5 11.5h6'/%3E%3C/svg%3E") center / contain no-repeat; }
.bpir-btn small, .left-col .bpir-btn small { display: inline; max-width: none; margin: 0 0 0 3px; font-size: 11px; line-height: inherit; letter-spacing: 1px; opacity: .75; }
/* NEW: the Building Product Information documents */
.block ul.docs { margin: 10px 0 30px; border-top: 1px solid #ddd; }
.block ul.docs li { padding: 0; margin: 0; border-bottom: 1px solid #ddd; }
.block ul.docs li::before, .block ul.docs li::after { display: none; }
.block ul.docs > li > a { display: flex; align-items: center; gap: 18px; padding: 18px 4px; border: 0; color: #000; text-decoration: none; }
.block ul.docs > li > a::before { content: ""; flex: 0 0 26px; height: 32px; background: #044f88; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 15' fill='none' stroke='%23000' stroke-width='.9'%3E%3Cpath d='M1 1h7l4 4v9H1z M8 1v4h4 M3.5 9h6 M3.5 11.5h6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 15' fill='none' stroke='%23000' stroke-width='.9'%3E%3Cpath d='M1 1h7l4 4v9H1z M8 1v4h4 M3.5 9h6 M3.5 11.5h6'/%3E%3C/svg%3E") center / contain no-repeat; }
.docs .doc-title { flex: 1; font-size: 17px; line-height: 1.4; }
.docs .doc-meta { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #777; white-space: nowrap; }
.block ul.docs > li > a:hover .doc-title { color: #044f88; }
/* NEW: the Products menu has four columns (Resources added) */
.menu > ul > li > ul > li { width: 25%; }

/* ------------------------------------------------------------------ colour range */
.range-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 20px; border-bottom: 2px solid #0399dd; padding: 0 0 2vw 0; margin-bottom: 2vw; }
.colours figure { width: 100%; max-height: 150px; overflow: hidden; margin-bottom: 10px; border-radius: 3px; position: relative; }
.colours figure > img { margin: 0 0 20px 0; height: 150px; object-fit: cover; }
.colours h2 { font-size: 17px; margin-bottom: 0; line-height: 1.4; max-width: 100%; }
.colours p { font-size: 14px; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px; line-height: 1.6; }
.colours h5 { margin-bottom: 10px; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #a1a1a1; line-height: 1.5; }
.window-icon { position: absolute !important; bottom: 10px; right: 10px; width: 35px; height: 35px; z-index: 9; border: 1px solid #0094d8; display: block; border-radius: 50% !important; background: #fff; overflow: hidden; }
.window-icon img { margin: 3px 0 0 0 !important; display: block; }
/* the colour on a frame: the swatch fills the picture, a mask leaves it showing only through the frame, and the line drawing goes on top */
.viewer-card figure { position: relative; border: 1px solid #eee; overflow: hidden; margin: 0; }
.viewer-card .overlay-colour { display: block; overflow: hidden; aspect-ratio: 500 / 386; mix-blend-mode: multiply; }
.viewer-card .overlay-colour img { margin: 0; width: 100%; height: 100%; object-fit: cover; }
.viewer-card .mask, .viewer-card .layer { position: absolute; top: 0; left: 0; width: 100%; height: auto; margin: 0; }
.viewer-card .layer { mix-blend-mode: multiply; }
.with-images .fixed-logo { max-width: 150px; margin: 0; }

/* NEW: the coloured frame opens in a simple viewer (was a jQuery lightbox) */
.viewer { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; color: #fff; }
.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: rgba(30, 30, 30, .87); }
.viewer-card { background: #fff; color: #000; padding: 40px; width: min(600px, 92vw); position: relative; }
.viewer-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; background: none; cursor: pointer; font-size: 24px; line-height: 1; color: #444; }
.viewer-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: rgba(30, 30, 30, .6); color: #fff; cursor: pointer; font-size: 18px; }
.viewer-nav.prev { left: 6px; } .viewer-nav.next { right: 6px; }
.viewer-count { position: fixed; top: 10px; left: 10px; font-size: 13px; color: #ccc; }

/* ------------------------------------------------------------------ sitemap page */
.sitemap { padding: 50px 0 !important; }
.sitemap .grid { display: block; }
.sitemap .max-80 { margin: 0 auto; }
.section__wrap { display: flex; justify-content: space-around; }
.sitemap .section__wrap ul ul { margin: 0; }
.sitemap .section__wrap ul ul li { margin-left: -20px; }
.sitemap .section__wrap ul li.parent > a { font-size: 17px; line-height: 1.6; margin: 0 0 5px 0; display: inline-block; }

/* ------------------------------------------------------------------ forms (the site's own form, same fields as before) */
.block form .grid { grid-template-columns: 1fr 1fr; grid-gap: 0 30px; }
form .button-2 { margin-top: 25px; }
.form-field { position: relative; transition: .3s; margin: 20px 0 0 0; }
.form-field label { font-size: 16px; font-family: "NexaTextHeavy"; margin-bottom: 10px; display: block; }
.form-field label i { font-style: normal; color: #044f88; }
.form-field input, .form-field textarea, .form-field select { border: 1px solid #ccc; display: block; width: 100%; padding: 15px; font-family: "NexaExtraLight", sans-serif; font-size: 16px; background: #fff; border-radius: 0; }
.form-field textarea { height: 150px; line-height: 1.5; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 0; border-color: #044f88; box-shadow: 0 0 0 1px #044f88; }
.form-field-missing input, .form-field-missing textarea { border: 1px solid #f1b7bf !important; }
.form-field em { display: block; font-style: normal; font-size: 14px; color: #a11d2d; margin-top: 6px; line-height: 1.3; }
.form-field em:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.highlight_message p { color: #61161f; text-align: center; padding: 15px; background-color: #fdd; border-radius: 2px; border: 1px solid #f1b7bf; width: 100%; margin: 20px auto 0; font-size: 16px; }
.success-message p { width: 100%; text-align: center; padding: 20px; margin: 20px auto 0; background: #2dd284; border-radius: 2px; color: #fff; border: 1px solid #2dd284; font-size: 17px; line-height: 1.5; }
.form-note { font-size: 14px !important; color: #666; margin-top: 14px !important; }

/* ------------------------------------------------------------------ NEW: windows and doors, or conservatories */
.choice { padding: 0 0 6vw; }
.choice h5 { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; line-height: 1.5; color: #a1a1a1; margin-bottom: 30px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; }
.choice .feature-item { height: 520px; }
.choice .feature-item article { right: 30px; }
.choice .feature-item h2 { font-size: 38px; margin-bottom: 14px; }
.choice .feature-item p { font-size: 18px; line-height: 1.4; max-width: 30ch; }
.choice .feature-item small { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; margin-bottom: 14px; opacity: .85; }
.choice .feature-item .go { display: inline-block; margin-top: 22px; border-bottom: 1px solid #fff; padding-bottom: 6px; font-size: 18px; }
.choice .feature-item:hover { opacity: 1; }
.choice .feature-item figure img { transition: transform .8s ease, opacity .3s; }
.choice .feature-item:hover figure img { transform: scale(1.03); opacity: .65; }
.choice .feature-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7) 100%); z-index: 1; pointer-events: none; }
.options { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; margin-top: 30px; }
.option { background: #f5f5f5; padding: 30px; border-top: 2px solid #044f88; }
.option h4 { font-family: "NexaTextHeavy"; font-size: 18px; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 14px; max-width: none; }
.option p { font-size: 16px; line-height: 1.6; margin: 0; }
/* NEW: conservatory styles — the option tiles above with a picture on top, in groups */
.style-group + .style-group { margin-top: 50px; }
.style-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-top: 30px; }
.block .style-head h3 { font-family: "NexaTextHeavy"; font-size: 18px; line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; margin: 0; max-width: none; }
.block .style-head p { margin: 0; font-size: 16px; color: #666; }
.styles { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; margin-top: 20px; }
.style { display: flex; flex-direction: column; scroll-margin-top: 30px; }
.style figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.style figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.style:hover figure img { transform: scale(1.03); }
.style .option { flex: 1; display: flex; flex-direction: column; }
.style .option p { flex: 1; }
.block .style-go { align-self: flex-start; margin-top: 20px; padding-bottom: 5px; border-bottom: 1px solid #044f88; color: #000; font-size: 16px; text-decoration: none; }
.style:target .option { background: #e9f1f8; }
.with-images .cons-logo { width: 96px; height: auto; margin: 0 0 20px; border-radius: 0; }
.enquire-pic { margin: 40px 0 0; }
.enquire-pic img { display: block; width: 100%; height: auto; border-radius: 3px; }
.block.enquire { background: #f5f5f5; padding: 5vw 0 6vw; }
.block.enquire h2 { font-size: 33px; max-width: 100%; }

/* ------------------------------------------------------------------ footer */
footer { padding: 4vw 0 0 0; background: #eee; }
footer figure { width: 230px; margin-bottom: 3vw; }
footer small.kick { text-transform: uppercase; letter-spacing: 2px; font-size: 14px; color: #a1a1a1; margin-bottom: 20px; display: block; }
footer h4 { text-transform: uppercase; letter-spacing: 2px; font-size: 14px; color: #a1a1a1; margin-bottom: 20px; }
footer ul, .links { list-style: none; margin: 0; padding: 0; }
footer .links { text-align: right; }
footer .links li { display: inline-block; margin-left: 10px; }
footer .links a { color: #777; font-size: 12px; text-decoration: none; }
footer .grid.browse { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
footer .browse ul { margin-bottom: 20px; }
footer .browse li a { display: block; padding: 5px 0; color: #777; }
footer .button { border: none; background: #044f88; border-radius: 50px; color: #fff; padding: 10px 20px; font-size: 17px; }
footer .button:hover { color: #fff !important; }
footer .button::after { display: none; }
footer h2 { font-size: 2vw; line-height: 1.5; margin-bottom: 35px; max-width: 85%; }
footer p { font-size: 17px; line-height: 1.5; margin: 20px 0; color: #777; }
footer a { text-decoration: none; color: inherit; }
footer a:hover { color: #044f88 !important; }
.btm-nav { padding: 20px 0; border-top: 1px solid #777; margin-top: 3vw; align-items: center; }
.logos-wrapper { padding: 15px 0; display: flex; justify-content: left; margin-top: 50px; }
.logos-wrapper > div { margin: 0 15px; mix-blend-mode: multiply; align-items: center; display: flex; }
.logos-wrapper img { width: auto; height: 90px; background: none !important; }
.social-links a { display: inline-block; color: #000; opacity: .4; }
.social-links svg { width: 18px; height: 18px; display: block; }
.demo-note { background: #044f88; color: #fff; text-align: center; font-size: 13px; line-height: 1.4; padding: 10px 5%; }

/* ------------------------------------------------------------------ NEW: phone menu (same blue slide-over as before, without jQuery) */
.mmenu { display: none; }
.hamburger { width: 30px; height: 25px; border: 0; background: none; padding: 0; position: relative; cursor: pointer; }
.hamburger span, .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: #044f88; transition: transform .25s, opacity .2s; }
.hamburger::before { top: 2px; } .hamburger span { top: 11px; } .hamburger::after { top: 20px; }
.hamburger[aria-expanded="true"]::before { transform: translateY(9px) rotate(45deg); }
.hamburger[aria-expanded="true"]::after { transform: translateY(-9px) rotate(-45deg); }
.hamburger[aria-expanded="true"] span { opacity: 0; }

/* ------------------------------------------------------------------ smaller screens (the breakpoints the site already used) */
@media screen and (min-width: 2500px) {
  .block h2 { font-size: 2vw; }
  .wrapper, .series-grid { max-width: 1480px; }
}
@media screen and (max-width: 1400px) {
  header .grid { grid-template-columns: 1fr 5fr; }
  header nav ul li a { font-size: 15px; }
  .menu > ul > li > ul { top: 85px; }
}
@media screen and (max-width: 1350px) { .banner { height: 120vh; } .banner.standard { height: 60vh; } }
@media screen and (max-width: 1200px) {
  .block .grid { grid-template-columns: 300px 1fr; }
  .block .grid .max-80 { max-width: 100%; }
  .block h3 { max-width: 100%; line-height: 1.5; font-size: 20px; }
  .block h2, .block.two h2, .button { font-size: 2vw; }
  .block h4 { font-size: 20px; }
  .series-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .options { grid-template-columns: 1fr 1fr; }
  .styles { grid-template-columns: 1fr 1fr; grid-gap: 20px; }
}
@media screen and (max-width: 1024px) {
  .enquire-pic { display: none; }
  html { scroll-padding-top: 130px; }
  .top-nav-above-menu { position: fixed; z-index: 999; top: 0; max-height: 42px; width: 100%; }
  header { position: fixed; top: 42px; width: 100%; z-index: 999; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); padding: 15px 0; }
  header .grid { grid-template-columns: 1fr auto; align-items: center; }
  header .logo { width: 120px; }
  body { padding-top: 120px; }
  .menu > ul { display: none; }
  .hamburger { display: block; }
  .mmenu { display: block; position: fixed; inset: 120px 0 0 0; z-index: 998; background: #044f88; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
  .mmenu.active { opacity: 1; visibility: visible; }
  .mmenu ul { list-style: none; margin: 0; padding: 0; }
  .mmenu .panel { position: absolute; inset: 0; overflow-y: auto; background: #044f88; transform: translateX(100%); transition: transform .5s ease; }
  .mmenu .panel.root, .mmenu .panel.on { transform: none; }
  .mmenu li { border-bottom: .5px solid transparent; border-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #fff 20%, #fff 50%, #fff 80%, rgba(0, 0, 0, 0) 100%) 0 0 1 0; }
  .mmenu a, .mmenu button { color: #fff; display: block; width: 100%; text-align: left; font: 300 18px/140% "nexa_light", sans-serif; padding: 20px 15px; text-decoration: none; background: none; border: 0; cursor: pointer; }
  .mmenu button.more { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M1.5 1.5l9 8.5-9 8.5'/%3E%3C/svg%3E") no-repeat 95% center / 10px auto; }
  .mmenu button.back { padding-left: 55px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%23fff' stroke-width='1.1' opacity='.75'%3E%3Cpath d='M23 8H2M8 1.5 1.5 8 8 14.5'/%3E%3C/svg%3E") no-repeat 15px center / 22px auto; }
  body.mm-open { overflow: hidden; }

  .banner.home { height: 55vh; }
  .banner.standard { height: 45vh; }
  .banner.standard::after { width: 538px; right: -271px; height: 45vh; }
  .banner p { font-size: 14px; line-height: 1.5; max-width: 75%; }
  .banner h1 { font-size: 24px; max-width: 600px; line-height: 32px; }
  .breadcrumb { padding: 10px 0 0 0; font-size: 11px; margin: 0; }
  .max-80 { max-width: 100%; }
  .top-nav p { text-align: center; }
  .top-nav.points .wrapper-wide { grid-template-columns: 1fr; grid-gap: 14px; }
  .block .grid { grid-template-columns: 1fr; }
  .block h2 { font-size: 30px; max-width: 100%; margin-bottom: 30px; }
  .block.two h2 { font-size: 25px; }
  .block h4 { margin-top: 0; }
  .button { font-size: 20px; }
  .home-slider { margin-top: 30px; }
  .slides { gap: 20px; padding-inline: 7.5vw; }
  .slide { flex-basis: 85vw; height: 300px; }
  .dots { display: none; }
  .slider h3 { font-size: 15px; }
  .slider { margin-bottom: 20px; }
  .overlay-slide article { margin: 0 auto; width: 85%; }
  .series-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .series-grid .feature-item:only-child { max-width: none; }
  .feature-item { height: 200px; }
  .feature-item h2 { font-size: 20px !important; margin-bottom: 10px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice .feature-item { height: 320px; }
  .choice .feature-item h2 { font-size: 28px !important; }
  .logos-wrapper { padding: 25px 5%; }
  .logos-wrapper > div { margin: 0 25px; justify-content: center; }
  .btm-nav { grid-template-columns: 1fr 4fr; }
  footer .browse li a { padding: 2px 0; }
  footer .grid.browse { grid-column: span 2; }
  footer .button { display: inline-block; }
  footer > .wrapper.grid { align-items: baseline; }
  footer h2 { font-size: 24px; }
  .section__wrap { flex-direction: column; }
  .products-grid { grid-template-columns: 1fr 1fr; }
  .pv-card { padding: 40px 24px 24px; }
  .pv-grid { grid-template-columns: 1fr; }
  .pv .viewer-nav { top: auto; bottom: 8px; transform: none; z-index: 2; }
}
@media screen and (max-width: 600px) {
  .banner.home .banner-overlay > .wrapper { height: 70%; }
  .block h2 { font-size: 20px; }
  .block h3 { margin-top: 0; max-width: none; }
  .block p:last-child { margin-bottom: 0; }
  .block form .grid { grid-template-columns: 100%; }
  .feature-item article { bottom: 10px; left: 20px; }
  .options { grid-template-columns: 1fr; }
  .styles { grid-template-columns: 1fr; }
  .style .option { padding: 24px; }
  blockquote { padding: 20px 30px; }
  footer > .wrapper.grid { margin-bottom: 40px; grid-gap: 10px; }
  footer h4 { margin-bottom: 5px; }
  footer figure { width: 170px; margin: 12px auto 0; }
  footer article { text-align: center; }
  footer p { font-size: 12px; line-height: 1.3; }
  footer .grid.browse { display: none; }
  footer a { text-align: center; }
  footer h2 { font-size: 24px; line-height: 1.5; margin-bottom: 25px; max-width: 100%; text-align: center; }
  footer .button { margin: 0 auto; }
  footer > .wrapper > div { text-align: center; }
  .logos-wrapper { justify-content: center; }
  .logos-wrapper img { height: 80px !important; }
  .btm-nav { display: block; text-align: center; margin-bottom: 0 !important; }
  footer .links { text-align: center; margin-top: 25px; }
  footer .links li { margin-bottom: 10px; }
  .banner.standard::after { width: 358px; right: -217px; }
  .viewer-card { padding: 34px 14px 14px; }
  .products-grid { grid-gap: 12px; }
  .product-item .pi-text { padding: 16px 16px 20px; }
  .product-item small { font-size: 10px; letter-spacing: 1px; }
  .pv-card { padding: 38px 14px 18px; width: 96vw; max-height: 88dvh; }
  .docs .doc-title { font-size: 15px; }
}
/* ------------------------------------------------------------------ NEW: Pro Conservatories (Oct 2026)
   The landing page (/conservatories) and the style pages (/conservatories/<style>): the logo's navy and gold on warm
   cream, the site's Nexa type. Templates: views.mjs cons*; words and drawings: conservatories.mjs. */
.cv { --navy: #13265c; --gold: #d9b92e; --gold-ink: #7a6300; --cream: #f7f3ea; --ink: #14233a; --muted: #5d6c7c; --rule: #ece4d1; color: var(--ink); }
.cv h1, .cv h2 { font-family: "NexaExtraLight", sans-serif; font-weight: normal; letter-spacing: -.3px; }
.cv h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.15; margin: 0 0 18px; color: var(--navy); }
.cv h3 { font-family: "NexaTextHeavy", sans-serif; font-weight: normal; font-size: 18px; line-height: 1.3; color: var(--navy); }
.cv p { font-size: 17px; line-height: 1.65; }
.cv a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cv .cv-kicker { font-family: "NexaTextHeavy", sans-serif; font-size: 12px; letter-spacing: 2.5px; line-height: 1.4; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 14px; }
.cv-head { max-width: 760px; margin: 0 0 44px; }
.cv-head p { color: var(--muted); margin: 0; }
.cv-head a { color: var(--navy); }
.cv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: 999px; background: var(--navy); color: #fff; font: 16px/1.1 "NexaTextHeavy", sans-serif; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.cv-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(19, 38, 92, .25); }
.cv-btn.gold { background: var(--gold); color: var(--navy); }
.cv-btn.ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px currentColor; }
.cv-btn.ghost.light { color: #fff; }
.cv-btn.ghost:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 10px 24px rgba(0, 0, 0, .18); }
.cv-btn .i { width: 18px; height: 18px; }
.cv .cv-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.cv-brand { display: inline-flex; align-items: center; gap: 14px; margin: 0; font-family: "NexaTextHeavy", sans-serif; font-size: 13px !important; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.cv-logo { width: 64px; height: 64px; padding: 6px; border-radius: 16px; background: #fff !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.cv-brand.small .cv-logo { width: 48px; height: 48px; padding: 5px; border-radius: 12px; }
.cv .cv-lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; max-width: 54ch; margin: 0; opacity: .92; }

/* landing: the hero, over the long conservatory picture */
.cv-hero { position: relative; display: flex; align-items: flex-end; min-height: min(86vh, 820px); overflow: hidden; background: var(--navy); }
.cv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: cv-zoom 18s ease-out both; }
@keyframes cv-zoom { from { transform: scale(1.08); } }
.cv-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 20, 52, .88) 0%, rgba(10, 20, 52, .6) 42%, rgba(10, 20, 52, .08) 78%), linear-gradient(0deg, rgba(10, 20, 52, .55), transparent 45%); }
.cv-hero-in { position: relative; z-index: 1; padding: 130px 0 96px; color: #fff; }
.cv-hero h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1.05; max-width: 13ch; margin: 22px 0 24px; color: #fff; }
.cv-trust { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; background: var(--navy); color: #fff; }
.cv-trust li { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 16px; border-right: 1px solid rgba(255, 255, 255, .12); font-size: 15px; line-height: 1.3; }
.cv-trust li:last-child { border-right: 0; }
.cv-trust .i { flex: none; width: 26px; height: 26px; color: var(--gold); }

/* landing: intro */
.cv-intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: 6vw; align-items: center; padding: 6vw 0 7vw; }
.cv-intro-text p { color: var(--muted); margin: 0 0 18px; }
.cv-intro-pic { position: relative; margin: 0 22px 22px 0; }
.cv-intro-pic img { position: relative; z-index: 1; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.cv-intro-pic::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 2px solid var(--gold); border-radius: 20px; }

/* the style cards (landing; "more styles" on a style page) */
.cv-styles, .cv-why, .cv-others, .cv-faq { background: var(--cream); padding: 6vw 0; }
.cv-group + .cv-group { margin-top: 56px; }
.cv-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 22px; }
.cv .cv-group-head h3 { margin: 0; font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; }
.cv .cv-group-head p { margin: 0; font-size: 16px; color: var(--muted); }
.cv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cv-card { scroll-margin-top: 130px; }
.cv-card a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 20px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(20, 35, 58, .06), 0 14px 32px rgba(20, 35, 58, .08); transition: transform .35s ease, box-shadow .35s ease; }
.cv-card a:hover { transform: translateY(-5px); box-shadow: 0 2px 4px rgba(20, 35, 58, .06), 0 24px 48px rgba(20, 35, 58, .15); }
.cv-card figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.cv-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.cv-card a:hover figure img { transform: scale(1.06); }
.cv-badge { position: absolute; left: 16px; bottom: 16px; display: grid; place-items: center; width: 58px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .93); color: var(--navy); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cv-sil { width: 36px; height: 26px; }
.cv-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.cv .cv-card-group { margin: 0 0 8px; font-family: "NexaTextHeavy", sans-serif; font-size: 11px; letter-spacing: 2px; line-height: 1.4; text-transform: uppercase; color: var(--gold-ink); }
.cv .cv-card h3 { margin: 0 0 10px; font-size: 21px; }
.cv .cv-card-body p:not(.cv-card-group) { flex: 1; margin: 0 0 18px; font-size: 16px; color: var(--muted); }
.cv-more { display: inline-flex; align-items: center; gap: 6px; font: 15px/1.2 "NexaTextHeavy", sans-serif; color: var(--navy); }
.cv-more .i { width: 18px; height: 18px; transition: transform .3s ease; }
.cv-card a:hover .cv-more .i { transform: translateX(4px); }
.cv-cards.small { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.cv-card.small .cv-card-body { padding: 16px 16px 18px; }
.cv .cv-card.small h3 { margin: 0 0 12px; font-size: 17px; }
.cv-card.small .cv-badge { left: 10px; bottom: 10px; width: 46px; height: 36px; }
.cv-card.small .cv-sil { width: 30px; height: 22px; }
.cv .cv-all { margin: 28px 0 0; }
.cv-all a, .cv-tile-link { display: inline-flex; align-items: center; gap: 6px; font-family: "NexaTextHeavy", sans-serif; text-decoration: none; }
.cv-all a { color: var(--navy); }
.cv-all .i, .cv-tile-link .i { width: 17px; height: 17px; }

/* landing: the styles side by side */
.cv-compare { padding: 6vw 0; }
.cv-table-wrap { overflow-x: auto; border-radius: 18px; box-shadow: 0 0 0 1px #e8e1d1, 0 14px 32px rgba(20, 35, 58, .06); }
.cv-table { width: 100%; min-width: 820px; border-collapse: collapse; background: #fff; }
.cv-table th, .cv-table td { padding: 17px 20px; border-bottom: 1px solid #efe9dc; text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; }
.cv-table thead th { background: var(--navy); color: #fff; font: 12px/1.3 "NexaTextHeavy", sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.cv-table tbody th { font-weight: normal; }
.cv-table tbody th a { display: flex; align-items: center; gap: 12px; color: var(--navy); font-family: "NexaTextHeavy", sans-serif; text-decoration: none; white-space: nowrap; }
.cv-table tbody th a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cv-table tbody tr:nth-child(even) { background: #fbf9f4; }
.cv-table tbody tr:last-child > * { border-bottom: 0; }
.cv-table .cv-sil { width: 32px; height: 23px; color: var(--gold-ink); }

/* options, why, steps: tiles of four */
.cv-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.cv-tile { padding: 30px 26px; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(20, 35, 58, .05), 0 12px 28px rgba(20, 35, 58, .06); }
.cv-ico { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 0 20px; border-radius: 16px; background: #f5ecca; color: var(--navy); }
.cv-ico .i { width: 27px; height: 27px; }
.cv .cv-tile h3 { margin: 0 0 10px; }
.cv .cv-tile p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.cv-tile-link { margin-top: 16px; font-size: 14px; color: var(--gold); }
.cv-options { padding: 6vw 0; background: var(--navy); color: #fff; }
.cv-options h2, .cv-options h3 { color: #fff !important; }
.cv-options .cv-head p { color: rgba(255, 255, 255, .75); }
.cv-options .cv-kicker { color: var(--gold) !important; }
.cv-options .cv-tile { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.cv-options .cv-ico { background: var(--gold); }
.cv-options .cv-tile p { color: rgba(255, 255, 255, .78); }
.cv-steps { padding: 6vw 0; }
.cv-steps ol li { position: relative; padding: 28px 8px 0 0; border-top: 2px solid var(--rule); }
.cv-steps ol li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.cv-step-n { display: block; margin: 0 0 14px; font: 44px/1 "NexaExtraLight", sans-serif; color: var(--gold-ink); }
.cv-steps .cv-ico { display: none; }
.cv .cv-steps h3 { margin: 0 0 10px; font-size: 19px; }
.cv .cv-steps li p { margin: 0; font-size: 15.5px; color: var(--muted); }

/* landing: questions */
.cv-faq-in { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5vw; align-items: start; }
.cv-faq-list details { margin: 0 0 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(20, 35, 58, .05), 0 8px 20px rgba(20, 35, 58, .04); }
.cv-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 24px; list-style: none; cursor: pointer; font: 17px/1.35 "NexaTextHeavy", sans-serif; color: var(--navy); }
.cv-faq-list summary::-webkit-details-marker { display: none; }
.cv-faq-list summary .i { flex: none; color: var(--gold-ink); transition: transform .3s ease; }
.cv-faq-list details[open] summary .i { transform: rotate(180deg); }
.cv .cv-faq-list details p { margin: 0; padding: 0 24px 22px; font-size: 16px; color: var(--muted); }

/* the enquiry (both kinds of page) */
.cv-enquire { padding: 6vw 0; background: var(--navy); color: #fff; }
.cv-enquire-in { display: grid; grid-template-columns: 1fr 1.25fr; gap: 5vw; align-items: start; }
.cv-enquire h2 { color: #fff; }
.cv-enquire .cv-kicker { color: var(--gold) !important; }
.cv-enquire-side > p { color: rgba(255, 255, 255, .8); margin: 0; }
.cv-contact { list-style: none; margin: 28px 0; padding: 0; }
.cv-contact li { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 16px; line-height: 1.4; }
.cv-contact .i { flex: none; color: var(--gold); }
.cv-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.cv-enquire-pic { margin: 8px 0 0; }
.cv-enquire-pic img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.cv-enquire-form { padding: 18px 38px 40px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.cv-enquire-form form .grid { grid-template-columns: 1fr 1fr; grid-gap: 0 22px; }
.cv-enquire-form .button-2 { margin-top: 26px; padding: 15px 34px; background: var(--navy); font-family: "NexaTextHeavy", sans-serif; }

/* a style page: the hero (words on navy, the picture beside) */
.cv-shero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(84vh, 800px); background: var(--navy); color: #fff; }
.cv-shero-text { display: flex; flex-direction: column; justify-content: center; padding: 72px 5vw 72px 7.5vw; }
.cv-shero h1 { font-size: clamp(38px, 4.3vw, 62px); line-height: 1.05; margin: 20px 0; color: #fff; }
.cv-shero-pic { position: relative; margin: 0; overflow: hidden; }
.cv-shero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: cv-zoom 18s ease-out both; }
.cv-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 40px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.cv-facts div { padding: 16px 18px 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.cv-facts dt { margin: 0 0 6px; font: 11px/1.3 "NexaTextHeavy", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.cv-facts dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, .9); }

/* a style page: the words beside the drawings of its shape */
.cv-shape { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5vw; align-items: center; padding: 6vw 0; }
.cv .cv-shape-text h2 { font-size: clamp(24px, 2.3vw, 34px); }
.cv-shape-text p { margin: 0 0 18px; color: var(--muted); }
.cv-drawing { margin: 0; padding: 26px; border-radius: 22px; background: var(--cream); }
.cv-drawing-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cv-svg { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; }
.cv-drawing figcaption { margin: 10px 0 0; text-align: center; font: 11px/1.3 "NexaTextHeavy", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-ink); }
.cv .cv-drawing-note { margin: 18px 0 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* a style page: "ideal for", over its picture */
.cv-ideal { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; padding: 6vw 0; }
.cv-ideal-pic { margin: 0; }
.cv-ideal-pic img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.cv-ideal-card { position: relative; margin-left: -70px; padding: 42px; border-radius: 22px; background: #fff; box-shadow: 0 26px 60px rgba(20, 35, 58, .15); }
.cv-ideal-card ul { list-style: none; margin: 0 0 28px; padding: 0; }
.cv-ideal-card li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #efe9dc; font-size: 19px; line-height: 1.3; color: var(--navy); }
.cv-ideal-card li .i { flex: none; color: var(--gold-ink); }
.cv-ideal-card p { margin: 0; }

/* the desktop menu's Conservatories panel */
.menu > ul > li > .mega-cons { display: none; position: absolute; top: 88px; left: 0; z-index: 99; width: 100%; grid-template-columns: 290px 1fr; gap: 40px; padding: 32px 5% 36px; background: rgba(19, 38, 92, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; }
.menu > ul > li:hover > .mega-cons, .menu > ul > li:focus-within > .mega-cons, .menu > ul > li.open > .mega-cons { display: grid; animation: menu-in .15s ease; }
.menu > ul > li > .mega-cons a { display: inline-flex; margin: 0; padding: 0; color: #fff; font-size: 15px; }
.menu > ul > li > .mega-cons a:hover { color: #fff; }
.mega-cons ul { list-style: none; margin: 0; padding: 0; }
.mega-cons-intro { align-self: center; color: #fff; }
.mega-cons-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 12px/1.3 "NexaTextHeavy", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #d9b92e; }
.mega-cons-logo { width: 46px; height: 46px; padding: 5px; border-radius: 12px; background: #fff !important; }
.mega-cons-title { margin: 0 0 24px; font-size: 24px; line-height: 1.25; color: #fff; }
.mega-cons-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
.menu > ul > li > .mega-cons .mega-cons-btn { padding: 12px 22px; border-radius: 999px; background: #d9b92e; color: #13265c; font: 15px/1.1 "NexaTextHeavy", sans-serif; }
.menu > ul > li > .mega-cons .mega-cons-link { align-items: center; gap: 6px; font-size: 14px; }
.mega-cons-link .i { width: 16px; height: 16px; }
.mega-cons-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
header nav .mega-cons-styles li { display: block; margin: 0; }
.menu > ul > li > .mega-cons .mega-cons-styles a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .06); transition: background .2s ease; }
.menu > ul > li > .mega-cons .mega-cons-styles a:hover, .menu > ul > li > .mega-cons .mega-cons-styles a[aria-current="page"] { background: rgba(255, 255, 255, .16); }
.mega-cons-styles figure { flex: none; width: 104px; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; }
.mega-cons-styles img { width: 100%; height: 100%; object-fit: cover; }
.mega-cons-name { display: flex; flex-direction: column; gap: 5px; font: 16px/1.2 "NexaTextHeavy", sans-serif; }
.mega-cons-name small { font: 11px/1.2 "NexaExtraLight", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #d9b92e; }

@media screen and (max-width: 1200px) {
  .cv-cards { grid-template-columns: 1fr 1fr; }
  .cv-cards.small { grid-template-columns: repeat(3, 1fr); }
  .cv-grid4 { grid-template-columns: 1fr 1fr; }
  .menu > ul > li > .mega-cons { grid-template-columns: 240px 1fr; gap: 28px; }
  .mega-cons-styles { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 1024px) {
  .cv-hero { min-height: 74vh; }
  .cv-hero-in { padding: 90px 0 64px; }
  .cv-trust { grid-template-columns: 1fr 1fr; }
  .cv-trust li { justify-content: flex-start; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .cv-trust li:nth-child(2n) { border-right: 0; }
  .cv-intro, .cv-shape, .cv-faq-in, .cv-enquire-in { grid-template-columns: 1fr; }
  .cv-intro { padding: 60px 0; gap: 40px; }
  .cv-shero { grid-template-columns: 1fr; }
  .cv-shero-pic { order: -1; aspect-ratio: 4 / 3; }
  .cv-shero-text { padding: 44px 7.5% 52px; }
  .cv-shape { padding: 60px 0; gap: 34px; }
  .cv-ideal { grid-template-columns: 1fr; padding: 60px 0; }
  .cv-ideal-card { margin: -60px 22px 0; padding: 30px; }
  .cv-styles, .cv-why, .cv-others, .cv-faq, .cv-compare, .cv-options, .cv-steps, .cv-enquire { padding: 60px 0; }
  .cv-cards.small { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 42%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .cv-cards.small .cv-card { scroll-snap-align: start; }
  .cv-enquire-pic { display: none; }
}
@media screen and (max-width: 600px) {
  .cv-hero { min-height: 82vh; }
  .cv-hero::after { background: linear-gradient(0deg, rgba(10, 20, 52, .94) 0%, rgba(10, 20, 52, .72) 55%, rgba(10, 20, 52, .5) 100%); }
  .cv-hero-in { text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
  /* the styles side by side: a card per style */
  .cv-table-wrap { overflow: visible; border-radius: 0; box-shadow: none; }
  .cv-table { min-width: 0; background: none; }
  .cv-table thead { display: none; }
  .cv-table, .cv-table tbody, .cv-table tr, .cv-table th, .cv-table td { display: block; }
  .cv-table tbody tr { margin: 0 0 14px; overflow: hidden; border-radius: 16px; background: #fff !important; box-shadow: 0 0 0 1px #e8e1d1, 0 8px 20px rgba(20, 35, 58, .05); }
  .cv-table tbody th { padding: 16px 18px; background: var(--navy); }
  .cv-table tbody th a { color: #fff; }
  .cv-table tbody th .cv-sil { color: var(--gold); }
  .cv-table td { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 18px; }
  .cv-table td::before { content: attr(data-label); font: 11px/1.6 "NexaTextHeavy", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-ink); }
  .cv-table tbody tr:last-child > * { border-bottom: 1px solid #efe9dc; }
  .cv-table tbody tr > td:last-child { border-bottom: 0 !important; }
  .cv-trust li { padding: 16px 12px; font-size: 13.5px; }
  .cv-trust .i { width: 22px; height: 22px; }
  .cv-cards, .cv-grid4 { grid-template-columns: 1fr; }
  .cv-cards.small { grid-auto-columns: 72%; }
  .cv-drawing { padding: 16px; }
  .cv-drawing-row { grid-template-columns: 1fr; }
  .cv-facts { grid-template-columns: 1fr; }
  .cv-enquire-form { padding: 24px 20px 28px; }
  .cv-enquire-form form .grid { grid-template-columns: 1fr; }
  .cv-ideal-card { margin: -40px 12px 0; padding: 24px; }
  .cv-intro-pic { margin: 0 14px 14px 0; }
  .cv-intro-pic::before { inset: 14px -14px -14px 14px; }
}
@media (prefers-reduced-motion: reduce) { .cv-hero-img, .cv-shero-pic img { animation: none; } }

/* ------------------------------------------------------------------ NEW: the phone menu sheet (PHONE_MENU "sheet")
   A white sheet under the header: the main pages, Products opening in place with the ranges as picture cards, the
   conservatory styles as chips and the resources as rows; call / quote buttons fixed at the bottom. A drawer on tablets. */
.msheet { display: none; }
@media screen and (max-width: 1024px) {
  .msheet { display: block; position: fixed; inset: 120px 0 0 0; z-index: 998; visibility: hidden; pointer-events: none; transition: visibility 0s linear .3s; }
  .msheet.active { visibility: visible; pointer-events: auto; transition: none; }
  .msheet-backdrop { position: absolute; inset: 0; background: rgba(8, 28, 48, .45); opacity: 0; transition: opacity .3s ease; }
  .msheet.active .msheet-backdrop { opacity: 1; }
  .msheet-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #0b2a45; opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
  .msheet.active .msheet-panel { opacity: 1; transform: none; }
  .msheet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .msheet .i { flex: none; width: 20px; height: 20px; }
  .msheet ul { list-style: none; margin: 0; padding: 0; }
  .m-nav { padding-top: 4px !important; }
  .m-nav > li { border-bottom: 1px solid #e9eef3; }
  .m-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 17px 20px; border: 0; background: none; color: #044f88; font: 20px/1.3 "nexa_light", "NexaExtraLight", sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
  .m-link[aria-current="page"] { font-family: "NexaTextHeavy"; box-shadow: inset 4px 0 0 #044f88; }
  .m-acc-btn .i { width: 22px; height: 22px; color: #7f93a6; transition: transform .3s ease; }
  .m-acc.open .m-acc-btn { font-family: "NexaTextHeavy"; }
  .m-acc.open .m-acc-btn .i { transform: rotate(180deg); }
  .m-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
  .m-acc.open .m-acc-body { grid-template-rows: 1fr; }
  .m-acc-inner { overflow: hidden; min-height: 0; padding: 0 16px; background: #f2f6f9; }
  .m-overview { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 0; padding: 15px 16px; border-radius: 12px; background: #044f88; color: #fff; font: 16px/1.2 "NexaTextHeavy", sans-serif; text-decoration: none; }
  .m-group { margin-top: 22px; }
  .m-group:last-child { margin-bottom: 24px; }
  .m-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
  .m-group-head h3 { margin: 0; font: 11px/1.4 "NexaTextHeavy", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #6f8294; }
  .m-group-head a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #044f88; text-decoration: none; white-space: nowrap; }
  .m-group-head a .i { width: 16px; height: 16px; }
  .m-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-tiles li:only-child { grid-column: 1 / -1; }
  .m-tiles a, .m-rows { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(4, 40, 70, .07), 0 2px 6px rgba(4, 40, 70, .06); }
  .m-tiles a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; transition: transform .15s ease; }
  .m-tiles img { aspect-ratio: 16 / 10; object-fit: cover; background: #57606b; }
  .m-tiles li:only-child a { flex-direction: row; min-height: 96px; }
  .m-tiles li:only-child img { width: 40%; height: auto; aspect-ratio: auto; }
  .m-tile-text { display: block; padding: 10px 12px 12px; }
  .m-tiles li:only-child .m-tile-text { align-self: center; padding: 12px 14px; }
  .m-tile-text b { display: block; font: 15px/1.25 "NexaTextHeavy", sans-serif; font-weight: normal; color: #0b2a45; }
  .m-tile-text small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: #66798b; }
  .m-tiles a[aria-current="page"] { box-shadow: 0 0 0 2px #044f88; }
  .m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .m-chips a { display: block; padding: 10px 15px; border: 1px solid #d3dde6; border-radius: 999px; background: #fff; color: #0b2a45; font-size: 14.5px; line-height: 1.2; text-decoration: none; transition: transform .15s ease; }
  .m-rows li + li { border-top: 1px solid #edf1f5; }
  .m-rows a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: #0b2a45; font-size: 15px; line-height: 1.3; text-decoration: none; }
  .m-rows a > .i { width: 18px; height: 18px; color: #9fb0bf; }
  .m-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e6eff7; color: #044f88; }
  .m-row-text { flex: 1; }
  .m-rows a[aria-current="page"] .m-row-text { font-family: "NexaTextHeavy"; color: #044f88; }
  .m-tiles a:active, .m-chips a:active { transform: scale(.97); }
  .m-rows a:active { background: #f2f6f9; }
  .m-info { padding: 22px 20px 26px; font-size: 14px; line-height: 1.6; color: #66798b; }
  .m-info p { margin: 0 0 4px; }
  .m-info a { color: #044f88; text-decoration: none; }
  .m-fb { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
  .m-fb svg { width: 18px; height: 18px; }
  .m-cta { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e3e9ef; box-shadow: 0 -8px 20px rgba(4, 40, 70, .06); }
  .m-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 999px; font: 16px/1 "NexaTextHeavy", sans-serif; text-decoration: none; white-space: nowrap; }
  .m-call { color: #044f88; box-shadow: inset 0 0 0 1.5px #044f88; }
  .m-quote { background: #044f88; color: #fff; }  .m-overview.cons { gap: 12px; background: #13265c; }
  .m-overview.cons span { flex: 1; }
  .m-cons-logo { flex: none; width: 34px; height: 34px; padding: 3px; border-radius: 9px; background: #fff !important; }
  .m-cons-quote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 24px; padding: 15px; border-radius: 12px; background: #d9b92e; color: #13265c; font: 15px/1.2 "NexaTextHeavy", sans-serif; text-decoration: none; }
  .m-cons-quote .i { width: 18px; height: 18px; }
}
@media screen and (min-width: 601px) and (max-width: 1024px) {
  .msheet-panel { left: auto; width: min(440px, 100%); transform: translateX(28px); box-shadow: -12px 0 30px rgba(4, 40, 70, .16); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media print { .top-nav, header, footer, .mmenu { display: none !important; } body { padding: 0; } }