/*
Theme Name: Epoxy Pros of New England
Theme URI: https://epoxyprosofnewengland.com/
Template: astra
Description: Hand-coded Astra child theme for Epoxy Pros of New England. Commercial-and-industrial-first concrete coating contractor in Berwick, ME. No page builder: PHP templates driven by the data functions in inc/, with project and reference records as native custom post types. Design ported verbatim from the approved homepage and commercial sector mockups.
Version: 1.0.0
Author: Epoxy Pros of New England
Text Domain: epne
*/

/* ==========================================================================
   FONTS

   Archivo (headings, labels, buttons), Public Sans (body) and IBM Plex Mono
   (measured values only) are the three faces the approved mockups are drawn
   in. All self-hosted, subset to latin, so first paint does not depend on
   fonts.googleapis.com and no visitor IP reaches Google.

   The mockups link Google Fonts directly. That is correct for a file you open
   off the desktop and wrong for production — see the brief's performance
   budget. Nothing here enqueues a Google stylesheet, and functions.php strips
   the preconnect Astra prints.

   Subset from the upstream OFL sources (licences alongside the files in
   assets/fonts/). Total for all four: ~132KB, of which only Archivo and
   Public Sans are preloaded — see epne_preload_fonts().

   THE UNICODE RANGE IS EVIDENCE-BASED, not guessed. It is Google's standard
   latin subset plus two additions the copy provably needs:

     U+2126  the ohm sign, in the ESD specification table
     U+2190–2193  the arrows on .arrow links and the archive pager

   A character outside this range falls back to a system font MID-SENTENCE,
   which on a spec figure looks like a defect. If you add copy using a
   character not listed here, extend the range AND re-subset — declaring a
   range the file does not contain is just as broken.

   font-display: swap on all four: the fallback stack is metric-similar enough
   that a swap is cheaper than a blocking load, and this site's LCP is the hero
   heading on every template that has one.
   ========================================================================== */

/*
 * Archivo carries both axes the design uses: weight 400–800, and width, which
 * is pinned to 100 by the token block below. The width axis is kept rather
 * than instanced away because the logo's condensed caps are the reference for
 * every uppercase label on this site, and narrowing them is a live option.
 */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-variable-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2126,
    U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  src: url('assets/fonts/public-sans-variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2126,
    U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * IBM Plex Mono ships NO variable version — upstream is static instances only.
 * So it is two files at their true weights rather than one file declared
 * `font-weight: 400 500`, which would have let the browser synthesise a fake
 * 500 from the 400 file. Synthesised weight on a monospaced figure is exactly
 * where it looks worst.
 *
 * In practice only 400 is used: nothing in this stylesheet sets a weight on a
 * .mono element. The 500 is here so that a <strong> inside a measured value
 * renders as real Medium rather than a smeared 400, and it is downloaded only
 * if something actually asks for it.
 */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/ibm-plex-mono-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2126,
    U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/ibm-plex-mono-medium-latin.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2126,
    U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TOKENS

   Copied verbatim from the brief. Sampled from the client logo.

   Two rules these tokens exist to enforce, restated here because they are the
   ones most easily lost in a later edit:

   - Navy is structure, red is ACTION ONLY. Red appears on buttons, on the
     short rule above a section heading, on the arrow of a link, and on the map
     pin. There is no red section background and no red body text anywhere in
     this file.
   - The page is LIGHT by default. White and --bg-2 alternate; --navy-dp is
     used for two or three anchor bands per page and the footer. This is the
     opposite of a dark contractor site and it is deliberate: it reads as a
     firm rather than a shop, which is the whole repositioning in one decision.

   Single visual theme. There is no dark-mode variant and none should be added
   — the navy bands ARE the dark treatment, and a prefers-color-scheme block
   would invert them into an unreadable mess.
   ========================================================================== */

:root{
  /* brand, sampled from the client logo */
  --navy:#123680; --navy-md:#0E2A63; --navy-dp:#0B2044; --navy-ink:#07152F;
  --red:#C0202A;  --red-dp:#9A1A1A;  --red-hi:#D8323B;

  --ink:#101A2C; --mute:#56677F;
  --line:#E1E7EF; --line-2:#CFD8E6;
  --bg:#FFFFFF;  --bg-2:#F5F7FA; --bg-3:#EAEFF6;

  --on-dark:#E7EDF6; --on-dark-mute:#A2B5D0; --line-dark:#1D3866; --steel:#8FA7C6;

  --maxw:1220px; --gut:clamp(18px,4vw,44px); --r:4px;
  --fd:"Archivo","Helvetica Neue",Arial,sans-serif;      /* headings, labels, buttons */
  --fb:"Public Sans","Helvetica Neue",Arial,sans-serif;  /* body */
  --fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;     /* spec figures only */
}

/* ==========================================================================
   BASE ELEMENTS

   Every rule from here down is scoped under .epne, the class functions.php
   adds to <body> only on templates this theme owns. Astra's own views, the
   admin bar and any plugin output are untouched.

   This block covers every bare element Astra's stylesheet was setting, because
   functions.php dequeues astra-theme-css outright. If a heading ever starts
   rendering at the wrong weight, the fix belongs here rather than in a
   re-enqueue — see the note in epne_trim_front_end().
   ========================================================================== */

.epne *{box-sizing:border-box}

body.epne{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.epne img{max-width:100%;display:block;height:auto}
.epne a{color:inherit}
.epne p{margin:0}

.epne h1,.epne h2,.epne h3,.epne h4{
  font-family:var(--fd);margin:0;line-height:1.1;letter-spacing:-.014em;
  font-variation-settings:"wdth" 100;text-wrap:balance;color:inherit;
}

/*
 * Sentence case is a copy rule, not a CSS one — there is deliberately no
 * text-transform here. Uppercase is reserved for .label, .btn and table
 * headers, which is where the logo's condensed caps are echoed. A
 * text-transform on a heading would undo that in one line.
 */
.epne h1{font-size:clamp(2.15rem,4.4vw,3.35rem);font-weight:700;line-height:1.06}
.epne h2{font-size:clamp(1.65rem,2.9vw,2.35rem);font-weight:700}
.epne h3{font-size:clamp(1.05rem,1.5vw,1.22rem);font-weight:700;letter-spacing:-.008em}
.epne h4{font-size:1rem;font-weight:700}

.epne :focus-visible{outline:2px solid var(--red);outline-offset:3px}
.epne button{font:inherit;color:inherit}
.epne table{border-collapse:collapse}

/* Accessibility furniture Astra used to provide. */
.epne .screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.epne .skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--navy);
  font-family:var(--fd);font-weight:700;padding:14px 20px;
}
.epne .skip-link:focus{left:8px;top:8px;width:auto;height:auto;clip:auto;clip-path:none}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.epne .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.epne .sec{padding-block:clamp(58px,7.5vw,100px)}
.epne .sec-tight{padding-block:clamp(44px,5vw,68px)}
.epne .alt{background:var(--bg-2)}
.epne .dark{background:var(--navy-dp);color:var(--on-dark)}
.epne .dark h2,.epne .dark h3{color:#fff}

/* ==========================================================================
   TYPE HELPERS
   ========================================================================== */

.epne .label{
  font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--navy);display:block;margin-bottom:16px;
}
.epne .dark .label,.epne .hero .label{color:var(--steel)}
.epne .lede{font-size:clamp(1.02rem,1.35vw,1.13rem);color:var(--mute);max-width:64ch}
.epne .dark .lede{color:var(--on-dark-mute)}
.epne .lede + .lede{margin-top:16px}

/*
 * Mono is for MEASURED VALUES ONLY — mils, temperatures, cure hours, CSP
 * profile, square footage. Never for labels, eyebrows or headings. The whole
 * point is that when a facility manager sees this face they know they are
 * looking at a number somebody is accountable for.
 */
.epne .mono{font-family:var(--fm);font-variant-numeric:tabular-nums}

/*
 * .tbc marks a figure nobody has confirmed yet: dotted underline plus a title
 * attribute naming what needs checking.
 *
 * In the mockups this was a design annotation. Here it is rendered by
 * epne_tbc() and driven off inc/data-business.php, so the set of unconfirmed
 * claims on the site is a list in one file rather than a search through the
 * templates. EVERY ONE MUST BE RESOLVED OR REMOVED BEFORE LAUNCH — the
 * dashboard notice in inc/seo.php counts them so they cannot be forgotten.
 */
.epne .tbc{border-bottom:1px dotted currentColor;cursor:help}

.epne .rule{height:3px;width:52px;background:var(--red);margin-bottom:22px;border-radius:2px}

.epne .prose > * + *{margin-top:18px}
.epne .prose ul,.epne .prose ol{padding-left:22px}
.epne .prose a{color:var(--navy)}

/* ==========================================================================
   BUTTONS AND LINKS
   ========================================================================== */

.epne .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fd);font-weight:700;font-size:.87rem;letter-spacing:.07em;
  text-transform:uppercase;padding:15px 26px;border-radius:var(--r);
  border:1.5px solid transparent;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.epne .btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.epne .btn-primary:hover{background:var(--red-hi);border-color:var(--red-hi)}
.epne .btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.epne .btn-navy:hover{background:var(--navy-md)}
.epne .btn-line{background:transparent;color:var(--navy);border-color:var(--line-2)}
.epne .btn-line:hover{border-color:var(--navy)}
.epne .dark .btn-line,.epne .hero .btn-line{color:#fff;border-color:rgba(255,255,255,.42)}
.epne .dark .btn-line:hover,.epne .hero .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.epne .btn-sm{padding:11px 18px;font-size:.78rem}

.epne .arrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:700;
  font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--red);
  text-decoration:none;
}
.epne .arrow:hover{color:var(--red-dp)}
.epne .dark .arrow{color:var(--red-hi)}

/* ==========================================================================
   UTILITY BAR
   ========================================================================== */

.epne .util{background:var(--navy-ink);color:var(--on-dark-mute);font-size:.79rem}
.epne .util .wrap{
  display:flex;gap:20px;align-items:center;justify-content:space-between;
  padding-block:9px;flex-wrap:wrap;
}
.epne .util a{text-decoration:none}
.epne .util a:hover{color:#fff}
.epne .util .r{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.epne .util b{color:#fff;font-weight:600}

/* ==========================================================================
   HEADER
   ========================================================================== */

.epne .hdr{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px);
}
.epne .hdr .wrap{display:flex;align-items:center;gap:18px;padding-block:13px}
.epne .brand{flex:0 0 auto;text-decoration:none;display:block}
.epne .brand img{width:152px;height:auto}
.epne .brand .txt{font-family:var(--fd);font-weight:800;font-size:1.05rem;color:var(--navy);line-height:1.15}

.epne .nav{display:flex;gap:24px;margin-left:auto}
.epne .nav a{
  font-family:var(--fd);font-size:.86rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;padding-block:8px;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.epne .nav a:hover{color:var(--navy);border-bottom-color:var(--red)}
.epne .nav a.on{color:var(--navy);border-bottom-color:var(--navy)}

/* wp_nav_menu renders <ul><li><a>; the mockup's bare <a> row is reproduced here. */
.epne .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px}
.epne .nav li{position:relative}
.epne .nav .current-menu-item > a,
.epne .nav .current_page_item > a,
.epne .nav .current-menu-ancestor > a{color:var(--navy);border-bottom-color:var(--navy)}

.epne .hdr-cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.epne .tel{
  font-family:var(--fd);font-weight:700;font-size:1.02rem;color:var(--navy);
  text-decoration:none;white-space:nowrap;
}
.epne .tel:hover{color:var(--red)}
.epne .burger{
  display:none;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  padding:10px 12px;cursor:pointer;margin-left:auto;
}
.epne .burger span{display:block;width:18px;height:2px;background:var(--navy);margin:3.5px 0}

/* ==========================================================================
   BREADCRUMB

   Lives in the hero, in the eyebrow's slot, and is set in the eyebrow's type:
   Archivo, small, tracked uppercase, steel on navy. Uppercase here is within
   the brief's rule — this line is doing a label's job, not a heading's.

   Links are steel and brighten on hover; the current page is --on-dark, so the
   one crumb that is not a link reads as the page you are on. Separators sit
   back in --line-dark rather than competing with the words.
   ========================================================================== */

.epne .hero .crumbs{
  font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;line-height:1.8;color:var(--on-dark);margin-bottom:16px;
}
.epne .hero .crumbs a{color:var(--steel);text-decoration:none}
.epne .hero .crumbs a:hover{color:#fff}
.epne .hero .crumbs i{font-style:normal;color:var(--line-dark);margin-inline:10px}

/* ==========================================================================
   HERO
   ========================================================================== */

.epne .hero{position:relative;background:var(--navy-ink);color:#fff;overflow:hidden}
.epne .hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.epne .hero .veil{
  position:absolute;inset:0;background:linear-gradient(90deg,
    rgba(7,21,47,.95) 0%,rgba(7,21,47,.88) 42%,rgba(7,21,47,.42) 72%,rgba(7,21,47,.58) 100%);
}
.epne .hero .wrap{position:relative;padding-block:clamp(64px,8.5vw,112px)}
.epne .hero-in{max-width:660px}
.epne .hero h1{margin-bottom:22px;color:#fff}
.epne .hero .lede{color:#CBD8EA;margin-bottom:32px}
.epne .hero-cta{display:flex;gap:13px;flex-wrap:wrap}

.epne .credbar{border-top:1px solid rgba(255,255,255,.15);background:rgba(5,16,38,.72);position:relative}

/*
 * The credbar sits directly beneath the hero and inherits nothing from it,
 * because on interior templates the hero is a separate <section>. Its own
 * background is opaque enough to work over either.
 */
.epne .credbar{background:var(--navy-ink)}
.epne .credbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-block:20px}
.epne .credbar div{display:flex;flex-direction:column;gap:3px}
.epne .credbar b{font-family:var(--fd);font-size:.93rem;font-weight:700;color:#fff}
.epne .credbar span{font-size:.79rem;color:#9FB4D2}

/* ==========================================================================
   SECTION HEAD
   ========================================================================== */

.epne .shead{max-width:700px;margin-bottom:44px}
.epne .shead.wide{
  max-width:none;display:flex;justify-content:space-between;align-items:flex-end;
  gap:32px;flex-wrap:wrap;
}
.epne .shead.wide > div{max-width:700px}
.epne .shead p{margin-top:16px}

/* ==========================================================================
   SECTORS
   ========================================================================== */

.epne .sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.epne .sector{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:box-shadow .18s,border-color .18s;
}
.epne .sector:hover{border-color:var(--line-2);box-shadow:0 10px 30px rgba(16,26,44,.09)}
.epne .sector .ph{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-3)}
.epne .sector img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.epne .sector:hover img{transform:scale(1.035)}
.epne .sector .tag{
  position:absolute;left:12px;top:12px;background:rgba(7,21,47,.85);color:#fff;
  font-family:var(--fd);font-size:.63rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px;
}
.epne .sector .b{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.epne .sector p{font-size:.92rem;color:var(--mute)}
.epne .sector .sys{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--fm);font-size:.75rem;color:var(--navy);
}

/*
 * A card left alone on the last row becomes a full-width horizontal card.
 *
 * These grids render variable counts by design. The homepage sector grid has
 * six cards when every capability is confirmed and four while urethane cement
 * is not; the systems hub groups seven coatings, four concrete services and
 * one prep service. Every count of 3n+1 stranded a single card under a full
 * row, which read as a missing tile rather than a choice.
 *
 * Pure CSS off :nth-child, so it follows whatever the data layer returns with
 * no template counting cards. The photo spans the width of the two columns
 * above it — calc() matches two columns plus one 22px gap — so the text sits
 * directly under the third column and the grid's vertical lines still hold.
 * Tablet does the same at two columns; phones are one column and never orphan.
 *
 * The image is taken out of flow inside its frame. Left in flow, its intrinsic
 * 720x480 ratio at two-column width sets the card to ~500px tall; out of flow,
 * the frame's min-height and the text column decide the height instead.
 */
@media (min-width:1081px){
  .epne .sectors > .sector:last-child:nth-child(3n+1){grid-column:1 / -1;flex-direction:row}
  .epne .sectors > .sector:last-child:nth-child(3n+1) .ph{
    flex:0 0 calc(66.666% - 7.33px);aspect-ratio:auto;min-height:300px;
  }
  .epne .sectors > .sector:last-child:nth-child(3n+1) .ph img{position:absolute;inset:0}
}
@media (min-width:641px) and (max-width:1080px){
  .epne .sectors > .sector:last-child:nth-child(2n+1){grid-column:1 / -1;flex-direction:row}
  .epne .sectors > .sector:last-child:nth-child(2n+1) .ph{flex:0 0 50%;aspect-ratio:auto;min-height:240px}
  .epne .sectors > .sector:last-child:nth-child(2n+1) .ph img{position:absolute;inset:0}
}

/* ==========================================================================
   PILLARS
   ========================================================================== */

.epne .pillars{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.epne .plist{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.epne .plist li{
  display:grid;grid-template-columns:38px 1fr;gap:20px;padding:22px 0;
  border-top:1px solid var(--line);
}
.epne .plist li:last-child{border-bottom:1px solid var(--line)}
.epne .plist .n{
  font-family:var(--fd);font-size:.86rem;font-weight:700;color:var(--red);
  letter-spacing:.04em;padding-top:2px;
}
.epne .plist h3{margin-bottom:7px}
.epne .plist p{font-size:.93rem;color:var(--mute)}

.epne .pshot{border-radius:var(--r);overflow:hidden;position:relative;background:var(--bg-3);margin:0}
.epne .pshot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.epne .pshot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 24px;color:#fff;
  background:linear-gradient(180deg,rgba(7,21,47,0),rgba(7,21,47,.9));font-size:.86rem;
}
.epne .pshot figcaption b{display:block;font-family:var(--fd);font-size:1rem;margin-bottom:4px}

/* ==========================================================================
   SYSTEMS TABLE
   ========================================================================== */

.epne .systems{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.epne .srow{
  display:grid;grid-template-columns:.9fr 1.5fr .8fr;gap:26px;padding:22px 26px;
  border-bottom:1px solid var(--line);align-items:baseline;text-decoration:none;color:inherit;
}
.epne .srow:last-child{border-bottom:0}
.epne .srow:nth-child(even){background:var(--bg-2)}
.epne a.srow:hover{background:var(--bg-3)}
.epne a.srow:hover h3{color:var(--navy)}
.epne .srow h3{font-size:1.04rem}
.epne .srow p{font-size:.92rem;color:var(--mute)}
.epne .srow .use{font-family:var(--fm);font-size:.76rem;color:var(--navy);line-height:1.55}
.epne .shead-row{background:var(--navy)!important;color:#fff;padding-block:13px}
.epne .shead-row span{
  font-family:var(--fd);font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#BCCCE6;
}

/* ==========================================================================
   PROCESS / DOWNTIME STEPS
   ========================================================================== */

.epne .steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden;
}
.epne .step{
  padding:26px 24px 28px;border-right:1px solid var(--line-dark);display:flex;
  flex-direction:column;gap:10px;background:rgba(255,255,255,.03);
}
.epne .step:last-child{border-right:0}
.epne .step .n{
  font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);
}
.epne .step p{font-size:.9rem;color:var(--on-dark-mute)}
.epne .step .t{
  margin-top:auto;padding-top:13px;border-top:1px dashed var(--line-dark);
  font-family:var(--fm);font-size:.78rem;color:#fff;
}

/* ==========================================================================
   PROJECTS
   ========================================================================== */

.epne .projects{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.epne .projects.three{grid-template-columns:repeat(3,1fr)}
.epne .project{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
}
.epne .project:hover{border-color:var(--line-2)}
.epne .project .ph{aspect-ratio:3/2;overflow:hidden;background:var(--bg-3)}
.epne .project img{width:100%;height:100%;object-fit:cover}
.epne .project .b{padding:16px 18px 18px}
.epne .project .kind{
  font-family:var(--fd);font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:7px;
}
.epne .project h3{font-size:.98rem;margin-bottom:8px}
.epne .project .facts{font-family:var(--fm);font-size:.74rem;color:var(--mute);line-height:1.6}

/* Before/after pair on a project detail page. */
.epne .ba{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.epne .ba figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.epne .ba img{width:100%;aspect-ratio:3/2;object-fit:cover}
.epne .ba figcaption{
  padding:12px 16px;border-top:1px solid var(--line);font-family:var(--fd);
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);
}

/* Gallery grid on a project detail page. */
.epne .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.epne .gal img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}

/* Archive filter bar — server-rendered <form>, works with JS off. */
.epne .filters{
  display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:20px 22px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:32px;
}
.epne .filters .field{margin-bottom:0;min-width:180px;flex:1}
.epne .filters .btn{flex:0 0 auto}

/* ==========================================================================
   RESIDENTIAL BAND
   ========================================================================== */

.epne .resi{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.epne .resgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.epne .resgrid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */

.epne .areas{display:grid;grid-template-columns:1fr .9fr;gap:52px;align-items:start}
.epne .tiers{display:flex;flex-direction:column;gap:26px}
.epne .tier h3{
  font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy);margin-bottom:12px;
}
.epne .tier .towns{display:flex;flex-wrap:wrap;gap:7px}
.epne .tier a,.epne .tier span.town{
  font-size:.87rem;text-decoration:none;color:var(--ink);border:1px solid var(--line);
  background:#fff;padding:6px 12px;border-radius:2px;display:inline-block;
}
.epne .tier a:hover{border-color:var(--navy);color:var(--navy)}

/*
 * A town with no page renders as plain text, never a link. The sitemap's
 * city-page rule: a town only becomes a page once there is a real photographed
 * job in or next to it, and until then it is a list entry here. Styling it as
 * a dead link would invite somebody to "fix" it by pointing it at a page that
 * should not exist yet.
 */
.epne .tier span.town{color:var(--mute);background:var(--bg-2);border-style:dashed}

.epne .mapbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.epne .mapbox svg{width:100%;height:auto;display:block}
.epne .mapbox iframe{width:100%;height:340px;border:0;display:block}
.epne .mapbox .cap{padding:16px 20px;border-top:1px solid var(--line);font-size:.86rem;color:var(--mute)}
.epne .mapbox .cap b{color:var(--ink)}

/* ==========================================================================
   QUOTES / REFERENCES
   ========================================================================== */

.epne .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.epne .quote{
  border:1px solid var(--line-dark);border-radius:var(--r);padding:26px;
  background:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:14px;margin:0;
}
.epne .quote p{font-size:.97rem;color:#D6E1F0;line-height:1.68}
.epne .quote .who{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line-dark);
  font-size:.82rem;color:var(--on-dark-mute);
}
.epne .quote .who b{display:block;color:#fff;font-family:var(--fd);font-weight:700;margin-bottom:2px}

/* ==========================================================================
   CTA + FORM
   ========================================================================== */

.epne .ctagrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.epne .form{background:#fff;border-radius:var(--r);padding:30px;color:var(--ink)}
.epne .form h3{margin-bottom:6px}
.epne .form .sub{font-size:.9rem;color:var(--mute);margin-bottom:20px}
.epne .frow{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.epne .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.epne .field label{
  font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);
}
.epne .field input,.epne .field select,.epne .field textarea{
  border:1px solid var(--line-2);border-radius:var(--r);padding:12px 13px;
  font-family:var(--fb);font-size:.95rem;color:var(--ink);background:#fff;width:100%;
}
.epne .field textarea{min-height:110px;resize:vertical}
.epne .field input:focus,.epne .field select:focus,.epne .field textarea:focus{
  border-color:var(--navy);outline:none;
}
.epne .form .fine{font-size:.8rem;color:var(--mute);margin-top:13px}

/*
 * Honeypot. Positioned off-screen rather than display:none — some bots skip
 * hidden fields but fill visible ones, and a screen reader is kept away by
 * aria-hidden and tabindex="-1" on the input itself.
 */
.epne .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Server-side validation feedback. */
.epne .field.err input,.epne .field.err select,.epne .field.err textarea{border-color:var(--red)}
.epne .field .msg{font-size:.78rem;color:var(--red-dp);font-family:var(--fb);text-transform:none;letter-spacing:0}
.epne .formnote{
  border-left:3px solid var(--red);background:#FBF2F2;padding:13px 17px;font-size:.87rem;
  line-height:1.6;color:#6E2A2A;border-radius:0 var(--r) var(--r) 0;margin-bottom:20px;
}
.epne .formnote.ok{border-left-color:var(--navy);background:var(--bg-3);color:var(--navy-dp)}

/*
 * JotForm embed. The card loses most of its padding because JotForm renders
 * its own, and doubling it wastes a third of the column on a phone. Height is
 * set inline and then driven by JotForm's embed handler.
 */
.epne .form.embed{padding:8px}
.epne .form.embed .fine{padding:0 14px 10px}
.epne iframe.jotform{display:block;width:100%;min-width:100%;border:0;background:#fff}

.epne .callout{
  border:1px solid var(--line-dark);border-radius:var(--r);padding:24px 26px;margin-top:26px;
  background:rgba(255,255,255,.04);
}
.epne .callout .num{
  font-family:var(--fd);font-size:1.85rem;font-weight:700;color:#fff;
  text-decoration:none;display:block;
}
.epne .callout .num:hover{color:var(--red-hi)}

/* ==========================================================================
   SPECIFICATION TABLE
   ========================================================================== */

.epne .spectable{width:100%;border-collapse:collapse;font-size:.95rem}
.epne .spectable th,.epne .spectable td{
  text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top;
}
.epne .spectable th{
  font-family:var(--fd);font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);width:30%;
}
.epne .spectable td{color:var(--ink)}
.epne .spectable td .mono{color:var(--navy);font-size:.9rem}
.epne .spectable tr:nth-child(even){background:var(--bg-2)}
.epne .spectable tr:last-child th,.epne .spectable tr:last-child td{border-bottom:0}
.epne .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}

/* ==========================================================================
   DUO CARDS — "right call" / "we will tell you something else"
   ========================================================================== */

.epne .duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.epne .card{border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;background:#fff}
.epne .dark .card{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.epne .card h3{margin-bottom:12px}
.epne .card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.epne .card li{font-size:.94rem;color:var(--mute);padding-left:24px;position:relative;line-height:1.6}
.epne .dark .card li{color:var(--on-dark-mute)}
.epne .card li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:2px;background:var(--red);
}
.epne .card.navy li::before{background:var(--navy)}

/* ==========================================================================
   REFERENCE PROJECT
   ========================================================================== */

.epne .refproj{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff;
}
.epne .refproj img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.epne .refproj .b{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.epne .refproj .facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;margin-top:8px}
.epne .refproj .facts div{border-top:1px solid var(--line);padding-top:10px}
.epne .refproj .facts b{display:block;font-family:var(--fd);font-size:.95rem}
.epne .refproj .facts span{font-size:.79rem;color:var(--mute);letter-spacing:.04em;text-transform:uppercase}

/* ==========================================================================
   FAQ
   ========================================================================== */

.epne .faq{max-width:860px}
.epne .faq details{border-bottom:1px solid var(--line)}
.epne .faq summary{
  cursor:pointer;list-style:none;padding:20px 42px 20px 0;position:relative;
  font-family:var(--fd);font-weight:700;font-size:1.05rem;
}
.epne .faq summary::-webkit-details-marker{display:none}
.epne .faq summary::after{
  content:"+";position:absolute;right:8px;top:17px;font-size:1.4rem;
  color:var(--red);font-weight:400;
}
.epne .faq details[open] summary::after{content:"\2212"}
.epne .faq .a{padding:0 42px 22px 0;color:var(--mute);font-size:.98rem;max-width:70ch}
.epne .faq .a a{color:var(--navy)}

/* ==========================================================================
   OTHER LINKS
   ========================================================================== */

.epne .otherlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.epne .otherlinks a{
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  text-decoration:none;background:#fff;display:flex;flex-direction:column;gap:6px;
}
.epne .otherlinks a:hover{border-color:var(--navy)}
.epne .otherlinks .k{
  font-family:var(--fd);font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red);
}
.epne .otherlinks strong{font-family:var(--fd);font-size:1rem}
.epne .otherlinks span.d{font-size:.86rem;color:var(--mute)}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.epne .ftr{background:var(--navy-ink);color:var(--on-dark-mute);padding-block:56px 26px;font-size:.9rem}
.epne .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.epne .ftr h4{
  font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:15px;
}
.epne .ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.epne .ftr a{text-decoration:none}
.epne .ftr a:hover{color:#fff}
.epne .ftr .nap{line-height:1.85}
.epne .ftr .nap b{color:#fff}
.epne .ftr .flogo{
  width:168px;background:#fff;padding:11px 13px;border-radius:var(--r);margin-bottom:18px;
}
.epne .fbtm{
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.79rem;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.epne .pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.epne .pager .page-numbers{
  font-family:var(--fd);font-size:.84rem;font-weight:700;padding:10px 15px;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;background:#fff;
}
.epne .pager .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.epne .pager a.page-numbers:hover{border-color:var(--navy);color:var(--navy)}

/* ==========================================================================
   RESPONSIVE

   Breakpoints copied from the mockups. 1080 is where the nav collapses and the
   two-column bands stack; 900 flips the hero veil from a side gradient to a
   vertical one, because at that width the photo is behind the text rather than
   beside it; 640 is single column throughout.
   ========================================================================== */

@media (max-width:1080px){
  .epne .nav{display:none}
  .epne .burger{display:block}
  .epne .hdr .wrap{flex-wrap:wrap}
  .epne .nav.open{
    display:flex;flex-direction:column;gap:0;width:100%;order:5;margin:8px 0 0;
    border-top:1px solid var(--line);padding-top:6px;
  }
  .epne .nav.open ul{flex-direction:column;gap:0;width:100%}
  .epne .nav.open a{padding:12px 0;border-bottom:1px solid var(--line);display:block}
  .epne .sectors{grid-template-columns:repeat(2,1fr)}
  .epne .projects,.epne .projects.three{grid-template-columns:repeat(2,1fr)}
  .epne .pillars,.epne .resi,.epne .areas,.epne .ctagrid{grid-template-columns:1fr;gap:38px}
  .epne .steps{grid-template-columns:repeat(2,1fr)}
  .epne .step:nth-child(2){border-right:0}
  .epne .step:nth-child(1),.epne .step:nth-child(2){border-bottom:1px solid var(--line-dark)}
  .epne .quotes{grid-template-columns:1fr}
  .epne .fgrid{grid-template-columns:1fr 1fr;gap:32px}
  .epne .credbar .wrap{grid-template-columns:1fr 1fr;gap:18px}
  .epne .srow{grid-template-columns:1fr;gap:8px}
  .epne .pshot img{aspect-ratio:16/10}
  .epne .duo,.epne .refproj,.epne .otherlinks{grid-template-columns:1fr}
  .epne .gal{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .epne .hero .veil{
    background:linear-gradient(180deg,rgba(7,21,47,.94) 0%,rgba(7,21,47,.9) 55%,rgba(7,21,47,.95) 100%);
  }
}

@media (max-width:640px){
  .epne .sectors,.epne .projects,.epne .projects.three{grid-template-columns:1fr}
  .epne .steps{grid-template-columns:1fr}
  .epne .step{border-right:0;border-bottom:1px solid var(--line-dark)}
  .epne .step:last-child{border-bottom:0}
  .epne .fgrid{grid-template-columns:1fr}
  .epne .frow{grid-template-columns:1fr}
  .epne .util .r{gap:14px}
  .epne .hdr-cta .btn{display:none}
  .epne .ba,.epne .gal{grid-template-columns:1fr}
  .epne .spectable th{width:auto}
  .epne .spectable th,.epne .spectable td{display:block;padding:12px 16px}
  .epne .spectable th{border-bottom:0;padding-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .epne *{transition:none!important;animation:none!important}
}

/* ==========================================================================
   PRINT

   A facility manager who prints a sector page is printing the specification
   table to take into a meeting. Give them the table and the phone number, and
   drop the navigation, the hero photo and the form.
   ========================================================================== */

@media print{
  .epne .util,.epne .hdr,.epne .hero .bg,.epne .hero .veil,.epne .ftr,
  .epne .form,.epne .otherlinks,.epne .burger{display:none!important}
  .epne .hero,.epne .dark{background:#fff!important;color:#000!important}
  .epne .hero h1,.epne .dark h2,.epne .dark h3{color:#000!important}
  .epne .sec{padding-block:18px}
  .epne .tblwrap{overflow:visible;border:0}
}