/*
Theme Name: Nor'East Flagpole
Theme URI: https://noreastflagpole.com
Author: Nor'East Flagpole
Author URI: https://noreastflagpole.com
Description: Custom theme for Nor'East Flagpole, Inc. of Waldoboro, Maine — Maine's only in-house, full-service flagpole company. Coastal navy palette with a restrained flag-red accent, a filterable installation gallery, and a fully editable, form-based page editor powered by Advanced Custom Fields. Every piece of front-end text and imagery is editable from the WordPress admin without touching theme files.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noreast-flagpole
Tags: local-business, trade, custom-theme, acf, gallery
*/

/* =========================================================================
   0. FONTS (self-hosted)

   Oswald and Source Sans 3 are bundled in assets/fonts/ rather than pulled
   from fonts.googleapis.com. The Google stylesheet is render-blocking and sits
   on two extra third-party origins, so the browser had to resolve DNS, do a
   TLS handshake and parse a stylesheet before it could paint anything —
   PageSpeed measured that at roughly 1.8s on mobile. Serving the files from
   the same origin removes that round trip entirely, and keeps visitor IPs from
   being handed to a third party on every page load.

   Both families are licensed under the SIL Open Font License 1.1, which
   expressly permits redistribution like this. See assets/fonts/LICENSE.txt.

   Latin subset only — the site is in English.
   ========================================================================= */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Oswald-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Source-Sans-3-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Source-Sans-3-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Source-Sans-3-700.woff2') format('woff2');
}

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
  /* Brand palette — deep coastal navy with a restrained flag red */
  --nef-navy:        #0e2a47;
  --nef-navy-600:    #164067;
  --nef-navy-700:    #0a2038;
  --nef-navy-900:    #061525;
  --nef-navy-tint:   #eef3f8;
  --nef-red:         #b3202e;
  --nef-red-dark:    #8c1822;
  --nef-brass:       #b4914f;

  /* Neutrals */
  --nef-ink:         #101822;
  --nef-body:        #3d4854;
  /* #6d7886 measured 4.49:1 on white — a hair under WCAG AA. Darkened to clear it. */
  --nef-muted:       #67717f;
  --nef-line:        #dde3ea;
  --nef-line-strong: #c3ccd7;
  --nef-bg:          #ffffff;
  --nef-bg-alt:      #f4f7fa;

  /* Typography */
  --nef-display: "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --nef-sans:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Metrics */
  --nef-maxw:      1200px;
  --nef-gap:       clamp(1rem, 3vw, 2.5rem);
  --nef-radius:    10px;
  --nef-radius-sm: 6px;
  --nef-shadow:    0 12px 34px rgba(6, 21, 37, 0.10);
  --nef-shadow-sm: 0 4px 14px rgba(6, 21, 37, 0.08);
  --nef-transition: 200ms ease;
}

/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--nef-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--nef-body);
  background: var(--nef-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

/* <picture> exists only to let the browser pick WebP over JPEG; it must not
   generate a box of its own, or it would sit between a sized container and the
   image inside it and break the object-fit cropping on the hero and gallery. */
picture { display: contents; }

a { color: var(--nef-navy-600); text-decoration: none; transition: color var(--nef-transition); }
a:hover { color: var(--nef-red); }

/*
 * Links inside running text carry an underline.
 *
 * Colour alone is not an accessible cue — someone with a colour vision
 * deficiency cannot tell a navy link from navy body copy, which is what
 * Lighthouse flags as "links rely on color to be distinguishable". Navigation,
 * buttons and card links are exempt: they are visually distinct by position,
 * shape or size, so an underline there is noise rather than signal.
 */
.nef-prose a,
.nef-notice a,
.nef-lede a,
.nef-footer p a,
.nef-footer__bottom a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}
.nef-prose a:hover,
.nef-notice a:hover,
.nef-lede a:hover,
.nef-footer p a:hover,
.nef-footer__bottom a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
  font-family: var(--nef-display);
  color: var(--nef-ink);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }
blockquote { margin: 0; }

/* Visible focus for keyboard users, suppressed for mouse clicks. */
:focus-visible { outline: 3px solid var(--nef-brass); outline-offset: 2px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 0.7rem 1.1rem; background: var(--nef-navy); color: #fff;
  border-radius: var(--nef-radius-sm);
}

/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */
.nef-container {
  width: 100%;
  max-width: var(--nef-maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.nef-section { padding-block: clamp(2.75rem, 6vw, 5.25rem); }
.nef-section--alt  { background: var(--nef-bg-alt); }
.nef-section--tint { background: var(--nef-navy-tint); }
.nef-section--navy { background: var(--nef-navy); color: rgba(255,255,255,.86); }
.nef-section--navy h2, .nef-section--navy h3 { color: #fff; }

.nef-eyebrow {
  font-family: var(--nef-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nef-red);
  margin: 0 0 0.6rem;
}
.nef-section--navy .nef-eyebrow { color: var(--nef-brass); }

.nef-section-head { max-width: 760px; margin-bottom: 2.4rem; }
.nef-section-head--center { margin-inline: auto; text-align: center; }
.nef-section-head p:last-child { margin-bottom: 0; }

.nef-lede { font-size: 1.12rem; line-height: 1.65; color: var(--nef-body); }

.nef-prose > :last-child { margin-bottom: 0; }
.nef-prose h2, .nef-prose h3 { margin-top: 1.6em; }
.nef-prose h2:first-child, .nef-prose h3:first-child { margin-top: 0; }

/* Two-column media + text split. */
.nef-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .nef-split { grid-template-columns: 1.05fr 0.95fr; }
  .nef-split--reverse .nef-split__media { order: -1; }
}
.nef-split__media img {
  width: 100%;
  border-radius: var(--nef-radius);
  box-shadow: var(--nef-shadow);
}

/* =========================================================================
   4. BUTTONS
   ========================================================================= */
.nef-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--nef-sans); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.02em;
  /* Phone numbers and two-word labels must never break across lines. */
  white-space: nowrap;
  padding: 0.78rem 1.5rem;
  border: 2px solid var(--nef-red);
  border-radius: var(--nef-radius-sm);
  background: var(--nef-red); color: #fff;
  cursor: pointer;
  transition: background var(--nef-transition), border-color var(--nef-transition), color var(--nef-transition), transform var(--nef-transition);
}
.nef-btn:hover { background: var(--nef-red-dark); border-color: var(--nef-red-dark); color: #fff; transform: translateY(-1px); }
.nef-btn svg { width: 18px; height: 18px; flex: none; }

.nef-btn--navy { background: var(--nef-navy); border-color: var(--nef-navy); }
.nef-btn--navy:hover { background: var(--nef-navy-700); border-color: var(--nef-navy-700); }

.nef-btn--ghost { background: transparent; color: var(--nef-navy); border-color: var(--nef-line-strong); }
.nef-btn--ghost:hover { background: var(--nef-navy); border-color: var(--nef-navy); color: #fff; }

.nef-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.nef-btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--nef-navy); }

.nef-btn--block { width: 100%; }

.nef-btnrow { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* =========================================================================
   5. HEADER — utility bar, brand lockup, navigation
   ========================================================================= */
.nef-utilitybar {
  background: var(--nef-navy-900);
  color: rgba(255,255,255,.82);
  font-size: 0.86rem;
}
.nef-utilitybar__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.4rem 1.4rem;
  padding-block: 0.5rem;
}
.nef-utilitybar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.3rem; }
.nef-utilitybar__item { display: inline-flex; align-items: center; gap: 0.42rem; }
.nef-utilitybar__item svg { width: 15px; height: 15px; flex: none; color: var(--nef-brass); }
.nef-utilitybar a { color: #fff; }
.nef-utilitybar a:hover { color: var(--nef-brass); }
.nef-phone__label { color: rgba(255,255,255,.62); }
.nef-phone__number { font-weight: 600; }
@media (max-width: 700px) {
  .nef-utilitybar__inner { justify-content: center; text-align: center; }
  .nef-utilitybar__item--address { display: none; }
}

/*
 * Stacking order, in one place so it stays consistent:
 *   80  header (and the mobile drawer, which lives inside it)
 *   65  nav backdrop
 *  200  gallery lightbox
 *  999  skip link
 *
 * The header must outrank the backdrop. Because the header is positioned with
 * a z-index it forms a stacking context, so the drawer nested inside it can
 * never paint above anything that beats the header itself — no matter how high
 * the drawer's own z-index goes. At header:60 / backdrop:65 the backdrop
 * covered the open menu and swallowed every tap on a link.
 */
.nef-header {
  position: sticky; top: 0; z-index: 80;
  background: #fff;
  border-bottom: 1px solid var(--nef-line);
  box-shadow: 0 1px 0 rgba(6,21,37,.03);
}
.nef-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.7rem;
}

/* Brand lockup: compass mark + condensed wordmark, with an image override. */
.nef-brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--nef-navy); }
.nef-brand:hover { color: var(--nef-navy); }
.nef-brand__img { max-height: 62px; width: auto; }
.nef-brand__mark { width: 40px; height: 40px; flex: none; color: var(--nef-navy); }
.nef-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.nef-brand__name {
  font-family: var(--nef-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--nef-navy);
}
.nef-brand__meta {
  font-family: var(--nef-sans);
  font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--nef-muted);
  margin-top: 0.22rem;
}
@media (max-width: 480px) { .nef-brand__meta { display: none; } }

.nef-navtoggle {
  display: none;
  width: 46px; height: 42px;
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 0 10px; margin-left: auto;
  background: transparent; border: 1px solid var(--nef-line-strong);
  border-radius: var(--nef-radius-sm); cursor: pointer;
}
.nef-navtoggle span {
  display: block; height: 2px; width: 100%;
  background: var(--nef-navy); border-radius: 2px;
  transition: transform var(--nef-transition), opacity var(--nef-transition);
}
.nef-navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nef-navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nef-navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nef-menu {
  display: flex; align-items: center; gap: 0.2rem;
  list-style: none; margin: 0; padding: 0;
}
.nef-menu li { margin: 0; position: relative; }
.nef-menu a {
  display: block;
  font-weight: 600; font-size: 0.95rem;
  color: var(--nef-ink);
  white-space: nowrap;
  padding: 0.6rem 0.85rem;
  border-radius: var(--nef-radius-sm);
}
.nef-menu a:hover { color: var(--nef-red); background: var(--nef-navy-tint); }
.nef-menu .current-menu-item > a,
.nef-menu .current_page_item > a { color: var(--nef-red); }

/* Second-level dropdowns. */
.nef-menu .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 5;
  min-width: 220px; margin: 0; padding: 0.4rem;
  list-style: none; background: #fff;
  border: 1px solid var(--nef-line); border-radius: var(--nef-radius-sm);
  box-shadow: var(--nef-shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--nef-transition), transform var(--nef-transition), visibility var(--nef-transition);
}
.nef-menu li:hover > .sub-menu,
.nef-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nef-header__actions--desktop { display: flex; align-items: center; gap: 0.6rem; }
.nef-header__actions--desktop .nef-btn { padding-inline: 1.1rem; }
.nef-nav__cta-mobile { display: none; }

/* Between the hamburger breakpoint and roughly 1180px the menu, the phone
   button and the estimate button cannot all fit on one line. The phone number
   is already in the utility bar directly above, so it is the one to drop. */
@media (max-width: 1180px) {
  .nef-header__actions--desktop .nef-btn--ghost { display: none; }
}

@media (max-width: 940px) {
  .nef-navtoggle { display: flex; }
  .nef-header__actions--desktop { display: none; }
  .nef-nav {
    position: fixed; inset: 0 0 0 auto; z-index: 70;
    width: min(340px, 86vw);
    background: #fff;
    padding: 5.5rem 1.4rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 250ms ease;
    box-shadow: -8px 0 30px rgba(6,21,37,.16);
  }
  .nef-nav.is-open { transform: translateX(0); }
  .nef-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nef-menu a { padding: 0.85rem 0.6rem; border-bottom: 1px solid var(--nef-line); border-radius: 0; }
  .nef-menu .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 0.9rem; min-width: 0;
  }
  .nef-nav__cta-mobile { display: block; margin-top: 1.2rem; }
  .nef-nav__cta-mobile .nef-btn { width: 100%; }
  body.nef-nav-locked { overflow: hidden; }
}

/* Dims the page behind the drawer. Deliberately below the header (see the
   stacking note above) so the drawer stays visible and tappable. */
.nef-nav-backdrop {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(6,21,37,.5);
  opacity: 0; transition: opacity 250ms ease;
}
.nef-nav-backdrop.is-open { opacity: 1; }

/* =========================================================================
   6. HOME HERO
   ========================================================================= */
.nef-hero { position: relative; isolation: isolate; background: var(--nef-navy-900); overflow: hidden; }
.nef-hero__media { position: absolute; inset: 0; z-index: -2; }
.nef-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.nef-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,21,37,.72) 0%, rgba(6,21,37,.52) 45%, rgba(6,21,37,.80) 100%);
}
/* Keeps the container's own max-width so the hero text lines up with the left
   edge of every section below it; the copy itself is what gets constrained. */
.nef-hero__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: clamp(460px, 74vh, 720px);
  justify-content: center;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  color: #fff;
}
.nef-hero h1 { max-width: 16ch; }
.nef-hero__mark { width: 68px; height: 68px; color: rgba(255,255,255,.85); margin-bottom: 1.2rem; }
.nef-hero h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  margin-bottom: 0.35em;
}
.nef-hero__tagline {
  font-family: var(--nef-sans);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
  margin-bottom: 1.6rem;
  max-width: 44ch;
}
.nef-hero .nef-eyebrow { color: var(--nef-brass); }

/* Interior page banner. */
.nef-pagehero {
  position: relative; isolation: isolate;
  background: var(--nef-navy) center/cover no-repeat;
  color: #fff;
}
.nef-pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,21,37,.78), rgba(6,21,37,.62));
}
.nef-pagehero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.nef-pagehero h1 { color: #fff; text-transform: uppercase; margin-bottom: 0.25em; }
.nef-pagehero .nef-lede { color: rgba(255,255,255,.9); max-width: 60ch; margin-bottom: 0; }
.nef-breadcrumb {
  font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: 0.9rem;
}
.nef-breadcrumb a { color: rgba(255,255,255,.92); }
.nef-breadcrumb a:hover { color: var(--nef-brass); }
.nef-breadcrumb span { margin-inline: 0.45rem; }

/* =========================================================================
   7. TRUST STRIP
   ========================================================================= */
.nef-trust { background: var(--nef-navy); color: #fff; }
.nef-trust__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(255,255,255,.14);
}
@media (min-width: 860px) { .nef-trust__grid { grid-template-columns: repeat(4, 1fr); } }
.nef-trust__item {
  background: var(--nef-navy);
  padding: 1.5rem 1.1rem;
  text-align: center;
}
.nef-trust__value {
  font-family: var(--nef-display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: uppercase; line-height: 1.1;
  color: #fff;
}
.nef-trust__label {
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-top: 0.3rem;
}

/* =========================================================================
   8. CARDS — services, flags, generic
   ========================================================================= */
.nef-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .nef-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px) { .nef-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .nef-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .nef-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nef-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.nef-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--nef-line);
  border-radius: var(--nef-radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--nef-shadow-sm);
  transition: transform var(--nef-transition), box-shadow var(--nef-transition), border-color var(--nef-transition);
}
.nef-card:hover { transform: translateY(-3px); box-shadow: var(--nef-shadow); border-color: var(--nef-line-strong); }
.nef-card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--nef-navy-tint);
  color: var(--nef-navy);
  margin-bottom: 1rem;
}
.nef-card__icon svg { width: 23px; height: 23px; }
.nef-card h3 { margin-bottom: 0.4rem; }
.nef-card p { color: var(--nef-body); margin-bottom: 1rem; }
.nef-card p:last-child { margin-bottom: 0; }
.nef-card__link {
  margin-top: auto;
  font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--nef-red);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.nef-card__link svg { width: 16px; height: 16px; transition: transform var(--nef-transition); }
.nef-card__link:hover svg { transform: translateX(3px); }

/* Checklist used for flag types and repair scope. */
.nef-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
@media (min-width: 700px) { .nef-checklist--2 { grid-template-columns: repeat(2, 1fr); } }
.nef-checklist li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: 0; line-height: 1.5;
}
.nef-checklist svg { width: 19px; height: 19px; flex: none; margin-top: 0.22rem; color: var(--nef-red); }
.nef-section--navy .nef-checklist svg { color: var(--nef-brass); }

/* Notice callout (e.g. wood poles discontinued). */
.nef-notice {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: #fdf6e8;
  border: 1px solid #e8d5a8;
  border-left: 4px solid var(--nef-brass);
  border-radius: var(--nef-radius-sm);
  padding: 1.1rem 1.3rem;
  margin-block: 1.5rem;
  color: #5b4a24;
}
.nef-notice svg { width: 21px; height: 21px; flex: none; margin-top: 0.2rem; color: var(--nef-brass); }
.nef-notice p:last-child { margin-bottom: 0; }
.nef-notice strong { color: #4a3c1c; }

/* =========================================================================
   9. GALLERY — filters, grid, lightbox
   ========================================================================= */
.nef-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.8rem;
}
.nef-filter {
  font-family: var(--nef-sans); font-weight: 600; font-size: 0.9rem;
  padding: 0.5rem 1.05rem;
  background: #fff; color: var(--nef-navy);
  border: 1px solid var(--nef-line-strong);
  border-radius: 100px; cursor: pointer;
  transition: background var(--nef-transition), color var(--nef-transition), border-color var(--nef-transition);
}
.nef-filter:hover { border-color: var(--nef-navy); }
.nef-filter.is-active { background: var(--nef-navy); border-color: var(--nef-navy); color: #fff; }

.nef-gallery {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .nef-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .nef-gallery { grid-template-columns: repeat(4, 1fr); } }

.nef-gallery__item {
  position: relative;
  margin: 0; padding: 0;
  border: 0; background: none;
  border-radius: var(--nef-radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 4;
}
.nef-gallery__item.is-hidden { display: none; }
.nef-gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 350ms ease;
}
.nef-gallery__item:hover img { transform: scale(1.045); }
.nef-gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,21,37,0) 55%, rgba(6,21,37,.55) 100%);
  opacity: 0; transition: opacity var(--nef-transition);
}
.nef-gallery__item:hover::after { opacity: 1; }
.nef-gallery__caption {
  position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.7rem; z-index: 2;
  color: #fff; font-size: 0.86rem; font-weight: 600; line-height: 1.3;
  text-align: left;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--nef-transition), transform var(--nef-transition);
}
.nef-gallery__item:hover .nef-gallery__caption { opacity: 1; transform: translateY(0); }

.nef-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; place-items: center;
  background: rgba(6,21,37,.94);
  padding: clamp(1rem, 4vw, 3rem);
}
.nef-lightbox.is-open { display: grid; }
.nef-lightbox img {
  max-width: min(100%, 1100px); max-height: 82vh;
  width: auto; margin-inline: auto;
  border-radius: var(--nef-radius-sm);
}
.nef-lightbox__caption {
  text-align: center; color: rgba(255,255,255,.88);
  margin-top: 0.9rem; font-size: 0.95rem;
}
.nef-lightbox button {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%; cursor: pointer;
  font-size: 1.5rem; line-height: 1;
  transition: background var(--nef-transition);
}
.nef-lightbox button:hover { background: rgba(255,255,255,.24); }
.nef-lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.nef-lightbox__prev  { left: clamp(0.5rem, 2vw, 2rem);  top: 50%; transform: translateY(-50%); }
.nef-lightbox__next  { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* =========================================================================
   10. TESTIMONIALS
   ========================================================================= */
.nef-quote {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--nef-line);
  border-top: 3px solid var(--nef-red);
  border-radius: var(--nef-radius);
  padding: 1.7rem 1.6rem 1.5rem;
  box-shadow: var(--nef-shadow-sm);
}
.nef-quote__mark {
  font-family: var(--nef-display); font-weight: 600; font-size: 3rem; line-height: 0.7;
  color: var(--nef-navy-tint); margin-bottom: 0.4rem;
}
.nef-quote blockquote { font-size: 1.03rem; line-height: 1.65; color: var(--nef-body); margin-bottom: 1.1rem; }
.nef-quote blockquote p:last-child { margin-bottom: 0; }
.nef-quote__cite {
  margin-top: auto;
  font-family: var(--nef-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 1rem; color: var(--nef-navy);
  font-style: normal;
}
.nef-quote__meta { font-family: var(--nef-sans); font-size: 0.84rem; color: var(--nef-muted); text-transform: none; letter-spacing: 0; }

/* =========================================================================
   11. CTA BAND
   ========================================================================= */
.nef-cta {
  position: relative; isolation: isolate;
  background: var(--nef-navy) center/cover no-repeat;
  color: #fff;
}
.nef-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,21,37,.86), rgba(6,21,37,.74));
}
.nef-cta__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.nef-cta h2 { color: #fff; margin-bottom: 0.3rem; text-transform: uppercase; }
.nef-cta p { color: rgba(255,255,255,.86); margin-bottom: 0; max-width: 52ch; }

/* =========================================================================
   12. SERVICE AREA
   ========================================================================= */
.nef-area__list {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.nef-area__list li {
  margin: 0;
  font-size: 0.88rem; font-weight: 600;
  padding: 0.38rem 0.9rem;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 100px;
  color: rgba(255,255,255,.9);
}

/* =========================================================================
   13. CONTACT — form card, details list
   ========================================================================= */
.nef-contact__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .nef-contact__grid { grid-template-columns: 1fr 460px; } }

.nef-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.nef-details li { display: flex; gap: 0.9rem; margin: 0; }
.nef-details svg { width: 22px; height: 22px; flex: none; margin-top: 0.25rem; color: var(--nef-red); }
.nef-details__label {
  display: block;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nef-muted); margin-bottom: 0.1rem;
}
.nef-details__value { font-size: 1.06rem; font-weight: 600; color: var(--nef-ink); }
.nef-details__value a { color: var(--nef-ink); }
.nef-details__value a:hover { color: var(--nef-red); }

.nef-formcard {
  background: #fff;
  border: 1px solid var(--nef-line);
  border-radius: var(--nef-radius);
  box-shadow: var(--nef-shadow);
  overflow: hidden;
}
.nef-formcard__head {
  background: var(--nef-navy); color: #fff;
  font-family: var(--nef-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
}
.nef-formcard__body { padding: 1.5rem; }

.nef-field { margin-bottom: 1.05rem; }
.nef-field label {
  display: block;
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nef-navy); margin-bottom: 0.35rem;
}
.nef-field input, .nef-field textarea, .nef-field select {
  width: 100%;
  font-family: inherit; font-size: 1rem; color: var(--nef-ink);
  padding: 0.68rem 0.85rem;
  background: #fff;
  border: 1px solid var(--nef-line-strong);
  border-radius: var(--nef-radius-sm);
  transition: border-color var(--nef-transition), box-shadow var(--nef-transition);
}
.nef-field input:focus, .nef-field textarea:focus, .nef-field select:focus {
  outline: none;
  border-color: var(--nef-navy);
  box-shadow: 0 0 0 3px rgba(14,42,71,.12);
}
.nef-field textarea { resize: vertical; min-height: 120px; }

.nef-form__hp { position: absolute; left: -9999px; }

.nef-form__notice {
  padding: 0.9rem 1.1rem;
  border-radius: var(--nef-radius-sm);
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
}
.nef-form__notice--ok  { background: #e9f6ec; border: 1px solid #b6dfc0; color: #205c30; }
.nef-form__notice--err { background: #fdecec; border: 1px solid #f0bcbc; color: #8c1822; }
.nef-form__consent { font-size: 0.84rem; color: var(--nef-muted); margin: 0.9rem 0 0; }

.nef-map { border: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--nef-radius); }

/* -------------------------------------------------------------------------
   13b. THIRD-PARTY FORM PLUGINS (Gravity Forms, Contact Form 7)

   When a shortcode is set in Site Settings, the plugin renders its own markup
   inside .nef-formcard. These rules make that markup inherit the theme's
   fields, labels and button so the card looks the same either way — without
   the client having to touch the plugin's own styling options.
   ------------------------------------------------------------------------- */
.nef-formcard--embed .gform_wrapper,
.nef-formcard--embed .wpcf7 { margin: 0; }

/* The card already has a heading; hide the plugin's duplicate. */
.nef-formcard--embed .gform_heading { display: none; }

.nef-formcard--embed .gform_fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.05rem;
  margin: 0; padding: 0; list-style: none;
}
.nef-formcard--embed .gfield { margin: 0; padding: 0; }

.nef-formcard--embed .gfield_label,
.nef-formcard--embed .wpcf7 label {
  display: block;
  font-family: var(--nef-sans);
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nef-navy); margin-bottom: 0.35rem;
}
.nef-formcard--embed .gfield_required { color: var(--nef-red); }

.nef-formcard--embed input[type="text"],
.nef-formcard--embed input[type="email"],
.nef-formcard--embed input[type="tel"],
.nef-formcard--embed input[type="url"],
.nef-formcard--embed input[type="number"],
.nef-formcard--embed textarea,
.nef-formcard--embed select {
  width: 100%;
  font-family: inherit; font-size: 1rem; color: var(--nef-ink);
  padding: 0.68rem 0.85rem;
  background: #fff;
  border: 1px solid var(--nef-line-strong);
  border-radius: var(--nef-radius-sm);
  transition: border-color var(--nef-transition), box-shadow var(--nef-transition);
}
.nef-formcard--embed input:focus,
.nef-formcard--embed textarea:focus,
.nef-formcard--embed select:focus {
  outline: none;
  border-color: var(--nef-navy);
  box-shadow: 0 0 0 3px rgba(14, 42, 71, .12);
}
.nef-formcard--embed textarea { resize: vertical; min-height: 120px; }

.nef-formcard--embed .gfield_description,
.nef-formcard--embed .gform_fileupload_rules {
  font-size: 0.84rem; color: var(--nef-muted); padding-top: 0.3rem;
}

.nef-formcard--embed .gform_footer,
.nef-formcard--embed .wpcf7 p:last-of-type { margin: 1.3rem 0 0; padding: 0; }

.nef-formcard--embed .gform_button,
.nef-formcard--embed .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  font-family: var(--nef-sans); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.02em; white-space: nowrap;
  padding: 0.78rem 1.5rem;
  border: 2px solid var(--nef-red);
  border-radius: var(--nef-radius-sm);
  background: var(--nef-red); color: #fff;
  cursor: pointer;
  transition: background var(--nef-transition), border-color var(--nef-transition), transform var(--nef-transition);
}
.nef-formcard--embed .gform_button:hover,
.nef-formcard--embed .wpcf7-submit:hover {
  background: var(--nef-red-dark); border-color: var(--nef-red-dark);
  transform: translateY(-1px);
}

/* Validation + confirmation states, matched to .nef-form__notice. */
.nef-formcard--embed .gform_validation_errors,
.nef-formcard--embed .wpcf7-not-valid-tip,
.nef-formcard--embed .wpcf7 form.invalid .wpcf7-response-output {
  background: #fdecec; border: 1px solid #f0bcbc; color: var(--nef-red-dark);
  border-radius: var(--nef-radius-sm);
  padding: 0.9rem 1.1rem; margin: 0 0 1.1rem;
  font-size: 0.95rem;
}
.nef-formcard--embed .gform_validation_errors h2 {
  font-size: 0.95rem; color: var(--nef-red-dark); margin: 0;
  font-family: var(--nef-sans); text-transform: none; letter-spacing: 0;
}
.nef-formcard--embed .validation_message {
  color: var(--nef-red-dark); font-size: 0.86rem; padding-top: 0.3rem;
}
.nef-formcard--embed .gfield_error input,
.nef-formcard--embed .gfield_error textarea,
.nef-formcard--embed .wpcf7-not-valid { border-color: var(--nef-red); }

.nef-formcard--embed .gform_confirmation_message,
.nef-formcard--embed .wpcf7 form.sent .wpcf7-response-output {
  background: #e9f6ec; border: 1px solid #b6dfc0; color: #205c30;
  border-radius: var(--nef-radius-sm);
  padding: 0.9rem 1.1rem; margin: 0;
  font-size: 0.95rem;
}

/* =========================================================================
   14. FOOTER
   ========================================================================= */
.nef-footer { background: var(--nef-navy); color: rgba(255,255,255,.78); font-size: 0.95rem; }
.nef-footer__grid {
  display: grid; gap: clamp(1.6rem, 4vw, 2.6rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
}
@media (min-width: 700px)  { .nef-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nef-footer__grid { grid-template-columns: 1.4fr 1fr 1.3fr; } }
/* Column headings are <h2> so the document never skips a heading level (the
   band above the footer ends on an h2). They are styled small on purpose —
   visual weight and outline depth are separate concerns. */
.nef-footer h2 {
  color: #fff; font-family: var(--nef-sans);
  font-size: 0.8rem; font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.nef-footer a { color: rgba(255,255,255,.86); }
.nef-footer a:hover { color: var(--nef-brass); }
.nef-footer ul { list-style: none; margin: 0; padding: 0; }
.nef-footer li { margin-bottom: 0.55rem; display: flex; gap: 0.6rem; align-items: flex-start; }
.nef-footer li svg { width: 17px; height: 17px; flex: none; margin-top: 0.3rem; color: var(--nef-brass); }
.nef-footer p { color: rgba(255,255,255,.72); }

.nef-footer__brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; color: #fff; }
.nef-footer__brand .nef-brand__mark { color: rgba(255,255,255,.9); }
.nef-footer__brand .nef-brand__name { color: #fff; }
.nef-footer__brand .nef-brand__meta { color: rgba(255,255,255,.6); }

.nef-social { display: flex; gap: 0.55rem; }
.nef-social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
}
.nef-social a:hover { background: rgba(255,255,255,.12); }
.nef-social svg { width: 18px; height: 18px; }

.nef-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.1rem;
  font-size: 0.86rem;
  color: rgba(255,255,255,.62);
}
.nef-footer__bottom .nef-container {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: space-between;
}
.nef-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }

/* =========================================================================
   15. BLOG / 404 / EDITOR FALLBACKS
   ========================================================================= */
.nef-postcard {
  background: #fff; border: 1px solid var(--nef-line);
  border-radius: var(--nef-radius); overflow: hidden;
  box-shadow: var(--nef-shadow-sm);
  display: flex; flex-direction: column;
}
.nef-postcard img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.nef-postcard__body { padding: 1.4rem; }
.nef-postcard__meta { font-size: 0.82rem; color: var(--nef-muted); margin-bottom: 0.5rem; }

.nef-pagination { display: flex; gap: 0.4rem; margin-top: 2rem; }
.nef-pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding-inline: 0.6rem;
  border: 1px solid var(--nef-line-strong); border-radius: var(--nef-radius-sm);
  color: var(--nef-navy); font-weight: 600;
}
.nef-pagination .page-numbers.current,
.nef-pagination .page-numbers:hover { background: var(--nef-navy); border-color: var(--nef-navy); color: #fff; }

.nef-404 { text-align: center; max-width: 620px; margin-inline: auto; }

/* Editor-only placeholder, mirrors the house pattern. */
.nef-placeholder {
  border: 2px dashed var(--nef-line-strong);
  border-radius: var(--nef-radius);
  padding: 1.6rem; background: var(--nef-bg-alt);
  color: var(--nef-muted);
}
.nef-placeholder strong { display: block; color: var(--nef-navy); margin-bottom: 0.4rem; }

/* WordPress core alignment + caption classes. */
.alignleft  { float: left;  margin: 0.4rem 1.4rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.4rem; }
.aligncenter { margin-inline: auto; }
.wp-caption-text { font-size: 0.86rem; color: var(--nef-muted); }

/* =========================================================================
   16. MOTION PREFERENCES
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   17. PRINT
   ========================================================================= */
@media print {
  .nef-utilitybar, .nef-navtoggle, .nef-nav, .nef-header__actions,
  .nef-cta, .nef-lightbox, .nef-filters { display: none !important; }
  .nef-header { position: static; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}