/* ==========================================================================
   EEE Technological Services — block theme styles
   Tokens live in theme.json. This file carries section/composition styles
   that theme.json cannot express (grid tracks, hover states, dark bands).
   ========================================================================== */

:root {
  --eee-gutter: clamp(18px, 4vw, 40px);
  --eee-rule: 1px solid var(--wp--preset--color--border);
  --eee-dark-rule: 1px solid #2A3A43;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* `overflow-x: hidden` here would make the body a scroll container and
   break the sticky header; `clip` contains stray width without one. */
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* WordPress layout resets so our CSS grids behave like the source design. */
.eee-grid > *,
.eee-stack > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* --------------------------------------------------------------------------
   1. Shared primitives
   -------------------------------------------------------------------------- */

/* Eyebrow — mono, uppercase, with a green rule before the text. */
.eee-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--wp--preset--color--blue);
  margin: 0;
}
.eee-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background: var(--wp--preset--color--green);
}
.eee-eyebrow.is-on-dark { color: var(--wp--preset--color--green); }
.eee-eyebrow.is-plain::before { display: none; }

/* Small mono caption used for stat labels, table heads, footer headings. */
.eee-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* Text link with a green underline rule. */
.eee-link-rule {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.eee-link-rule a {
  color: var(--wp--preset--color--blue);
  border-bottom: 1px solid var(--wp--preset--color--green);
  padding-bottom: 2px;
}
.eee-link-rule a:hover {
  color: var(--wp--preset--color--ink);
  border-bottom-color: var(--wp--preset--color--ink);
}

/* Generic auto-fit grid. Track floor set per-section by --eee-min. */
.eee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--eee-min, 300px)), 1fr));
  gap: var(--eee-gap, clamp(30px, 5vw, 68px));
  align-items: var(--eee-align, start);
}
.eee-grid > * { min-width: 0; }

/* Vertical stack with an explicit gap. */
.eee-stack {
  display: flex;
  flex-direction: column;
  /* Deliberately not --eee-gap: that variable is set by the enclosing grid and
     would otherwise be inherited by every stack inside it. */
  gap: var(--eee-stack-gap, 18px);
}
.eee-stack > * { min-width: 0; }

/* Media frame — keeps an aspect box even before an image is set. */
.eee-frame {
  aspect-ratio: var(--eee-ratio, 4 / 3);
  border: var(--eee-rule);
  background: var(--wp--preset--color--surface-tint);
  overflow: hidden;
  margin: 0;
}
.eee-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eee-frame.is-on-dark {
  border: var(--eee-dark-rule);
  background: #152530;
}

/* Hairline-separated cell group (1px gap over a border-coloured bed). */
.eee-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--eee-min, 130px)), 1fr));
  gap: 1px;
  background: var(--wp--preset--color--border);
  border: var(--eee-rule);
  list-style: none;
  margin: 0;
  padding: 0;
}
.eee-cells > li,
.eee-cells > .wp-block-group {
  background: var(--wp--preset--color--base);
  padding: 14px;
  margin: 0;
}

/* Mono chip row (capability tags, coverage tags). */
.eee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.eee-chips--strong { color: var(--wp--preset--color--body); }
.eee-chips > li {
  border: var(--eee-rule);
  padding: 6px 10px;
  margin: 0;
}

/* Section padding helpers. */
.eee-section { padding-block: clamp(56px, 8vw, 104px); }
.eee-section--tight { padding-block: clamp(40px, 5.5vw, 72px); }
.eee-section--band { padding-block: clamp(48px, 7vw, 84px); }
.eee-hairline-top { border-top: var(--eee-rule); }
.eee-hairline-bottom { border-bottom: var(--eee-rule); }
[id] { scroll-margin-top: 90px; }

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */

/* The header template part wraps the header in a block-level div only as tall
   as the header itself, which is the containing block a sticky child cannot
   leave. Collapsing the wrapper hands that role to .wp-site-blocks. */
.wp-block-template-part:has(> .eee-header) { display: contents; }

.eee-header {
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
  border-bottom: var(--eee-rule);
}
/* The translucent blur is painted by this layer rather than by the header
   itself: an element with a backdrop-filter becomes the containing block for
   its fixed-position descendants, which would trap the navigation overlay
   inside the header. */
.eee-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.eee-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-block: 14px;
}
.eee-header .wp-block-site-logo img { width: 104px; height: auto; display: block; }
.eee-header .wp-block-navigation {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}
.eee-header .wp-block-navigation .wp-block-navigation__container { gap: clamp(14px, 2vw, 28px); }
.eee-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--ink);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.eee-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.eee-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.eee-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--blue);
  border-bottom-color: var(--wp--preset--color--green);
}
.eee-header .eee-header__cta .wp-block-button__link {
  font-size: 13px;
  padding: 11px 20px;
}

/* Mobile overlay menu keeps the brand palette. */
.eee-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--ink);
  padding: clamp(24px, 6vw, 48px);
  min-height: 100vh;
  min-height: 100dvh;
}
.eee-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  /* Clear the close button, which sits in the top right corner. */
  padding-top: clamp(34px, 10vw, 56px);
}
.eee-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  width: 100%;
  align-items: flex-start;
  gap: 2px;
}
.eee-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  width: 100%;
}
.eee-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 20px;
  padding-block: 11px;
  border-bottom: 1px solid var(--wp--preset--color--dark-rule);
}
.eee-header .wp-block-navigation__responsive-container.is-menu-open
  .current-menu-item > .wp-block-navigation-item__content,
.eee-header .wp-block-navigation__responsive-container.is-menu-open
  .current_page_item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--green);
}

/* Breadcrumb strip. */
.eee-breadcrumb {
  border-bottom: var(--eee-rule);
  background: var(--wp--preset--color--surface-soft);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.eee-breadcrumb p { padding-block: 12px; margin: 0; }
.eee-breadcrumb a { color: var(--wp--preset--color--muted); }
.eee-breadcrumb a:hover { color: var(--wp--preset--color--blue); }
.eee-breadcrumb .sep { color: var(--wp--preset--color--on-dark-soft); }

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.eee-hero {
  background: var(--wp--preset--color--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.eee-hero__inner {
  padding-top: clamp(56px, 9vw, 116px);
  padding-bottom: clamp(48px, 7vw, 88px);
  --eee-min: 340px;
  --eee-gap: clamp(36px, 5vw, 72px);
  --eee-align: end;
}
.eee-hero h1 {
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.04;
  font-weight: 800;
  color: #fff;
}
.eee-hero .eee-hero__lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--wp--preset--color--on-dark);
  max-width: 56ch;
}

/* Page heroes (about / services / projects / contact / faq). */
.eee-pagehead {
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(36px, 5vw, 56px);
  --eee-min: 320px;
}
.eee-pagehead h1 {
  font-size: clamp(31px, 4.6vw, 54px);
  line-height: 1.06;
  font-weight: 800;
}
.eee-pagehead__lead {
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.62;
  color: var(--wp--preset--color--body);
  max-width: 52ch;
}

/* Hero statistic strip. */
.eee-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: 1px;
  background: #2A3A43;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eee-stats > li {
  background: var(--wp--preset--color--ink);
  padding: 16px 14px;
  margin: 0;
}
.eee-stats .eee-stats__value {
  font-family: var(--wp--preset--font-family--display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  display: block;
}
.eee-stats .eee-stats__label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #93A2AA;
  margin-top: 5px;
  display: block;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.wp-block-button__link { display: inline-block; text-decoration: none; }

.is-style-eee-primary .wp-block-button__link {
  background: var(--wp--preset--color--blue);
  color: #fff;
}
.is-style-eee-primary .wp-block-button__link:hover {
  background: var(--wp--preset--color--ink);
  color: #fff;
}
.is-style-eee-accent .wp-block-button__link {
  background: var(--wp--preset--color--green);
  color: var(--wp--preset--color--ink);
}
.is-style-eee-accent .wp-block-button__link:hover {
  background: #fff;
  color: var(--wp--preset--color--ink);
}
.is-style-eee-ghost .wp-block-button__link {
  background: transparent;
  border: 1px solid #3A4A53;
  color: #fff;
}
.is-style-eee-ghost .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--green);
  background: transparent;
}
.is-style-eee-invert .wp-block-button__link {
  background: #fff;
  color: var(--wp--preset--color--blue);
}
.is-style-eee-invert .wp-block-button__link:hover {
  background: var(--wp--preset--color--green);
  color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   5. Trust bar
   -------------------------------------------------------------------------- */

.eee-trustbar {
  background: var(--wp--preset--color--surface-soft);
  border-bottom: var(--eee-rule);
}
.eee-trustbar__inner {
  display: flex;
  gap: clamp(18px, 4vw, 44px);
  align-items: center;
  flex-wrap: wrap;
  padding-block: 22px;
}
.eee-trustbar .eee-label { letter-spacing: 0.18em; }
.eee-trustbar ul {
  display: flex;
  gap: clamp(14px, 2.5vw, 34px);
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--wp--preset--color--body);
  list-style: none;
  margin: 0;
  padding: 0;
}
.eee-trustbar ul > li { margin: 0; }

/* --------------------------------------------------------------------------
   6. Service cards / capability grid
   -------------------------------------------------------------------------- */

.eee-band-surface {
  background: var(--wp--preset--color--surface);
  border-top: var(--eee-rule);
  border-bottom: var(--eee-rule);
}
.eee-band-soft {
  background: var(--wp--preset--color--surface-soft);
  border-top: var(--eee-rule);
}

.eee-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.eee-section-head > * { margin: 0 !important; }

.eee-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eee-card {
  background: var(--wp--preset--color--base);
  border: var(--eee-rule);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.eee-card:hover {
  border-color: var(--wp--preset--color--blue);
  box-shadow: inset 0 -3px 0 var(--wp--preset--color--green);
}
.eee-card .eee-card__num {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--green);
  display: block;
}
.eee-card h3,
.eee-card h4 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.eee-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wp--preset--color--muted);
  margin: 0;
}

/* Process steps (about page). */
.eee-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--wp--preset--color--border);
  border: var(--eee-rule);
  list-style: none;
  margin: 0;
  padding: 0;
}
.eee-steps > li {
  background: var(--wp--preset--color--base);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.eee-steps .eee-card__num {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--green);
}
.eee-steps h3 { font-size: 17px; font-weight: 700; margin: 0; }
.eee-steps p { font-size: 14.5px; line-height: 1.62; color: var(--wp--preset--color--muted); margin: 0; }

/* --------------------------------------------------------------------------
   7. Case study cards
   -------------------------------------------------------------------------- */

.eee-casegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}
.eee-case {
  border: var(--eee-rule);
  display: flex;
  flex-direction: column;
  color: var(--wp--preset--color--ink);
  transition: border-color 0.15s ease;
}
.eee-case:hover { border-color: var(--wp--preset--color--blue); }
.eee-case .eee-frame {
  --eee-ratio: 16 / 10;
  border: 0;
  border-bottom: var(--eee-rule);
}
.eee-case__body {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eee-case__meta {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--blue);
  margin: 0;
}
.eee-case h3 { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0; }
.eee-case p { font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--muted); margin: 0; }

/* Case-study tag row on the Projects page. */
.eee-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eee-tags > li { margin: 0; padding: 5px 9px; }
.eee-tags .is-primary { background: var(--wp--preset--color--surface-tint); color: var(--wp--preset--color--blue); }
.eee-tags .is-ink { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--green); }
.eee-tags .is-outline { border: var(--eee-rule); color: var(--wp--preset--color--muted); }

.eee-cells .eee-label { letter-spacing: 0.14em; }
.eee-cells .eee-cells__value { font-size: 14.5px; font-weight: 600; margin-top: 4px; display: block; }

/* --------------------------------------------------------------------------
   8. Blue band + FAQ teaser
   -------------------------------------------------------------------------- */

.eee-band-blue {
  background: var(--wp--preset--color--blue);
  color: #fff;
}
.eee-band-blue__inner {
  padding-block: clamp(48px, 7vw, 84px);
  --eee-min: 300px;
  --eee-gap: clamp(28px, 5vw, 60px);
  --eee-align: center;
}
.eee-band-blue h2 { color: #fff; }
.eee-band-blue p { color: var(--wp--preset--color--on-blue); }
.eee-band-blue .eee-label,
.eee-band-blue .eee-eyebrow { color: var(--wp--preset--color--on-blue); }

.eee-qlist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, 0.22);
  list-style: none;
  margin: 0;
  padding: 0;
}
.eee-qlist > li {
  background: var(--wp--preset--color--blue);
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* Dark band (about vision/mission). */
.eee-band-ink {
  background: var(--wp--preset--color--ink);
  color: #fff;
}
.eee-band-ink__inner { padding-block: clamp(52px, 7vw, 92px); --eee-min: 300px; --eee-gap: clamp(30px, 5vw, 64px); }
.eee-band-ink h2 { color: #fff; }
.eee-band-ink p { color: #D3DCE0; font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.66; }
.eee-band-ink .eee-divide {
  border-left: 1px solid var(--wp--preset--color--dark-rule);
  padding-left: clamp(20px, 3vw, 40px);
}

/* Light divider column (home vision/mission). */
.eee-divide-light {
  border-left: var(--eee-rule);
  padding-left: clamp(20px, 3vw, 36px);
}
.eee-greenrule { width: 44px; height: 2px; background: var(--wp--preset--color--green); }

/* --------------------------------------------------------------------------
   9. Services detail sections
   -------------------------------------------------------------------------- */

.eee-service__inner {
  padding-block: clamp(40px, 5.5vw, 72px);
  --eee-min: 300px;
  --eee-gap: clamp(28px, 4.5vw, 60px);
}
.eee-service h2 { font-size: clamp(24px, 2.9vw, 34px); line-height: 1.14; font-weight: 800; }
.eee-service .eee-frame { --eee-ratio: 16 / 11; }

.eee-jumplinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eee-jumplinks > li { margin: 0; }
.eee-jumplinks a {
  display: block;
  border: var(--eee-rule);
  padding: 8px 14px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wp--preset--color--body);
}
.eee-jumplinks a:hover {
  border-color: var(--wp--preset--color--blue);
  color: var(--wp--preset--color--blue);
  background: var(--wp--preset--color--surface-tint);
}

/* --------------------------------------------------------------------------
   10. Q&A
   -------------------------------------------------------------------------- */

.eee-qa-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(22px, 3.5vw, 48px);
  border-top: var(--eee-rule);
  padding-top: clamp(24px, 3vw, 36px);
}
.eee-qa-group > h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.16;
  font-weight: 800;
  min-width: 0;
  margin: 0;
}
.eee-qa-group__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
@media (min-width: 720px) {
  .eee-qa-group__body { grid-column: span 2; }
}
.eee-qa {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eee-qa > h3 { font-size: 18.5px; font-weight: 700; line-height: 1.3; margin: 0; }
.eee-qa > p { font-size: 16px; line-height: 1.68; color: var(--wp--preset--color--body); margin: 0; }

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */

.eee-contact__inner {
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(40px, 5vw, 64px);
  --eee-min: 320px;
}
.eee-contact h1 { font-size: clamp(31px, 4.6vw, 52px); line-height: 1.06; font-weight: 800; max-width: 22ch; }

.eee-factlist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--wp--preset--color--border);
  border: var(--eee-rule);
}
.eee-factlist > * {
  background: var(--wp--preset--color--base);
  padding: 20px 22px;
  margin: 0 !important;
}
.eee-factlist .eee-label { margin-bottom: 8px; }
.eee-factlist p { font-size: 16px; line-height: 1.7; display: block; }
.eee-factlist a { font-size: 16.5px; font-weight: 600; line-height: 1.7; display: block; }

.eee-form-card {
  border: var(--eee-rule);
  background: var(--wp--preset--color--surface-soft);
  padding: clamp(22px, 3vw, 34px);
}
.eee-form-card h2 { font-size: 21px; font-weight: 800; margin: 0 0 6px; }
.eee-form-card > p { font-size: 14.5px; color: var(--wp--preset--color--muted); margin: 0 0 18px; }

.eee-form { display: flex; flex-direction: column; gap: 16px; }
.eee-form label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.eee-form label > span { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--ink); }
.eee-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 16px;
}
.eee-form input,
.eee-form select,
.eee-form textarea {
  border: 1px solid #D8E0E3;
  border-radius: 2px;
  padding: 12px 13px;
  background: #fff;
  color: var(--wp--preset--color--ink);
  font-family: inherit;
  font-size: 15px;
  width: 100%;
}
.eee-form textarea { resize: vertical; line-height: 1.55; }
.eee-form input:focus,
.eee-form select:focus,
.eee-form textarea:focus {
  border-color: var(--wp--preset--color--blue);
  outline: 2px solid var(--wp--preset--color--green);
  outline-offset: 1px;
}
.eee-form button[type="submit"] {
  background: var(--wp--preset--color--blue);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 15px 22px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  align-self: flex-start;
}
.eee-form button[type="submit"]:hover { background: var(--wp--preset--color--ink); }
.eee-form__note { font-size: 13.5px; color: var(--wp--preset--color--muted); margin: 0; }
.eee-form__status { font-size: 14px; margin: 0; }
.eee-form__status.is-ok { color: #4F7322; }
.eee-form__status.is-error { color: #A8473B; }
.eee-form__hp { position: absolute; left: -9999px; }

/* --------------------------------------------------------------------------
   12. Projects reference table
   -------------------------------------------------------------------------- */

.eee-projects-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.eee-projects-controls input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  border: 1px solid #D8E0E3;
  border-radius: 2px;
  padding: 12px 14px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--wp--preset--color--ink);
  background: #fff;
}
.eee-projects-controls input[type="search"]:focus {
  border-color: var(--wp--preset--color--blue);
  outline: 2px solid var(--wp--preset--color--green);
  outline-offset: 1px;
}
.eee-projects-controls .eee-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.eee-projects-controls button {
  border: 1px solid #D8E0E3;
  background: #fff;
  color: var(--wp--preset--color--body);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px 13px;
  border-radius: 2px;
  cursor: pointer;
}
.eee-projects-controls button[aria-pressed="true"] {
  border-color: var(--wp--preset--color--blue);
  background: var(--wp--preset--color--blue);
  color: #fff;
}
.eee-projects-count {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.eee-table-scroll { overflow-x: auto; }
.eee-table-scroll table,
table.eee-projects {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: 14px;
}
.eee-table-scroll thead tr,
table.eee-projects thead tr {
  background: var(--wp--preset--color--ink);
  color: #fff;
  text-align: left;
}
.eee-table-scroll th,
table.eee-projects th {
  padding: 13px 14px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 0;
  text-align: left;
}
.eee-table-scroll tbody tr,
table.eee-projects tbody tr { border-top: 1px solid #EDF1F2; }
.eee-table-scroll td,
table.eee-projects td {
  padding: 13px 14px;
  vertical-align: top;
  border: 0;
  color: var(--wp--preset--color--body);
  line-height: 1.55;
}
table.eee-projects td:nth-child(1) {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  color: var(--wp--preset--color--muted);
  width: 52px;
}
table.eee-projects td:nth-child(2) { font-weight: 600; color: var(--wp--preset--color--ink); line-height: 1.5; width: 26%; }
table.eee-projects td:nth-child(4) {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12.5px;
  color: var(--wp--preset--color--blue);
  white-space: nowrap;
  width: 110px;
}
table.eee-projects td:nth-child(5) { width: 100px; }
table.eee-projects td:nth-child(5) > * {
  display: inline-block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 8px;
  white-space: nowrap;
  background: var(--wp--preset--color--surface-tint);
  color: #3C4C55;
}
table.eee-projects tr[data-status="On Going"] td:nth-child(5) > * {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--green);
}
table.eee-projects tr[hidden] { display: none; }
.eee-table-note { font-size: 13px; color: var(--wp--preset--color--muted); margin: 0; }

/* --------------------------------------------------------------------------
   13. Post / archive
   -------------------------------------------------------------------------- */

.eee-prose { max-width: 72ch; }
.eee-prose > * { margin-block: 0 0 !important; }
.eee-prose > * + * { margin-block-start: 22px !important; }
.eee-prose h2 { font-size: clamp(24px, 2.6vw, 32px); margin-block-start: 44px !important; }
.eee-prose h3 { font-size: 20px; margin-block-start: 32px !important; }
.eee-prose blockquote {
  border-left: 2px solid var(--wp--preset--color--green);
  padding-left: 22px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 19px;
  line-height: 1.5;
}
.eee-prose ul,
.eee-prose ol { padding-left: 20px; list-style: revert; }
.eee-prose li { margin-block: 6px; }
.eee-prose img { height: auto; }

.eee-postlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; background: var(--wp--preset--color--border); border: var(--eee-rule); }
.eee-postlist .wp-block-post { background: #fff; padding: 26px 24px; }
.eee-postmeta {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.eee-footer { background: var(--wp--preset--color--ink); color: #fff; }
.eee-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(26px, 4vw, 52px);
  padding-top: clamp(44px, 6vw, 72px);
  padding-bottom: 28px;
}
.eee-footer__inner > * { min-width: 0; margin: 0 !important; }
.eee-footer .wp-block-site-logo img { width: 120px; height: auto; }
.eee-footer p.eee-footer__blurb { font-size: 14px; line-height: 1.65; color: var(--wp--preset--color--on-dark-soft); max-width: 34ch; }
.eee-footer .eee-label { color: var(--wp--preset--color--green); }
.eee-footer a { color: var(--wp--preset--color--on-dark-strong); font-size: 14.5px; }
.eee-footer a:hover { color: var(--wp--preset--color--green); }
.eee-footer p { font-size: 14.5px; line-height: 1.7; color: var(--wp--preset--color--on-dark-strong); }
.eee-footer .wp-block-navigation { display: block; }
.eee-footer .wp-block-navigation .wp-block-navigation__container { flex-direction: column; gap: 12px; align-items: flex-start; }

.eee-social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.eee-social > li { margin: 0; }
.eee-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--wp--preset--color--dark-line);
  color: var(--wp--preset--color--on-dark-strong);
}
.eee-social a:hover { border-color: var(--wp--preset--color--green); color: var(--wp--preset--color--green); }
.eee-social svg { display: block; }

/* WP core social-links block styled to match the hand-built row. */
.eee-footer .wp-block-social-links .wp-social-link {
  width: 38px;
  height: 38px;
  border: 1px solid var(--wp--preset--color--dark-line);
  border-radius: 0;
  background: transparent;
  color: var(--wp--preset--color--on-dark-strong);
}
.eee-footer .wp-block-social-links .wp-social-link:hover {
  border-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--green);
  transform: none;
}

.eee-footer__bottom { border-top: 1px solid var(--wp--preset--color--dark-rule); }
.eee-footer__bottom .eee-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 18px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7B8B93;
}
.eee-footer__bottom-inner > * { margin: 0 !important; }
.eee-footer__bottom-inner a { color: var(--wp--preset--color--green); font-size: inherit; }

/* --------------------------------------------------------------------------
   15. Utilities & accessibility
   -------------------------------------------------------------------------- */

.eee-measure-56 { max-width: 56ch; }
.eee-measure-72 { max-width: 72ch; }
.eee-measure-52 { max-width: 52ch; }
.eee-measure-48 { max-width: 48ch; }
.eee-measure-34 { max-width: 34ch; }
.eee-measure-30ch { max-width: 30ch; }
.eee-measure-26ch { max-width: 26ch; }
.eee-measure-24ch { max-width: 24ch; }
.eee-measure-22ch { max-width: 22ch; }

.eee-text-body { color: var(--wp--preset--color--body); }
.eee-text-muted { color: var(--wp--preset--color--muted); }
.eee-strong-ink { color: var(--wp--preset--color--ink); font-weight: 500; }

.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;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  background: var(--wp--preset--color--ink); color: #fff;
  padding: 12px 18px; clip: auto; clip-path: none; width: auto; height: auto;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Touch targets and mobile input behaviour
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
  /* Core renders the hamburger and its close button at icon size. */
  .eee-header .wp-block-navigation__responsive-container-open,
  .eee-header .wp-block-navigation__responsive-container-close {
    padding: 10px;
    margin: -10px;
  }
  .eee-header .wp-block-navigation__responsive-container-close {
    top: clamp(14px, 4vw, 28px);
    right: clamp(14px, 4vw, 28px);
  }
  .eee-footer .wp-block-navigation .wp-block-navigation-item__content {
    padding-block: 9px;
  }
  .eee-footer .wp-block-social-links .wp-social-link {
    width: 44px;
    height: 44px;
  }
  /* Telephone and email lines are the primary action on a phone. */
  .eee-factlist a {
    padding-block: 6px;
  }
  .eee-footer .wp-block-social-links .wp-social-link > a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  /* iOS zooms the page in when a focused field is under 16px. */
  .eee-form input,
  .eee-form select,
  .eee-form textarea,
  .eee-projects-controls input[type="search"] {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .eee-header, .eee-footer, .eee-projects-controls { display: none !important; }
}

/* Breadcrumb inner rail (rendered by PHP, outside the block layout system). */
.eee-breadcrumb__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--eee-gutter);
}
.eee-form-wrap { display: block; }

/* --------------------------------------------------------------------------
   16. Block-container equivalents
   Core blocks render <div class="wp-block-group"> where the source design used
   <li>. Mirror every list-child rule onto group children so patterns can be
   built from real editable blocks.
   -------------------------------------------------------------------------- */

.eee-stats > .wp-block-group {
  background: var(--wp--preset--color--ink);
  padding: 16px 14px;
  margin: 0;
}
.eee-steps > .wp-block-group {
  background: var(--wp--preset--color--base);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.eee-qlist > .wp-block-heading,
.eee-qlist > p {
  background: var(--wp--preset--color--blue);
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.eee-cardgrid > .wp-block-group { margin: 0; }
.eee-cells > p,
.eee-cells > .wp-block-heading {
  background: var(--wp--preset--color--base);
  padding: 14px;
  margin: 0;
}
.eee-chips.wp-block-list { display: flex; }
.eee-jumplinks.wp-block-list { display: flex; }

/* Stats/steps/cards built from groups must not inherit block gap. */
.eee-stats > .wp-block-group > *,
.eee-steps > .wp-block-group > *,
.eee-card > *,
.eee-case__body > *,
.eee-qa > *,
.eee-factlist > * > * { margin-block: 0 !important; }

/* Case card wrapper is a group, not an anchor: make the title carry the link. */
.eee-case h3 a { color: inherit; }
.eee-case h3 a:hover { color: var(--wp--preset--color--blue); }

/* Full-bleed bands built as groups keep their own inner rail. */
.eee-hero__inner,
.eee-band-blue__inner,
.eee-band-ink__inner,
.eee-trustbar__inner,
.eee-contact__inner,
.eee-service__inner { max-width: 1240px; margin-inline: auto; }

/* Measure aliases used by the patterns. */
.eee-measure-24 { max-width: 24ch; }
.eee-measure-26 { max-width: 26ch; }
.eee-measure-30 { max-width: 30ch; }

/* Green rule rendered as a core separator. */
hr.eee-greenrule {
  border: 0;
  background: var(--wp--preset--color--green);
  width: 44px;
  height: 2px;
  margin: 0;
  opacity: 1;
}


/* --------------------------------------------------------------------------
   17. Layout utilities
   These replace the inline custom properties the sections used to carry, so
   the block markup the editor saves matches what the editor would generate.
   -------------------------------------------------------------------------- */

/* Vertical rhythm inside a stack. The numeric suffix is the gap in pixels. */
.eee-gap-10 { --eee-stack-gap: 10px; }
.eee-gap-14 { --eee-stack-gap: 14px; }
.eee-gap-16 { --eee-stack-gap: 16px; }
.eee-gap-18 { --eee-stack-gap: 18px; }
.eee-gap-20 { --eee-stack-gap: 20px; }
.eee-gap-22 { --eee-stack-gap: 22px; }
.eee-gap-26 { --eee-stack-gap: 26px; }
.eee-gap-28 { --eee-stack-gap: 28px; }

/* Fluid stack rhythm for the larger section heads. */
.eee-gap-fluid-1 { --eee-stack-gap: clamp(22px, 3vw, 34px); }
.eee-gap-fluid-2 { --eee-stack-gap: clamp(26px, 3.5vw, 40px); }
.eee-gap-fluid-3 { --eee-stack-gap: clamp(28px, 4vw, 44px); }
.eee-gap-fluid-4 { --eee-stack-gap: clamp(30px, 4vw, 48px); }

/* Auto-fit grids. The suffix is the minimum column width. */
.eee-grid-260 { --eee-min: 260px; --eee-gap: clamp(24px, 3.5vw, 44px); --eee-align: start; }
.eee-grid-300 { --eee-min: 300px; --eee-gap: clamp(30px, 5vw, 68px); --eee-align: start; }
.eee-grid-320 { --eee-min: 320px; --eee-gap: clamp(28px, 4.5vw, 60px); --eee-align: start; }

/* Core gives any group with a background colour 1.25em/2.375em of padding.
   The full-width bands carry their padding on their inner rail instead. */
.wp-block-group.alignfull.has-background { padding: 0; }