/* Eastern Christmas Lights Installers theme. Built by bin/build.php from assets/css/parts. Edit the parts, not this file. */

/* ==== 00-tokens.css ==== */
/* The prototype's :root, verbatim (prototype/assets/css/site.css), then the parent's own tokens
   pointed at it. Values invented here would be differences to find later (conversion-recipe §3).

   Font families are hard-set: the parent's resolver reads get_theme_mod( "arenex_font_{$key}",
   'Geologica' ) with a hardcoded fallback, so a child's 'custom' choice never reaches it
   (PRE-FLIGHT §1.2). This sheet prints after the parent's :root, so it wins on source order. */

:root{
  /* ---- colour ----------------------------------------------------------
     Sampled from the client logo (blazinjohn-01-1.png, 1600×1511): 41% black
     outline, 10% crimson #E00F44, 13% greens (#00A266 / #3BD16C / #005435),
     6% cream #FFFAE4, star gold. >40% black → dark ground (HOUSE-STYLE §2).
     Ground = the logo black pushed toward its dark green, so the crimson accent
     sits on its own complement, as in the mark. Light band = the logo cream,
     toned for a large surface. One accent: crimson. */
  --ink:#0A0F0D;        /* ground (night)                                   */
  --ink-2:#111A16;      /* raised surface                                   */
  --ink-3:#1A2520;      /* hairline on ink                                  */
  --ink-4:#2B3A33;      /* border on ink                                    */
  --snow:#F5F0E3;       /* light band (logo cream, toned)                   */
  --snow-2:#FCF8EE;     /* raised on snow                                   */
  --snow-3:#E6DFCC;     /* hairline on snow                                 */

  --fg:#F3EDDC;         /* 16.5:1 on --ink · 15.2:1 on --ink-2              */
  --fg-dim:#C2BBA8;     /* 10.1:1 on --ink ·  9.3:1 on --ink-2              */
  --fg-mute:#9A9483;    /*  6.4:1 on --ink ·  5.9:1 on --ink-2              */
  --text:#0D1411;       /* 16.4:1 on --snow · 17.6:1 on --snow-2            */
  --text-dim:#4A4F45;   /*  7.4:1 on --snow ·  7.9:1 on --snow-2            */
  --text-mute:#6A6D61;  /*  4.65:1 on --snow · 4.98:1 on --snow-2           */

  --accent:#E00F44;     /* logo crimson · fills + large text · 3.98:1 on ink (UI ok), 4.27:1 on snow */
  --accent-hi:#FF4A6B;  /* crimson as small text/focus on dark · 5.93:1 on ink */
  --accent-dark:#C40C3B;/* crimson as small text/focus on light · 5.33:1 on snow */
  --on-accent:#FFFAE4;  /* logo cream on crimson · 4.64:1                    */

  --field-line-snow:#837D6E; /* 3.6:1 on snow — form field edge (1.4.11)     */
  --field-line-ink:#66756C;  /* 3.66:1 on ink-2                              */
  --ok-ink:#00A266;     /* logo emerald · 5.85:1 on ink (semantic, not accent) */
  --ok-snow:#00754A;    /* 5.07:1 on snow                                    */
  --bad:#FF6B6B;        /* error text on ink (paired with an icon + words)   */

  --glow:#FFD98A;       /* the warm-white of a lit C9 bulb. Illustration only:
                           bulbs, review stars. Never a button, never a link. */
  --glow-rgb:255 217 138;
  --bulb-off:#2F3A34;

  /* ---- type (custom-typography: fixed rem steps, measured per breakpoint) -- */
  --font-display:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-01:5rem;      /* 80 hero        */
  --fs-02:3.5rem;    /* 56 section     */
  --fs-03:3rem;      /* 48 stat        */
  --fs-04:2rem;      /* 32 panel       */
  --fs-05:1.5rem;    /* 24 card / FAQ q */
  --fs-06:1.25rem;   /* 20 lead        */
  --fs-07:1.0625rem; /* 17 body        */
  --fs-08:0.9375rem; /* 15 small       */
  --fs-09:0.8125rem; /* 13 caption     */
  --fs-10:0.75rem;   /* 12 label       */
  --t-hero:var(--fs-01); --t-section:var(--fs-02); --t-stat:var(--fs-03);
  --t-panel:var(--fs-04); --t-card:var(--fs-05); --t-lead:var(--fs-06);
  --t-body:var(--fs-07); --t-small:var(--fs-08); --t-caption:var(--fs-09);
  --t-label:var(--fs-10);
  --lh-display:.92; --lh-panel:1.02; --lh-lead:1.5; --lh-body:1.6;
  --ls-display:-0.005em; --ls-label:.14em; --ls-btn:.05em;

  /* ---- spacing (03-design-system §1) ----------------------------------- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem;
  --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --space-section:clamp(4rem,8vw,8rem);
  --space-section-sm:clamp(2.5rem,5vw,4rem);
  --space-block:clamp(2rem,4vw,3.5rem);
  --space-element:var(--s-5);
  --space-tight:var(--s-3);
  --container:1280px;
  --container-prose:40rem;
  --gutter:clamp(1.25rem,4vw,3rem);

  /* ---- radius: one scale, three values (consumer service, HOUSE-STYLE §2) -- */
  --r:10px; --r-lg:12px; --r-pill:999px;

  /* ---- buttons, focus, header, z ---------------------------------------- */
  --btn-h-md:2.75rem; --btn-h-lg:3.25rem; --btn-pad-x:1.5rem;
  --focus-ring:2px; --focus-offset:3px;
  --header-h:88px; --topbar-h:44px;
  --z-base:0; --z-raised:10; --z-sticky:100; --z-header:200; --z-dropdown:300; --z-overlay:400;

  /* ---- motion (03 §6): one easing ---------------------------------------- */
  --dur-fast:120ms; --dur-base:240ms; --dur-slow:480ms;
  --ease-out:cubic-bezier(.22,1,.36,1);

  color-scheme:dark;
}

:root {
	/* The parent's names for the same values. */
	--font-heading: var(--font-display);
	/* --font-body is the prototype's own name, set above. */
	--container-max-width: calc(var(--container) + 2 * var(--gutter));   /* the plugin's containers pad inside this, so the content is the prototype's 1280 */
	--container-padding: var(--gutter);
	--body-size: var(--t-body);
}

/* Type steps per screen band, and the 64px phone header (prototype responsive.css). */
@media (max-width:1239px){:root{--fs-01:4.25rem;--fs-02:3rem;--fs-03:2.75rem}}
@media (max-width:1024px){:root{--fs-01:3.75rem;--fs-02:2.75rem;--fs-03:2.5rem;--fs-04:1.75rem}}
@media (max-width:768px){:root{--fs-01:3.5rem;--fs-02:2.5rem;--fs-03:2.5rem;--fs-04:1.75rem;--fs-05:1.375rem;--header-h:64px}}
@media (max-width:560px){:root{--fs-01:2.875rem;--fs-02:2.25rem;--fs-03:2.25rem;--fs-04:1.625rem;--fs-06:1.1875rem;--fs-08:1rem;--fs-09:.875rem}}
@media (max-width:370px){:root{--fs-01:2.5rem;--fs-02:2rem}}

/* The icon masks (prototype site.css): a C9 bulb, a tick, the repeat arrow, a map pin. */
:root{--bulb-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Crect x='6' y='0' width='8' height='7' rx='1.5'/%3E%3Cpath d='M10 7c-5 0-9 6-9 12.5C1 25 5 30 10 30s9-5 9-10.5C19 13 15 7 10 7z'/%3E%3C/svg%3E");
  --check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --repeat-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
  --pin-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath fill-rule='evenodd' d='M10 0C4.48 0 0 4.42 0 9.88 0 17.29 10 30 10 30s10-12.71 10-20.12C20 4.42 15.52 0 10 0zm0 6.3a3.6 3.6 0 1 0 0 7.2 3.6 3.6 0 1 0 0-7.2z'/%3E%3C/svg%3E")}


/* ==== 01-fonts.css ==== */
/* The two self-hosted faces, from the prototype (assets/fonts there). Saira Condensed 800/700 for
   headings, buttons and nav; Hanken Grotesk (variable, upright) for body text, chosen by the user on
   4 Oct 2026 for easier long reading (custom-typography preset 02).

   They live in a part, not in the page head, so bin/build.php carries them into the editor canvas too.
   Paths are relative to assets/css/. */

@font-face { font-family: "Saira Condensed"; src: url("../fonts/SairaCondensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira Condensed"; src: url("../fonts/SairaCondensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }


/* ==== 02-base.css ==== */
/* Base: the prototype's reset, grounds, section rhythm, type roles and buttons, on WordPress's
   markup. Prototype: site.css "Base", "Grounds", "Section rhythm", "Roles", "Eyebrow", "Buttons". */

/* ---- reset ---------------------------------------------------------------------------- */
/* The parent sets overflow-x:hidden on html AND body, which makes body a scroll box: the
   sticky header and the hero's curtain then stop sticking. clip on html stops sideways
   scroll without that. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--s-4));overflow-x:clip}
body{margin:0;overflow-x:visible;background:var(--ink);color:var(--fg);font-family:var(--font-body);font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote{margin:0}   /* the parent's p{margin:0 0 1rem} loads first */
:where(ul,ol){padding:0;list-style:none}
a,a:hover{color:inherit}
button{font:inherit;color:inherit}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:var(--focus-ring) solid var(--focus,var(--accent-hi));outline-offset:var(--focus-offset);border-radius:4px}
[hidden]{display:none!important}

/* ---- grounds: every section sets its own palette, so nothing inside has to guess ---------- */
:root,
.is-style-band-night,.is-style-page-header,.is-style-page-head,.is-style-panel-night,
.has-primary-background-color,.arenex-steps.is-style-dark{
  --bg:var(--ink);--c:var(--fg);--c-dim:var(--fg-dim);--c-mute:var(--fg-mute);--line:var(--ink-4);--hair:var(--ink-3);--raised:var(--ink-2);--em:var(--accent-hi);--focus:var(--accent-hi);--field-line:var(--field-line-ink)}
.is-style-band-snow,.is-style-reviews,.has-light-background-color,.arenex-ticker,.arenex-project-gallery,.is-style-form-card{
  --bg:var(--snow);--c:var(--text);--c-dim:var(--text-dim);--c-mute:var(--text-mute);--line:var(--snow-3);--hair:var(--snow-3);--raised:var(--snow-2);--em:var(--accent-dark);--focus:var(--accent-dark);--field-line:var(--field-line-snow)}
.is-style-band-night,.is-style-page-header,.is-style-page-head,.arenex-steps.is-style-dark,
.is-style-band-snow,.is-style-reviews,.arenex-ticker,.arenex-project-gallery{background:var(--bg);color:var(--c)}
.has-light-background-color,.has-primary-background-color{color:var(--c)}

/* ---- section rhythm: padding only, one token, same-ground neighbours join ----------------- */
.site-main{display:flow-root}
.site-main>:is(.wp-block-group.alignfull,.arenex-split,.arenex-cards,.arenex-steps,.arenex-strip,.arenex-project-gallery){margin:0;padding-block:var(--space-section)}
/* everything after the pinned hero paints over it (the curtain), and is opaque: a night section
   with no background of its own (a Split, a Strip, the state pages' Cards) let the pinned hero's
   heading and buttons show through as it scrolled up over them. Weightless, so a section's own
   background (a band, a Cover, a palette colour) still wins. */
.site-main>:not(.is-style-lights-hero){position:relative;z-index:var(--z-raised)}
:where(.site-main>:not(.is-style-lights-hero)){background-color:var(--bg)}
.site-main>:is(.is-style-band-snow,.is-style-reviews,.has-light-background-color)+:is(.is-style-band-snow,.is-style-reviews,.has-light-background-color),
.site-main>:is(.is-style-band-night,.arenex-steps.is-style-dark,.has-primary-background-color,.arenex-split:not(.has-background),.arenex-cards:not(.has-background),.arenex-strip:not(.has-background))+:is(.is-style-band-night,.arenex-steps.is-style-dark,.has-primary-background-color,.arenex-split:not(.has-background),.arenex-cards:not(.has-background),.arenex-strip:not(.has-background)){padding-top:0}
/* the values ticker is a strip inside the cream band: the section after it shares one gap */
.site-main>.arenex-ticker+:is(.is-style-band-snow,.has-light-background-color){padding-top:var(--space-section-sm)}

/* the container: a full-width Group's contents, and the plugin's own (00-tokens sets its width) */
.wp-block-group.alignfull>.wp-block-group__inner-container,
.wp-block-cover.alignfull>.wp-block-cover__inner-container{width:min(var(--container),100% - 2*var(--gutter));max-width:none;margin-inline:auto;padding:0}

/* ---- type roles ---------------------------------------------------------------------------- */
.site-main :is(h1,h2,h3,h4){font-family:var(--font-display);font-weight:800;letter-spacing:var(--ls-display);text-wrap:balance;text-transform:none;color:inherit;margin:0}
.site-main h1{font-size:var(--t-hero);line-height:var(--lh-display)}
.site-main h2{font-size:var(--t-section);line-height:var(--lh-display)}
.site-main h3{font-size:var(--t-card);line-height:var(--lh-panel)}
.site-main h3.is-style-panel{font-size:var(--t-panel);line-height:var(--lh-panel)}
.site-main p{font-size:inherit;line-height:inherit}
.site-main .is-style-lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--c-dim)}

/* Body text in any block container: the prototype's t-prose. Styled paragraphs override it. */
:is(.wp-block-group__inner-container,.wp-block-column,.acf-innerblocks-container,.wp-block-cover__inner-container,.wp-block-accordion-panel)>p:not([class*="is-style-"]){color:var(--c-dim);max-width:65ch;text-wrap:pretty}

/* Flow: the gaps between blocks in a text column (prototype .cmp-head and t-prose rules). */
:is(.wp-block-group__inner-container,.wp-block-column,.acf-innerblocks-container,.wp-block-cover__inner-container)>*+*{margin-top:var(--s-4)}
:is(.wp-block-group__inner-container,.wp-block-column,.acf-innerblocks-container,.wp-block-cover__inner-container)>:is(.is-style-eyebrow,.is-style-eyebrow-place)+*{margin-top:0}
:is(.wp-block-group__inner-container,.wp-block-column,.acf-innerblocks-container,.wp-block-cover__inner-container)>:is(h1,h2)+*{margin-top:var(--s-5)}
:is(.wp-block-group__inner-container,.wp-block-column,.acf-innerblocks-container,.wp-block-cover__inner-container)>*+:is(.wp-block-buttons){margin-top:var(--space-element)}
/* a section's heading block, then its content: one block gap */
/* a band's heading (eyebrow, heading, lead) and what follows it: the prototype's .cmp-head .t-section
   {margin-bottom:24px} and .cmp-head+*{margin-top:space-block} */
.wp-block-group.alignfull>.wp-block-group__inner-container>h2+*:not(.is-style-lead){margin-top:calc(var(--s-5) + var(--space-block))}
.wp-block-group.alignfull>.wp-block-group__inner-container>h2+.is-style-lead+*{margin-top:var(--space-block)}
.wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:first-child{margin-top:0}

/* ---- eyebrow: one C9 bulb that lights when its section is in view ---------------------------- */
.site-main .is-style-eyebrow,.site-main .is-style-eyebrow-place{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--space-tight);font-family:var(--font-body);font-size:var(--t-label);font-weight:600;line-height:var(--lh-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-dim)}
.site-main .is-style-eyebrow::before,.site-main .is-style-eyebrow-place::before{content:"";flex:none;width:.7rem;height:1.05rem;background:var(--bulb-off);-webkit-mask:var(--bulb-mask) center/contain no-repeat;mask:var(--bulb-mask) center/contain no-repeat;transition:background-color var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out)}
:is(.is-style-band-snow,.is-style-reviews,.has-light-background-color,.arenex-project-gallery) :is(.is-style-eyebrow,.is-style-eyebrow-place)::before{background:var(--snow-3)}
.is-inview :is(.is-style-eyebrow,.is-style-eyebrow-place)::before,.is-style-lights-hero :is(.is-style-eyebrow,.is-style-eyebrow-place)::before{background:var(--glow);filter:drop-shadow(0 0 6px rgb(var(--glow-rgb) / .9))}
:is(.is-style-band-snow,.is-style-reviews,.has-light-background-color,.arenex-project-gallery).is-inview :is(.is-style-eyebrow,.is-style-eyebrow-place)::before{background:var(--accent);filter:none}
/* place eyebrows (a state, "Areas we serve") carry a map pin; the bulb stays with the service */
.site-main .is-style-eyebrow-place::before{-webkit-mask-image:var(--pin-mask);mask-image:var(--pin-mask)}

/* ---- buttons: the theme's (.ec-btn) and the Buttons block share one look ---------------------- */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.wp-block-buttons>.wp-block-button{margin:0}
.ec-btn,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--btn-h-lg);padding:0 var(--btn-pad-x);border-radius:var(--r);border:2px solid transparent;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1;letter-spacing:var(--ls-btn);text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.ec-btn--primary,.wp-block-button:not(.is-style-outline,.is-style-arrow-link)>.wp-block-button__link{background:var(--accent);color:var(--on-accent)}
.ec-btn--primary:hover,.wp-block-button:not(.is-style-outline,.is-style-arrow-link)>.wp-block-button__link:hover{background:var(--accent-dark);color:var(--on-accent)}
/* the second button in a row is the ghost one, as in the prototype; Outline makes any button one */
.ec-btn--ghost,.wp-block-button.is-style-outline>.wp-block-button__link,.wp-block-buttons>.wp-block-button:nth-child(2):not(.is-style-arrow-link)>.wp-block-button__link{background:transparent;border-color:currentColor;color:var(--c)}
.ec-btn--ghost:hover,.wp-block-button.is-style-outline>.wp-block-button__link:hover,.wp-block-buttons>.wp-block-button:nth-child(2):not(.is-style-arrow-link)>.wp-block-button__link:hover{background:var(--hair);color:var(--c)}
.ec-btn:active,.wp-block-button__link:active{transform:translateY(1px) scale(.99)}
.ec-btn svg{width:1.1em;height:1.1em;flex:none}

/* a link with an arrow: the Button style "Link with an arrow", and the paragraph style */
.wp-block-button.is-style-arrow-link>.wp-block-button__link,.site-main .is-style-link-arrow a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--btn-h-md);padding:0;border:0;border-radius:0;background:none;font-family:var(--font-body);font-size:inherit;font-weight:600;letter-spacing:0;text-transform:none;color:var(--c);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-thickness var(--dur-fast) var(--ease-out)}
.wp-block-button.is-style-arrow-link>.wp-block-button__link::after,.site-main .is-style-link-arrow a::after{content:"→";display:inline-block;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out)}
.wp-block-button.is-style-arrow-link>.wp-block-button__link:hover,.site-main .is-style-link-arrow a:hover{text-decoration-thickness:2px;color:var(--c)}
.wp-block-button.is-style-arrow-link>.wp-block-button__link:hover::after,.site-main .is-style-link-arrow a:hover::after{transform:translateX(3px)}

/* ---- phone number: label over a big number (prototype .cmp-phone) -------------------------- */
.site-main :is(.is-style-phone,.is-style-link-arrow){display:flex;flex-direction:column;align-items:flex-start}
.site-main .is-style-phone a{display:inline-grid;gap:2px;text-decoration:none}
.site-main .is-style-phone a>span:first-child{font-size:var(--t-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-mute)}
.site-main .is-style-phone a>span:last-child{font-family:var(--font-display);font-weight:800;font-size:1.625rem;line-height:1.05;letter-spacing:.01em;color:var(--c);font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.15em;transition:text-decoration-color var(--dur-fast) var(--ease-out)}
.site-main .is-style-phone a:hover>span:last-child{text-decoration-color:currentColor}

/* ---- photos the client places: rounded like the prototype's ----------------------------------- */
.site-main .wp-block-image{margin:0}
.site-main .wp-block-image img{border-radius:var(--r-lg)}

/* ---- lists ------------------------------------------------------------------------------------ */
.site-main .wp-block-list{padding:0;list-style:none}   /* margins come from the flow rules above */


/* ==== 10-header.css ==== */
/* Top bar and header (theme parts, header.php). Prototype: site.css "Top bar + header",
   responsive.css "header". The menu collapses where the longest label would first wrap. */

.ec-skip{position:absolute;left:var(--s-4);top:-100px;z-index:var(--z-overlay);background:var(--snow);color:var(--text);padding:var(--s-3) var(--s-4);border-radius:var(--r);font-weight:600;text-decoration:none}
.ec-skip:focus{top:var(--s-4);color:var(--text)}
.ec-wrap{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}

.ec-topbar{background:var(--ink-2);color:var(--fg-dim);font-size:var(--t-small);line-height:var(--lh-body);border-bottom:1px solid var(--ink-3)}
.ec-topbar p{margin:0}
.ec-topbar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--topbar-h)}
.ec-topbar__msg{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.ec-topbar__msg strong{white-space:nowrap;color:var(--fg);font-weight:600}
.ec-topbar__phones{display:flex;gap:var(--s-5)}
.ec-topbar__phones a{display:inline-flex;align-items:center;min-height:var(--btn-h-md);white-space:nowrap;text-decoration:none;color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.ec-topbar__phones span{color:var(--fg-mute);font-weight:500;margin-right:.35em}
.ec-topbar__phones a:hover{color:var(--accent-hi)}

.ec-header{position:sticky;top:0;z-index:var(--z-header);background:color-mix(in srgb,var(--ink) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-3)}
.admin-bar .ec-header{top:var(--wp-admin--admin-bar--height,32px)}
.ec-header__in{display:flex;align-items:center;gap:var(--s-6);min-height:var(--header-h)}
.ec-header__logo{flex:none;display:block;width:80px}
.ec-header__logo img{width:80px;height:auto}
.ec-nav{margin-left:auto}
.ec-nav ul{display:flex;gap:var(--s-1);margin:0;padding:0;list-style:none}
.ec-nav a{display:flex;align-items:center;min-height:var(--btn-h-md);padding:0 var(--s-3);border-radius:var(--r);font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:var(--ls-btn);text-transform:uppercase;text-decoration:none;color:var(--fg-dim);white-space:nowrap;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.ec-nav a:hover{color:var(--fg);background:var(--ink-3)}
.ec-nav a[aria-current="page"]{color:var(--fg)}
.ec-header .ec-btn{min-height:var(--btn-h-md)}
.ec-menu-btn{display:none;margin-left:auto;align-items:center;gap:var(--s-2);min-height:var(--btn-h-md);padding:0 var(--s-4);border:1px solid var(--ink-4);border-radius:var(--r);background:none;font-family:var(--font-display);font-weight:700;letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--fg);cursor:pointer}
.ec-menu-btn svg{width:20px;height:20px;flex:none}

@media (max-width:1180px){
  .ec-topbar__more{display:none}
  .ec-nav{position:absolute;left:0;right:0;top:100%;margin:0;background:var(--ink);border-bottom:1px solid var(--ink-3);padding:var(--s-3) var(--gutter) var(--s-5);display:none}
  .ec-nav.is-open{display:block}
  .ec-nav ul{flex-direction:column;gap:0}
  .ec-nav a{min-height:3.25rem;font-size:1.125rem;border-bottom:1px solid var(--ink-3);border-radius:0;padding-inline:0}
  .ec-nav a:hover{background:none}
  .ec-menu-btn{display:inline-flex}
  .ec-header__in{gap:var(--s-3)}
}
@media (max-width:768px){
  .ec-header__logo,.ec-header__logo img{width:64px}
  .ec-topbar__phones{display:none}
  .ec-topbar__in{justify-content:center;text-align:center}
  .ec-header .ec-btn{display:none}
}


/* ==== 11-footer.css ==== */
/* Footer and the phones' sticky contact bar (theme parts, footer.php). Prototype: site.css
   "Footer (theme) + sticky phone bar", responsive.css ≤1024 / ≤768 / ≤560. */

.ec-footer{--bg:var(--ink);--c:var(--fg);--c-dim:var(--fg-dim);--c-mute:var(--fg-mute);--line:var(--ink-4);position:relative;z-index:var(--z-raised);padding-block:var(--space-section) var(--s-7);border-top:1px solid var(--ink-3);background:var(--ink);color:var(--fg);font-size:var(--t-body);line-height:var(--lh-body)}
.ec-footer p{margin:0}
.ec-footer__grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr));gap:var(--space-block) var(--s-6)}
.ec-footer__brand img{width:112px;height:auto;margin-bottom:var(--s-5)}
.ec-footer__brand p{color:var(--fg-dim);max-width:30ch}
.ec-footer h2{margin:0 0 var(--s-4);font-family:var(--font-body);font-size:var(--t-label);font-weight:600;line-height:var(--lh-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-mute)}
.ec-footer ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.ec-footer li a{display:inline-flex;align-items:center;min-height:var(--btn-h-md);color:var(--fg);text-decoration:none}
.ec-footer li a:hover{text-decoration:underline}
.ec-footer__towns{font-size:var(--t-small);color:var(--fg-dim);line-height:1.6;margin-top:var(--s-3)!important}
.ec-phone{display:grid;gap:2px;margin-bottom:var(--s-3);text-decoration:none}
.ec-phone__label{font-size:var(--t-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--fg-mute)}
.ec-phone__num{font-family:var(--font-display);font-weight:800;font-size:1.375rem;line-height:1.05;letter-spacing:.01em;color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.15em;transition:text-decoration-color var(--dur-fast) var(--ease-out)}
.ec-phone:hover .ec-phone__num{text-decoration-color:currentColor}
.ec-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-4);margin-top:var(--space-block);padding-top:var(--s-5);border-top:1px solid var(--ink-3);font-size:var(--t-caption);color:var(--fg-mute)}
.ec-footer__base a{color:var(--fg-dim)}
.ec-social{display:flex;gap:var(--s-2);margin-top:var(--s-5)}
.ec-social a{display:grid;place-items:center;width:var(--btn-h-md);height:var(--btn-h-md);border:1px solid var(--ink-4);border-radius:50%;color:var(--fg)}
.ec-social a:hover{background:var(--ink-3);color:var(--fg)}
.ec-social svg{width:1.125rem;height:1.125rem}

.ec-mbar{display:none}

@media (max-width:1024px){.ec-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .ec-mbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:var(--s-2);padding:var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--ink) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--ink-3)}
  .ec-mbar .ec-btn{min-height:var(--btn-h-lg);padding:0 var(--s-2);font-size:.9375rem}
  .ec-mbar .ec-btn--ghost{color:var(--fg);border-color:var(--ink-4)}
  body{padding-bottom:calc(var(--btn-h-lg) + var(--s-5) + env(safe-area-inset-bottom))}
}
@media (max-width:560px){.ec-footer__grid{grid-template-columns:minmax(0,1fr)}}


/* ==== 40-hero.css ==== */
/* Home hero: Cover, style "Home hero, lights switch on" (is-style-lights-hero).
   Prototype: hero option D, "the plug-in moment", in layout B: the photo is a band across the
   top that takes the spare height, and the heading row overlaps its foot. On desktop the hero
   holds still while the cream band slides up over it (the curtain, 04-layout pattern 15).
   The Cover's photo stays a Cover background, so the client swaps it and sets its focal point in
   the editor; here it is placed in the band's grid row instead of behind the whole block.
   Prototype: site.css "Hero", hero-options.css "B" and "D". */

.wp-block-cover.is-style-lights-hero{position:sticky;top:calc(var(--header-h) - 1px);z-index:var(--z-base);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(clamp(17rem,30vw,27rem),1fr) auto;align-items:end;justify-content:stretch;min-height:min(calc(100svh - var(--header-h) - var(--topbar-h)),880px);margin:0;padding:0 0 var(--space-element);overflow:hidden;background:var(--ink);color:var(--fg)}
.is-style-lights-hero>.wp-block-cover__image-background,
.is-style-lights-hero>.ec-lights__canvas{position:absolute;grid-row:1/2;grid-column:1/2;inset:0;width:100%;height:100%;object-fit:cover}
.is-style-lights-hero>.wp-block-cover__background{display:none}
/* the photo melts into the night below it, and darkens under the header. An absolutely placed
   grid item needs both lines (1/2): with one, the other edge is the container's own, the whole hero. */
.is-style-lights-hero::after{content:"";position:absolute;grid-row:1/2;grid-column:1/2;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,var(--ink) 0%,rgb(10 15 13 / 0) 38%),linear-gradient(180deg,rgb(10 15 13 / .5) 0%,rgb(10 15 13 / 0) 22%)}
.is-style-lights-hero>.wp-block-cover__inner-container{grid-row:2;grid-column:1;position:relative;z-index:var(--z-raised);color:inherit}

/* the heading row: heading left (7), buttons and phones right (5), overlapping the photo's foot */
.site-main .wp-block-columns.is-style-hero-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-5) clamp(2rem,5vw,5rem);align-items:end!important;margin:calc(-1 * clamp(2.5rem,4vw,4rem)) 0 0}
.is-style-hero-row>.wp-block-column{margin:0}
.is-style-hero-row>.wp-block-column:last-child{padding-bottom:var(--s-2)}
.is-style-hero-row>.wp-block-column>.wp-block-buttons:first-child{margin-top:var(--space-element)}

/* "Call or Text · NC … · VA …" */
.site-main .is-style-call{margin-top:var(--s-4);font-size:var(--t-small);color:var(--fg-dim)}
.site-main .is-style-call a{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:rgb(243 237 220 / .35);text-underline-offset:.2em;white-space:nowrap}
.site-main .is-style-call a:hover{text-decoration-color:currentColor}

@media (max-width:1024px){
  .site-main .wp-block-columns.is-style-hero-row{grid-template-columns:minmax(0,1fr);align-items:start!important}
}
/* phones: the hero releases (no pin) and the photo is a 16:10 band */
@media (max-width:768px){
  .wp-block-cover.is-style-lights-hero{position:relative;top:auto;display:grid;grid-template-rows:auto auto;min-height:0;padding-bottom:var(--space-block)}
  .is-style-lights-hero::before{content:"";grid-row:1;grid-column:1;aspect-ratio:16/10}
  .site-main .wp-block-columns.is-style-hero-row{margin-top:-2rem}
}


/* ==== 41-ticker.css ==== */
/* Values ticker: arenex/ticker on the cream band, each value with a crimson bulb.
   Prototype: site.css "Ticker". The item's bold words (.arenex-ticker__title) come from the
   plugin's per-item title; without one the whole value is set as the line. */

.site-main>.arenex-ticker{padding-block:var(--s-5);border-block:0;border-bottom:1px solid var(--snow-3);background:var(--snow);color:var(--text)}
.arenex-ticker .arenex-ticker__item{display:flex;align-items:baseline;gap:var(--s-3);padding:0 var(--s-6);border:0;font-family:var(--font-body);font-size:var(--t-body);letter-spacing:0;line-height:var(--lh-body);color:var(--text-dim);white-space:nowrap}
.arenex-ticker .arenex-ticker__item::before{content:"";align-self:center;flex:none;width:.55rem;height:.8rem;background:var(--accent);-webkit-mask:var(--bulb-mask) center/contain no-repeat;mask:var(--bulb-mask) center/contain no-repeat}
.arenex-ticker .arenex-ticker__title{font-family:var(--font-display);font-weight:800;font-size:1.375rem;letter-spacing:.01em;text-transform:uppercase;color:var(--text)}
/* the pause control (WCAG 2.2.2): a quiet square at the end of the strip */
.arenex-ticker .arenex-ticker__pause{width:var(--btn-h-md);border-left:1px solid var(--snow-3);background:var(--snow);color:var(--text-mute)}
.arenex-ticker .arenex-ticker__pause:hover{color:var(--text)}


/* ==== 42-intro.css ==== */
/* Intro and two-column text bands: core/columns in a band (home intro, state intros, FAQ,
   commercial "who we light" and "why us", About). Prototype: site.css "Intro", "FAQ". */

/* every Columns block is a grid: two equal columns unless a section says otherwise. WordPress's own
   columns CSS loads after the theme's and sets display:flex and align-items:normal !important, so
   display needs the extra weight, align-items !important (here and in each section's rule), and the
   default track list stays weightless so any section's own list wins. */
.site-main .wp-block-columns{display:grid;gap:var(--space-block) clamp(2rem,6vw,6rem);align-items:start!important;margin-bottom:0}
:where(.site-main .wp-block-columns){grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.site-main .wp-block-columns>.wp-block-column{min-width:0;margin:0;flex-basis:auto!important}
/* a band's own two-column layout: 7 / 5, like the prototype's intro grid */
.wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:not([class*="is-style-"]){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wp-block-columns:has(>.wp-block-column>.is-style-numbered-rows)>.wp-block-column:first-child>p:not([class*="is-style-"]){max-width:46ch}

/* numbered rows (core/list ordered, "Numbered rows") */
.site-main ol.is-style-numbered-rows{counter-reset:n;border-top:2px solid var(--c)}
.site-main .is-style-numbered-rows>li{counter-increment:n;display:grid;grid-template-columns:3.25rem 1fr;align-items:baseline;padding-block:var(--s-4);border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:800;font-size:var(--t-card);line-height:1.1;color:var(--c)}
.site-main .is-style-numbered-rows>li::before{content:counter(n,decimal-leading-zero);font-family:var(--font-body);font-size:var(--t-small);font-weight:600;letter-spacing:.08em;color:var(--em)}

/* FAQ: the heading rail sticks beside the answers (core/accordion, WordPress 7.1) */
.wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:has(>.wp-block-accordion){grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.wp-block-columns:has(>.wp-block-accordion)>.wp-block-column:first-child{position:sticky;top:calc(var(--header-h) + var(--s-6))}
.wp-block-columns:has(>.wp-block-accordion)>.wp-block-column:first-child>.is-style-phone{margin-top:var(--s-5)}
.site-main .wp-block-accordion{border-top:2px solid var(--c);margin:0}
.site-main .wp-block-accordion-item{border-bottom:1px solid var(--line);margin:0}
.site-main .wp-block-accordion-heading{margin:0;font-size:var(--t-card);line-height:1.1}
.site-main .wp-block-accordion-heading__toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);width:100%;min-height:var(--btn-h-lg);padding:var(--s-5) 0;border:0;background:none;color:var(--c);font-family:var(--font-display);font-weight:800;font-size:inherit;line-height:inherit;letter-spacing:var(--ls-display);text-align:left;cursor:pointer}
.site-main .wp-block-accordion-heading__toggle-title{flex:1}
.site-main .wp-block-accordion-heading__toggle-icon{flex:none;display:block;width:1.75rem;height:1.75rem;border:1.5px solid var(--c);border-radius:50%;font-size:0;color:var(--c);background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat;transition:transform var(--dur-base) var(--ease-out)}
.site-main .wp-block-accordion-panel{padding-bottom:var(--s-5)}
.site-main .wp-block-accordion-panel>p{color:var(--c-dim);max-width:62ch}
.site-main .wp-block-accordion-panel>p+p{margin-top:var(--s-4)}

@media (max-width:1024px){
  .wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:has(>.wp-block-accordion){grid-template-columns:minmax(0,1fr)}
  .wp-block-columns:has(>.wp-block-accordion)>.wp-block-column:first-child{position:static}
}
@media (max-width:900px){
  .wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:not([class*="is-style-"]){grid-template-columns:minmax(0,1fr)}
}


/* ==== 43-split.css ==== */
/* Photo beside text: arenex/split. Image wide (home "see it first", night) and image narrow
   (Residential and Commercial intros, cream). Labelled points and ticks live here too.
   Prototype: site.css "Switch", "Points", ".cmp-ticks", "split with the photo on the right". */

.arenex-split.is-style-image-wide{--arenex-split-text:5fr;--arenex-split-image:7fr}
.arenex-split.is-style-image-narrow{--arenex-split-text:7fr;--arenex-split-image:5fr}
.arenex-split .arenex-split__grid{box-sizing:border-box;width:min(var(--container),100% - 2*var(--gutter));max-width:none;margin-inline:auto;padding:0;gap:var(--space-block) clamp(2rem,5vw,5rem);align-items:stretch}
.arenex-split .arenex-split__body{align-self:center;min-width:0}
.arenex-split .arenex-split__figure{position:relative;min-height:28rem;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ink-4);background:var(--ink)}
.arenex-split.has-light-background-color .arenex-split__figure{border-color:var(--snow-3)}
.arenex-split .arenex-split__figure>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
.arenex-split .arenex-split__body .is-style-lead{max-width:65ch}
.arenex-split .arenex-split__body h2+*{margin-top:var(--s-5)}
.arenex-split .arenex-split__body .acf-innerblocks-container>p+p{margin-top:var(--s-4)}   /* the plugin's p+p is 24px; the prototype's prose 16px */

/* labelled points: a lede, points each with a bulb, a closing line (core/list "Points with a bulb") */
.site-main .is-style-points{display:grid;gap:var(--s-5);max-width:65ch;margin-top:var(--s-5)}
.site-main .is-style-points>li{color:var(--c-dim);text-wrap:pretty}
.site-main .is-style-points strong{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2);font-family:var(--font-display);font-weight:800;font-size:var(--t-card);line-height:var(--lh-panel);color:var(--c)}
.site-main .is-style-points strong::before{content:"";flex:none;width:.7rem;height:1.05rem;background:var(--bulb-off);-webkit-mask:var(--bulb-mask) center/contain no-repeat;mask:var(--bulb-mask) center/contain no-repeat;transition:background-color var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out)}
.has-light-background-color .is-style-points strong::before,.is-style-band-snow .is-style-points strong::before{background:var(--snow-3)}
.is-inview .is-style-points strong::before{background:var(--glow);filter:drop-shadow(0 0 6px rgb(var(--glow-rgb) / .9))}
:is(.has-light-background-color,.is-style-band-snow).is-inview .is-style-points strong::before{background:var(--accent);filter:none}
.site-main .is-style-points+p{margin-top:var(--s-5)}

/* ticks (core/list "Ticks") */
.site-main .is-style-ticks{display:grid;gap:var(--s-3);margin-top:var(--space-element)}
.site-main .is-style-ticks>li{display:grid;grid-template-columns:1.5rem 1fr;gap:var(--s-2);color:var(--c-dim)}
.site-main .is-style-ticks>li::before{content:"";width:1.25rem;height:1.25rem;margin-top:.2rem;background:var(--ok-ink);-webkit-mask:var(--check-mask) center/contain no-repeat;mask:var(--check-mask) center/contain no-repeat}
:is(.is-style-band-snow,.has-light-background-color,.is-style-form-card) .is-style-ticks>li::before{background:var(--ok-snow)}
.is-style-panel-night .is-style-ticks>li::before{background:var(--ok-ink)}

/* the lights switch and caption the theme adds to a split with lights (60-lights.css draws it) */
.ec-switch{position:absolute;left:var(--s-5);bottom:var(--s-5);z-index:var(--z-raised);display:flex;align-items:center;gap:var(--s-3);min-height:var(--btn-h-md);padding:var(--s-2) var(--s-4) var(--s-2) var(--s-2);border:1px solid rgb(243 237 220 / .25);border-radius:var(--r-pill);background:rgb(10 15 13 / .72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--fg);font-weight:600;font-size:var(--t-small);cursor:pointer}
.ec-switch__text{white-space:nowrap}
.ec-switch__track{position:relative;width:3.25rem;height:1.875rem;border-radius:var(--r-pill);background:var(--accent);transition:background-color var(--dur-base) var(--ease-out)}
.ec-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--fg);transition:transform var(--dur-base) var(--ease-out)}
.ec-switch[aria-pressed="true"] .ec-switch__track::after{transform:translateX(1.375rem)}
.ec-switch:hover{border-color:rgb(243 237 220 / .5)}
.arenex-split .arenex-split__caption{position:absolute;left:auto;top:auto;right:var(--s-5);bottom:var(--s-5);z-index:var(--z-raised);max-width:16rem;margin:0;padding:0;border:0;border-radius:0;background:none;text-align:right;font-family:var(--font-body);font-size:var(--t-caption);font-weight:400;letter-spacing:0;line-height:1.5;text-transform:none;color:var(--fg-dim);-webkit-backdrop-filter:none;backdrop-filter:none}

@media (max-width:1024px){
  .arenex-split .arenex-split__grid,.arenex-split .arenex-split__grid--image-first{grid-template-columns:minmax(0,1fr)}
  .arenex-split .arenex-split__figure{min-height:0;aspect-ratio:16/9}
  .arenex-split .arenex-split__grid--image-first .arenex-split__figure{order:-1}
  /* never two photos back to back: after the page header's photo, this section shows its text first (04-layout §3c) */
  .is-style-page-header+.arenex-split .arenex-split__figure{order:2}
}
@media (max-width:900px){.arenex-split .arenex-split__figure{aspect-ratio:4/3}}
@media (max-width:768px){.arenex-split .arenex-split__caption{display:none}}
@media (max-width:560px){.ec-switch{left:var(--s-3);bottom:var(--s-3)}}


/* ==== 44-cards.css ==== */
/* Residential / commercial: arenex/cards as picture cards. Prototype: site.css "Routes". */

.arenex-cards .arenex-cards__inner{max-width:var(--container-max-width)}
.arenex-cards .arenex-cards__head{display:flow-root;max-width:52rem;margin-bottom:0}   /* flow-root: the heading's 24px stays inside, as in the prototype's grid head */
.arenex-cards .arenex-cards__head:has(.acf-innerblocks-container>:is(h2,h3)+p){max-width:none}
.arenex-cards .arenex-cards__head>.acf-innerblocks-container:has(>:is(h2,h3)+p){display:grid;grid-template-columns:minmax(0,44rem) minmax(0,28rem);justify-content:space-between;align-items:end;column-gap:var(--s-7)}
.arenex-cards .arenex-cards__head>.acf-innerblocks-container:has(>:is(h2,h3)+p)>*{grid-column:1;margin:0}
.arenex-cards .arenex-cards__head>.acf-innerblocks-container:has(>:is(h2,h3)+p)>.is-style-eyebrow{margin-bottom:var(--space-tight)}
.arenex-cards .arenex-cards__head>.acf-innerblocks-container:has(>:is(h2,h3)+p)>p:not(.is-style-eyebrow){grid-column:2;grid-row:1/span 2;align-self:end}
.arenex-cards .arenex-cards__head+.arenex-cards__grid{margin-top:var(--space-block)}
.arenex-cards .arenex-cards__head .acf-innerblocks-container>:is(h2,h3):last-child{margin-bottom:var(--s-5)}   /* a heading with nothing under it keeps its 24px (prototype .cmp-head .t-section) */
.arenex-cards .arenex-cards__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);margin:0;padding:0;list-style:none}
.arenex-cards .arenex-cards__item{display:flex;margin:0}
.arenex-cards .arenex-cards__card{display:flex;flex-direction:column;flex:1;padding:0 0 var(--s-6);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:none;transform:none}
.arenex-cards .arenex-cards__card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.arenex-cards .arenex-cards__media{aspect-ratio:16/10;margin:0 0 var(--space-element);overflow:hidden;border-radius:0}
.arenex-cards .arenex-cards__media img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform var(--dur-slow) var(--ease-out)}
.arenex-cards .arenex-cards__card:hover .arenex-cards__media img{transform:scale(1.03)}
.arenex-cards .arenex-cards__card>:not(.arenex-cards__media){margin-inline:var(--space-element)}
.arenex-cards .arenex-cards__kicker{margin-bottom:var(--s-2);font-size:var(--t-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--em)}
.arenex-cards .arenex-cards__title{margin-bottom:var(--s-4);font-family:var(--font-display);font-weight:800;font-size:var(--t-panel);line-height:var(--lh-panel);letter-spacing:var(--ls-display);color:var(--c)}
.arenex-cards .arenex-cards__text{flex:1;margin:0;color:var(--c-dim);max-width:65ch;font-size:var(--t-body);line-height:var(--lh-body)}
.arenex-cards .arenex-cards__link{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--btn-h-md);margin-top:var(--space-element);padding:0;font-family:var(--font-body);line-height:var(--lh-body);font-size:var(--t-body);font-weight:600;letter-spacing:0;text-transform:none;color:var(--c);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.arenex-cards .arenex-cards__link:hover{text-decoration-thickness:2px;color:var(--c)}
.arenex-cards .arenex-cards__link svg{width:1em;height:1em;transition:transform var(--dur-fast) var(--ease-out)}
.arenex-cards .arenex-cards__link:hover svg{transform:translateX(3px)}

@media (max-width:1295px){
  .arenex-cards .arenex-cards__head>.acf-innerblocks-container:has(>:is(h2,h3)+p){display:block}
  .arenex-cards .arenex-cards__head>.acf-innerblocks-container:has(>:is(h2,h3)+p)>:is(h2,h3){max-width:44rem}
  .arenex-cards .arenex-cards__head>.acf-innerblocks-container:has(>:is(h2,h3)+p)>p:not(.is-style-eyebrow){max-width:28rem}
  .arenex-cards .arenex-cards__head>.acf-innerblocks-container:has(>:is(h2,h3)+p)>p:not(.is-style-eyebrow){margin-top:var(--s-5)}
}
@media (max-width:768px){.arenex-cards .arenex-cards__grid{grid-template-columns:minmax(0,1fr)}}


/* ==== 45-steps.css ==== */
/* Process: arenex/steps, Dark, "Row of steps": four cards on a wire of C9 bulbs that light one
   by one as they reach the screen (the theme script sets .is-lit). Prototype: site.css "Process",
   responsive.css ≤1024 / ≤560. */

.arenex-steps.is-style-dark{--wire:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q50 30 100 3' fill='none' stroke='%232B3A33' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.arenex-steps .arenex-steps__inner{display:block}
.arenex-steps .arenex-steps__head{max-width:46rem;margin-bottom:0}
.arenex-steps .arenex-steps__head .is-style-lead{color:var(--c-dim)}
.arenex-steps .arenex-steps__head .is-style-eyebrow{color:var(--c-dim)}
.arenex-steps.arenex-steps--row .arenex-steps__list{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5);margin-top:var(--space-block);padding-top:4.5rem}
.arenex-steps.arenex-steps--row .arenex-steps__step{position:relative;display:block;padding:var(--space-element);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg)}
/* the wire: each card carries the span from its own bulb to the next, so it always meets them */
.arenex-steps--row .arenex-steps__step::before{content:"";position:absolute;top:-4.35rem;left:calc(var(--space-element) + .75rem);width:calc(100% + var(--s-5));height:1.5rem;background:var(--wire) 0 0/100% 100% no-repeat;pointer-events:none}
.arenex-steps--row .arenex-steps__step:last-child::before{width:calc(100% - var(--space-element) - .75rem + var(--gutter));background-size:200% 100%}
/* the bulb, and its glow */
.arenex-steps--row .arenex-steps__step::after{content:"";position:absolute;top:-4.15rem;left:var(--space-element);width:1.5rem;height:2.25rem;background:var(--bulb-off);-webkit-mask:var(--bulb-mask) center/contain no-repeat;mask:var(--bulb-mask) center/contain no-repeat;transition:background-color var(--dur-slow) var(--ease-out)}
.arenex-steps--row .arenex-steps__body::before{content:"";position:absolute;top:calc(-4.15rem + 2.25rem * .65);left:calc(var(--space-element) + .75rem);width:5rem;height:5rem;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgb(var(--glow-rgb) / .55),rgb(var(--glow-rgb) / 0) 65%);opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease-out)}
.arenex-steps--row .arenex-steps__step.is-lit::after{background:var(--glow)}
.arenex-steps--row .arenex-steps__step.is-lit .arenex-steps__body::before{opacity:1}
/* the big faded number in the corner */
.arenex-steps--row .arenex-steps__num{position:absolute;right:var(--s-4);bottom:-.15em;font-family:var(--font-display);font-weight:800;font-size:6rem;line-height:1;color:var(--fg);-webkit-text-stroke:0;opacity:.06;pointer-events:none}
.arenex-steps--row .arenex-steps__kicker{margin:0 0 var(--s-3);font-size:var(--t-small);line-height:1.55;font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-mute)}
.arenex-steps--row .arenex-steps__title{margin:0 0 var(--s-3);font-family:var(--font-display);font-weight:800;font-size:var(--t-card);line-height:var(--lh-panel);color:var(--c)}
.arenex-steps--row .arenex-steps__desc{margin:0;max-width:none;color:var(--c-dim);font-size:var(--t-small);line-height:1.55}

@media (max-width:1024px){
  .arenex-steps.arenex-steps--row .arenex-steps__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:5.5rem}
  .arenex-steps--row .arenex-steps__step:nth-child(2n)::before{width:calc(100% - var(--space-element) - .75rem);background-size:200% 100%}
  .arenex-steps--row .arenex-steps__step:nth-child(3)::before{left:calc(-1 * var(--gutter));width:calc(var(--gutter) + var(--space-element) + .75rem + 100% + var(--s-5))}
}
@media (max-width:560px){
  .arenex-steps.arenex-steps--row .arenex-steps__list{grid-template-columns:minmax(0,1fr);row-gap:var(--s-5);padding-top:0;padding-left:2.75rem;isolation:isolate}
  .arenex-steps.arenex-steps--row .arenex-steps__list::after{content:"";position:absolute;z-index:-1;left:calc(.85rem - 1px);top:0;bottom:0;width:2px;background:var(--ink-4)}   /* the wire runs behind the bulbs */
  .arenex-steps--row .arenex-steps__step::before,.arenex-steps--row .arenex-steps__step:nth-child(n)::before{display:none}
  .arenex-steps--row .arenex-steps__step::after{top:var(--space-element);left:-2.65rem}
  .arenex-steps--row .arenex-steps__body::before{top:calc(var(--space-element) + 2.25rem * .65);left:calc(-2.65rem + .75rem)}
}


/* ==== 46-pricing.css ==== */
/* Pricing: lead column (stats, note, button) beside a bento of three photos and the "Every
   install includes" panel. Prototype: site.css "Pricing", responsive.css ≤1024 / ≤560 / ≤420. */

.wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:has(>.is-style-bento){grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-5) clamp(1.5rem,3vw,3rem);align-items:stretch!important}
.wp-block-columns:has(>.is-style-bento)>.wp-block-column:first-child>p:not([class*="is-style-"]){max-width:65ch}

/* two numbers */
.site-main .wp-block-columns.is-style-stats{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s-4);margin-block:var(--space-element)}
.is-style-stats>.wp-block-column{padding:var(--s-5);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg)}
.site-main .is-style-stat{display:block;margin:0 0 var(--s-2);font-family:var(--font-display);font-weight:800;font-size:var(--t-stat);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--c)}
.is-style-stats>.wp-block-column>p:not([class*="is-style-"]){margin:0;font-size:var(--t-small);color:var(--c-dim);line-height:1.45}

/* a note with the repeat icon */
.site-main .is-style-note{display:grid;grid-template-columns:1.5rem 1fr;gap:var(--s-2);padding:var(--s-4) var(--s-5);border-left:3px solid var(--accent);background:var(--raised);border-radius:0 var(--r) var(--r) 0;color:var(--c-dim);font-size:var(--t-small);max-width:none}
.site-main .is-style-note::before{content:"";width:1.25rem;height:1.25rem;margin-top:.15rem;background:var(--accent-dark);-webkit-mask:var(--repeat-mask) center/contain no-repeat;mask:var(--repeat-mask) center/contain no-repeat}

/* the bento: photo a | includes / photo b | photo c */
.site-main .wp-block-column.is-style-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(14rem,1fr);grid-template-areas:"a inc" "b c";gap:var(--s-5)}
.is-style-bento>*{margin:0!important}
.is-style-bento>.wp-block-image{position:relative;min-height:14rem;border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.is-style-bento>.wp-block-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.is-style-bento>.wp-block-image:nth-of-type(1){grid-area:a}
.is-style-bento>.wp-block-image:nth-of-type(2){grid-area:b}
.is-style-bento>.wp-block-image:nth-of-type(3){grid-area:c}
.is-style-bento>.is-style-panel-night{grid-area:inc}

/* a night panel (on cream): "Every install includes" */
.wp-block-group.is-style-panel-night{padding:var(--space-element);background:var(--ink);color:var(--fg);border-radius:var(--r-lg)}
.is-style-panel-night>.wp-block-group__inner-container>h3{margin-bottom:var(--s-4)}

@media (max-width:1024px){
  .wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:has(>.is-style-bento){grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .site-main .wp-block-column.is-style-bento{grid-template-areas:"inc inc" "a b" "c c";grid-template-rows:auto 15rem 13rem;gap:var(--s-3)}
  .is-style-bento>.wp-block-image{min-height:0}
}
@media (max-width:420px){.site-main .wp-block-columns.is-style-stats{grid-template-columns:minmax(0,1fr)}}


/* ==== 47-states.css ==== */
/* Areas we serve: two state cards (core/column "State card"), with a decorative NC / VA mark,
   towns as chips, and the phone and link along the foot. Town groups on the state pages.
   Prototype: site.css "Two states", "towns grouped by area". */

.wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:has(>.is-style-state-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);align-items:stretch!important}
.site-main .wp-block-column.is-style-state-card{position:relative;display:flex;flex-direction:column;padding:clamp(1.5rem,3vw,2.5rem);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.is-style-state-card>*{position:relative;margin:0}
/* decorative outline mark, CSS not text, so it never reads as copy (Advanced: is-mark-nc / is-mark-va) */
.is-style-state-card::before{position:absolute;right:-.06em;top:-.2em;font-family:var(--font-display);font-weight:800;font-size:12rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ink-4);pointer-events:none}
.is-style-state-card.is-mark-nc::before{content:"NC"}
.is-style-state-card.is-mark-va::before{content:"VA"}
.site-main .is-style-state-label{margin-bottom:var(--s-2);font-size:var(--t-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--em)}
.is-style-state-card>h3{max-width:16ch;margin-bottom:var(--s-4)}
.is-style-state-card>p:not([class*="is-style-"]){flex:1;max-width:none}
.site-main .is-style-towns{position:relative;display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block:var(--space-element)}
.site-main .is-style-towns>li{padding:.3rem .7rem;border:1px solid var(--ink-4);border-radius:var(--r-pill);font-size:var(--t-small);color:var(--fg-dim);line-height:1.3}
:is(.is-style-band-snow,.has-light-background-color) .is-style-towns>li{border-color:var(--field-line-snow);color:var(--text-dim)}
/* the foot (core/group "State card foot"): phone and link, wrapping when they no longer fit side by side */
.wp-block-group.is-style-state-foot{padding-top:var(--space-element);border-top:1px solid var(--ink-4)}
.is-style-state-foot>.wp-block-group__inner-container{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-4)}
.is-style-state-foot>.wp-block-group__inner-container>*{margin:0}

/* town groups (state pages): a grid of cards */
.wp-block-group.is-style-town-groups>.wp-block-group__inner-container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.wp-block-group.is-style-town-groups>.wp-block-group__inner-container>*{margin:0}
.wp-block-group.is-style-town-group{padding:var(--space-element);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg)}
.is-style-town-group>.wp-block-group__inner-container>h3{margin-bottom:var(--s-2)}
.is-style-town-group>.wp-block-group__inner-container>h3+*{margin-top:0}
.is-style-town-group>.wp-block-group__inner-container>p:not([class*="is-style-"]){font-size:var(--t-small)}
.is-style-town-group .is-style-towns{margin:var(--s-4) 0 0}
.wp-block-group.is-style-town-groups+p{margin-top:var(--space-element)}

@media (max-width:1024px){.wp-block-group.is-style-town-groups>.wp-block-group__inner-container{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .wp-block-group.alignfull>.wp-block-group__inner-container>.wp-block-columns:has(>.is-style-state-card){grid-template-columns:minmax(0,1fr)}
  .is-style-state-card::before{font-size:9rem}
}
@media (max-width:560px){.wp-block-group.is-style-town-groups>.wp-block-group__inner-container{grid-template-columns:minmax(0,1fr)}}


/* ==== 48-reviews.css ==== */
/* Reviews band (core/group "Reviews band"): eyebrow, heading, then the Google reviews widget
   (Site Settings → Reviews shortcode, inserted by inc/reviews.php). The featured quote on
   Commercial and the stars and name lines. Prototype: site.css "Reviews". */

.is-style-reviews>.wp-block-group__inner-container>:is(h2,.wp-block-shortcode,div)+:not(p){margin-top:var(--space-block)}
.site-main .is-style-note-small{margin-top:var(--s-4);font-size:var(--t-small);color:var(--c-mute)}

.wp-block-group.is-style-quote-feature{padding:clamp(1.5rem,3vw,2.5rem);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg)}
.is-style-quote-feature>.wp-block-group__inner-container{display:flex;flex-direction:column;gap:var(--s-4)}
.is-style-quote-feature>.wp-block-group__inner-container>*{margin:0}
.site-main .is-style-stars{font-size:1.05rem;line-height:1;letter-spacing:.12em;color:var(--accent-dark)}
.is-style-band-night .is-style-stars,.is-style-panel-night .is-style-stars{color:var(--glow)}
.is-style-quote-feature .wp-block-quote{margin:0;padding:0;border:0;quotes:none}
.is-style-quote-feature .wp-block-quote p{font-family:var(--font-display);font-weight:800;font-size:var(--t-panel);line-height:1.08;color:var(--c);max-width:none}
.is-style-quote-feature .wp-block-quote cite{display:none}
.site-main .is-style-quote-by{margin-top:auto;font-size:var(--t-small);color:var(--c-mute)}
.site-main .is-style-quote-by strong{color:var(--c);font-weight:600}
/* in a two-column band the featured quote takes the full row under the text (prototype .cmp-quote--feature{grid-column:1/-1}) */
.site-main .wp-block-columns>.wp-block-column:has(>.is-style-quote-feature){grid-column:1/-1}


/* ==== 49-strip.css ==== */
/* Photos: arenex/strip as the sideways gallery strip (night) and as a photo grid ("Grid on
   desktop", cream), and arenex/project-gallery on the Gallery page.
   Prototype: site.css "Gallery strip", "photo grids", responsive.css. */

/* one grid: heading and arrows in the container, the photos full width, the strip's link under them
   (where the prototype has "View full gallery"; the plugin prints the link in the heading row) */
.site-main>.arenex-strip{display:grid;grid-template-columns:minmax(var(--gutter),1fr) minmax(0,var(--container)) minmax(var(--gutter),1fr)}
.site-main>.arenex-strip>.arenex-strip__head{display:contents}
.arenex-strip>.arenex-strip__head>.arenex-strip__intro{grid-column:2;grid-row:1;max-width:44rem}
/* beside the arrows the heading leaves them their room, as the prototype's flex row does */
.arenex-strip:not(.is-style-grid)>.arenex-strip__head>.arenex-strip__intro{max-width:min(44rem,100% - var(--s-7) - 2 * var(--btn-h-lg) - var(--s-2))}
.arenex-strip>.arenex-strip__head>.arenex-strip__nav{grid-column:2;grid-row:1;justify-self:end;align-self:end}
.arenex-strip>.arenex-strip__body{grid-column:1/-1;grid-row:2;margin-top:var(--space-block)}
.arenex-strip.is-style-grid>.arenex-strip__body{grid-column:2;margin-top:calc(var(--s-5) + var(--space-block))}   /* the plain heading (not a row) keeps its 24px, then the block gap */
.arenex-strip.is-style-grid>.arenex-strip__head>.arenex-strip__intro{max-width:52rem}
.arenex-strip>.arenex-strip__head>.arenex-strip__link{grid-column:2;grid-row:3;justify-self:start;margin:var(--space-element) 0 0}
/* the heading row: eyebrow and heading left, arrows right */
.arenex-strip .arenex-strip__head{align-items:flex-end;gap:var(--s-5) var(--s-7);margin-bottom:var(--space-block)}
.arenex-strip .arenex-strip__intro{max-width:44rem}
.arenex-strip .arenex-strip__intro .is-style-eyebrow{margin-block-end:var(--space-tight)}
.arenex-strip .arenex-strip__intro :is(h2,h3)+p{margin-top:var(--s-5)}
.arenex-strip .arenex-strip__status{display:none}
.arenex-strip .arenex-strip__link{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--btn-h-md);font-family:var(--font-body);font-size:var(--t-body);font-weight:600;color:var(--c);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.arenex-strip .arenex-strip__link:hover{color:var(--c);text-decoration-thickness:2px}
.arenex-strip .arenex-strip__link-icon{width:1em;height:1em}
.arenex-strip .arenex-strip__nav{gap:var(--s-2)}
.arenex-strip .arenex-strip__button{width:var(--btn-h-lg);height:var(--btn-h-lg);border:1px solid var(--ink-4);border-radius:50%;background:none;color:var(--fg);transition:background-color var(--dur-fast) var(--ease-out)}
.arenex-strip .arenex-strip__button:hover{background:var(--ink-3);border-color:var(--ink-4)}
.arenex-strip .arenex-strip__button-icon{width:1.25rem;height:1.25rem}

/* the strip: cards bleed to the right edge, the first one lines up with the container */
.arenex-strip:not(.is-style-grid) .arenex-strip__body{max-width:none;padding:0}
.arenex-strip:not(.is-style-grid) .arenex-strip__track{grid-auto-columns:clamp(15rem,26vw,22rem);gap:var(--s-5);padding:0 max(var(--gutter),(100% - var(--container))/2) var(--s-4);scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent}
.arenex-strip .arenex-strip__card{display:grid;gap:var(--s-3);margin:0}
.arenex-strip .arenex-strip__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--ink-4);background:var(--ink)}
.arenex-strip .arenex-strip__caption{display:block;margin:0;font-size:var(--t-small);line-height:var(--lh-body);color:var(--fg-dim);text-wrap:pretty}
.arenex-strip .arenex-strip__title{display:block;font-family:var(--font-body);font-size:inherit;font-weight:600;line-height:inherit;color:var(--fg)}
.arenex-strip .arenex-strip__text{font-size:inherit;line-height:inherit;color:inherit}
.arenex-strip .arenex-strip__more{width:min(var(--container),100% - 2*var(--gutter));margin:var(--space-element) auto 0}

/* the grid (service pages): four across on cream */
.arenex-strip.is-style-grid .arenex-strip__body{max-width:none;width:auto;margin-inline:0;padding:0}
.arenex-strip.is-style-grid .arenex-strip__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;gap:var(--s-5) var(--s-4);padding:0;overflow:visible}
.arenex-strip.is-style-grid .arenex-strip__card{gap:var(--s-2)}
.arenex-strip.is-style-grid .arenex-strip__img{border-color:var(--line)}
.arenex-strip.is-style-grid .arenex-strip__caption{color:var(--c-dim);line-height:1.4}
.arenex-strip.is-style-grid .arenex-strip__title{color:var(--c)}
.arenex-strip.is-style-grid :is(.arenex-strip__head,.arenex-strip__more){width:min(var(--container),100% - 2*var(--gutter));max-width:none;padding:0}

/* the Gallery page: filters and a grid, on cream */
.arenex-project-gallery .arenex-project-gallery__inner{max-width:var(--container-max-width)}
.arenex-project-gallery .arenex-project-gallery__filters{gap:var(--s-2);margin-bottom:var(--space-block)}
.arenex-project-gallery .arenex-project-gallery__filter{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--btn-h-md);padding:0 var(--s-5);border:1.5px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--c);font-family:var(--font-body);font-size:var(--t-body);font-weight:600;cursor:pointer}
.arenex-project-gallery .arenex-project-gallery__filter:hover{background:var(--hair);border-color:var(--line)}
.arenex-project-gallery .arenex-project-gallery__filter.is-active{background:var(--c);border-color:var(--c);color:var(--bg)}
/* Photo counts (Project Gallery 1.3.0): the prototype's .cmp-filters__row, .cmp-filter span and .cmp-filters__count */
.arenex-project-gallery .arenex-project-gallery__filter-row{gap:var(--s-4);margin-bottom:var(--space-block)}
.arenex-project-gallery .arenex-project-gallery__filter-row>.arenex-project-gallery__filters{margin-bottom:0}
.arenex-project-gallery .arenex-project-gallery__n{margin:0;color:var(--c-mute);font-variant-numeric:tabular-nums}
.arenex-project-gallery .arenex-project-gallery__filter.is-active .arenex-project-gallery__n{color:inherit}
.arenex-project-gallery .arenex-project-gallery__count{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0;font-size:var(--t-small);color:var(--c-mute)}
.arenex-project-gallery{--project-gallery-gap:var(--s-5) var(--s-4);--project-gallery-ratio:4 / 3}
.arenex-project-gallery .arenex-project-gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* the arrows wrap under the heading once even its longest word and the arrows no longer fit (prototype flex-wrap) */
@media (max-width:480px){
  .arenex-strip:not(.is-style-grid)>.arenex-strip__head>.arenex-strip__intro{max-width:none}
  .arenex-strip>.arenex-strip__head>.arenex-strip__nav{grid-row:2;justify-self:start;margin-top:var(--s-5)}
  .arenex-strip>.arenex-strip__body{grid-row:3}
  .arenex-strip>.arenex-strip__head>.arenex-strip__link{grid-row:4}
}
@media (max-width:1024px){
  .arenex-strip.is-style-grid .arenex-strip__track,.arenex-project-gallery .arenex-project-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .arenex-strip .arenex-strip__head{flex-direction:row;align-items:flex-end}
  .arenex-strip.is-style-grid .arenex-strip__track,.arenex-project-gallery .arenex-project-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:var(--s-4) var(--s-3);overflow:visible;scroll-snap-type:none}
}

/* the Gallery page's words under each photo (Project Gallery "Words under each photo"): title, then category */
.arenex-project-gallery .arenex-project-gallery__item{display:grid;gap:var(--s-2);overflow:visible;border:0;border-radius:0}
.arenex-project-gallery .arenex-project-gallery__img{border-radius:var(--r-lg);border:1px solid var(--line)}
.arenex-project-gallery .arenex-project-gallery__words{display:block;padding:0;font-size:var(--t-small);line-height:1.4;color:var(--c-dim)}
.arenex-project-gallery .arenex-project-gallery__title{display:block;font-weight:600;color:var(--c)}


/* ==== 51-cta.css ==== */
/* Closing call to action: Cover "Closing band, lights switch on" (the photo is a band across the
   top, the text and the form card overlap its foot) and the plain night band on Gallery.
   The quote form is Fluent Forms, skinned here to the prototype's form card.
   Prototype: site.css "Closing call to action + quote form", responsive.css ≤1024. */

.wp-block-cover.is-style-lights-center{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(20rem,46vw,40rem) auto;align-items:start;justify-content:stretch;min-height:0;margin:0;padding:0 0 var(--space-section);overflow:hidden;background:var(--ink);color:var(--fg)}
.is-style-lights-center>.wp-block-cover__image-background,
.is-style-lights-center>.ec-lights__layer{position:absolute;grid-row:1/2;grid-column:1/2;inset:0;width:100%;height:100%;object-fit:cover}
.is-style-lights-center>.wp-block-cover__background{display:none}
.is-style-lights-center::after{content:"";position:absolute;grid-row:1/2;grid-column:1/2;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,var(--ink) 4%,rgb(10 15 13 / .6) 32%,rgb(10 15 13 / 0) 60%),linear-gradient(180deg,var(--ink) 0%,rgb(10 15 13 / 0) 16%)}
.is-style-lights-center>.wp-block-cover__inner-container{grid-row:2;grid-column:1;position:relative;z-index:var(--z-raised)}
.is-style-lights-center>.wp-block-cover__inner-container>.wp-block-columns{margin-top:calc(-1 * clamp(6rem,11vw,10rem))}
.is-style-lights-center .wp-block-column>.is-style-form-card:first-child{margin-top:calc(-1 * clamp(4rem,10vw,12rem))}
.site-main .wp-block-columns:not(.is-style-contact):has(>.wp-block-column>.is-style-form-card){grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--space-block) clamp(2rem,5vw,5rem)}

.site-main .is-style-book{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--space-element);font-weight:600;color:var(--c)}
.wp-block-group.is-style-phones{margin-top:var(--space-element)}
.is-style-phones>.wp-block-group__inner-container{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:var(--s-3) var(--s-6)}
.is-style-phones>.wp-block-group__inner-container>*{margin:0}

/* the form card */
.wp-block-group.is-style-form-card{background:var(--snow-2);color:var(--text);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem);box-shadow:0 4px 12px rgb(0 0 0 / .25),0 18px 40px rgb(0 0 0 / .35)}
:is(.is-style-band-snow,.has-light-background-color) .wp-block-group.is-style-form-card{box-shadow:none;border:1px solid var(--snow-3)}
.is-style-form-card>.wp-block-group__inner-container>h3,.is-style-form-card>.wp-block-group__inner-container>h2{margin-bottom:var(--s-2);font-size:var(--t-card);line-height:var(--lh-panel);color:var(--text)}
.is-style-form-card>.wp-block-group__inner-container>:is(h2,h3)+p{margin-top:0}
.is-style-form-card>.wp-block-group__inner-container>p:not([class*="is-style-"]){max-width:none;color:var(--text-dim);font-size:var(--t-small)}
.is-style-form-card>.wp-block-group__inner-container>.fluentform{margin-top:var(--s-5)}
.is-style-form-card>.wp-block-group__inner-container>.fluentform+*,.is-style-form-card>.wp-block-group__inner-container>.is-style-fine{margin-top:var(--s-3)}
.site-main .is-style-fine{font-size:var(--t-caption);color:var(--text-mute)}

/* Fluent Forms, as the prototype's fields */
.is-style-form-card .fluentform{font-family:var(--font-body);font-size:var(--t-body);color:var(--text)}
.is-style-form-card .fluentform .ff-el-group{margin-bottom:var(--s-4)}
.is-style-form-card .fluentform .ff-el-input--label{display:flex;margin:0 0 var(--s-1);padding:0}
.is-style-form-card .fluentform .ff-el-input--label label{margin:0;font-size:var(--t-small);font-weight:600;line-height:1.6;color:var(--text)}
/* a choice's question reads as the prototype's legend: body size, then 12px to the tiles */
.is-style-form-card .fluentform .ff-el-group:has(.ff-el-form-check)>.ff-el-input--label{margin-bottom:var(--s-3)}
.is-style-form-card .fluentform .ff-el-group:has(.ff-el-form-check)>.ff-el-input--label label{font-size:var(--t-body)}
.is-style-form-card .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{content:none}
.is-style-form-card .fluentform .ff-el-form-control{width:100%;min-height:var(--btn-h-lg);padding:0 var(--s-4);border:1.5px solid var(--field-line-snow);border-radius:var(--r);background:#FFFDF7;color:var(--text);font:inherit;font-size:1rem;line-height:1.4;box-shadow:none;transition:border-color var(--dur-fast) var(--ease-out)}
.is-style-form-card .fluentform textarea.ff-el-form-control{min-height:6rem;padding-block:var(--s-3);resize:vertical}
.is-style-form-card .fluentform .ff-el-form-control:hover{border-color:var(--text)}
.is-style-form-card .fluentform .ff-el-form-control:focus{border-color:var(--text);outline:var(--focus-ring) solid var(--accent-dark);outline-offset:1px;box-shadow:none}
.is-style-form-card .fluentform .ff-el-help-message{margin-top:var(--s-1);font-size:var(--t-caption);font-style:normal;color:var(--text-mute)}
.is-style-form-card .fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--accent-dark)}
.is-style-form-card .fluentform .error,.is-style-form-card .fluentform .text-danger{font-size:var(--t-small);font-weight:600;color:var(--accent-dark)}
.is-style-form-card .fluentform .ff-t-container{gap:var(--s-3)}
.is-style-form-card .fluentform .ff-t-cell{padding:0}
.is-style-form-card .fluentform .ff-t-container .ff-el-group{margin-bottom:var(--s-4)}
/* choices as tiles: state (2 across), areas (3 across), home or business */
.is-style-form-card .fluentform .ff-el-input--content:has(>.ff-el-form-check){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.is-style-form-card .fluentform .ff-el-input--content:has(>.ff-el-form-check:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.is-style-form-card .fluentform .ff-el-form-check{position:relative;margin:0!important}
.is-style-form-card .fluentform .ff-el-form-check .ff-el-form-check-label{display:flex;flex-direction:column;margin:0;padding:0;cursor:pointer}   /* flex: the space between input and words makes no line */
.is-style-form-card .fluentform .ff-el-form-check-label .ff-el-form-check-input{position:absolute;top:0;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.is-style-form-card .fluentform .ff-el-form-check-label>span{display:flex;align-items:center;justify-content:center;min-height:var(--btn-h-md);padding:var(--s-2) var(--s-3);border:1.5px solid var(--field-line-snow);border-radius:var(--r);background:var(--snow-2);font-size:var(--t-small);font-weight:600;line-height:1.2;text-align:center;color:var(--text);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.is-style-form-card .fluentform .ff-el-form-check-input:hover+span{border-color:var(--text)}
.is-style-form-card .fluentform .ff-el-form-check-input:checked+span{background:var(--text);border-color:var(--text);color:var(--snow-2)}
.is-style-form-card .fluentform .ff-el-form-check-input:focus-visible+span{outline:var(--focus-ring) solid var(--accent-dark);outline-offset:2px}
/* the button */
.is-style-form-card .fluentform .ff-el-group.ff_submit_btn_wrapper{margin:0;padding-top:var(--s-2)}   /* padding: the field's 16px below must not swallow these 8 */
.is-style-form-card .fluentform .ff-btn-submit{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:var(--btn-h-lg);padding:0 var(--btn-pad-x);border:2px solid transparent;border-radius:var(--r);background:var(--accent)!important;color:var(--on-accent)!important;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1;letter-spacing:var(--ls-btn);text-transform:uppercase;box-shadow:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}
.is-style-form-card .fluentform .ff-btn-submit:hover{background:var(--accent-dark)!important;opacity:1}
.is-style-form-card .ff-message-success{margin-top:var(--s-4);padding:var(--s-4);border:0;border-radius:var(--r);background:var(--snow);color:var(--text);font-weight:600;box-shadow:none}

@media (max-width:1024px){
  .site-main .wp-block-columns:not(.is-style-contact):has(>.wp-block-column>.is-style-form-card){grid-template-columns:minmax(0,1fr)}
  .is-style-lights-center .wp-block-column>.is-style-form-card:first-child{margin-top:0}
}
@media (max-width:768px){.is-style-phones>.wp-block-group__inner-container{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .is-style-phones>.wp-block-group__inner-container{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .is-style-form-card .fluentform .ff-t-container{flex-direction:column;gap:0}
}


/* ==== 52-page-header.css ==== */
/* Inner-page headers: "Page header with photo" (text left, framed photo right, never the home
   hero again, 04-layout §3b) and "Page header, text only" (Contact, Privacy, Thank you).
   Prototype: site.css ".cmp-phero", ".cmp-pagehead", responsive.css ≤900. */

.site-main>.wp-block-group.alignfull:is(.is-style-page-header,.is-style-page-head){padding-block:var(--space-section-sm) var(--space-block);border-bottom:1px solid var(--ink-3)}
.is-style-page-header>.wp-block-group__inner-container>.wp-block-columns{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-block) clamp(2rem,5vw,4.5rem);align-items:center!important}
:is(.is-style-page-header,.is-style-page-head) h1+.is-style-lead{margin-top:var(--s-4);max-width:36rem}
.is-style-page-head h1{max-width:44rem}   /* keeps to the text column, so it breaks into two balanced lines */
.is-style-page-head h1+.is-style-lead{max-width:44rem}
.is-style-page-header .wp-block-buttons{margin-top:var(--space-element)}
.is-style-page-header .wp-block-image{position:relative;aspect-ratio:4/3;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ink-4);background:var(--ink)}
.is-style-page-header .wp-block-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}

@media (max-width:900px){
  .is-style-page-header>.wp-block-group__inner-container>.wp-block-columns{grid-template-columns:minmax(0,1fr)}
  .is-style-page-header .wp-block-image{aspect-ratio:16/10}
  .site-main>.wp-block-group.alignfull.is-style-page-header{padding-bottom:calc(var(--space-block) + 1.5rem)}   /* stacked, the photo ends the header: more room under it */
}

/* breadcrumbs (inc/breadcrumbs.php): Home / this page, above the heading */
.ec-crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-4);padding:0;list-style:none;font-size:var(--t-small);color:var(--fg-mute)}
.ec-crumbs li+li::before{content:"/";margin-right:var(--s-2)}
.ec-crumbs a{display:inline-flex;align-items:center;min-height:var(--btn-h-md);color:var(--fg-dim);text-decoration:underline;text-underline-offset:.2em}
.ec-crumbs a:hover{color:var(--fg)}
.ec-crumbs li[aria-current]{display:inline-flex;align-items:center;min-height:var(--btn-h-md)}
.site-main .ec-crumbs+h1{margin-top:0}


/* ==== 53-inner.css ==== */
/* Inner-page sections: what we light (a Gallery with captions), who we light (icon grid),
   their six values, and the About story. Prototype: site.css "custom lighting solutions for",
   "Icon grid", "their six values". */

/* what we light: core/gallery, one photo per thing they light, the caption under it */
.site-main .wp-block-gallery.has-nested-images{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-4);margin-block:var(--space-element)!important}
.site-main .wp-block-gallery.has-nested-images figure.wp-block-image{display:grid;gap:var(--s-3);width:auto!important;margin:0;flex-direction:column}
.site-main .wp-block-gallery.has-nested-images figure.wp-block-image::before{display:none}
.site-main .wp-block-gallery.has-nested-images figure.wp-block-image img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line)}
.site-main .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{position:static;max-height:none;margin:0;padding:0;overflow:visible;background:none;font-family:var(--font-display);font-weight:800;font-size:var(--t-card);line-height:1.05;text-align:left;text-shadow:none;color:var(--c);-webkit-backdrop-filter:none;backdrop-filter:none}
.site-main .wp-block-gallery+p{margin-top:0}

/* who we light: core/list "Icon grid"; each item's icon is a class under Advanced (is-icon-…) */
.site-main .is-style-icon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--c)}
.site-main .is-style-icon-grid>li{display:flex;align-items:center;gap:var(--s-3);min-height:4.25rem;padding:var(--s-3) var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:800;font-size:var(--t-card);line-height:1.05;color:var(--c)}
.site-main .is-style-icon-grid>li:nth-child(odd){border-right:1px solid var(--line)}
.site-main .is-style-icon-grid>li:nth-child(even){padding-left:var(--s-5)}
.site-main .is-style-icon-grid>li::before{content:"";flex:none;width:1.5rem;height:1.5rem;background:var(--glow);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
:is(.is-style-band-snow,.has-light-background-color) .is-style-icon-grid>li::before{background:var(--accent)}
.site-main .is-style-icon-grid+p{margin-top:var(--s-4)}
.is-icon-users{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
.is-icon-landmark{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18v-7'/%3E%3Cpath d='M10 18v-7'/%3E%3Cpath d='M14 18v-7'/%3E%3Cpath d='M18 18v-7'/%3E%3Cpath d='M12 2 20 7H4z'/%3E%3C/svg%3E")}
.is-icon-bed{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8'/%3E%3Cpath d='M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4'/%3E%3Cpath d='M12 4v6'/%3E%3Cpath d='M2 18h20'/%3E%3C/svg%3E")}
.is-icon-bag{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")}
.is-icon-building{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E")}
.is-icon-utensils{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3zm0 0v7'/%3E%3C/svg%3E")}
.is-icon-store{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2 2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E")}
.is-icon-cart{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E")}

/* their six values: core/list "Value cards", each a bold name and a line */
.site-main .is-style-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.site-main .is-style-values>li{display:grid;gap:var(--s-2);align-content:start;padding:var(--space-element);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--c-dim)}
.site-main .is-style-values>li strong{display:flex;align-items:center;gap:var(--s-3);font-family:var(--font-display);font-weight:800;font-size:var(--t-card);line-height:1.05;color:var(--c)}
.site-main .is-style-values>li strong::before{content:"";flex:none;width:.75rem;height:1.1rem;background:var(--glow);-webkit-mask:var(--bulb-mask) center/contain no-repeat;mask:var(--bulb-mask) center/contain no-repeat;filter:drop-shadow(0 0 5px rgb(var(--glow-rgb) / .8))}

@media (max-width:1024px){
  .site-main .wp-block-gallery.has-nested-images{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-main .is-style-values{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .site-main .wp-block-gallery.has-nested-images{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-main .wp-block-gallery.has-nested-images figure.wp-block-image:last-child:nth-child(odd){grid-column:1/-1}
  .site-main .wp-block-gallery.has-nested-images figure.wp-block-image:last-child:nth-child(odd) img{aspect-ratio:16/9}
  .site-main .is-style-values{grid-template-columns:minmax(0,1fr)}
  .site-main .is-style-icon-grid>li{min-height:3.5rem;gap:var(--s-2);font-size:1.125rem;padding-right:var(--s-2)}
  .site-main .is-style-icon-grid>li:nth-child(even){padding-left:var(--s-3)}
  .site-main .is-style-icon-grid>li::before{width:1.25rem;height:1.25rem}
}


/* ==== 55-contact.css ==== */
/* Contact (cards beside the form), the privacy policy's long text, the thank-you page.
   Prototype: site.css "contact page", "privacy policy", "thank-you page". */

.site-main .wp-block-columns.is-style-contact{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-block) clamp(2rem,5vw,5rem)}
.is-style-contact>.wp-block-column:first-child{display:grid;gap:var(--s-4);align-content:start}
.is-style-contact>.wp-block-column:first-child>*{margin:0}
.wp-block-group.is-style-contact-card{padding:var(--space-element);background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg)}
.is-style-contact-card>.wp-block-group__inner-container{display:grid;gap:var(--s-3)}
.is-style-contact-card>.wp-block-group__inner-container>*{margin:0}
.site-main .is-style-card-label{font-family:var(--font-body);font-size:var(--t-label);font-weight:600;line-height:var(--lh-body);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-mute)}
.site-main .is-style-card-note{font-size:var(--t-small);color:var(--c-dim)}
.is-style-contact-card a{overflow-wrap:anywhere}
.is-style-contact-card p:not(.is-style-phone) a{font-weight:600;color:var(--c);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.is-style-contact-card p:not(.is-style-phone) a:hover{text-decoration-thickness:2px}

/* privacy policy */
.wp-block-group.is-style-prose{max-width:var(--container);margin-inline:auto}   /* the page head's width, so the text starts on its left edge; the prototype centred it, which read as off (the user, 5 Nov 2026) */
.is-style-prose>.wp-block-group__inner-container>*{max-width:var(--container-prose)}   /* the reading width, from that edge */
.is-style-prose>.wp-block-group__inner-container>h2{margin:var(--s-7) 0 var(--s-3);font-size:var(--t-card);line-height:1.1}
.is-style-prose>.wp-block-group__inner-container>h2:first-child{margin-top:0}
.is-style-prose>.wp-block-group__inner-container>h2+*{margin-top:0}
.is-style-prose>.wp-block-group__inner-container>:is(p,ul)+:is(p,ul){margin-top:var(--s-3)}
.is-style-prose p,.is-style-prose li{color:var(--c-dim)}
.is-style-prose .wp-block-list{display:grid;gap:var(--s-2);padding-left:1.25rem;list-style:disc}

/* thank you: the details form card and the link under it keep to one centred column (prototype .cmp-thanks) */
.wp-block-group.alignfull>.wp-block-group__inner-container:has(>.is-style-form-card:first-child){max-width:44rem}
.wp-block-group.alignfull>.wp-block-group__inner-container>.is-style-form-card+*{margin-top:var(--space-element)}

@media (max-width:900px){
  .site-main .wp-block-columns.is-style-contact{grid-template-columns:minmax(0,1fr)}
  .is-style-contact>.wp-block-column:first-child{order:2}
}


/* ==== 60-lights.css ==== */
/* The lights effect: one script (assets/js/parts/20-lights.js), two behaviours.
   Home hero, "plug-in": the photo waits dark, then the script draws the house on a canvas and
   lights the bulbs one by one along the rooflines; scrolling down switches them off.
   Arrive (the closing band, the page header's photo, a split with "has-lights"): the photo
   waits dark until it is properly in view, then the lights come on in 1.5 s and stay on.
   The script splits the photo itself, so the client swaps it in the editor and it still works.
   Without the script every photo simply shows lit. Prototype: site.css "The lights effect",
   hero-options.css "D". */

/* hero */
.js .is-style-lights-hero>.wp-block-cover__image-background{filter:brightness(.42) saturate(.72)}   /* waits dark, never flashes lit */
.is-style-lights-hero.is-plugged>.wp-block-cover__image-background{visibility:hidden}
.js .is-style-lights-hero.is-plugged-failed>.wp-block-cover__image-background{filter:none}           /* the effect cannot run: show the house lit */
.is-style-lights-hero>.ec-lights__canvas{display:block;pointer-events:none}

/* arrive: dark until split, then the three layers take over */
.js .is-style-lights-center:not(.is-split,.is-split-failed)>.wp-block-cover__image-background,
.js .is-style-page-header .wp-block-image:not(.is-split,.is-split-failed)>img,
.js .arenex-split.has-lights .arenex-split__figure:not(.is-split,.is-split-failed)>img{filter:brightness(.4) saturate(.7)}
.ec-lights{--on:1;isolation:isolate}
.ec-lights.is-split>.ec-lights__img{visibility:hidden}
.ec-lights>.ec-lights__layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,50% 50%);border-radius:0;pointer-events:none;opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.ec-lights.is-split>.ec-lights__layer{opacity:1}
.ec-lights>.ec-lights__base{filter:brightness(calc(.4 + .6 * var(--on))) saturate(calc(.7 + .3 * var(--on)))}
.ec-lights.is-split>:is(.ec-lights__bulbs,.ec-lights__bloom){mix-blend-mode:screen;-webkit-mask-image:linear-gradient(var(--chase,90deg),#000 0,#000 calc(var(--on) * 125% - 18%),transparent calc(var(--on) * 125%));mask-image:linear-gradient(var(--chase,90deg),#000 0,#000 calc(var(--on) * 125% - 18%),transparent calc(var(--on) * 125%))}
.ec-lights.is-split>.ec-lights__bulbs{opacity:calc(.2 + .8 * var(--on))}
.ec-lights.is-split>.ec-lights__bloom{filter:blur(10px) brightness(1.25);opacity:calc(var(--on) * .7);animation:ec-twinkle 3.2s ease-in-out infinite}
@keyframes ec-twinkle{50%{filter:blur(12px) brightness(1.45)}}


/* ==== 90-motion.css ==== */
/* Reveal on scroll. Content shows without the script; the .js class on <html> gates the motion,
   and a script error shows everything. Left out of the editor (bin/build.php). Reduced motion
   turns every animation off and leaves the lights on. Prototype: site.css "Reveal on scroll",
   responsive.css "prefers-reduced-motion". */

.js .ec-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.js .ec-reveal.is-shown{opacity:1;transform:none}
.has-js-error .ec-reveal{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ec-lights{--on:1!important}
  .js .ec-reveal{opacity:1;transform:none}
}