/* Fixes for a Squarespace site served by Apostrophe (modules/sq-site). */

/* The CMS wraps a section's blocks (and each block's content) in an area
   container; for the grid, the blocks must be its direct children. */
.fluid-engine > .apos-area,
.fluid-engine > .apos-area > [data-apos-widget],
.fe-block .sqs-block-content > .apos-area,
.fe-block .sqs-block-content > .apos-area > [data-apos-widget],
.sqs-html-content > .apos-area,
.sqs-html-content > .apos-area > [data-apos-widget],
.sqs-html-content [data-rich-text] { display: contents; }
.fe-block .sqs-block-content { height: 100%; }
.sqs-html-content p, .sqs-html-content h1, .sqs-html-content h2, .sqs-html-content h3, .sqs-html-content h4 { white-space: pre-wrap; }

/* Agenda, the site's heading face, is an Adobe font licensed to Squarespace;
   the nearest free one stands in. */
:root, body { --heading-font-font-family: "Barlow Semi Condensed", "agenda", sans-serif; }

/* A Vimeo background, sized to cover its section like Squarespace's. */
.section-background { position: absolute; inset: 0; overflow: hidden; }
/* The iframe takes the video's own shape (--sq-ratio, 16:9 until sq-site.js
   reads the real one from Vimeo) at the smallest size that covers the section:
   sized from the section's box (container units), not the window, or the
   player letterboxes the video inside it and leaves black bands. */
.sq-video-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; --sq-ratio: 1.7778; }
.sq-video-bg--file video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sq-video-bg iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 100cqh * var(--sq-ratio)); height: max(100cqh, 100cqw / var(--sq-ratio)); transform: translate(-50%, -50%); border: 0; }
/* The section's colour over its picture, as Squarespace tints it; a video is
   darkened with black (Squarespace darkens it with a brightness filter
   instead, the section's "Video brightness"). */
.section-background-overlay { position: absolute; inset: 0; pointer-events: none; }
.sq-video-bg + .section-background-overlay { background-color: #000; }

/* Every Fluid Engine button fills its block, as Squarespace's own script
   makes it (sqs-stretched and a content flex of 1 on all of them). */
.fe-block .sqs-block-button { --sqs-block-content-flex: 1; }
.fe-block .sqs-block-button-container { width: 100%; height: 100%; }
.fe-block .sqs-block-button-container .sqs-block-button-element { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }

/* Review cards (sq-reviews-widget): a card per review, the quote-mark picture
   on its top left corner, dealt into one to three columns. */
.sq-reviews { display: grid; grid-template-columns: 1fr; column-gap: 11px; row-gap: 60px; padding-top: 30px; width: 100%; }
@media (min-width: 768px) {
  .sq-reviews--2 { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
  .sq-reviews--3 { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
  .sq-reviews { padding-top: 16px; }
}
.sq-review { position: relative; display: flex; }
.sq-review__icon { position: absolute; z-index: 1; left: 10px; top: -30px; width: 59px; height: 59px; object-fit: contain; }
.sq-review__card { flex: 1; background: var(--sq-card, #fff); border-radius: 8px; box-shadow: 1.1px 1.6px 3px hsla(var(--lightAccent-hsl), 1); padding: 34px 21px 26px; min-height: 240px; box-sizing: border-box; }
@media (min-width: 768px) {
  .sq-review__icon { left: 0; top: -16px; width: 45px; height: 45px; }
  .sq-review__card { padding: 26px 26px 30px; min-height: 290px; }
}
.sq-review__card p { margin: 16px 0; }
.sq-review__card p:first-child { margin-top: 0; }
.sq-review__card p:last-child { margin-bottom: 0; }
.sq-reviews-block .sqs-block-content { width: 100%; }

/* The phone menu, opened by sq-site.js. */
body.header--menu-open { overflow: hidden; }
body.header--menu-open .header-menu { visibility: visible; opacity: 1; }

/* Forms: the bot trap, and the message after sending. */
.sq-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.sq-form-said { margin-top: 1em; }
.sq-form-said.bad { color: #b42318; }
form[data-sq-form] .field-element { width: 100%; box-sizing: border-box; }
form[data-sq-form] fieldset.form-item.fields { display: flex; flex-wrap: wrap; gap: 0 14px; border: 0; padding: 0; }
form[data-sq-form] fieldset.form-item.fields > legend { width: 100%; }
form[data-sq-form] fieldset.form-item.fields > .field { flex: 1 1 200px; }
form[data-sq-form] .caption-text { display: block; font-size: .85em; opacity: .8; }

/* Editing: the CMS's own controls need room, so blocks stack in edit mode. */
/* Editing: Apostrophe wraps the blocks in its own area markup, which cannot sit
   in the section grid, so the blocks stack while the page is in edit mode */
.fluid-engine:has(.apos-areas-widgets-list) { display: block !important; height: auto !important; padding: 24px 4vw; }
.fluid-engine:has(.apos-areas-widgets-list) .apos-area,
.fluid-engine:has(.apos-areas-widgets-list) .apos-area-widget-wrapper { width: 100% !important; }
.fluid-engine:has(.apos-areas-widgets-list) .fe-block { position: relative !important; grid-area: auto !important; min-height: 40px; margin: 8px 0; height: auto !important; }
.page-section:has(.apos-areas-widgets-list) { min-height: 0 !important; }
body:has(.apos-admin-bar) #header { position: relative !important; top: 0 !important; }

/* The blog list: Squarespace places its masonry cards in script; sq-site.js
   deals them into two columns (one on a phone). */
.blog-masonry-wrapper { height: auto !important; }
.blog-masonry-wrapper.sq-masonry { display: flex; gap: var(--blog-horizontal-spacing, 30px); align-items: flex-start; }
.sq-masonry > .sq-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--blog-vertical-spacing, 20px); }
.blog-masonry-wrapper .blog-item { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; width: auto !important; }
.blog-masonry-wrapper .image-wrapper { display: block; height: auto !important; padding: 0 !important; position: static !important; }
.blog-masonry-wrapper .image-wrapper img { position: static !important; opacity: 1 !important; width: 100% !important; height: auto !important; display: block; }

/* Enquiry forms, styled after the quote form the site embedded: a pale panel,
   white boxes, a full-width button. */
form[data-sq-form] { background: #eaf1f8; border-radius: 6px; padding: 26px 24px; font-family: "IBM Plex Sans", sans-serif; color: #16232c; }
form[data-sq-form] .field-list { display: flex; flex-direction: column; gap: 16px; }
form[data-sq-form] .title, form[data-sq-form] legend.title { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; color: #16232c; }
form[data-sq-form] .required { color: #c62828; }
form[data-sq-form] .field-element { font: inherit !important; font-size: 14px !important; background: #fff !important; border: 1px solid #c9d6e2 !important; border-radius: 4px !important; padding: 10px 12px !important; color: #16232c !important; min-height: 42px; }
form[data-sq-form] .field-element:focus { outline: 2px solid #1d8fe0; outline-offset: 0; border-color: #1d8fe0; }
form[data-sq-form] textarea.field-element { min-height: 96px; resize: vertical; }
form[data-sq-form] select.field-element { appearance: auto; }
form[data-sq-form] fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
form[data-sq-form] .option label { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0; cursor: pointer; }
form[data-sq-form] .option input { width: 16px; height: 16px; margin: 0; accent-color: #1d8fe0; }
form[data-sq-form] .caption-text { font-size: 12px; margin-bottom: 4px; }
form[data-sq-form] .form-button-wrapper { margin-top: 20px; }
form[data-sq-form] .form-button-wrapper button { width: 100%; border: 0; border-radius: 999px; padding: 14px 20px; font: 600 14px "Poppins", sans-serif; letter-spacing: .02em; background: var(--primaryButtonBackgroundColor, #1d8fe0); color: var(--primaryButtonTextColor, #fff); cursor: pointer; }
form[data-sq-form] .form-button-wrapper button:disabled { opacity: .6; cursor: default; }
form[data-sq-form] input[type=file].field-element { padding: 8px; }
form[data-sq-form] .caption-text, form[data-sq-form] .option label { color: #4a5a66 !important; }
/* The menu button is a plain button; the site's general button styles would
   paint it. */
.header-burger-btn { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; color: inherit; cursor: pointer; }
.header-burger .top-bun, .header-burger .bottom-bun, .header-burger .patty { height: 1px !important; }

/* Signed in, Apostrophe's own .container rule would cap the page at 1280px */
#page.container { max-width: none; width: 100%; padding: 0; }
/* The text editor keeps the section behind it */
#sections .apos-rich-text-editor, #footer-sections .apos-rich-text-editor { background: transparent !important; color: inherit !important; }

/* Squarespace's column layouts carry the class columns-12, which the CMS
   bundle loaded for signed-in editors also defines (a Tailwind utility:
   12 newspaper columns), squeezing a blog post into slivers while editing. */
.sqs-layout.columns-12 { columns: auto; }

/* Phones (sq-site shell): Call and Get a quote fixed along the bottom, and
   room left under the footer for them. Hidden from 768px up, where the
   header shows the button and the number. */
.sq-phone-bar { display: none; }
@media (max-width: 767px) {
  .sq-phone-bar { display: flex; gap: 8px; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: hsla(var(--white-hsl), .97); box-shadow: 0 -2px 12px rgba(0, 0, 0, .12); }
  .sq-phone-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 300px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; }
  .sq-phone-bar__call { color: hsla(var(--accent-hsl), 1); border: 2px solid hsla(var(--accent-hsl), 1); background: transparent; }
  .sq-phone-bar__quote { color: #fff; background: hsla(var(--accent-hsl), 1); }
  body:has(.sq-phone-bar) #siteWrapper { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.header--menu-open .sq-phone-bar { display: none; }
}

/* Phones: things to tap are at least 44px (Apple's and Google's minimum).
   Inline links keep their look and line height; the padding only widens
   the area that takes the tap. */
@media (max-width: 767px) {
  .sqs-html-content a { padding: 12px 2px; margin: 0 -2px; }
  #footer-sections .sqs-html-content a { display: inline-block; padding: 8px 0; margin: -4px 0; }
  .sqs-svg-icon--social { position: relative; }
  .sqs-svg-icon--social::after { content: ''; position: absolute; inset: -8px; }
  .form-wrapper .option { margin: 0 !important; }
  .form-wrapper .option label { display: flex !important; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
  .form-wrapper .option input[type="radio"], .form-wrapper .option input[type="checkbox"] { width: 22px !important; height: 22px !important; flex: none; margin: 0 !important; }
  .form-wrapper .caption-text, .form-wrapper .description { font-size: 14px !important; }
  .form-wrapper input.field-element, .form-wrapper select.field-element, .form-wrapper textarea.field-element { font-size: 16px !important; min-height: 48px; }
}

/* Enquiry forms in steps (sq-site.js steps()): each question's box lays out
   as if it were not there, and a step not showing is hidden. */
.sq-q { display: contents; }
.sq-q[hidden] { display: none !important; }
.sq-steps { margin: 0 0 22px; }
.sq-steps__count { margin: 0 0 8px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; }
.sq-steps__bar { height: 6px; border-radius: 6px; background: hsla(var(--accent-hsl), .18); overflow: hidden; }
.sq-steps__bar span { display: block; height: 100%; background: hsla(var(--accent-hsl), 1); border-radius: 6px; transition: width .3s; }
.form-button-wrapper .sq-step-back, .form-button-wrapper .sq-step-next { margin-right: 10px; }
.form-button-wrapper [hidden] { display: none !important; }
.sq-step-back { background: transparent !important; color: hsla(var(--accent-hsl), 1) !important; border: 2px solid hsla(var(--accent-hsl), 1) !important; }

/* The Google rating line over a reviews block. */
.sq-reviews__rating { text-align: center; margin: 0 0 6px; }
.sq-reviews__rating a { text-decoration: none; color: inherit; }
.sq-reviews__stars { color: #f5b301; letter-spacing: 2px; }
.sq-review__when { font-weight: 400; opacity: .7; }

/* The battery rebate estimate (sq-rebate-widget). */
.sq-rebate { background: hsla(var(--white-hsl), 1); border-radius: 12px; box-shadow: 1px 2px 6px hsla(var(--lightAccent-hsl), 1); padding: 24px; }
.sq-rebate h3 { margin: 0 0 14px; }
.sq-rebate__pick { display: block; font-weight: 600; margin: 0 0 12px; }
.sq-rebate__pick select { display: block; width: 100%; margin-top: 8px; min-height: 48px; font-size: 16px; padding: 0 12px; border: 1px solid #c9d3dc; border-radius: 8px; background: #fff; }
.sq-rebate__figure { font-size: 22px; margin: 8px 0; }
.sq-rebate__figure strong { color: hsla(var(--accent-hsl), 1); font-size: 34px; }

/* Project cards (sq-projects-widget). */
.sq-projects { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; }
@media (min-width: 768px) { .sq-projects { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.sq-project { display: flex; flex-direction: column; background: hsla(var(--white-hsl), 1); border-radius: 12px; overflow: hidden; box-shadow: 1px 2px 6px hsla(var(--lightAccent-hsl), 1); color: inherit; text-decoration: none; }
.sq-project__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sq-project__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-project__text { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.sq-project__title { font-family: var(--heading-font-font-family, 'Barlow Semi Condensed'), sans-serif; font-weight: 600; font-size: 21px; line-height: 1.25; }
.sq-project__sum { font-size: 15px; line-height: 1.55; opacity: .85; }
.sq-project__more { font-weight: 600; color: hsla(var(--accent-hsl), 1); font-size: 15px; }

/* "Shorten on phones" sections (sq-site.js collapse()). */
@media (max-width: 767px) {
  /* Top-aligned while shortened: Squarespace centres a section's content
     vertically, which would cut off its start as well as its end. */
  .sq-collapsed { max-height: 78vh; overflow: hidden !important; position: relative; align-items: flex-start !important; justify-content: flex-start !important; }
  .sq-collapsed > .content-wrapper { justify-content: flex-start !important; align-self: flex-start !important; }
  .sq-collapsed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, transparent, var(--siteBackgroundColor, #fff)); pointer-events: none; z-index: 5; }
  [data-section-theme="light"].sq-collapsed::after { background: linear-gradient(to bottom, transparent, hsla(var(--lightAccent-hsl), 1)); }
  [data-section-theme="black"].sq-collapsed::after, [data-section-theme="dark"].sq-collapsed::after { background: linear-gradient(to bottom, transparent, hsla(var(--black-hsl), 1)); }
  .sq-collapse-more { position: absolute; z-index: 6; left: 50%; bottom: 20px; transform: translateX(-50%); min-height: 48px; padding: 0 28px; border-radius: 300px; border: 2px solid hsla(var(--accent-hsl), 1); background: hsla(var(--white-hsl), 1); color: hsla(var(--accent-hsl), 1); font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
}

/* Sections built here rather than copied (the Sigenergy page's .es-sig
   blocks): the gutters and spacing of the copied sections around them. */
.sections section:has(.es-sig) > .content-wrapper { box-sizing: border-box; width: 100%; max-width: var(--sqs-site-max-width, 1500px); margin: 0 auto; padding: 72px var(--sqs-site-gutter, 4vw) !important; }
@media (max-width: 767px) { .sections section:has(.es-sig) > .content-wrapper { padding: 48px var(--sqs-mobile-site-gutter, 6vw) !important; } }
.sections section:has(.es-sig) .sq-rebate { max-width: 640px; margin: 0 auto; }
.sections section:has(.es-sig) .sq-reviews__rating { margin-bottom: 18px; }

/* The quote band at the top of the footer: rating, heading, two buttons. */
.sq-foot-cta { background: linear-gradient(120deg, hsla(var(--accent-hsl), 1), hsla(var(--accent-hsl), .78)); color: #fff; padding: 56px 4vw; }
.sq-foot-cta__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.sq-foot-cta__words { flex: 1 1 480px; }
.sq-foot-cta h2 { color: #fff; margin: 10px 0 10px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; text-transform: uppercase; }
.sq-foot-cta p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .92); max-width: 620px; }
.sq-foot-cta__rating { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 300px; background: rgba(255, 255, 255, .16); color: #fff !important; text-decoration: none !important; font-size: 14px; }
.sq-foot-cta__rating span { color: #ffd34d; letter-spacing: 1px; }
.sq-foot-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sq-foot-cta[hidden] { display: none; }
.sq-foot-cta__btns a { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border-radius: 300px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; border: 2px solid #fff; white-space: nowrap; }
.sq-foot-cta__quote { background: #fff; color: hsla(var(--accent-hsl), 1) !important; }
.sq-foot-cta__call { color: #fff !important; background: transparent; }
@media (max-width: 767px) {
  .sq-foot-cta { padding: 40px 20px 44px; text-align: center; }
  .sq-foot-cta p { font-size: 16px; margin: 0 auto; }
  .sq-foot-cta__btns { width: 100%; flex-direction: column; }
  .sq-foot-cta__btns a { width: 100%; }
}

/* The footer: accent headings, plain links that light up, and the contact
   details with an icon each. */
#footer-sections .sqs-html-content p strong:only-child { color: hsla(var(--accent-hsl), 1); }
#footer-sections .sqs-html-content p:first-child > strong:only-child { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
#footer-sections .sqs-html-content a { text-decoration: none; transition: color .15s; }
#footer-sections .sqs-html-content p > a[href^="/"] { color: rgba(255, 255, 255, .85); }
#footer-sections .sqs-html-content a:hover { color: hsla(var(--accent-hsl), 1); }
#footer-sections .sqs-html-content a[href^="tel:"], #footer-sections .sqs-html-content a[href^="mailto:"], #footer-sections .sqs-html-content a[href*="google.com/maps"] { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
#footer-sections .sqs-html-content a[href^="tel:"] strong { color: inherit; }
#footer-sections .sqs-html-content a[href^="tel:"]::before, #footer-sections .sqs-html-content a[href^="mailto:"]::before, #footer-sections .sqs-html-content a[href*="google.com/maps"]::before { content: ''; flex: none; width: 18px; height: 18px; background: hsla(var(--accent-hsl), 1); -webkit-mask: var(--sq-i) center / contain no-repeat; mask: var(--sq-i) center / contain no-repeat; }
#footer-sections a[href^="tel:"] { --sq-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
#footer-sections a[href^="mailto:"] { --sq-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4 7.3V17h16V7.3z'/%3E%3C/svg%3E"); }
#footer-sections a[href*="google.com/maps"] { --sq-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7zm0 4.5A2.5 2.5 0 1 0 12 11.5 2.5 2.5 0 0 0 12 6.5z'/%3E%3C/svg%3E"); }

@media (max-width: 767px) {
  /* Contact: three full-width rows you can tap. */
  #footer-sections .sqs-html-content p:has(> a[href^="tel:"]), #footer-sections .sqs-html-content p:has(> a[href^="mailto:"]), #footer-sections .sqs-html-content p:has(> a[href*="google.com/maps"]) { margin: 0 0 10px; }
  #footer-sections .sqs-html-content a[href^="tel:"], #footer-sections .sqs-html-content a[href^="mailto:"], #footer-sections .sqs-html-content a[href*="google.com/maps"] { display: flex; width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 15px; line-height: 1.35; }
  /* Link lists: tighter, with room to tap. */
  #footer-sections .sqs-html-content p { margin: 0; }
  #footer-sections .sqs-html-content p:first-child > strong:only-child { display: block; margin: 0 0 6px; }
  #footer-sections .sqs-html-content p > a[href^="/"] { display: block; padding: 9px 0; font-size: 15px; color: rgba(255, 255, 255, .88); }
  #footer-sections .sqs-html-content p[style*="text-align"] { text-align: center !important; }
  #footer-sections .sqs-html-content p[style*="text-align"] a { display: inline-block; padding: 8px 4px; }
  /* Blurb, copyright, social icons and badges centred. */
  #footer-sections .sqs-html-content:not(:has(p:first-child > strong:only-child)) p { text-align: center !important; margin: 0 0 10px; }
  #footer-sections .fe-block:has(.sqs-block-socialaccountlinks) .sqs-svg-icon--list { justify-content: center; }
  #footer-sections .sqs-svg-icon--wrapper { width: 40px !important; height: 40px !important; }
}

/* The main menu on one line (Jerome, 31 October 2026). Squarespace splits
   the desktop header into thirds, which squeezed six links into the middle
   third and wrapped them onto two or three rows at every width. The logo and
   the button take what they need, the menu takes the rest, and its words
   scale down a little on a smaller screen rather than wrap. Under 800 px the
   phone header (the menu button) takes over, as before. */
@media (min-width: 800px) {
  .header-display-desktop .header-title-nav-wrapper { flex: 1 1 auto !important; min-width: 0; }
  .header-display-desktop .header-title { flex: 0 0 auto !important; }
  .header-display-desktop .header-title-logo img { width: clamp(130px, 14vw, 239px) !important; height: auto !important; max-height: none !important; }
  .header-display-desktop .header-actions { flex: 0 0 auto !important; padding-left: clamp(8px, 1.5vw, 24px); }
  .header-display-desktop .header-nav { flex: 1 1 auto !important; min-width: 0; display: flex !important; justify-content: safe center; padding: 0 clamp(8px, 1.5vw, 24px) !important; }
  .header-display-desktop .header-nav-list { flex-wrap: nowrap !important; }
  .header-display-desktop .header-nav-item { white-space: nowrap; margin: 0 clamp(5px, .8vw, 14px) !important; }
  .header-display-desktop .header-nav-item a { font-size: clamp(13px, 1.35vw, 19px) !important; }
}
@media (min-width: 800px) and (max-width: 1099px) {
  .header-display-desktop .header-actions .btn { font-size: 12px !important; padding: 12px 16px !important; }
}

/* A short guide under a question (the form's "A line under the question"). */
.sq-q-help { margin: 4px 0 10px; font-size: 14px; line-height: 1.5; opacity: .8; }

/* Photo questions: a drop area rather than a bare file button. */
.sq-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sq-drop__zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 26px 18px; min-height: 140px; box-sizing: border-box; border: 2px dashed hsla(var(--accent-hsl), .55); border-radius: 14px; background: hsla(var(--accent-hsl), .05); text-align: center; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.sq-drop__zone:hover, .sq-drop__zone--over { background: hsla(var(--accent-hsl), .12); border-color: hsla(var(--accent-hsl), 1); }
.sq-drop__zone--over { transform: scale(1.01); }
.sq-drop:focus-within .sq-drop__zone { outline: 2px solid hsla(var(--accent-hsl), 1); outline-offset: 3px; }
.sq-drop__icon { color: hsla(var(--accent-hsl), 1); }
.sq-drop__big { font-weight: 600; font-size: 16px; }
.sq-drop__big u { color: hsla(var(--accent-hsl), 1); text-underline-offset: 3px; }
.sq-drop__small { font-size: 13px; opacity: .7; }
.sq-drop__touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .sq-drop__fine { display: none; }
  .sq-drop__touch { display: inline; }
}
.sq-drop--has .sq-drop__zone { min-height: 0; padding: 14px; flex-direction: row; }
.sq-drop--has .sq-drop__small { display: none; }
.sq-drop__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sq-drop__file { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: hsla(var(--white-hsl), 1); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.sq-drop__thumb { flex: none; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: hsla(var(--accent-hsl), .12); color: hsla(var(--accent-hsl), 1); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.sq-drop__name { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.sq-drop__off { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.sq-drop__off:hover { opacity: 1; background: hsla(var(--accent-hsl), .1); }
.sq-drop__note { font-size: 14px; color: #b3261e; }

/* A plain section (no picture or video behind it) is as tall as what is in
   it plus its padding: Squarespace's minimum heights (a third or two thirds
   of the screen) centred short sections in a lot of empty space (Jerome,
   31 October 2026). */
#page .page-section:not(:has(.section-background img, .sq-video-bg)) { min-height: 0 !important; }

/* Squarespace photo galleries (the case studies' "Photos from the install"),
   laid out here: Squarespace's own script sized them and faded them in, and
   without it the photos were invisible and stacked at full size. Two across
   on a phone, the gallery's own count across on a desktop. */
.sqs-gallery-block-grid .sqs-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 768px) {
  .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-1 .sqs-gallery { grid-template-columns: minmax(0, 1fr); }
  .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-3 .sqs-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-4 .sqs-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 .sqs-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-6 .sqs-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.sqs-gallery-block-grid .slide { position: relative; float: none !important; width: auto !important; height: auto !important; margin: 0 !important; }
.sqs-gallery-block-grid .margin-wrapper { position: relative; margin: 0 !important; aspect-ratio: 1 / 1; overflow: hidden; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-standard .margin-wrapper { aspect-ratio: 4 / 3; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-standard-vertical .margin-wrapper { aspect-ratio: 3 / 4; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-widescreen .margin-wrapper { aspect-ratio: 16 / 9; }
.sqs-gallery-block-grid .image-slide-anchor { position: absolute; inset: 0; display: block; overflow: hidden; }
.sqs-gallery-block-grid img.thumb-image { position: absolute !important; inset: 0; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 1 !important; }
.sqs-gallery-block-grid .sqs-gallery-meta-container, .sqs-gallery-block-grid noscript { display: none; }

/* A map block, drawn by sq-site.js from the place the block holds. */
.sqs-block-map .sq-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sqs-block-map .sqs-block-content, .sqs-block-map .sqs-block-content > .apos-area { position: relative; height: 100%; min-height: 240px; }
.sqs-block-map [data-context] { position: relative; height: 100%; min-height: 240px; }

/* Previous and Next under a project, as the original portfolio had them. */
.sq-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 28px max(16px, 4vw); background: hsla(var(--accent-hsl), 1); color: #fff; }
.sq-pager__link { display: flex; align-items: center; gap: 12px; min-height: 64px; color: #fff !important; text-decoration: none !important; font-family: var(--heading-font-font-family, 'Barlow Semi Condensed'), sans-serif; font-weight: 600; font-size: clamp(17px, 2vw, 24px); line-height: 1.2; }
.sq-pager__link small { display: block; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.sq-pager__link svg { flex: none; }
.sq-pager__link--next { justify-content: flex-end; text-align: right; grid-column: 2; }
.sq-pager__link:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* The phone number in the main menu as a button, beside the quote button
   (Jerome, 31 October 2026). */
.header-display-desktop .header-nav-item a[href^="tel:"] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px !important; border: 2px solid hsla(var(--accent-hsl), 1); border-radius: 300px; color: hsla(var(--accent-hsl), 1) !important; background-image: none !important; line-height: 1; }
.header-display-desktop .header-nav-item a[href^="tel:"]::before { content: ''; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%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 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.header-display-desktop .header-nav-item a[href^="tel:"]:hover { background: hsla(var(--accent-hsl), 1) !important; color: #fff !important; }
.header-menu-nav-item a[href^="tel:"] .header-menu-nav-item-content { display: inline-block; padding: 10px 22px; border: 2px solid currentColor; border-radius: 300px; }
@media (min-width: 800px) and (max-width: 1099px) {
  .header-display-desktop .header-nav-item a[href^="tel:"] { padding: 6px 10px !important; border-width: 1.5px; }
  .header-display-desktop .header-nav-item a[href^="tel:"]::before { display: none; }
}
@media (min-width: 800px) and (max-width: 899px) {
  .header-display-desktop .header-nav-item { margin: 0 4px !important; }
  .header-display-desktop .header-nav { padding: 0 6px !important; }
}

/* A film on the Sigenergy page: the clip in a rounded frame, with a sound
   button over it, since a page may only start a video silently. */
.es-sig-film__frame { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); }
.es-sig-film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.es-sig-film__sound { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 300px; background: rgba(4, 18, 28, .72); color: #fff; font: 600 14px/1 Poppins, sans-serif; letter-spacing: .03em; cursor: pointer; }
.es-sig-film__sound::before { content: '♪'; font-size: 16px; }
.es-sig-film__sound[aria-pressed="true"] { background: hsla(var(--accent-hsl), 1); }
.es-sig-film__more { text-align: center; margin: 16px 0 0 !important; }
.es-sig-film__more a { color: hsla(var(--accent-hsl), 1); font-weight: 600; }

/* The case study photos full screen. */
.sq-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(6, 12, 16, .94); padding: calc(56px + env(safe-area-inset-top)) 12px calc(56px + env(safe-area-inset-bottom)); box-sizing: border-box; touch-action: pan-y; }
.sq-lightbox[hidden] { display: none; }
.sq-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); user-select: none; -webkit-user-drag: none; }
.sq-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 400 34px/1 sans-serif; cursor: pointer; }
.sq-lightbox__btn:hover, .sq-lightbox__btn:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.sq-lightbox__close { top: calc(10px + env(safe-area-inset-top)); right: 12px; font-size: 30px; }
.sq-lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.sq-lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }
.sq-lightbox--one .sq-lightbox__prev, .sq-lightbox--one .sq-lightbox__next, .sq-lightbox--one .sq-lightbox__count { display: none; }
.sq-lightbox__count { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; pointer-events: none; margin: 0; text-align: center; color: rgba(255, 255, 255, .8); font: 500 14px/1 Poppins, sans-serif; }
@media (max-width: 767px) { .sq-lightbox__prev, .sq-lightbox__next { top: auto; bottom: calc(4px + env(safe-area-inset-bottom)); transform: none; } .sq-lightbox__prev { left: 16px; } .sq-lightbox__next { right: 16px; } }
html.sq-lightbox-open, html.sq-lightbox-open body { overflow: hidden; }
html.sq-lightbox-open .sq-phone-bar { display: none; }

/* A section's panel (sq-section "Panel behind the content"): on a desktop a
   rounded card across the grid's inner columns and every row, drawn behind
   the blocks; on a phone a band behind the whole section. Done with CSS on
   the section rather than a shape block on the grid, which Squarespace's
   phone layout left as an empty box above the content (Jerome, 31 October
   2026). */
.sq-panel > .content-wrapper { background: var(--sq-panel); }
@media (min-width: 768px) {
  .sq-panel > .content-wrapper { background: none; }
  .sq-panel .fluid-engine::before { content: ''; grid-area: 1 / 2 / -1 / -2; background: var(--sq-panel); border-radius: var(--sq-panel-radius, 10px); pointer-events: none; z-index: 0; }
}

/* Cards and logo strips (sq-cards): real HTML in place of shape blocks with
   pictures and text placed over them. Cards keep the original's look (white,
   10 px corners, a soft light-blue shadow); a strip is a band the photo
   behind shows through. */
.sq-cards-block, .sq-cards-block .sqs-block-content { width: 100%; }
.sq-cards__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sq-cards--cards .sq-cards__item { flex: 1 1 0; min-width: 120px; }
.sq-cards--cards .sq-cards__item, .sq-cards--cards .sq-cards__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.sq-cards--cards .sq-cards__item { box-sizing: border-box; min-height: 150px; padding: 26px 12px; background: hsla(var(--white-hsl), 1); border-radius: 10px; box-shadow: 1.1px 1.6px 3px hsla(var(--lightAccent-hsl), 1); text-align: center; }
.sq-cards--cards .sq-cards__link { color: inherit; text-decoration: none; }
.sq-cards--cards .sq-cards__img { width: auto; height: 30px; max-width: 60%; object-fit: contain; }
.sq-cards__title { font-weight: 600; font-size: 15px; line-height: 1.3; color: hsla(var(--black-hsl), 1); }
@media (max-width: 767px) {
  .sq-cards--cards .sq-cards__item { flex: 0 1 calc(50% - 7px); min-width: 0; min-height: 120px; padding: 20px 10px; }
}
.sq-cards--strip { background: var(--sq-band); padding: 28px max(16px, 4vw); }
.sq-cards--strip .sq-cards__list { gap: 24px 56px; align-items: center; }
.sq-cards--strip .sq-cards__item { display: flex; align-items: center; justify-content: center; }
.sq-cards--strip .sq-cards__img { display: block; width: auto; height: auto; max-height: 104px; max-width: 220px; object-fit: contain; }
@media (max-width: 767px) {
  .sq-cards--strip { padding: 24px 16px; }
  .sq-cards--strip .sq-cards__list { gap: 18px 24px; }
  .sq-cards--strip .sq-cards__item { flex: 0 1 calc(50% - 12px); }
  .sq-cards--strip .sq-cards__item:first-child { flex-basis: 100%; }
  .sq-cards--strip .sq-cards__img { max-height: 88px; max-width: 100%; }
}

/* Page headings on a phone: Squarespace's 57 px set long titles over four or
   five lines (Jerome, 31 October 2026). At most 40 px, a little less on a
   narrow phone. */
@media (max-width: 767px) {
  #page .sqs-html-content h1, #page h1.entry-title--large { font-size: clamp(30px, 10vw, 40px) !important; line-height: 1.12 !important; }
}

/* The Videos library (sq-video-page): the featured video, Shorts as portrait
   cards (four across, two on a phone), longer videos as wide cards, the topic
   filter, a video's own page, and the pop-up player (sq-site.js). */
.sq-vids { max-width: 1240px; margin: 0 auto; padding: 40px 0 70px; font-family: "IBM Plex Sans", sans-serif; color: #16232c; }
.sq-vids [hidden] { display: none !important; }
.sq-vids h1, .sq-vids h2 { font-family: var(--heading-font-font-family), sans-serif; font-weight: 600; line-height: 1.15; margin: 0; }
.sq-vids__head { text-align: center; max-width: 760px; margin: 0 auto 26px; }
.sq-vids__head h1 { font-size: clamp(36px, 5vw, 56px); }
.sq-vids__intro { font-size: 18px; line-height: 1.6; margin: 12px 0 0; opacity: .85; }
.sq-vids__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 34px; }
.sq-vids__filter button { min-height: 44px; padding: 0 18px; border-radius: 300px; border: 2px solid hsla(var(--accent-hsl), 1); background: transparent; color: hsla(var(--accent-hsl), 1); font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; }
.sq-vids__filter button[aria-pressed="true"] { background: hsla(var(--accent-hsl), 1); color: #fff; }
.sq-vids__feature { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; margin: 0 0 54px; }
@media (min-width: 900px) { .sq-vids__feature { grid-template-columns: 1.6fr 1fr; gap: 40px; } }
.sq-vids__feature .sq-vid__title { display: none; }
.sq-vids__kicker { margin: 0 0 8px; font-family: Poppins, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: hsla(var(--accent-hsl), 1); }
.sq-vids__feature h2 { font-size: clamp(26px, 3vw, 36px); }
.sq-vids__feature h2 a { color: inherit; text-decoration: none; }
.sq-vids__feature-text p { font-size: 17px; line-height: 1.6; }
.sq-vids__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 300px; background: hsla(var(--accent-hsl), 1); color: #fff !important; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important; }
.sq-vids__group { margin: 0 0 50px; }
.sq-vids__h { font-size: 30px; margin: 0 0 18px !important; }
.sq-vids__grid { display: grid; gap: 22px 16px; }
.sq-vids__grid--short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .sq-vids__grid--short { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sq-vids__grid--short { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; } }
@media (min-width: 1150px) { .sq-vids__grid--short { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sq-vids { padding-left: 8px; padding-right: 8px; } }
@media (min-width: 768px) and (max-width: 1279px) { .sq-vids { padding-left: 16px; padding-right: 16px; } }
.sq-vids__grid--wide { grid-template-columns: 1fr; }
@media (min-width: 700px) { .sq-vids__grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sq-vids__grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sq-vid--dupe { display: none; }
.sq-vids--filtered .sq-vid--dupe:not([hidden]) { display: block; }
.sq-vid { display: block; color: inherit !important; text-decoration: none !important; }
.sq-vid__pic { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #0d171e; aspect-ratio: 16 / 9; }
.sq-vids__grid--short .sq-vid__pic, .sq-vid--short:not(.sq-vid--feature) .sq-vid__pic { aspect-ratio: 9 / 16; }
.sq-vid--feature.sq-vid--short .sq-vid__pic { aspect-ratio: 9 / 16; max-height: 78vh; margin: 0 auto; }
.sq-vid__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.sq-vid:hover .sq-vid__pic img, .sq-vid:focus-visible .sq-vid__pic img { transform: scale(1.04); }
.sq-vid__play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: hsla(var(--accent-hsl), .92); box-shadow: 0 4px 18px rgba(0, 0, 0, .3); transition: transform .2s; }
.sq-vid__play::after { content: ''; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.sq-vid:hover .sq-vid__play, .sq-vshow__facade:hover .sq-vid__play { transform: scale(1.1); }
.sq-vid--feature .sq-vid__play, .sq-vshow__facade .sq-vid__play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.sq-vid--feature .sq-vid__play::after, .sq-vshow__facade .sq-vid__play::after { left: 33px; top: 26px; border-width: 16px 0 16px 25px; }
.sq-vid__len { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; font-weight: 600; }
.sq-vid__title { display: block; margin-top: 10px; font-weight: 600; font-size: 16px; line-height: 1.35; }
@media (max-width: 699px) { .sq-vid__title { font-size: 14px; } .sq-vid__play { width: 48px; height: 48px; margin: -24px 0 0 -24px; } .sq-vid__play::after { left: 19px; top: 14px; border-width: 10px 0 10px 15px; } }
.sq-vids__none { text-align: center; font-size: 17px; }
.sq-vids__more { text-align: center; margin: 10px 0 0; }
.sq-vids__more a, .sq-vshow__back a, .sq-vshow__yt { color: hsla(var(--accent-hsl), 1); font-weight: 600; }

/* A video's own page. */
.sq-vshow { padding-top: 24px; }
.sq-vshow__back { margin: 0 0 18px; }
.sq-vshow__main { display: grid; grid-template-columns: 1fr; gap: 26px; margin: 0 0 60px; align-items: start; }
@media (min-width: 900px) {
  .sq-vshow--short .sq-vshow__main { grid-template-columns: minmax(0, 420px) 1fr; gap: 48px; }
  .sq-vshow--wide .sq-vshow__main { grid-template-columns: 1.6fr 1fr; gap: 40px; }
}
.sq-vshow__player { position: relative; overflow: hidden; border-radius: 12px; background: #0d171e; aspect-ratio: 16 / 9; }
.sq-vshow--short .sq-vshow__player { aspect-ratio: 9 / 16; max-height: 82vh; width: 100%; max-width: 420px; margin: 0 auto; }
.sq-vshow__player iframe, .sq-vshow__facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.sq-vshow__facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-vshow__text h1 { font-size: clamp(28px, 3.4vw, 42px); }
.sq-vshow__meta { margin: 10px 0 12px; opacity: .75; }
.sq-vshow__topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sq-vshow__topics a { padding: 4px 12px; border-radius: 300px; background: hsla(var(--accent-hsl), .1); color: hsla(var(--accent-hsl), 1); font-size: 14px; font-weight: 600; text-decoration: none; }
.sq-vshow__about p { font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.sq-vshow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }

/* The pop-up player. */
html.sq-vplayer-open { overflow: hidden; }
.sq-vplayer { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 12, 18, .88); }
.sq-vplayer[hidden] { display: none; }
.sq-vplayer__box { position: relative; width: min(1100px, 100%); }
.sq-vplayer--short .sq-vplayer__box { width: min(100%, calc((100vh - 120px) * 9 / 16)); width: min(100%, calc((100dvh - 120px) * 9 / 16)); }
.sq-vplayer__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.sq-vplayer--short .sq-vplayer__frame { aspect-ratio: 9 / 16; }
.sq-vplayer__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sq-vplayer__close { position: absolute; right: 0; top: -50px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 30px; line-height: 44px; cursor: pointer; }
.sq-vplayer__foot { margin: 10px 0 0; color: #fff; font-family: "IBM Plex Sans", sans-serif; font-size: 15px; line-height: 1.4; }
.sq-vplayer__title { font-weight: 600; }
.sq-vplayer__more { color: #fff !important; opacity: .8; white-space: nowrap; }
.sq-vplayer { padding-top: 66px; }