.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
	word-break: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
	border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
	border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #ffb900; /* Yellow */
}

.wpcf7-form-control-wrap {
	position: relative;
}

.wpcf7-not-valid-tip {
	color: #dc3232; /* Red */
	font-size: 1em;
	font-weight: normal;
	display: block;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative;
	top: -2ex;
	left: 1em;
	z-index: 100;
	border: 1px solid #dc3232;
	background: #fff;
	padding: .2em .8em;
	width: 24em;
}

.wpcf7-list-item {
	display: inline-block;
	margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: " ";
}

.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	background-color: #23282d; /* Dark Gray 800 */
	opacity: 0.75;
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 100%;
	padding: 0;
	margin: 0 24px;
	position: relative;
}

form.submitting .wpcf7-spinner {
	visibility: visible;
}

.wpcf7-spinner::before {
	content: '';
	position: absolute;
	background-color: #fbfbfc; /* Light Gray 100 */
	top: 4px;
	left: 4px;
	width: 6px;
	height: 6px;
	border: none;
	border-radius: 100%;
	transform-origin: 8px 8px;
	animation-name: spin;
	animation-duration: 1000ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: blink;
		animation-duration: 2000ms;
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes blink {
	from {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wpcf7 [inert] {
	opacity: 0.5;
}

.wpcf7 input[type="file"] {
	cursor: pointer;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr;
}

.wpcf7-reflection > output {
	display: list-item;
	list-style: none;
}

.wpcf7-reflection > output[hidden] {
	display: none;
}/* Self-hosted brand fonts.
 *
 * Was: a render-blocking stylesheet from fonts.googleapis.com with the woff2
 * files on fonts.gstatic.com, and only dns-prefetch (not preconnect) on the
 * first of those -- so two round trips to two origins before any text could
 * paint. That was most of a 2.9s First Contentful Paint on mobile.
 *
 * Only the LATIN subset ships. Google serves 48 @font-face blocks for this
 * request: 8 weights x 6 subsets (latin, latin-ext, cyrillic, cyrillic-ext,
 * greek, greek-ext, vietnamese). A Cheshire glazing site needs one of them.
 *
 * Two FILES, not eight. Both families are variable fonts, so Google serves one
 * woff2 per family covering the whole weight axis. Declaring each weight with
 * its own src would download the same file four times -- 328 KB instead of 82.
 *
 * This also removes the last third-party origin on the site. Visitor IPs were
 * going to Google on every page load, which is what the cookie policy's
 * third-party section exists to disclose.
 */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	/* A RANGE, not a single value. These are variable fonts -- one file covers
	   every weight, so declaring 400/500/600/700 separately would make the
	   browser fetch the same file four times. */
	font-weight: 100 900;
	font-display: swap;
	src: url(//cheshirefg.co.uk/wp-content/themes/cheshirefg/assets/fonts/inter-variable.woff2) format('woff2-variations'),
	     url(//cheshirefg.co.uk/wp-content/themes/cheshirefg/assets/fonts/inter-variable.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	/* A RANGE, not a single value. These are variable fonts -- one file covers
	   every weight, so declaring 400/500/600/700 separately would make the
	   browser fetch the same file four times. */
	font-weight: 100 900;
	font-display: swap;
	src: url(//cheshirefg.co.uk/wp-content/themes/cheshirefg/assets/fonts/montserrat-variable.woff2) format('woff2-variations'),
	     url(//cheshirefg.co.uk/wp-content/themes/cheshirefg/assets/fonts/montserrat-variable.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/*
Theme Name: Cheshire Frame & Glass
Theme URI: https://cheshirefg.co.uk
Description: Bespoke, lightweight ACF-block theme for Cheshire Frame & Glass - windows, doors, conservatories & commercial glazing. Code-registered blocks, no page builder, no build step.
Author: WWeb Design
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: cheshirefg
*/

/* ==========================================================================
   Design tokens - dark, monochrome, editorial (Spitfire-inspired)
   ========================================================================== */
:root {
  /* Brand - dark slate-navy base, white text, restrained cool-silver accent */
  --cfg-bg:        #2F3946;   /* slate-navy page background */
  --cfg-surface:   #38434F;   /* raised cards / panels (lifts on dark) */
  --cfg-surface-2: #29323C;   /* recessed / alt section (darker than bg) */
  --cfg-ink:       #F4F6F7;   /* near-white primary text */
  --cfg-ink-soft:  #AAB6BF;   /* muted light-grey text */
  --cfg-line:      rgba(255,255,255,.14); /* hairline borders on dark */

  --cfg-primary:     #283139; /* dark emphasis bands / topbar (stays dark) */
  --cfg-primary-dk:  #1E252C; /* darkest - footer */
  --cfg-primary-ink: #FFFFFF;
  --cfg-accent:      #B6C2CB; /* cool brushed-silver - premium, monochrome */
  --cfg-accent-dk:   #DCE5EA; /* brighter silver for hover/emphasis on dark */

  /* Light surfaces - cool off-white, for breaking up all-dark pages (same monochrome family) */
  --cfg-surface-light:   #F1F3F4; /* section background */
  --cfg-surface-light-2: #E5E9EA; /* cards / chips on a light section */
  --cfg-ink-on-light:      #232B32; /* headings/body on a light section */
  --cfg-ink-soft-on-light: #5B6670; /* muted text on a light section */
  --cfg-line-on-light:     rgba(35,43,50,.12); /* hairline borders on light */
  /* A control's edge is not decoration. --cfg-line is tuned for hairlines
     between sections: on a light band it resolves to rgba(35,43,50,.12), which
     measured 1.25:1 against the band. That is fine for a divider and far below
     the 3:1 SC 1.4.11 requires for the boundary of an input -- the contact form
     read as four labels with empty space under them. Anything a user has to
     find and click or type into uses --cfg-line-ui, which like --cfg-line is
     light here and flips dark inside a light band.
     .55 is MEASURED as the lowest value clearing 3:1 on every ground
     the form can sit on: 3.27 on light, 3.48 on light-alt, 4.31 on
     dark. Do not lower it. */
  --cfg-line-ui:           rgba(255,255,255,.55);
  --cfg-line-ui-on-light:  rgba(35,43,50,.55);

  /* Type - geometric uppercase display + neutral sans body (no serif) */
  --cfg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cfg-font-head: "Montserrat", "Inter", system-ui, Helvetica, Arial, sans-serif;

  /* Scale - architectural, near-square corners */
  --cfg-maxw: 1240px;
  --cfg-maxw-wide: 1480px;
  --cfg-gutter: clamp(1.25rem, 4vw, 3rem);
  --cfg-section-y: clamp(3.5rem, 8vw, 7rem);
  --cfg-radius: 4px;
  --cfg-radius-sm: 2px;
  --cfg-shadow: 0 1px 2px rgba(0,0,0,.25), 0 18px 44px rgba(0,0,0,.36);
  --cfg-shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.28);

  --cfg-header-h: 84px;
  --cfg-ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cfg-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--cfg-ink);
  background: var(--cfg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cfg-accent-dk); text-decoration-color: color-mix(in srgb, var(--cfg-accent-dk) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--cfg-font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .005em;
  color: var(--cfg-ink);
  margin: 0 0 .5em;
}
/* Editorial uppercase display headings - the Spitfire signature */
h1, h2 { text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 600; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.cfg-container { max-width: var(--cfg-maxw); margin-inline: auto; padding-inline: var(--cfg-gutter); }
.cfg-container--wide { max-width: var(--cfg-maxw-wide); }
.cfg-section { padding-block: var(--cfg-section-y); }
.cfg-section--alt { background: var(--cfg-surface-2); }
.cfg-section--ink { background: var(--cfg-primary); color: #EAF1F4; }
.cfg-section--ink h1, .cfg-section--ink h2, .cfg-section--ink h3 { color: #fff; }

/* Light section — used to break up the dark pages so the site isn't wall-to-wall
   slate. Rather than restyling each block, this REMAPS THE TOKENS for anything
   inside it: every block draws its cards, borders, dividers and muted text from
   --cfg-surface / --cfg-line / --cfg-ink-soft, so one override flips the lot and
   any future block inherits the behaviour for free.
   Genuinely hardcoded #fff stays hardcoded on purpose — overlay tile labels sit
   on photography, not on the section background. Buttons are handled below. */
.cfg-section--light,
.cfg-section--light-alt {
  --cfg-surface:   var(--cfg-surface-light-2);
  --cfg-surface-2: #FFFFFF;
  --cfg-ink:       var(--cfg-ink-on-light);
  --cfg-ink-soft:  var(--cfg-ink-soft-on-light);
  --cfg-line:      var(--cfg-line-on-light);
  --cfg-line-ui:   var(--cfg-line-ui-on-light);
  /* The cool-silver accent (#B6C2CB) washes out completely on an off-white
     ground — it drives review stars, stat numerals, bullet ticks, process
     numbers and the icon chips (via color-mix). Darken it here so all of those
     stay legible; the colour-mixed tints just become light greys, which is
     exactly what's wanted on light. */
  --cfg-accent:    #4A5661;
  --cfg-accent-dk: var(--cfg-primary);
  --cfg-shadow:    0 1px 2px rgba(35,43,50,.06), 0 18px 44px rgba(35,43,50,.10);
  --cfg-shadow-sm: 0 1px 2px rgba(35,43,50,.06), 0 6px 18px rgba(35,43,50,.09);
  color: var(--cfg-ink-on-light);
}
.cfg-section--light { background: var(--cfg-surface-light); }
/* Second light tone, so two light bands can sit next to each other and still
   read as separate sections without dropping back to dark. Cards go pure white
   inside it so they keep lifting off the slightly deeper ground. */
.cfg-section--light-alt {
  background: var(--cfg-surface-light-2);
  --cfg-surface:   #FFFFFF;
  --cfg-surface-2: var(--cfg-surface-light);
}
:is(.cfg-section--light, .cfg-section--light-alt) :is(h1, h2, h3, h4) { color: var(--cfg-ink-on-light); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-lead { color: var(--cfg-ink-soft-on-light); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-eyebrow { color: var(--cfg-primary); }

/* The base .cfg-btn is white-outline-on-dark, so it vanishes on a light ground.
   Flip it here instead of asking every render.php to pick a button modifier. */
/* .55 not .4 -- measured. At .4 the border was 2.23:1 against the light band
   and 2.26:1 against the white cards inside light-alt, under the 3:1 SC
   1.4.11 needs. This 1px stroke is the whole affordance that separates a
   button from a line of small-caps text. */
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-btn { color: var(--cfg-primary); border-color: rgba(40,49,57,.55); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-btn:hover { background: var(--cfg-primary); color: #fff; border-color: var(--cfg-primary); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-btn--accent { background: var(--cfg-primary); color: #fff; border-color: var(--cfg-primary); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-btn--accent:hover { background: transparent; color: var(--cfg-primary); border-color: var(--cfg-primary); }
/* Big stat numerals want full emphasis, not the mid-slate accent. */
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-stat__value { color: var(--cfg-primary); }

.cfg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--cfg-font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cfg-accent-dk);
  margin-bottom: 1rem;
}
.cfg-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.cfg-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cfg-ink-soft); max-width: 60ch; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.cfg-btn {
  display: inline-flex; align-items: center; gap: .65em;
  font-family: var(--cfg-font-body);
  font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1; text-decoration: none;
  padding: 1.15em 1.9em; border-radius: var(--cfg-radius-sm);
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55);
  transition: background .3s var(--cfg-ease), color .3s var(--cfg-ease), border-color .3s var(--cfg-ease);
}
.cfg-btn:hover { background: #fff; border-color: #fff; color: var(--cfg-primary); }
/* Solid light - the prominent conversion CTA */
.cfg-btn--accent { background: #fff; color: var(--cfg-primary); border-color: #fff; }
.cfg-btn--accent:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
/* Outline on dark */
.cfg-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cfg-btn--ghost:hover { background: #fff; color: var(--cfg-primary); border-color: #fff; }
.cfg-btn--light { background: #fff; color: var(--cfg-primary); border-color: #fff; }
.cfg-btn--light:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
/* Outline on light - for buttons placed on a .cfg-section--light background */
.cfg-btn--dark { background: transparent; color: var(--cfg-primary); border-color: var(--cfg-primary); }
.cfg-btn--dark:hover { background: var(--cfg-primary); color: #fff; border-color: var(--cfg-primary); }

/* ==========================================================================
   Scroll-reveal (progressive enhancement; no-JS shows everything)
   ========================================================================== */
.cfg-fade-up { opacity: 1; }
.js .cfg-fade-up { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--cfg-ease), transform .7s var(--cfg-ease); }
.js .cfg-fade-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .cfg-fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Skip link */
.cfg-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; color: var(--cfg-ink); padding: .8em 1.2em; border-radius: 0 0 var(--cfg-radius-sm) 0; }
.cfg-skip:focus { left: 0; }

/* Focus ring.
 *
 * NOT wrapped in :where() -- that gives the rule zero specificity, so any
 * block stylesheet that touches `outline` on a focusable element silently
 * wins and the ring disappears with nothing to show it happened.
 *
 * `summary` and `select`/`textarea` are in the list because they are
 * focusable and were not covered: the FAQ accordion's <summary> is that
 * block's only keyboard control, and it appears on 16 pages. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--cfg-accent); outline-offset: 3px; border-radius: 3px; }/* ==========================================================================
   Header / nav chrome - dark, editorial, transparent-over-hero on home
   ========================================================================== */
.cfg-header { position: sticky; top: 0; z-index: 100; background: rgba(30,37,44,.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--cfg-line); transition: transform .35s var(--cfg-ease), background .35s var(--cfg-ease), border-color .35s; }
.cfg-header.is-hidden { transform: translateY(-100%); }

/* Front page: float transparently over the immersive hero, solidify on scroll. */
.home .cfg-header { position: absolute; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
/* Contrast guard for the transparent home header. The hero scrim was lightened
   so the photography reads properly, which left white nav text sitting on
   whatever the top of the image happens to be — pale render, bright sky. This
   gradient anchors the nav strip only, and fades out well before the headline,
   so the picture stays bright. Not applied once .is-stuck paints a solid bar. */
.home .cfg-header:not(.is-stuck)::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 190%;
  background: linear-gradient(180deg, rgba(10,16,20,.62) 0%, rgba(10,16,20,.34) 45%, transparent 100%);
  pointer-events: none; z-index: -1;
}
.home .cfg-header.is-stuck { position: fixed; background: rgba(30,37,44,.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom-color: var(--cfg-line); }

/* Top bar */
.cfg-topbar { border-bottom: 1px solid rgba(255,255,255,.08); color: var(--cfg-ink-soft); font-size: .76rem; letter-spacing: .04em; }
.cfg-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.cfg-topbar__msg { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; }
.cfg-topbar__phone { display: inline-flex; align-items: center; gap: .45em; color: #fff; font-weight: 600; text-decoration: none; }
.cfg-topbar__phone:hover { color: var(--cfg-accent-dk); }

/* Utility (secondary) nav in the top bar */
.cfg-utility__list { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.cfg-utility__list a { color: var(--cfg-ink-soft); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 600; transition: color .2s; }
.cfg-utility__list a:hover, .cfg-utility__list .current-menu-item > a { color: #fff; }
@media (max-width: 1040px) { .cfg-utility { display: none; } .cfg-topbar__phone { margin-left: auto; } }

/* Main bar */
.cfg-bar__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--cfg-header-h); }
.cfg-logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
/* The brand mark is a wide lockup (~2.6:1) with a small "FRAME AND GLASS"
   strapline, so it needs more height than a square logo would to stay legible —
   50px rendered the strapline unreadable. */
.cfg-logo img { max-height: 64px; width: auto; }
@media (max-width: 640px) { .cfg-logo img { max-height: 48px; } }
.cfg-logo__text { font-family: var(--cfg-font-head); font-size: 1.18rem; color: #fff; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; line-height: 1; }
.cfg-logo__text strong { color: var(--cfg-accent-dk); font-weight: 600; display: block; font-size: .62em; letter-spacing: .24em; margin-top: .25em; }

/* Desktop nav */
.cfg-nav { margin-left: auto; }
.cfg-nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.cfg-nav__item { position: relative; }
.cfg-nav__link { display: inline-flex; align-items: center; gap: .35em; padding: .7em .85em; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.82); text-decoration: none; transition: color .2s; }
.cfg-nav__link:hover { color: #fff; }
.cfg-nav__item:hover > .cfg-nav__link, .cfg-nav__item.is-current > .cfg-nav__link { color: #fff; }
.cfg-nav__item.is-current > .cfg-nav__link { box-shadow: inset 0 -2px 0 var(--cfg-accent-dk); }
.cfg-nav__toggle { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: .2em; }
/* Desktop dropdown chevron: a 6x6 box with two borders, rotated 45 degrees.
   display:inline-block is load-bearing -- width and height do not apply to a
   non-replaced INLINE box, so without it the square collapses to nothing and
   only the border edge paints, which renders as a stray vertical line beside
   the label. It happened to look right on desktop only because the parent
   .cfg-nav__link is inline-flex there, which makes this a flex item. */
.cfg-nav__item.has-children > .cfg-nav__link::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; margin-left: .15em; }

/* Desktop dropdown */
.cfg-subnav { position: absolute; top: calc(100% + 4px); left: 0; min-width: 252px; background: #232b33; border: 1px solid var(--cfg-line); border-radius: var(--cfg-radius-sm); box-shadow: var(--cfg-shadow); padding: .5rem; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--cfg-ease), transform .2s var(--cfg-ease), visibility .2s; }
.cfg-nav__item.has-children:hover > .cfg-subnav,
.cfg-nav__item.has-children:focus-within > .cfg-subnav { opacity: 1; visibility: visible; transform: none; }
.cfg-subnav .cfg-nav__link { display: block; padding: .6em .8em; border-radius: var(--cfg-radius-sm); font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.78); }
.cfg-subnav .cfg-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.cfg-subnav .cfg-nav__toggle { display: none; }

/* Actions */
.cfg-bar__actions { display: flex; align-items: center; gap: .9rem; }
.cfg-bar__cta { white-space: nowrap; padding: .9em 1.5em; }

/* Burger */
.cfg-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid rgba(255,255,255,.3); border-radius: var(--cfg-radius-sm); cursor: pointer; }
.cfg-burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }

/* Mobile drawer */
.cfg-drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.cfg-drawer.is-open { display: block; }
.cfg-drawer__scrim { position: absolute; inset: 0; background: rgba(10,14,18,.6); opacity: 0; transition: opacity .3s; }
.cfg-drawer.is-open .cfg-drawer__scrim { opacity: 1; }
.cfg-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 86vw); background: #232b33; box-shadow: var(--cfg-shadow); padding: 1.4rem 1.3rem 2rem; overflow-y: auto; transform: translateX(100%); transition: transform .35s var(--cfg-ease); display: flex; flex-direction: column; }
.cfg-drawer.is-open .cfg-drawer__panel { transform: none; }
.cfg-drawer__close { align-self: flex-end; background: none; border: 0; font-size: 2rem; line-height: 1; color: #fff; cursor: pointer; }
.cfg-drawer__list { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.cfg-drawer__list .cfg-nav__item { border-bottom: 1px solid var(--cfg-line); }
.cfg-drawer__list .cfg-nav__link { display: block; padding: .9em .2em; font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.85); text-decoration: none; }
.cfg-drawer__list .has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
/* The drawer has a real SVG chevron in .cfg-nav__toggle on the right, so the
   desktop pseudo-element chevron is redundant here as well as broken. */
.cfg-drawer__list .cfg-nav__item.has-children > .cfg-nav__link::after { content: none; }
.cfg-drawer__list .cfg-nav__toggle { display: inline-flex; padding: .6em; color: #fff; transition: transform .25s; }
.cfg-drawer__list .cfg-nav__item.is-expanded > .cfg-nav__toggle { transform: rotate(180deg); }
.cfg-drawer__list .cfg-subnav { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 .6em .6em; grid-column: 1 / -1; display: none; background: transparent; }
.cfg-drawer__list .cfg-nav__item.is-expanded > .cfg-subnav { display: block; }
.cfg-drawer__list .cfg-subnav .cfg-nav__link { text-transform: none; letter-spacing: .02em; font-weight: 500; opacity: .85; }
.cfg-drawer__list--utility { margin-top: .25rem; border-top: 1px solid var(--cfg-line); padding-top: .5rem; }
.cfg-drawer__list--utility li { border-bottom: 1px solid var(--cfg-line); }
.cfg-drawer__list--utility a { display: block; padding: .8em .2em; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--cfg-ink-soft); text-decoration: none; }
.cfg-drawer__list--utility a:hover { color: #fff; }
.cfg-drawer__cta { margin-top: auto; text-align: center; justify-content: center; }
.cfg-drawer__phone { display: block; text-align: center; margin-top: .9rem; font-weight: 600; color: #fff; text-decoration: none; }

/* Breakpoint */
@media (max-width: 1040px) {
  .cfg-nav, .cfg-bar__cta { display: none; }
  .cfg-burger { display: flex; }
  .cfg-bar__actions { margin-left: auto; }
}
@media (min-width: 1041px) {
  .cfg-drawer { display: none !important; }
}/* ==========================================================================
   Footer chrome
   ========================================================================== */
.cfg-footer { background: var(--cfg-primary-dk); color: #BFD0D8; margin-top: 0; }
.cfg-footer a { color: #DCE7EC; text-decoration: none; }
.cfg-footer a:hover { color: #fff; }

.cfg-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem); }
.cfg-footer__logo img { max-height: 72px; width: auto; margin-bottom: 1rem; }
.cfg-footer__about { font-size: .95rem; line-height: 1.6; color: #AFC2CB; max-width: 36ch; }
.cfg-footer__h { color: #fff; font-family: var(--cfg-font-body); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1.1rem; }
.cfg-footer__menu, .cfg-footer__contactlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .95rem; }
.cfg-footer__addr { color: #AFC2CB; }
.cfg-footer__hours { margin-top: 1.1rem; font-size: .9rem; color: #AFC2CB; }
.cfg-footer__hours strong { color: #fff; }
.cfg-footer__hint { font-size: .85rem; color: #80969f; }

.cfg-social { list-style: none; display: flex; gap: .55rem; margin: 1.2rem 0 0; padding: 0; }
.cfg-social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #DCE7EC; transition: background .2s, color .2s, border-color .2s; }
.cfg-social a:hover { background: var(--cfg-accent); border-color: var(--cfg-accent); color: #fff; }

/* Accreditation band — sits at the TOP of the footer, so the marks read as a
   trust statement rather than small print.
   Each mark gets a white chip rather than a CSS filter. Two reasons: the
   supplied artwork is inconsistent (cpa-tick.png has an OPAQUE WHITE ground,
   the Approved roundel is transparent), so no single filter can flatter both —
   and accreditation bodies generally require their marks reproduced in the
   original colours. The chip makes the full-colour logo deliberate against the
   dark ground instead of looking like a rendering fault. */
.cfg-footer__accred { border-bottom: 1px solid rgba(255,255,255,.1); }
.cfg-footer__accred-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); padding-block: 1.8rem; }
.cfg-footer__accred-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--cfg-radius); padding: .7rem 1.1rem; min-height: 64px; transition: transform .2s, box-shadow .2s; }
.cfg-footer__accred-chip img { max-height: 44px; width: auto; display: block; }
a.cfg-footer__accred-chip:hover,
a.cfg-footer__accred-chip:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }

/* ==========================================================================
   Google reviews strip (Trustindex widget, rendered by cfg_reviews_strip())
   The plugin ships a light-theme widget; these overrides sit it on our dark
   surface. Selectors are deliberately scoped to .cfg-reviews-strip so a
   Trustindex update can only ever break this band, never the rest of the site.
   ========================================================================== */
.cfg-reviews-strip { background: var(--cfg-surface-2); border-top: 1px solid var(--cfg-line); padding-block: clamp(2.2rem, 5vw, 3.4rem); }
.cfg-reviews-strip__heading { margin: 0 0 1.4rem; text-align: center; font-family: var(--cfg-font-body); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cfg-accent); }

.cfg-reviews-strip .ti-widget,
.cfg-reviews-strip .ti-widget * { color: inherit; }
.cfg-reviews-strip .ti-widget-container,
.cfg-reviews-strip .ti-review-item > .ti-inner { background: var(--cfg-surface) !important; border: 1px solid var(--cfg-line) !important; border-radius: var(--cfg-radius) !important; box-shadow: none !important; }
.cfg-reviews-strip .ti-review-content,
.cfg-reviews-strip .ti-name,
.cfg-reviews-strip .ti-profile-details { color: #E8EEF2 !important; }
.cfg-reviews-strip .ti-date,
.cfg-reviews-strip .ti-read-more { color: #9BB0B9 !important; }
.cfg-reviews-strip .ti-rating-text strong { color: #fff !important; }

.cfg-footer__bar { border-top: 1px solid rgba(255,255,255,.1); }
.cfg-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding-block: 1.3rem; font-size: .85rem; color: #9bb0b9; }
.cfg-footer__bar-inner p { margin: 0; }
.cfg-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding: 0; }

@media (max-width: 880px) {
  .cfg-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cfg-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .cfg-footer__grid { grid-template-columns: 1fr; }
}/* Shared reveal keyframes / stagger helpers (enqueued globally). */
@media (prefers-reduced-motion: no-preference) {
  .js .cfg-fade-up[data-delay="1"] { transition-delay: .08s; }
  .js .cfg-fade-up[data-delay="2"] { transition-delay: .16s; }
  .js .cfg-fade-up[data-delay="3"] { transition-delay: .24s; }
  .js .cfg-fade-up[data-delay="4"] { transition-delay: .32s; }
}/* ==========================================================================
   Template-level chrome shared by non-block pages (archive, single, 404, search,
   blog). Enqueued globally because block CSS only loads on pages using the block.
   ========================================================================== */

/* Breadcrumbs (also used inside the page-hero block) */
.cfg-breadcrumbs { font-size: .85rem; color: var(--cfg-ink-soft); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .35em; align-items: center; }
.cfg-breadcrumbs a { color: var(--cfg-ink-soft); text-decoration: none; }
.cfg-breadcrumbs a:hover { color: var(--cfg-accent-dk); }
.cfg-breadcrumbs span[aria-current] { color: var(--cfg-ink); font-weight: 500; }

/* Compact page-hero used by archive.php / single.php */
.cfg-page-hero--compact { position: relative; background: var(--cfg-surface-2); border-bottom: 1px solid var(--cfg-line); padding-block: clamp(1.8rem, 4vw, 2.8rem); }
.cfg-page-hero--compact h1 { margin: .1em 0 .3em; }

/* Prose (single project body, generic content) */
.cfg-prose { max-width: 760px; }
.cfg-prose h2, .cfg-prose h3 { margin-top: 1.6em; }
.cfg-prose img { border-radius: var(--cfg-radius-sm); }
.cfg-single__hero { margin: 0 0 2rem; }
.cfg-single__hero img { width: 100%; border-radius: var(--cfg-radius); box-shadow: var(--cfg-shadow-sm); }

/* Gallery (project archive grid) — image-dominant overlay cards, matches cfg/category-tiles */
.cfg-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.cfg-gallery-card {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: clamp(320px, 32vw, 420px); border-radius: var(--cfg-radius); overflow: hidden;
	text-decoration: none; color: inherit;
	box-shadow: var(--cfg-shadow-sm); transition: box-shadow .35s var(--cfg-ease);
}
.cfg-gallery-card:hover { box-shadow: var(--cfg-shadow); }
.cfg-gallery-card__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.cfg-gallery-card__media img, .cfg-gallery-card__ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--cfg-ease); }
.cfg-gallery-card__ph { background: linear-gradient(135deg, var(--cfg-surface-2), #3D4855); }
.cfg-gallery-card:hover .cfg-gallery-card__media img { transform: scale(1.06); }
.cfg-gallery-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,28,35,0) 30%, rgba(15,28,35,.3) 58%, rgba(15,28,35,.88) 100%); transition: background .35s var(--cfg-ease); }
.cfg-gallery-card:hover .cfg-gallery-card__scrim { background: linear-gradient(180deg, rgba(15,28,35,.1) 20%, rgba(15,28,35,.42) 50%, rgba(15,28,35,.92) 100%); }
.cfg-gallery-card__body { position: relative; z-index: 2; padding: 1.4rem 1.5rem 1.5rem; color: #fff; display: flex; flex-direction: column; gap: .3rem; }
.cfg-gallery-card__cat { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cfg-accent-dk); }
.cfg-gallery-card__title { font-family: var(--cfg-font-head); font-size: clamp(1.1rem, 1.7vw, 1.35rem); text-transform: uppercase; letter-spacing: .02em; font-weight: 600; color: #fff; }
.cfg-gallery-card__more { display: inline-flex; align-items: center; gap: .4em; font-size: .88rem; font-weight: 600; color: #fff;
	opacity: 0; max-height: 0; transform: translateY(6px); transition: opacity .3s var(--cfg-ease), max-height .3s var(--cfg-ease), transform .3s var(--cfg-ease); }
.cfg-gallery-card__more svg { transition: transform .25s var(--cfg-ease); }
.cfg-gallery-card:hover .cfg-gallery-card__more { opacity: 1; max-height: 2rem; transform: none; }
.cfg-gallery-card:hover .cfg-gallery-card__more svg { transform: translateX(3px); }

/* Generic post list (blog fallback) */
.cfg-postlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.8rem; }
.cfg-postcard__media img { border-radius: var(--cfg-radius-sm); width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.cfg-postcard__title { font-size: 1.3rem; margin: .6rem 0 .3rem; }

/* 404 */
.cfg-404__actions .cfg-btn { margin-right: .6rem; }

/* Visually hidden, still announced. Used where an interactive element's
   accessible name cannot come from visible text -- e.g. a gallery link that
   wraps only an image whose alt is legitimately empty. */
.cfg-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}