/*!
Theme Name: Direct Shower Door
Theme URI: https://directshowerdoor.com/
Author: SmartSites
Author URI: https://www.smartsites.com/
Description: Custom frameless glass shower door site for Southern California, built on the SmartSites _tw architecture.
Version: 0.1.0
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: direct-shower-door
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Direct Shower Door is based on _tw https://underscoretw.com/, (C) 2021-2024 Greg Sullivan
_tw is distributed under the terms of the GNU GPL v2 or later.

_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2023 Automattic, Inc.
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
*/

/**
 * NOTES
 *
 * - This file MUST be the first import in tailwind/tailwind.css.
 * - `Version` here is cosmetic. The real version is the DIRECT_SHOWER_DOOR_VERSION
 *   constant in functions.php, replaced with a base36 timestamp by
 *   node_scripts/zip.js on `npm run bundle`.
 * - `Text Domain` matches the slug used in every __() / esc_html__() call.
 */

/**
 * The line above injects the WordPress file header. It needs to be first,
 * before this comment — WordPress only reads a theme header at the very top of
 * style.css.
 */

/**
 * Custom `@font-face` rules and the icon-font glyph map. Imported before
 * Tailwind's base layer so faces are declared before anything uses them.
 */

/**
 * @font-face declarations + the icon-font glyph map.
 * tailwind/custom/fonts.css — imported before Tailwind's base layer.
 *
 * PATHS ARE RELATIVE TO THE BUILD OUTPUT (theme/style.css), so `fonts/x.woff2`
 * resolves to theme/fonts/x.woff2 — not relative to this source file.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * TEXT FONTS — self-hosted from Google Fonts (downloaded, not a <link>).
 * Only the weights the design actually uses (per the Home page pull):
 * Poppins 300/400/500/600/700, Montserrat 600.
 * ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Poppins';

  src: url('fonts/poppins-300.woff2') format('woff2');

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Poppins';

  src: url('fonts/poppins-400.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Poppins';

  src: url('fonts/poppins-500.woff2') format('woff2');

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Poppins';

  src: url('fonts/poppins-600.woff2') format('woff2');

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Poppins';

  src: url('fonts/poppins-700.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';

  src: url('fonts/montserrat-600.woff2') format('woff2');

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

/*
 * Round 88: Inter — added after re-checking, per direct request, whether
 * Inter appeared beyond the single blog-post page originally assumed. It
 * does: identically across San Diego County/Orange County/Newport Beach's
 * testimonial module (quote body Inter Regular 16px, "Submitted <date>"
 * caption Inter Regular 14px, avatar-initials fallback Inter Bold 16px) —
 * the SAME confirmed values on every page that embeds testimonial-slider.php,
 * not a one-off. Only Regular/Bold are confirmed in use on already-built
 * pages; Free Estimate's pull also shows Inter Medium (500), but that page
 * isn't built yet — add that weight when it is, don't load it speculatively.
 */

@font-face {
  font-family: 'Inter';

  src: url('fonts/inter-400.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Inter';

  src: url('fonts/inter-700.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

/*
 * Preload the two render-blocking faces in header.php, after wp_head():
 *
 * <link rel="preload" as="font" type="font/woff2" crossorigin
 *       href="<?php echo esc_url( get_template_directory_uri() ); ?>/fonts/poppins-400.woff2">
 * <link rel="preload" as="font" type="font/woff2" crossorigin
 *       href="<?php echo esc_url( get_template_directory_uri() ); ?>/fonts/poppins-600.woff2">
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * ICON FONT (icomoon) — NOT YET SET UP.
 *
 * Generating a real icomoon font requires manually uploading SVGs to
 * icomoon.io and downloading the generated font + selection.json — an
 * external, interactive tool this session cannot drive. `fontFamily.icomoon`
 * stays defined in tailwind.config.js so nothing breaks when it's added, but
 * no @font-face exists yet and no component in this build references
 * `font-icomoon` or an `.icon-*` class — inline SVGs are used instead (see
 * theme/images/icons/). Swap them for icomoon classes once a real export
 * exists, following the workflow in ss-tailwind-setup/references/fonts-and-icons.md.
 * ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Tailwind's base styles (plus any registered by plugins), then this theme's
 * element defaults and type scale.
 */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

html,
	body {
  height: 100%;
  width: 100%;
}

/*
	 * Round 72: scroll-padding-top added — confirmed a real bug while testing
	 * toc-anchor-nav's jump links on a freshly-seeded Privacy Policy page:
	 * .site-header is `position:fixed` (see header.css), so a plain #anchor
	 * jump lands the target's top flush at viewport y=0 — exactly where the
	 * fixed header also sits, hiding/overlapping the target's own heading
	 * behind it (confirmed via getBoundingClientRect(): the jumped-to
	 * heading's own top measured 0, same position the header occupies).
	 * scroll-padding-top reserves that space for every anchor jump sitewide
	 * (not just toc-anchor-nav — any #hash link benefits), sized to the
	 * header's own real measured height at each range (102px mobile/tablet,
	 * 131px from lg up) plus a small breathing-room buffer.
	 */

html {
  scroll-padding-top: 7.375rem;
}

@media (min-width: 992px) {
  html {
    scroll-padding-top: 9.6875rem;
  }
}

body {
  margin: 0px;
  min-width: 320px;
  overflow-x: hidden;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-wrapper {
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

.site-content {
  flex-grow: 1;
}

.site-header,
	.site-content,
	.site-footer {
  flex-shrink: 0;
}

/* ── Media ───────────────────────────────────────────────────────────── */

picture,
	figure {
  margin-bottom: 1rem;
  display: block;
  vertical-align: middle;
}

img {
  display: inline;
  height: auto;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* ── Text ────────────────────────────────────────────────────────────── */

p {
  margin-bottom: 1rem;
}

/* `transition-colors`, not `transition-all`: the only thing links change on
	 * hover here is colour (every .btn variant, the social icons and the hero
	 * badge swap bg/text/border and nothing else), so `all` bought nothing and
	 * meant every link animated layout properties too. That is what made the
	 * desktop nav carets animate their padding, so measuring the nav mid-hover
	 * returned values that disagreed with the resting layout. */

a {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

a:hover {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/*
	 * Type scale.
	 *
	 * Line height is set per level, not shared. Display type needs to sit
	 * tight, around 1.1, or a two-line heading reads as two separate lines
	 * instead of one title; small headings need more air. The old shared
	 * value, plus a section-heading rule that switched to 1.5 at the widest
	 * breakpoint, put body-copy spacing on 46px type and left every
	 * two-line heading on the site looking like it was falling apart.
	 *
	 * Tracking is in em now, so it scales with the type. The fixed -2.24px
	 * from Figma was right at 40px and cramped everywhere smaller.
	 *
	 * Keep the .h1-.h6 aliases: templates use <h3 class="h2"> to get a size
	 * without breaking semantic heading order.
	 */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-bottom: 0.5rem;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 1310px) {
  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-bottom: 1rem;
  }
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  text-wrap: balance;
}

h1, .h1 {
  font-size: 2.125rem;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

@media (min-width: 576px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 768px) {
  h1, .h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 3.5rem;
  }
}

@media (min-width: 1310px) {
  h1, .h1 {
    font-size: 4rem;
  }
}

h2, .h2 {
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

@media (min-width: 992px) {
  h2, .h2 {
    font-size: 2.25rem;
  }
}

@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2.625rem;
  }
}

@media (min-width: 1310px) {
  h2, .h2 {
    font-size: 2.875rem;
  }
}

h3, .h3 {
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

@media (min-width: 1310px) {
  h3, .h3 {
    font-size: 1.5rem;
  }
}

h4, .h4 {
  font-size: 1.0625rem;
  line-height: 1.3;
}

@media (min-width: 1310px) {
  h4, .h4 {
    font-size: 1.125rem;
  }
}

h5, .h5 {
  font-size: 0.9375rem;
  line-height: 1.35;
}

@media (min-width: 1310px) {
  h5, .h5 {
    font-size: 1rem;
  }
}

h6, .h6 {
  font-size: 0.875rem;
  line-height: 1.35;
}

@media (min-width: 992px) {
  h6, .h6 {
    font-size: 0.9375rem;
  }
}

@media (min-width: 1310px) {
  h6, .h6 {
    font-size: 1rem;
  }
}

strong,
	b {
  font-weight: 600;
}

/* ── Lists ───────────────────────────────────────────────────────────────
	 * Structural lists (nav, socials, pills) reset these with
	 * `list-none m-0 p-0 space-y-0`.
	 * ─────────────────────────────────────────────────────────────────────── */

ul,
	ol {
  margin-bottom: 1rem;
  margin-left: 1.125rem;
}

ul > :not([hidden]) ~ :not([hidden]),
	ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

@media (min-width: 992px) {
  ul > :not([hidden]) ~ :not([hidden]),
	ol > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

dl {
  margin-bottom: 1rem;
}

dl dt {
  font-weight: 700;
}

dl dd {
  margin-left: 1rem;
}

/* ── Tables ──────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

caption.block-title h2,caption > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

th,
	td {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(179 179 179 / var(--tw-border-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ── Quotes, code, misc ──────────────────────────────────────────────── */

blockquote {
  margin-bottom: 1rem;
  border-left-width: 3px;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  background-color: rgb(107 166 202 / 0.1);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-style: italic;
}

abbr,
	acronym,
	dfn {
  border-bottom-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

pre {
  margin-bottom: 1rem;
  overflow-x: auto;
  background-color: rgb(107 166 202 / 0.05);
  padding: 1rem;
}

code,
	tt {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
  padding: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

kbd {
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(179 179 179 / var(--tw-border-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

var,
	samp {
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

address {
  margin-bottom: 1rem;
}

/* ── Focus ───────────────────────────────────────────────────────────── */

:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

/**
 * Element defaults, responsive type scale and layout scaffolding.
 * tailwind/custom/base.css — injected right after Tailwind's `base` layer.
 *
 * Type scale source: Home page pull (node 33880:17503/17865). Desktop values are
 * confirmed from Figma; mobile values for h4-h6 are DERIVED (no h4-h6 use was
 * visible in what was pulled) using the ratio rule from figma-intake.md —
 * confirm against more pages as they're built.
 */

/**
 * Tailwind's component classes, then this theme's.
 *
 * `@import-glob` (postcss-import-ext-glob) pulls in every file in
 * `./custom/components/` ALPHABETICALLY, excluding `components.css` — so
 * dropping a new file in that directory wires it up with no edit here.
 *
 * `components.css` is then imported explicitly LAST, which lets it override the
 * other component files without `!important`.
 */

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 576px) {
  .container {
    max-width: 576px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 1310px) {
  .container {
    max-width: 1310px;
  }
}

.prose {
  color: var(--tw-prose-body);
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"], [class~="is-style-lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
  border-bottom: none;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose :where(blockquote > cite):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-body);
  font-style: normal;
  font-weight: 400;
}

.prose :where(blockquote > cite):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "\2014";
}

.prose :where(table.has-fixed-layout):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  table-layout: fixed;
  width: 100%;
}

.prose-neutral {
  --tw-prose-body: #404040;
  --tw-prose-headings: #171717;
  --tw-prose-lead: #525252;
  --tw-prose-links: #171717;
  --tw-prose-bold: #171717;
  --tw-prose-counters: #737373;
  --tw-prose-bullets: #d4d4d4;
  --tw-prose-hr: #e5e5e5;
  --tw-prose-quotes: #171717;
  --tw-prose-quote-borders: #e5e5e5;
  --tw-prose-captions: #737373;
  --tw-prose-kbd: #171717;
  --tw-prose-kbd-shadows: rgb(23 23 23 / 10%);
  --tw-prose-code: #171717;
  --tw-prose-pre-code: #e5e5e5;
  --tw-prose-pre-bg: #262626;
  --tw-prose-th-borders: #d4d4d4;
  --tw-prose-td-borders: #e5e5e5;
  --tw-prose-invert-body: #d4d4d4;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #a3a3a3;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #a3a3a3;
  --tw-prose-invert-bullets: #525252;
  --tw-prose-invert-hr: #404040;
  --tw-prose-invert-quotes: #f5f5f5;
  --tw-prose-invert-quote-borders: #404040;
  --tw-prose-invert-captions: #a3a3a3;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d4d4d4;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #525252;
  --tw-prose-invert-td-borders: #404040;
}

.prose .wp-block-table td, .prose .wp-block-table th {
  border: 0;
}

.prose .wp-block-table thead, .prose .wp-block-table tfoot {
  border-color: var(--tw-prose-th-borders);
}

.prose .wp-block-table thead {
  border-bottom-width: 1px;
}

.prose .wp-block-table tfoot {
  border-top-width: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
	 * Shell
	 * The header is FIXED, so theme/header.php sets a matching top margin on
	 * .site-content (mt-[…] per breakpoint). Take the heights from the token
	 * spec sheet's HEADER block and keep the two in sync.
	 * ═══════════════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 99;
  width: 100%;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* WP's admin bar (#wpadminbar) is ALSO fixed/top-0 with a higher z-index,
	 * so while logged in it sits on top of and hides this header. `header.php`
	 * deliberately cancels WP's own `html.wp-toolbar { margin-top }` spacer
	 * (the banner needs to stay flush at the real viewport top for visitors),
	 * so nothing else pushes the header down — offset it here instead, scoped
	 * to `.admin-bar` so the logged-out/live site is untouched. 782px is WP
	 * core's own admin-bar breakpoint (32px→46px), not one of this theme's. */

/*
	 * Below 782px WP switches #wpadminbar to position:absolute, so it scrolls
	 * away with the page instead of staying pinned. Offsetting the fixed
	 * header by its 46px there pushed the header down into the content: it
	 * ended at 148 while the h1 began at 128, covering the heading by 20px.
	 * Logged-out visitors never saw it, since they have no bar, but every
	 * logged-in editor did.
	 *
	 * So the offset applies only where the bar is actually fixed.
	 */

.admin-bar .site-header {
  top: 2rem;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 0px;
  }
}

/* Confirmed from Figma (Nav Bar, node 33880:462, 1440 desktop frame):
	 * pill x80/y40/w1280/h84, content x95.9/y56/w1249.6/h52 → flat 16px
	 * vertical padding (56-40 top, 124-108 bottom) and a 40px top margin —
	 * NOT the 2xl:py-7 (28px) escalation or mt-4 (16px) this had before.
	 * rgba(40,55,74,0.5) — secondary/50 exactly — with a 10px radius,
	 * floating with a top margin rather than flush to the viewport edge.
	 * Transparent by design (it overlays the hero image).
	 *
	 * Round 186: `backdrop-blur-sm` added — this translucent pill was a flat
	 * color tint with nothing behind it blurred, missing the frosted-glass
	 * read a translucent-over-photo nav bar is meant to have (same blur
	 * strength already established on the mobile navbar-collapse below,
	 * kept consistent rather than picking a new value). Backdrop-filter
	 * degrades safely on its own — unsupported browsers just ignore the
	 * property and fall back to the plain rgba(40,55,74,0.5) tint that was
	 * already here, so no @supports fork is needed. */

/* `backdrop-blur-sm` scoped to `xl:` only (not unconditional) — `filter`/
	 * `backdrop-filter` on an ancestor creates a new containing block for
	 * `position:fixed` descendants. `.navbar-collapse` (the mobile off-canvas
	 * panel) is `position:fixed` below xl and a descendant of `.site-nav`,
	 * so an unconditional blur here was trapping it inside .site-nav's own
	 * small box instead of the viewport — it rendered as a tiny clipped
	 * strip instead of a full-height slide-in panel. The off-canvas panel
	 * already has its own `max-xl:backdrop-blur-sm`, so mobile keeps the
	 * frosted-glass look; only this thin top bar's blur is desktop-only now,
	 * which matches the Figma pull anyway (confirmed against the 1440
	 * desktop frame, node 33880:462 — no mobile nav bar frame was checked). */

.site-nav {
  position: relative;
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 10px;
  background-color: rgb(40 55 74 / 0.62);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (min-width: 992px) {
  .site-nav {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1200px) {
  .site-nav {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
}

.site-nav ul {
  margin: 0px;
  list-style-type: none;
}

/* Round 186: dropped the solid `bg-secondary` override here — now that
	 * `.site-nav`'s base state has `backdrop-blur-sm`, going fully opaque on
	 * scroll makes the blur pointless (nothing behind an opaque layer to
	 * blur) and reads flat/dull stacked against other dark-navy sections
	 * (e.g. trust-stats-bar.php's own bg-secondary) as they scroll past
	 * underneath it.
	 *
	 * Round 187: staying at the base /50 opacity while sticky turned out to
	 * have the opposite problem over WHITE page content — 50% navy over
	 * white blends to a light gray-blue (~rgb(147,155,164)), which is too
	 * pale for the white nav links and light-blue brand text to read
	 * against (confirmed by the math, not just the /50 default which was
	 * only ever confirmed against the dark hero photo, not arbitrary
	 * scrolled-under content). Bumped to /85 for the sticky state
	 * specifically — still translucent + blurred (not the flat opaque
	 * bg-secondary this used to be), just dark enough to hold contrast
	 * over anything scrolling underneath it, white or navy alike. */

.stickyHeader .site-nav {
  background-color: rgb(40 55 74 / 0.85);
  --tw-shadow: 0 0 4px rgba(0,0,0,.2);
  --tw-shadow-colored: 0 0 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 992px) {
  .stickyHeader .site-nav {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/*
	 * Logo width. The 2xl step used to be 20rem (320px), which is 26% of the
	 * whole bar: the nav bar's container maxes out at 1310px (2xl is the last
	 * breakpoint, so it never gets wider no matter the screen) leaving 1230px
	 * inside the nav's own padding. Logo 320 + nav 635 + buttons 420 + gaps
	 * needed 1431px, so the row was 201px over at EVERY width from 1310 up and
	 * wrapped onto two lines. The 2xl bump was making the widest screens the
	 * worst case rather than the best.
	 */

.site-header .navbar-brand {
  margin-right: 0.5rem;
  display: inline-block;
  max-width: min(16.5rem, calc(100vw - 7rem));
  flex: none;
  line-height: 1;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (min-width: 576px) {
  .site-header .navbar-brand {
    margin-right: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .site-header .navbar-brand {
    max-width: 11.25rem;
  }
}

@media (min-width: 1310px) {
  .site-header .navbar-brand {
    max-width: 13rem;
  }
}

.site-header .navbar-brand figure {
  margin-bottom: 0px;
}

/* ═══════════════════════════════════════════════════════════════════════
	 * Off-canvas panel below xl, inline row above.
	 * Closed: -left-[17.5rem] (wider than max-w so it's fully off-screen).
	 * Open:   .show → left-0
	 * ═══════════════════════════════════════════════════════════════════════ */

/* The menu takes the space between the logo and the buttons and centres
	 * itself in it, rather than crowding up against the buttons on the right. */

@media (min-width: 1200px) {
  .site-header #nav-pri {
    display: flex;
    flex: 1 1 0%;
    justify-content: center;
  }
}

.site-header .navbar-collapse {
  width: 100%;
  gap: 1rem;
}

@media not all and (min-width: 1200px) {
  .site-header .navbar-collapse {
    position: fixed;
    left: -20rem;
    top: 0px;
    bottom: 0px;
    z-index: 10000;
    height: auto;
    width: 100%;
    max-width: 19rem;
    overflow-y: auto;
    border-right-width: 1px;
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(40 55 74 / 0.95);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 0 60px rgba(8,16,28,.55);
    --tw-shadow-colored: 0 0 60px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-backdrop-blur: blur(24px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@media (min-width: 1200px) {
  .site-header .navbar-collapse {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
  }
}

@media not all and (min-width: 1200px) {
  .site-header .navbar-collapse.show {
    left: 0px;
  }

  .site-header .navbar-collapse.\!show {
    left: 0px;
  }
}

/*
	 * Mobile panel rows. The off-canvas menu was unstyled text on a flat blue
	 * slab; it is now the same navy glass as the desktop dropdown so the two
	 * read as one system. Rows get a hairline separator and a tinted pressed
	 * state, which also gives a touch target some feedback, since there is no
	 * hover on a phone.
	 */

@media not all and (min-width: 1200px) {
  .site-header .navbar-collapse .navbar-nav > .nav-item {
    border-bottom-width: 1px;
    border-color: rgb(255 255 255 / 0.1);
  }

  .site-header .navbar-collapse .navbar-nav > .nav-item:last-child {
    border-bottom-width: 0px;
  }

  .site-header .navbar-collapse .nav-link {
    border-radius: 0.5rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

  .site-header .navbar-collapse .nav-link:active,
	.site-header .navbar-collapse .menu-item:focus-within > .nav-link {
    background-color: rgb(255 255 255 / 0.1);
  }
}

/* Submenus sit in a recessed well so the hierarchy is visible at a glance
	 * rather than implied by indentation alone. */

@media not all and (min-width: 1200px) {
  .site-header .navbar-collapse .dropdown-menu {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    border-radius: 0.75rem;
    background-color: rgb(0 0 0 / 0.2);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .site-header .navbar-collapse .dropdown-item {
    color: rgb(255 255 255 / 0.8);
  }

  .site-header .navbar-collapse .dropdown-item:active {
    background-color: rgb(255 255 255 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.site-header .navbar-collapse ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

/* ═══════════════════════════════════════════════════════════════════════
	 * Top-level items
	 * Round 68: removed the ::before "current item" dot — confirmed NOT a
	 * real design element via the Homepage's own nav bar pull
	 * (design-context-33880-8089-san-diego-county.md, node 33880:8385):
	 * Home/About/services/contact/blog are all styled IDENTICALLY (same
	 * white color, same Poppins Regular weight, no dot, no distinguishing
	 * treatment at all). This was leftover boilerplate inherited from the
	 * generic starter template, never actually verified against this
	 * project's Figma. Kept the text-primary/font-semibold color+weight
	 * distinction for the current page — Figma's static export naturally
	 * doesn't model a live "current page" interaction state, and that pair
	 * is a reasonable, unobtrusive real-site affordance on its own; the
	 * dot specifically read as generic-template noise, not a deliberate
	 * design choice.
	 * ═══════════════════════════════════════════════════════════════════════ */

/*
	 * `xl:flex-wrap xl:w-full` was the direct cause of the two-line nav: w-full
	 * made the list claim the whole remaining row, and flex-wrap then let it
	 * break rather than overflow, so the failure was silent. Now nowrap and
	 * auto width, so the row either fits or visibly overflows and gets fixed.
	 * Wrapping is still allowed below xl, where the menu is the stacked
	 * off-canvas panel and wrapping is correct.
	 */

.site-header .navbar-nav {
  row-gap: 0.5rem;
}

.site-header .navbar-nav > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

@media (min-width: 1200px) {
  .site-header .navbar-nav {
    display: flex;
    width: auto;
    flex-wrap: nowrap;
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }
}

@media (min-width: 1310px) {
  .site-header .navbar-nav {
    -moz-column-gap: 0.875rem;
         column-gap: 0.875rem;
  }
}

/*
	 * Header width budget.
	 *
	 * The row is logo + nav + two buttons on one line from xl up, and it has
	 * already overrun once. Adding "Areas We Serve" to the menu and a handset
	 * to the phone button pushed the Call button off the right edge again at
	 * 1200 and 1280: measured from a 1200px render, it was clipped mid-number.
	 *
	 * The number is the thing the client asked to make prominent, so the space
	 * is taken from padding rather than from the label. Buttons keep their full
	 * size from 2xl, where there is room. The handset is the first thing to go,
	 * since it is decoration and the number is not.
	 */

/*
	 * Measured, not guessed. The container caps at 1310px with 16px of padding,
	 * so every viewport from 1310 up lays out identically, and in all of them
	 * the Call button ended 5px PAST the padding box: flush with the pill edge,
	 * which is what reads as "cut off". Adding the word "Now" the client asked
	 * for costs about another 42px on top of that.
	 *
	 * Roughly 80px is reclaimed here, from nav gaps and button padding, which
	 * covers the word and leaves a real gap at the right again. The number and
	 * the label are never what gets trimmed, since they are the thing he asked
	 * to make prominent.
	 */

.site-header .btn {
  padding-left: 22px;
  padding-right: 22px;
}

@media not all and (min-width: 1310px) {
  .site-header .btn {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.9375rem;
  }
}

.site-header .\!btn {
  padding-left: 22px;
  padding-right: 22px;
}

@media not all and (min-width: 1310px) {
  .site-header .\!btn {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.9375rem;
  }
}

.site-header .btn-call {
  gap: 0.375rem;
}

@media not all and (min-width: 1310px) {
  .site-header .btn-call-icon {
    display: none;
  }
}

.site-header .btn-call-number {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.site-header .navbar-nav .nav-item > a {
  text-decoration-line: none;
}

/*
	 * FIXED: `xl:text-secondary-800` (near-black) was inherited from the generic
	 * template, which assumes a solid white header at desktop widths. Ours is
	 * ALWAYS dark (semi-transparent navy floating pill, solid navy once
	 * .stickyHeader) per Figma, so nav text must stay white at every
	 * breakpoint — the dark override made links unreadable except when some
	 * other state happened to win the cascade.
	 */

.site-header .navbar-nav .nav-link {
  position: relative;
  display: block;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-color: rgb(255 255 255 / 0.3);
  padding: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0.32px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.site-header .navbar-nav .nav-link:hover {
  opacity: 1;
}

@media (min-width: 1200px) {
  .site-header .navbar-nav .nav-link {
    width: auto;
    white-space: nowrap;
    border-bottom-width: 0px;
    padding: 0px;
  }

  .site-header .navbar-nav .nav-link:hover {
    --tw-text-opacity: 1;
    color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  }
}

@media (min-width: 1310px) {
  .site-header .navbar-nav .nav-link {
    font-size: 1rem;
  }
}

@media (min-width: 1200px) {
  .site-header .navbar-nav > .nav-item {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.site-header .current-menu-item .nav-link {
  font-weight: 600;
}

@media (min-width: 1200px) {
  .site-header .current-menu-item .nav-link {
    --tw-text-opacity: 1;
    color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  }

  .site-header .navbar-nav > .menu-item-has-children:hover>.caret {
    --tw-text-opacity: 1;
    color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  }

  .site-header .navbar-nav > .menu-item-has-children:hover>.nav-link {
    --tw-text-opacity: 1;
    color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  }
}

.site-header .menu-item-has-children {
  position: relative;
}

.site-header .menu-item-has-children .nav-link {
  padding-right: 2.75rem;
}

@media (min-width: 1200px) {
  .site-header .menu-item-has-children .nav-link {
    padding-right: 0.875rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
	 * Submenu toggle (below xl only)
	 *
	 * A real 44px button, emitted by the navwalker beside each parent link.
	 * It replaces the <i class="caret"> as the tap target: that element comes
	 * out 5x5px on a phone, from a rule outside this theme, so the submenus
	 * could not be opened by hand at all. The link keeps navigating; this
	 * opens the list.
	 * ═══════════════════════════════════════════════════════════════════════ */

.site-header .submenu-toggle {
  /* `display: grid` written out: @apply grid is circular in this layer,
		 * where another component rule targets `.grid` itself. */
  display: grid;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 0.375rem;
  background-color: transparent;
  color: rgb(255 255 255 / 0.75);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.site-header .submenu-toggle:hover {
  background-color: rgb(255 255 255 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.site-header .submenu-toggle:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: rgb(255 255 255 / 0.7);
}

@media (min-width: 1200px) {
  .site-header .submenu-toggle {
    display: none;
  }
}

/* Drawn from two borders rather than the icon font, for the same reason
	 * the desktop chevrons are: the font is not set up and the <i> it would
	 * live in is not reliably ours to style. */

.site-header .submenu-toggle-icon {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  --tw-translate-y: -0.125rem;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-color: currentColor;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.site-header .submenu-toggle[aria-expanded='true'] .submenu-toggle-icon {
  --tw-translate-y: 0.0625rem;
  --tw-rotate: -135deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.site-header .submenu-open > .nav-link {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* The <i> is now redundant everywhere: the button carries the affordance
	 * below xl, and a pseudo-element on the link carries it above xl. */

@media (max-width: 1199px) {
  .site-header .caret {
    display: none !important;
  }
}

/*
	 * Desktop caret spacing.
	 *
	 * Below xl the caret is absolutely positioned at `right-2`, so the rule
	 * above reserves space for it with right padding — correct there, and the
	 * descendant selector also (correctly) covers carets on nested dropdown
	 * items.
	 *
	 * At xl the caret goes `static` and flows inline INSIDE the <a>, so that
	 * same right padding stops reserving space and becomes dead space sitting
	 * after the arrow. Measured on the rendered header: the three dropdown
	 * items ended up 33.2px from their neighbour while Home -> Services, with
	 * no caret and no padding, was 20px. That uneven rhythm is what made the
	 * bar look mis-spaced.
	 *
	 * Fix: at xl drop the padding and lay the label and caret out as flex
	 * items with their own gap, so the list's own gap-x is the only thing
	 * between one item and the next. Scoped to `> .menu-item-has-children >`
	 * so nested dropdown items keep the padded treatment above.
	 */

@media (min-width: 1200px) {
  .site-header .navbar-nav > .menu-item-has-children > .nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-right: 0px;
  }
}

/*
	 * Dropdown rows.
	 *
	 * The walker gives these links `.nav-link`, not `.dropdown-item`, which is
	 * why an earlier pass at this styled nothing: the rules looked right and
	 * simply never matched. Confirmed against the rendered DOM.
	 *
	 * Rows were separated by solid white rules and filled flat blue on hover.
	 * Now each is its own rounded target inside the padded panel, with an
	 * accent bar that grows at the left and a small indent, so the pointer has
	 * something that tracks it. Only colour, padding and the bar's height
	 * move, so no row ever shifts its neighbour.
	 */

.site-header .navbar-nav .menu-item-has-children .dropdown-menu .nav-link {
  position: relative;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 1200px) {
  .site-header .navbar-nav .menu-item-has-children .dropdown-menu .nav-link {
    border-radius: 0.5rem;
    border-width: 0px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.9375rem;
    color: rgb(255 255 255 / 0.85);
    transition-property: background-color,color,padding-left;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }
}

.site-header .navbar-nav .menu-item-has-children .dropdown-menu .nav-link::before {
  content: "";
}

@media (min-width: 1200px) {
  .site-header .navbar-nav .menu-item-has-children .dropdown-menu .nav-link::before {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    height: 0px;
    width: 3px;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
    transition-property: height;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

  .site-header .navbar-nav .menu-item-has-children .dropdown-menu .menu-item:hover > .nav-link,
	.site-header .navbar-nav .menu-item-has-children .dropdown-menu .menu-item:focus-within > .nav-link {
    background-color: rgb(255 255 255 / 0.09);
    padding-left: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .site-header .navbar-nav .menu-item-has-children .dropdown-menu .menu-item:hover > .nav-link::before,
	.site-header .navbar-nav .menu-item-has-children .dropdown-menu .menu-item:focus-within > .nav-link::before {
    height: 1.25rem;
  }
}

.site-header .navbar-nav .menu-item-has-children .dropdown-menu .nav-item:last-child .nav-link {
  border-style: none;
}

@media (prefers-reduced-motion: reduce) {
  @media (min-width: 1200px) {
    .site-header .navbar-nav .menu-item-has-children .dropdown-menu .menu-item:hover > .nav-link {
      padding-left: 1rem;
    }
  }
}

.site-header .current-menu-item > .dropdown-item {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

@media (min-width: 1200px) {
  .site-header .current-menu-item > .dropdown-item {
    font-weight: 500;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
	 * Caret
	 * Above xl it is pointer-events-none on top-level items (hover opens the
	 * dropdown); below xl it is the tap target that slide-toggles the submenu.
	 * ═══════════════════════════════════════════════════════════════════════ */

/* `.caret` sits inside the `<a>` (navwalker: `<a>Title <i class="caret">
	 * </i></a>`), not as a direct child of the `<li>` — the old `> .caret`
	 * chain never matched anything. */

@media (min-width: 1200px) {
  .site-header .navbar-nav > .menu-item-has-children > .nav-link > .caret {
    pointer-events: none;
  }
}

.site-header .menu-item-has-children .caret {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  display: inline;
  width: 2rem;
  height: 2rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  place-items: center;
  text-align: center;
  font-size: 0.625rem;
  font-style: normal;
  line-height: 2rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 5ms;
}

.block-title.site-header .menu-item-has-children .caret h2,.site-header .menu-item-has-children .caret > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

@media not all and (min-width: 1200px) {
  .site-header .menu-item-has-children .caret {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }
}

@media (min-width: 1200px) {
  .site-header .menu-item-has-children .caret {
    position: static;
    right: auto;
    width: auto;
    height: auto;
    transform: none;
    line-height: 1;
  }
}

/* Mobile: rotate to point down while its submenu is open (JS toggles
	 * aria-expanded on click in ss.dropdown()). */

@media not all and (min-width: 1200px) {
  .site-header .menu-item-has-children .caret[aria-expanded='true'] {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

/* The top-level "Services" caret is deliberately glyph-less on desktop
	 * (see Round 192 below — Figma shows no arrow there, hover opens the
	 * dropdown instead). Mobile has no hover state, so its tap-to-expand
	 * caret needs a visible affordance of its own — nested-level carets
	 * already get one from `.navbar-nav .menu-item .dropdown-menu .caret`
	 * since they sit inside an (eventually) open .dropdown-menu; this is
	 * only the top-level one, which that selector doesn't reach. */

@media not all and (min-width: 1200px) {
  .site-header .navbar-nav > .menu-item-has-children > .nav-link > .caret::before {
    font-size: 0.875rem;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-content: '>';
    content: var(--tw-content);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
	 * Dropdowns — hover-opened above xl, slide-toggled below.
	 * Multi-level: nested menus fly out to the right.
	 *
	 * Round 191: recolored/resized to match Figma exactly (Nav Dropdown,
	 * node 33880:18204/18224/18233, fileKey 9AXAriC56tjHmx6m2bKAfG) — this
	 * was a generic light dropdown (bg-secondary-50, colored borders,
	 * min-w-220px) never actually checked against the one real menu it's
	 * used for. Confirmed: solid bg-secondary (#28374a) panel, white text,
	 * ~150px-wide columns (auto-width here instead of Figma's fixed
	 * per-column px, since real menu labels vary), rounded BOTTOM corners
	 * only on the first-level flyout (it sits flush under the nav pill),
	 * thin low-opacity white divider lines between rows (not the primary-
	 * colored border this had), and a nested (2nd-level) flyout that adds
	 * rounded-tr since its top-right corner is the only one left exposed
	 * once it's snug against column 1's right edge.
	 * ═══════════════════════════════════════════════════════════════════════ */

/*
	 * xl:top-[60px] (not a %) is deliberate: `.nav-link` has xl:p-0, so the
	 * <li> this dropdown is positioned against (position:relative) is only
	 * ~24px tall — just the text — while the visual nav pill is much
	 * taller via .site-nav's own py-3/py-4. A %-based top anchors to the
	 * <li>'s own short box and lands inside the pill instead of below it.
	 * 60px = li's own height + the gap down to the pill's real bottom edge
	 * (confirmed via direct measurement), matching Figma's near-flush gap. */

.navbar-nav .menu-item .dropdown-menu {
  line-height: 1.4;
}

@media not all and (min-width: 1200px) {
  .navbar-nav .menu-item .dropdown-menu {
    display: none;
    background-color: transparent;
  }
}

@media (min-width: 1200px) {
  .navbar-nav .menu-item .dropdown-menu {
    visibility: hidden;
    position: absolute;
    top: 60px;
    left: -1rem;
    min-width: 160px;
    --tw-translate-y: 0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    white-space: nowrap;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 14px;
    border-width: 1px;
    border-top-width: 0px;
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(40 55 74 / 0.95);
    padding: 0.5rem;
    font-size: 1rem;
    opacity: 0;
    --tw-shadow: 0 18px 40px -12px rgba(8,16,28,0.55);
    --tw-shadow-colored: 0 18px 40px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  .navbar-nav .menu-item-has-children:hover > .dropdown-menu {
    visibility: visible;
    top: 60px;
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }
}

.navbar-nav .menu-item .dropdown-menu .menu-item:last-child .dropdown-item {
  border-bottom-width: 0px;
}

/* Third level */

@media (min-width: 1200px) {
  .navbar-nav .menu-item .dropdown-menu .menu-item-has-children:hover .dropdown-menu {
    top: 0px;
  }
}

.navbar-nav .menu-item .dropdown-menu .menu-item-has-children .dropdown-item {
  padding-right: 1.75rem !important;
}

@media not all and (min-width: 1200px) {
  .navbar-nav .menu-item .dropdown-menu .menu-item .dropdown-menu .dropdown-item {
    padding-left: 1.75rem;
  }
}

@media (min-width: 1200px) {
  .navbar-nav .menu-item .dropdown-menu .dropdown-menu {
    left: 100%;
    right: auto;
    top: 0px;
    border-top-right-radius: 10px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

/* Keep the last few flyouts opening rightward rather than off-screen.
	 * If the design has deep menus near the right edge, revisit this. */

@media (min-width: 1200px) {
  .navbar-nav .menu-item .dropdown-menu .dropdown-menu:nth-last-child(-n + 3) {
    left: 100% !important;
    right: auto !important;
  }
}

/* Round 192: the caret has ALWAYS been an empty `<i class="caret
	 * icon-chevron-down">` — icomoon was never actually set up (see
	 * fonts.css's own "NOT YET SET UP" note), so this glyph has been
	 * invisible sitewide since the theme was built. It only became
	 * noticeable now that "Services" is the first menu item to ever get
	 * real children. Figma shows no arrow on the top-level nav item itself
	 * (only the nested dropdown rows get one: "Frameless >" etc.) — matched
	 * that exactly via a plain CSS `content` character instead of relying
	 * on the unset-up icon font, scoped to nested-level carets only so the
	 * top-level "Services" caret stays glyph-less as confirmed. */

/*
	 * Round 202: that stopgap `>` is replaced with a real chevron.
	 *
	 * A greater-than sign is a maths glyph, not an arrow: its weight, size and
	 * baseline all come from the body font, it sat slightly high next to the
	 * label, and inherited transforms were tilting it. Drawing the arrow from
	 * two borders instead gives a shape with the right proportions that scales
	 * with the text and takes its colour from currentColor.
	 *
	 * It points RIGHT because these nested menus fly out to the right. On
	 * mobile the parent .caret is rotated 90deg while a submenu is open, which
	 * composes with this to point the chevron down, which is what "expanded"
	 * should look like.
	 */

.navbar-nav .menu-item .dropdown-menu .caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(255 255 255 / 0.6);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/*
	 * The submenu arrow is drawn on the LINK, not on the <i class="caret">.
	 *
	 * That <i> is not ours to control. It arrives with a 45deg rotation and a
	 * 4x4 box from a source I could not find: no stylesheet rule matches it,
	 * there is no inline style, and --tw-rotate computes to 0 all the way up,
	 * so it is not Tailwind's composed transform either. Two attempts to style
	 * it were silently overridden, the first cancelling out the arrow's own
	 * rotation and leaving the bare corner mark that was reported.
	 *
	 * So desktop stops using it: the <i> is hidden from xl up and the chevron
	 * becomes a pseudo-element on the link, where the cascade is ours. Below
	 * xl the <i> stays, because there it is the tap target that expands the
	 * submenu and hiding it would break opening a submenu on a phone.
	 */

/* !important for the same reason as everything else about this element:
	 * ordinary specificity does not beat whatever is styling it. Verified in
	 * the live page, where the plain utility was silently ignored and left two
	 * arrows on every row. */

@media (min-width: 1200px) {
  .site-header .navbar-nav .menu-item .dropdown-menu .caret {
    display: none !important;
  }

  .site-header .navbar-nav .menu-item .dropdown-menu .menu-item-has-children > .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
}

.site-header .navbar-nav .menu-item .dropdown-menu .menu-item-has-children > .nav-link::after {
  content: "";
}

@media (min-width: 1200px) {
  .site-header .navbar-nav .menu-item .dropdown-menu .menu-item-has-children > .nav-link::after {
    display: block;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-color: currentColor;
    opacity: 0.7;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
  }

  .site-header .navbar-nav .menu-item .dropdown-menu .menu-item-has-children:hover > .nav-link::after {
    --tw-translate-x: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 1;
  }

  .navbar-nav .menu-item .dropdown-menu .menu-item:hover > .nav-link .caret {
    --tw-text-opacity: 1;
    color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  }

  .navbar-nav .menu-item .dropdown-menu .menu-item-has-children:hover .caret {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
	 * Hamburger → X
	 * Three spans of decreasing width; .collapsed rotates the outer two into a
	 * cross and collapses the middle. The delay-300 on the rotations lets the
	 * middle bar disappear first.
	 * ═══════════════════════════════════════════════════════════════════════ */

.site-header .navbar-toggler {
  position: relative;
  display: block;
  height: 2.375rem;
  width: 2.75rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header .navbar-toggler:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

@media (min-width: 1200px) {
  .site-header .navbar-toggler {
    display: none;
  }
}

.site-header .navbar-toggler span {
  display: block;
  height: 0.1875rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header .navbar-toggler span:nth-child(2) {
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
  width: calc(100% - 8px);
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header .navbar-toggler span:nth-child(3) {
  width: calc(100% - 15px);
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header .navbar-toggler.collapsed span:first-child {
  width: 100%;
  --tw-translate-y: 9px;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-delay: 300ms;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header .navbar-toggler.collapsed span:nth-child(2) {
  visibility: hidden;
  width: 0px;
  opacity: 0;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header .navbar-toggler.collapsed span:last-child {
  width: 100%;
  --tw-translate-y: -7px;
  --tw-rotate: 130deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: all;
  transition-delay: 300ms;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
	 * Header CTAs.
	 *
	 * `.btn`'s page sizing (18px text, 30px side padding) is right for a hero
	 * or a section CTA and too big for a nav bar: the two header buttons alone
	 * wanted 420px of a 1230px row. Compact here only, so every other button
	 * on the site is untouched.
	 *
	 * whitespace-nowrap and shrink-0 are the important pair. Without them flex
	 * shrinks a button below its own text and the label breaks mid-phrase,
	 * which is why "Free Estimate" and "Call 800-715-0031" were each rendering
	 * on two lines. A button that cannot fit should push the layout, not
	 * quietly hyphenate itself.
	 * ═══════════════════════════════════════════════════════════════════════ */

.site-header .btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.9375rem;
}

.site-header .\!btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.9375rem;
}

/**
 * Buttons — tailwind/custom/components/buttons.css
 *
 * Markup: <a class="btn">Label</a>  (icons are inline SVG in this build — see
 * fonts.css note on icomoon not being set up yet)
 *
 * Home page pull: buttons are NOT full-pill — a confirmed 5px radius, NOT
 * uppercase (capitalize/sentence case). Deviates from the generic default.
 *
 * Round 183: briefly removed `capitalize` here, then reverted it after
 * sampling 35+ cached Figma pulls sitewide, every one of which carried
 * `capitalize` on its button nodes.
 *
 * REMOVED AGAIN (client Content QA, Sep 2026) — and this time it stays out.
 * Figma's `capitalize` was real, but it is a DISPLAY transform: the source
 * copy is already correctly cased, so title-casing it on render produced
 * "Get A Free Estimate" instead of "Get a Free Estimate". The client QA
 * sheet flags this sitewide as item 1 and asks for the rule off rather
 * than the copy retyped. Do not restore it from the Figma className alone
 * — the mockup's own text nodes are cased the same way the CMS content is.
 */

.btn {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 5px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.block-title.btn h2,.btn > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.btn:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.btn:not(.btn-disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* Inverted — for use on primary/dark sections. */

.btn-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.btn-white:focus-visible {
  outline-color: #fff;
}

.btn-white:not(.btn-disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Solid navy fill — confirmed in the design (e.g. the nav/hero "Call" button),
 * distinct from the accent-blue .btn default. Added because the design
 * genuinely uses two button fills, not one — see ss-figma-to-html's fidelity
 * table ("a brand-specific... use an arbitrary value and say why"). */

.btn-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-secondary:focus-visible {
  outline-color: #28374a;
}

.btn-secondary:not(.btn-disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* Outline — used on the hero over the dark image (white border, no fill). */

/* ═══════════════════════════════════════════════════════════════════════════
 * .btn-phone — the homepage hero's call CTA.
 *
 * Client asked for the phone number bigger and easier to see. It was a plain
 * .btn-outline, the same weight as the estimate button beside it, so the number
 * read as secondary. This is deliberately asymmetric with its neighbour: the
 * number is the thing being emphasised, so it gets a larger type size and more
 * padding rather than both buttons growing together.
 *
 * Solid white on the navy scrim rather than another outline, because outline on
 * outline over a photo is the combination that was hard to read in the first
 * place. White on the bottom-left corner of the scrim is the highest contrast
 * pairing available in the hero.
 * ═══════════════════════════════════════════════════════════════════════════ */

.btn-phone {
  gap: 0.75rem;
  white-space: nowrap;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
  padding-right: 1.5rem;
  text-align: left;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.btn-phone:not(.btn-disabled):hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* The handset badge, with a soft ring that pulses every few seconds. */

.btn-phone-icon {
  position: relative;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .btn-phone-icon {
    gap: 1.25rem;
  }

  .process-steps-slider > .btn-phone-icon > div:last-child {
    padding-left: 0.25rem;
  }
}

.btn-phone-icon svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
}

.btn-phone-icon::after {
  content: "";
  position: absolute;
  inset: 0px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  animation: btn-phone-pulse 3.2s ease-out infinite;
}

@keyframes btn-phone-pulse {
  0%, 55% {
    transform: scale(1);
    opacity: 0.55;
  }

  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

.btn-phone:hover .btn-phone-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.btn-phone:hover .btn-phone-icon::after {
  animation: none;
  opacity: 0;
}

.btn-phone-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.btn-phone-label {
  margin-bottom: 0.25rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.btn-phone:hover .btn-phone-label {
  color: rgb(255 255 255 / 0.7);
}

.btn-phone-num {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@media (min-width: 576px) {
  .btn-phone-num {
    font-size: 1.1875rem;
  }
}

/* Desktop and tablet: bigger number, larger badge and a soft halo, so the
 * call button is the most visible thing in the hero without towering over
 * its neighbour. Both buttons in the row share the taller height. */

@media (min-width: 576px) {
  a.btn-phone {
    min-height: 4rem;
    gap: 0.875rem;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 1.75rem;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16), 0 18px 36px -18px rgba(0, 0, 0, 0.65);
  }

  a.btn-phone:hover {
    box-shadow: 0 0 0 5px rgba(107, 166, 202, 0.35), 0 18px 36px -18px rgba(0, 0, 0, 0.65);
  }

  a.btn-phone .btn-phone-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  a.btn-phone .btn-phone-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  a.btn-phone .btn-phone-label {
    font-size: 0.6875rem;
  }

  a.btn-phone .btn-phone-num {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.005em;
  }

  div:has(> a.btn-phone) > a.btn:not(.btn-phone) {
    min-height: 4rem;
  }
}

/* Phones: the two hero buttons share a row, so the badge carries "Call Now"
 * and the number stays in the fixed call bar below. */

@media (max-width: 575px) {
  .btn-phone {
    gap: 0.5rem;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 1rem;
  }

  .btn-phone-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .btn-phone-label {
    margin-bottom: 0px;
    font-family: Poppins, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0em;
    --tw-text-opacity: 1;
    color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  }

  .btn-phone-num {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-phone-icon::after {
    animation: none;
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * .btn-call — the header phone button.
 *
 * Was .btn-secondary: solid navy on the navy header pill, which is why the
 * client said it did not stand out. White ground with navy text is the highest
 * contrast available against that header in both its states (translucent over
 * a photo, and solid navy once stuck).
 *
 * Deliberately NOT wider than the button it replaces. The header already ran
 * 201px over its track once, so the contrast comes from colour and weight
 * rather than extra padding, and the handset is sized in em so it scales with
 * the label instead of adding a fixed lump.
 * ═══════════════════════════════════════════════════════════════════════════ */

.btn-call {
  white-space: nowrap;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.btn-call:focus-visible {
  outline-color: #fff;
}

.btn-call:not(.btn-disabled):hover {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-call-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Glass hover, shared by every button variant.
 *
 * Two parts. A frosted wash that fades in, and a highlight that sweeps across
 * once, the way light travels over a pane of glass as you move past it. The
 * company sells glass, so the gesture is on-brand rather than decorative.
 *
 * `--btn-sheen` is per-variant on purpose: a white highlight is invisible on
 * the white Call button, so light-filled variants get a navy-tinted one
 * instead. Setting it as a variable keeps one set of rules for both.
 *
 * `overflow-hidden` clips the sweep to the button's rounded corners, and the
 * pseudo-elements are pointer-events-none so they never swallow the click.
 * Everything here is paint and transform only, so it cannot shift layout.
 * ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  --btn-sheen: rgba(255, 255, 255, 0.5);
  --btn-wash: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

/* Light-filled buttons: a white sheen on white reads as nothing, so tint it. */

.btn-white,
.btn-call,
.btn-phone {
  --btn-sheen: rgba(40, 55, 74, 0.16);
  --btn-wash: rgba(40, 55, 74, 0.07);
}

.btn::before,
.btn::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0px;
}

/* The frosted wash. */

.btn::before {
  background: linear-gradient(180deg, var(--btn-wash), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* The travelling highlight. */

.btn::after {
  background: linear-gradient(
		100deg,
		transparent 38%,
		var(--btn-sheen) 50%,
		transparent 62%
	);
  transform: translateX(-130%);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn:hover::before,
.btn:focus-visible::before {
  opacity: 1;
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(130%);
}

/* A small lift so the button feels like it comes forward under the cursor.
 * Transform and shadow only, so neighbours do not move. */

.btn:not(.btn-disabled) {
  transition-property: color, background-color, border-color, box-shadow, transform;
}

.btn:not(.btn-disabled):hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 6px 18px -6px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 6px 18px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn:not(.btn-disabled):active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Over a photo the header buttons genuinely sit on glass, so blur what is
 * behind them on hover. Harmless where the backdrop is already solid. */

.site-header .btn:hover {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .btn::after {
    display: none;
  }

  .btn:not(.btn-disabled):hover {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.btn-outline {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.btn-outline:not(.btn-disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* Applied by JS while a request is in flight, and to "no more results" pills. */

.btn-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.8;
}

/* Small variant. */

.btn-sm {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 15px;
}

/*
 * CONTRAST CHECK before committing:
 *   - white text on bg-primary (#6ba6ca)         ≥ 4.5:1  — VERIFY, mid-tone blue is borderline
 *   - primary text on white (hover state)        ≥ 4.5:1
 *   - white text on bg-secondary (#28374a)       ≥ 4.5:1  — passes, dark navy
 *   - focus ring against both surfaces           ≥ 3:1
 */

/**
 * Forms — tailwind/custom/components/forms.css
 *
 * Gravity Forms ships NO CSS (`add_filter('gform_disable_css','__return_true')`),
 * so this file owns 100% of form styling. Also covers the WP search form and
 * comment form.
 *
 * This file carries over between projects almost unchanged — RETINT to the new
 * palette rather than rewriting, then verify every field type on the Components
 * page.
 *
 * Variants available to templates:
 *   .form-white       inverted, for forms on dark sections
 *   .subscribe-form   inline newsletter — button overlaid inside the input
 * Variants set as Gravity Forms field CSS classes (Field ▸ Appearance):
 *   .gform-icon .gform-icon--send | --phone | --pin | --mail
 *   .gfield--width-half | --width-third | --width-quarter   (GF's own)
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * Wrapper and labels
 * ═══════════════════════════════════════════════════════════════════════════ */

.gform_wrapper {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
}

/*
 * base.css sets a global `ul { list-disc }` for genuine WYSIWYG content,
 * with structural lists expected to opt out via `.list-none` individually
 * (see its comment) — Gravity Forms' own structural <ul>s (the field list,
 * and choice-field <ul>s for checkbox/radio groups) were never added to
 * that opt-out list, so they rendered with bullet points nothing else in
 * the form ever intended.
 */

.gform_wrapper .gform_fields,
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
  margin: 0px;
  list-style-type: none;
}

.gform_wrapper .gform_fields > :not([hidden]) ~ :not([hidden]),
.gform_wrapper .gfield_checkbox > :not([hidden]) ~ :not([hidden]),
.gform_wrapper .gfield_radio > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.gform_wrapper .gform_fields,
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
  padding: 0px;
}

.gform_wrapper .gform_required_legend {
  display: none;
}

.gform_wrapper .hidden_label label,
.gform_wrapper .hidden_label legend.gfield_label {
  display: none;
}

/*
 * Confirmed from Figma (node 33880:378, the estimate-form card): fields show
 * placeholder-style text INSIDE the empty input ("First Name", "Phone Number",
 * etc.) with no separate visible label anywhere above them — matching the
 * project's pre-Gravity-Forms static markup, which used `sr-only` labels +
 * real `placeholder` attributes for exactly this reason. GF renders real
 * <label> elements by default (a master label plus per-sub-input labels for
 * complex fields like Name) — visually hidden here rather than removed, so
 * the accessible name survives; the per-field `placeholder` property (set on
 * the form itself, not here) supplies the visible text instead.
 */

.gform_wrapper label,
.gform_wrapper legend.gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.gform_wrapper .gfield_required {
  margin-left: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.gform_wrapper h3 {
  font-size: 1.125rem;
}

@media (min-width: 576px) {
  .gform_wrapper h3 {
    font-size: 1.25rem;
  }
}

@media (min-width: 1200px) {
  .gform_wrapper h3 {
    font-size: 1.375rem;
  }
}

@media (min-width: 1310px) {
  .gform_wrapper h3 {
    font-size: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Layout — same negative-margin flex grid as the rest of the theme.
 * .gfield--width-* are Gravity Forms' own classes, mapped to breakpoints here.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gform_wrapper .gform_fields {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.25rem;
}

@media (min-width: 1310px) {
  .gform_wrapper .gform_fields {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

.gform_wrapper .gfield {
  width: 100%;
  flex-grow: 1;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

@media (min-width: 1310px) {
  .gform_wrapper .gfield {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 768px) {
  .gform_wrapper .gfield--width-half {
    width: 50%;
  }

  .gform_wrapper .gfield--width-third {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .gform_wrapper .gfield--width-third {
    width: 33.333333%;
  }
}

@media (min-width: 768px) {
  .gform_wrapper .gfield--width-quarter {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .gform_wrapper .gfield--width-quarter {
    width: 25%;
  }
}

/* Complex fields (Name, Address) lay out their sub-inputs via GF's own
 * .gform-grid-row/-col classes — pure structural markup, no layout CSS of
 * its own once gform_disable_css/gform_disable_form_theme_css are on, so
 * without this, sub-inputs (e.g. First/Last) stack instead of sitting
 * side by side. */

.gform_wrapper .gform-grid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.gform_wrapper .gform-grid-col {
  min-width: 8rem;
  flex: 1 1 0%;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Inputs, selects, textareas
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Confirmed from Figma get_design_context on node 33880:378 (the global
 * estimate-form card): bg-white + border-black/10 (a near-black raw value,
 * not one of the site's named secondary tints — kept literal rather than
 * substituted for a token, since it wasn't confirmed to BE one) + rounded-[4px],
 * not the bg-secondary-50/border-secondary-100/5px this used to carry over
 * unverified from the reference skill's generic default. Height (50px) WAS
 * already confirmed correct from an earlier pull.
 */

.gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']),
.gform_wrapper select,
.gform_wrapper textarea {
  height: 3rem;
  width: 100%;
  resize: none;
  border-radius: 4px;
  border-width: 1px;
  border-color: rgb(0 0 0 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit'])::-moz-placeholder, .gform_wrapper select::-moz-placeholder, .gform_wrapper textarea::-moz-placeholder {
  color: rgb(40 55 74 / 0.8);
}

.gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit'])::placeholder,
.gform_wrapper select::placeholder,
.gform_wrapper textarea::placeholder {
  color: rgb(40 55 74 / 0.8);
}

.gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']):focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

@media (min-width: 576px) {
  .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']),
.gform_wrapper select,
.gform_wrapper textarea {
    font-size: 1rem;
  }
}

@media (min-width: 992px) {
  .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']),
.gform_wrapper select,
.gform_wrapper textarea {
    height: 3.5rem;
  }
}

@media (min-width: 1310px) {
  .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']),
.gform_wrapper select,
.gform_wrapper textarea {
    height: 3.125rem;
  }
}

/* Native select arrow replaced with an inline data-URI SVG so it can be tinted.
 * The %23 in the fill is a URL-encoded '#'. */

.gform_wrapper select {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%229%22%20viewBox%3D%220%200%2015%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M.428%201.003a1%201%200%200%201%201.414%200l5.293%205.293%205.293-5.293a1%201%200%201%201%201.414%201.414l-6%206a1%201%200%200%201-1.414%200l-6-6a1%201%200%200%201%200-1.414%22%20fill%3D%22%236b7280%22%2F%3E%3C%2Fsvg%3E');
  background-position: calc(100% - 16px) center;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}

.gform_wrapper select option {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.gform_wrapper textarea {
  min-height: 6.75rem;
}

@media (min-width: 1200px) {
  .gform_wrapper textarea {
    min-height: 8rem;
    padding-top: 1.25rem;
  }
}

/* File upload — strip the input back so the native control shows plainly. */

.gform_wrapper .gfield--type-fileupload input {
  height: auto !important;
  border-radius: 0px !important;
  border-width: 0px !important;
  background-color: transparent !important;
  padding: 0px !important;
}

.gform_wrapper .gfield--type-fileupload .gform_fileupload_multifile {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}

/* List field */

.gform_wrapper .gfield_list {
  width: 100%;
}

.gform_wrapper .gfield_list thead th {
  padding-bottom: 0.25rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}

.gform_wrapper .gfield_list td input {
  height: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Consent, radio, checkbox
 * hue-rotate-180 recolours the native control without an appearance reset.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gform_wrapper .ginput_container_consent,
.gform_wrapper .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.gform_wrapper .ginput_container_consent input,
.gform_wrapper .gchoice input {
  position: relative;
  top: 0.25rem;
  width: 1rem;
  height: 1rem;
  flex: none;
  --tw-hue-rotate: hue-rotate(180deg);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.gform_wrapper .ginput_container_consent label,
.gform_wrapper .ginput_container_consent input,
.gform_wrapper .gchoice label,
.gform_wrapper .gchoice input {
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Validation and confirmation
 * Round 71: per-field validation_message text visually hidden (per direct
 * request — it was pushing later fields down every time it appeared, a
 * real layout shift on every failed validation). Using `sr-only` rather
 * than `hidden`/`display:none`: the message stays in the accessibility
 * tree for screen readers (the "errors must not rely on colour alone"
 * principle this comment used to describe), it just no longer occupies
 * visual space. The red border on the input itself (.gfield_error input
 * etc. below) is the sighted-user signal now.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gform_wrapper .gform_submission_error {
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.gform_wrapper .validation_message {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Round 71: `.gform_validation_errors .validation_error` (a descendant
   selector) never actually matched — GF puts BOTH classes on the SAME
   element (`class="gform_validation_errors validation_error"`), not one
   nested inside the other. Confirmed via the live DOM: this banner was
   rendering with zero styling from this rule, as plain unstyled text —
   which was the real, main contributor to the layout shift (the top
   summary banner, not the per-field messages, which were already a
   comparatively small mt-2 each). Fixed the selector (no space, compound
   class) AND changed it to sr-only, consistent with hiding error TEXT
   sitewide in favor of the red input borders as the sighted-user signal —
   this was the single biggest visible shift of the two. */

.gform_validation_errors.validation_error {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.gfield_error input,
.gfield_error select,
.gfield_error textarea {
  /* !border-red-500 required: the base input rule
	   (.gform_wrapper input:not(...):not(...):not(...)) has three :not()
	   pseudo-classes, each contributing attribute-selector-level
	   specificity — its plain `border-black/10` was winning over this
	   rule's border color regardless of source order (confirmed via
	   computed style: border stayed rgba(0,0,0,0.1) on a field with
	   .gfield_error already applied). This is why the border never
	   actually turned red despite the class being present. */
  --tw-border-opacity: 1 !important;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;
}

.gform_confirmation_message {
  display: inline-block;
  width: 100%;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.block-title.gform_confirmation_message h2,.gform_confirmation_message > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Footer, submit, loader
 * ═══════════════════════════════════════════════════════════════════════════ */

.gform_footer {
  position: relative;
  margin-top: 1.25rem;
}

.gform-button--width-full {
  width: 100%;
}

/*
 * Confirmed from Figma (node 33880:378, form submit button): rounded-[10px]
 * (NOT .btn's 5px — a genuine inconsistency vs the adjacent "Call" button in
 * the same composite, flagged rather than changed site-wide), px-5 py-4
 * (20px/16px, NOT .btn's 30px/15px), font-semibold (NOT .btn's font-normal).
 * `!` since these override .btn/.btn-secondary applied on the same element.
 *
 * Width: Figma has this button at a literal w-[415px] — the SAME fixed width
 * as every input field above it (they're all w-[415px] too, at that one
 * 1440px frame). The confirmed relationship is "button matches the fields'
 * width", not a specific pixel value — reproduced as `w-full` (the fields
 * are already effectively edge-to-edge via .gform_fields' negative-margin
 * trick canceling each .gfield's own padding) so it holds at every
 * breakpoint instead of only being correct at exactly one frame width.
 */

.gform-submit-btn {
  display: flex !important;
  width: 100% !important;
  border-radius: 10px !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  font-weight: 600 !important;
}

/*
 * One-off exception: the Free Estimate page's process-info-form-split card
 * embeds this SAME form (id 1) a second time, and Figma's own raw markup for
 * THAT specific button (node 33880:16929) has no width class at all —
 * `shrink-0`, sized to its own content, not stretched to match the fields
 * above it like every other confirmed instance. Scoped so the sitewide
 * w-full default (confirmed elsewhere) isn't disturbed.
 */

.process-form-narrow-submit .gform-submit-btn {
  width: auto !important;
}

/* CSS-only spinner, no image. */

.gform-loader {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  z-index: 10;
  display: block !important;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.gform-loader::after {
  display: block;
  height: 0.75rem;
  content: var(--tw-content);
  width: 0.75rem;
}

@keyframes spin {
  to {
    content: var(--tw-content);
    transform: rotate(360deg);
  }
}

.gform-loader::after {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  border-width: 2px;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-left-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

/* Multi-page nav. `only:ml-auto` right-aligns Next when Previous is absent. */

.gform_page_footer {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.gform_page_footer .btn {
  min-width: 9.0625rem;
}

.gform_page_footer .btn:only-child {
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Variant: .form-white — forms on dark sections
 * ═══════════════════════════════════════════════════════════════════════════ */

.form-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.form-white .gform_wrapper label,
.form-white .gform_wrapper legend.gfield_label {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.form-white .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']),
.form-white .gform_wrapper select,
.form-white .gform_wrapper textarea {
  background-color: rgb(255 255 255 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.form-white .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit'])::-moz-placeholder, .form-white .gform_wrapper select::-moz-placeholder, .form-white .gform_wrapper textarea::-moz-placeholder {
  color: rgb(255 255 255 / 0.5);
}

.form-white .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit'])::placeholder,
.form-white .gform_wrapper select::placeholder,
.form-white .gform_wrapper textarea::placeholder {
  color: rgb(255 255 255 / 0.5);
}

.form-white .gform_wrapper select {
  /* The white-form variant pointed at images/arrow-down-white.png, which was
	 * never added to the theme, so these selects rendered with no arrow at all.
	 * Uses the same inline chevron as the default select above with a white
	 * fill, rather than reintroducing a binary for one 15x9 graphic. */
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%229%22%20viewBox%3D%220%200%2015%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M.428%201.003a1%201%200%200%201%201.414%200l5.293%205.293%205.293-5.293a1%201%200%201%201%201.414%201.414l-6%206a1%201%200%200%201-1.414%200l-6-6a1%201%200%200%201%200-1.414%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E');
  color: rgb(255 255 255 / 0.5);
}

/* ⚠ CONTRAST: white/50 placeholder on white/10 over a dark section is usually
 * below 4.5:1. Verify, and raise to white/70 if it fails. */

/* ═══════════════════════════════════════════════════════════════════════════
 * Variant: suffix icons inside fields
 * Applied as a Gravity Forms field CSS class: `gform-icon gform-icon--send`
 * ⚠ Hardcoded icomoon codepoints — verify if the icon set is re-exported.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gform_wrapper .gform-icon .ginput_container {
  position: relative;
}

.gform_wrapper .gform-icon .ginput_container::after {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  font-family: icomoon;
  font-size: 0.875rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}

.gform_wrapper .gform-icon .ginput_container input {
  padding-right: 2.5rem !important;
}

@media (min-width: 1310px) {
  .gform_wrapper .gform-icon .ginput_container input {
    padding-right: 2.75rem !important;
  }
}

.gform_wrapper .gform-icon .ginput_container textarea {
  padding-top: 0.875rem;
}

@media (min-width: 1310px) {
  .gform_wrapper .gform-icon .ginput_container textarea {
    padding-right: 2.75rem !important;
  }
}

.gform_wrapper .gform-icon .ginput_container.ginput_container_textarea::after {
  top: 1.25rem;
  --tw-translate-y: -0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.gform_wrapper .gform-icon.gform-icon--send .ginput_container::after {
  --tw-content: '\e90a';
  content: var(--tw-content);
}

.gform_wrapper .gform-icon.gform-icon--phone .ginput_container::after {
  --tw-content: '\e903';
  content: var(--tw-content);
}

.gform_wrapper .gform-icon.gform-icon--pin .ginput_container::after {
  --tw-content: '\e900';
  content: var(--tw-content);
}

.gform_wrapper .gform-icon.gform-icon--mail .ginput_container::after {
  --tw-content: '\e901';
  content: var(--tw-content);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Variant: .subscribe-form — inline newsletter, button inside the input
 * ═══════════════════════════════════════════════════════════════════════════ */

.subscribe-form form {
  position: relative;
}

.subscribe-form .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']) {
  border-radius: 9999px;
  --tw-border-opacity: 1;
  border-color: rgb(179 179 179 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  letter-spacing: 0.3px;
}

.subscribe-form .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit'])::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
}

.subscribe-form .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit'])::placeholder {
  --tw-text-opacity: 1;
  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  .subscribe-form .gform_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']) {
    height: 3.25rem;
    padding-left: 1.25rem;
    padding-right: 9rem;
  }
}

.subscribe-form .gform_footer {
  margin-top: 0.75rem;
}

@media (min-width: 576px) {
  .subscribe-form .gform_footer {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    z-index: 1;
    margin-top: 0px;
  }
}

.subscribe-form .btn {
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.3px;
}

@media not all and (min-width: 576px) {
  .subscribe-form .btn {
    width: 100%;
  }
}

.subscribe-form .btn i {
  display: none;
}

.subscribe-form .gform_validation_errors {
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}

.subscribe-form .gfield_validation_message {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * jQuery UI datepicker (Gravity Forms date fields)
 * ═══════════════════════════════════════════════════════════════════════════ */

.ui-datepicker {
  z-index: 10 !important;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-size: 0.75rem;
}

.ginput_container_date {
  position: relative;
}

.gdatepicker_with_icon {
  padding-right: 3.5rem !important;
}

.ui-datepicker-trigger {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media not all and (min-width: 1310px) {
  .ui-datepicker-trigger {
    height: 6px;
    width: 12px;
  }
}

.ui-datepicker a {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ui-datepicker-header {
  display: flex;
  cursor: pointer;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ui-datepicker-header a {
  margin-bottom: 1px;
  width: 49.8%;
  border-width: 1px;
  border-bottom-width: 0px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  padding: 5px;
  text-align: center;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.block-title.ui-datepicker-header a h2,.ui-datepicker-header a > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.ui-datepicker-header a:not(:last-of-type) {
  --tw-border-opacity: 1;
  border-right-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.ui-datepicker-header a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(179 179 179 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 5px rgba(0,0,0,0.1);
  --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  padding: 0.25rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.block-title.ui-datepicker-calendar th h2,.ui-datepicker-calendar th > .block-title h2,.block-title
.ui-datepicker-calendar td h2,
.ui-datepicker-calendar td > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.ui-datepicker-calendar td.ui-state-disabled {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1)) !important;
  --tw-text-opacity: 1;
  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
}

.ui-datepicker-calendar .ui-state-hover,
.ui-datepicker-calendar .ui-state-active {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.ui-datepicker-calendar td:not(.ui-state-disabled):hover {
  cursor: pointer;
  background-color: rgb(107 166 202 / 0.6);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ui-datepicker-calendar td:not(.ui-state-disabled):hover a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ui-datepicker-calendar td.ui-datepicker-today {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1)) !important;
}

.ui-datepicker-calendar td.ui-datepicker-today a,
.ui-datepicker-calendar td.ui-datepicker-current-day a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ui-datepicker-calendar td.ui-datepicker-week-end {
  background-color: rgb(107 166 202 / .1);
}

.ui-datepicker-calendar td.ui-datepicker-current-day {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.ui-datepicker-title {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: 100%;
}

.ui-datepicker-title select {
  width: 50%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-width: 1px;
  border-bottom-width: 0px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%229%22%20viewBox%3D%220%200%2015%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M.428%201.003a1%201%200%200%201%201.414%200l5.293%205.293%205.293-5.293a1%201%200%201%201%201.414%201.414l-6%206a1%201%200%200%201-1.414%200l-6-6a1%201%200%200%201%200-1.414%22%20fill%3D%22%237f7f7f%22%2F%3E%3C%2Fsvg%3E');
  background-size: 14px;
  background-position: calc(100% - 16px) center;
  background-repeat: no-repeat;
  padding: 3px;
  padding-right: 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.block-title.ui-datepicker-title select h2,.ui-datepicker-title select > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.ui-datepicker-title select:first-child {
  border-right-width: 0px;
}

.ui-datepicker-title select:focus {
  outline-width: 0px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * WordPress search form
 * ═══════════════════════════════════════════════════════════════════════════ */

form[role='search'] {
  position: relative;
  display: flex;
}

.search-form > label {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 0px;
}

.search-form input[type='search'],
.search-form input[type='text'] {
  height: 50px;
  width: 100%;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(40 55 74 / 0.5);
  background-color: transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.search-form input[type='search']:focus,
.search-form input[type='text']:focus {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
}

@media (min-width: 576px) {
  .search-form input[type='search'],
.search-form input[type='text'] {
    border-right-width: 0px;
  }
}

@media (min-width: 992px) {
  .search-form input[type='search'],
.search-form input[type='text'] {
    height: 52px;
  }
}

@media (min-width: 1310px) {
  .search-form input[type='search'],
.search-form input[type='text'] {
    height: 60px;
  }
}

.site-header .search-form input[type='submit'] {
  padding-left: 22px;
  padding-right: 22px;
}

@media not all and (min-width: 1310px) {
  .site-header .search-form input[type='submit'] {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.9375rem;
  }
}

.site-header .search-form input[type='submit'] {
  flex-shrink: 0;
  white-space: nowrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.9375rem;
}

.search-form input[type='submit'] {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 5px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.block-title.search-form input[type='submit'] h2,.search-form input[type='submit'] > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.search-form input[type='submit']:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.search-form input[type='submit']:not(.btn-disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  div:has(> a.btn-phone) > a.search-form input[type='submit']:not(.btn-phone) {
    min-height: 4rem;
  }
}

.search-form input[type='submit'] {
  --btn-sheen: rgba(255, 255, 255, 0.5);
  --btn-wash: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

.search-form input[type='submit']::before,.search-form input[type='submit']::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0px;
}

.search-form input[type='submit']::before {
  background: linear-gradient(180deg, var(--btn-wash), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-form input[type='submit']::after {
  background: linear-gradient(
		100deg,
		transparent 38%,
		var(--btn-sheen) 50%,
		transparent 62%
	);
  transform: translateX(-130%);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.search-form input[type='submit']:hover::before,.search-form input[type='submit']:focus-visible::before {
  opacity: 1;
}

.search-form input[type='submit']:hover::after,.search-form input[type='submit']:focus-visible::after {
  transform: translateX(130%);
}

.search-form input[type='submit']:not(.btn-disabled) {
  transition-property: color, background-color, border-color, box-shadow, transform;
}

.search-form input[type='submit']:not(.btn-disabled):hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 6px 18px -6px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 6px 18px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.search-form input[type='submit']:not(.btn-disabled):active {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.site-header .search-form input[type='submit']:hover {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .search-form input[type='submit']::after {
    display: none;
  }

  .search-form input[type='submit']:not(.btn-disabled):hover {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

.gform_page_footer .search-form input[type='submit'] {
  min-width: 9.0625rem;
}

.gform_page_footer .search-form input[type='submit']:only-child {
  margin-left: auto;
}

.subscribe-form .search-form input[type='submit'] {
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.3px;
}

@media not all and (min-width: 576px) {
  .subscribe-form .search-form input[type='submit'] {
    width: 100%;
  }
}

.subscribe-form .search-form input[type='submit'] i {
  display: none;
}

a:where(:not(.search-form input[type='submit']):not(.nav-link):not(.dropdown-item):not(.stretched-link):not(.call-bar):not(.hero-badge):not(.finish-swatch):not([class*="card-"]):not([class*="btn-"])) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s ease;
  text-decoration: none;
}

a:where(:not(.search-form input[type='submit']):not(.nav-link):not(.dropdown-item):not(.stretched-link):not(.call-bar):not(.hero-badge):not(.finish-swatch):not([class*="card-"]):not([class*="btn-"])):hover {
  background-size: 100% 1px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  a:where(:not(.search-form input[type='submit']):not(.nav-link)) {
    transition: color 0.2s ease;
  }
}

@media (max-width: 639px) {
  .hero-cta-row .search-form input[type='submit'] {
    min-width: 0px;
    flex: 1 1 0%;
    justify-content: center;
    gap: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-size: 0.9375rem;
  }
}

.blog-article .prose .article-cta .search-form input[type='submit'] {
  text-decoration-line: none;
}

.blog-search .search-form input[type='submit'] {
  flex-shrink: 0;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

@media (max-width: 767px) {
  .blog-search .search-form input[type='submit'] {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Comment form
 * ═══════════════════════════════════════════════════════════════════════════ */

#commentform > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

@media (min-width: 1310px) {
  #commentform > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }
}

#commentform p {
  margin-bottom: 0px;
}

#commentform input:not([type='radio']):not([type='checkbox']):not([type='file']):not([type='submit']),
#commentform textarea {
  height: 3rem;
  width: 100%;
  resize: none;
  border-radius: 0.25rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(179 179 179 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

#commentform input:not([type='radio']):not([type='checkbox']):not([type='file']):not([type='submit'])::-moz-placeholder, #commentform textarea::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
}

#commentform input:not([type='radio']):not([type='checkbox']):not([type='file']):not([type='submit'])::placeholder,
#commentform textarea::placeholder {
  --tw-text-opacity: 1;
  color: rgb(153 153 153 / var(--tw-text-opacity, 1));
}

#commentform input:not([type='radio']):not([type='checkbox']):not([type='file']):not([type='submit']):focus,
#commentform textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

#commentform textarea {
  min-height: 6.75rem;
}

.comment-reply-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/**
 * Header and navigation — tailwind/custom/components/header.css
 *
 * Written against WP_Bootstrap_Navwalker's output — the walker and this file
 * travel together. Restyle here; don't swap the walker.
 *
 * Walker classes: .nav-item · .nav-link · .dropdown-menu · .dropdown-item ·
 *                 .menu-item-has-children · .current-menu-item ·
 *                 <i class="caret icon-chevron-down"> injected after parent links
 * JS classes (javascript/script.js → ss.nav()):
 *                 .stickyHeader on scroll >60px, .navbar-collapse.show,
 *                 .navbar-toggler.collapsed
 *
 * xl (1200px) is the mobile↔desktop switch point. `max-xl:` = below it.
 * Change `screens.xl` and this whole file's behaviour moves with it.
 */

/*
 * ACCESSIBILITY — the reference theme omits all of this. Add it:
 *   - aria-expanded on .navbar-toggler, toggled by ss.nav()
 *   - aria-expanded on .caret buttons
 *   - a .skip-link as the first child of .site-wrapper (see components.css)
 *   - focus trap in the open off-canvas panel, and remove it from the tab order
 *     when closed (the CSS above only moves it off-screen)
 *   - Escape closes the panel
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * Desktop dropdowns: open flush under the nav bar, stay open on the way down.
 *
 * The panel sat a fixed 60px below its link, which lands inside the bar (the
 * link is 56px tall and the bar ends 16px below it, 12px once the header
 * shrinks on scroll), and the small gap plus the slide-in left a strip the
 * pointer could fall through, closing the menu. Now: positioned from the
 * link's own bottom by the measured bar offset, an invisible bridge covers
 * the gap, closing waits a moment, and the item text lines up with the label.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  .site-header {
    --drop-gap: 16px;
  }

  .site-header.stickyHeader {
    --drop-gap: 12px;
  }

  .site-header .navbar-nav > .menu-item-has-children > .dropdown-menu {
    top: calc(100% + var(--drop-gap));
    left: -24px;
    transform: translateY(4px);
    transition: opacity 0.18s ease 0.15s, transform 0.18s ease 0.15s, visibility 0s linear 0.33s;
  }

  .site-header .navbar-nav > .menu-item-has-children:hover > .dropdown-menu,
	.site-header .navbar-nav > .menu-item-has-children:focus-within > .dropdown-menu {
    top: calc(100% + var(--drop-gap));
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .site-header .navbar-nav > .menu-item-has-children > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--drop-gap) + 8px);
  }

  /* Flyouts (third level) get the same grace period. */

  .site-header .navbar-nav .dropdown-menu .menu-item-has-children > .dropdown-menu {
    transition: opacity 0.18s ease 0.15s, visibility 0s linear 0.33s;
  }

  .site-header .navbar-nav .dropdown-menu .menu-item-has-children:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
}

/**
 * Editor output, pagination, search results.
 * tailwind/custom/components/site-content.css
 *
 * `.default-block` is the wrapper for WYSIWYG and Gutenberg content in modules and
 * pages. It is DISTINCT from Tailwind Typography's `prose` (configured in
 * tailwind-typography.config.js, used for blog the_content()). Never put both
 * classes on the same element.
 *
 * Everything here styles markup you don't control, which is why it's a component
 * file rather than inline utilities.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * .default-block — WYSIWYG / Gutenberg
 * ═══════════════════════════════════════════════════════════════════════════ */

.default-block {
  color: rgb(40 55 74 / 0.8);
}

@media (min-width: 1310px) {
  .default-block p + p {
    margin-top: 1.25rem;
  }
}

.default-block :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.default-block p + :is(h1, h2, h3, h4, h5, h6),
.default-block blockquote + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.25rem;
}

.default-block ul > :not([hidden]) ~ :not([hidden]),
.default-block ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.default-block ul li *::marker,
.default-block ol li *::marker {
  color: inherit;
}

.default-block ul li::marker,
.default-block ol li::marker {
  color: inherit;
}

/* Links inside body copy inherit colour and underline — distinguishable without
 * relying on colour alone. */

.default-block ul a,
.default-block ol a,
.default-block p a {
  color: inherit;
  text-decoration-line: underline;
}

.default-block ul a:hover,
.default-block ol a:hover,
.default-block p a:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.default-block .wp-block-quote {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
  .default-block .wp-block-quote {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
  }
}

@media (min-width: 1310px) {
  .default-block .wp-block-quote {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
  }
}

.default-block .wp-block-quote p:last-of-type {
  margin-bottom: 0px;
}

.default-block p + .wp-block-buttons,
.default-block .wp-block-buttons + p {
  margin-top: 1.5rem;
}

@media (min-width: 992px) {
  .default-block p + .wp-block-buttons,
.default-block .wp-block-buttons + p {
    margin-top: 2rem;
  }
}

@media (min-width: 1310px) {
  .default-block p + .wp-block-buttons,
.default-block .wp-block-buttons + p {
    margin-top: 2.5rem;
  }
}

/* ── Images ─────────────────────────────────────────────────────────────── */

.default-block .wp-block-image {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.block-title.default-block .wp-block-image h2,.default-block .wp-block-image > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .default-block .wp-block-image {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

@media (min-width: 992px) {
  .default-block .wp-block-image {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.default-block .wp-block-image img {
  margin-left: auto;
  margin-right: auto;
}

.default-block img {
  border-radius: 1rem;
}

/* ── Columns and media-text ─────────────────────────────────────────────────
 * Gutenberg's own flex/grid rules are overridden with !flex / !grid so the
 * theme's gutter system applies. `max-sm:block` stacks them on mobile.
 * ────────────────────────────────────────────────────────────────────────── */

.default-block .wp-block-columns {
  display: flex !important;
}

.default-block .wp-block-media-text {
  display: grid !important;
}

.default-block .wp-block-columns,
.default-block .wp-block-media-text {
  margin-left: -1rem;
  margin-right: -1rem;
  align-items: center !important;
  row-gap: 1.5rem;
}

@media not all and (min-width: 576px) {
  .default-block .wp-block-columns,
.default-block .wp-block-media-text {
    display: block;
  }
}

@media (min-width: 768px) {
  .default-block .wp-block-columns,
.default-block .wp-block-media-text {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 992px) {
  .default-block .wp-block-columns,
.default-block .wp-block-media-text {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
  }
}

.default-block .wp-block-column,
.default-block .wp-block-media-text__media,
.default-block .wp-block-media-text__content {
  padding-left: 1rem;
  padding-right: 1rem;
}

.default-block .wp-block-column:nth-child(2n),
.default-block .wp-block-media-text__media:nth-child(2n),
.default-block .wp-block-media-text__content:nth-child(2n) {
  margin-left: 0px;
}

.default-block .wp-block-columns .wp-block-image {
  margin-top: 0px;
}

@media not all and (min-width: 576px) {
  .default-block .wp-block-columns .wp-block-image {
    margin-top: 0.5rem;
  }
}

@media (min-width: 768px) {
  .default-block .wp-block-columns .wp-block-image {
    margin-bottom: 1.5rem;
  }
}

.default-block .wp-block-columns .wp-block-image {
  margin-bottom: 0px;
}

.default-block .wp-block-columns .wp-block-gallery,
.default-block .wp-block-columns .blocks-gallery-item {
  margin: 0px;
  padding: 0px;
}

.default-block .wp-block-columns .wp-block-gallery {
  list-style-type: none;
}

.default-block .wp-block-columns .blocks-gallery-item::before {
  content: var(--tw-content);
  display: none;
}

/* ── Two-column list utility (add the class in the editor) ─────────────── */

.default-block .list-columns-2 ul *::marker,
.default-block ul.list-columns-2 *::marker {
  color: rgb(107 166 202 );
}

.default-block .list-columns-2 ul::marker,
.default-block ul.list-columns-2::marker {
  color: rgb(107 166 202 );
}

@media (min-width: 992px) {
  .default-block .list-columns-2 ul,
.default-block ul.list-columns-2 {
    -moz-columns: 2;
         columns: 2;
  }
}

.default-block .list-columns-2 ul li,
.default-block ul.list-columns-2 li {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.default-block .list-columns-2 ul li>strong,
.default-block ul.list-columns-2 li>strong {
  font-weight: 600;
}

/* Uncomment to make editor buttons use the theme button. Left off by default
 * because it fights Gutenberg's own button style controls.
 *
 * .default-block .wp-block-button__link { @apply btn; }
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * Search results and entry meta
 * ═══════════════════════════════════════════════════════════════════════════ */

.search-result-article {
  margin-bottom: 1rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.search-result-article:hover {
  background-color: rgb(107 166 202 / .1);
}

@media (min-width: 576px) {
  .search-result-article {
    margin-bottom: 2rem;
    padding: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.search-result-article>*:empty {
  display: none;
}

.search-result-article p a {
  margin-left: 0.25rem;
}

/* Pipe-separated meta items, with the trailing separator removed. */

.entry-footer > *,
.entry-meta > * {
  margin-right: 0.5rem;
  border-right-width: 1px;
  border-right-color: rgb(153 153 153 / 0.8);
  padding-right: 0.5rem;
}

.entry-footer > *:last-child,
.entry-meta > *:last-child {
  margin-right: 0px;
  border-width: 0px;
  padding-right: 0px;
}

.entry-footer > * time+time,
.entry-meta > * time+time {
  margin-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Pagination — output by the_posts_pagination() / ss_theme_the_posts_navigation()
 * ═══════════════════════════════════════════════════════════════════════════ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.75rem;
}

.pagination .page-numbers {
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(83 95 110 / var(--tw-border-opacity, 1));
  padding: 0.125rem;
  font-size: 0.875rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.pagination .page-numbers:hover {
  text-decoration-line: none;
}

.pagination .page-numbers:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.pagination .page-numbers.current {
  pointer-events: none;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.pagination .page-numbers.disabled {
  opacity: 0.5;
}

.pagination .page-numbers:not(.disabled):hover {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.pagination-arrow .page-numbers {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.pagination-arrow .page-numbers:not(.disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * fancybox lightbox
 * ═══════════════════════════════════════════════════════════════════════════ */

@media not all and (min-width: 576px) {
  .fancybox-slide {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

/**
 * slick slider overrides — tailwind/custom/components/slider.css
 *
 * Styles slick's own generated markup. The slide-count behaviour itself lives in
 * javascript/script.js → ss.slider() as .slider-col-1 … .slider-col-7,
 * .ss-logo-slider, .timeline-slider, .product-slider, .slider-for/.slider-nav.
 *
 * Arrow icon confirmed from Figma (Homepage testimonial carousel, nodes
 * 33880:17695/17696): Font Awesome 6 Solid "arrow-right", both prev/next
 * reusing the SAME glyph — prev is just the same icon mirrored, not a
 * separate left-pointing asset. Saved locally as
 * theme/images/icons/slider-arrow.svg (official FA6 solid path, confirmed
 * by name in the design pull, not hand-drawn). Applied via `mask-image` +
 * `bg-current` (not a background-image) specifically because this button
 * swaps icon color on hover (white -> primary) — a plain background-image
 * bakes in one fixed color and can't respond to that. Replaces the old
 * icomoon codepoints (\e917 prev, \e918 next), which never had a real font
 * file backing them.
 */

/* ── Track and slides ───────────────────────────────────────────────────────
 * Gutter on the slide, matching negative margin on the track. Keep these two in
 * sync or slides sit flush to the container edge.
 * ────────────────────────────────────────────────────────────────────────── */

.slick-slider .slick-slide {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media (min-width: 1310px) {
  .slick-slider .slick-slide {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.slick-list {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

@media (min-width: 1310px) {
  .slick-list {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }
}

/* ── Arrows ─────────────────────────────────────────────────────────────────
 * text-[0px] hides slick's default "Previous"/"Next" text; the glyph comes from
 * the ::before content.
 * ────────────────────────────────────────────────────────────────────────── */

.slick-arrow {
  position: absolute;
  bottom: 0px;
  z-index: 10;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  height: 2.5rem;
  width: 2.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  font-size: 0px;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.slick-arrow::before {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  --tw-content: '';
  -webkit-mask-image: url('./images/icons/slider-arrow.svg');
          mask-image: url('./images/icons/slider-arrow.svg');
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  content: var(--tw-content);
  -webkit-mask-size: contain;
          mask-size: contain;
}

.slick-arrow:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

@media (min-width: 768px) {
  .slick-arrow {
    margin-left: 0.375rem;
    margin-right: 0.375rem;
  }
}

@media (min-width: 1200px) {
  .slick-arrow {
    margin-left: 0.625rem;
    margin-right: 0.625rem;
  }
}

.slick-arrow:not(.slick-disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.slick-prev {
  right: 50%;
}

.slick-prev::before {
  content: var(--tw-content);
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.slick-next {
  left: 50%;
}

.slick-arrow.slick-disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

/* Variant: bare chevrons pinned to the vertical centre, outside the slides. */

.slick-arrow-alt .slick-arrow {
  top: 50%;
  bottom: auto;
  height: auto;
  width: auto;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: transparent;
  background-color: transparent;
}

.slick-arrow-alt .slick-arrow:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.slick-arrow-alt .slick-prev {
  left: 0px;
  right: auto;
}

.slick-arrow-alt .slick-next {
  right: 0px;
  left: auto;
}

/* ── Dots ─────────────────────────────────────────────────────────────────── */

.slick-dots {
  margin-bottom: 0px;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  justify-content: center;
}

.slick-dots > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.slick-dots {
  padding-left: 0px;
}

.slick-dots li {
  margin-top: 2rem !important;
  line-height: 1;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (min-width: 1310px) {
  .slick-dots li {
    margin-top: 3rem !important;
  }
}

.slick-dots li.slick-active button {
  --tw-scale-x: 1.3;
  --tw-scale-y: 1.3;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.slick-dots li:only-child {
  display: none;
}

.slick-dots button {
  position: relative;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  border-width: 2px;
  border-color: transparent;
  background-color: rgb(107 166 202 / 0.5);
  text-indent: -9999px;
}

.slick-dots button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.slick-dots button:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

/* Variant: numbered step badges ("01"/"02"/"03") instead of plain dots — used
 * by process-steps in slider mode (confirmed Figma tab/carousel treatment,
 * Homepage node 33880:18064-18073). CSS counters generate the zero-padded
 * number regardless of slide count, rather than relying on slick's own
 * (un-padded, "1"/"2"/"3") auto-inserted dot text.
 *
 * IMPORTANT: `.slick-dots-numbered` goes on the SLIDER CONTAINER (the element
 * with `.slider-col-N`), not on `.slick-dots` itself — slick generates its
 * own `<ul class="slick-dots">` as a child of the container at init time, so
 * these must be descendant selectors, not a class applied directly to it. */

.slick-dots-numbered .slick-dots {
  counter-reset: ss-step-counter;
  justify-content: flex-start;
}

.slick-dots-numbered .slick-dots > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.slick-dots-numbered .slick-dots li {
  counter-increment: ss-step-counter;
}

.slick-dots-numbered .slick-dots button {
  position: relative;
  width: 47px;
  height: 47px;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  text-indent: 0px;
  color: transparent;
}

.slick-dots-numbered .slick-dots button::before {
  content: counter(ss-step-counter, decimal-leading-zero);
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.slick-dots-numbered .slick-dots li.slick-active button {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

/* Variant: hides the default prev/next arrows entirely — some sliders
 * (process-steps in slider mode) confirm dot/badge-only navigation, no
 * arrows. `!important` is required: slick.js itself toggles arrow visibility
 * via an inline `style="display: ..."` (e.g. hiding them when slidesToShow >=
 * slide count), which beats any external stylesheet rule regardless of CSS
 * specificity — confirmed via computed-style testing, plain `display: none`
 * here silently lost to slick's inline style. */

.slick-arrows-hidden .slick-arrow {
  display: none !important;
}

/* Variant: outlined white dots, for dark sections. */

.slick-dots-alt .slick-dots > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.slick-dots-alt .slick-dots li.slick-active button {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.slick-dots-alt .slick-dots button {
  height: 0.75rem;
  width: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  background-color: transparent;
}

.slick-dots-alt .slick-dots button:hover {
  background-color: rgb(255 255 255 / 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CLS FIX — keep this.
 *
 * Before slick initialises, slides are plain block children and stack
 * vertically, causing a visible jump. These rules lay them out flex and hide
 * them until slick adds `.slick-slider`.
 *
 * ADD ANY NEW SLIDER CLASS TO BOTH SELECTOR LISTS.
 * ═══════════════════════════════════════════════════════════════════════════ */

[class^='slider-col-'],
[class*='slider-col-'],
.ss-logo-slider,
.timeline-slider {
  visibility: hidden;
  display: flex;
}

[class^='slider-col-'].slick-slider,
[class*='slider-col-'].slick-slider,
.ss-logo-slider.slick-slider,
.timeline-slider.slick-slider {
  visibility: visible;
  display: block;
}

/*
 * Edge-fade for marquee sliders — set the `from-*` colour to the section
 * background. Applied on the slider wrapper in the template, not here:
 *
 * <div class="ss-logo-slider relative
 *      before:absolute before:inset-y-0 before:left-0 before:-translate-x-1/2
 *      sm:before:w-[100px] xl:before:w-[174px] before:z-[1]
 *      before:bg-gradient-to-r before:from-secondary-50 before:via-secondary-50
 *      before:to-secondary-50/0">
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * REVIEW CARD NAV (Round 39) — testimonial-slider's card IS the slick
 * container (`.slider-col-1` sits directly on the card div), so slick's
 * auto-inserted `.slick-arrow`/`.slick-dots` land as DIRECT CHILDREN of the
 * card, not nested inside a slide — hence descendant selectors here, not a
 * class placed directly on `.slick-dots` (that class doesn't exist until
 * slick inserts it at runtime). Confirmed from the user-supplied mockup
 * screenshot: plain icon-only arrows (no button box) flanking a "01 / 02"
 * current/total counter, all bottom-right INSIDE the card.
 *
 * The counter is a hybrid: "01" is CSS-counter-driven off slick's own
 * `.slick-active` li (always accurate, no JS needed), "/ 02" is a static
 * PHP-echoed total (post_count never changes after page load, so it doesn't
 * need to be reactive).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* flex-wrap: .slick-list is forced to its own full-width row (basis-full),
 * which wraps the arrows+counter onto a second row together (DOM/visual
 * order controlled by the `order` utilities below) — then `ml-auto` on the
 * visually-first of the three (.slick-prev, order-1) pushes that whole
 * trailing group to the right edge, a standard flex "auto margin" push. */

.review-card-nav {
  /* !flex: the CLS-fix rule below (`[class*='slider-col-'].slick-slider {
	   display: block }`) has HIGHER specificity than a plain `.review-card-nav`
	   class selector and sets display back to block once slick adds its own
	   `.slick-slider` class — confirmed via computed-style testing (order
	   values were all correctly assigned to children, but had zero visual
	   effect because the parent silently wasn't a flex container at all).

	   Round 61: gap-x-1.5 added — replaces the old ad-hoc per-element
	   margins (mx-3 on .slick-dots, mx-1 on its ::after) that produced
	   visibly UNEVEN spacing (12px before "01", 4px before "/", 16px before
	   "02", 0px before the next-arrow) — one consistent gap value across
	   every item in this row instead.

	   tabular-nums added — an attempt to fix "01"/"02" being proportional-
	   font digits that shift width slide to slide (e.g. "1" narrower than
	   "2" in most fonts), which — since the whole prev+counter+next group
	   is right-anchored via `ml-auto` on .slick-prev — was shifting where
	   that group starts. Kept as a harmless, correct-in-principle
	   declaration, but it turned out NOT to actually equalize digit widths
	   with this font (measured "01" vs "02" still rendering at different
	   widths despite tabular-nums being correctly computed/inherited —
	   likely this font doesn't ship the OpenType tabular-figure glyph
	   variants the feature depends on). The real fix is the fixed `w-8` on
	   `.review-card-nav::before` below, which sidesteps the font
	   dependency entirely.

	   relative added — .review-author-group is absolutely positioned (see
	   its own rule below) and needs this as its containing block. Also:
	   after adding tabular-nums, .slick-prev STILL shifted between slides
	   — turned out to be a second source of the same class of bug, not
	   the same one: .review-author-group (added this round, holding the
	   per-slide author name) was sharing this SAME flex row, and author
	   names vary in length ("John C." vs "James R."), which ALSO shifts
	   where `ml-auto` starts the right-anchored group — confirmed via
	   getBoundingClientRect() (.slick-prev still moved even with
	   tabular-nums in place). Fixed by taking .review-author-group out of
	   this flex flow entirely (position:absolute) so it can no longer
	   affect the arrow group's layout at all, regardless of name length. */
  position: relative;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.review-card-nav > .slick-list {
  order: 0;
  width: 100%;
  flex-basis: 100%;
}

.review-card-nav > .slick-arrow {
  position: static;
  width: auto;
  height: auto;
  border-radius: 0px;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.review-card-nav > .slick-arrow:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.review-card-nav > .slick-arrow::before {
  /* Round 61: size-4 (16px) -> size-[25px] — confirmed from Figma
	   (design-context-33880-8089-san-diego-county.md, node 33880:8376):
	   the arrow-right glyph is text-[25px], noticeably bigger than the
	   "01 / 02" counter (16px) next to it, not the same size. */
  width: 25px;
  height: 25px;
}

.review-card-nav > .slick-prev {
  order: 1;
  margin-left: auto;
  margin-top: 1.5rem;
}

.review-card-nav > .slick-next {
  order: 3;
  margin-top: 1.5rem;
}

/* Round 61: absolutely positioned (see .review-card-nav's own comment for
 * why) — bottom-10/left-8 match review-card-nav's own pb-10/p-8 padding,
 * so this lands flush with where the quote text and .slick-list content
 * are already inset (offsets for an absolutely positioned element are
 * relative to the containing block's PADDING box, so left-8 here reproduces
 * the same 32px visual inset the parent's own p-8 padding gives its normal-
 * flow content, not an extra 32px on top of it). */

.review-card-nav > .review-author-group {
  position: absolute;
  bottom: 2.5rem;
  left: 2rem;
}

/* Round 61: the previous "01" implementation (CSS counter driven off
 * slick's own .slick-active li) had a real, deeper bug found while
 * verifying this round's other fixes — CSS counters do NOT increment on
 * display:none elements, and only the .slick-active li was ever visible
 * here (every other li stayed display:none). That means exactly one li was
 * EVER "counted" on any given render, so the counter always evaluated to 1
 * ("01") no matter which slide was actually active — confirmed via
 * screenshot: after clicking to slide 2 (author correctly updated to the
 * second testimonial), the counter still read "01 / 02" instead of
 * "02 / 02". This wasn't introduced this round — it's how the counter was
 * originally built (Round 39/41) and evidently was never checked past
 * slide 1.
 *
 * Fixed by hiding .slick-dots entirely (no longer needed for display, just
 * an unavoidable side effect of slick's shared `dots:true` config) and
 * driving "01 / " directly off a data-current attribute that the
 * afterChange handler keeps in sync (it already tracks the true index for
 * the author-name sync) — same attr()-driven technique the existing
 * data-total/"02" already used successfully. This also more closely
 * matches the actually-confirmed Figma source (design-context-33880-8089-
 * san-diego-county.md, node 33880:8378), where "01 / " was always ONE
 * text run, not "01" + a separately-styled "/" — no longer needs its own
 * margin-juggling between two separate generated-content points. */

.review-card-nav > .slick-dots {
  /* !hidden required: slick.js sets an inline `style="display:..."` on
	   .slick-dots at runtime, which beats a plain (non-important) `hidden`
	   utility regardless of selector specificity — the same pattern already
	   documented elsewhere in this file (.slick-arrows-hidden .slick-arrow).
	   Confirmed necessary here too: with plain `hidden`, .slick-dots still
	   measured a real, non-zero width and kept shifting .slick-prev's
	   position slide to slide. */
  display: none !important;
}

.review-card-nav::before {
  /* "01" and "/" are one text run (no flex gap applies WITHIN a single
	   pseudo-element's own content), so the space between them has to be
	   baked into the string itself — but no trailing space after "/": the
	   parent's gap-x-1.5 already provides that spacing consistently before
	   every item in this row (prev, this, the ::after total, next), so
	   adding a second space there would double it up unevenly instead of
	   matching it. */
  content: attr(data-current) ' /';
  /* w-8 (fixed width, not w-auto): the parent's `tabular-nums` turned out
	   NOT to actually equalize digit widths here — measured "01 /" at
	   27.09px vs "02 /" at 30.22px despite font-variant-numeric:
	   tabular-nums being correctly computed and inherited; the active font
	   evidently doesn't ship the OpenType `tnum` glyph variants tabular-nums
	   depends on, a real limitation of that CSS feature (it's a request to
	   the font, not a guarantee). That residual width difference was still
	   shifting .slick-prev between slides. A fixed box width sidesteps the
	   font dependency entirely: "01 /" / "02 /" (etc.) just render
	   left-aligned with a bit more or less trailing empty space inside a
	   CONSTANT-width box, so nothing after it in the flex row ever moves. */
  order: 2;
  margin-top: 1.5rem;
  display: flex;
  height: 1rem;
  width: 2rem;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.review-card-nav::after {
  content: attr(data-total);
  /* Same run, but dimmed — confirmed from the same node: only the
	   trailing total number is rgba(40,55,74,0.4), "01 / " stays
	   full-color. */
  order: 2;
  margin-top: 1.5rem;
  display: flex;
  height: 1rem;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(40 55 74 / 0.4);
}

/* Round 61: author info — one .review-author-item per testimonial, only
 * the one matching the active slide shown, synced via the inline script's
 * afterChange handler (same show/hide-by-index technique already used for
 * process-steps' thumbnail nav). Non-active items are display:none, so they
 * contribute zero size to .review-author-group's layout — no absolute
 * overlay stacking needed since there's no simultaneous-visibility/
 * transition requirement here. */

.review-author-item {
  display: none;
}

.review-author-item.is-active {
  display: flex;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PROCESS STEPS THUMBNAIL NAV (Round 41) — process-steps.php in slider mode
 * replaces slick's auto-dots with hand-built photo thumbnails (wired via a
 * small scoped inline script, see the module) — hide slick's own default
 * dots here so both nav UIs don't show at once.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Desktop only. Below lg the thumbnails are hidden and the dots are the
 * entire navigation, so they have to be there and they have to be worth
 * aiming at. */

@media (min-width: 1024px) {
  .process-steps-slider > .slick-dots {
    /* !hidden: same lesson as .slick-arrows-hidden above — slick.js sets an
		   inline display style on elements it manages at runtime, which beats a
		   plain (non-important) CSS rule regardless of selector specificity. */
    display: none !important;
  }
}

/* ── Process steps, phone navigation ──────────────────────────────────────
 * Numbered pills rather than slick's default bullets: this slider's slides
 * ARE numbered steps, so the control can say which step it moves to instead
 * of leaving the reader to count dots. The active one fills in.
 *
 * Element-qualified (ul.slick-dots, li, button) throughout: these sit in the
 * component layer and the generic .slick-dots styling further up this file
 * is single-class, so an unqualified rule here would be a coin toss on
 * source order. */

@media (max-width: 1023px) {
  .process-steps-slider > ul.slick-dots {
    margin-top: 1.5rem;
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0px;
    position: static;
  }

  .process-steps-slider > ul.slick-dots > li {
    margin: 0px;
    width: auto;
    height: auto;
  }

  .process-steps-slider > ul.slick-dots > li > button {
    display: grid;
    place-items: center;
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(40 55 74 / 0.15);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    font-family: Poppins, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: rgb(40 55 74 / 0.6);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    /* slick writes the slide index into the button as text; the default
		 * styling hides it behind a bullet pseudo-element. Here it is the
		 * label, so the pseudo-element goes and the digit stays. */
    text-indent: 0;
    width: 2.25rem;
    height: 2.25rem;
  }

  .process-steps-slider > ul.slick-dots > li > button::before {
    content: none;
  }

  .process-steps-slider > ul.slick-dots > li.slick-active > button {
    --tw-border-opacity: 1;
    border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

/* Round 51: the reference used to build this (Round 49/50) turned out to be
 * a ZOOMED screenshot — opacity-0 (fully transparent) was correct in concept
 * but the user clarified the active state should show a translucent WHITE
 * tint (image still visible through it), not a hard on/off switch to zero
 * tint. `bg-none` is required alongside `bg-white`: the span's own markup
 * classes originally set a gradient `background-image`, which paints on top
 * of `background-color` regardless of which rule set the color — without
 * clearing the image too, the tint underneath wouldn't show through
 * untouched. Round 54 dropped the gradient itself (see PHP markup), so
 * `bg-none` is now belt-and-suspenders, but harmless to keep.
 *
 * Round 54: opacity-30 -> opacity-50 — still not matching the mockup at 30%,
 * bumped for a more visible white wash. */

.process-thumb.is-active .process-thumb-overlay {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  background-image: none;
  opacity: 0.5;
}

/* Round 49: with the overlay gone on the active thumbnail, white caption
 * text sat directly on the bare photo and read as a washed-out white patch
 * ("white opacity background") — switch to dark text once there's no tint
 * behind it. */

.process-thumb.is-active .process-thumb-caption {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* Round 50: confirmed from a reference screenshot — the active thumbnail
 * has a distinct WHITE border + shadow (a "floating card" look, visually
 * cut out from the main image it overlaps), not just the same thin border
 * every thumbnail has at rest. `!border-2` overrides the base `border`
 * (1px) — needs !important since both rules target the same .process-thumb
 * element and Tailwind's border-width utilities share the same specificity
 * regardless of source order.
 *
 * Round 51: border-4 -> border-2 — that reference screenshot was a ZOOMED
 * crop, so border-4 (calibrated against its apparent proportions) came out
 * too thick at real scale. */

.process-thumb.is-active {
  border-width: 2px !important;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Round 48: centered caption (was items-end justify-start / bottom-left). */

.process-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

/* !grid: the slick VENDOR library's own CSS (slick.css, not ours) ships
 * `.slick-initialized .slick-slide { display: block }` at (0,2,0)
 * specificity, beating a plain single-class `.grid` utility (0,1,0)
 * regardless of file order — confirmed by walking every matching stylesheet
 * rule via `document.styleSheets`, not by guessing. Each process-steps slide
 * needs `display: grid` (for its `lg:grid-cols-2` image+text layout) to
 * actually take effect. */

.process-steps-slider.slick-initialized .slick-slide {
  display: grid !important;
}

/* ── Before/After compare slider ──────────────────────────────────────────
 * Round 158: real drag-to-compare — was a static fixed 50/50 split with a
 * purely decorative handle icon since early in this project (flagged then,
 * built now per direct request). `.ba-slider-after`'s `clip-path` and
 * `.ba-slider-handle`'s `left` are both set inline (initial 50%) and then
 * driven by ss.beforeAfterSlider() in script.js on drag — the CSS below
 * only owns layout/appearance, never the position itself, so JS and CSS
 * can't fight over the same value. */

.ba-slider {
  position: relative;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
}

.ba-slider-before,
.ba-slider-after img {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ba-slider-after {
  position: absolute;
  inset: 0px;
  overflow: hidden;
}

/* Round 158 fix: the icon was a flex CHILD of this 3px-wide line, sized via
 * `size-10` + `shrink-0` — worked in isolation but rendered as a squashed
 * capsule in the real card (flex-basis/min-width interactions with a 3px
 * flex container, even with shrink disabled). Switched to the same pattern
 * the old static handle already used and was confirmed working: the icon is
 * its OWN absolutely-positioned circle, centered independently of the line's
 * width, not a flex child depending on it. */

.ba-slider-handle {
  position: absolute;
  top: 0px;
  bottom: 0px;
  z-index: 10;
  width: 3px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  cursor: ew-resize;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  touch-action: none;
}

/* Round 158 SECOND fix — the actual root cause of the capsule shape (the
 * flex-to-absolute change above wasn't it): the sitewide `img { max-width:
 * 100%; height: auto }` reset (base.css) resolves `max-width: 100%` against
 * this icon's CONTAINING BLOCK, which is `.ba-slider-handle` itself
 * (position:absolute, only 3px wide) — clamping the icon's width down to a
 * sliver of its intended 40px while height stays uncapped, producing a tall
 * narrow pill instead of a circle. `max-w-none` overrides that inherited
 * constraint. */

.ba-slider-handle-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  max-width: none;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.625rem;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/**
 * Named components — tailwind/custom/components/components.css
 *
 * IMPORTED LAST in the components layer, so anything here overrides the other
 * component files without needing !important. Put cross-cutting overrides here.
 *
 * Only add a class once a pattern has appeared THREE times inline.
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * HERO SCRIM
 *
 * One definition, used by every hero: the front-page banner and the generic
 * inner banner in banner-content.php, and the hero-banner module. Each used to
 * roll its own and they disagreed. The module's ran top-to-bottom, which put
 * its darkest point BELOW the copy and left the heading sitting on bare photo.
 * That is what made service page headings hard to read.
 *
 * Anchored bottom-left, fading up and to the right, because that is where the
 * copy lives in all three: eyebrow, H1, body and buttons are a left-aligned
 * column. The diagonal carries most of it. The second, horizontal pass keeps
 * the TOP of that column covered too, since a pure diagonal thins out exactly
 * where the eyebrow sits.
 *
 * Stop positions were measured, not guessed. Sampling the composited result
 * over a real (bright) job photo across the eyebrow, H1 and body boxes, the
 * worst-case contrast is 6.4, 4.6 and 5.2 against WCAG bars of 4.5, 3.0 and
 * 4.5. The first pass at this sat at 4.0 for the body copy, under the bar, so
 * the horizontal ramp was widened and the body lightened to white/90.
 *
 * Navy (#28374a) rather than black: it is the brand's own colour, and a
 * neutral black scrim over a warm bathroom photo reads as a grey wash.
 *
 * Exposed as a custom property because the module composes it into an inline
 * background-image stack alongside the photo, while the banners paint it on an
 * ::after. One source of truth, two delivery mechanisms.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --hero-scrim:
		radial-gradient(95% 115% at 0% 100%,
			rgba(40, 55, 74, 0.93) 0%,
			rgba(40, 55, 74, 0.76) 42%,
			rgba(40, 55, 74, 0.40) 72%,
			rgba(40, 55, 74, 0.10) 98%,
			rgba(40, 55, 74, 0) 112%),
		linear-gradient(to right,
			rgba(40, 55, 74, 0.55) 0%,
			rgba(40, 55, 74, 0.34) 20%,
			rgba(40, 55, 74, 0.12) 36%,
			rgba(40, 55, 74, 0) 50%);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HERO REVIEW BADGE
 *
 * Sits on the right of the homepage hero, which is the half the scrim
 * deliberately leaves bright so the photo shows through. So it cannot rely on
 * the scrim for contrast the way the headline does, and carries its own
 * translucent navy panel instead. That is also why it is a card rather than
 * bare text: bare white text on an unpredictable photo is exactly the problem
 * the scrim was added to solve.
 *
 * Text and star count come from Global Options, not the template.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Footer contact list. One detail per row: the address used to run on from the
 * end of the tagline sentence with no break. */

/* Footer contact block.
 * `mx-0 mb-0` is load-bearing: the base `ul` rule sets `ml-[1.125rem] mb-4`, so
 * without it the rows sit 18px right of the tagline they belong under and the
 * column reads as two misaligned things. `p-0` alone does not cover that.
 *
 * The hairline and the extra top space separate these rows from the tagline:
 * the tagline is prose, these are the details a visitor is hunting for, and
 * they were reading as one continuous paragraph. Rows carrying an action are
 * full white; the hours line stays dimmer because there is nothing to click. */

.footer-contact {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 1.75rem;
  margin-bottom: 0px;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-contact > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.footer-contact {
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  padding: 0px;
  padding-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(255 255 255 / 0.9);
}

.footer-contact a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.footer-contact a:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.footer-contact-hours {
  color: rgb(255 255 255 / 0.55);
}

.hero-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  border-radius: 20px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  background-color: rgb(40 55 74 / 0.7);
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  text-align: center;
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.block-title.hero-badge h2,.hero-badge > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .hero-badge {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.hero-badge-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.hero-badge-stars svg {
  width: 2rem;
  height: 2rem;
}

@media (min-width: 576px) {
  .hero-badge-stars svg {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* Linked variant. The whole card is the target, so it needs a visible hover
 * and a focus ring: a card-sized link with no affordance reads as decoration. */

a.hero-badge {
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

a.hero-badge:hover {
  border-color: rgb(255 255 255 / 0.5);
  background-color: rgb(40 55 74 / 0.85);
}

a.hero-badge:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #fff;
}

.hero-badge-cta {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

a.hero-badge:hover .hero-badge-cta {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hero-badge-text {
  margin-bottom: 0px;
  max-width: 15ch;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  .hero-badge-text {
    font-size: 1.5rem;
  }
}

/*
 * On phones the scrim runs top to bottom, not left to right.
 *
 * The desktop scrim is a radial anchored bottom-left plus a left-to-right
 * fade, because the copy sits in the left half and the photograph is meant to
 * stay clear on the right. On a phone the copy spans the full width, so a
 * side fade darkens the wrong half: it leaves the right edge of the headline
 * sitting on bare photo and reads as a stripe rather than a scrim.
 *
 * Vertical instead, heaviest behind the headline and easing off at the
 * bottom so the photograph still shows through under the buttons.
 */

/*
 * Set on :root, not on .hero-scrim. The inner-page hero (hero-banner.php,
 * used on every product, service and location page) reads this variable on
 * a section without that class, so scoping the override to .hero-scrim left
 * every inner page on the desktop left-to-right fade.
 *
 * Light at the top, where only the floating nav sits, so the photograph shows
 * through; deepening through the copy, where white text needs the contrast.
 * The hero text also carries a soft shadow (below) for the lighter areas.
 */

@media (max-width: 767px) {
  /*
	 * Phone hero: photograph on top, words below.
	 *
	 * With the copy laid over the photo, every scrim was a trade between
	 * reading the text and seeing the picture. On a phone they are separated
	 * instead: the photograph fills a band at the top, uncovered except for a
	 * light shade under the floating nav, and fades into the navy at its
	 * bottom edge. The title starts just inside that fade, so photo and copy
	 * read as one hero, and the paragraph and buttons sit on solid navy where
	 * they are fully legible. Applies to every hero: the homepage banner, the
	 * generic inner banner and the module hero on product, service and
	 * location pages.
	 */

  :root {
    --hero-photo-h: clamp(16rem, 48vh, 23rem);
    --hero-scrim:
			linear-gradient(to bottom,
				rgba(40, 55, 74, 0.45) 0%,
				rgba(40, 55, 74, 0.05) 28%,
				rgba(40, 55, 74, 0) 48%,
				rgba(40, 55, 74, 0.72) 82%,
				rgb(40, 55, 74) 100%);
  }

  section.hero-scrim,
	section.hero-banner {
    padding-top: calc(var(--hero-photo-h) - 3.25rem);
    min-height: 0;
    background-color: rgb(40, 55, 74);
    background-size: auto var(--hero-photo-h);
    background-position: center top;
    background-repeat: no-repeat;
  }

  /* The homepage photo is an <img>, the scrim an ::after; both cover only
	 * the band. */

  section.hero-scrim > img {
    height: var(--hero-photo-h);
    bottom: auto;
  }

  section.hero-scrim::after {
    bottom: auto;
    height: var(--hero-photo-h);
  }

  /* The first line of the title sits in the fade, so it keeps a shadow;
	 * everything below is on solid navy and needs none. */

  .hero-scrim h1,
	.hero-banner h1,
	.hero-banner small {
    text-shadow: 0 1px 12px rgba(16, 28, 45, 0.55);
  }
}

.hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-scrim);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Post / page titles — also applied to the post title in the block editor.
 * Round 80: font-medium (500) -> font-semibold (600) — confirmed from Figma
 * (design-context-33880-17267-privacy-policy.md, node 33880:17355):
 * font-['Poppins:SemiBold'] on the exact "Privacy Policy" H1 node. font-medium
 * was never actually checked against Figma; font-semibold also matches the
 * sitewide h1-h6 default weight (base.css), so this removes an inconsistency
 * rather than introducing one.
 * ═══════════════════════════════════════════════════════════════════════════ */

.page-title,
.entry-title {
  margin-bottom: 1.5rem;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Gutenberg alignment. max-w-wide comes from theme.json via @_tw/themejson.
 * ═══════════════════════════════════════════════════════════════════════════ */

.entry-content > .alignwide {
  max-width: 81.875rem;
}

.entry-content > .alignfull {
  max-width: none;
}

.entry-content > .alignleft {
  float: left;
  margin-right: 2rem;
}

.entry-content > .alignright {
  float: right;
  margin-left: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SECTION HEADING BLOCK
 *
 *   <header class="block-title text-center">
 *     <small class="title-small has-lines-both">Eyebrow</small>
 *     <h2>Heading with <span>accent words</span></h2>
 *   </header>
 *
 * Line variants:  has-lines-both | has-line-left | has-line-right
 * Dark sections:  add `block-title--white` to the header, `has-lines-white` to
 *                 the eyebrow.
 *
 * `font-tertiary` here is the main consumer of the third font role. If the design
 * has no distinct accent font, point `tertiary` at the same family as `secondary`
 * rather than deleting the role.
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * The Home page pull shows a single flat dash (a small SVG in Figma, ~60.5px
 * wide) before the eyebrow — 3px thick (the vector's `inset-[-1.5px_0]` on a
 * 0-height box expands it 1.5px each direction = 3px total). Some titles show
 * it on BOTH sides. Uses flex + gap rather than padding-reserved absolute
 * lines — the padding approach didn't scale the gap consistently with the
 * line width across breakpoints.
 *
 * Gap is a CONFIRMED flat 8px in every eyebrow instance pulled (Home AND the
 * FAQ) — no breakpoint escalation. The previous pass added lg:/2xl: steps
 * with no evidence, which is why it read as "too wide."
 *
 * Colour is NOT uniform across the file: Home's eyebrows ("The Direct
 * Difference", "client reviews", etc.) are `#6ba6ca` (primary), but the
 * Services-page FAQ eyebrow ("FaQ's") is `#28374a` (secondary). Default stays
 * primary (the more common case); use `.title-small--secondary` for the FAQ-
 * style instances so the component is correct on both kinds of page.
 */

/*
 * The eyebrow.
 *
 * It was 16px uppercase with a 3px bar stuck on either side, which at that
 * size is not a label, it is a second heading competing with the real one,
 * and the stubby bars read as clip art. A label should be small, precise and
 * quiet: 12px, bold, widely letterspaced, with a hairline rule rather than a
 * bar. The same device repeated across every section is what makes a set of
 * pages look like one designed thing.
 */

.block-title .title-small {
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.block-title .title-small::before,
.block-title .title-small::after {
  display: block;
  display: none;
  height: 1px;
  width: 2rem;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.6;
  --tw-content: '';
  content: var(--tw-content);
}

@media (min-width: 992px) {
  .block-title .title-small::before,
.block-title .title-small::after {
    width: 2.5rem;
  }
}

.block-title .title-small.has-lines-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.block-title .title-small--secondary {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.block-title .title-small.has-lines-both::before,
.block-title .title-small.has-lines-both::after,
.block-title .title-small.has-line-left::before,
.block-title .title-small.has-line-right::after {
  display: block;
}

/*
 * The section H2. Note `[&_span]:text-primary` — editors add the accent colour by
 * wrapping words in <span> inside a plain Text field, which is why templates echo
 * headings with wp_kses_post() rather than esc_html().
 */

.block-title h2 {
  /* Line height and tracking come from the base h2 (1.1, -0.03em). This
	 * rule used to set its own, ending at 1.5 on the widest screens, which is
	 * the loose two-line heading reported on the estimate band. The measure
	 * keeps headings reading as titles rather than paragraphs set large. */
  max-width: 22ch;
  font-weight: 600;
}

.block-title h2 span {
  font-weight: 500;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.block-title h2 strong {
  font-style: normal;
}

/* Dark-section variant: accent words go white instead of primary. */

.block-title--white h2>span {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FEATURE TILE — one shared card shell, TWO confirmed media variants:
 *   (a) icon  — 48px icon, seen on city-page "Why choose us"
 *   (b) number — 67px navy badge with "01"/"Step", seen on the Services page
 *       "Our 3-Step Installation Process"
 * Both pulls confirm an IDENTICAL card shell (border-secondary/[0.16],
 * rounded-2xl, p-6, 24px semibold title, 16px/80% body) — only the media
 * slot differs. Background: the icon-tile pull (city page) showed a subtle
 * blue-tinted gradient, the number-tile pull (Services page) showed plain
 * white — kept plain white as the shared default since it's the simpler,
 * more recently confirmed value; the blue tint can be added back as a
 * variant if a specific page needs it.
 *
 *   <div class="feature-tile">
 *     <img src="…" class="feature-tile-icon" alt="">          \3c !-- (a) -->
 *     <div class="feature-tile-number"><span>01</span><small>Step</small></div>  \3c !-- (b) -->
 *     <p class="feature-tile-title">Title</p>
 *     <p class="feature-tile-text">Text</p>
 *   </div>
 * ═══════════════════════════════════════════════════════════════════════════ */

.feature-tile {
  position: relative;
  flex: 1 1 0%;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.feature-tile-icon {
  margin-bottom: 1.5rem;
  width: 3rem;
  height: 3rem;
}

.feature-tile-number {
  margin-bottom: 1.5rem;
  display: flex;
  width: 67px;
  height: 67px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.feature-tile-number span {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.feature-tile-number small {
  font-size: 0.75rem;
  line-height: 1rem;
}

.feature-tile-title {
  margin-bottom: 0.625rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.feature-tile-text {
  margin-bottom: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(40 55 74 / 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * STATS BAR — "20+ Years / 5 Counties / 100% In-House / USA-Made" — the same
 * set on Home and the Services page.
 *
 * The first stat used to be documented here as "40 years / Family-owned &
 * operated". Both claims were untrue and were corrected sitewide in Sep 2026:
 * the client's live site says over 20 years and claims no family ownership.
 * This comment is the reason to be careful, because it is what a developer
 * copies the next time they build a stats bar. Do not restore the old wording
 * from any older cached design reference.
 *   <div class="stats-bar">
 *     <div class="stat-item"><p class="stat-number">20+ Years</p><p class="stat-label">Installing frameless glass</p></div>
 *     …
 *   </div>
 * ═══════════════════════════════════════════════════════════════════════════ */

.stats-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 1.5rem;
}

.stats-bar > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.2);
}

.stats-bar {
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .stats-bar > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
  line-height: 1.25;
}

.block-title.stat-item h2,.stat-item > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.stat-number {
  margin-bottom: 0px;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.14rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.stat-label {
  margin-bottom: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CARD, PHOTO — confirmed from the Services hub "What We Install" grid AND
 * Home's style showcase. Photo fills the card top-to-bottom; a white text
 * panel OVERLAPS the bottom of the photo (not a separate section below it).
 * DIFFERENT from card-post (blog) and card-media (below) — three real card
 * types exist in this design, not one.
 *
 * Clickable via .stretched-link on the title anchor (needs `relative` on the
 * card, already present).
 *
 * Panel height was FIXED with the title and description each line-clamped to
 * 2 lines, to keep the amount of photo covered consistent from card to card.
 * Changed (client QA, Sep 2026): real taglines are full sentences and the
 * clamp was cutting them mid-word — "…glides on a sleek top trac…" — which
 * reads as broken rather than tidy. The panel now grows to fit its copy from
 * a min-height floor, so short cards keep the confirmed 193px panel and long
 * ones cover a little more of the photo. The outer card height is unchanged
 * either way (the image's aspect-ratio box drives it), so the grid stays
 * even. If panel height ever has to be uniform again, equalise it in JS from
 * the tallest card — do NOT reinstate the clamp.
 *   <article class="card-photo">
 *     <img class="card-photo-img" src="…" alt="">
 *     <div class="card-photo-body">
 *       <p class="card-photo-title"><a href="…" class="stretched-link">Title</a></p>
 *       <p class="card-photo-text">Text</p>
 *     </div>
 *   </article>
 * ═══════════════════════════════════════════════════════════════════════════ */

.card-photo {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.card-photo-img {
  aspect-ratio: 398/506;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Hairline and depth rather than a drawn blue outline: the panel is a pane
 * resting on the photograph, which is the same read as every other card on
 * the site now. */

.card-photo-body {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  min-height: 12.0625rem;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.08);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 -8px 24px -18px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 -8px 24px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-photo-title {
  margin-bottom: 0.625rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.card-photo-title a {
  color: inherit;
  text-decoration-line: none;
}

.card-photo-text {
  margin-bottom: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(40 55 74 / 0.8);
}

/* Hover state — baked into .card-photo, so EVERY photo card gets it (Home's
 * style showcase, the Services hub grid, the Products hub): the whole white
 * panel fades to navy (secondary) with white copy. Colors match the small
 * text-only cards in product-card-grid's scroll strip (hover:bg-secondary +
 * text-white / text-white/80) so both card tiers behave alike.
 * :focus-within mirrors it for keyboard users reaching the .stretched-link. */

.card-photo .card-photo-body,
.card-photo .card-photo-title,
.card-photo .card-photo-text {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.card-photo:hover .card-photo-body,
.card-photo:focus-within .card-photo-body {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}

.card-photo:hover .card-photo-title,
.card-photo:focus-within .card-photo-title {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.card-photo:hover .card-photo-text,
.card-photo:focus-within .card-photo-text {
  color: rgb(255 255 255 / 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CARD, MEDIA — confirmed from the single-service "Our Options" section
 * (glass/hardware option cards). Image sits INSIDE the padded white card,
 * text follows below it — not overlapping like card-photo.
 *
 * Clickable via .stretched-link on the title anchor (needs `relative`, added
 * below — the confirmed Figma data didn't need it since nothing overlapped,
 * but a clickable card does). Height varies with description length more
 * than card-photo (nothing here is a fixed-ratio image box) — apply
 * `data-fix="height"` (matchHeight, wired in script.js) to the ROW wrapping
 * these cards so every row of card-media stays equal height regardless of
 * copy length; that's a page-level concern, not something this class alone
 * can guarantee.
 *   <div class="flex flex-wrap gap-8" data-fix="height">
 *     <article class="card-media relative">
 *       <img class="card-media-img" src="…" alt="">
 *       <p class="card-photo-title"><a href="…" class="stretched-link">Title</a></p>
 *       <p class="card-photo-text">Text</p>
 *     </article>
 *   </div>
 * ═══════════════════════════════════════════════════════════════════════════ */

.card-media {
  position: relative;
  flex: 1 1 0%;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.16);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

.card-media-img {
  margin-bottom: 1.5rem;
  height: 350px;
  width: 100%;
  border-radius: 0.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Hover state — the card fills navy (secondary) with white copy, matching
 * .card-photo's own hover so the two card types behave alike. Targets
 * .card-photo-title/.card-photo-text because card-media reuses those two
 * classes for its copy (see the docblock markup above) rather than defining
 * card-media-specific ones. :focus-within mirrors it for keyboard users
 * reaching the .stretched-link. */

.card-media,
.card-media .card-photo-title,
.card-media .card-photo-text {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.card-media:hover,
.card-media:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}

.card-media:hover .card-photo-title,
.card-media:focus-within .card-photo-title {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.card-media:hover .card-photo-text,
.card-media:focus-within .card-photo-text {
  color: rgb(255 255 255 / 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Finish swatches — the client's six hardware finishes, as photographs.
 *
 * Replaces two older treatments that disagreed with each other: flat CSS hex
 * chips on the Products hub, and a single stock photo of one plate inside the
 * Hardware card on every service page. Rendered by ss_render_finish_swatches()
 * (inc/finishes.php) so both places draw from one list.
 *
 * `bg-white` on the tile is load-bearing, not decoration: .card-media fills
 * navy on hover, and these are photographs shot on white, so without an
 * explicit white tile each handle would sit in a white rectangle punched out of
 * the navy card. The tile keeps them looking deliberate in both states, and
 * object-contain (not cover) keeps a tall handle from being cropped.
 * ═══════════════════════════════════════════════════════════════════════════ */

.finish-swatch-grid {
  margin: 0px;
  display: grid;
  list-style-type: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 1.25rem;
}

.finish-swatch-grid > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.finish-swatch-grid {
  padding: 0px;
}

@media (max-width: 1023px) {
  .process-steps-slider > .finish-swatch-grid {
    gap: 1.25rem;
  }

  .process-steps-slider > .finish-swatch-grid > div:last-child {
    padding-left: 0.25rem;
  }
}

.finish-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.block-title.finish-swatch h2,.finish-swatch > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.finish-swatch-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 112px;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.10);
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #f2f4f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(242 244 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.5rem;
  transition-property: border-color,box-shadow,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Chrome and nickel are near-white objects photographed on white. A faint
 * tinted ground behind each one gives the hardware an edge to sit against,
 * and the pointer confirms that a finish is a thing you are choosing between
 * rather than a picture of a handle. */

.finish-swatch:hover .finish-swatch-img {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(107 166 202 / 0.45);
  --tw-shadow: 0 10px 20px -14px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 10px 20px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ── The card the swatches sit in (materials-finish-panel) ───────────────── */

.finish-panel-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 22px 48px -34px rgba(16,28,45,0.5);
  --tw-shadow-colored: 0 22px 48px -34px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 576px) {
  .finish-panel-card {
    padding: 2rem;
  }
}

/* A brand rule along the top edge, the same device the tinted bands use to
 * announce themselves. The card was a 2px-radius grey-bordered box with a
 * 1px shadow, which belonged to no part of this site. */

.finish-panel-card::before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 0.25rem;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #6ba6ca var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(107 166 202 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(107 166 202 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(107 166 202 / 0.45) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.finish-panel-title {
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(40 55 74 / 0.6);
}

.finish-swatch-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.finish-swatches-title {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgb(40 55 74 / 0.7);
}

/* Let the swatch block absorb the height the sibling Glass card sets, so the
 * two cards in the row stay level instead of the shorter one leaving a gap. */

.card-media--swatches {
  display: flex;
  flex-direction: column;
}

.card-media--swatches .finish-swatches {
  margin-bottom: 1.5rem;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: center;
}

.card-media:hover .finish-swatch-label,
.card-media:focus-within .finish-swatch-label {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Fixed call bar, small viewports only.
 *
 * Below xl the nav collapses and the header phone button collapses into the
 * hamburger with it, so on a phone there is no number on screen until you open
 * the menu. This puts one back, pinned to the bottom edge where a thumb
 * already is. Hidden from xl up, where the header button returns.
 *
 * `env(safe-area-inset-bottom)` keeps it clear of the home indicator on
 * iPhones; without it the number sits under the system gesture bar.
 * ═══════════════════════════════════════════════════════════════════════════ */

.call-bar {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 -2px 14px rgba(0,0,0,0.22);
  --tw-shadow-colored: 0 -2px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 1200px) {
  .call-bar {
    display: none;
  }
}

.call-bar {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.call-bar:hover,
.call-bar:focus-visible {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.call-bar:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: -2px;
  outline-color: #fff;
}

.call-bar-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.call-bar-number {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Link hover, sitewide.
 *
 * An underline that wipes in from the left rather than appearing all at once.
 * Drawn as a background gradient, not text-decoration or a border, so it
 * animates smoothly and adds no height: nothing reflows on hover.
 *
 * Wrapped in :where() so its specificity is zero and any component rule beats
 * it without needing !important. Structural links are excluded by class,
 * because a sweeping underline under a card title or a nav item is noise, not
 * polish; those have their own hover states.
 * ═══════════════════════════════════════════════════════════════════════════ */

a:where(:not(.btn):not(.nav-link):not(.dropdown-item):not(.stretched-link):not(.call-bar):not(.hero-badge):not(.finish-swatch):not([class*="card-"]):not([class*="btn-"])) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s ease;
  text-decoration: none;
}

a:where(:not(.btn):not(.nav-link):not(.dropdown-item):not(.stretched-link):not(.call-bar):not(.hero-badge):not(.finish-swatch):not([class*="card-"]):not([class*="btn-"])):hover {
  background-size: 100% 1px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  a:where(:not(.btn):not(.nav-link)) {
    transition: color 0.2s ease;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Footer menus.
 *
 * The columns were 8% and 11% wide inside a 1310px container with 80px gaps,
 * so roughly 590px sat empty while every two-word link wrapped onto a second
 * line. That wrapping is why the lists read as endless rather than the number
 * of items. Real column widths and a tighter gap fix the cause; the hover
 * nudge is the polish on top.
 * ═══════════════════════════════════════════════════════════════════════════ */

.footer-menu a {
  display: inline-block;
  text-decoration-line: none;
  transition-property: color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.footer-menu a:hover {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CTA helper note.
 *
 * Sits under the call button in the estimate band. It used to be a solid
 * primary block with white copy and navy underlined links; with one item in
 * it, the disc marker read as a mistake and the navy-on-mid-blue links were
 * the weakest contrast on the page.
 *
 * Now a light card in the same family as the form card opposite, with the
 * primary colour carried on an accent edge rather than flooding the fill, so
 * the links can sit in brand blue on white and actually be legible.
 * ═══════════════════════════════════════════════════════════════════════════ */

.cta-note {
  border-radius: 0.75rem;
  border-width: 1px;
  border-left-width: 3px;
  border-color: rgb(40 55 74 / 0.08);
  --tw-border-opacity: 1;
  border-left-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  background-color: rgb(255 255 255 / 0.75);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: rgb(40 55 74 / 0.9);
  --tw-shadow: 0 2px 10px rgba(16,28,45,0.05);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.cta-note-text {
  margin-bottom: 0px;
  font-size: 1.0625rem;
  line-height: 1.625;
}

.cta-note-list {
  margin: 0px;
  list-style-type: disc;
}

.cta-note-list > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.cta-note-list {
  padding-left: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.625;
}

.cta-note-list *::marker {
  color: rgb(107 166 202 );
}

.cta-note-list::marker {
  color: rgb(107 166 202 );
}

.cta-note a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.25s ease, color 0.2s ease;
}

.cta-note a:hover {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  background-size: 0% 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Tinted section bands.
 *
 * A band with its own background should meet whatever follows it, not float
 * with a strip of page showing between. The styles band on the homepage had
 * 96px of white between it and the map below.
 *
 * Both sides have to be zeroed: adjacent vertical margins collapse to the
 * larger of the two, so removing only the band's bottom margin would have
 * left the next section's 96px top margin doing the same job.
 *
 * The band keeps its rounded top, which still reads as a distinct block
 * arriving, and loses the rounded bottom it no longer needs now that nothing
 * shows beneath it.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* `section.section-band + *` rather than `.section-band + *`: the element
 * selector is needed to outrank the next section's own mt-* utility, which
 * has the same class-count specificity but is emitted later, in Tailwind's
 * utilities layer. The first attempt without it changed nothing. */

section.section-band {
  margin-bottom: 0px;
}

/* Only when the next section has a background of its own. The rule used to
 * zero the top margin of whatever came next, which is right for the homepage
 * (tinted band meeting the tinted map section) and wrong everywhere else: on
 * the Products page the band is followed by an ordinary white section, and
 * flattening its margin left the finishes card jammed against the band's
 * bottom edge with no breathing room at all. A section with no background
 * cannot "meet" the band; it just loses its spacing. */

/* Either the section itself carries the background, or (the homepage's map)
 * it is a transparent wrapper around a panel that does. `:has()` covers the
 * second case; without it the map section went back to floating 96px below
 * the band. A section with no background anywhere inside keeps its margin —
 * that was the Products fault, where the finishes card ended up against the
 * band's bottom edge. */

section.section-band + section[class*="bg-"],
section.section-band + section:has(> [class*="bg-"]) {
  margin-top: 0px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Mobile hero and tap targets.
 *
 * Measured on a 390px screen: the two hero buttons were 236x59 at 18px and
 * 272x64 at 20px, so they disagreed on width, height AND type size while
 * stacked directly above one another. The size difference is deliberate on
 * desktop, where the phone button sits beside the estimate button and is
 * meant to dominate; stacked on a phone it just looks unfinished.
 *
 * Below sm they match and fill the column. From sm up the desktop
 * relationship is untouched.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  /* Side by side and sharing the row equally, rather than two full-width
	 * slabs stacked. Stacking cost ~70px of a screen whose whole job is to
	 * show the photograph behind it, and two identical bars read as a form,
	 * not a choice. flex-1 with a min-width of 0 lets both shrink to the
	 * narrow column instead of one pushing the other out. */

  /* `div.hero-cta-row`, not `.hero-cta-row`: the row carries an items-center
	 * utility of equal specificity that is emitted later, so the plain class
	 * selector lost and the buttons sized to their own content, coming out
	 * 75px and 53px tall side by side. */

  div.hero-cta-row {
    width: 100%;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hero-cta-row .btn {
    min-width: 0px;
    flex: 1 1 0%;
    justify-content: center;
    gap: 0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    font-size: 0.9375rem;
  }

  /* The review badge was a 192px block: five big stars, two lines of text
	 * and a link, all stacked. On a phone that is the single biggest thing
	 * between the headline and the fold. Laid out as one compact row it says
	 * the same thing in about a third of the height, and gives the hero
	 * photograph somewhere to actually be seen. */

  .hero-badge {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
    row-gap: 0.125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .hero-badge-stars {
    gap: 0.25rem;
  }

  .hero-badge-stars svg {
    width: 18px;
    height: 18px;
  }

  .hero-badge-text {
    max-width: none;
    font-size: 0.9375rem;
    line-height: 1.375;
  }

  .hero-badge-cta {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
  }

  .block-title.hero-badge-cta h2,.hero-badge-cta > .block-title h2 {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Tap targets.
 *
 * Audited at 390px: footer contact rows came out at 21px, "View area" and
 * "Read More" at 20px, the slider arrows at 25px and the logo link at 20px.
 * Apple and Google both ask for roughly 44px. These are all links a thumb has
 * to hit, so the height is bought with padding, which costs no layout
 * elsewhere, rather than by growing the text.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  .footer-contact a,
	.footer-menu a,
	.card-post-readmore,
	.location-card-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  /* The legal bar gets a smaller minimum than the rest. These are secondary
	 * links, and one of them is a bordered licence pill: forced to 44px it
	 * stretched into a tall capsule with its text marooned in the middle. 36px
	 * keeps it a pill and still gives a thumb something to aim at. */

  .footer-legal a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
  }

  /* Needs the extra class to win: with only `.navbar-brand` the min-height
	 * applied but the centring did not, so the logo sat 12px above the
	 * hamburger instead of on its line. */

  .site-header .navbar-brand {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  /* The strip arrows are 40px round; nudged to the full 44 on touch.
	 * The slick arrows declare w-10 h-10 but measured 25px tall in the audit,
	 * so they get an explicit minimum rather than a size that something else
	 * is evidently overriding. */

  .card-strip-arrow {
    width: 2.75rem;
    height: 2.75rem;
  }

  .slick-arrow {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Small print that was genuinely too small to read on a phone. */

.finish-swatch-label {
  font-size: 0.8125rem;
}

@media (min-width: 576px) {
  .finish-swatch-label {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Mobile repairs, measured at 390px.
 *
 * Three sections were not merely tight, they were broken: content clipped out
 * of its box, or text laid directly over a photograph.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  /* The map panel carries a fixed 1440/671 aspect ratio. At 390px wide that
	 * is 182px tall, while the card inside it needs about 400px, so the card
	 * was clipped. The ratio is a desktop composition device; on a phone the
	 * height should come from the content. !important because the ratio is an
	 * inline style, which nothing else can outrank. */

  .map-panel {
    aspect-ratio: auto !important;
    min-height: 320px;
    --tw-bg-opacity: 1;
    background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  }

  /* "Step 01" was set at 32px inside a three-column grid, so each caption had
	 * about 113px to live in and was cut off mid-word.
	 *
	 * `.process-thumb .process-thumb-caption`, not the single class: the span
	 * carries a text-[32px] utility, and a one-class component rule loses to a
	 * one-class utility emitted later. The first attempt at this changed
	 * nothing for exactly that reason. */

  .process-thumb .process-thumb-caption {
    font-size: 1rem;
    line-height: 1;
  }

  .process-thumb {
    aspect-ratio: 150/80;
  }
}

/*
 * The review card, at every width.
 *
 * The panel is tinted at 20% opacity over a photograph of a bright bathroom,
 * so the quote was dark text on a busy light background. That was fixed on
 * phones and left alone on desktop, where it is the same problem: the quote
 * is the content here and the picture is decoration behind it.
 *
 * Element selector for the usual cascade reason: the panel carries
 * bg-primary/20 as a utility, so a bare class loses.
 */

div.testimonial-panel {
  border-color: rgb(40 55 74 / 0.15);
  background-color: rgb(255 255 255 / 0.95);
  --tw-shadow: 0 24px 60px -40px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 24px 60px -40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* The quote glyph is a watermark, so it goes behind the words. It was
 * painted at 60% over the top of the body text, with the descenders of the
 * first two lines running through it. */

.testimonial-panel > svg {
  z-index: 0;
  opacity: 0.14;
}

.testimonial-panel > .review-card-nav {
  position: relative;
  z-index: 1;
}

/* Room under the nav row. The arrows sat about 10px off the card's bottom
 * edge, which read as the card being cut off rather than as a control. */

.review-card-nav.slick-initialized {
  padding-bottom: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Trust stats on phones.
 *
 * The row is flex-wrap with 40px figures and 2rem of side padding per item,
 * so on a 390px screen each stat claimed its own line: four stacked rows,
 * about 520px of navy immediately under the hero, before a visitor reaches
 * any actual content.
 *
 * Two by two instead, with the figures sized for the column they are in. Same
 * four facts, roughly 220px.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .stats-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
    row-gap: 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  @media (max-width: 1023px) {
    .process-steps-slider > .stats-bar {
      gap: 1.25rem;
    }

    .process-steps-slider > .stats-bar > div:last-child {
      padding-left: 0.25rem;
    }
  }

  .stat-item {
    gap: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .stat-number {
    font-size: 1.625rem;
    letter-spacing: -0.03rem;
  }

  .stat-label {
    font-size: 0.8125rem;
    line-height: 1.375;
  }
}

/* Large style cards as a swipeable row below lg.
 *
 * The card keeps its 4:5 shape and takes most of the screen with a sliver of
 * the next one showing, which is what tells a thumb there is more without
 * needing a caption to say so. From lg the track becomes a grid again and the
 * widths go back to auto. */

.card-photo-slide {
  width: 84%;
  flex-shrink: 0;
}

@media (min-width: 576px) {
  .card-photo-slide {
    width: 46%;
  }
}

@media (min-width: 992px) {
  .card-photo-slide {
    width: auto;
  }
}

/* The grid needs its overflow back from lg, or the cards' own hover lift gets
 * clipped by the scroll container. */

@media (min-width: 1024px) {
  .card-strip-track.lg\:grid {
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Process steps, stacked on phones.
 *
 * The section is a slider whose controls are three photo thumbnails placed
 * below the content they change. On a phone that is genuinely confusing: the
 * thumbnails look like decoration, nothing says they are tappable, and what
 * they change is above them. Below lg the slider is unslicked (see
 * ss.slickSliders) so all the steps stack in reading order, the thumbnails
 * are hidden, and each step carries its own number instead.
 * ═══════════════════════════════════════════════════════════════════════════ */

.process-step-badge {
  margin-bottom: 0.5rem;
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  border-radius: 9999px;
  background-color: rgb(107 166 202 / 0.15);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(40 55 74 / 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Shortening the tall sections on phones.
 *
 * Three sections were each taller than a phone screen several times over,
 * which is what made the page feel like an endless stack of slabs:
 *
 *   styles cards   4:5 image + a 193px floor on the white panel = ~450px each
 *   benefit rows   a 70px icon plus 16px padding = ~110px each, four of them
 *   process steps  a 350x357 photo per step = ~700px each, three of them
 *
 * None of that density is doing any work on a 390px screen. Desktop keeps
 * every one of these proportions.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  /* The photo earns less room and the copy panel stops reserving a floor
	 * taller than most of the text that lands in it. */

  .card-photo.card-photo-slide {
    aspect-ratio: 16/11;
  }

  .card-photo-slide .card-photo-body {
    min-height: 0px;
    padding: 1rem;
  }

  .card-photo-slide .card-photo-title {
    font-size: 1.125rem;
  }

  .card-photo-slide .card-photo-text {
    font-size: 0.875rem;
    line-height: 1.375;
  }

  /* A 70px icon block is bigger than the two lines of text beside it.
	 *
	 * Element-qualified because the markup carries p-4 and size-[70px] as
	 * utilities, and a bare class loses to a utility of equal weight emitted
	 * later. Measured after deploying: the first version of this rule changed
	 * neither the padding nor the icon. */

  /*
	 * Steps on phones: a numbered photo strip, not a stack of posters and not
	 * a bare list either.
	 *
	 * The 350x357 photo per step ran each one to ~700px. Hiding it fixed the
	 * height and lost the design with it. Instead the photo becomes a short
	 * banner and earns its keep by carrying the step number, so the marker and
	 * the image are one element rather than two stacked blocks. Navy disc,
	 * brand blue ring, overlapping the lower-left corner the way a caption
	 * badge would: the sequence is readable at a glance while scrolling.
	 */

  /* Element-qualified: the img carries aspect-[350/357] as a utility, and a
	 * bare class loses to it. Confirmed by measuring, the first version left
	 * the photo at its full 365px and made the section taller, not shorter. */

  img.process-step-img {
    aspect-ratio: 16/7;
    border-radius: 0.75rem;
  }

  .process-step-num {
    position: absolute;
    bottom: -0.75rem;
    left: 0.75rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 9999px;
    border-width: 3px;
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
    font-family: Poppins, sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    --tw-shadow: 0 4px 12px rgba(16,28,45,0.35);
    --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  @media (max-width: 1023px) {
    .process-steps-slider > .process-step-num {
      gap: 1.25rem;
    }

    .process-steps-slider > .process-step-num > div:last-child {
      padding-left: 0.25rem;
    }
  }

  .process-step-media {
    margin-bottom: 0.25rem;
  }

  /* The text sits clear of the disc that overhangs the photo above it. */

  .process-steps-slider > .grid {
    gap: 1.25rem;
  }

  .process-steps-slider > .grid > div:last-child {
    padding-left: 0.25rem;
  }
}

/* Area pills sit in a two-column grid on phones, so they need to fill their
 * cell and centre their own content rather than hug their label. */

@media (max-width: 639px) {
  .map-panel .pill {
    width: 100%;
    min-width: 0px;
    justify-content: center;
    gap: 0.375rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .block-title.map-panel .pill h2,.map-panel .pill > .block-title h2 {
    margin-left: auto;
    margin-right: auto;
  }

  /* The longest label, "Upland (Showroom)", was pushing its pin out through
	 * the left edge of the pill. The icon holds its size and the label takes
	 * whatever is left. */

  .map-panel .pill-icon {
    flex-shrink: 0;
  }

  .map-panel .pill > span,
	.map-panel .pill {
    overflow-wrap: break-word;
  }
}

/* Reserve the bar's height so it never covers the end of the footer.
 *
 * This was padding on <body>, which put the reserved strip BELOW the navy
 * footer: a band of white under the footer on every page, and the legal line
 * still ended 16px from the document end with a 51px bar over it, so it was
 * covered anyway. Measured, not guessed.
 *
 * The space belongs inside the footer, where the footer's own background
 * fills it, so the bar rests on navy instead of on the copyright line. */

@media (max-width: 1199px) {
  body.has-call-bar .site-footer {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CARD, OVERLAY — a FOURTH distinct card type, confirmed from the Services
 * hub grid's first row ("Door & Inline Panel Installation" + the two
 * half-height cards beside it). Text sits DIRECTLY on the photo under a
 * dark gradient (transparent at the 50% mark → solid secondary at the
 * bottom) — no white panel like card-photo. rounded-2xl (16px), not
 * card-photo's 20px.
 *
 * Used as one large "featured" card (h-full in a row) beside a column of
 * two half-height ones — build that layout with plain flex, not a variant
 * class: the large card is h-full, the pair is a flex-col column with the
 * same gap as the row gap so 2×half + gap = the large card's height.
 *   <div class="flex gap-6">
 *     <a href="…" class="card-overlay flex-1">
 *       <img class="card-overlay-img" src="…" alt="">
 *       <div class="card-overlay-body">
 *         <p class="card-overlay-title">Title</p>
 *         <p class="card-overlay-text">Text</p>
 *       </div>
 *     </a>
 *     <div class="flex flex-1 flex-col gap-6">
 *       <a href="…" class="card-overlay h-full">…</a>
 *       <a href="…" class="card-overlay h-full">…</a>
 *     </div>
 *   </div>
 * ═══════════════════════════════════════════════════════════════════════════ */

.card-overlay {
  position: relative;
  display: block;
  min-height: 22rem;
  overflow: hidden;
  border-radius: 1rem;
  text-decoration-line: none;
}

.card-overlay-img {
  position: absolute;
  inset: 0px;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*
 * The gradient scrim. At rest the ramp only occupies the bottom half (the
 * confirmed Figma value: transparent to the 50% mark, solid secondary at the
 * bottom); on hover the SAME ramp stretches over the card's full height.
 *
 * Done with background-size rather than moving the color stops because
 * `background-image` is not animatable — swapping `from-50%` for `from-0%` on
 * hover would snap. `background-size` IS animatable, so: the image is anchored
 * to the bottom and grown to 200% height, which pushes the flat secondary/10
 * half up out of view and leaves only the ramp filling the box. Same visual
 * result as re-stopping the gradient, but it tweens.
 */

.card-overlay::after {
  position: absolute;
  inset: 0px;
  z-index: 1;
  border-radius: 1rem;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(40 55 74 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-from-position: 50%;
  --tw-gradient-to: #28374a var(--tw-gradient-to-position);
  background-size: 100% 100%;
  background-position: bottom;
  transition-property: background-size;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  --tw-content: '';
  content: var(--tw-content);
}

.card-overlay:hover::after,
.card-overlay:focus-visible::after {
  background-size: 100% 200%;
}

.card-overlay-body {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 2rem;
}

.card-overlay-title {
  margin-bottom: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.card-overlay-text {
  margin-bottom: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CARD, POST — the blog listing card, confirmed from the Blog page grid
 * (node 33880:16452, "Frameless vs. Sliding Shower Doors"). A FIFTH distinct
 * card type — do not reuse .card-photo/.card-media/.card-overlay for this;
 * it was previously built generically (image/title/excerpt/"Learn More")
 * with no basis in the actual design, missing the category badge, read-time,
 * and separate Read More block entirely.
 *
 * Confirmed structure: outer flex-col gap-8 (32px) holding THREE siblings —
 * the image, a gap-2.5 (10px) content block (meta row + title), and a
 * separate Read More link. The Read More block is NOT nested inside the
 * title/content group; it sits its own 32px away, same as the image is.
 *
 * Meta row is `justify-between`: a category pill (bg-secondary/10, its own
 * border-secondary/10, rounded-full, px-3 py-1) on the left, plain read-time
 * text (no background — px-3 py-1 kept only for baseline alignment with the
 * pill) on the right. Read-time isn't a Figma-supplied field — there's no
 * CPT/ACF field for it yet (Blog stays native `post` until Phase 5), so it's
 * computed from word count via `ss_reading_time()` in template-tags.php
 * rather than hardcoded or guessed per post.
 *
 * Clickable via .stretched-link on the Read More anchor (needs the card
 * itself `relative`). Equal-height rows: use `data-fix="height"` on the
 * wrapping grid, same convention as .card-media.
 *   <div class="flex flex-wrap gap-8" data-fix="height">
 *     <article class="card-post">
 *       <img class="card-post-img" src="…" alt="">
 *       <div class="card-post-content">
 *         <div class="card-post-meta">
 *           <span class="card-post-category">Category</span>
 *           <span class="card-post-time">4 min read</span>
 *         </div>
 *         <h3 class="card-post-title">Title</h3>
 *       </div>
 *       <a href="…" class="card-post-readmore stretched-link">
 *         Read More <svg>…arrow-right…</svg>
 *       </a>
 *     </article>
 *   </div>
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * At rest the primary/20 tint sits at the top and has faded to nothing by the
 * card's bottom edge; on hover it carries all the way down to the bottom.
 *
 * Same background-size technique as .card-overlay::after, and for the same
 * reason — `background-image` is not animatable, so re-stopping the gradient
 * on hover would snap. Here the image is anchored to the TOP and grown to
 * 200% height, which pushes the transparent end below the card and leaves the
 * tinted portion covering the full box.
 */

.card-post {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 2rem;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.16);
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(255 255 255 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(107 166 202 / 0.2) var(--tw-gradient-to-position);
  background-size: 100% 100%;
  background-position: top;
  padding: 1.5rem;
  transition-property: background-size;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.card-post:hover,
.card-post:focus-within {
  background-size: 100% 200%;
}

.card-post-img {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
  -o-object-fit: cover;
     object-fit: cover;
}

.card-post-content {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.625rem;
}

.card-post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 13px on phones, where 12px was genuinely hard to read; the confirmed 12px
 * returns from sm up. Folded into this rule rather than added as a second
 * one, since a later duplicate simply overrode it. */

.card-post-category {
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  background-color: rgb(40 55 74 / 0.1);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.8125rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  .card-post-category {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

.card-post-time {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.card-post-title {
  margin-bottom: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.card-post-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ICON LIST — wrap a WYSIWYG <ul> to swap bullets for a checkmark badge.
 *   <div class="list-icon"><?php echo $content; ?></div>
 *
 * Confirmed from Figma (nodes 33880:871/872, "Custom Frameless Glass Shower
 * Door Installation" page): a 24x24 bg-primary circle (rounded-[12px] = a
 * circle at this exact size) with a centered 14x14 white checkmark
 * (M11.6644 3.5L5.24841 9.9162L2.33203 6.99975, stroke-width 2, round caps).
 * This is a WYSIWYG <ul> with no control over inner markup, so the whole
 * badge — circle + check — is one `::before` background-image (same
 * data-URI-background technique already used for the select dropdown
 * arrow), replacing the old icomoon codepoint (\e932) that never had a
 * real font file backing it and rendered as nothing.
 * ═══════════════════════════════════════════════════════════════════════════ */

.list-icon ul,
ul.list-icon {
  margin-left: 0px;
  list-style-type: none;
}

.list-icon ul li,
ul.list-icon li {
  position: relative;
  padding-left: 2.25rem;
}

.list-icon ul li::before,
ul.list-icon li::before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11.6644%203.5L5.24841%209.9162L2.33203%206.99975%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  --tw-content: '';
  content: var(--tw-content);
}

@media (min-width: 992px) {
  .list-icon ul li,
ul.list-icon li {
    padding-left: 2.5rem;
  }
}

.list-icon ul li strong,
ul.list-icon li strong {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ACCORDION (FAQ) — confirmed from the Services page FAQ pull.
 * Light-blue card, NOT a plus/minus swap — a chevron that rotates 180°.
 *   <div class="accordion space-y-4">
 *     <div class="accordion-item itemActive">
 *       <button type="button" class="accordionBtn active" aria-expanded="true">
 *         <span>Question</span>
 *         <svg class="accordion-chevron">…</svg>
 *       </button>
 *       <div class="accordionBody">Answer</div>
 *     </div>
 *   </div>
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * The FAQ, redesigned.
 *
 * It was a stack of pale-blue filled boxes with the question at 24px and the
 * answer at 14px light grey, so the part a visitor actually came to read was
 * the smallest, faintest text on the page and the questions shouted over it.
 * Now the answer is body copy at full size with room to read, the question
 * is a confident 18px, and the items are divided by hairlines rather than
 * boxed, which is how a long list of questions scans.
 */

.accordion-item {
  border-bottom-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.accordion-item:first-child {
  border-top-width: 1px;
}

.accordionBtn {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  text-align: left;
}

.accordionBtn:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 4px;
  outline-color: #6ba6ca;
}

@media (min-width: 992px) {
  .accordionBtn {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.accordionBtn > span {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 992px) {
  .accordionBtn > span {
    font-size: 1.125rem;
  }
}

.accordionBtn:hover > span,
.accordionBtn.active > span {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* The control is a ring that fills when its answer is open, so the state is
 * readable at a glance down the whole list, not only on the one you hover. */

.accordion-chevron {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  padding: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: transform,background-color,border-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.accordionBtn:hover .accordion-chevron {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.accordionBtn.active .accordion-chevron {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.accordionBody {
  max-width: 62ch;
  padding-bottom: 1.5rem;
  padding-right: 3rem;
  font-size: 1rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.75);
}

.accordionBody p:last-child {
  margin-bottom: 0px;
}

.accordionBody a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: rgb(107 166 202 / 0.5);
  text-underline-offset: 4px;
}

/* The help card under an FAQ heading: the people who answer these questions
 * are one call away, which is the most useful thing an FAQ can end on. */

.faq-help {
  margin-top: 2rem;
  border-radius: 18px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.faq-help-title {
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.faq-help-text {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(255 255 255 / 0.7);
}

.faq-help-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  row-gap: 0.75rem;
}

.faq-help-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.85);
  text-decoration-line: underline;
  text-decoration-color: rgb(255 255 255 / 0.3);
  text-underline-offset: 4px;
}

.faq-help-link:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.faq-intro {
  margin-bottom: 0px;
  margin-top: 1rem;
  max-width: 28rem;
  color: rgb(40 55 74 / 0.75);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PILL — confirmed from the San Diego city page "Styles Available" pull.
 * Two states: active (filled) and inactive (tinted outline). Icon is inline
 * SVG using currentColor so one glyph works for both colour states — Figma
 * exports it as two separately-coloured assets, but currentColor is simpler
 * and exact.
 *   <a href="#" class="pill">Label <svg class="pill-icon">…</svg></a>
 *   <a href="#" class="pill pill-active">Label <svg class="pill-icon">…</svg></a>
 * ═══════════════════════════════════════════════════════════════════════════ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
  border-radius: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  background-color: rgb(107 166 202 / 0.2);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.pill-active,
.pill:hover {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Round 48 correction: 24x24 is the confirmed CONTAINER/frame size — 18x20
 * is the PATH size drawn within that frame (the pin glyph doesn't fill the
 * whole square, it has natural margin around it), not the icon's outer box.
 * Round 47 wrongly stretched the whole container to 18x20 with
 * preserveAspectRatio="none", distorting the glyph. Reverted to the plain
 * 24x24 square container with normal aspect-ratio preservation. */

.pill-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Skip link — first child of .site-wrapper:
 *   <a class="skip-link" href="#main">Skip to content</a>
 * ═══════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100000;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * .form-group — vertical spacing wrapper for custom (non-Gravity-Forms) fields.
 *   <div class="form-group"><label>…</label><input>…</div>
 * ═══════════════════════════════════════════════════════════════════════════ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * .scrollbar-hide — hides the native scrollbar on horizontal-scroll strips
 * (e.g. product-card-grid's small-card row) while keeping scroll functional.
 * No Tailwind scrollbar plugin is installed, so this is plain CSS, not @apply.
 * ═══════════════════════════════════════════════════════════════════════════ */

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * .card-strip — the horizontal-scroll row of small style cards under the
 * three large ones (product-card-grid.php, `tiered` display style).
 *
 * The row overflows on purpose: the confirmed Figma row is ~2153px of cards
 * inside a 1441px container. Round 45 made the native scrollbar visible as
 * the affordance that it scrolls; client QA (Sep 2026) asked for a tidier bar
 * plus real prev/next arrows, so the bar is now styled and the arrows drive
 * the same scroll container. Scroll stays native — arrows are an addition to
 * it, not a replacement, so touch/trackpad/keyboard all keep working and the
 * row still functions with JS off (arrows are hidden until JS wires them up).
 *
 *   <div class="card-strip js-card-strip">
 *     <button class="card-strip-arrow card-strip-prev js-card-strip-prev"></button>
 *     <div class="card-strip-track js-card-strip-track"> …cards… </div>
 *     <button class="card-strip-arrow card-strip-next js-card-strip-next"></button>
 *     <span class="card-strip-fade"></span>
 *   </div>
 * ═══════════════════════════════════════════════════════════════════════════ */

.card-strip {
  position: relative;
}

/*
 * Round 204: the native scrollbar is hidden rather than styled.
 *
 * Round 45 exposed it deliberately, as the affordance that the row scrolls,
 * and Sep QA then asked for it to be tidied. Reviewed again on the live page:
 * a full-width grey rail under the cards reads as a rendering fault, not as a
 * control. The prev/next arrows and the fade at the right edge already say
 * "there is more", and they say it better.
 *
 * Scrolling itself is untouched. Touch, trackpad, shift-wheel and keyboard all
 * still work; only the painted bar is gone. Scroll-snap makes the arrows land
 * on a card edge instead of mid-card.
 */

.card-strip-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-strip-track::-webkit-scrollbar {
  display: none;
}

.card-strip-track > * {
  scroll-snap-align: start;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Strip cards.
 *
 * The hover was a straight swap to navy, which happened instantly and told
 * you nothing beyond "this is hoverable". These are links to product pages,
 * so the hover now behaves like one: the card lifts off the row, takes a
 * shadow, and a chevron slides in to say where it goes. Transform and paint
 * only, so neighbouring cards never move.
 * ═══════════════════════════════════════════════════════════════════════════ */

.strip-card {
  position: relative;
  display: flex;
  width: 264px;
  flex-shrink: 0;
  flex-direction: column;
  gap: 0px;
  overflow: hidden;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,box-shadow,border-color,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.strip-card-media {
  display: block;
  aspect-ratio: 264/132;
  width: 100%;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
}

.strip-card-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.strip-card:hover .strip-card-img,
.strip-card:focus-visible .strip-card-img {
  --tw-scale-x: 1.06;
  --tw-scale-y: 1.06;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.strip-card-body {
  display: block;
  padding: 1rem;
  padding-bottom: 1.75rem;
}

.strip-card:hover,
.strip-card:focus-visible {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(40 55 74 / 0.14);
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 26px 44px -26px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 26px 44px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.strip-card:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.strip-card-title {
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.strip-card-text {
  margin-bottom: 0px;
  font-size: 0.8125rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.7);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.strip-card:hover .strip-card-title,
.strip-card:focus-visible .strip-card-title {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.strip-card:hover .strip-card-text,
.strip-card:focus-visible .strip-card-text {
  color: rgb(40 55 74 / 0.7);
}

/* The chevron that slides in at the corner on hover. */

.strip-card::after {
  content: "";
  pointer-events: none;
  position: absolute;
  bottom: 0.875rem;
  right: 1rem;
  width: 7px;
  height: 7px;
  --tw-translate-x: -0.5rem;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-bottom-width: 2px;
  border-right-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  opacity: 0;
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.strip-card:hover::after,
.strip-card:focus-visible::after {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

/* Large cards above the strip: let the photograph answer the pointer too. */

.card-photo {
  overflow: hidden;
}

.card-photo-img {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.card-photo:hover .card-photo-img,
.card-photo:focus-within .card-photo-img {
  --tw-scale-x: 1.06;
  --tw-scale-y: 1.06;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (prefers-reduced-motion: reduce) {
  .strip-card:hover,
	.strip-card:focus-visible {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .card-photo:hover .card-photo-img,
	.card-photo:focus-within .card-photo-img {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .card-strip-track {
    scroll-behavior: auto;
  }
}

/* Arrows reuse .slick-arrow's confirmed look (40x40, primary fill, white
 * glyph from the same mask asset, hover inverts) so the two navigation
 * idioms on this site stay consistent. Hidden until JS adds .is-ready —
 * an arrow that cannot scroll anything is worse than no arrow — and from
 * `sm` up only: below that the container gutter is too narrow to seat them
 * outside the track, so they sat on top of the first card's copy. Touch
 * users swipe the row anyway, and the styled bar plus the edge fade already
 * say it scrolls. */

.card-strip-arrow {
  position: absolute;
  top: calc(50% - 0.375rem);
  z-index: 20;
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  place-items: center;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.card-strip-arrow:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.card-strip-arrow:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.card-strip-arrow:not(:disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* Arrows show wherever the row actually scrolls, phones included. They were
 * suppressed below sm, which is precisely where a swipe row most needs a
 * visible control: a phone gives no hover hint that there is more sideways.
 * They sit over the card edge, which is the usual carousel arrangement, and
 * are 44px for a thumb. */

.card-strip.is-ready .card-strip-arrow {
  display: grid;
}

@media (max-width: 1023px) {
  .process-steps-slider > .card-strip.is-ready .card-strip-arrow {
    gap: 1.25rem;
  }

  .process-steps-slider > .card-strip.is-ready .card-strip-arrow > div:last-child {
    padding-left: 0.25rem;
  }
}

.card-strip-arrow::before {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  --tw-content: '';
  content: var(--tw-content);
  -webkit-mask-image: url('./images/icons/slider-arrow.svg');
          mask-image: url('./images/icons/slider-arrow.svg');
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.card-strip-prev {
  left: -0.75rem;
}

.card-strip-prev::before {
  content: var(--tw-content);
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 576px) {
  .card-strip-prev {
    left: -1.25rem;
  }
}

.card-strip-next {
  right: -0.75rem;
}

@media (min-width: 576px) {
  .card-strip-next {
    right: -1.25rem;
  }
}

/* Right-edge fade hinting at more cards. Fades out once the row is scrolled
 * to the end so it doesn't sit over the last card for no reason. */

.card-strip-fade {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 10;
  width: 4rem;
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
  --tw-gradient-from: #e1edf4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(225 237 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  opacity: 1;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (min-width: 576px) {
  .card-strip-fade {
    width: 6rem;
  }
}

.card-strip.is-end .card-strip-fade {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Blog article pull-quote — theme/template-parts/content/content-single.php
 * wraps the article in `.blog-article`, scoping this to blog posts only.
 * Confirmed from Figma (design-context-33880-16543-blog-individual.md, node
 * 33880:16647): editors add a pull-quote via the block editor's native
 * Quote block, which renders a plain <blockquote>. Tailwind Typography's
 * default blockquote (left border, italic, font-weight 500, quote-mark
 * pseudo-elements) is overridden here to match the confirmed filled
 * bg-primary rounded box instead — not applied to `.prose` globally, since
 * text-block.php (CMS legal pages) reuses `.prose` too and Figma shows no
 * such treatment there.
 *
 * Round 86: two things Round 83 missed. (1) font-size/leading/weight were
 * never set, so it was silently inheriting Typography's default 500-weight
 * blockquote instead of the confirmed `Inter:Regular` (400) / 18px /
 * leading-[28px]. (2) Typography's quote-mark decoration is generated on
 * the INNER <p> (`blockquote p:first-of-type::before` /
 * `:last-of-type::after`), not the blockquote itself — resetting only the
 * blockquote's own pseudo-elements left the auto-generated marks active,
 * doubling up with the literal “ ” characters already in the confirmed
 * copy (Figma's own text content types the quotes by hand, it doesn't rely
 * on CSS-generated ones).
 *
 * Round 87: padding still read as too generous — the blockquote's OWN
 * padding (py-4/px-8) was already exactly 16px/32px, confirmed correct via
 * computed style. The actual culprit was the INNER <p>'s own Typography
 * default vertical margin (~22.5px, unrelated to the blockquote's padding)
 * stacking on top of it, so the real visual gap was ~38.5px, not 16px.
 * Zeroed with `[&_p]:my-0` — the confirmed mockup has no separate
 * paragraph-level margin, just the one flex container with its own padding.
 * ═══════════════════════════════════════════════════════════════════════════ */

.blog-article .prose blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: 1rem;
  border-left-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: Inter, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.blog-article .prose blockquote::before {
  --tw-content: none;
  content: var(--tw-content);
}

.blog-article .prose blockquote::after {
  --tw-content: none;
  content: var(--tw-content);
}

.blog-article .prose blockquote p {
  margin-top: 0px;
  margin-bottom: 0px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.blog-article .prose blockquote p::before {
  --tw-content: none;
  content: var(--tw-content);
}

.blog-article .prose blockquote p::after {
  --tw-content: none;
  content: var(--tw-content);
}

/* Round 88: body paragraphs are confirmed Inter Regular too (same node
 * range as the pull-quote/h3 above) — font-quaternary, sized/leading
 * already correct sitewide (16px/28px matches the confirmed values, no
 * override needed beyond the family itself). Color is handled by the
 * UNSCOPED `.prose` rule below — Inter is blog-specific, but the color
 * bug it's riding along with turned out not to be. */

.blog-article .prose p {
  font-family: Inter, sans-serif;
}

/* Round 89: EVERY `.prose` usage sitewide — not just the blog post — was
 * silently wrong on body-text color. This project never opts into the
 * named `prose-direct_shower_door` typography variant (see
 * tailwind-typography.config.js's own comment: "does nothing until you
 * swap the class"), so Typography's DEFAULT prose variant's built-in
 * `--tw-prose-body` gray (rgb(55,65,81), Tailwind's gray-700) was
 * rendering everywhere instead of this project's palette. Confirmed via a
 * live check on Privacy Policy (already signed off in Phase 6, uses the
 * same bare `.prose max-w-none` in text-block.php) — identical wrong
 * color there too, not something specific to the blog post. Both
 * confirm the same value: `rgba(40,55,74,0.8)` (secondary/80) for
 * paragraphs AND lists (Privacy Policy's own bulleted clauses). Fixed
 * unscoped, not `.blog-article`-scoped, since this is a real sitewide gap
 * — Privacy Policy stays on Poppins (confirmed `Poppins:Regular` there),
 * only the color was ever wrong, not the font. */

.prose p,
.prose li {
  color: rgb(40 55 74 / 0.8);
}

/* Round 87: Tailwind Typography sizes `.prose` headings with its own
 * em-relative scale (h3 ≈ 1.25em → 20px), which wins over the sitewide
 * `h3, .h3` rule (base.css, confirmed 18px/24px at 2xl) inside `.prose` —
 * Typography's plugin CSS loads in the components layer, after base.css's
 * base-layer rule, so it wins the cascade tie even though both are
 * effectively bare-h3-specificity. Re-asserted the sitewide scale here
 * instead of letting article body h3s drift to a size never confirmed
 * against Figma. */

.blog-article .prose h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 1310px) {
  .blog-article .prose h3 {
    font-size: 1.5rem;
  }
}

/* Content image, e.g. after "Which Style Fits Your Bathroom?" — confirmed
 * from Figma (same node range as the pull-quote above, node 33880:16652):
 * rounded-[20px], object-cover. Scoped the same way as the pull-quote. */

.blog-article .prose img {
  border-radius: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Benefit strip (icon-benefit-grid, `featured_strip` style)
 *
 * One of the three cards used to render solid navy, from a `featured`
 * checkbox on the ACF row. On the page that reads as a selected tab in a tab
 * strip that does nothing: there is no state to select, the three are
 * ordinary parallel benefits, and nothing explains why one of them is on.
 * They are equals now, and the emphasis moved to the pointer, where it means
 * something. The `featured` field still exists and is simply not drawn.
 * ═══════════════════════════════════════════════════════════════════════════ */

.benefit-strip-card {
  position: relative;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 14px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.12);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 1.5rem;
  padding-right: 1.25rem;
  transition-property: transform,box-shadow,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* The accent rail grows to the card's full height on hover, so the row reads
 * as three things you can go into rather than three paragraphs in boxes. */

.benefit-strip-card::before {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  left: 0px;
  top: 1.25rem;
  width: 3px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  background-color: rgb(107 166 202 / 0.55);
  transition-property: top,bottom,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.benefit-strip-card:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(40 55 74 / 0.2);
  --tw-shadow: 0 18px 34px -24px rgba(16,28,45,0.5);
  --tw-shadow-colored: 0 18px 34px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.benefit-strip-card:hover::before {
  bottom: 0px;
  top: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.benefit-strip-title {
  margin-bottom: 0.375rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.benefit-strip-text {
  margin-bottom: 0px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgb(40 55 74 / 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .benefit-strip-card,
	.benefit-strip-card::before,
	.finish-swatch-img {
    transition: none;
  }

  .benefit-strip-card:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Phone layout for the catalogue grids.
 *
 * Two modules were producing one full-width card per row on a phone, which
 * turned short lists into very long pages:
 *
 *   photo-card-grid   Hardware & Glass ran to 14,900px, with a single handle
 *                     photograph filling a whole screen
 *   card-photo        the Services hub ran to 10,400px, eight 4:5 posters
 *
 * Neither is a reading experience. The handles are catalogue items and go two
 * up; the services are a list of links and become rows with a thumbnail, the
 * shape a phone user already knows from every list they use.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575px) {
  /* ── photo-card-grid: two up ─────────────────────────────────────────── */

  div.photo-card-grid {
    gap: 0.75rem;
  }

  /* Element-qualified: the card carries basis-full as a utility. */

  div.photo-card {
    flex-basis: calc((100% - 0.75rem) / 2);
  }

  /* Landscape diagrams keep the full row (see the module for how this is
	 * decided), as do the overlay photo cards, which are a different shape
	 * of card entirely. */

  div.photo-card.photo-card--wide {
    flex-basis: 100%;
  }

  /* Element-qualified: the card carries p-6 as a utility. */

  div.photo-card {
    border-radius: 0.75rem;
    padding: 0.75rem;
  }

  div.photo-card.photo-card--wide {
    padding: 1rem;
  }

  /* And the image carries h-auto + an inline aspect-ratio. A square crop
	 * holds the row together when the photographs disagree about shape;
	 * `!important` on the ratio because the inline style would otherwise
	 * win, and inline is where the real ratio has to live for the full-width
	 * diagrams. */

  /* No `h-full` here. The card is a flex item with a stretched height, so
	 * `height: 100%` resolved against it, the width was already 100%, and a
	 * fully constrained box makes `aspect-ratio` inert: the photograph filled
	 * the whole card and pushed its own caption out through the bottom edge,
	 * where it sat on the row below. Width and the ratio, nothing else. */

  img.photo-card-img {
    aspect-ratio: 1 / 1 !important;
    height: auto;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }

  .photo-card--wide img.photo-card-img {
    aspect-ratio: auto !important;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }

  p.photo-card-title {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.375;
  }

  .photo-card--wide p.photo-card-title {
    margin-top: 1rem;
    font-size: 1.125rem;
  }

  p.photo-card-text {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.375;
  }

  div.photo-card-grid {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
    row-gap: 1rem;
  }

  /* ── card-photo: a row, not a poster ─────────────────────────────────── */

  /* Element-qualified against the aspect-[4/5] utility on the article.
	 * The slide variant is excluded: those live in a horizontal scroll strip
	 * where a row would make no sense. */

  /* The thumbnail is positioned rather than laid out as a flex item: a
	 * replaced element with height:auto does not stretch, so in a flex row
	 * the picture stopped short of the bottom of any card whose title ran to
	 * three lines, leaving a white step under it. */

  article.card-photo:not(.card-photo-slide) {
    display: block;
    min-height: 6.5rem;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(40 55 74 / 0.14);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding-left: 7.5rem;
    aspect-ratio: auto;
  }

  .card-photo:not(.card-photo-slide) .card-photo-img {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 7.5rem;
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    aspect-ratio: auto;
  }

  .card-photo:not(.card-photo-slide) .card-photo-body {
    position: static;
    inset: auto;
    display: flex;
    min-height: 0px;
    flex-direction: column;
    justify-content: center;
    border-radius: 0px;
    border-width: 0px;
    background-color: transparent;
    padding: 1rem;
    padding-right: 2rem;
  }

  .card-photo:not(.card-photo-slide) .card-photo-title {
    margin-bottom: 0.25rem;
    font-size: 1.0625rem;
    line-height: 1.375;
  }

  .card-photo:not(.card-photo-slide) .card-photo-text {
    font-size: 0.8125rem;
    line-height: 1.375;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* A row that goes somewhere says so. */

  .card-photo:not(.card-photo-slide)::after {
    content: "";
    pointer-events: none;
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 7px;
    height: 7px;
    --tw-translate-y: -50%;
    --tw-rotate: -45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-color: rgb(40 55 74 / 0.35);
  }

  /* The desktop hover floods the white panel navy. Here the panel is the
	 * whole card, and a sticky hover after a tap would leave a row inverted,
	 * so the row answers the press instead. */

  .card-photo:not(.card-photo-slide):hover .card-photo-body,
	.card-photo:not(.card-photo-slide):focus-within .card-photo-body {
    border-width: 0px;
    background-color: transparent;
  }

  .card-photo:not(.card-photo-slide):hover .card-photo-title,
	.card-photo:not(.card-photo-slide):focus-within .card-photo-title {
    --tw-text-opacity: 1;
    color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  }

  .card-photo:not(.card-photo-slide):hover .card-photo-text,
	.card-photo:not(.card-photo-slide):focus-within .card-photo-text {
    color: rgb(40 55 74 / 0.8);
  }

  article.card-photo:not(.card-photo-slide):active {
    border-color: rgb(107 166 202 / 0.5);
    --tw-bg-opacity: 1;
    background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Gallery on phones.
 *
 * Three faults, all of them only visible on a touch screen:
 *   - the style filters wrapped into nine rows of 170px pills before the
 *     first photograph
 *   - the photographs ran one per row, so the page was a column of
 *     full-width images
 *   - every caption was hover-only, which on a phone means there is no
 *     caption: a grid of unlabelled bathrooms with no style and no city
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575px) {
  /* A scrolling row, with the gutter padding restored inside it so the
	 * first and last pill are not clipped by the container's own padding. */

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* The compare slider is a drag interaction; half a phone width is not
	 * enough to drag in. */

  .gallery-grid > .gallery-cell--wide {
    grid-column: 1 / -1;
  }

  article.gallery-cell--wide {
    padding: 0.75rem;
  }

  .gallery-cell--wide .ba-slider {
    height: 240px;
  }

  .gallery-cell--wide > p {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
  }

  /* Captions at rest. The scrim is lighter than the hover state, because
	 * it is now permanent and has to sit under a photograph rather than
	 * replace it. */

  /* Element-qualified: both of these carry opacity-0 as a utility, and a
	 * bare class loses to a utility of equal weight emitted later. The first
	 * version of this rule shipped and did nothing, which is the same fault
	 * CLAUDE.md warns about. */

  div.gallery-caption-scrim {
    opacity: 1;
    background-image: linear-gradient(
			to bottom,
			rgba(40, 55, 74, 0) 45%,
			rgba(40, 55, 74, 0.82) 100%
		);
  }

  div.gallery-caption {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    gap: 0.125rem;
    opacity: 1;
  }

  .gallery-caption .card-overlay-title {
    font-size: 0.9375rem;
    line-height: 1.25;
  }

  .gallery-caption .card-overlay-text {
    font-size: 0.75rem;
    line-height: 1.25;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Filter rows on phones.
 *
 * Every filter row on this site was built for a desktop: the gallery and the
 * hub pages wrap 170px pills onto as many rows as it takes, and the FAQ runs
 * its categories down a sidebar. Stacked on a phone, the gallery's filters
 * came to nine rows before the first photograph.
 *
 * They scroll sideways instead, which is the shape a phone user already
 * knows. The negative margin and matching padding put the gutter back inside
 * the scroll container, so the first and last pill are not clipped by the
 * container's own padding and the row visibly runs off the edge.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  div.filter-row,
	div.faq-filter-row {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 1.5rem;
    display: flex;
    width: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.5rem;
    overflow-x: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  div.filter-row::-webkit-scrollbar,
	div.faq-filter-row::-webkit-scrollbar {
    display: none;
  }

  /* No scroll snapping. With `scroll-snap-align: start` on the pills the
	 * browser snapped the row to the first pill on load, which scrolled the
	 * container by exactly its own start padding and left the "All" pill cut
	 * in half against the screen edge. A filter row is short enough that
	 * snapping buys nothing. */

  .filter-row > .pill,
	.faq-filter-row > .pill {
    width: auto;
    min-width: 0px;
    flex-shrink: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.8125rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * County cards on phones.
 *
 * Four counties, each a 16:9 photograph over a title, a list of cities and a
 * "View area" link, came to roughly 600px apiece: 2,400px to say the company
 * covers four counties. As rows with a small photograph they say the same
 * thing in a fifth of the space, and the whole set is on screen at once,
 * which is the point of a coverage list.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575px) {
  div.location-card-row {
    gap: 0.75rem;
  }

  article.location-card {
    display: block;
    min-height: 6.25rem;
    gap: 0px;
    overflow: hidden;
    border-radius: 0.75rem;
    border-color: rgb(40 55 74 / 0.14);
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    background-image: none;
    padding: 0px;
    padding-left: 6.75rem;
  }

  .location-card .location-card-main {
    display: block;
    gap: 0px;
    padding: 0.75rem;
    padding-right: 2rem;
  }

  .location-card .location-card-media {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 6.75rem;
    border-radius: 0px;
    aspect-ratio: auto;
  }

  .location-card .location-card-title {
    font-size: 1.0625rem;
    line-height: 1.375;
  }

  .location-card .location-card-text {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.375;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* The whole row is the link (.stretched-link is already on it), so the
	 * "View area" text is redundant next to a chevron. */

  .location-card .location-card-link {
    position: absolute;
    bottom: 0px;
    right: 0px;
    top: 0px;
    width: 2rem;
    justify-content: center;
    gap: 0px;
    font-size: 0;
    color: rgb(40 55 74 / 0.4);
  }

  .location-card .location-card-link svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

/* Overlay photo cards (the glass options) on phones.
 *
 * These are photographs with the label set into the bottom of the picture.
 * They used to take the full row because they were lumped in with the
 * labelled diagrams, which made five swatches of glass into 2,100px of
 * stacked pictures. They are the same thing as a gallery tile, and they go
 * two up, at a shape that suits a half-width column. */

@media (max-width: 575px) {
  div.photo-card.photo-card--overlay {
    min-height: 0px;
    padding: 0px;
    flex-basis: calc((100% - 0.75rem) / 2);
  }

  .photo-card--overlay img.photo-card-img {
    aspect-ratio: 4 / 5 !important;
    height: auto;
    width: 100%;
    border-radius: 1rem;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .photo-card--overlay > p {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.25;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PANES
 *
 * Every card on this site was the same object: a 2px-ish border at 16% navy
 * over a vertical wash of primary at 20%, repeated down every page until the
 * whole site read as one flat blue grid. The wash is the worst of it — it
 * muddies the white, it fights the photography, and it is the single thing
 * that makes the build look like a stock template.
 *
 * A pane instead. This is a frameless glass company, so the card takes its
 * cues from the product: a hairline edge rather than a drawn border, real
 * depth from a wide soft shadow rather than a fill, and on hover a bright
 * line along the top edge, the way light catches the edge of a glass panel.
 * Nothing about it is decorative for its own sake and it costs one shadow.
 * ═══════════════════════════════════════════════════════════════════════════ */

.pane {
  position: relative;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,box-shadow,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* The edge light. Inset by the radius so it reads as the lit top edge of the
 * pane and not as a bar stuck to the card. */

.pane::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  top: -1px;
  height: 2px;
  border-radius: 9999px;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(107 166 202 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #6ba6ca var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.pane:hover,
.pane:focus-within {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(40 55 74 / 0.14);
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 26px 44px -26px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 26px 44px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.pane:hover::before,
.pane:focus-within::before {
  opacity: 1;
}

/* A pane that is not a link does not need to answer the pointer. */

.pane--static:hover,
.pane--static:focus-within {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(40 55 74 / 0.09);
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.pane--static:hover::before,
.pane--static:focus-within::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pane,
	.pane::before {
    transition: none;
  }

  .pane:hover,
	.pane:focus-within {
    transform: none;
  }
}

/* A centred header keeps its heading centred once that max-width applies. */

.block-title.text-center h2,
.text-center > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

/* The large step numeral in the process slider's text column (desktop). */

.process-step-numeral {
  margin-bottom: 1.25rem;
  font-family: Poppins, sans-serif;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(107 166 202 / 0.3);
}

.process-step-numeral::after {
  content: "";
  margin-top: 1.25rem;
  display: block;
  height: 1px;
  width: 3.5rem;
  background-color: rgb(40 55 74 / 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PRODUCT CONFIGURATOR (template-parts/modules/product-configurator.php)
 *
 * The one interactive moment on a product page, on the one dark ground on
 * the page. A soft radial light in the corner stands in for light falling on
 * glass; everything else is restraint, so the choices are what you look at.
 * ═══════════════════════════════════════════════════════════════════════════ */

.cfg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-top: 4rem;
  padding-bottom: 4rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .cfg {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.cfg::before {
  content: "";
  pointer-events: none;
  position: absolute;
  right: -10rem;
  top: -10rem;
  z-index: -10;
  width: 44rem;
  height: 44rem;
  border-radius: 9999px;
  opacity: 0.6;
  background: radial-gradient(closest-side, rgba(107, 166, 202, 0.28), rgba(107, 166, 202, 0) 70%);
}

.cfg-grid {
  display: grid;
  gap: 2rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .cfg-grid {
    gap: 1.25rem;
  }

  .process-steps-slider > .cfg-grid > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 992px) {
  .cfg-grid {
    grid-template-columns: 5fr 7fr;
    gap: 3.5rem;
  }
}

/* ── Preview: a drawn shower that redraws with every choice ──────────────── */

.cfg-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
}

@media (min-width: 992px) {
  .cfg-preview {
    position: sticky;
    top: 9rem;
    align-self: flex-start;
  }
}

.cfg-lead {
  margin-bottom: 0px;
  margin-top: 0.75rem;
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.7);
}

.cfg-scene {
  --edge: 4px;
  --glass-tint: rgba(150, 205, 182, 0.12);
  --glass-edge: #8fc4ab;
  position: relative;
  display: block;
  aspect-ratio: 4/4.4;
  width: 100%;
  overflow: hidden;
  background: #eceae5;
}

.cfg-scene[data-thick="12"] {
  --edge: 7px;
}

.cfg-scene span,
.cfg-scene i,
.cfg-scene b {
  position: absolute;
  display: block;
}

/* Back wall: large pale tiles with grout lines, and a soft light from above. */

.cfg-wall {
  inset: 0 0 12% 0;
  background:
		radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
		linear-gradient(to right, rgba(40, 55, 74, 0.09) 1px, transparent 1px) 0 0 / 25% 100%,
		linear-gradient(to bottom, rgba(40, 55, 74, 0.09) 1px, transparent 1px) 0 0 / 100% 16.66%,
		linear-gradient(160deg, #f4f2ee, #e2ded6);
}

.cfg-curb {
  inset: auto 0 0 0;
  height: 12%;
  background: linear-gradient(to bottom, #d9d4cb, #c8c2b7);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6);
}

/* Fittings take the finish: --hw is the finish's metal gradient. */

.cfg-head i {
  left: 70.4%;
  top: 0;
  width: 1.4%;
  height: 13%;
  background: var(--hw);
}

.cfg-head b {
  left: 63%;
  top: 12.5%;
  width: 16%;
  height: 2.6%;
  border-radius: 40% 40% 50% 50% / 60% 60% 100% 100%;
  background: var(--hw);
  box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.55);
}

/* A recessed niche with two bottles: something behind the glass for the
 * frosting and tint to act on. */

.cfg-niche {
  left: 14%;
  top: 34%;
  width: 20%;
  height: 17%;
  border-radius: 3px;
  background: linear-gradient(to bottom, #d9d4cb, #e6e2db);
  box-shadow: inset 0 6px 10px -4px rgba(40, 55, 74, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

.cfg-niche i,
.cfg-niche b {
  bottom: 8%;
  border-radius: 4px 4px 2px 2px;
}

.cfg-niche i {
  left: 22%;
  width: 18%;
  height: 62%;
  background: linear-gradient(90deg, #6ba6ca, #8fbfdc 40%, #5a92b4);
}

.cfg-niche b {
  left: 50%;
  width: 22%;
  height: 48%;
  background: linear-gradient(90deg, #e9e2d3, #fbf8f1 40%, #d8d0bf);
}

.cfg-valve {
  left: 63%;
  top: 46%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hw);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.cfg-valve i {
  left: 40%;
  top: -60%;
  width: 20%;
  height: 90%;
  border-radius: 99px;
  background: var(--hw);
}

/* Glass: tint over the wall behind it, a reflection, and the edge colour
 * that tells clear from low-iron at a glance. */

.cfg-pane {
  top: 6%;
  bottom: 12%;
  background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.2) 56%, rgba(255, 255, 255, 0) 64%),
		var(--glass-tint);
  border-left: var(--edge) solid var(--glass-edge);
  border-right: var(--edge) solid var(--glass-edge);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 18px 30px -24px rgba(16, 28, 45, 0.6);
  transition: background-color 0.4s, border-color 0.4s, border-width 0.3s, -webkit-backdrop-filter 0.4s;
  transition: background-color 0.4s, border-color 0.4s, border-width 0.3s, backdrop-filter 0.4s;
  transition: background-color 0.4s, border-color 0.4s, border-width 0.3s, backdrop-filter 0.4s, -webkit-backdrop-filter 0.4s;
}

.cfg-pane--panel {
  left: 6%;
  width: 40%;
}

.cfg-pane--door {
  left: 47.5%;
  width: 46%;
}

.cfg-scene[data-glass="low-iron"] {
  --glass-tint: rgba(255, 255, 255, 0.05);
  --glass-edge: #e3eef0;
}

.cfg-scene[data-glass="frosted"] {
  --glass-tint: rgba(250, 252, 253, 0.55);
  --glass-edge: #f2f6f7;
}

.cfg-scene[data-glass="frosted"] .cfg-pane {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.cfg-scene[data-glass="light-tint"] {
  --glass-tint: rgba(74, 70, 66, 0.3);
  --glass-edge: #77726c;
}

/* Hinges join the door to the panel; clamps or a channel hold the panel. */

.cfg-hinge {
  left: calc(-1 * var(--edge) - 7%);
  width: 14%;
  height: 6.5%;
  border-radius: 3px;
  background: var(--hw);
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.45);
}

.cfg-hinge--t {
  top: 9%;
}

.cfg-hinge--b {
  bottom: 9%;
}

.cfg-clamp {
  width: 9%;
  height: 4.5%;
  border-radius: 2px;
  background: var(--hw);
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.45);
}

.cfg-clamp--w1 {
  left: calc(-1 * var(--edge) - 4%);
  top: 18%;
}

.cfg-clamp--w2 {
  left: calc(-1 * var(--edge) - 4%);
  bottom: 18%;
}

.cfg-clamp--b {
  left: 40%;
  bottom: -2%;
  width: 14%;
  height: 3.5%;
}

.cfg-channel {
  background: var(--hw);
  opacity: 0;
  transition: opacity 0.3s;
}

.cfg-channel--w {
  left: calc(-1 * var(--edge) - 3%);
  top: 0;
  bottom: 0;
  width: 3%;
}

.cfg-channel--b {
  left: calc(-1 * var(--edge));
  right: calc(-1 * var(--edge));
  bottom: -2.2%;
  height: 2.6%;
}

.cfg-scene[data-fix="channel"] .cfg-clamp {
  opacity: 0;
}

.cfg-scene[data-fix="channel"] .cfg-channel {
  opacity: 1;
}

.cfg-clamp {
  transition: opacity 0.3s;
}

/* The handle, drawn in the chosen style. */

.cfg-handle {
  right: 7%;
  top: 34%;
  width: 12%;
  height: 30%;
}

.cfg-handle i {
  background: var(--hw);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}

.cfg-bar {
  right: 0;
  top: 0;
  bottom: 0;
  width: 34%;
  border-radius: 99px;
}

.cfg-bar--2 {
  display: none !important;
}

.cfg-post {
  left: 6%;
  width: 64%;
  height: 7%;
  border-radius: 2px;
}

.cfg-post--t {
  top: 9%;
}

.cfg-post--b {
  bottom: 9%;
}

.cfg-scene[data-handle="ladder"] .cfg-handle {
  height: 40%;
  top: 28%;
}

.cfg-scene[data-handle="ladder"] .cfg-bar {
  width: 22%;
}

.cfg-scene[data-handle="ladder"] .cfg-bar--2 {
  display: block !important;
  right: 52%;
}

.cfg-scene[data-handle="ladder"] .cfg-post {
  left: 26%;
  width: 56%;
}

.cfg-scene[data-handle="square"] .cfg-bar {
  border-radius: 2px;
  width: 38%;
}

.cfg-scene[data-handle="mitered"] .cfg-bar {
  border-radius: 1px;
  width: 36%;
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 96%);
}

/* Traditional and antique are too ornate for bars and posts, so each is a
   silhouette traced from the client's photo, filled with the finish. The
   traditional is a loop turned like a baluster; the antique is two slender
   bars with finials and ringed spindle posts. */

.cfg-handle::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  background: var(--hw);
  -webkit-mask: var(--hshape) right center / contain no-repeat;
  mask: var(--hshape) right center / contain no-repeat;
}

.cfg-scene[data-handle="traditional"] .cfg-handle,
.cfg-scene[data-handle="antique"] .cfg-handle {
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.4));
}

.cfg-scene[data-handle="traditional"] .cfg-handle i,
.cfg-scene[data-handle="antique"] .cfg-handle i {
  display: none;
}

.cfg-scene[data-handle="traditional"] .cfg-handle::after,
.cfg-scene[data-handle="antique"] .cfg-handle::after {
  display: block;
}

.cfg-scene[data-handle="traditional"] .cfg-handle {
  --hshape: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 25 100%22%3E %3Cpath d=%22M4 9 H14 Q20.5 9 20.5 17%22 fill=%22none%22 stroke=%22black%22 stroke-width=%224.2%22 stroke-linecap=%22round%22/%3E %3Cpath d=%22M4 91 H14 Q20.5 91 20.5 83%22 fill=%22none%22 stroke=%22black%22 stroke-width=%224.2%22 stroke-linecap=%22round%22/%3E %3Cpath fill=%22black%22 d=%22M22.50 16.00 L22.50 16.76 L22.50 17.51 L22.50 18.27 L22.50 19.02 L22.51 19.78 L22.51 20.53 L22.53 21.29 L22.59 22.04 L22.94 22.80 L23.64 23.56 L23.80 24.31 L23.26 25.07 L23.00 25.82 L23.09 26.58 L23.30 27.33 L23.54 28.09 L23.80 28.84 L24.07 29.60 L24.33 30.36 L24.54 31.11 L24.70 31.87 L24.79 32.62 L24.79 33.38 L24.70 34.13 L24.54 34.89 L24.33 35.64 L24.07 36.40 L23.80 37.16 L23.53 37.91 L23.29 38.67 L23.08 39.42 L22.89 40.18 L22.72 40.93 L22.57 41.69 L22.43 42.44 L22.29 43.20 L22.19 43.96 L22.13 44.71 L22.12 45.47 L22.17 46.22 L22.25 46.98 L22.38 47.73 L22.68 48.49 L23.22 49.24 L23.55 50.00 L23.22 50.76 L22.68 51.51 L22.38 52.27 L22.25 53.02 L22.17 53.78 L22.12 54.53 L22.13 55.29 L22.19 56.04 L22.29 56.80 L22.43 57.56 L22.57 58.31 L22.72 59.07 L22.89 59.82 L23.08 60.58 L23.29 61.33 L23.53 62.09 L23.80 62.84 L24.07 63.60 L24.33 64.36 L24.54 65.11 L24.70 65.87 L24.79 66.62 L24.79 67.38 L24.70 68.13 L24.54 68.89 L24.33 69.64 L24.07 70.40 L23.80 71.16 L23.54 71.91 L23.30 72.67 L23.09 73.42 L23.00 74.18 L23.26 74.93 L23.80 75.69 L23.64 76.44 L22.94 77.20 L22.59 77.96 L22.53 78.71 L22.51 79.47 L22.51 80.22 L22.50 80.98 L22.50 81.73 L22.50 82.49 L22.50 83.24 L22.50 84.00 L18.50 84.00 L18.50 83.24 L18.50 82.49 L18.50 81.73 L18.50 80.98 L18.49 80.22 L18.49 79.47 L18.47 78.71 L18.41 77.96 L18.06 77.20 L17.36 76.44 L17.20 75.69 L17.74 74.93 L18.00 74.18 L17.91 73.42 L17.70 72.67 L17.46 71.91 L17.20 71.16 L16.93 70.40 L16.67 69.64 L16.46 68.89 L16.30 68.13 L16.21 67.38 L16.21 66.62 L16.30 65.87 L16.46 65.11 L16.67 64.36 L16.93 63.60 L17.20 62.84 L17.47 62.09 L17.71 61.33 L17.92 60.58 L18.11 59.82 L18.28 59.07 L18.43 58.31 L18.57 57.56 L18.71 56.80 L18.81 56.04 L18.87 55.29 L18.88 54.53 L18.83 53.78 L18.75 53.02 L18.62 52.27 L18.32 51.51 L17.78 50.76 L17.45 50.00 L17.78 49.24 L18.32 48.49 L18.62 47.73 L18.75 46.98 L18.83 46.22 L18.88 45.47 L18.87 44.71 L18.81 43.96 L18.71 43.20 L18.57 42.44 L18.43 41.69 L18.28 40.93 L18.11 40.18 L17.92 39.42 L17.71 38.67 L17.47 37.91 L17.20 37.16 L16.93 36.40 L16.67 35.64 L16.46 34.89 L16.30 34.13 L16.21 33.38 L16.21 32.62 L16.30 31.87 L16.46 31.11 L16.67 30.36 L16.93 29.60 L17.20 28.84 L17.46 28.09 L17.70 27.33 L17.91 26.58 L18.00 25.82 L17.74 25.07 L17.20 24.31 L17.36 23.56 L18.06 22.80 L18.41 22.04 L18.47 21.29 L18.49 20.53 L18.49 19.78 L18.50 19.02 L18.50 18.27 L18.50 17.51 L18.50 16.76 L18.50 16.00Z%22/%3E %3Crect fill=%22black%22 x=%221%22 y=%225.5%22 width=%224%22 height=%227%22 rx=%221.2%22/%3E%3Crect fill=%22black%22 x=%221%22 y=%2287.5%22 width=%224%22 height=%227%22 rx=%221.2%22/%3E %3Crect fill=%22black%22 x=%228%22 y=%226.3%22 width=%221.8%22 height=%225.4%22 rx=%22.8%22/%3E%3Crect fill=%22black%22 x=%228%22 y=%2288.3%22 width=%221.8%22 height=%225.4%22 rx=%22.8%22/%3E %3C/svg%3E');
}

.cfg-scene[data-handle="antique"] .cfg-handle {
  --hshape: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 19 100%22%3E %3Cpath fill=%22black%22 d=%22M4.85 8.00 L4.85 8.93 L4.85 9.87 L4.85 10.80 L4.85 11.73 L4.85 12.67 L4.85 13.60 L4.85 14.53 L4.86 15.47 L4.91 16.40 L5.06 17.33 L5.33 18.27 L5.64 19.20 L5.75 20.13 L5.56 21.07 L5.24 22.00 L5.00 22.93 L4.89 23.87 L4.86 24.80 L4.85 25.73 L4.85 26.67 L4.85 27.60 L4.85 28.53 L4.85 29.47 L4.85 30.40 L4.85 31.33 L4.85 32.27 L4.85 33.20 L4.85 34.13 L4.85 35.07 L4.85 36.00 L4.85 36.93 L4.85 37.87 L4.85 38.80 L4.85 39.73 L4.85 40.67 L4.85 41.60 L4.85 42.53 L4.85 43.47 L4.85 44.40 L4.85 45.33 L4.85 46.27 L4.85 47.20 L4.85 48.13 L4.85 49.07 L4.85 50.00 L4.85 50.93 L4.85 51.87 L4.85 52.80 L4.85 53.73 L4.85 54.67 L4.85 55.60 L4.85 56.53 L4.85 57.47 L4.85 58.40 L4.85 59.33 L4.85 60.27 L4.85 61.20 L4.85 62.13 L4.85 63.07 L4.85 64.00 L4.85 64.93 L4.85 65.87 L4.85 66.80 L4.85 67.73 L4.85 68.67 L4.85 69.60 L4.85 70.53 L4.85 71.47 L4.85 72.40 L4.85 73.33 L4.85 74.27 L4.86 75.20 L4.89 76.13 L5.00 77.07 L5.24 78.00 L5.56 78.93 L5.75 79.87 L5.64 80.80 L5.33 81.73 L5.06 82.67 L4.91 83.60 L4.86 84.53 L4.85 85.47 L4.85 86.40 L4.85 87.33 L4.85 88.27 L4.85 89.20 L4.85 90.13 L4.85 91.07 L4.85 92.00 L2.15 92.00 L2.15 91.07 L2.15 90.13 L2.15 89.20 L2.15 88.27 L2.15 87.33 L2.15 86.40 L2.15 85.47 L2.14 84.53 L2.09 83.60 L1.94 82.67 L1.67 81.73 L1.36 80.80 L1.25 79.87 L1.44 78.93 L1.76 78.00 L2.00 77.07 L2.11 76.13 L2.14 75.20 L2.15 74.27 L2.15 73.33 L2.15 72.40 L2.15 71.47 L2.15 70.53 L2.15 69.60 L2.15 68.67 L2.15 67.73 L2.15 66.80 L2.15 65.87 L2.15 64.93 L2.15 64.00 L2.15 63.07 L2.15 62.13 L2.15 61.20 L2.15 60.27 L2.15 59.33 L2.15 58.40 L2.15 57.47 L2.15 56.53 L2.15 55.60 L2.15 54.67 L2.15 53.73 L2.15 52.80 L2.15 51.87 L2.15 50.93 L2.15 50.00 L2.15 49.07 L2.15 48.13 L2.15 47.20 L2.15 46.27 L2.15 45.33 L2.15 44.40 L2.15 43.47 L2.15 42.53 L2.15 41.60 L2.15 40.67 L2.15 39.73 L2.15 38.80 L2.15 37.87 L2.15 36.93 L2.15 36.00 L2.15 35.07 L2.15 34.13 L2.15 33.20 L2.15 32.27 L2.15 31.33 L2.15 30.40 L2.15 29.47 L2.15 28.53 L2.15 27.60 L2.15 26.67 L2.15 25.73 L2.14 24.80 L2.11 23.87 L2.00 22.93 L1.76 22.00 L1.44 21.07 L1.25 20.13 L1.36 19.20 L1.67 18.27 L1.94 17.33 L2.09 16.40 L2.14 15.47 L2.15 14.53 L2.15 13.60 L2.15 12.67 L2.15 11.73 L2.15 10.80 L2.15 9.87 L2.15 8.93 L2.15 8.00Z%22/%3E%3Cpath fill=%22black%22 d=%22M16.85 8.00 L16.85 8.93 L16.85 9.87 L16.85 10.80 L16.85 11.73 L16.85 12.67 L16.85 13.60 L16.85 14.53 L16.86 15.47 L16.91 16.40 L17.06 17.33 L17.33 18.27 L17.64 19.20 L17.75 20.13 L17.56 21.07 L17.24 22.00 L17.00 22.93 L16.89 23.87 L16.86 24.80 L16.85 25.73 L16.85 26.67 L16.85 27.60 L16.85 28.53 L16.85 29.47 L16.85 30.40 L16.85 31.33 L16.85 32.27 L16.85 33.20 L16.85 34.13 L16.85 35.07 L16.85 36.00 L16.85 36.93 L16.85 37.87 L16.85 38.80 L16.85 39.73 L16.85 40.67 L16.85 41.60 L16.85 42.53 L16.85 43.47 L16.85 44.40 L16.85 45.33 L16.85 46.27 L16.85 47.20 L16.85 48.13 L16.85 49.07 L16.85 50.00 L16.85 50.93 L16.85 51.87 L16.85 52.80 L16.85 53.73 L16.85 54.67 L16.85 55.60 L16.85 56.53 L16.85 57.47 L16.85 58.40 L16.85 59.33 L16.85 60.27 L16.85 61.20 L16.85 62.13 L16.85 63.07 L16.85 64.00 L16.85 64.93 L16.85 65.87 L16.85 66.80 L16.85 67.73 L16.85 68.67 L16.85 69.60 L16.85 70.53 L16.85 71.47 L16.85 72.40 L16.85 73.33 L16.85 74.27 L16.86 75.20 L16.89 76.13 L17.00 77.07 L17.24 78.00 L17.56 78.93 L17.75 79.87 L17.64 80.80 L17.33 81.73 L17.06 82.67 L16.91 83.60 L16.86 84.53 L16.85 85.47 L16.85 86.40 L16.85 87.33 L16.85 88.27 L16.85 89.20 L16.85 90.13 L16.85 91.07 L16.85 92.00 L14.15 92.00 L14.15 91.07 L14.15 90.13 L14.15 89.20 L14.15 88.27 L14.15 87.33 L14.15 86.40 L14.15 85.47 L14.14 84.53 L14.09 83.60 L13.94 82.67 L13.67 81.73 L13.36 80.80 L13.25 79.87 L13.44 78.93 L13.76 78.00 L14.00 77.07 L14.11 76.13 L14.14 75.20 L14.15 74.27 L14.15 73.33 L14.15 72.40 L14.15 71.47 L14.15 70.53 L14.15 69.60 L14.15 68.67 L14.15 67.73 L14.15 66.80 L14.15 65.87 L14.15 64.93 L14.15 64.00 L14.15 63.07 L14.15 62.13 L14.15 61.20 L14.15 60.27 L14.15 59.33 L14.15 58.40 L14.15 57.47 L14.15 56.53 L14.15 55.60 L14.15 54.67 L14.15 53.73 L14.15 52.80 L14.15 51.87 L14.15 50.93 L14.15 50.00 L14.15 49.07 L14.15 48.13 L14.15 47.20 L14.15 46.27 L14.15 45.33 L14.15 44.40 L14.15 43.47 L14.15 42.53 L14.15 41.60 L14.15 40.67 L14.15 39.73 L14.15 38.80 L14.15 37.87 L14.15 36.93 L14.15 36.00 L14.15 35.07 L14.15 34.13 L14.15 33.20 L14.15 32.27 L14.15 31.33 L14.15 30.40 L14.15 29.47 L14.15 28.53 L14.15 27.60 L14.15 26.67 L14.15 25.73 L14.14 24.80 L14.11 23.87 L14.00 22.93 L13.76 22.00 L13.44 21.07 L13.25 20.13 L13.36 19.20 L13.67 18.27 L13.94 17.33 L14.09 16.40 L14.14 15.47 L14.15 14.53 L14.15 13.60 L14.15 12.67 L14.15 11.73 L14.15 10.80 L14.15 9.87 L14.15 8.93 L14.15 8.00Z%22/%3E %3Crect fill=%22black%22 x=%222.6%22 y=%224.8%22 width=%221.8%22 height=%223.2%22/%3E%3Cellipse fill=%22black%22 cx=%223.5%22 cy=%224.2%22 rx=%222.2%22 ry=%220.9%22/%3E%3Cellipse fill=%22black%22 cx=%223.5%22 cy=%221.9000000000000004%22 rx=%221.9%22 ry=%222.3%22/%3E%3Crect fill=%22black%22 x=%2214.6%22 y=%224.8%22 width=%221.8%22 height=%223.2%22/%3E%3Cellipse fill=%22black%22 cx=%2215.5%22 cy=%224.2%22 rx=%222.2%22 ry=%220.9%22/%3E%3Cellipse fill=%22black%22 cx=%2215.5%22 cy=%221.9000000000000004%22 rx=%221.9%22 ry=%222.3%22/%3E%3Crect fill=%22black%22 x=%222.6%22 y=%2292%22 width=%221.8%22 height=%223.2%22/%3E%3Cellipse fill=%22black%22 cx=%223.5%22 cy=%2295.8%22 rx=%222.2%22 ry=%220.9%22/%3E%3Cellipse fill=%22black%22 cx=%223.5%22 cy=%2298.1%22 rx=%221.9%22 ry=%222.3%22/%3E%3Crect fill=%22black%22 x=%2214.6%22 y=%2292%22 width=%221.8%22 height=%223.2%22/%3E%3Cellipse fill=%22black%22 cx=%2215.5%22 cy=%2295.8%22 rx=%222.2%22 ry=%220.9%22/%3E%3Cellipse fill=%22black%22 cx=%2215.5%22 cy=%2298.1%22 rx=%221.9%22 ry=%222.3%22/%3E %3Crect fill=%22black%22 x=%223.5%22 y=%2219%22 width=%2212%22 height=%222%22 rx=%22.8%22/%3E%3Crect fill=%22black%22 x=%225.7%22 y=%2217.7%22 width=%221.2%22 height=%224.6%22 rx=%22.5%22/%3E%3Crect fill=%22black%22 x=%227.1000000000000005%22 y=%2217.7%22 width=%221.2%22 height=%224.6%22 rx=%22.5%22/%3E%3Crect fill=%22black%22 x=%2210.700000000000001%22 y=%2217.7%22 width=%221.2%22 height=%224.6%22 rx=%22.5%22/%3E%3Crect fill=%22black%22 x=%2212.1%22 y=%2217.7%22 width=%221.2%22 height=%224.6%22 rx=%22.5%22/%3E%3Cellipse fill=%22black%22 cx=%229.5%22 cy=%2220%22 rx=%221.7%22 ry=%222%22/%3E%3Crect fill=%22black%22 x=%223.5%22 y=%2279%22 width=%2212%22 height=%222%22 rx=%22.8%22/%3E%3Crect fill=%22black%22 x=%225.7%22 y=%2277.7%22 width=%221.2%22 height=%224.6%22 rx=%22.5%22/%3E%3Crect fill=%22black%22 x=%227.1000000000000005%22 y=%2277.7%22 width=%221.2%22 height=%224.6%22 rx=%22.5%22/%3E%3Crect fill=%22black%22 x=%2210.700000000000001%22 y=%2277.7%22 width=%221.2%22 height=%224.6%22 rx=%22.5%22/%3E%3Crect fill=%22black%22 x=%2212.1%22 y=%2277.7%22 width=%221.2%22 height=%224.6%22 rx=%22.5%22/%3E%3Cellipse fill=%22black%22 cx=%229.5%22 cy=%2280%22 rx=%221.7%22 ry=%222%22/%3E %3C/svg%3E');
  height: 40%;
  top: 28%;
}

.cfg-thick {
  left: calc(47.5% + 46% + 1.2%);
  top: 8%;
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.85);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transform: translateX(-100%);
}

/* A short pulse of light across the glass whenever a choice changes. */

.cfg-scene::after {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: -33.333333%;
  width: 25%;
  opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
}

.cfg-scene.is-changed::after {
  animation: cfg-glint 0.9s ease-out;
}

@keyframes cfg-glint {
  0% {
    transform: translateX(0);
    opacity: 0.9;
  }

  100% {
    transform: translateX(560%);
    opacity: 0;
  }
}

/* Under the drawing: the real photograph of the handle in that finish. */

.cfg-preview-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  padding: 1rem;
}

@media (min-width: 992px) {
  .cfg-preview-foot {
    padding: 1.25rem;
  }
}

.cfg-preview-plate {
  display: grid;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.375rem;
  --tw-shadow: 0 10px 20px -14px rgba(0,0,0,0.7);
  --tw-shadow-colored: 0 10px 20px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (max-width: 1023px) {
  .process-steps-slider > .cfg-preview-plate {
    gap: 1.25rem;
  }

  .process-steps-slider > .cfg-preview-plate > div:last-child {
    padding-left: 0.25rem;
  }
}

.cfg-preview-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.cfg-preview-text {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}

.cfg-preview-name {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cfg-preview-note {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.375;
  color: rgb(255 255 255 / 0.65);
}

button.cfg-closer {
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

button.cfg-closer:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* Finish chips: choose with the chip, magnify with the corner button. */

.cfg-swatch-wrap {
  position: relative;
}

.cfg-swatch-wrap > .cfg-swatch {
  width: 100%;
}

button.cfg-zoom {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  z-index: 1;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  cursor: pointer;
  place-items: center;
  border-radius: 9999px;
  border-width: 0px;
  background-color: rgb(40 55 74 / 0.9);
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 6px 12px -6px rgba(0,0,0,0.7);
  --tw-shadow-colored: 0 6px 12px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: background-color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > button.cfg-zoom {
    gap: 1.25rem;
  }

  .process-steps-slider > button.cfg-zoom > div:last-child {
    padding-left: 0.25rem;
  }
}

button.cfg-zoom:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

button.cfg-zoom svg {
  width: 0.875rem;
  height: 0.875rem;
}

.cfg-hint {
  margin-bottom: 0px;
  margin-top: 0.625rem;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.55);
}

.cfg-summary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

button.cfg-reset {
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.65);
  text-decoration-line: underline;
  text-decoration-color: rgb(255 255 255 / 0.3);
  text-underline-offset: 4px;
}

button.cfg-reset:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ── Choices ─────────────────────────────────────────────────────────────── */

.cfg-choices {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cfg-row {
  margin: 0px;
  min-width: 0px;
  border-width: 0px;
  padding: 0px;
}

.cfg-label {
  margin-bottom: 0.75rem;
  padding: 0px;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.55);
}

.cfg-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.cfg-chip {
  min-height: 44px;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.2);
  background-color: transparent;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.8);
  transition-property: background-color,color,border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.cfg-chip:hover {
  border-color: rgb(255 255 255 / 0.5);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.cfg-chip:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.cfg-chip.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 8px 24px -12px rgba(255,255,255,0.6);
  --tw-shadow-colored: 0 8px 24px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Finishes: a tile with the actual photograph, because a swatch of a
 * metal finish that is only its name is not a swatch. */

.cfg-options--swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .cfg-options--swatches {
    gap: 1.25rem;
  }

  .process-steps-slider > .cfg-options--swatches > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .cfg-options--swatches {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.cfg-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.04);
  padding: 0.5rem;
  padding-bottom: 0.625rem;
  text-align: center;
  transition-property: border-color,background-color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.block-title.cfg-swatch h2,.cfg-swatch > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.cfg-swatch:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(255 255 255 / 0.35);
}

.cfg-swatch:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.cfg-swatch img {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.375rem;
}

.cfg-swatch span {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25;
  color: rgb(255 255 255 / 0.7);
}

.cfg-swatch.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  background-color: rgb(107 166 202 / 0.15);
  --tw-shadow: 0 0 0 1px #6ba6ca;
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.cfg-swatch.is-on span {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ── The running spec ─────────────────────────────────────────────────────── */

.cfg-summary {
  margin-top: 0.5rem;
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  padding-top: 2rem;
}

.cfg-summary-label {
  margin-bottom: 0.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.cfg-summary-line {
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .cfg-summary-line {
    font-size: 1.375rem;
  }
}

.cfg-summary-line {
  text-wrap: balance;
}

.cfg-cta {
  width: 100%;
  justify-content: center;
}

@media (min-width: 576px) {
  .cfg-cta {
    width: auto;
  }
}

.cfg-summary-note {
  margin-bottom: 0px;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .cfg-swatch,
	.cfg-chip,
	.cfg-preview-img,
	.cfg-pane {
    transition: none;
  }

  .cfg-scene.is-changed::after {
    animation: none;
  }

  .cfg-swatch:hover {
    transform: none;
  }
}

/* Phones: a shorter drawing so the first choice is within reach. */

@media (max-width: 1023px) {
  .cfg-scene {
    aspect-ratio: 16 / 12;
  }
}

/* Numbered points in a split section's text column (style pages). */

.split-points {
  margin: 0px;
  margin-top: 2rem;
  list-style-type: none;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding: 0px;
}

.split-point {
  display: flex;
  gap: 1.25rem;
  border-bottom-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.split-point-num {
  width: 2rem;
  flex-shrink: 0;
  padding-top: 0.125rem;
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.split-point-title {
  margin-bottom: 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.split-point-text {
  margin-bottom: 0px;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.75);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PROJECT GALLERY (gallery-preview-strip)
 * One project large, the rest beside it; captions at rest; opens in place.
 * ═══════════════════════════════════════════════════════════════════════════ */

.projects {
  display: grid;
  gap: 1rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .projects {
    gap: 1.25rem;
  }

  .process-steps-slider > .projects > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .projects {
    gap: 1.25rem;
  }
}

/* Three or more: the first project takes the left two-thirds at full
 * height, the next two stack beside it. A mosaic reads as a portfolio; three
 * equal tiles read as a row of thumbnails. */

@media (min-width: 992px) {
  .projects--mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(30rem, 42vw, 38rem);
  }

  .projects--mosaic > .project:first-child {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
  }

  .projects--mosaic > .project:nth-child(n + 4) {
    display: none;
  }
}

.project {
  position: relative;
  display: block;
  min-height: 16rem;
  overflow: hidden;
  border-radius: 18px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
}

.project:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 4px;
  outline-color: #6ba6ca;
}

.project-img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* A scrim only where the caption is, so the photograph is the subject. */

.project::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 66.666667%;
  background: linear-gradient(to top, rgba(27, 37, 51, 0.88), rgba(27, 37, 51, 0));
}

.project-caption {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (min-width: 992px) {
  .project-caption {
    left: 1.75rem;
    right: 1.75rem;
    bottom: 1.75rem;
  }
}

.project-style {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .project-style {
    font-size: 1.25rem;
  }

  .projects--mosaic > .project:first-child .project-style {
    font-size: 1.75rem;
  }
}

.project-city {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.8);
}

.project-city svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* The expand mark appears on hover, top right, the way a photo viewer
 * signals that a picture opens. */

.project-zoom {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 1;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.15);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0;
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .project-zoom {
    gap: 1.25rem;
  }

  .process-steps-slider > .project-zoom > div:last-child {
    padding-left: 0.25rem;
  }
}

.project-zoom svg {
  width: 1rem;
  height: 1rem;
}

.project:hover .project-img,
.project:focus-visible .project-img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.project:hover .project-zoom,
.project:focus-visible .project-zoom {
  opacity: 1;
}

.projects-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.projects-all:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.projects-all span {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.projects-all:hover span {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Phones: a swipeable row, each card most of the screen wide so the next one
 * peeks in and says "there is more". */

@media (max-width: 575px) {
  div.projects {
    margin-left: -1rem;
    margin-right: -1rem;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  div.projects::-webkit-scrollbar {
    display: none;
  }

  .projects > .project {
    min-height: 19rem;
    width: 82%;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-img,
	.projects-all span {
    transition: none;
  }

  .project:hover .project-img {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Estimate band (footer-global-form): what happens next, and the number.
 * ═══════════════════════════════════════════════════════════════════════════ */

.next-steps {
  position: relative;
  margin: 0px;
  margin-top: 0.5rem;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: 0px;
  padding: 0px;
}

/* The thread that joins the three steps into one sequence. */

.next-steps::before {
  content: "";
  position: absolute;
  bottom: 1.5rem;
  left: 1.0625rem;
  top: 1.5rem;
  width: 1px;
  background-color: rgb(40 55 74 / 0.15);
}

.next-step {
  position: relative;
  margin: 0px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.next-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-family: Poppins, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 6px 14px -8px rgba(16,28,45,0.4);
  --tw-shadow-colored: 0 6px 14px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (max-width: 1023px) {
  .process-steps-slider > .next-step-num {
    gap: 1.25rem;
  }

  .process-steps-slider > .next-step-num > div:last-child {
    padding-left: 0.25rem;
  }
}

.next-step:first-child .next-step-num {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.next-step-body {
  display: flex;
  flex-direction: column;
  padding-top: 0.25rem;
}

.next-step-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.next-step-text {
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.7);
}

.band-phone {
  margin-top: 0.75rem;
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
  gap: 0.25rem;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  padding-top: 1.5rem;
  text-decoration-line: none;
}

.band-phone-label {
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.band-phone-number {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: Poppins, sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 992px) {
  .band-phone-number {
    font-size: 2.25rem;
  }
}

.band-phone-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.band-phone:hover .band-phone-number {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.band-phone:hover .band-phone-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.band-phone-hours {
  font-size: 0.875rem;
  color: rgb(40 55 74 / 0.6);
}

/* These links carry their own hover treatment, so the sitewide animated
 * underline (a zero-specificity :where() rule) is switched off for them:
 * on a photograph tile or a two-line phone block it drew a line across the
 * bottom of the whole element. */

.band-phone,
.project,
.projects-all,
.faq-help-link {
  background-image: none;
}

/* The heading and help card stay in view while a long list of questions
 * scrolls past, so the way to ask a real person is never a scroll away. */

@media (min-width: 992px) {
  .faq-aside {
    position: sticky;
    top: 9rem;
    align-self: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Benefit list (content-image-split icon list; the homepage "Direct
 * Difference").
 *
 * Four pale-blue filled boxes, each with a sky-blue icon square, read as a
 * stack of form fields rather than four reasons to choose a company. Now a
 * hairline list with a solid navy badge per reason: the same quiet device as
 * the numbered points elsewhere, so the site has one way of listing things.
 *
 * Element-qualified throughout: the markup carries rounded-lg, border,
 * bg-[#e1edf4], p-4 and size-[70px] as utilities.
 * ═══════════════════════════════════════════════════════════════════════════ */

ul.benefit-list {
  margin: 0px;
  list-style-type: none;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding: 0px;
}

li.benefit-row {
  margin: 0px;
  align-items: flex-start;
  gap: 1.25rem;
  border-radius: 0px;
  border-width: 0px;
  border-bottom-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

span.benefit-row-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 10px 22px -14px rgba(16,28,45,0.7);
  --tw-shadow-colored: 0 10px 22px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

span.benefit-row-icon img {
  width: 1.5rem;
  height: 1.5rem;
}

li.benefit-row p:first-child {
  font-size: 1.0625rem;
}

li.benefit-row p + p {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.75);
}

/* FAQ collapse: questions past the first few wait behind one button. */

.faq-extra {
  display: none;
}

[data-faq-scope].is-expanded .faq-extra {
  display: block;
}

.faq-more {
  margin-top: 1.25rem;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: border-color,color,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.faq-more:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.faq-more:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.faq-more::after {
  content: "";
  width: 7px;
  height: 7px;
  --tw-translate-y: -0.125rem;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-color: currentColor;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.faq-more[aria-expanded="true"]::after {
  --tw-translate-y: 0.125rem;
  --tw-rotate: -135deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* A photograph with no caption needs no scrim darkening its lower half. */

.project--bare::after {
  content: none;
}

/* A city on its own reads as the caption, so it gets the caption's weight. */

.project-caption > .project-city:first-child {
  font-size: 1.0625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/*
 * The estimate band on wide screens, compact so the form can overhang.
 *
 * The form card is meant to hang well into the footer (it is held in normal
 * flow with a negative bottom margin, see footer-global-form.php). That only
 * works while the copy column is shorter than the card. The three steps and
 * the phone block made the copy column 636px against a 722px card, and the
 * card stopped 10px short of the footer, leaving a band of empty pale blue.
 *
 * From xl, where the overhang applies, the steps sit side by side, the phone
 * is a single row, and the band's bottom padding drops, so the card hangs
 * into the footer again. Below xl the form stacks under the copy and none of
 * this applies.
 */

@media (min-width: 1200px) {
  section#ss-global-form {
    padding-bottom: 2.5rem;
  }

  .next-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  @media (max-width: 1023px) {
    .process-steps-slider > .next-steps {
      gap: 1.25rem;
    }

    .process-steps-slider > .next-steps > div:last-child {
      padding-left: 0.25rem;
    }
  }

  .next-steps::before {
    bottom: auto;
    left: 1.125rem;
    right: calc(33.333% - 0.5rem);
    top: 1.125rem;
    height: 1px;
    width: auto;
  }

  .next-step {
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .next-step-body {
    padding-top: 0px;
  }

  .next-step-title {
    font-size: 1rem;
  }

  .next-step-text {
    font-size: 0.875rem;
  }

  .band-phone {
    margin-top: 0.25rem;
    display: grid;
    align-items: center;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.125rem;
    padding-top: 1.25rem;
  }

  @media (max-width: 1023px) {
    .process-steps-slider > .band-phone {
      gap: 1.25rem;
    }

    .process-steps-slider > .band-phone > div:last-child {
      padding-left: 0.25rem;
    }
  }

  .band-phone {
    grid-template-columns: auto auto;
    grid-template-areas: "number label" "number hours";
    justify-content: start;
  }

  .band-phone-number {
    grid-area: number;
    font-size: 2rem;
  }

  .band-phone-label {
    grid-area: label;
    align-self: flex-end;
  }

  .band-phone-hours {
    grid-area: hours;
    align-self: flex-start;
  }
}

/* The base stylesheet gives every ol/ul `space-y`, a top margin on each item
 * after the first. These lists space themselves (hairlines, padding, grid
 * gaps), so that margin only misaligns them: in the estimate band's
 * three-across steps it dropped steps two and three 16px below step one.
 * Element-and-class selectors to outrank the base rule's sibling selector. */

/* Matching the base rule's own shape so this outranks it: the base selector
 * is `ol > :not([hidden]) ~ :not([hidden])`, which is more specific than a
 * plain `ol.next-steps > li`. The first version of this override used that
 * plainer selector, deployed, and changed nothing; measured afterwards. */

ol.next-steps > :not([hidden]) ~ :not([hidden]),
ol.split-points > :not([hidden]) ~ :not([hidden]),
ul.benefit-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

@media (min-width: 1200px) {
  /* The thread runs from the first number to the third. */

  .next-steps::before {
    right: calc(33.333% - 2.125rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * REVIEWS (testimonial-slider) — every review in a row, on a dark band.
 * ═══════════════════════════════════════════════════════════════════════════ */

.reviews {
  position: relative;
  isolation: isolate;
  margin-top: 2.25rem;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-top: 4rem;
  padding-bottom: 4rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  .reviews {
    margin-top: 3rem;
  }
}

@media (min-width: 992px) {
  .reviews {
    margin-top: 4rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1200px) {
  .reviews {
    margin-top: 5rem;
  }
}

@media (min-width: 1310px) {
  .reviews {
    margin-top: 6rem;
  }
}

/* The section photo, if one is set, as texture only. */

.reviews-texture {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: -10;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.10;
  mix-blend-mode: luminosity;
}

.reviews::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -10rem;
  top: -12rem;
  z-index: -10;
  width: 40rem;
  height: 40rem;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(107, 166, 202, 0.22), rgba(107, 166, 202, 0) 70%);
}

.reviews-head {
  margin-bottom: 2.5rem;
  display: grid;
  align-items: flex-end;
  gap: 1.5rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .reviews-head {
    gap: 1.25rem;
  }

  .process-steps-slider > .reviews-head > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 992px) {
  .reviews-head {
    margin-bottom: 3rem;
    grid-template-columns: 1fr auto auto;
    gap: 2.5rem;
  }
}

.reviews-head .block-title h2 {
  margin-bottom: 0px;
}

.reviews-score {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reviews-score-num {
  font-family: Poppins, sans-serif;
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.reviews-score-meta {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.reviews-score-note {
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.6);
}

.reviews-nav {
  display: none;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  .reviews-nav {
    display: flex;
  }
}

.reviews-arrow {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: background-color,border-color,color,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .reviews-arrow {
    gap: 1.25rem;
  }

  .process-steps-slider > .reviews-arrow > div:last-child {
    padding-left: 0.25rem;
  }
}

.reviews-arrow:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.reviews-arrow:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.reviews-arrow:disabled {
  pointer-events: none;
  opacity: 0.3;
}

.reviews-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The row. Native scrolling is the mechanism; the arrows only nudge it, so
 * it works by swipe, trackpad, keyboard and with scripts off. */

.reviews-track {
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
}

.reviews-track:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.reviews-track {
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  margin: 0px;
  display: flex;
  width: 86%;
  flex-shrink: 0;
  flex-direction: column;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 24px 50px -30px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 24px 50px -30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 576px) {
  .review-card {
    width: 60%;
  }
}

@media (min-width: 992px) {
  .review-card {
    width: calc((100% - 2.5rem) / 3);
    padding: 2rem;
  }
}

.review-card {
  scroll-snap-align: start;
}

.review-card-top {
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.review-stars {
  display: inline-flex;
  gap: 0.125rem;
}

.review-stars svg {
  width: 1.125rem;
  height: 1.125rem;
}

.review-stars .is-on {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.review-stars .is-off {
  color: rgb(40 55 74 / 0.2);
}

.review-stars--lg svg {
  width: 1.25rem;
  height: 1.25rem;
}

.reviews-score .review-stars .is-off {
  color: rgb(255 255 255 / 0.25);
}

.review-quote {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: rgb(107 166 202 / 0.25);
}

.review-title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.review-body {
  margin: 0px;
  flex: 1 1 0%;
  border-width: 0px;
  padding: 0px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.75);
}

.review-body p:last-child {
  margin-bottom: 0px;
}

.review-author {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding-top: 1.25rem;
}

.review-avatar {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  -o-object-fit: cover;
     object-fit: cover;
  font-family: Inter, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .process-steps-slider > .review-avatar {
    gap: 1.25rem;
  }

  .process-steps-slider > .review-avatar > div:last-child {
    padding-left: 0.25rem;
  }
}

.review-who {
  display: flex;
  flex-direction: column;
}

.review-name {
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.review-date {
  font-size: 0.8125rem;
  color: rgb(40 55 74 / 0.55);
}

/* The review quote is a blockquote, and the base stylesheet gives every
 * blockquote a pale-blue panel. Inside a white card that read as a text
 * box pasted onto the card. */

.review-card blockquote.review-body {
  background: none;
  border-radius: 0px;
  border-width: 0px;
  padding: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.review-card blockquote.review-body::before,
.review-card blockquote.review-body::after {
  content: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LOCAL AREA (location pages): crew, neighbours, local questions.
 * ═══════════════════════════════════════════════════════════════════════════ */

.local-grid {
  display: grid;
  gap: 3rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .local-grid {
    gap: 1.25rem;
  }

  .process-steps-slider > .local-grid > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 992px) {
  .local-grid {
    grid-template-columns: 5fr 6fr;
    gap: 4rem;
  }
}

.local-intro {
  margin-bottom: 0px;
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.75);
}

.local-crew {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border-radius: 18px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.local-crew-pin {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  background-color: rgb(107 166 202 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .process-steps-slider > .local-crew-pin {
    gap: 1.25rem;
  }

  .process-steps-slider > .local-crew-pin > div:last-child {
    padding-left: 0.25rem;
  }
}

.local-crew-pin svg {
  width: 1.25rem;
  height: 1.25rem;
}

.local-crew-body {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}

.local-crew-label {
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(255 255 255 / 0.55);
}

.local-crew-value {
  font-size: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.local-crew-call {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.local-crew-call:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.local-crew-call {
  background-image: none;
}

.local-near-label {
  margin-bottom: 0.75rem;
  margin-top: 2rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(40 55 74 / 0.55);
}

ul.local-near {
  margin: 0px;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0px;
}

ul.local-near > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

.local-near a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: border-color,background-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.local-near a:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.local-near a {
  background-image: none;
}

.local-near a.is-county {
  border-color: rgb(107 166 202 / 0.4);
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.local-faq-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* Style tiles (service-card-grid "pills" style, on the location pages). */

.style-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .style-tiles {
    gap: 1.25rem;
  }

  .process-steps-slider > .style-tiles > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .style-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .style-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.style-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,box-shadow,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.style-tile:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(40 55 74 / 0.14);
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 26px 44px -26px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 26px 44px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.style-tile:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.style-tile {
  background-image: none;
}

.style-tile-media {
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
}

.style-tile-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.style-tile:hover .style-tile-img {
  --tw-scale-x: 1.06;
  --tw-scale-y: 1.06;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.style-tile-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .style-tile-name {
    font-size: 1rem;
  }
}

.style-tile-name svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.style-tile:hover .style-tile-name svg {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Phones: the location and service blocks that still stacked full cards.
 *
 * The "why choose us" tiles were about 200px each, the eight style tiles ran
 * four rows deep, and the three process steps were three tall cards. Rows
 * with the icon or number beside the text say the same thing in a third of
 * the height, and the styles become a swipeable row.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575px) {
  /* Feature tiles: icon beside the words. */

  div.feature-tile {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: flex-start;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.25rem;
    padding: 1rem;
  }

  @media (max-width: 1023px) {
    .process-steps-slider > div.feature-tile {
      gap: 1.25rem;
    }

    .process-steps-slider > div.feature-tile > div:last-child {
      padding-left: 0.25rem;
    }
  }

  img.feature-tile-icon {
    margin-bottom: 0px;
    width: 2.5rem;
    height: 2.5rem;
    grid-row: span 2;
  }

  p.feature-tile-title {
    margin-bottom: 0px;
    font-size: 1.0625rem;
    line-height: 1.375;
  }

  p.feature-tile-text {
    font-size: 0.875rem;
    line-height: 1.375;
  }

  /* Process steps (grid style): the number badge beside the words. */

  div.pane:has(> .feature-tile-number) {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    align-items: flex-start;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.25rem;
    padding: 1rem;
  }

  @media (max-width: 1023px) {
    .process-steps-slider > div.pane:has(> .feature-tile-number) {
      gap: 1.25rem;
    }

    .process-steps-slider > div.pane:has(> .feature-tile-number) > div:last-child {
      padding-left: 0.25rem;
    }
  }

  div.pane > .feature-tile-number {
    margin-bottom: 0px;
    width: 2.75rem;
    height: 2.75rem;
    gap: 0px;
    border-radius: 0.75rem;
    grid-row: span 2;
  }

  div.pane > .feature-tile-number span {
    font-size: 1.125rem;
  }

  div.pane > .feature-tile-number small {
    display: none;
  }

  /* Style tiles: a swipeable row with the next tile peeking in. */

  div.style-tiles {
    margin-left: -1rem;
    margin-right: -1rem;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  div.style-tiles::-webkit-scrollbar {
    display: none;
  }

  div.style-tiles > .style-tile {
    width: 44%;
    flex-shrink: 0;
  }

  .style-tile-name {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SERVICE-AREA MAP (map-coverage-panel + js/service-map.js)
 * ═══════════════════════════════════════════════════════════════════════════ */

.svc-map {
  position: relative;
  isolation: isolate;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
}

.svc-map-canvas {
  position: relative;
  z-index: 0;
  height: 22rem;
  width: 100%;
  background-size: cover;
  background-position: center;
}

@media (min-width: 576px) {
  .svc-map-canvas {
    height: 26rem;
  }
}

/* The tiles, desaturated and cooled so the map sits in the site's palette
 * rather than shouting OpenStreetMap's own colours. */

.svc-map .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.92) brightness(1.06) sepia(0.12) hue-rotate(170deg) saturate(1.6);
}

.svc-map.is-live .svc-map-canvas {
  background-image: none !important;
}

.svc-map .leaflet-container {
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Desktop: the map fills the section and the panel floats on it. */

@media (min-width: 992px) {
  .svc-map-canvas {
    position: absolute;
    inset: 0px;
    height: 100%;
  }

  .svc-map {
    min-height: 44rem;
  }

  .svc-map-overlay {
    pointer-events: none;
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 44rem;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .svc-map-panel {
    pointer-events: auto;
  }
}

.svc-map-panel {
  position: relative;
  width: 100%;
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 30px 60px -36px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 30px 60px -36px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 992px) {
  .svc-map-panel {
    max-width: 30rem;
    padding: 2rem;
  }
}

@media (max-width: 991px) {
  .svc-map-overlay {
    position: relative;
    z-index: 2;
    margin-top: -2.5rem;
    padding-bottom: 0.5rem;
  }
}

.svc-map-body {
  margin-bottom: 0px;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.75);
}

.svc-map-body a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* Check your city */

.svc-map-search {
  position: relative;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.375rem;
  padding-left: 2.75rem;
  transition-property: border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.svc-map-search:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 0 0 4px rgba(107,166,202,0.18);
  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.svc-map-search-icon {
  pointer-events: none;
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: rgb(40 55 74 / 0.45);
}

.svc-map-search input {
  min-width: 0px;
  flex: 1 1 0%;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 0.9375rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.svc-map-search input::-moz-placeholder {
  color: rgb(40 55 74 / 0.45);
}

.svc-map-search input::placeholder {
  color: rgb(40 55 74 / 0.45);
}

.svc-map-search input:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.svc-map-search input {
  box-shadow: none;
}

.svc-map-search button {
  min-height: 40px;
  flex-shrink: 0;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.svc-map-search button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.svc-map-result {
  margin-bottom: 0px;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.375;
}

.svc-map-result:empty {
  display: none;
}

.svc-map-result.is-yes {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}

.svc-map-result.is-maybe {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}

.svc-map-result a {
  font-weight: 600;
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

/* County tabs */

.svc-map-tabs {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.svc-map-tab {
  min-height: 36px;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(40 55 74 / 0.75);
  transition-property: background-color,border-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.svc-map-tab:hover {
  border-color: rgb(40 55 74 / 0.4);
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.svc-map-tab.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* City lists */

.svc-map-lists {
  margin-top: 1.25rem;
  max-height: 13rem;
}

.svc-map-lists > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.svc-map-lists {
  overflow-y: auto;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding-right: 0.25rem;
  padding-top: 1rem;
  scrollbar-width: thin;
}

.svc-map-list[hidden] {
  display: none;
}

.svc-map-list-head {
  margin-bottom: 0.375rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  font-size: 0.875rem;
}

.svc-map-list-head a {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.svc-map-list-head a:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.svc-map-list-head a {
  background-image: none;
}

.svc-map-list-head span {
  font-size: 0.75rem;
  color: rgb(40 55 74 / 0.55);
}

.svc-map-list ul {
  margin: 0px;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0px;
}

.svc-map-list ul > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

.svc-map-list ul a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.svc-map-list ul a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.svc-map-list ul a {
  background-image: none;
}

/* Pins */

.svc-pin-city span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border-width: 3px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 2px 8px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.svc-pin-city:hover span,
.svc-pin-city.is-hot span {
  --tw-scale-x: 1.5;
  --tw-scale-y: 1.5;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}

.svc-pin-city.is-dim {
  opacity: 0.3;
}

.svc-pin-base {
  position: relative;
}

.svc-pin-dot {
  position: absolute;
  left: 0px;
  top: 0px;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 9999px;
  border-width: 3px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 4px 14px rgba(16,28,45,0.5);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (max-width: 1023px) {
  .process-steps-slider > .svc-pin-dot {
    gap: 1.25rem;
  }

  .process-steps-slider > .svc-pin-dot > div:last-child {
    padding-left: 0.25rem;
  }
}

.svc-pin-dot::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.svc-pin-base.is-showroom .svc-pin-dot {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.svc-pin-label {
  position: absolute;
  left: 2.25rem;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  white-space: nowrap;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 12px rgba(16,28,45,0.35);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Crew and showroom pins open a card too. */

.svc-pin-base {
  cursor: pointer;
}

.svc-pin-label {
  transition: background-color 0.2s, transform 0.2s;
}

.svc-pin-base:hover .svc-pin-label,
.svc-pin-base:focus-visible .svc-pin-label {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.svc-pin-base:focus-visible {
  outline: none;
}

.svc-pin-base:focus-visible .svc-pin-dot {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(107 166 202 / 0.5);
}

/* Popups. Leaflet's own `.leaflet-container a` colour and
 * `.leaflet-popup-content p` margins outrank single classes, so these are
 * scoped through the popup. */

.svc-popup .leaflet-popup-content-wrapper {
  overflow: hidden;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 24px 48px -20px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 24px 48px -20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.svc-popup .leaflet-popup-content {
  margin: 0px;
  width: auto;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  line-height: 1.4;
}

.svc-popup .leaflet-popup-tip {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.svc-popup a.leaflet-popup-close-button {
  right: 0.625rem;
  top: 0.625rem;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.06);
  padding: 0px;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.125rem;
  line-height: 1;
  color: rgb(40 55 74 / 0.6);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .svc-popup a.leaflet-popup-close-button {
    gap: 1.25rem;
  }

  .process-steps-slider > .svc-popup a.leaflet-popup-close-button > div:last-child {
    padding-left: 0.25rem;
  }
}

.svc-popup a.leaflet-popup-close-button {
  background-image: none;
}

.svc-popup a.leaflet-popup-close-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.svc-popup .svc-pop {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}

.svc-popup .svc-pop p {
  margin: 0px;
}

.svc-popup .svc-pop p.svc-pop-kicker {
  margin-bottom: 0.25rem;
  padding-right: 2rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

.svc-popup .svc-pop p.svc-pop-name {
  margin-bottom: 0.75rem;
  padding-right: 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.svc-popup .svc-pop p.svc-pop-row {
  margin-bottom: 0.375rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.7);
}

.svc-popup .svc-pop p.svc-pop-row svg {
  margin-top: 1px;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.svc-popup .svc-pop-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.5rem;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding-top: 1rem;
}

.svc-popup .leaflet-popup-content a.svc-pop-cta {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 6px 14px -8px rgba(16,28,45,0.7);
  --tw-shadow-colored: 0 6px 14px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: background-color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  background-image: none;
}

.svc-popup .leaflet-popup-content a.svc-pop-cta:hover,
.svc-popup .leaflet-popup-content a.svc-pop-cta:focus-visible {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.svc-popup .leaflet-popup-content a.svc-pop-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background-image: none;
}

.svc-popup .leaflet-popup-content a.svc-pop-link svg {
  width: 0.875rem;
  height: 0.875rem;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.svc-popup .leaflet-popup-content a.svc-pop-link:hover {
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

.svc-popup .leaflet-popup-content a.svc-pop-link:hover svg {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.svc-map .leaflet-control-attribution {
  font-size: 0.6875rem;
}

/* The panel heading sits in a 30rem card, so the section-heading measure
 * and size wrapped it to three lines and pushed the city lists below the
 * fold. Smaller and full width inside the card. */

.svc-map-panel .block-title h2 {
  max-width: none;
  font-size: 1.75rem;
}

@media (min-width: 992px) {
  .svc-map-panel .block-title h2 {
    font-size: 2.125rem;
  }
}

/* At phone width the four crew labels overlap each other and the city pins;
 * the pins stay, and the list under the map names every base. */

@media (max-width: 575px) {
  .svc-pin-label {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SERVICES INDEX (service-card-grid, grid_featured style; the Services hub)
 * ═══════════════════════════════════════════════════════════════════════════ */

.svc-index {
  display: grid;
  gap: 2.5rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .svc-index {
    gap: 1.25rem;
  }

  .process-steps-slider > .svc-index > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 992px) {
  .svc-index {
    grid-template-columns: 7fr 5fr;
    gap: 3.5rem;
  }
}

ol.svc-index-list {
  margin: 0px;
  list-style-type: none;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding: 0px;
}

ol.svc-index-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

ol.svc-index-list > li {
  margin: 0px;
  border-bottom-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
}

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 4.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .svc-row {
    gap: 1.25rem;
  }

  .process-steps-slider > .svc-row > div:last-child {
    padding-left: 0.25rem;
  }
}

.svc-row:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 4px;
  outline-color: #6ba6ca;
}

@media (min-width: 992px) {
  .svc-row {
    grid-template-columns: 2.5rem 1fr auto;
    gap: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

.svc-row {
  background-image: none;
}

/* The active row: a bar of light along its left edge. */

.svc-row::before {
  content: "";
  position: absolute;
  left: -1rem;
  bottom: 0.75rem;
  top: 0.75rem;
  width: 3px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 992px) {
  .svc-row::before {
    left: -1.25rem;
  }
}

.svc-row.is-on::before {
  opacity: 1;
}

.svc-row-num {
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgb(40 55 74 / 0.35);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.svc-row.is-on .svc-row-num {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.svc-row-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
}

@media (min-width: 992px) {
  .svc-row-thumb {
    display: none;
  }
}

.svc-row-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.svc-row-body {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.125rem;
}

.svc-row-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 992px) {
  .svc-row-title {
    font-size: 1.375rem;
  }
}

.svc-row.is-on .svc-row-title,
.svc-row:hover .svc-row-title {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.svc-row-text {
  font-size: 0.875rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.65);
}

@media (min-width: 992px) {
  .svc-row-text {
    font-size: 0.9375rem;
  }
}

.svc-row-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.svc-row-arrow {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: background-color,border-color,color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .svc-row-arrow {
    gap: 1.25rem;
  }

  .process-steps-slider > .svc-row-arrow > div:last-child {
    padding-left: 0.25rem;
  }
}

.svc-row-arrow svg {
  width: 1rem;
  height: 1rem;
}

.svc-row.is-on .svc-row-arrow,
.svc-row:hover .svc-row-arrow {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.svc-row:hover .svc-row-arrow {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* The preview: desktop only, held in view while the list scrolls. */

.svc-index-preview {
  position: relative;
  display: none;
  overflow: hidden;
  border-radius: 22px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 30px 60px -36px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 30px 60px -36px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 992px) {
  .svc-index-preview {
    position: sticky;
    top: 9rem;
    display: block;
    align-self: flex-start;
  }
}

.svc-index-preview {
  aspect-ratio: 4 / 5;
}

.svc-index-img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.svc-index-img.is-swapping {
  opacity: 0;
}

.svc-index-preview::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 50%;
  background: linear-gradient(to top, rgba(27, 37, 51, 0.9), rgba(27, 37, 51, 0));
}

.svc-index-cap {
  position: absolute;
  left: 1.75rem;
  right: 1.75rem;
  bottom: 1.75rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.svc-index-cap-title {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.svc-index-cap-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.75);
}

@media (prefers-reduced-motion: reduce) {
  .svc-row,
	.svc-row-arrow,
	.svc-index-img {
    transition: none;
  }
}

/* Without the preview (below lg) an "active" row means nothing, so the first
 * row is not singled out on a phone. */

@media (max-width: 991px) {
  .svc-row.is-on::before {
    opacity: 0;
  }

  .svc-row.is-on .svc-row-num {
    color: rgb(40 55 74 / 0.35);
  }

  .svc-row.is-on .svc-row-title {
    --tw-text-opacity: 1;
    color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  }

  .svc-row.is-on .svc-row-arrow {
    border-color: rgb(40 55 74 / 0.15);
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  }
}

/*
 * Map, desktop: framed rather than full-bleed, with a wider, shorter panel.
 *
 * Full width, the map showed a broad empty desert east of the pins, and the
 * 30rem panel stacked its search, tabs and lists into a tall column. The map
 * now sits in a rounded frame the width of the page content, the pins are
 * fitted to the space beside the panel, and the panel is wider so its
 * controls wrap less and it comes out shorter.
 */

@media (min-width: 992px) {
  .svc-map {
    margin-left: auto;
    margin-right: auto;
    max-width: 81.875rem;
    background-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 38rem;
  }

  .svc-map-canvas {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 1rem;
    right: 1rem;
    height: auto;
    width: auto;
    overflow: hidden;
    border-radius: 28px;
    --tw-shadow: 0 30px 60px -40px rgba(16,28,45,0.5);
    --tw-shadow-colored: 0 30px 60px -40px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  div.svc-map-overlay {
    min-height: 38rem;
    max-width: none;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  @media (min-width: 992px) {
    .svc-map-panel {
      max-width: 37rem;
      padding: 2rem;
    }
  }

  .svc-map-lists {
    max-height: 9.5rem;
  }

  .svc-map-tabs {
    margin-top: 1.25rem;
  }
}

/* Contact panel: the number and address are links, and look like it. */

.contact-value {
  color: rgb(255 255 255 / 0.95);
  text-decoration-line: none;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 4px;
}

.contact-value:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

.contact-value {
  background-image: none;
}

.contact-directions {
  margin-top: 0.25rem;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.contact-directions:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.contact-directions {
  background-image: none;
}

/* Half a pixel of overlap between tiles closes the seams fractional zoom
 * leaves; the widely used fix, and invisible at these sizes. */

.svc-map .leaflet-tile {
  width: 256.5px !important;
  height: 256.5px !important;
}

/* The map meets the styles band above it. The band rule closes the gap only
 * for a following section that has a background, and the map wrapper no
 * longer carries one, so the white strip came back (reported on phones). On
 * desktop, where the map is framed, the band's colour runs on behind the
 * frame so the two read as one block. */

section.section-band + section:has(.svc-map) {
  margin-top: 0px;
}

@media (min-width: 992px) {
  section.section-band + section:has(.svc-map) {
    --tw-bg-opacity: 1;
    background-color: rgb(225 237 244 / var(--tw-bg-opacity, 1));
    padding-bottom: 4rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * STYLE EXPLORER (template-parts/components/style-explorer.php)
 * ═══════════════════════════════════════════════════════════════════════════ */

.sx {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  .sx {
    flex-direction: row;
    gap: 0.625rem;
  }
}

.sx-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  transition: flex-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sx-img {
  position: absolute;
  inset: 0px;
  z-index: -10;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Collapsed: an even wash so the label reads on any photograph.
 * Open: the wash lifts, leaving a ramp only under the words. */

.sx-panel::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: -5;
  background: linear-gradient(to top, rgba(27, 37, 51, 0.92) 0%, rgba(27, 37, 51, 0.62) 55%, rgba(27, 37, 51, 0.5) 100%);
  transition: opacity 0.5s ease;
}

.sx-panel.is-on::after {
  background: linear-gradient(to top, rgba(27, 37, 51, 0.94) 0%, rgba(27, 37, 51, 0.55) 42%, rgba(27, 37, 51, 0) 72%);
}

.sx-panel.is-on .sx-img {
  transform: scale(1.04);
}

/* The strip itself is the control. */

.sx-trigger {
  position: absolute;
  inset: 0px;
  z-index: 2;
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 1rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  text-align: left;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.sx-trigger:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: -4px;
  outline-color: #fff;
}

.sx-trigger {
  transition: opacity 0.25s ease;
}

.sx-num {
  font-family: Poppins, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.sx-label {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.sx-panel.is-on .sx-trigger {
  pointer-events: none;
  opacity: 0;
}

/* The open panel's content. Hidden (not only transparent) while closed, so
 * keyboard and screen-reader users are not walked through eight sets of
 * buttons they cannot see. */

.sx-body {
  visibility: hidden;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 3;
  --tw-translate-y: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  padding: 1.5rem;
  opacity: 0;
}

@media (min-width: 992px) {
  .sx-body {
    padding: 2.25rem;
  }
}

.sx-body {
  transition: opacity 0.3s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}

.sx-panel.is-on .sx-body {
  visibility: visible;
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
  transition: opacity 0.4s ease 0.25s, transform 0.5s ease 0.2s, visibility 0s;
}

.sx-kicker {
  margin-bottom: 0.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.sx-title {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .sx-title {
    font-size: 2.25rem;
  }
}

.sx-facts {
  margin: 0px;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.sx-facts > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.1);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.sx-facts dt {
  margin: 0px;
  font-family: Montserrat, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.6);
}

.sx-facts dd {
  margin: 0px;
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.sx-text {
  margin-bottom: 1.25rem;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.8);
}

.sx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  row-gap: 0.75rem;
}

/* a.sx-quote: the base `a:hover` (navy) outranks a single class, which made
 * the link vanish against the photo on hover. */

a.sx-quote {
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: rgb(255 255 255 / 0.4);
  text-underline-offset: 4px;
}

a.sx-quote:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-color: #fff;
}

a.sx-quote {
  background-image: none;
}

/* Desktop: panels side by side, the open one takes the room. */

@media (min-width: 992px) {
  .sx {
    height: clamp(32rem, 42vw, 38rem);
  }

  .sx-panel {
    flex: 1 1 0;
    min-width: 0;
  }

  .sx-panel.is-on {
    flex-grow: 7;
  }

  /* Collapsed strips read bottom to top, the way spines on a shelf do. */

  .sx-trigger {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sx-num {
    margin-left: auto;
    margin-right: auto;
  }

  .sx-label {
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    font-size: 1rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  /* The open panel's text holds its width while the panel grows, so it
	 * does not reflow line by line during the animation. */

  .sx-body {
    width: min(38rem, 100%);
  }
}

/* Phones and tablets: a stack of photo bands. */

@media (max-width: 991px) {
  .sx-panel {
    height: 4.75rem;
  }

  .sx-panel.is-on {
    height: 27rem;
  }

  .sx-title {
    font-size: 1.5rem;
  }

  .sx-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-panel,
	.sx-img,
	.sx-body,
	.sx-trigger {
    transition: none !important;
  }
}

/* The small "Style 1 of 8" label sat blue on a photograph; white reads. */

.sx-kicker {
  color: rgb(255 255 255 / 0.75);
}

/* The two-photo collage was the only square-cornered imagery on the page;
 * it now matches every other photograph on the site. */

img.split-collage-img {
  width: 100%;
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  --tw-shadow: 0 24px 48px -32px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 24px 48px -32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Phones: the explorer's text must read on any photograph. Collapsed bands
 * get an even top-down wash behind the label; the open panel, whose text
 * runs from near the top to the bottom on a phone, gets a top-down wash that
 * stays dark enough throughout while letting the photo through. */

@media (max-width: 991px) {
  .sx-panel::after {
    background: linear-gradient(to bottom, rgba(27, 37, 51, 0.86) 0%, rgba(27, 37, 51, 0.7) 100%);
  }

  .sx-panel.is-on::after {
    background: linear-gradient(to bottom, rgba(27, 37, 51, 0.82) 0%, rgba(27, 37, 51, 0.62) 45%, rgba(27, 37, 51, 0.9) 100%);
  }

  .sx-label,
	.sx-title,
	.sx-text,
	.sx-kicker {
    text-shadow: 0 1px 10px rgba(16, 28, 45, 0.6);
  }
}

.svc-index-preview {
  text-decoration-line: none;
  background-image: none;
}

.svc-index-preview:hover .svc-index-cap-link {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.svc-index-preview:hover .svc-index-img {
  transform: scale(1.03);
}

.svc-index-img {
  transition: opacity 0.15s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Reviews on phones and tablets: the arrows show too, on the score row, so
 * the slider can be stepped through as well as swiped. */

@media (max-width: 991px) {
  .reviews-head {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .reviews-head > .block-title {
    grid-column: 1 / -1;
  }

  div.reviews-nav {
    display: flex;
  }

  .reviews-score-num {
    font-size: 2.5rem;
  }

  .reviews-arrow {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Phones: each review card is as tall as its own review, not the longest. */

@media (max-width: 991px) {
  div.reviews-track {
    align-items: flex-start;
  }
}

/*
 * Services index, desktop: a compact list beside a photo of the same height.
 *
 * With every description open, eight rows ran to about 1,070px against a
 * 636px photo, so the photo had to be pinned while the list scrolled, and
 * the fixed header sat over its top. Now only the active row shows its
 * description, which brings the list to roughly the photo's height, and the
 * photo simply stretches to match the list: nothing pinned, nothing cut off.
 * Phones keep every description, since there is no preview there.
 */

@media (min-width: 992px) {
  .svc-index {
    align-items: stretch;
  }

  .svc-index-preview {
    position: relative;
    top: auto;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 32rem;
  }

  .svc-row {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .svc-row-title {
    font-size: 1.25rem;
  }

  .svc-row-text {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }

  .svc-row.is-on .svc-row-text {
    max-height: 3.5rem;
    opacity: 1;
    margin-top: 0.25rem;
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .svc-row-text {
    transition: none;
  }
}

/*
 * Filter pills, sitewide (gallery styles, FAQ categories, blog categories).
 *
 * They were 16px uppercase sky-blue text on a 20% sky-blue fill with a sky
 * border: the faintest controls on the page, and the active one barely
 * distinct from the rest. Now a clean chip: navy text on white with a
 * hairline, filled navy when active, sentence-weight type so a row of them
 * reads as choices rather than as a row of shouting labels.
 */

.pill {
  gap: 0.5rem;
  border-radius: 9999px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: background-color,border-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.pill:hover {
  border-color: rgb(40 55 74 / 0.4);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.pill.pill-active,
.pill.pill-active:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/*
 * Gallery photo grid: masonry, not a fixed grid.
 *
 * Eight photographs in a fixed three-column grid left a hole in the last row
 * and every tile the same shape, which reads as a file browser. As columns
 * with a rhythm of tall and wide tiles the set reads as a portfolio, and no
 * count of photographs (filters change it) can leave a hole. Only for grids
 * of single photographs; the before/after compare cards keep their own grid.
 */

@media (min-width: 576px) {
  div.gallery-grid:not(:has(.gallery-cell--wide)) {
    display: block;
    -moz-columns: 2;
         columns: 2;
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }

  div.gallery-grid:not(:has(.gallery-cell--wide)) > .gallery-cell {
    margin-bottom: 1.25rem;
    width: 100%;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    aspect-ratio: 4 / 3;
  }

  div.gallery-grid:not(:has(.gallery-cell--wide)) > .gallery-cell:nth-child(3n + 1) {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 992px) {
  div.gallery-grid:not(:has(.gallery-cell--wide)) {
    -moz-columns: 3;
         columns: 3;
  }
}

/* Captions show at rest on desktop as well, small, so the grid is labelled
 * without a hover; the full caption still lifts on hover. */

@media (min-width: 576px) {
  div.gallery-grid:not(:has(.gallery-cell--wide)) .gallery-caption-scrim {
    opacity: 1;
    background-image: linear-gradient(to bottom, rgba(40, 55, 74, 0) 55%, rgba(40, 55, 74, 0.82) 100%);
  }

  div.gallery-grid:not(:has(.gallery-cell--wide)) .gallery-caption {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    gap: 0.125rem;
    opacity: 1;
  }

  div.gallery-grid:not(:has(.gallery-cell--wide)) .gallery-caption .card-overlay-title {
    font-size: 1.125rem;
  }

  div.gallery-grid:not(:has(.gallery-cell--wide)) .gallery-caption .card-overlay-text {
    font-size: 0.875rem;
  }
}

/* ── Jump nav (long catalogue pages) ──────────────────────────────────────── */

.jump-nav {
  position: sticky;
  top: 6.5rem;
  z-index: 40;
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}

@media (min-width: 992px) {
  .jump-nav {
    top: 8.25rem;
    margin-top: 2.5rem;
  }
}

.jump-nav-track {
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 576px) {
  .jump-nav-track {
    margin-left: 0px;
    margin-right: 0px;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(40 55 74 / 0.1);
    background-color: rgb(255 255 255 / 0.9);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-shadow: 0 16px 34px -24px rgba(16,28,45,0.45);
    --tw-shadow-colored: 0 16px 34px -24px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
}

.jump-nav-track {
  scrollbar-width: none;
}

.jump-nav-track::-webkit-scrollbar {
  display: none;
}

.jump-nav-label {
  display: none;
  flex-shrink: 0;
  padding-left: 0.75rem;
  padding-right: 0.25rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(40 55 74 / 0.5);
}

@media (min-width: 576px) {
  .jump-nav-label {
    display: inline;
  }
}

.jump-nav-link {
  flex-shrink: 0;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 0 0 1px rgba(40,55,74,0.12);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: background-color,color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.jump-nav-link:hover {
  --tw-shadow: 0 0 0 1px rgba(40,55,74,0.4);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 576px) {
  .jump-nav-link {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .jump-nav-link:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  }
}

.jump-nav-link {
  background-image: none;
}

.jump-nav-link.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 576px) {
  .jump-nav-link.is-on {
    --tw-bg-opacity: 1;
    background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  }

  .jump-nav-link.is-on:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  }
}

/* Sections land below the fixed header and the jump nav. */

.photo-card-section,
.cfg {
  scroll-margin-top: 11rem;
}

/*
 * Catalogue cards from sm up: a product shot on a light tile, not a 350px
 * photograph. The hardware photos are small objects on white; at 350px tall
 * across a 600px card they were mostly white space and visibly soft. Fixed
 * height, contained on a pale tile, so every card in a row lines up and the
 * object is shown at a size its file can carry. Labelled diagrams (the wide
 * cards) and the glass photographs (overlay cards) keep their own treatment.
 */

@media (min-width: 576px) {
  div.photo-card:not(.photo-card--overlay):not(.photo-card--wide) img.photo-card-img {
    height: 13rem;
    border-radius: 14px;
    --tw-bg-opacity: 1;
    background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
    -o-object-fit: contain;
       object-fit: contain;
    padding: 1.25rem;
  }

  div.photo-card.photo-card--wide img.photo-card-img {
    height: 16rem;
    border-radius: 14px;
    --tw-bg-opacity: 1;
    background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
    -o-object-fit: contain;
       object-fit: contain;
    padding: 1rem;
  }

  div.photo-card:not(.photo-card--overlay) {
    padding: 1rem;
  }

  div.photo-card:not(.photo-card--overlay) p.photo-card-title {
    margin-top: 1rem;
    font-size: 1.125rem;
  }

  div.photo-card:not(.photo-card--overlay) p.photo-card-text {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.375;
  }

  /* Glass photographs: a shorter frame. */

  div.photo-card.photo-card--overlay {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .photo-card--overlay img.photo-card-img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/* FAQ search */

.faq-search {
  position: relative;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 2.75rem;
  padding-right: 0.75rem;
  transition-property: border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.faq-search:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 0 0 4px rgba(107,166,202,0.18);
  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.faq-search svg {
  pointer-events: none;
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  color: rgb(40 55 74 / 0.45);
}

.faq-search input {
  min-height: 48px;
  width: 100%;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 0.9375rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.faq-search input::-moz-placeholder {
  color: rgb(40 55 74 / 0.45);
}

.faq-search input::placeholder {
  color: rgb(40 55 74 / 0.45);
}

.faq-search input:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.faq-search input {
  box-shadow: none;
}

/* While searching, hidden "show more" questions that match are shown. */

[data-category-group].is-searching .faq-extra.faq-hit {
  display: block;
}

.faq-none {
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  font-size: 0.9375rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.faq-none a {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

/* Category headings on the FAQ page: a real heading, not small caps body. */

[data-category-group] > p:first-child {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

@media (min-width: 992px) {
  [data-category-group] > p:first-child {
    font-size: 1.625rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ARTICLES
 * ═══════════════════════════════════════════════════════════════════════════ */

.read-progress {
  pointer-events: none;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 120;
  height: 3px;
  background-color: transparent;
}

.read-progress span {
  display: block;
  height: 100%;
  transform-origin: left;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  transform: scaleX(0);
}

.post-hero-img.is-lowres {
  filter: blur(14px) saturate(1.1);
  transform: scale(1.12);
}

/* Reading measure and rhythm. */

.blog-article .prose {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgb(40 55 74 / 0.8);
}

.blog-article .prose h2 {
  margin-bottom: 1rem;
  margin-top: 3rem;
  scroll-margin-top: 10rem;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .blog-article .prose h2 {
    font-size: 1.875rem;
  }
}

.blog-article .prose h3 {
  margin-bottom: 0.75rem;
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.blog-article .prose > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.7;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.blog-article .prose a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: rgb(107 166 202 / 0.6);
  text-underline-offset: 4px;
}

/* Sidebar */

.blog-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 992px) {
  .blog-aside {
    position: sticky;
    top: 9rem;
  }
}

.blog-toc {
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

.blog-toc[hidden] {
  display: none;
}

.blog-toc-title {
  margin-bottom: 0.75rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(40 55 74 / 0.55);
}

ol.blog-toc-list,
ul.blog-styles-list {
  margin: 0px;
  list-style-type: none;
  border-left-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding: 0px;
}

ol.blog-toc-list > :not([hidden]) ~ :not([hidden]),
ul.blog-styles-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

.blog-toc-list a {
  margin-left: -1px;
  display: block;
  border-left-width: 2px;
  border-color: transparent;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 1rem;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.7);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.blog-toc-list a:hover {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.blog-toc-list a {
  background-image: none;
}

.blog-toc-list a.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.blog-cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 18px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.blog-cta-title {
  margin-bottom: 0px;
  font-size: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.blog-cta-text {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(255 255 255 / 0.7);
}

.blog-cta-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.blog-cta-phone:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.blog-cta-phone {
  background-image: none;
}

.blog-styles {
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

ul.blog-styles-list {
  border-left-width: 0px;
}

.blog-styles-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.blog-styles-list a:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.blog-styles-list a {
  background-image: none;
}

.blog-styles-list li:last-child a {
  border-bottom-width: 0px;
}

.blog-styles-list a span {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.blog-styles-list a:hover span {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Post cards: panes, not pale-blue gradient boxes. */

.card-post {
  gap: 1.25rem;
  overflow: hidden;
  border-radius: 18px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  background-image: none;
  padding: 0px;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.card-post:hover,
.card-post:focus-within {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-image: none;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 26px 44px -26px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 26px 44px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-post-img {
  border-radius: 0px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.card-post:hover .card-post-img {
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.card-post-content,
.card-post-readmore {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.card-post-readmore {
  padding-bottom: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.card-post-title {
  font-size: 1.375rem;
}

/* The featured (first) post on the blog index: image beside the words. */

@media (min-width: 992px) {
  .card-post--featured {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 0px;
  }

  @media (max-width: 1023px) {
    .process-steps-slider > .card-post--featured {
      gap: 1.25rem;
    }

    .process-steps-slider > .card-post--featured > div:last-child {
      padding-left: 0.25rem;
    }
  }

  .card-post--featured .card-post-img {
    grid-row: span 3 / span 3;
    aspect-ratio: auto;
    height: 100%;
    min-height: 24rem;
  }

  .card-post--featured .card-post-content {
    justify-content: center;
    gap: 1rem;
    padding: 2.5rem;
    padding-bottom: 1rem;
  }

  .card-post--featured .card-post-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 2rem;
    line-height: 1.15;
  }

  .card-post--featured .card-post-readmore {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.card-post-excerpt {
  margin-bottom: 0px;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.7);
}

/* Style-page hero: breadcrumb and facts. */

.hero-crumbs {
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.7);
}

.hero-crumbs a {
  color: rgb(255 255 255 / 0.7);
  text-decoration-line: none;
}

.hero-crumbs a:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hero-crumbs a {
  background-image: none;
}

.hero-crumbs [aria-current] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hero-crumbs span[aria-hidden] {
  color: rgb(255 255 255 / 0.35);
}

.hero-facts {
  margin: 0px;
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.hero-facts > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.hero-facts dt {
  margin: 0px;
  font-family: Montserrat, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.6);
}

.hero-facts dd {
  margin: 0px;
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Compare tiles carry a one-line fact under the name. */

.style-tile-fact {
  margin-top: -0.5rem;
  display: block;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  font-size: 0.8125rem;
  color: rgb(40 55 74 / 0.6);
}

@media (min-width: 992px) {
  .style-tiles--compare {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.blog-article .prose h3 {
  scroll-margin-top: 10rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HARDWARE & GLASS GUIDE (components/hardware-guide.php)
 * ═══════════════════════════════════════════════════════════════════════════ */

#glass,
#hardware,
#handles,
#configure {
  scroll-margin-top: 8rem;
}

/* ── Three choices ───────────────────────────────────────────────────────── */

ol.hg-step-list {
  margin: 0px;
  display: grid;
  list-style-type: none;
  gap: 1rem;
  padding: 0px;
}

@media (max-width: 1023px) {
  .process-steps-slider > ol.hg-step-list {
    gap: 1.25rem;
  }

  .process-steps-slider > ol.hg-step-list > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 768px) {
  ol.hg-step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  ol.hg-step-list {
    gap: 1.5rem;
  }
}

ol.hg-step-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

.hg-step {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  border-radius: 20px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.hg-step:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 26px 44px -26px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 26px 44px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 768px) {
  .hg-step {
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    padding: 0px;
  }
}

.hg-step {
  background-image: none;
}

.hg-step-media {
  display: block;
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}

@media (min-width: 768px) {
  .hg-step-media {
    aspect-ratio: 4/3;
    width: auto;
    height: auto;
    border-radius: 0px;
  }
}

.hg-step-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
}

.hg-step-media.is-product {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hg-step-media.is-product img {
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.5rem;
  mix-blend-mode: multiply;
}

@media (min-width: 768px) {
  .hg-step-media.is-product img {
    padding: 1.5rem;
  }
}

.hg-step:hover .hg-step-media img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hg-step-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

@media (min-width: 768px) {
  .hg-step-body {
    gap: 0.25rem;
    border-top-width: 1px;
    border-color: rgb(40 55 74 / 0.1);
    padding: 1.5rem;
  }
}

.hg-step-num {
  font-family: Poppins, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.hg-step-title {
  font-size: 1.0625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 768px) {
  .hg-step-title {
    font-size: 1.375rem;
  }
}

.hg-step-text {
  font-size: 0.875rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.65);
}

@media (min-width: 768px) {
  .hg-step-text {
    font-size: 0.9375rem;
  }
}

.hg-lead {
  margin-bottom: 0px;
  margin-top: 1rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.7);
}

.hg-lead--dark {
  color: rgb(40 55 74 / 0.7);
}

/* ── Glass switcher ──────────────────────────────────────────────────────── */

.hg-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-top: 4rem;
  padding-bottom: 4rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .hg-glass {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.hg-glass::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -12rem;
  top: -12rem;
  z-index: -10;
  width: 42rem;
  height: 42rem;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(107, 166, 202, 0.24), rgba(107, 166, 202, 0) 70%);
}

.hg-glass-grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-glass-grid {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-glass-grid > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 992px) {
  .hg-glass-grid {
    grid-template-columns: 5fr 6fr;
    gap: 4rem;
  }
}

ul.hg-glass-list {
  margin: 0px;
  margin-top: 2rem;
  list-style-type: none;
  padding: 0px;
}

ul.hg-glass-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

.hg-glass-opt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
  border-bottom-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  text-align: left;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.hg-glass-opt:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.hg-glass-thumb {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: transparent;
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 992px) {
  .hg-glass-thumb {
    display: none;
  }
}

.hg-glass-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hg-glass-opt.is-on .hg-glass-thumb {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 166 202 / var(--tw-ring-opacity, 1));
}

.hg-glass-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hg-glass-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.7);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 992px) {
  .hg-glass-name {
    font-size: 1.375rem;
  }
}

.hg-glass-note {
  font-size: 0.875rem;
  line-height: 1.375;
  color: rgb(255 255 255 / 0.5);
}

.hg-glass-opt:hover .hg-glass-name,
.hg-glass-opt.is-on .hg-glass-name {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hg-glass-opt.is-on .hg-glass-name::before {
  content: "";
  margin-right: 0.75rem;
  display: inline-block;
  height: 2px;
  width: 1.5rem;
  --tw-translate-y: -0.375rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  vertical-align: middle;
}

.hg-glass-view {
  position: relative;
  margin: 0px;
  display: none;
  overflow: hidden;
  border-radius: 24px;
  background-color: rgb(0 0 0 / 0.2);
}

@media (min-width: 992px) {
  .hg-glass-view {
    display: block;
  }
}

.hg-glass-view {
  aspect-ratio: 5 / 4;
}

.hg-glass-img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hg-glass-img.is-swapping {
  opacity: 0;
}

.hg-glass-cap {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.9);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* ── Hardware: comparisons and handles ───────────────────────────────────── */

.hg-pair,
.hg-handles {
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .card-strip-track.hg-pair,.card-strip-track
.hg-handles {
    overflow: visible;
  }
}

@media (min-width: 992px) {
  .hg-pair,
.hg-handles {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.hg-pair-head {
  margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
  .hg-pair-head {
    margin-bottom: 0px;
  }
}

.hg-pair-title {
  margin-bottom: 0.5rem;
  font-size: 1.375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .hg-pair-title {
    font-size: 1.625rem;
  }
}

.hg-pair-body {
  margin-bottom: 0px;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.7);
}

.hg-pair-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-pair-grid {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-pair-grid > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .hg-pair-grid {
    gap: 1.5rem;
  }
}

/* The "or" between the two options. */

.hg-vs {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 2;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  place-items: center;
  border-radius: 9999px;
  border-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 8px 20px -8px rgba(16,28,45,0.6);
  --tw-shadow-colored: 0 8px 20px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-vs {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-vs > div:last-child {
    padding-left: 0.25rem;
  }
}

.hg-item {
  display: flex;
  flex-direction: column;
}

/* Product shots are on white backgrounds; on a white tile with the image
 * multiplied, the photo's own white square disappears into the tile. */

.hg-item-media {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  aspect-ratio: 4 / 3;
}

.hg-item-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 1rem;
  mix-blend-mode: multiply;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

@media (min-width: 576px) {
  .hg-item-media img {
    padding: 1.5rem;
  }
}

.hg-item:hover .hg-item-media img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hg-item-name {
  margin-bottom: 0px;
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  .hg-item-name {
    font-size: 1.0625rem;
  }
}

.hg-item-text {
  margin-bottom: 0px;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.65);
}

.hg-handle-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-handle-row {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-handle-row > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .hg-handle-row {
    gap: 1rem;
  }
}

@media (min-width: 992px) {
  .hg-handle-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.hg-item--sm .hg-item-media {
  aspect-ratio: 3 / 4;
}

.hg-item--sm .hg-item-media img {
  padding: 0.75rem;
}

.hg-item--sm .hg-item-name {
  text-align: center;
  font-size: 0.875rem;
}

.block-title.hg-item--sm .hg-item-name h2,.hg-item--sm .hg-item-name > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

/* Phones: the handles become a swipe row so six of them do not stack into
 * two tall rows of tiny tiles. */

@media (max-width: 575px) {
  div.hg-handle-row {
    margin-left: -1rem;
    margin-right: -1rem;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  div.hg-handle-row::-webkit-scrollbar {
    display: none;
  }

  .hg-handle-row > .hg-item {
    width: 38%;
    flex-shrink: 0;
  }

  .hg-vs {
    width: 2.25rem;
    height: 2.25rem;
    border-width: 3px;
    font-size: 0.625rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Before & after showcase (gallery-grid, all before/after items)
 * ═══════════════════════════════════════════════════════════════════════════ */

.ba-show {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 992px) {
  .ba-show {
    gap: 1.25rem;
  }
}

div.ba-show-stage {
  overflow: hidden;
  border-radius: 24px;
  --tw-shadow: 0 30px 60px -36px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 30px 60px -36px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  height: clamp(18rem, 52vw, 38rem);
}

.ba-tag {
  pointer-events: none;
  position: absolute;
  top: 1rem;
  z-index: 3;
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.8);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.ba-tag--after {
  left: 1rem;
}

.ba-tag--before {
  right: 1rem;
}

.ba-show-tabs {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.ba-show-tabs::-webkit-scrollbar {
  display: none;
}

.ba-show-tab {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  padding-right: 1.25rem;
  text-align: left;
  transition-property: border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.ba-show-tab:hover {
  border-color: rgb(40 55 74 / 0.3);
}

.ba-show-tab.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 10px 24px -16px rgba(16,28,45,0.6);
  --tw-shadow-colored: 0 10px 24px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ba-show-thumb {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
}

.ba-show-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.ba-show-label {
  display: flex;
  flex-direction: column;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.ba-show-city {
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgb(40 55 74 / 0.6);
}

.ba-show-caption {
  margin-bottom: 0px;
  font-size: 1rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/*
 * FAQ page as a help center.
 *
 * The FAQ page put its categories down a narrow sidebar beside the
 * questions, which is a filing cabinet. A help page leads with the search:
 * a centred heading, a large search box, the categories as a row of chips
 * beneath it, the questions in one readable column, and the way to ask a
 * person at the end. Rearranged with grid order, no markup moved; the module
 * elsewhere (style pages, homepage) keeps its side-by-side layout.
 */

section.faq--hub > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
}

section.faq--hub .faq-aside {
  display: contents;
}

section.faq--hub .faq-aside > header {
  order: 1;
  margin-bottom: 1.5rem;
  text-align: center;
}

section.block-title.faq--hub .faq-aside > header h2,section.faq--hub .faq-aside > header > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

section.faq--hub .faq-aside > header h2 {
  margin-left: auto;
  margin-right: auto;
}

section.faq--hub .faq-aside > header .title-small::before {
  display: block;
}

section.faq--hub .faq-search {
  order: 2;
  margin-bottom: 1.25rem;
  width: 100%;
  max-width: 42rem;
  padding-left: 3.5rem;
  --tw-shadow: 0 18px 40px -28px rgba(16,28,45,0.5);
  --tw-shadow-colored: 0 18px 40px -28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

section.faq--hub .faq-search svg {
  left: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
}

section.faq--hub .faq-search input {
  min-height: 60px;
  font-size: 1.0625rem;
}

section.faq--hub div.faq-filter-row {
  order: 3;
  margin-bottom: 3rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  section.faq--hub div.faq-filter-row {
    margin-bottom: 3.5rem;
  }
}

section.faq--hub div.faq-filter-row > .pill {
  width: auto;
}

section.faq--hub .accordion {
  order: 4;
  width: 100%;
  max-width: 48rem;
}

section.faq--hub .faq-help {
  order: 5;
  margin-top: 3rem;
  width: 100%;
  max-width: 48rem;
}

.faq-help--wide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
}

@media (min-width: 576px) {
  .faq-help--wide {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 992px) {
  .faq-help--wide {
    padding: 2rem;
  }
}

.faq-help--wide .faq-help-title {
  font-size: 1.25rem;
}

.faq-help--wide .faq-help-text {
  margin-bottom: 0px;
}

.faq-help--wide .faq-help-actions {
  flex-shrink: 0;
}

/* Phones: chips scroll sideways (the existing filter-row rule) but stay in
 * the centred column. */

@media (max-width: 767px) {
  section.faq--hub div.faq-filter-row {
    margin-bottom: 2rem;
    width: calc(100% + 2rem);
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

/* ── Hardware illustrations ──────────────────────────────────────────────── */

.hw-ill {
  display: block;
  width: 100%;
  height: 100%;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.hg-step-media.is-vector {
  display: grid;
  place-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-step-media.is-vector {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-step-media.is-vector > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 768px) {
  .hg-step-media.is-vector {
    aspect-ratio: 16/9;
    padding: 1.5rem;
  }
}

.hg-step-media.is-vector .hw-ill {
  width: 100%;
  height: 100%;
  max-height: 8.5rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.hg-step:hover .hg-step-media.is-vector .hw-ill {
  --tw-translate-y: -0.25rem;
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hg-item-media.is-vector {
  display: grid;
  place-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-item-media.is-vector {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-item-media.is-vector > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .hg-item-media.is-vector {
    padding: 2rem;
  }
}

.hg-item-media.is-vector {
  --hw-metal: #fff;
}

.hg-item-media.is-vector .hw-ill {
  max-height: 9rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.hg-item:hover .hg-item-media.is-vector .hw-ill {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hg-item--sm .hg-item-media.is-vector {
  padding: 1rem;
}

/* The before/after photos on file are small (one is 204px wide), so the
 * viewer is held to a size they can carry rather than the full page width,
 * with the project tabs beside it on desktop. */

@media (min-width: 992px) {
  .ba-show {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    max-width: 64rem;
    grid-template-columns: 1fr 15rem;
    align-items: flex-start;
    gap: 1.25rem;
  }

  @media (max-width: 1023px) {
    .process-steps-slider > .ba-show {
      gap: 1.25rem;
    }

    .process-steps-slider > .ba-show > div:last-child {
      padding-left: 0.25rem;
    }
  }

  div.ba-show-stage {
    height: clamp(20rem, 32vw, 28rem);
  }

  .ba-show-tabs {
    flex-direction: column;
    overflow: visible;
  }

  .ba-show-tab {
    width: 100%;
  }
}

/* Drawings fill their tiles: shorter tiles, larger illustrations. */

.hg-pair .hg-item-media.is-vector {
  aspect-ratio: 16 / 10;
  padding: 1rem;
}

.hg-item-media.is-vector .hw-ill {
  width: 78%;
  height: 78%;
  max-height: none;
}

.hg-item--sm .hg-item-media.is-vector .hw-ill {
  width: 92%;
  height: 92%;
}

.hg-step-media.is-vector .hw-ill {
  max-height: 10.5rem;
}

/* ── Arrows on rows that run off the screen (ss.scrollRows) ─────────────── */

.scroll-row {
  position: relative;
}

.scroll-row-btn {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  place-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 8px 20px -8px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 8px 20px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.scroll-row-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.scroll-row-btn:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.scroll-row-btn:disabled {
  pointer-events: none;
  opacity: 0;
}

.scroll-row-btn svg {
  width: 18px;
  height: 18px;
}

.scroll-row.is-scrollable > .scroll-row-btn {
  display: grid;
}

.scroll-row-btn--prev {
  left: 0.25rem;
}

.scroll-row-btn--next {
  right: 0.25rem;
}

/* Chip rows are short: smaller buttons, on the chips' own line. */

.scroll-row:has(> .filter-row) > .scroll-row-btn,
.scroll-row:has(> .faq-filter-row) > .scroll-row-btn,
.scroll-row:has(> .jump-nav-track) > .scroll-row-btn {
  width: 2rem;
  height: 2rem;
}

/* Rows of photographs: the buttons sit over the image area, not the caption. */

.scroll-row:has(> .style-tiles) > .scroll-row-btn,
.scroll-row:has(> .hg-handle-row) > .scroll-row-btn {
  top: 38%;
}

/* Category landing page: other categories row. */

.cat-others {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cat-others-label {
  margin-bottom: 0px;
  margin-right: 0.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(40 55 74 / 0.55);
}

.gallery-grid > .gallery-cell.is-more {
  display: none !important;
}

.gallery-more-wrap {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESOURCES HUB (page-resources.php)
 * ═══════════════════════════════════════════════════════════════════════════ */

.res-grid {
  display: grid;
  gap: 1rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .res-grid {
    gap: 1.25rem;
  }

  .process-steps-slider > .res-grid > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .res-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .res-grid {
    gap: 1.5rem;
  }
}

.res-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.res-card:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 26px 44px -26px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 26px 44px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 576px) {
  .res-card {
    flex-direction: row;
    align-items: stretch;
  }
}

.res-card {
  background-image: none;
}

.res-card-media {
  display: grid;
  aspect-ratio: 16/9;
  place-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .process-steps-slider > .res-card-media {
    gap: 1.25rem;
  }

  .process-steps-slider > .res-card-media > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .res-card-media {
    aspect-ratio: auto;
    width: 42%;
    flex-shrink: 0;
  }
}

.res-card-media .hw-ill {
  height: 7rem;
  width: 7rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

@media (min-width: 992px) {
  .res-card-media .hw-ill {
    height: 8rem;
    width: 8rem;
  }
}

.res-card:hover .res-card-media .hw-ill {
  --tw-translate-y: -0.25rem;
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.res-card-body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .res-card-body {
    padding: 1.75rem;
  }
}

.res-card-stat {
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.res-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  .res-card-title {
    font-size: 1.375rem;
  }
}

.res-card-text {
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.7);
}

.res-card-go {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.res-card-go span {
  display: inline-block;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.res-card:hover .res-card-go span {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Browse by style */

.res-cats {
  display: grid;
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .res-cats {
    gap: 1.25rem;
  }

  .process-steps-slider > .res-cats > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .res-cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .res-cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.res-cat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  text-decoration-line: none;
  transition-property: transform,box-shadow,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.res-cat:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(40 55 74 / 0.2);
  --tw-shadow: 0 22px 40px -26px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 22px 40px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.res-cat {
  background-image: none;
}

.res-cat-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.res-cat-text {
  font-size: 0.875rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.65);
}

.res-cat-count {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/*
 * No white strip where two full-width coloured sections meet.
 *
 * A section's top margin is spacing from the white content above it. When
 * what is above is itself a full-width coloured block (a hero, a tinted
 * band, the dark configurator, review or glass band, the estimate band) that
 * margin is not spacing, it is a stripe of bare page between two
 * backgrounds. Reported between the category hero and its styles band; the
 * same gap existed wherever these sections meet.
 */

:is(section.hero-banner, section.hero-scrim, section.section-band, section.cfg, section.reviews, section.hg-glass, section#ss-global-form, section[class*="bg-[#e1edf4]"], section[class*="bg-secondary"])
	+ :is(section.section-band, section.cfg, section.reviews, section.hg-glass, section#ss-global-form, section[class*="bg-[#e1edf4]"], section[class*="bg-secondary"]) {
  margin-top: 0;
}

/* A tinted band that meets a coloured section above it loses its rounded
 * top too: the round corner only reads against white. */

:is(section.hero-banner, section.hero-scrim, section.cfg, section.reviews, section.hg-glass, section[class*="bg-secondary"])
	+ section.section-band {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * GALLERY PHOTO GRID (the filterable gallery)
 *
 * Equal square tiles in an even grid: four across on desktop, three on a
 * tablet, two on a phone. The photograph is shown clean, with no fade over
 * it; the style and city sit underneath as a caption. A zoom mark on hover
 * says the photo opens, and it does, full size in the lightbox. Replaces the
 * masonry and the always-on scrim, which made rows different heights and
 * greyed out half of every photo.
 * ═══════════════════════════════════════════════════════════════════════════ */

div.gallery-grid.gallery-grid--photos {
  display: grid !important;
  -moz-columns: auto !important;
       columns: auto !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 0.75rem;
}

@media (min-width: 768px) {
  div.gallery-grid.gallery-grid--photos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }
}

@media (min-width: 1200px) {
  div.gallery-grid.gallery-grid--photos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

div.gallery-grid--photos > a.gallery-cell {
  margin: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  overflow: visible;
  border-radius: 0px;
  background-color: transparent;
  text-decoration-line: none;
  aspect-ratio: auto !important;
  background-image: none;
}

div.gallery-grid--photos > a.gallery-cell > img {
  aspect-ratio: 1 / 1;
  height: auto;
  width: 100%;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  -o-object-fit: cover;
     object-fit: cover;
  --tw-shadow: 0 14px 30px -24px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 14px 30px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

div.gallery-grid--photos > a.gallery-cell:hover > img {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 24px 44px -26px rgba(16,28,45,0.6);
  --tw-shadow-colored: 0 24px 44px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* No fade over the photo. */

div.gallery-grid--photos .gallery-caption-scrim {
  display: none !important;
}

/* Caption under the photo. */

div.gallery-grid--photos div.gallery-caption {
  position: static;
  inset: auto;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  opacity: 1;
}

div.gallery-grid--photos .gallery-caption .card-overlay-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  div.gallery-grid--photos .gallery-caption .card-overlay-title {
    font-size: 1rem;
  }
}

div.gallery-grid--photos .gallery-caption .card-overlay-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.8125rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.6);
}

/* Zoom mark: the photo opens. */

div.gallery-grid--photos > a.gallery-cell::after {
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.9);
  opacity: 0;
  --tw-shadow: 0 6px 16px -6px rgba(16,28,45,0.5);
  --tw-shadow-colored: 0 6px 16px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > div.gallery-grid--photos > a.gallery-cell::after {
    gap: 1.25rem;
  }

  .process-steps-slider > div.gallery-grid--photos > a.gallery-cell > div:last-child::after {
    padding-left: 0.25rem;
  }
}

div.gallery-grid--photos > a.gallery-cell::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328374a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
}

div.gallery-grid--photos > a.gallery-cell:hover::after,
div.gallery-grid--photos > a.gallery-cell:focus-visible::after {
  opacity: 1;
}

@media (pointer: coarse) {
  div.gallery-grid--photos > a.gallery-cell::after {
    width: 2rem;
    height: 2rem;
    opacity: 1;
    background-size: 15px;
  }
}

/* ── Hardware section, second pass: comparison cards and photo handles ──── */

.hg-pairs {
  display: grid;
  gap: 1.25rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-pairs {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-pairs > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 992px) {
  .hg-pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.hg-pair-card {
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
}

@media (min-width: 992px) {
  .hg-pair-card {
    padding: 1.75rem;
  }
}

.hg-pair-card .hg-pair-title {
  margin-bottom: 0.25rem;
}

.hg-pair-card .hg-pair-body {
  margin-bottom: 1.25rem;
}

.hg-pair-card .hg-pair-grid {
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .hg-pair-card .hg-pair-grid {
    gap: 1rem;
  }
}

.hg-pair-card .hg-item-media {
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  aspect-ratio: 1 / 1;
}

.hg-pair-card .hg-item-name {
  text-align: center;
}

.block-title.hg-pair-card .hg-item-name h2,.hg-pair-card .hg-item-name > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.hg-pair-card .hg-vs {
  top: 42%;
}

/* The hardware photos are product shots on white: shown on white tiles at a
 * size their processed files carry, never stretched. */

.hg-item-media img {
  padding: 0.75rem;
}

@media (min-width: 576px) {
  .hg-item-media img {
    padding: 1.25rem;
  }
}

.hg-handles {
  margin-top: 2.5rem;
  display: block;
  border-top-width: 0px;
  padding: 0px;
}

@media (min-width: 992px) {
  .hg-handles {
    margin-top: 3.5rem;
  }
}

.hg-handles-head {
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 0.25rem;
}

.hg-handles-head .hg-pair-title {
  margin-bottom: 0px;
}

.hg-handle-row .hg-item-media {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  aspect-ratio: 3 / 4;
}

.hg-handle-row .hg-item-media img {
  padding: 0.5rem;
}

@media (min-width: 576px) {
  .hg-handle-row .hg-item-media img {
    padding: 0.75rem;
  }
}

/* Blog index: the lead post is a fixed-height card with the photo cropped to
 * fit, not a card as tall as a portrait photograph (it reached ~1,600px). */

@media (min-width: 992px) {
  .card-post--featured {
    height: 26rem;
    grid-template-rows: 1fr auto;
  }

  .card-post--featured .card-post-img {
    grid-row: span 2 / span 2;
    height: 100%;
    min-height: 0px;
    aspect-ratio: auto;
  }

  .card-post--featured .card-post-content {
    align-self: flex-end;
    padding-bottom: 0.5rem;
  }

  .card-post--featured .card-post-readmore {
    align-self: flex-start;
  }
}

/* Inline estimate callout in articles. */

.blog-article .prose .article-cta {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.article-cta-title {
  margin-bottom: 0.375rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.article-cta-text {
  margin-bottom: 1.25rem;
  max-width: 46ch;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.75);
}

.article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  row-gap: 0.75rem;
}

.blog-article .prose .article-cta-phone {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.blog-article .prose .article-cta-phone:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.blog-article .prose .article-cta-phone {
  background-image: none;
}

.blog-article .prose .article-cta .btn {
  text-decoration-line: none;
}

/* Catalogue photos fill more of their tiles. */

.hg-pair-card .hg-item-media img {
  padding: 0.5rem;
}

@media (min-width: 576px) {
  .hg-pair-card .hg-item-media img {
    padding: 0.75rem;
  }
}

/* The article callout's own colours, above the prose rules that turned its
 * heading and text navy on navy. */

.blog-article .prose aside.article-cta p.article-cta-title {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.blog-article .prose aside.article-cta p.article-cta-text {
  color: rgb(255 255 255 / 0.75);
}

/*
 * Sticky elements across the site.
 *
 * .site-wrapper was overflow:hidden (to stop sideways scroll), and an
 * overflow:hidden ancestor makes every position:sticky inside it inert: the
 * blog sidebar, the FAQ heading column and the services preview were all
 * meant to stay in view and none did. overflow-x:clip prevents the sideways
 * scroll the same way without creating a scroll container, so sticky works.
 */

div.site-wrapper {
  overflow: visible;
  overflow-x: clip;
}

/* Style tiles with a drawing instead of a photograph. */

.style-tile-media.is-vector {
  display: grid;
  place-items: center;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .process-steps-slider > .style-tile-media.is-vector {
    gap: 1.25rem;
  }

  .process-steps-slider > .style-tile-media.is-vector > div:last-child {
    padding-left: 0.25rem;
  }
}

.style-tile-media.is-vector .hw-ill {
  height: 78%;
  width: auto;
  max-width: 100%;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.style-tile:hover .style-tile-media.is-vector .hw-ill {
  --tw-translate-y: -0.25rem;
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Phones: every multi-card section is a swipe row, never a long stack.
 * (Arrows come from ss.scrollRows whenever the row overflows.)
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  div.res-grid,
	div.res-cats,
	div.hg-pairs,
	div#posts-wrapper,
	div.related-posts-row {
    margin-left: 0px;
    margin-right: 0px;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }

  div.res-grid::-webkit-scrollbar,
	div.res-cats::-webkit-scrollbar,
	div.hg-pairs::-webkit-scrollbar,
	div#posts-wrapper::-webkit-scrollbar,
	div.related-posts-row::-webkit-scrollbar {
    display: none;
  }

  div.res-grid > *,
	div.hg-pairs > * {
    width: 85%;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  div.res-cats > * {
    width: 72%;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  div#posts-wrapper > *,
	div.related-posts-row > * {
    width: 82%;
    flex-shrink: 0;
    padding-left: 0px;
    padding-right: 0px;
    scroll-snap-align: start;
  }

  /* The lead post stays a full-width card above the row. */

  div#posts-wrapper > :first-child:has(.card-post--featured) {
    width: 82%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * INTERACTIVE BLOG TOOLS (inc/blog-tools.php)
 * ═══════════════════════════════════════════════════════════════════════════ */

.blog-article .prose .ss-tool,
.ss-tool {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  .blog-article .prose .ss-tool,
.ss-tool {
    padding: 1.75rem;
  }
}

.blog-article .prose .ss-tool p,
.ss-tool p {
  margin-top: 0px;
  margin-bottom: 0px;
}

.ss-tool-kicker {
  margin-bottom: 0.25rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.blog-article .prose .ss-tool .ss-tool-title,
.ss-tool-title {
  margin-bottom: 1.25rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.ss-tool-sub {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.ss-tool-q {
  margin: 0px;
  margin-bottom: 1.25rem;
  border-width: 0px;
  padding: 0px;
}

.ss-tool-q[hidden] {
  display: none;
}

.ss-tool-q legend {
  margin-bottom: 0.625rem;
  padding: 0px;
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.ss-tool-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ss-tool-opt {
  position: relative;
  cursor: pointer;
}

.ss-tool-opt input {
  position: absolute;
  opacity: 0;
}

.ss-tool-opt span,
.ss-chip {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: background-color,border-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.ss-tool-opt span:hover,
.ss-chip:hover {
  border-color: rgb(40 55 74 / 0.4);
}

.ss-tool-opt input:checked + span,
.ss-chip.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ss-tool-opt input:focus-visible + span,
.ss-chip:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #6ba6ca;
}

.ss-tool-result {
  margin-top: 0.5rem;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-size: 0.9375rem;
  line-height: 1.625;
}

.ss-tool-result.is-good {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}

.ss-tool-result.is-warn {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
}

.ss-tool-result.is-bad {
  border-left-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
}

.ss-tool-result p + p {
  margin-top: 0.5rem;
}

.ss-tool-result .is-warn {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.ss-tool-result .is-good {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}

.ss-tool-hint {
  color: rgb(40 55 74 / 0.55);
}

.ss-tool-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.6);
}

.blog-article .prose .ss-tool a,
.ss-tool a {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-decoration-color: rgb(107 166 202 / 0.6);
  text-underline-offset: 4px;
}

.ss-tool-btn {
  margin-top: 1rem;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ss-tool-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.ss-tool-link {
  margin-left: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(40 55 74 / 0.6);
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

.ss-calc {
  display: grid;
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .ss-calc {
    gap: 1.25rem;
  }

  .process-steps-slider > .ss-calc > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .ss-calc--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ss-calc--grid .ss-tool-result,
.ss-calc--grid .ss-tool-btn {
  grid-column: 1 / -1;
}

.ss-calc--grid .ss-tool-btn {
  width: -moz-fit-content;
  width: fit-content;
}

.ss-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(40 55 74 / 0.8);
}

.ss-field em {
  font-weight: 400;
  font-style: normal;
  color: rgb(40 55 74 / 0.5);
}

.ss-field input {
  min-height: 44px;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.ss-field input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(107 166 202 / 0.3);
}

/* Style finder picks */

.ss-picks {
  display: grid;
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .ss-picks {
    gap: 1.25rem;
  }

  .process-steps-slider > .ss-picks > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  .ss-picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.blog-article .prose .ss-tool a.ss-pick,
a.ss-pick {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.blog-article .prose .ss-tool a.ss-pick:hover,
a.ss-pick:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
}

a.ss-pick.is-lead {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ss-pick-label {
  font-family: Montserrat, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.ss-pick-name {
  font-size: 1.125rem;
  font-weight: 600;
}

a.ss-pick.is-lead .ss-pick-name {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

a.ss-pick:not(.is-lead) .ss-pick-name {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.ss-pick-meta {
  font-size: 0.8125rem;
  color: rgb(40 55 74 / 0.6);
}

a.ss-pick.is-lead .ss-pick-meta {
  color: rgb(255 255 255 / 0.7);
}

/* Meters */

.ss-glass-panel {
  margin-top: 1rem;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}

.ss-glass-panel[hidden],
.ss-finish-panel[hidden] {
  display: none;
}

.ss-glass-name {
  margin-bottom: 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.ss-glass-panel > p:not(.ss-glass-name) {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  color: rgb(40 55 74 / 0.75);
}

.ss-meter {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 6rem 1fr;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(40 55 74 / 0.7);
}

@media (max-width: 1023px) {
  .process-steps-slider > .ss-meter {
    gap: 1.25rem;
  }

  .process-steps-slider > .ss-meter > div:last-child {
    padding-left: 0.25rem;
  }
}

.ss-meter-track {
  display: block;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.1);
}

.ss-meter-track > span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

/* Finish matcher */

.ss-finish-panel {
  margin-top: 1rem;
  border-radius: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}

.ss-finish-panel > p {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  color: rgb(40 55 74 / 0.75);
}

.ss-finish-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ss-finish-row figure {
  margin: 0px;
  display: flex;
  width: 6rem;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}

.block-title.ss-finish-row figure h2,.ss-finish-row figure > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.ss-finish-row img {
  width: 6rem;
  height: 6rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.5rem;
}

.ss-finish-row figcaption {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Checklist */

.ss-check-progress {
  margin-bottom: 0.75rem;
  display: inline-flex;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.ss-check-group {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(40 55 74 / 0.55);
}

.blog-article .prose .ss-check ul,
.ss-check ul {
  margin: 0px;
  list-style-type: none;
}

.blog-article .prose .ss-check ul > :not([hidden]) ~ :not([hidden]),
.ss-check ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.blog-article .prose .ss-check ul,
.ss-check ul {
  padding: 0px;
}

.blog-article .prose .ss-check li,
.ss-check li {
  margin: 0px;
  padding: 0px;
}

.blog-article .prose .ss-check li::before,
.blog-article .prose .ss-check li::marker {
  content: none;
}

.ss-check label {
  display: flex;
  cursor: pointer;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.375;
}

.ss-check input {
  margin-top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  accent-color: #28374a;
}

.ss-check input:checked + span {
  color: rgb(40 55 74 / 0.5);
  text-decoration-line: line-through;
}

/* Timeline */

.ss-switch {
  margin-bottom: 1rem;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.ss-switch input {
  width: 1rem;
  height: 1rem;
  accent-color: #28374a;
}

.blog-article .prose .ss-timeline ol,
.ss-timeline ol {
  position: relative;
  margin: 0px;
  list-style-type: none;
}

.blog-article .prose .ss-timeline ol > :not([hidden]) ~ :not([hidden]),
.ss-timeline ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.blog-article .prose .ss-timeline ol,
.ss-timeline ol {
  padding: 0px;
}

.ss-timeline li {
  position: relative;
  margin: 0px;
  display: flex;
  gap: 1rem;
  padding-bottom: 1.25rem;
  padding-left: 0px;
}

.blog-article .prose .ss-timeline li::before {
  content: none;
}

.ss-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 1.0625rem;
  top: 2.25rem;
  width: 1px;
  background-color: rgb(40 55 74 / 0.15);
}

.ss-timeline-num {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-size: 0.875rem;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .process-steps-slider > .ss-timeline-num {
    gap: 1.25rem;
  }

  .process-steps-slider > .ss-timeline-num > div:last-child {
    padding-left: 0.25rem;
  }
}

.ss-timeline-title {
  margin-bottom: 0.125rem;
  font-weight: 600;
}

.ss-timeline li p:not(.ss-timeline-title) {
  font-size: 0.9375rem;
  color: rgb(40 55 74 / 0.7);
}

.ss-timeline.is-rush .ss-timeline-num {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ss-timeline-rush {
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding: 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ss-timeline-rush[hidden] {
  display: none;
}

/* Price factors */

.ss-price-meter {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(40 55 74 / 0.55);
}

@media (max-width: 1023px) {
  .process-steps-slider > .ss-price-meter {
    gap: 1.25rem;
  }

  .process-steps-slider > .ss-price-meter > div:last-child {
    padding-left: 0.25rem;
  }
}

.ss-price-meter .ss-meter-track {
  height: 0.75rem;
}

.ss-price-read {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

@media print {
  body * {
    visibility: hidden;
  }

  .ss-check, .ss-check * {
    visibility: visible;
  }

  .ss-check {
    position: absolute;
    left: 0;
    top: 0;
  }

  .ss-check-actions {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BLOG INDEX (home.php + js/blog-index.js)
 * ═══════════════════════════════════════════════════════════════════════════ */

.blog-hero-inner {
  max-width: 760px;
}

.blog-hero h1 {
  margin-bottom: 1rem;
}

.blog-hero-lede {
  margin-bottom: 1.75rem;
  max-width: 620px;
  font-size: 1.0625rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.8);
}

.blog-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.375rem;
  padding-left: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 20px 40px -20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.blog-search > svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: rgb(40 55 74 / 0.45);
}

.blog-search input {
  margin: 0px;
  height: 2.75rem;
  min-width: 0px;
  flex: 1 1 0%;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blog-search input::-moz-placeholder {
  color: rgb(40 55 74 / 0.45);
}

.blog-search input::placeholder {
  color: rgb(40 55 74 / 0.45);
}

.blog-search input:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blog-search .btn {
  flex-shrink: 0;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.blog-search--inline {
  height: 3rem;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  padding-left: 1rem;
  padding-right: 0.5rem;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.blog-search--inline input {
  height: 100%;
  font-size: 0.9375rem;
}

.blog-topics {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.6);
}

.blog-topics button {
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.1);
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.blog-topics button:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* Section heads: title left, a sentence of context right. */

.blog-section-head {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 992px) {
  .blog-section-head {
    margin-bottom: 2.5rem;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
  }
}

.blog-section-head h2 {
  margin-bottom: 0px;
}

.blog-section-head > p {
  margin-bottom: 0px;
  max-width: 460px;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.7);
}

.blog-tools .blog-section-head > p {
  color: rgb(255 255 255 / 0.7);
}

.blog-eyebrow {
  margin-bottom: 0.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

/* Start here: the lead guide beside two compact ones. */

div.blog-start-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 992px) {
  div.blog-start-grid {
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
  }
}

div.blog-start-grid > div {
  padding: 0px;
}

@media (min-width: 992px) {
  div.blog-start-grid > .blog-start-lead {
    grid-row: span 2 / span 2;
  }

  div.blog-start-grid .card-post--featured {
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  div.blog-start-grid .card-post--featured .card-post-img {
    aspect-ratio: 16/10;
    height: auto;
    min-height: 0px;
  }

  div.blog-start-grid .card-post--featured .card-post-content {
    padding: 2rem;
    padding-bottom: 0.75rem;
  }

  div.blog-start-grid .card-post--featured .card-post-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 1.75rem;
  }

  div.blog-start-grid .card-post--featured .card-post-readmore {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
  }
}

/* Compact card: thumbnail beside the words. The photo is pinned to the
 * card's left edge so its own height never sets the card's height. */

article.card-post--compact {
  position: relative;
  display: block;
  min-height: 8.5rem;
  padding-left: 112px;
}

@media (min-width: 576px) {
  article.card-post--compact {
    padding-left: 40%;
  }
}

article.card-post--compact .card-post-img {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  aspect-ratio: auto;
  height: 100%;
  width: 112px;
}

@media (min-width: 576px) {
  article.card-post--compact .card-post-img {
    width: 40%;
  }
}

article.card-post--compact .card-post-category,
div.blog-grid .card-post-category {
  white-space: nowrap;
}

article.card-post--compact .card-post-content {
  gap: 0.5rem;
  padding: 1rem;
  padding-bottom: 0.25rem;
}

@media (min-width: 576px) {
  article.card-post--compact .card-post-content {
    padding: 1.5rem;
    padding-bottom: 0.5rem;
  }
}

article.card-post--compact .card-post-title {
  font-size: 1.0625rem;
  line-height: 1.375;
}

@media (min-width: 576px) {
  article.card-post--compact .card-post-title {
    font-size: 1.25rem;
  }
}

article.card-post--compact .card-post-excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.875rem;
}

@media (min-width: 576px) {
  article.card-post--compact .card-post-excerpt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

article.card-post--compact .card-post-readmore {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 576px) {
  article.card-post--compact .card-post-readmore {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

article.card-post--compact .card-post-tool {
  display: none;
}

/* Every card: summary and tool badge. */

.card-post .card-post-excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.card-post-tool {
  margin-top: 0.25rem;
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background-color: rgb(107 166 202 / 0.15);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

.card-post-tool > span {
  font-size: 0.625rem;
}

/* Tools band: eight tiles, a swipe row on phones. */

div.blog-tool-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 992px) {
  div.blog-tool-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

a.blog-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.06);
  padding: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: background-color,border-color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

a.blog-tool:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(107 166 202 / 0.6);
  background-color: rgb(255 255 255 / 0.11);
}

@media (min-width: 992px) {
  a.blog-tool {
    padding: 1.5rem;
  }
}

a.blog-tool {
  background-image: none;
}

.blog-tool-icon {
  margin-bottom: 0.5rem;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 0.75rem;
  background-color: rgb(107 166 202 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .process-steps-slider > .blog-tool-icon {
    gap: 1.25rem;
  }

  .process-steps-slider > .blog-tool-icon > div:last-child {
    padding-left: 0.25rem;
  }
}

.blog-tool-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.blog-tool-name {
  font-size: 1.0625rem;
  font-weight: 600;
}

.blog-tool-line {
  flex: 1 1 0%;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.65);
}

.blog-tool-go {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

@media (max-width: 767px) {
  div.blog-tool-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }

  div.blog-tool-row::-webkit-scrollbar {
    display: none;
  }

  div.blog-tool-row > a {
    width: 68%;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* Library toolbar. */

.blog-toolbar {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 992px) {
  .blog-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

div.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

a.blog-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

a.blog-filter:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
}

a.blog-filter {
  background-image: none;
}

a.blog-filter > span {
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.07);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 0.75rem;
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  color: rgb(40 55 74 / 0.6);
}

a.blog-filter.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

a.blog-filter.is-active > span {
  background-color: rgb(255 255 255 / 0.15);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.blog-toolbar-end {
  display: flex;
  gap: 0.5rem;
}

@media (min-width: 992px) {
  .blog-toolbar-end {
    width: 420px;
    flex-shrink: 0;
  }
}

.blog-toolbar-end .blog-search {
  min-width: 0px;
  flex: 1 1 0%;
  flex-basis: auto;
}

select.blog-sort {
  margin: 0px;
  height: 3rem;
  width: auto;
  flex-shrink: 0;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 1rem;
  padding-right: 2.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.blog-count {
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* The library grid. */

div.blog-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 576px) {
  div.blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  div.blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  div.blog-grid {
    gap: 2rem;
  }
}

div.blog-grid > div {
  padding: 0px;
}

div.blog-grid > [hidden] {
  display: none;
}

/* Until the script has run, show only the first batch (no jump on load). */

div.blog-grid:not(.is-ready) > :nth-child(n+10) {
  display: none;
}

@media (max-width: 767px) {
  div.blog-grid:not(.is-ready) > :nth-child(n+7) {
    display: none;
  }

  /* Phones: compact rows, six at a time, instead of tall cards. */

  div.blog-grid .card-post {
    position: relative;
    display: block;
    min-height: 8rem;
    padding-left: 104px;
  }

  div.blog-grid .card-post-img {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    aspect-ratio: auto;
    height: 100%;
    width: 104px;
  }

  div.blog-grid .card-post-content {
    gap: 0.375rem;
    padding: 1rem;
    padding-bottom: 0.25rem;
  }

  div.blog-grid .card-post-meta {
    justify-content: flex-start;
    gap: 0.25rem;
  }

  div.blog-grid .card-post-category {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.6875rem;
  }

  div.blog-grid .card-post-time {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.6875rem;
  }

  div.blog-grid .card-post-title {
    font-size: 1rem;
    line-height: 1.375;
  }

  div.blog-grid .card-post-excerpt {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.8125rem;
  }

  div.blog-grid .card-post-tool {
    display: none;
  }

  div.blog-grid .card-post-readmore {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    font-size: 0.8125rem;
  }

  select.blog-sort {
    max-width: 9.5rem;
    padding-left: 0.75rem;
    padding-right: 2rem;
    font-size: 0.8125rem;
  }

  div.blog-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    scrollbar-width: none;
  }

  div.blog-filters::-webkit-scrollbar {
    display: none;
  }

  .blog-search .btn {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.blog-empty {
  margin-left: auto;
  margin-right: auto;
  max-width: 520px;
  border-radius: 22px;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 2rem;
  text-align: center;
}

.block-title.blog-empty h2,.blog-empty > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.blog-empty[hidden] {
  display: none;
}

.blog-empty-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

[data-blog-more][hidden] {
  display: none;
}

/* Closing card. */

.blog-ask-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 26px;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.75rem;
}

@media (min-width: 992px) {
  .blog-ask-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3rem;
  }
}

.blog-ask-card p:not(.blog-eyebrow) {
  margin-bottom: 0px;
  max-width: 560px;
  color: rgb(40 55 74 / 0.75);
}

p.blog-ask-title {
  margin-bottom: 0.5rem;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* Article "short answer" box. */

.blog-article .prose .article-summary {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: 20px;
  border-width: 1px;
  border-color: rgb(107 166 202 / 0.3);
  background-color: rgb(107 166 202 / 0.08);
  padding: 1.5rem;
}

@media (min-width: 576px) {
  .blog-article .prose .article-summary {
    padding: 1.75rem;
  }
}

.blog-article .prose .article-summary-title {
  margin-bottom: 0.75rem;
  margin-top: 0px;
  font-family: Montserrat, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

.blog-article .prose .article-summary ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

.blog-article .prose .article-summary li {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.blog-article .prose .article-summary li:last-child {
  margin-bottom: 0px;
}

/* Article comparison tables: scroll sideways inside their own box on phones. */

.blog-article .prose .table-scroll {
  margin-top: 2rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.blog-article .prose .table-scroll table {
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.375;
}

.blog-article .prose .table-scroll th {
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.blog-article .prose .table-scroll td {
  border-width: 0px;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: top;
  color: rgb(40 55 74 / 0.8);
}

.blog-article .prose .table-scroll td:first-child {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.blog-article .prose .table-scroll tbody tr:nth-child(even) td {
  background-color: rgb(242 244 246 / 0.6);
}

.blog-start-lead .card-post-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Chip and tool rows: arrows sit on the row itself. */

.scroll-row:has(> .blog-filters) > .scroll-row-btn {
  width: 2rem;
  height: 2rem;
  top: 45%;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * PROCESS STEPS, grid style (modules/process-steps.php): a connected journey.
 * ═══════════════════════════════════════════════════════════════════════════ */

ol.psteps {
  position: relative;
  margin: 0px;
  display: grid;
  list-style-type: none;
  gap: 2.5rem;
  padding: 0px;
}

@media (max-width: 1023px) {
  .process-steps-slider > ol.psteps {
    gap: 1.25rem;
  }

  .process-steps-slider > ol.psteps > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 768px) {
  ol.psteps {
    gap: 2rem;
  }
}

ol.psteps {
  grid-template-columns: 1fr;
}

ol.psteps > :not([hidden]) ~ :not([hidden]),
ul.psteps-facts > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

/* The track joining the steps: a dashed rail with an accent run over it. */

ol.psteps::before,
ol.psteps::after {
  content: '';
  pointer-events: none;
  position: absolute;
}

ol.psteps::before {
  left: 2.25rem;
  top: 2.25rem;
  bottom: 2.25rem;
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(40, 55, 74, 0.28) 0 6px, transparent 6px 12px);
}

ol.psteps::after {
  left: 2.25rem;
  top: 2.25rem;
  height: 34%;
  width: 2px;
  background: linear-gradient(to bottom, #6ba6ca, rgba(107, 166, 202, 0));
}

li.pstep {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: flex-start;
  gap: 1.25rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > li.pstep {
    gap: 1.25rem;
  }

  .process-steps-slider > li.pstep > div:last-child {
    padding-left: 0.25rem;
  }
}

.pstep-node {
  position: relative;
  z-index: 1;
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border-radius: 22px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 18px 30px -16px rgba(16,28,45,0.65);
  --tw-shadow-colored: 0 18px 30px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .pstep-node {
    gap: 1.25rem;
  }

  .process-steps-slider > .pstep-node > div:last-child {
    padding-left: 0.25rem;
  }
}

.pstep-node svg {
  width: 2.25rem;
  height: 2.25rem;
}

.pstep-num {
  position: absolute;
  right: -0.5rem;
  top: -0.5rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 9999px;
  border-width: 3px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  font-size: 0.75rem;
  font-weight: 700;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .process-steps-slider > .pstep-num {
    gap: 1.25rem;
  }

  .process-steps-slider > .pstep-num > div:last-child {
    padding-left: 0.25rem;
  }
}

li.pstep:hover .pstep-node {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

li.pstep:hover .pstep-num {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}

.pstep-body {
  padding-top: 0.25rem;
}

p.pstep-kicker {
  margin-bottom: 0.375rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

p.pstep-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  p.pstep-title {
    font-size: 1.375rem;
  }
}

p.pstep-text {
  margin-bottom: 0px;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.75);
}

@media (min-width: 768px) {
  ol.psteps {
    grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr));
  }

  ol.psteps::before,
	ol.psteps::after {
    top: 3rem;
    bottom: auto;
    left: calc(100% / (var(--steps, 3) * 2));
    height: 2px;
  }

  ol.psteps::before {
    right: calc(100% / (var(--steps, 3) * 2));
    width: auto;
    background: repeating-linear-gradient(to right, rgba(40, 55, 74, 0.28) 0 8px, transparent 8px 16px);
  }

  ol.psteps::after {
    width: calc(100% - 100% / var(--steps, 3));
    background: linear-gradient(to right, #6ba6ca 0%, rgba(107, 166, 202, 0.15) 100%);
  }

  li.pstep {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  li.block-title.pstep h2,li.pstep > .block-title h2 {
    margin-left: auto;
    margin-right: auto;
  }

  .pstep-node {
    width: 6rem;
    height: 6rem;
    border-radius: 28px;
  }

  .pstep-node svg {
    width: 2.75rem;
    height: 2.75rem;
  }

  .pstep-num {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.8125rem;
  }

  .pstep-body {
    max-width: 22rem;
    padding-top: 0.75rem;
  }
}

/* Facts and the way to start. */

.psteps-foot {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  background-color: rgb(255 255 255 / 0.8);
  padding: 1.25rem;
  --tw-shadow: 0 14px 30px -24px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 14px 30px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 992px) {
  .psteps-foot {
    margin-top: 3.5rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem;
    padding-left: 2rem;
  }
}

ul.psteps-facts {
  margin: 0px;
  display: grid;
  list-style-type: none;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  row-gap: 0.625rem;
  padding: 0px;
}

@media (max-width: 1023px) {
  .process-steps-slider > ul.psteps-facts {
    gap: 1.25rem;
  }

  .process-steps-slider > ul.psteps-facts > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  ul.psteps-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

ul.psteps-facts li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

ul.psteps-facts li::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: rgb(107 166 202 / 0.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23466c83' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5'/%3E%3C/svg%3E");
  background-size: 100%;
}

a.psteps-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pstep-node {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FINISH DETAIL WINDOW (inc/finishes.php): every swatch opens a closer look.
 * ═══════════════════════════════════════════════════════════════════════════ */

button.finish-swatch-btn {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  text-align: center;
}

button.block-title.finish-swatch-btn h2,button.finish-swatch-btn > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.finish-swatch-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: 112px;
}

.finish-swatch-btn:hover .finish-swatch-img,
.finish-swatch-btn:focus-visible .finish-swatch-img {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(107 166 202 / 0.45);
  --tw-shadow: 0 10px 20px -14px rgba(16,28,45,0.55);
  --tw-shadow-colored: 0 10px 20px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.finish-swatch-btn:focus-visible {
  outline: none;
}

.finish-swatch-btn:focus-visible .finish-swatch-img {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 166 202 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

.finish-swatch-zoom {
  position: absolute;
  bottom: 0.375rem;
  right: 0.375rem;
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  place-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0;
  --tw-shadow: 0 6px 12px -6px rgba(16,28,45,0.6);
  --tw-shadow-colored: 0 6px 12px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .finish-swatch-zoom {
    gap: 1.25rem;
  }

  .process-steps-slider > .finish-swatch-zoom > div:last-child {
    padding-left: 0.25rem;
  }
}

.finish-swatch-zoom svg {
  width: 0.875rem;
  height: 0.875rem;
}

.finish-swatch-btn:hover .finish-swatch-zoom,
.finish-swatch-btn:focus-visible .finish-swatch-zoom {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

/* Touch screens have no hover: show the magnifier so it reads as tappable. */

@media (hover: none) {
  .finish-swatch-zoom {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0.9;
  }
}

html.fd-lock {
  overflow: hidden;
}

dialog.finish-dialog {
  margin: auto;
  width: min(920px, calc(100vw - 2rem));
  max-width: none;
  overflow: visible;
  border-radius: 26px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 40px 90px -30px rgba(16,28,45,0.7);
  --tw-shadow-colored: 0 40px 90px -30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  max-height: calc(100dvh - 2rem);
}

dialog.finish-dialog::backdrop {
  background: rgba(16, 22, 30, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

dialog.finish-dialog[open] {
  animation: fd-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fd-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

button.fd-close {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 3;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  place-items: center;
  border-radius: 9999px;
  border-width: 0px;
  background-color: rgb(40 55 74 / 0.06);
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > button.fd-close {
    gap: 1.25rem;
  }

  .process-steps-slider > button.fd-close > div:last-child {
    padding-left: 0.25rem;
  }
}

button.fd-close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

button.fd-close svg {
  width: 1rem;
  height: 1rem;
}

section.fd-panel {
  display: grid;
  overflow-y: auto;
}

@media (max-width: 1023px) {
  .process-steps-slider > section.fd-panel {
    gap: 1.25rem;
  }

  .process-steps-slider > section.fd-panel > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 768px) {
  section.fd-panel {
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  }
}

section.fd-panel {
  max-height: calc(100dvh - 2rem - 4.5rem);
}

section.fd-panel[hidden] {
  display: none;
}

section.fd-panel.is-in .fd-info > *,
section.fd-panel.is-in .fd-stage > * {
  animation: fd-rise 0.35s ease-out both;
}

section.fd-panel.is-in .fd-info > :nth-child(2) {
  animation-delay: 0.03s;
}

section.fd-panel.is-in .fd-info > :nth-child(3) {
  animation-delay: 0.06s;
}

section.fd-panel.is-in .fd-info > :nth-child(n+4) {
  animation-delay: 0.09s;
}

section.fd-panel.is-in .fd-stage > :nth-child(2) {
  animation-delay: 0.08s;
}

@keyframes fd-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fd-stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #f2f4f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(242 244 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .fd-stage {
    border-top-left-radius: 26px;
    border-bottom-left-radius: 26px;
    border-top-right-radius: 0px;
    padding: 1.75rem;
  }
}

.fd-photo {
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  border-radius: 20px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .fd-photo {
    gap: 1.25rem;
  }

  .process-steps-slider > .fd-photo > div:last-child {
    padding-left: 0.25rem;
  }
}

.fd-photo img {
  height: 100%;
  max-height: 340px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* A rendered metal chip, like a finish sample in the hand: the photo shows
 * the shape, this shows the colour and sheen at size. */

.fd-sample {
  position: relative;
  display: flex;
  height: 5rem;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 16px;
  padding: 0.75rem;
}

@media (min-width: 768px) {
  .fd-sample {
    height: 6rem;
  }
}

.fd-sample {
  background: var(--fd-metal);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 6px rgba(0, 0, 0, 0.18), 0 10px 20px -14px rgba(16, 28, 45, 0.6);
}

.fd-sample.has-grain::before {
  content: '';
  position: absolute;
  inset: 0px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px, transparent 2px 3px);
}

/* A slow light sweep across the chip, the way a sample catches a window. */

.fd-sample::after {
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: -50%;
  width: 33.333333%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: fd-sheen 3.2s ease-in-out infinite;
}

@keyframes fd-sheen {
  0%, 20% {
    transform: translateX(0);
  }

  70%, 100% {
    transform: translateX(520%);
  }
}

.fd-sample span {
  position: relative;
  z-index: 1;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.85);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.fd-info {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  padding-top: 1.25rem;
}

@media (min-width: 768px) {
  .fd-info {
    padding: 2rem;
    padding-right: 3rem;
  }
}

p.fd-kicker {
  margin-bottom: 0.375rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

h2.fd-name {
  margin-bottom: 0.25rem;
  font-size: 1.75rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  h2.fd-name {
    font-size: 2rem;
  }
}

p.fd-tag {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: rgb(40 55 74 / 0.8);
}

p.fd-long {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(40 55 74 / 0.75);
}

.fd-meters {
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .fd-meters {
    gap: 1.25rem;
  }

  .process-steps-slider > .fd-meters > div:last-child {
    padding-left: 0.25rem;
  }
}

p.fd-meter-label {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.fd-meter-track {
  display: flex;
  gap: 0.25rem;
}

.fd-meter-track span {
  height: 0.375rem;
  flex: 1 1 0%;
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.15);
}

.fd-meter-track span.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

p.fd-meter-ends {
  margin-bottom: 0px;
  margin-top: 0.375rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(40 55 74 / 0.5);
}

p.fd-sub {
  margin-bottom: 0.5rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(40 55 74 / 0.6);
}

ul.fd-pairs {
  margin: 0px;
  margin-bottom: 1rem;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0px;
}

ul.fd-pairs > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

ul.fd-pairs li {
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

p.fd-care {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: rgb(40 55 74 / 0.75);
}

p.fd-care strong {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.fd-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  row-gap: 0.75rem;
}

a.fd-link {
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

a.fd-link:hover {
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

a.fd-link {
  background-image: none;
}

/* Browse every finish without closing. */

.fd-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-top-width: 1px;
  border-color: rgb(40 55 74 / 0.1);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

button.fd-step {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  place-items: center;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > button.fd-step {
    gap: 1.25rem;
  }

  .process-steps-slider > button.fd-step > div:last-child {
    padding-left: 0.25rem;
  }
}

button.fd-step:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

button.fd-step svg {
  width: 1rem;
  height: 1rem;
}

.fd-thumbs {
  display: flex;
  gap: 0.5rem;
}

button.fd-thumb {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  padding: 0px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

button.fd-thumb:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

button.fd-thumb {
  background: var(--fd-metal);
  box-shadow: 0 0 0 1px rgba(40, 55, 74, 0.2);
}

button.fd-thumb.is-on {
  box-shadow: 0 0 0 2px #28374a;
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Phones: a sheet from the bottom of the screen. */

@media (max-width: 767px) {
  dialog.finish-dialog {
    margin-bottom: 0px;
    width: 100%;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    max-height: 92dvh;
  }

  dialog.finish-dialog[open] {
    animation: fd-sheet 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  section.fd-panel {
    max-height: calc(92dvh - 4.25rem);
  }

  .fd-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    padding-right: 3.5rem;
  }

  @media (max-width: 1023px) {
    .process-steps-slider > .fd-stage {
      gap: 1.25rem;
    }

    .process-steps-slider > .fd-stage > div:last-child {
      padding-left: 0.25rem;
    }
  }

  .fd-photo {
    padding: 0.5rem;
  }

  .fd-sample {
    height: auto;
  }

  .fd-meters {
    gap: 0.5rem;
    padding: 0.75rem;
  }

  button.fd-thumb {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@keyframes fd-sheet {
  from {
    transform: translateY(40px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.finish-dialog[open],
	section.fd-panel.is-in .fd-info > *,
	section.fd-panel.is-in .fd-stage > *,
	.fd-sample::after {
    animation: none;
  }
}

p.finish-swatches-hint {
  margin-bottom: 0px;
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(40 55 74 / 0.55);
}

p.block-title.finish-swatches-hint h2,p.finish-swatches-hint > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

.card-media:hover p.finish-swatches-hint,
.card-media:focus-within p.finish-swatches-hint {
  color: rgb(255 255 255 / 0.7);
}

.cfg-head {
  inset: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HARDWARE & GLASS: glass facts card, fitting notes, "Try It On".
 * ═══════════════════════════════════════════════════════════════════════════ */

figure.hg-glass-view {
  display: block;
}

figcaption.hg-glass-card {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 18px;
  background-color: rgb(255 255 255 / 0.95);
  padding: 1rem;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 20px 40px -24px rgba(0,0,0,0.7);
  --tw-shadow-colored: 0 20px 40px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

@media (min-width: 992px) {
  figcaption.hg-glass-card {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    padding: 1.25rem;
  }
}

.hg-glass-card-name {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.hg-glass-card-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-glass-card-meters {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-glass-card-meters > div:last-child {
    padding-left: 0.25rem;
  }
}

.hg-meter {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.hg-meter-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(40 55 74 / 0.6);
}

.hg-meter-track {
  display: flex;
  gap: 0.25rem;
}

.hg-meter-track i {
  height: 0.375rem;
  flex: 1 1 0%;
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.15);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.hg-meter-track i.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.hg-glass-card-best {
  font-size: 0.8125rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.75);
}

.hg-glass-card-best strong {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

a.hg-guide-link {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

a.hg-guide-link:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

a.hg-guide-link {
  background-image: none;
}

a.hg-guide-link--dark {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

a.hg-guide-link--dark:hover {
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

.hg-item-note {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.8125rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.65);
}

.hg-item--sm .hg-item-note {
  text-align: center;
  font-size: 0.75rem;
}

.block-title.hg-item--sm .hg-item-note h2,.hg-item--sm .hg-item-note > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

button.hg-try {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

button.hg-try:hover {
  --tw-border-opacity: 1;
  border-color: rgb(40 55 74 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (max-width: 991px) {
  figure.hg-glass-view {
    margin-top: 2rem;
    aspect-ratio: auto;
  }

  figure.hg-glass-view .hg-glass-img {
    position: relative;
    height: 14rem;
  }

  @media (min-width: 576px) {
    figure.hg-glass-view .hg-glass-img {
      height: 18rem;
    }
  }

  figcaption.hg-glass-card {
    position: static;
    margin-top: 0.75rem;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

/* Notes of different lengths: the buttons still line up. */

figure.hg-item--sm .hg-item-note {
  flex: 1 1 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * HARDWARE & GLASS, tightened (Oct 2026)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Configurator: drawing and spec on the left, choices on the right, both
 * columns ending together. */

@media (min-width: 1024px) {
  div.cfg-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "preview choices" "summary summary";
    grid-template-rows: auto auto;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    row-gap: 1.5rem;
  }

  div.cfg-grid > .cfg-preview {
    grid-area: preview;
    position: relative;
    top: auto;
  }

  div.cfg-grid > .cfg-choices {
    grid-area: choices;
  }

  div.cfg-grid > .cfg-summary {
    grid-area: summary;
  }

  div.cfg-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  div.cfg-summary .cfg-summary-actions {
    max-width: 24rem;
    flex-shrink: 0;
  }

  div.cfg-pair {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}

.cfg-scene {
  aspect-ratio: 4 / 3.5;
}

div.cfg-choices {
  gap: 1.75rem;
}

div.cfg-summary {
  margin-top: 0px;
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  padding: 1.25rem;
}

@media (min-width: 992px) {
  div.cfg-summary {
    padding: 1.5rem;
  }
}

.cfg-summary-line {
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
}

@media (min-width: 992px) {
  .cfg-summary-line {
    margin-bottom: 0px;
    font-size: 1.25rem;
  }
}

div.cfg-summary .cfg-summary-note {
  width: 100%;
}

.cfg-options--swatches {
  gap: 0.5rem;
}

/* ── Hardware header: heading left, intro right. */

.hg-hw-head {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 992px) {
  .hg-hw-head {
    margin-bottom: 2.5rem;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}

.hg-hw-head .hg-lead {
  margin-top: 0px;
}

@media (min-width: 992px) {
  .hg-hw-head .hg-lead {
    max-width: 30rem;
  }
}

/* Compact fitting tiles: wide, not square. */

.hg-pair-card .hg-item-media {
  aspect-ratio: 16 / 11;
}

.hg-pair-card .hg-item-media img {
  padding: 0.75rem;
}

@media (min-width: 576px) {
  .hg-pair-card .hg-item-media img {
    padding: 1rem;
  }
}

.hg-pair-card .hg-pair-body {
  margin-bottom: 1rem;
}

.hg-pair-card .hg-item-note {
  text-align: center;
}

.block-title.hg-pair-card .hg-item-note h2,.hg-pair-card .hg-item-note > .block-title h2 {
  margin-left: auto;
  margin-right: auto;
}

/* ── Glass: five rendered samples, then one detail band. */

.hg-glass-head {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 992px) {
  .hg-glass-head {
    margin-bottom: 2.5rem;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}

.hg-glass-head .hg-lead {
  margin-top: 0px;
}

@media (min-width: 992px) {
  .hg-glass-head .hg-lead {
    max-width: 32rem;
  }
}

div.hg-gtiles {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > div.hg-gtiles {
    gap: 1.25rem;
  }

  .process-steps-slider > div.hg-gtiles > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 992px) {
  div.hg-gtiles {
    gap: 1rem;
  }
}

button.hg-gtile {
  display: flex;
  cursor: pointer;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 18px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.04);
  padding: 0.625rem;
  padding-bottom: 0.875rem;
  text-align: left;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: border-color,background-color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

button.hg-gtile:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(255 255 255 / 0.35);
}

@media (min-width: 992px) {
  button.hg-gtile {
    padding: 0.75rem;
    padding-bottom: 1rem;
  }
}

button.hg-gtile.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
  background-color: rgb(107 166 202 / 0.15);
  --tw-shadow: 0 0 0 1px #6ba6ca;
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hg-gtile-name {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (min-width: 992px) {
  .hg-gtile-name {
    font-size: 1.0625rem;
  }
}

/* The sample: tile wall, a niche with bottles, glass over it. Same tints as
 * the configurator drawing. */

.hg-gsample {
  --edge: 3px;
  --glass-tint: rgba(150, 205, 182, 0.14);
  --glass-edge: #8fc4ab;
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background:
		linear-gradient(to right, rgba(40, 55, 74, 0.1) 1px, transparent 1px) 0 0 / 33.33% 100%,
		linear-gradient(to bottom, rgba(40, 55, 74, 0.1) 1px, transparent 1px) 0 0 / 100% 33.33%,
		linear-gradient(160deg, #f4f2ee, #e2ded6);
}

.hg-gsample[data-thick="12"] {
  --edge: 6px;
}

.hg-gsample[data-glass="low-iron"] {
  --glass-tint: rgba(255, 255, 255, 0.05);
  --glass-edge: #e3eef0;
}

.hg-gsample[data-glass="frosted"] {
  --glass-tint: rgba(250, 252, 253, 0.55);
  --glass-edge: #f2f6f7;
}

.hg-gsample[data-glass="light-tint"] {
  --glass-tint: rgba(74, 70, 66, 0.32);
  --glass-edge: #77726c;
}

.hg-gsample-niche {
  position: absolute;
  border-radius: 3px;
  left: 26%;
  top: 24%;
  width: 48%;
  height: 50%;
  background: linear-gradient(to bottom, #d9d4cb, #e6e2db);
  box-shadow: inset 0 5px 8px -4px rgba(40, 55, 74, 0.35);
}

.hg-gsample-niche i,
.hg-gsample-niche b {
  position: absolute;
  bottom: 10%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.hg-gsample-niche i {
  left: 22%;
  width: 20%;
  height: 62%;
  background: linear-gradient(90deg, #6ba6ca, #8fbfdc 40%, #5a92b4);
}

.hg-gsample-niche b {
  left: 54%;
  width: 22%;
  height: 46%;
  background: linear-gradient(90deg, #e9e2d3, #fbf8f1 40%, #d8d0bf);
}

.hg-gsample-pane {
  position: absolute;
  inset: 8% 14%;
  background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 58%, rgba(255, 255, 255, 0) 66%),
		var(--glass-tint);
  border-left: var(--edge) solid var(--glass-edge);
  border-right: var(--edge) solid var(--glass-edge);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.hg-gsample[data-glass="frosted"] .hg-gsample-pane {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

div.hg-glass-detail {
  display: grid;
  overflow: hidden;
  border-radius: 24px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
}

@media (min-width: 992px) {
  div.hg-glass-detail {
    grid-template-columns: minmax(0,6fr) minmax(0,5fr);
  }
}

figure.hg-glass-photo {
  position: relative;
  margin: 0px;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: rgb(0 0 0 / 0.2);
}

@media (min-width: 992px) {
  figure.hg-glass-photo {
    aspect-ratio: auto;
    min-height: 22rem;
  }
}

.hg-glass-info {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .hg-glass-info {
    padding: 2rem;
  }
}

p.hg-glass-kicker {
  margin-bottom: 0.375rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

p.hg-glass-title {
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

p.hg-glass-desc {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.7);
}

.hg-glass-meters {
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  border-radius: 16px;
  background-color: rgb(255 255 255 / 0.06);
  padding: 1rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-glass-meters {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-glass-meters > div:last-child {
    padding-left: 0.25rem;
  }
}

.hg-glass-meters .hg-meter-label {
  color: rgb(255 255 255 / 0.6);
}

.hg-glass-meters .hg-meter-track i {
  background-color: rgb(255 255 255 / 0.15);
}

.hg-glass-meters .hg-meter-track i.is-on {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

p.hg-glass-best {
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(255 255 255 / 0.75);
}

p.hg-glass-best strong {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hg-glass-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 0.75rem;
}

.hg-glass-actions a.hg-guide-link {
  margin-top: 0px;
}

@media (max-width: 991px) {
  div.hg-gtiles {
    margin-left: -1rem;
    margin-right: -1rem;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  div.hg-gtiles::-webkit-scrollbar {
    display: none;
  }

  div.hg-gtiles > button.hg-gtile {
    width: 40%;
    flex-shrink: 0;
  }

  @media (min-width: 576px) {
    div.hg-gtiles > button.hg-gtile {
      width: 28%;
    }
  }

  div.hg-gtiles > button.hg-gtile {
    scroll-snap-align: start;
  }
}

/* ── Three choices: each card previews its choice. */

ol.hg-choice-list {
  margin: 0px;
  display: grid;
  list-style-type: none;
  gap: 1rem;
  padding: 0px;
}

@media (max-width: 1023px) {
  .process-steps-slider > ol.hg-choice-list {
    gap: 1.25rem;
  }

  .process-steps-slider > ol.hg-choice-list > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 768px) {
  ol.hg-choice-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  ol.hg-choice-list {
    gap: 1.5rem;
  }
}

ol.hg-choice-list > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0;
}

li.hg-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 14px 30px -22px rgba(16,28,45,0.30);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 14px 30px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

li.hg-choice:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 1px 2px rgba(16,28,45,0.04),0 26px 44px -26px rgba(16,28,45,0.45);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 26px 44px -26px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 992px) {
  li.hg-choice {
    padding: 1.5rem;
  }
}

.hg-choice-top {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hg-choice-num {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-choice-num {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-choice-num > div:last-child {
    padding-left: 0.25rem;
  }
}

.hg-choice-count {
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.06);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(40 55 74 / 0.7);
}

.hg-choice-preview {
  margin-bottom: 1.25rem;
  display: flex;
  height: 6.5rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 16px;
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
}

.hg-choice-preview--glass .hg-gsample {
  height: 100%;
  flex: 1 1 0%;
  border-radius: 8px;
  aspect-ratio: auto;
}

.hg-choice-preview--glass .hg-gsample-niche {
  left: 18%;
  width: 64%;
  top: 30%;
  height: 36%;
}

.hg-choice-photo {
  display: grid;
  aspect-ratio: 1 / 1;
  flex: 1 1 0%;
  place-items: center;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.375rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hg-choice-photo {
    gap: 1.25rem;
  }

  .process-steps-slider > .hg-choice-photo > div:last-child {
    padding-left: 0.25rem;
  }
}

.hg-choice-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  mix-blend-mode: multiply;
}

.hg-choice-preview--configure {
  justify-content: space-between;
}

button.hg-choice-chip {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  flex: 1 1 0%;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 3px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  padding: 0px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

button.hg-choice-chip:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

button.hg-choice-chip {
  max-width: 3rem;
  background: var(--fd-metal);
  box-shadow: 0 0 0 1px rgba(40, 55, 74, 0.18), 0 6px 12px -8px rgba(16, 28, 45, 0.6);
}

p.hg-choice-title {
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

@media (min-width: 992px) {
  p.hg-choice-title {
    font-size: 1.375rem;
  }
}

p.hg-choice-text {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.65);
}

a.hg-choice-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  background-image: none;
}

li.hg-choice:hover a.hg-choice-link span {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

a.hg-choice-link span {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 991px) {
  div.hg-gtiles {
    scroll-padding-inline: 1rem;
  }
}

@media (max-width: 1023px) {
  div.cfg-pair {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * GALLERY: instant filters, style spotlight, closer-look captions.
 * ═══════════════════════════════════════════════════════════════════════════ */

a.gallery-cell[hidden] {
  display: none;
}

.pill-count {
  margin-left: 0.25rem;
  border-radius: 9999px;
  background-color: rgb(40 55 74 / 0.08);
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 0.6875rem;
  font-weight: 600;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.pill-active .pill-count,
.pill:hover .pill-count {
  background-color: rgb(255 255 255 / 0.2);
}

.gallery-zoom {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 2;
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  place-items: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  opacity: 0;
  --tw-shadow: 0 8px 16px -8px rgba(16,28,45,0.6);
  --tw-shadow-colored: 0 8px 16px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .gallery-zoom {
    gap: 1.25rem;
  }

  .process-steps-slider > .gallery-zoom > div:last-child {
    padding-left: 0.25rem;
  }
}

.gallery-zoom svg {
  width: 1rem;
  height: 1rem;
}

a.gallery-cell:hover .gallery-zoom,
a.gallery-cell:focus-visible .gallery-zoom {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

@media (hover: none) {
  .gallery-zoom {
    width: 2rem;
    height: 2rem;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    opacity: 0.9;
  }
}

div.gallery-spot {
  margin-bottom: 2rem;
  display: grid;
  align-items: center;
  gap: 1.25rem;
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > div.gallery-spot {
    gap: 1.25rem;
  }

  .process-steps-slider > div.gallery-spot > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 576px) {
  div.gallery-spot {
    grid-template-columns: 5.5rem 1fr;
  }
}

@media (min-width: 992px) {
  div.gallery-spot {
    margin-bottom: 2.5rem;
    grid-template-columns: 6.5rem 1fr auto;
    gap: 2rem;
    padding: 1.5rem;
  }
}

div.gallery-spot {
  animation: fd-rise 0.35s ease-out both;
}

div.gallery-spot[hidden] {
  display: none;
}

.gallery-spot-art {
  display: none;
  width: 5.5rem;
  height: 5.5rem;
  place-items: center;
  border-radius: 18px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  .gallery-spot-art {
    display: grid;
  }
}

@media (min-width: 992px) {
  .gallery-spot-art {
    width: 6.5rem;
    height: 6.5rem;
  }
}

.gallery-spot-art .hw-ill {
  height: 78%;
  width: auto;
}

p.gallery-spot-kicker {
  margin-bottom: 0.25rem;
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

p.gallery-spot-title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

dl.gallery-spot-facts {
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

dl.gallery-spot-facts > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.15);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

dl.gallery-spot-facts dt {
  margin: 0px;
  font-family: Montserrat, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(40 55 74 / 0.55);
}

dl.gallery-spot-facts dd {
  margin: 0px;
  font-size: 0.8125rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.gallery-spot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  row-gap: 0.75rem;
}

@media (min-width: 576px) {
  .gallery-spot-actions {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 992px) {
  .gallery-spot-actions {
    grid-column: span 1 / span 1;
  }
}

a.gallery-spot-link {
  font-size: 0.9375rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

a.gallery-spot-link:hover {
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

a.gallery-spot-link {
  background-image: none;
}

/* Lightbox caption: what it is, and where to go from here. */

.fancybox-caption {
  padding-bottom: 1.5rem;
}

.gl-cap {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 56rem;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 576px) {
  .gl-cap {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.gl-cap-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 576px) {
  .gl-cap-text {
    align-items: flex-start;
  }
}

.gl-cap-text strong {
  font-size: 1.125rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.gl-cap-text span {
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.7);
}

.gl-cap-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.fancybox-caption .gl-cap-links a {
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  background-image: none;
}

.fancybox-caption .gl-cap-links a:hover {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.fancybox-caption .gl-cap-links a.gl-cap-cta {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.fancybox-caption .gl-cap-links a.gl-cap-cta:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

div.gallery-grid--photos > a.gallery-cell[hidden] {
  display: none;
}

/* Free Estimate process card stats: sized to the half-width column. */

p.stat-number.pifs-stat-num {
  font-size: clamp(1.5rem, 6.4vw, 2.3rem);
  line-height: 1.1;
  overflow-wrap: normal;
}

/* ── Configurator drawing, per style ─────────────────────────────────────── */

.cfg-transom,
.cfg-rail {
  display: none !important;
}

.cfg-scene-note {
  left: 4%;
  bottom: 3%;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.85);
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

/* Single door: one pane across the opening, hinged to the wall. */

.cfg-scene[data-style="single"] .cfg-pane--panel {
  display: none;
}

.cfg-scene[data-style="single"] .cfg-pane--door {
  left: 9%;
  width: 82%;
}

.cfg-scene[data-style="single"] .cfg-thick {
  left: calc(9% + 82% + 1.2%);
}

/* Splash panel: one fixed pane, no door. */

.cfg-scene[data-style="splash"] .cfg-pane--door {
  display: none;
}

.cfg-scene[data-style="splash"] .cfg-pane--panel {
  width: 52%;
}

.cfg-scene[data-style="splash"] .cfg-thick {
  left: calc(6% + 52% + 1.2%);
}

/* Sliders: a top rail with rollers; the door passes in front of the panel. */

.cfg-scene[data-style="slider"] .cfg-rail {
  display: block !important;
  left: 5%;
  right: 5%;
  top: 4.2%;
  height: 2.2%;
  border-radius: 99px;
  background: var(--hw);
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.5);
}

.cfg-scene[data-style="slider"] .cfg-rail i,
.cfg-scene[data-style="slider"] .cfg-rail b {
  top: -60%;
  width: 4.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hw);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 4px 8px -4px rgba(0, 0, 0, 0.6);
}

.cfg-scene[data-style="slider"] .cfg-rail i {
  left: 48%;
}

.cfg-scene[data-style="slider"] .cfg-rail b {
  left: 86%;
}

.cfg-scene[data-style="slider"] .cfg-pane {
  top: 7%;
}

.cfg-scene[data-style="slider"] .cfg-pane--panel {
  width: 50%;
}

.cfg-scene[data-style="slider"] .cfg-pane--door {
  left: 44%;
  width: 50%;
  z-index: 1;
}

.cfg-scene[data-style="slider"] .cfg-hinge {
  display: none;
}

/* Steam: glass to the ceiling with a transom over the door. */

.cfg-scene[data-style="steam"] .cfg-pane {
  top: 22%;
}

.cfg-scene[data-style="steam"] .cfg-transom {
  display: block !important;
  left: 6%;
  right: 6.5%;
  top: 0;
  height: 21%;
  background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 30%),
		var(--glass-tint);
  border-bottom: 3px solid var(--glass-edge);
  border-left: var(--edge) solid var(--glass-edge);
  border-right: var(--edge) solid var(--glass-edge);
}

.cfg-scene[data-style="steam"][data-glass="frosted"] .cfg-transom {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.cfg-scene[data-style="steam"] .cfg-thick {
  top: 24%;
}

/* Hero facts: one line on desktop. */

@media (min-width: 992px) {
  dl.hero-facts {
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: -moz-max-content;
    width: max-content;
    max-width: none;
  }

  dl.hero-facts > div {
    white-space: nowrap;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}

/* Five-photo project mosaic (style pages): one large, four in a grid beside
 * it; the fifth carries "+N More Photos" and every photo is in the lightbox. */

a.project.project--extra {
  display: none;
}

@media (min-width: 992px) {
  div.projects.projects--five {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: clamp(30rem, 40vw, 36rem);
  }

  div.projects--five > a.project:first-child {
    grid-row: span 2;
  }

  div.projects--five > a.project {
    min-height: 0;
  }
}

.project-more {
  position: absolute;
  inset: 0px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background-color: rgb(40 55 74 / 0.7);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(2px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.project-more strong {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.project-more span {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.85);
}

a.project--more:hover .project-more {
  background-color: rgb(40 55 74 / 0.55);
}

a.project--more .project-caption,
a.project--more .project-zoom {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FOOTER: showroom and contact under the overlapping estimate form.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Contact, back in the company column, stacked. */

/* Contact: a full-width row under the link columns, so no column runs long. */

div.footer-contact-block {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.15);
  padding-top: 1.75rem;
}

@media (min-width: 576px) {
  div.footer-contact-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* Planning shortcuts under the estimate form. */

.footer-tools {
  margin-top: 2.5rem;
}

p.footer-tools-title {
  margin-bottom: 0.75rem;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

div.footer-tools-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 576px) {
  div.footer-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

a.footer-tool {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 16px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(255 255 255 / 0.05);
  padding: 0.75rem;
  padding-right: 2.25rem;
  text-decoration-line: none;
  transition-property: background-color,border-color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

a.footer-tool:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(107 166 202 / 0.6);
  background-color: rgb(255 255 255 / 0.1);
}

a.footer-tool {
  background-image: none;
}

.footer-tool-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 0.75rem;
  background-color: rgb(107 166 202 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (max-width: 1023px) {
  .process-steps-slider > .footer-tool-icon {
    gap: 1.25rem;
  }

  .process-steps-slider > .footer-tool-icon > div:last-child {
    padding-left: 0.25rem;
  }
}

.footer-tool-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

a.footer-tool:hover .footer-tool-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.footer-tool-text {
  display: flex;
  min-width: 0px;
  flex-direction: column;
}

.footer-tool-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.footer-tool-line {
  font-size: 0.8125rem;
  line-height: 1.375;
  color: rgb(255 255 255 / 0.6);
}

.footer-tool-go {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

a.footer-tool:hover .footer-tool-go {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.footer-aside-col {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

strong.footer-aside-title {
  margin-bottom: 0.25rem;
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

p.footer-aside-line {
  margin: 0px;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(255 255 255 / 0.75);
}

p.footer-aside-line svg {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

a.footer-aside-link {
  margin-top: 0.25rem;
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.25);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

a.footer-aside-link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1 !important;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1)) !important;
}

a.footer-aside-link {
  background-image: none;
}

@media (min-width: 1200px) {
  div.footer-main {
    display: grid;
    grid-template-columns: minmax(0, 770px) var(--form-col, 491px);
    justify-content: space-between;
  }

  .footer-tools {
    margin-top: var(--form-clear, 15rem);
    align-self: start;
  }
}

/* xl up to the container cap: the form card is narrower and a little taller. */

@media (min-width: 1200px) and (max-width: 1309px) {
  div.footer-main {
    --form-col: 36.5%;
    --form-clear: 18.75rem;
  }
}

/* Style page <-> installation page link card. */

a.style-xlink {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 22px;
  border-width: 1px;
  border-color: rgb(40 55 74 / 0.09);
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  text-decoration-line: none;
  transition-property: transform,box-shadow,border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

a.style-xlink:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(107 166 202 / 0.4);
  --tw-shadow: 0 22px 40px -28px rgba(16,28,45,0.5);
  --tw-shadow-colored: 0 22px 40px -28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (min-width: 576px) {
  a.style-xlink {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}

@media (min-width: 992px) {
  a.style-xlink {
    padding: 1.5rem;
  }
}

a.style-xlink {
  background-image: none;
}

.style-xlink-art {
  display: none;
  width: 5rem;
  height: 5rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 18px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px) {
  .style-xlink-art {
    display: grid;
  }
}

.style-xlink-art .hw-ill {
  height: 78%;
  width: auto;
}

.style-xlink-body {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.25rem;
}

.style-xlink-kicker {
  font-family: Montserrat, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --tw-text-opacity: 1;
  color: rgb(70 108 131 / var(--tw-text-opacity, 1));
}

.style-xlink-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.style-xlink-text {
  font-size: 0.9375rem;
  line-height: 1.375;
  color: rgb(40 55 74 / 0.7);
}

.style-xlink-go {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (min-width: 576px) {
  .style-xlink-go {
    align-self: center;
  }
}

a.style-xlink:hover .style-xlink-go {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

/* Resources hero: a grid of real installs behind the headline. */

.hero-mosaic {
  position: absolute;
  inset: 0px;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}

@media (max-width: 1023px) {
  .process-steps-slider > .hero-mosaic {
    gap: 1.25rem;
  }

  .process-steps-slider > .hero-mosaic > div:last-child {
    padding-left: 0.25rem;
  }
}

@media (min-width: 768px) {
  .hero-mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hero-mosaic {
  grid-auto-rows: 1fr;
}

.hero-mosaic-tile {
  position: relative;
  display: block;
  overflow: hidden;
}

.hero-mosaic-tile img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Desktop: navy on the left where the words are, the photos clear on the
 * right. Phones: top to bottom, so the tiles show above the headline. */

.hero-mosaic-scrim {
  position: absolute;
  inset: 0px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(27, 37, 51, 0.55) 0%, rgba(27, 37, 51, 0.82) 45%, rgba(27, 37, 51, 0.96) 100%);
}

@media (min-width: 768px) {
  .hero-mosaic-scrim {
    background: linear-gradient(90deg, rgba(27, 37, 51, 0.97) 0%, rgba(27, 37, 51, 0.9) 38%, rgba(27, 37, 51, 0.45) 68%, rgba(27, 37, 51, 0.15) 100%);
  }
}

@media (max-width: 767px) {
  .hero-mosaic .hero-mosaic-tile:nth-child(n + 7) {
    display: none;
  }
}

/**
 * Tailwind's utility classes, then this theme's. Utilities that need variants
 * (hover:, lg:, group-hover:) belong in the config's `plugins` array instead.
 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-6 {
  left: 1.5rem;
  right: 1.5rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-6 {
  bottom: 1.5rem;
}

.top-\[668px\] {
  top: 668px;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-\[-1\] {
  z-index: -1;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[3\] {
  z-index: 3;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.m-0 {
  margin: 0px;
}

.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-9 {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.\!mb-2 {
  margin-bottom: 0.5rem !important;
}

.\!mt-0 {
  margin-top: 0px !important;
}

.-mb-6 {
  margin-bottom: -1.5rem;
}

.-mb-\[20\.375rem\] {
  margin-bottom: -20.375rem;
}

.-mt-10 {
  margin-top: -2.5rem;
}

.-mt-5 {
  margin-top: -1.25rem;
}

.-mt-8 {
  margin-top: -2rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-9 {
  margin-bottom: 2.25rem;
}

.ml-0 {
  margin-left: 0px;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-\[12\.375rem\] {
  margin-top: 12.375rem;
}

.mt-\[22px\] {
  margin-top: 22px;
}

.mt-\[30px\] {
  margin-top: 30px;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[280\/120\] {
  aspect-ratio: 280/120;
}

.aspect-\[350\/357\] {
  aspect-ratio: 350/357;
}

.aspect-\[397\/353\] {
  aspect-ratio: 397/353;
}

.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}

.aspect-\[596\/512\] {
  aspect-ratio: 596/512;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.size-12 {
  width: 3rem;
  height: 3rem;
}

.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-\[1\.0625rem\] {
  width: 1.0625rem;
  height: 1.0625rem;
}

.size-\[14px\] {
  width: 14px;
  height: 14px;
}

.size-\[22px\] {
  width: 22px;
  height: 22px;
}

.size-\[3\.3125rem\] {
  width: 3.3125rem;
  height: 3.3125rem;
}

.size-\[30px\] {
  width: 30px;
  height: 30px;
}

.size-\[43\.231px\] {
  width: 43.231px;
  height: 43.231px;
}

.size-\[67px\] {
  width: 67px;
  height: 67px;
}

.size-\[70px\] {
  width: 70px;
  height: 70px;
}

.size-full {
  width: 100%;
  height: 100%;
}

.h-40 {
  height: 10rem;
}

.h-6 {
  height: 1.5rem;
}

.h-\[1\.965px\] {
  height: 1.965px;
}

.h-\[182px\] {
  height: 182px;
}

.h-\[3\.125rem\] {
  height: 3.125rem;
}

.h-\[350px\] {
  height: 350px;
}

.h-\[45\.625rem\] {
  height: 45.625rem;
}

.h-\[720px\] {
  height: 720px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.min-h-\[26rem\] {
  min-height: 26rem;
}

.min-h-\[28rem\] {
  min-height: 28rem;
}

.min-h-\[350px\] {
  min-height: 350px;
}

.w-1\/2 {
  width: 50%;
}

.w-64 {
  width: 16rem;
}

.w-\[11px\] {
  width: 11px;
}

.w-\[169\.143px\] {
  width: 169.143px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[19px\] {
  width: 19px;
}

.w-\[240px\] {
  width: 240px;
}

.w-\[85\.479px\] {
  width: 85.479px;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[170px\] {
  min-width: 170px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-\[22ch\] {
  max-width: 22ch;
}

.max-w-\[65rem\] {
  max-width: 65rem;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-none {
  max-width: none;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.basis-full {
  flex-basis: 100%;
}

.-translate-y-\[60px\] {
  --tw-translate-y: -60px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1\/3 {
  --tw-translate-y: 33.333333%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-rotate-180 {
  --tw-rotate: -180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-scale-x-100 {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.scroll-mt-28 {
  scroll-margin-top: 7rem;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[1\.875rem\] {
  gap: 1.875rem;
}

.gap-\[10px\] {
  gap: 10px;
}

.gap-\[11\.422px\] {
  gap: 11.422px;
}

.gap-\[14\.738px\] {
  gap: 14.738px;
}

.gap-\[15\.72px\] {
  gap: 15.72px;
}

.gap-\[15px\] {
  gap: 15px;
}

.gap-\[20px\] {
  gap: 20px;
}

.gap-\[30px\] {
  gap: 30px;
}

.gap-\[4\.913px\] {
  gap: 4.913px;
}

.gap-\[40px\] {
  gap: 40px;
}

.gap-\[6\.878px\] {
  gap: 6.878px;
}

.gap-\[6px\] {
  gap: 6px;
}

.gap-\[7\.86px\] {
  gap: 7.86px;
}

.gap-\[8\.843px\] {
  gap: 8.843px;
}

.gap-\[80px\] {
  gap: 80px;
}

.gap-\[8px\] {
  gap: 8px;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-20 {
  -moz-column-gap: 5rem;
       column-gap: 5rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.gap-y-9 {
  row-gap: 2.25rem;
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-secondary\/20 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(40 55 74 / 0.2);
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.overflow-hidden {
  overflow: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[0\.3125rem\] {
  border-radius: 0.3125rem;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[16px\] {
  border-radius: 16px;
}

.rounded-\[20px\] {
  border-radius: 20px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-t-\[20px\] {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-solid {
  border-style: solid;
}

.\!border-primary {
  --tw-border-opacity: 1 !important;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1)) !important;
}

.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
}

.border-primary\/40 {
  border-color: rgb(107 166 202 / 0.4);
}

.border-secondary-100 {
  --tw-border-opacity: 1;
  border-color: rgb(223 228 233 / var(--tw-border-opacity, 1));
}

.border-secondary\/10 {
  border-color: rgb(40 55 74 / 0.1);
}

.border-secondary\/\[0\.16\] {
  border-color: rgb(40 55 74 / 0.16);
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/50 {
  border-color: rgb(255 255 255 / 0.5);
}

.border-t-white\/20 {
  border-top-color: rgb(255 255 255 / 0.2);
}

.bg-\[\#28374a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e1edf4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(225 237 244 / var(--tw-bg-opacity, 1));
}

.bg-current {
  background-color: currentColor;
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}

.bg-primary\/20 {
  background-color: rgb(107 166 202 / 0.2);
}

.bg-primary\/70 {
  background-color: rgb(107 166 202 / 0.7);
}

.bg-primary\/80 {
  background-color: rgb(107 166 202 / 0.8);
}

.bg-secondary {
  --tw-bg-opacity: 1;
  background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}

.bg-secondary-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
}

.bg-secondary\/20 {
  background-color: rgb(40 55 74 / 0.2);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}

.bg-white\/\[0\.18\] {
  background-color: rgb(255 255 255 / 0.18);
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-none {
  background-image: none;
}

.from-\[\#28374a\] {
  --tw-gradient-from: #28374a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[rgba\(40\2c 55\2c 74\2c 0\)\] {
  --tw-gradient-from: rgba(40,55,74,0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(40, 55, 74, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/20 {
  --tw-gradient-from: rgb(107 166 202 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(107 166 202 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/80 {
  --tw-gradient-from: rgb(107 166 202 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(107 166 202 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/10 {
  --tw-gradient-from: rgb(40 55 74 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/70 {
  --tw-gradient-from: rgb(40 55 74 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-primary\/50 {
  --tw-gradient-to: rgb(107 166 202 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(107 166 202 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-secondary\/80 {
  --tw-gradient-to: rgb(40 55 74 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(40 55 74 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#28374a\] {
  --tw-gradient-to: #28374a var(--tw-gradient-to-position);
}

.to-primary\/20 {
  --tw-gradient-to: rgb(107 166 202 / 0.2) var(--tw-gradient-to-position);
}

.to-secondary {
  --tw-gradient-to: #28374a var(--tw-gradient-to-position);
}

.to-white\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0.2) var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-10 {
  padding: 2.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-\[1\.875rem\] {
  padding-bottom: 1.875rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pt-28 {
  padding-top: 7rem;
}

.pt-32 {
  padding-top: 8rem;
}

.pt-\[1\.875rem\] {
  padding-top: 1.875rem;
}

.pt-\[17\.125rem\] {
  padding-top: 17.125rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.font-primary {
  font-family: Poppins, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}

.text-\[1\.125rem\] {
  font-size: 1.125rem;
}

.text-\[1\.25rem\] {
  font-size: 1.25rem;
}

.text-\[1\.5rem\] {
  font-size: 1.5rem;
}

.text-\[1\.625rem\] {
  font-size: 1.625rem;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[2\.5rem\] {
  font-size: 2.5rem;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[60px\] {
  font-size: 60px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-\[1\.3\] {
  line-height: 1.3;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.tracking-\[0\.15px\] {
  letter-spacing: 0.15px;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.\!text-primary {
  --tw-text-opacity: 1 !important;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1)) !important;
}

.\!text-secondary {
  --tw-text-opacity: 1 !important;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1)) !important;
}

.\!text-secondary\/80 {
  color: rgb(40 55 74 / 0.8) !important;
}

.text-\[\#28374a\] {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.text-\[\#FEC542\] {
  --tw-text-opacity: 1;
  color: rgb(254 197 66 / var(--tw-text-opacity, 1));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}

.text-secondary-500 {
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}

.text-secondary\/60 {
  color: rgb(40 55 74 / 0.6);
}

.text-secondary\/70 {
  color: rgb(40 55 74 / 0.7);
}

.text-secondary\/80 {
  color: rgb(40 55 74 / 0.8);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/25 {
  color: rgb(255 255 255 / 0.25);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.text-white\/95 {
  color: rgb(255 255 255 / 0.95);
}

.underline {
  text-decoration-line: underline;
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-80 {
  opacity: 0.8;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_4px_14px_0px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: 0px 4px 14px 0px rgba(0,0,0,0.1);
  --tw-shadow-colored: 0px 4px 14px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[4px_4px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: 4px 4px 10px 0px rgba(0,0,0,0.1);
  --tw-shadow-colored: 4px 4px 10px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
}

.title-white :is(h1,h2,h3,h4,h5,h6) {
  color: #ffffff;
}

/**
 * Custom styles to immediately follow Tailwind's `utilities` layer.
 * tailwind/custom/utilities.css
 *
 * For PLAIN utility classes that never need a variant. Usually empty.
 */

/* Hide scrollbars on the horizontally-scrolling style-pill row. */

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.placeholder\:text-secondary-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}

.placeholder\:text-secondary-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}

.after\:z-\[1\]::after {
  content: var(--tw-content);
  z-index: 1;
}

.after\:z-\[2\]::after {
  content: var(--tw-content);
  z-index: 2;
}

.after\:bg-gradient-to-b::after {
  content: var(--tw-content);
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.after\:from-secondary\/0::after {
  content: var(--tw-content);
  --tw-gradient-from: rgb(40 55 74 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.after\:to-secondary\/80::after {
  content: var(--tw-content);
  --tw-gradient-to: rgb(40 55 74 / 0.8) var(--tw-gradient-to-position);
}

.hover\:bg-secondary-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(16 22 30 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.focus\:border-primary:focus {
  --tw-border-opacity: 1;
  border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.prose-a\:text-primary :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 1200px) {
  .max-xl\:m-4 {
    margin: 1rem;
  }

  .max-xl\:hidden {
    display: none;
  }
}

@media not all and (min-width: 576px) {
  .max-sm\:hidden {
    display: none;
  }
}

@media (min-width: 576px) {
  .sm\:my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .sm\:-mt-10 {
    margin-top: -2.5rem;
  }

  .sm\:mb-12 {
    margin-bottom: 3rem;
  }

  .sm\:mt-12 {
    margin-top: 3rem;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-\[350px\] {
    height: 350px;
  }

  .sm\:min-h-\[30rem\] {
    min-height: 30rem;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-\[calc\(50\%-0\.75rem\)\] {
    width: calc(50% - 0.75rem);
  }

  .sm\:\!basis-full {
    flex-basis: 100% !important;
  }

  .sm\:basis-\[calc\(\(100\%-1\.5rem\)\/2\)\] {
    flex-basis: calc((100% - 1.5rem) / 2);
  }

  .sm\:basis-\[calc\(\(100\%-2rem\)\/2\)\] {
    flex-basis: calc((100% - 2rem) / 2);
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:pb-8 {
    padding-bottom: 2rem;
  }

  .sm\:pt-40 {
    padding-top: 10rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-\[1rem\] {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .md\:min-h-\[34rem\] {
    min-height: 34rem;
  }

  .md\:w-\[calc\(50\%-1rem\)\] {
    width: calc(50% - 1rem);
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .md\:pb-24 {
    padding-bottom: 6rem;
  }

  .md\:text-right {
    text-align: right;
  }
}

@media (min-width: 992px) {
  .lg\:absolute {
    position: absolute;
  }

  .lg\:bottom-0 {
    bottom: 0px;
  }

  .lg\:right-0 {
    right: 0px;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:my-14 {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }

  .lg\:my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .lg\:my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .lg\:-mt-10 {
    margin-top: -2.5rem;
  }

  .lg\:-mt-12 {
    margin-top: -3rem;
  }

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .lg\:mb-12 {
    margin-bottom: 3rem;
  }

  .lg\:mb-16 {
    margin-bottom: 4rem;
  }

  .lg\:mb-24 {
    margin-bottom: 6rem;
  }

  .lg\:mb-8 {
    margin-bottom: 2rem;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-10 {
    margin-top: 2.5rem;
  }

  .lg\:mt-12 {
    margin-top: 3rem;
  }

  .lg\:mt-16 {
    margin-top: 4rem;
  }

  .lg\:mt-\[14\.6875rem\] {
    margin-top: 14.6875rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:min-h-\[36rem\] {
    min-height: 36rem;
  }

  .lg\:min-h-\[450px\] {
    min-height: 450px;
  }

  .lg\:w-1\/3 {
    width: 33.333333%;
  }

  .lg\:w-3\/5 {
    width: 60%;
  }

  .lg\:w-80 {
    width: 20rem;
  }

  .lg\:w-\[23\.5625rem\] {
    width: 23.5625rem;
  }

  .lg\:w-\[380px\] {
    width: 380px;
  }

  .lg\:w-\[calc\(33\.333\%-1rem\)\] {
    width: calc(33.333% - 1rem);
  }

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:\!basis-\[calc\(\(200\%-1\.5rem\)\/3\)\] {
    flex-basis: calc((200% - 1.5rem) / 3) !important;
  }

  .lg\:basis-\[calc\(\(100\%-11rem\)\/5\)\] {
    flex-basis: calc((100% - 11rem) / 5);
  }

  .lg\:basis-\[calc\(\(100\%-2\.75rem\)\/2\)\] {
    flex-basis: calc((100% - 2.75rem) / 2);
  }

  .lg\:basis-\[calc\(\(100\%-3rem\)\/3\)\] {
    flex-basis: calc((100% - 3rem) / 3);
  }

  .lg\:basis-\[calc\(\(100\%-4rem\)\/3\)\] {
    flex-basis: calc((100% - 4rem) / 3);
  }

  .lg\:basis-\[calc\(\(100\%-5\.5rem\)\/3\)\] {
    flex-basis: calc((100% - 5.5rem) / 3);
  }

  .lg\:basis-\[calc\(\(100\%-6rem\)\/4\)\] {
    flex-basis: calc((100% - 6rem) / 4);
  }

  .lg\:-translate-y-\[60px\] {
    --tw-translate-y: -60px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.4fr_0\.85fr_0\.9fr\] {
    grid-template-columns: 1.4fr 0.85fr 0.9fr;
  }

  .lg\:grid-cols-\[544fr_680fr\] {
    grid-template-columns: 544fr 680fr;
  }

  .lg\:grid-cols-\[56fr_45fr\] {
    grid-template-columns: 56fr 45fr;
  }

  .lg\:grid-cols-\[596fr_630fr\] {
    grid-template-columns: 596fr 630fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-11 {
    gap: 2.75rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-\[4\.75rem\] {
    gap: 4.75rem;
  }

  .lg\:gap-\[5\.8125rem\] {
    gap: 5.8125rem;
  }

  .lg\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }

  .lg\:p-14 {
    padding: 3.5rem;
  }

  .lg\:px-\[3\.75rem\] {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .lg\:py-\[1\.475rem\] {
    padding-top: 1.475rem;
    padding-bottom: 1.475rem;
  }

  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .lg\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .lg\:pb-16 {
    padding-bottom: 4rem;
  }

  .lg\:pb-20 {
    padding-bottom: 5rem;
  }

  .lg\:pb-24 {
    padding-bottom: 6rem;
  }

  .lg\:pr-12 {
    padding-right: 3rem;
  }

  .lg\:pr-16 {
    padding-right: 4rem;
  }

  .lg\:pt-10 {
    padding-top: 2.5rem;
  }

  .lg\:pt-12 {
    padding-top: 3rem;
  }

  .lg\:pt-20 {
    padding-top: 5rem;
  }

  .lg\:text-\[32px\] {
    font-size: 32px;
  }
}

@media (min-width: 1200px) {
  .xl\:-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .xl\:my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .xl\:-mb-\[20\.375rem\] {
    margin-bottom: -20.375rem;
  }

  .xl\:-mb-\[24rem\] {
    margin-bottom: -24rem;
  }

  .xl\:-mt-\[3\.25rem\] {
    margin-top: -3.25rem;
  }

  .xl\:mb-20 {
    margin-bottom: 5rem;
  }

  .xl\:mt-20 {
    margin-top: 5rem;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:min-h-\[\.\.\.\] {
    min-height: ...;
  }

  .xl\:max-w-\[52rem\] {
    max-width: 52rem;
  }

  .xl\:max-w-\[770px\] {
    max-width: 770px;
  }

  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:items-center {
    align-items: center;
  }

  .xl\:gap-3 {
    gap: 0.75rem;
  }

  .xl\:gap-x-\[11\.0625rem\] {
    -moz-column-gap: 11.0625rem;
         column-gap: 11.0625rem;
  }

  .xl\:gap-y-8 {
    row-gap: 2rem;
  }

  .xl\:space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
  }

  .xl\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xl\:pb-16 {
    padding-bottom: 4rem;
  }

  .xl\:pb-24 {
    padding-bottom: 6rem;
  }

  .xl\:pt-14 {
    padding-top: 3.5rem;
  }

  .xl\:pt-24 {
    padding-top: 6rem;
  }

  .xl\:pt-48 {
    padding-top: 12rem;
  }

  .xl\:pt-\[17\.125rem\] {
    padding-top: 17.125rem;
  }
}

@media (min-width: 1310px) {
  .\32xl\:my-24 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .\32xl\:mb-24 {
    margin-bottom: 6rem;
  }

  .\32xl\:mt-24 {
    margin-top: 6rem;
  }

  .\32xl\:min-h-\[45rem\] {
    min-height: 45rem;
  }

  .\32xl\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .\32xl\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .\32xl\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .\32xl\:pb-20 {
    padding-bottom: 5rem;
  }

  .\32xl\:pb-32 {
    padding-bottom: 8rem;
  }

  .\32xl\:pt-\[3\.75rem\] {
    padding-top: 3.75rem;
  }
}

.hover\:\[\&_a\:not\(\.btn\)\]\:text-white a:not(.btn):hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.\[\&_a\:not\(\:hover\)\]\:text-white\/70 a:not(:hover) {
  color: rgb(255 255 255 / 0.7);
}

.\[\&_a\]\:text-inherit a {
  color: inherit;
}

.\[\&_h1\]\:mb-4 h1 {
  margin-bottom: 1rem;
}

.\[\&_p\]\:mb-0 p {
  margin-bottom: 0px;
}

.\[\&_p\]\:max-w-\[40rem\] p {
  max-width: 40rem;
}