/*
Theme Name: Equal Access
Theme URI: https://www.disabilityaccessconsultants.com.au/
Author: Equal Access
Description: Custom WordPress theme for Equal Access Disability Access Consultants, built from Figma UX designs. Dynamic Services, Key Sectors, mega-menu navigation, and blog.
Version: 1.1.115
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: equal-access
*/

/* ==========================================================================
   Design tokens
   Sourced from the "Design System & Developer Handoff" Figma file. Every
   color, spacing and radius value below is a named token from that file -
   swap the value here once and every bound style below updates.
   ========================================================================== */
:root{
  /* ---- Foundations -- Color ----
     One CSS variable per style in the Figma "Color styles" list, named the
     same way (Figma "Neutral Lightest" = --neutral-lightest). Use these
     everywhere; don't add per-component aliases. */
  --body:              #F9F9F9;
  --white:             #FFFFFF;
  --neutral-lightest:  #EEEEEE;
  --neutral-lighter:   #CCCCCC;
  --neutral-light:     #AAAAAA;
  --neutral:           #666666;
  --neutral-dark:      #444444;
  --neutral-darker:    #222222;
  --black:             #000000;
  --cream:             #F5F3F1;
  --darker-cream:      #EFECE8;
  --darkest-green:     #778A67;
  --darker-green:      #9AA78E;
  --mid-green:         #C9D0C3;
  --light-green:       #DAE0D5;
  --lightest-green:    #EBEEE7;

  /* Not a Figma style: one step darker than Darkest Green, used for eyebrow
     text, meta tags and pressed states. Add it to Figma or replace it with
     --darkest-green if the design doesn't need the extra shade. */
  --darkest-green-deep: #5F7050;

  /* ---- Foundations -- Typography ---- */
  --font-heading: 'Rubik', 'Segoe UI', sans-serif;   /* headings, tags, buttons */
  --font-body:    'Inter', 'Segoe UI', sans-serif;   /* body copy */

  --fs-h1: 40px;  --lh-h1: 1.3;
  --fs-h2: 32px;  --lh-h2: 1.3;
  --fs-h3: 26px;  --lh-h3: 1.4;
  --fs-h4: 24px;  --lh-h4: 1.4;
  --fs-h5: 22px;  --lh-h5: 1.4;
  --fs-h6: 20px;  --lh-h6: 1.4;
  --fs-tagline-md: 14px;
  --fs-tagline-sm: 12px;
  --lh-tagline: 1.5;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-body-xs:  12px;
  --lh-body: 1.5;

  /* ---- Foundations -- Spacing, Radius & Icons ---- */
  --space-xs:  4px;   /* tight label/value pairs */
  --space-sm:  8px;   /* icon-to-text gaps */
  --space-md:  16px;  /* card content stacks, list items */
  --space-lg:  24px;  /* block spacing */
  --space-xl:  32px;  /* block spacing (larger) */
  --space-2xl: 40px;  /* footer stack spacing */
  --space-section-x: 80px; /* desktop section side padding */

  --radius-none: 0px;
  --radius-sm:   2px;   /* tags/badges */
  --radius-md:   10px;  /* card inner panel */
  --radius-lg:   20px;  /* card image */
  --radius-full: 50px;  /* buttons, icon chips (pill/circle) */

  --container: 1440px;
  --container-pad: var(--space-section-x);
  --header-pad: var(--space-section-x); /* header + mega-panel side inset; overridden together below 1200px */
  --header-height: 100px;
  --radius: var(--radius-md);
  --gap: var(--space-lg);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin: 0;
  /* .card-scroll rows (Key Sectors/Services) deliberately bleed a negative
     margin-right past the container edge so the next card peeks off
     the viewport - without this, that bleed adds real extra width to
     the page and shows up as a page-level horizontal scrollbar. */
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--neutral-darker);
  background: var(--white);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  font-weight: 400;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  color: var(--darkest-green);
  margin: 0;
  padding: 0;
  font-weight: 400; /* Rubik Regular, per type scale */
}
h1{ font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2{ font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4{ font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5{
  font-size: var(--fs-h5);
  line-height: var(--lh-h5); /* 140% */
  letter-spacing: 0;
  text-transform: capitalize;
}
h6{ font-size: var(--fs-h6); line-height: var(--lh-h6); }
p{ margin: 0 0 16px; color: var(--neutral-dark); }
button{ font-family: inherit; cursor: pointer; }

/* Tagline / eyebrow text - Rubik, per type scale */
.tagline-md{ font-family: var(--font-heading); font-size: var(--fs-tagline-md); line-height: var(--lh-tagline); }
.tagline-sm{ font-family: var(--font-heading); font-size: var(--fs-tagline-sm); line-height: var(--lh-tagline); }
/* Body text weight utilities - Inter Light/Regular/Medium, per type scale */
.text-light{ font-weight: 300; }
.text-medium{ font-weight: 500; }
.text-sm{ font-size: var(--fs-body-sm); }
.text-xs{ font-size: var(--fs-body-xs); }

:focus-visible{ outline: 2px solid var(--darkest-green-deep); outline-offset: 2px; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
/* Every section's background fills 100% of the viewport; only the
   content inside is capped at 1440px with consistent side padding. */
.section{ padding: 96px 0; background: var(--white); }
.section--offwhite{ background: var(--neutral-lightest); }
.section--tint{ background: var(--body); }
.section--related-services{ background: var(--cream); }
.section--related-articles{ background: var(--darker-cream); }
.section-heading{ margin-bottom: 40px; }
.section-heading h2{ margin-bottom: 0; }

@media (max-width: 900px){
  :root{ --container-pad: 24px; }
  .section{ padding: 56px 0; }
}
/* Figma mobile frames use 16px side margins. Approved mobile heading sizes
   (<= 768px): h1 32px, h2 26px, h3 22px; h4 shifts down to the 22px H5 size. */
@media (max-width: 600px){
  :root{ --container-pad: 16px; }
  h4{ font-size: var(--fs-h5); line-height: var(--lh-h5); }
}
@media (max-width: 768px){
  h1, .hero__text h1{ font-size: 32px; }
  h2{ font-size: 26px; }
  h3, h1.team-member__name{ font-size: 22px; }
}

/* Buttons - Figma "Components -- Interactive Elements". All variants share one
   shell: 48px tall, 8px / 24px padding (the 1px border sits inside that, so
   it's 7px / 23px + border), 50px radius, 16px Rubik label, arrow on the right.
     .btn-primary        "Dark"           filled green      -> hover mid-green
     .btn-light          "Light"          text only         -> hover light-green fill
     .btn-outline        "Dark Outline"   green outline     -> hover fades to mid-green
     .btn-outline-light  "Light Outline"  white outline, for use on green backgrounds */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 235px;   /* Figma button component is Fixed 235 x 48; longer labels grow past it */
  min-height: 48px;
  padding: 7px 23px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg{ width: 12px; height: 12px; flex: 0 0 auto; }
.btn-primary{ background: var(--darkest-green); color: var(--white); }
.btn-primary:hover{ background: var(--mid-green); color: var(--white); }
.btn-light{ background: transparent; color: var(--darkest-green); }
.btn-light:hover{ background: var(--light-green); }
.btn-outline{ background: transparent; border-color: var(--darkest-green); color: var(--darkest-green); }
.btn-outline:hover{ border-color: var(--mid-green); color: var(--mid-green); }
.btn-outline-light{ background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline-light:hover{ border-color: var(--light-green); }
.content-cta{ margin: 0; padding-top: 48px; text-align: left; } /* "Contact Us" button under Service / Key Sector / Page content */

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  background: var(--cream, #F5F3F1);
  position: relative;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding-left: var(--header-pad, var(--container-pad));
  padding-right: var(--header-pad, var(--container-pad));
}
.site-logo img{ height: 60px; width: auto; max-width: none; }  /* max-width:none - the global img{max-width:100%} let the logo's width shrink with the flex item while its height stayed fixed = squashed logo */
.site-logo{ flex: 0 0 auto; font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--neutral-darker); }  /* never let the nav squeeze the logo */

/* Primary nav / mega menu */
.primary-nav{ display: none; }
@media (min-width: 1024px){ .primary-nav{ display: flex; align-items: center; gap: 8px; } }

.primary-nav > ul{ display: flex; align-items: center; gap: 8px; }
/* Top-level Nav Link component (per attached Figma reference):
   Default and Hover are both the same muted sage tone at regular
   weight with "+"; Active/open darkens to sage-dark and goes bold
   with "-". */
.primary-nav > ul > .menu-item > a{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--darkest-green);
  border-radius: 4px;
}
.primary-nav > ul > .menu-item:hover > a{ color: var(--darkest-green); }
.primary-nav > ul > .menu-item.menu-item--open > a,
.primary-nav > ul > .menu-item.menu-item--current > a{ color: var(--darkest-green-deep); }
.primary-nav > ul > .menu-item.menu-item--current > a{ font-weight: 600; }
.primary-nav .menu-link--holder{ cursor: pointer; }
.primary-nav .caret{ display: inline-flex; width: 13px; height: 13px; color: inherit; flex: 0 0 auto; }
.primary-nav .caret svg{ width: 100%; height: 100%; display: block; }
.primary-nav .caret__plus{ display: inline-flex; width: 100%; height: 100%; }
.primary-nav .caret__minus{ display: none; width: 100%; height: 100%; }
/* Minus icon is an open/hover state only - the current page's nav item
   still gets the green/bold treatment above, but showing "-" for it too
   made it look permanently "open" even when its dropdown wasn't. */
.menu-item--open > a .caret__plus{ display: none; }
.menu-item--open > a .caret__minus{ display: inline-flex; }

.request-fee-btn{ margin-left: 8px; }

/* Header tightens up before the mobile drawer takes over at 1024px:
   the nav links + button start crowding the logo, so first claw back
   side padding, then shrink the button itself so its label stays on
   one line instead of wrapping to two. --header-pad is also what the
   mega-panel's width is calculated from (below), so the two can't
   drift out of alignment with each other again. */
@media (max-width: 1200px){
  :root{ --header-pad: 40px; }
}
@media (max-width: 1200px){
  .request-fee-btn{ min-width: 0; min-height: 0; padding: 8px 12px; font-size: 12px; gap: 4px; }
  .request-fee-btn svg{ width: 10px; height: 10px; }
}
/* Make room for the nav (+ search icon + button) between the mobile
   breakpoint and wide desktop, so it never has to fight the logo. */
@media (max-width: 1360px){
  .site-header .container{ gap: 16px; }
  .primary-nav{ gap: 4px; }
  .primary-nav > ul{ gap: 3px; }
  .primary-nav > ul > .menu-item > a{ padding: 10px 8px; gap: 6px; }
  .request-fee-btn{ margin-left: 4px; white-space: nowrap; }
}
@media (max-width: 1180px){
  .site-logo img{ height: 48px; }
  .primary-nav > ul > .menu-item > a{ padding: 10px 6px; font-size: 13px; }
  .request-fee-btn{ padding: 8px 10px; font-size: 11px; }
}
/* Compact mobile header, same breakpoint the hamburger/drawer takes
   over at (<1024px): Figma Navbar frame is Fill(375) x Fixed(72),
   16px side padding, 1px #F4F4F4 bottom border. */
@media (max-width: 1023px){
  :root{ --header-height: 72px; --header-pad: 16px; }
  .site-header{ border-bottom: 1px solid #F4F4F4; }
  .site-logo img{ height: 40px; width: auto; max-width: 99px; }
}

/* Mega panel — anchored to .site-header itself (the nearest positioned
   ancestor now that .menu-item is no longer `position: relative`), not
   to the viewport. It used to be `position: fixed; top: var(--header-
   height)`, which assumes the header always sits exactly at the top of
   the viewport - untrue with the WP admin bar (pushes the page down
   ~32px) or once the page is scrolled, so the panel would float free of
   the header instead of sitting flush underneath it. `position: absolute;
   top: 100%` ties it to the header's actual bottom edge instead, and it
   still spans the same 1440px content width, centered independent of
   which item opened it, not just a small box under one nav link. */
.mega-panel{
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(var(--container) - var(--header-pad, var(--container-pad)) * 2), calc(100vw - var(--header-pad, var(--container-pad)) * 2));
  background: var(--white);
  border: 1px solid var(--neutral-lighter);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 24px 48px rgba(43,43,38,0.14);
  overflow: hidden;
}
.menu-item--open .mega-panel{ display: flex; }
.mega-panel__intro{
  flex: 0 0 491px;
  width: 491px;
  height: 422px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--light-green, #DAE0D5);
  padding: 48px 80px;
}
.mega-panel__intro .eyebrow{
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-tagline-sm);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--darkest-green-deep);
}
.mega-panel__intro h4{ font-size: var(--fs-h4); margin: 0; text-transform: capitalize; }
.mega-panel__intro p{ font-size: var(--fs-body-sm); margin: 0; }
/* Grid, not flex: with exactly two 1fr tracks, a single column (<=6
   items, no flyout) naturally sits in just the first 50% track and
   leaves the second blank, instead of a lone flex:1 child stretching
   to fill the whole row. Grid also accounts for the 32px gap itself
   when sizing each 1fr track - flex's flex-basis:50% would not have,
   and two 50% items plus a 32px gap between them would overflow. */
.mega-panel__columns{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
  padding: 28px;
  align-content: start;
  background: var(--darker-cream, #EFECE8);
}
.mega-panel__col{ min-width: 0; display: flex; flex-direction: column; }
/* Inner Nav Link (mega-menu sub-link): no border by default (per Figma,
   rows aren't separated by a rule) - the underline only appears on
   hover/current, and it's a border-bottom on the whole <a> (so it spans
   the link, arrow included), not text-decoration on just the label. */
.mega-panel__columns a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 9px 0;
  font-size: var(--fs-body-sm);
  border-bottom: 1px solid transparent;
  color: var(--neutral-darker);
}
.mega-panel__columns a:hover,
.mega-panel__columns a.is-current{
  color: var(--darkest-green);
  border-bottom-color: var(--darkest-green);
}
.mega-panel__columns a.is-current{ font-weight: 500; }
.mega-panel__columns a .arrow{ opacity: .5; }
/* A link with its own children (e.g. "Compliance & Certification") looks
   and behaves like any other row - the flyout to the right is a hover/
   focus enhancement, not a different control, matching the Figma design
   where the only visible difference is the underline while it's active. */
.mega-panel__item--parent.is-hover-active{ color: var(--darkest-green); border-bottom-color: var(--darkest-green); }

/* 3rd level: hovering/focusing a parent link reveals its own children in
   a dedicated column to the right, instead of expanding in place. */
.mega-panel__detail-col{ position: relative; }
.mega-panel__detail{ display: flex; flex-direction: column; }
.mega-panel__detail[hidden]{ display: none; }

/* ==========================================================================
   Header search - icon toggle that opens a full-width panel under the
   header. Same geometry as .mega-panel (anchored to .site-header, same
   container width) so the two always line up.
   ========================================================================== */
.search-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--darkest-green);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"]{ background: var(--lightest-green); color: var(--darkest-green-deep); }
.search-toggle:focus-visible,
.search-panel__close:focus-visible{ outline: 2px solid var(--darkest-green); outline-offset: 2px; }
.search-toggle .ea-icon--search{ width: 22px; height: 22px; display: block; }
.primary-nav .search-toggle{ margin-left: 4px; }

.header-mobile-actions{ display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px){ .header-mobile-actions{ display: none; } }

.search-panel{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(var(--container) - var(--header-pad, var(--container-pad)) * 2), calc(100vw - var(--header-pad, var(--container-pad)) * 2));
  background: var(--white);
  border: 1px solid var(--neutral-lighter);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 24px 48px rgba(43,43,38,0.14);
  padding: 25px 80px;
  z-index: 2;
}
.search-panel[hidden]{ display: none; }
.search-panel__form{ display: flex; align-items: center; gap: var(--space-md); }
.search-panel__input{
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--neutral-lighter);
  border-radius: 0;
  background: transparent;
  padding: 12px 0;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--neutral-darker);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.search-panel__input::placeholder{ color: var(--neutral-light); }
.search-panel__input:focus{ border-bottom-color: var(--darkest-green); }
.search-panel__input::-webkit-search-cancel-button{ display: none; }
.search-panel__close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--neutral-dark);
  cursor: pointer;
  flex: 0 0 auto;
}
.search-panel__close:hover{ background: var(--lightest-green); }
.search-panel__close .ea-icon--close{ width: 18px; height: 18px; display: block; }
@media (max-width: 1023px){
  .search-panel{ padding: 25px 16px; }
  .search-panel__submit{ display: none; }
}
.screen-reader-text{ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Mobile menu trigger - Phosphor "equals" glyph (two bars, no
   surrounding box), colored darkest-green per the reference icon. */
.mobile-menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  padding: 0;
}
@media (min-width: 1024px){ .mobile-menu-toggle{ display: none; } }
.mobile-menu-toggle span{
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--darkest-green);
  transition: all .2s ease;
}
.mobile-menu-toggle span::after{
  content:'';
  position: absolute;
  left: 0;
  top: 6px;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--darkest-green);
  transition: all .2s ease;
}

/* Mobile off-canvas drawer — full-screen takeover per the Figma
   Navigation Level 1 / Level 2 reference frames, not a partial slide-in
   panel. Level 1 (root) renders as one rounded card of links + the CTA;
   Level 2 (sub) renders as a light-green intro block flowing straight
   into a darker-cream link list, forming a single rounded card, with
   the "< Back" row sitting above it on the plain background. */
.mobile-drawer{
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
}
/* The WP admin bar is itself `position: fixed` with a higher z-index, so
   the drawer's own `inset: 0` (measured from the true viewport top) sits
   right underneath it instead of below it - the usual `body.admin-bar`
   margin-top trick only shifts normal-flow content, not other fixed
   elements. Nudge just the drawer's top edge down by the admin bar's
   height instead (bottom stays 0, so height adjusts automatically). */
body.admin-bar .mobile-drawer{ top: 46px; }
@media (min-width: 783px){ body.admin-bar .mobile-drawer{ top: 32px; } }
.mobile-drawer.is-open{ visibility: visible; }
.mobile-drawer__overlay{ display: none; }
.mobile-drawer__panel{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  opacity: 0;
  transform: translateX(2%);
  transition: opacity .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
.mobile-drawer.is-open .mobile-drawer__panel{ opacity: 1; transform: translateX(0); }
.mobile-drawer__header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--neutral-lighter);
  flex: 0 0 auto;
}
.mobile-drawer__close{ background:none; border:none; padding:0; line-height:1; color: var(--darkest-green); }
.mobile-drawer__close .ea-icon--close{ width: 20px; height: 20px; display: block; }
.mobile-drawer__header .site-logo img{ width: 99px; height: 40px; object-fit: contain; }
.mobile-drawer__body{
  flex: 1;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--darker-cream, #EFECE8);
}
.mobile-drawer__level{
  display: flex;
  flex-direction: column;
  background: var(--darker-cream, #EFECE8);
}
/* CSS `display` on an element always wins over the browser's default
   `[hidden]{ display:none }` rule, so without this, JS setting
   `.hidden = true` on a level had no visual effect and every level
   rendered at once. This restores it. */
.mobile-drawer__level[hidden]{ display: none; }
.mobile-drawer__level > a,
.mobile-drawer__level .mobile-drawer__accordion-toggle{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid rgba(119,138,103,.45);
  background: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--darkest-green, #778A67);
}
.mobile-drawer__chevron .ea-icon--arrow-right{ width: 16px; height: 16px; display: block; opacity: .7; flex-shrink: 0; }

/* Level 2 (sub) panel */
.mobile-drawer__level.mobile-drawer__level--sub{
  background: none;
}
.mobile-drawer__back{
  display:flex; align-items:center; gap:8px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  background:none; text-align:left; font-weight: 500;
  color: var(--darkest-green-deep);
}
.mobile-drawer__level--sub .mobile-drawer__intro{
  background: var(--light-green, #DAE0D5);
  padding: 24px 20px 20px;
}
.mobile-drawer__level--sub .eyebrow{
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-tagline-sm); font-weight:400; letter-spacing:.04em; text-transform: uppercase;
  color: var(--darkest-green-deep);
}
.mobile-drawer__level--sub h3,
.mobile-drawer__level--sub h4{ font-size: var(--fs-h4); text-transform: capitalize; margin: 6px 0 8px; }
.mobile-drawer__level--sub p{ font-size: var(--fs-body-sm); margin: 0; color: var(--neutral-dark); }
.mobile-drawer__level--sub > a{
  background: var(--darker-cream, #EFECE8);
  border-bottom: 1px solid rgba(34,34,34,.08);
  padding: 14px 20px;
}
.mobile-drawer__level--sub > a:last-of-type{ border-bottom: none; }

/* Inline accordions (3rd nav level+): the toggle reads like a group header
   (sage, medium weight) so it's visually distinct from a plain leaf link;
   its children keep the same row style as any other drawer link. The
   whole row is one tap target that only ever expands - no split link, so
   there's nothing ambiguous about what tapping it does. A parent item
   that's also a real page instead gets a "View All X" link as the first
   row inside its own expanded panel, rather than trying to make part of
   the header row double as a link. */
.mobile-drawer__level--sub .mobile-drawer__accordion{ background: var(--darker-cream, #EFECE8); }
.mobile-drawer__level--sub .mobile-drawer__accordion-toggle{
  background: var(--darker-cream, #EFECE8);
  padding: 14px 20px;
  font-weight: 500;
  color: var(--darkest-green-deep);
}
.mobile-drawer__accordion:last-of-type > .mobile-drawer__accordion-toggle{ border-bottom: none; }
.mobile-drawer__chevron{ display: inline-block; transition: transform .2s ease; }
.mobile-drawer__accordion-toggle[aria-expanded="true"] .mobile-drawer__chevron{ transform: rotate(180deg); }
.mobile-drawer__accordion-panel{ display: flex; flex-direction: column; }
.mobile-drawer__accordion-panel[hidden]{ display: none; }
.mobile-drawer__accordion-panel > a{ padding: 14px 20px; }
.mobile-drawer__accordion-panel > a:last-child{ border-bottom: none; }
.mobile-drawer__accordion-viewall{
  font-weight: 500;
  color: var(--darkest-green-deep);
  border-bottom: 1px solid rgba(34,34,34,.08);
}

.mobile-drawer__footer{ padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); margin-top: 30px; background: var(--darker-cream, #EFECE8); }
.mobile-drawer__footer .btn{ width: 100%; justify-content: space-between; }
body.drawer-open{ overflow: hidden; }

/* ==========================================================================
   Hero — 650px tall, image pinned to the right edge of the 1440 container
   ========================================================================== */
.hero{ background: var(--darker-cream, #EFECE8); }
.hero .container{
  position: relative;
  display: grid;
  grid-template-columns: 55.14fr 44.86fr; /* matches the 794px/646px split at the 1440 reference width */
  align-items: stretch;
  height: 650px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0; /* let hero__media bleed flush to the container's true right edge */
}
.hero__content{
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 650px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding-right: 56px; /* keeps the text off the image edge at every width */
}
.hero__text{
  width: 100%;
  max-width: 634px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 1;
}
.hero__text h1{ margin-bottom: 0; }
.hero__text p{ margin-bottom: 0; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 16px; }
.hero__media{ position: relative; min-width: 0; }
.hero__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1024px){
  .hero .container{
    display: block;
    height: auto;
    padding: 48px var(--container-pad) 0;
  }
  .hero__content{ height: auto; padding-bottom: 32px; padding-right: 0; }
  .hero__media{ width: 100%; height: 320px; }
}
@media (max-width: 768px){
  .hero__content{ gap: 32px; }
}

/* ==========================================================================
   Key Sectors cards — photo + white panel, horizontally-scrollable row
   (the design shows a 4th card peeking at the edge)
   ========================================================================== */
.card-scroll{
  display: flex;
  gap: 25px; /* Figma: row Flow Horizontal, Gap 25px */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  /* Left edge aligns with the container's content edge; right edge is
     freed to bleed toward the viewport edge so the next card peeks -
     matches the reference design instead of stopping flush at 1440.
     Capped at one card-width + gap (~435px): past that point the bleed
     would exceed what's needed to just peek at the next card, and with a
     fixed, small number of cards the row would run out of content,
     leaving dead space and an abrupt cutoff instead of an actual peek. */
  margin-right: calc(-1 * min(max(var(--container-pad), (100vw - var(--container)) / 2 + var(--container-pad)), 435px));
  padding-right: var(--container-pad);
  /* Scrollbar space is reserved at all times (Firefox: always "thin",
     never "none") - only its color fades in on hover, below. Toggling
     the space itself on/off (as this previously did) changes the
     element's box height on hover, which shoves the whole section
     below it down/up - reserving the space keeps the layout stable. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.card-scroll:hover{ scrollbar-color: var(--neutral-lighter) transparent; }
/* Mouse drag-to-scroll (main.js adds .is-draggable when the row overflows).
   Snapping is switched off while dragging so the row follows the pointer. */
@media (hover: hover) and (pointer: fine){
  .card-scroll.is-draggable{ cursor: grab; }
}
.card-scroll.is-dragging{ cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
.card-scroll.is-dragging .key-sector-card{ pointer-events: none; }
/* Same "space always reserved, color fades in" approach for WebKit -
   height stays 6px always, only the thumb's background changes. */
.card-scroll::-webkit-scrollbar{ height: 6px; background: transparent; }
.card-scroll::-webkit-scrollbar-track{ background: transparent; }
.card-scroll::-webkit-scrollbar-thumb{ background: transparent; border-radius: 999px; }
.card-scroll:hover::-webkit-scrollbar-thumb{ background: var(--neutral-lighter); }

/* Card - Figma: 410 x 325 fixed, radius 20. The photo fills the whole
   card; the white content panel is absolutely positioned over it. */
.key-sector-card{
  position: relative;
  flex: 0 0 410px;
  width: 410px;
  height: 325px;
  scroll-snap-align: start;
  display: block;
}
/* Grid-listing context (page-services.php / page-key-sectors.php): same
   card component as the homepage's horizontal-scroll strip, but here it
   needs to fill whatever width its grid column gives it instead of
   staying fixed at 410px. */
.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
}
.card-grid .key-sector-card{ flex: none; width: 100%; }
.key-sector-card__media{
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
}
.key-sector-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.key-sector-card:hover .key-sector-card__media img{ transform: scale(1.04); }

/* Content panel - Figma "Card 2": Fill(370) x Hug(123), radius 10,
   padding 20, gap 24 (between the icon and the text stack - with no
   icon shown by default, that gap doesn't render at all, so 123 = 40
   padding + the text stack's own 83px; on hover the icon appears and
   the gap tightens to 16). The bug this was hiding: the gap was
   previously applied directly between the title and description
   themselves (no wrapper existed), eating space the description
   needed and clipping it. The real fix is the wrapper below
   (.key-sector-card__text), which owns its own tight 4px gap per
   Figma's nested "330 Fill x 83 Hug, gap 4" frame - not changing this
   outer frame's fixed height, which was already correct. */
.key-sector-card__body{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  min-height: 148px;
  padding: 20px;
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}
/* Height is content-driven (min 148px). Description line budget: up to 3
   lines under a 1-line title, up to 2 lines under a 2-line title (the
   .is-title-2 class is set by main.js after measuring the title). The panel
   is anchored to the card's bottom, so it simply grows upward when needed. */
.key-sector-card__text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.key-sector-card__icon{
  display: flex;
  flex: 0 0 auto;
  width: 48px;
  height: 0;
  margin-bottom: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--lightest-green);
  color: var(--darkest-green);
  transition: height .3s ease, margin-bottom .3s ease, opacity .3s ease;
}
.key-sector-card__icon svg{ width: 20px; height: 20px; }
.key-sector-card:hover .key-sector-card__icon{ height: 48px; margin-bottom: 16px; opacity: 1; }
.key-sector-card__body h5{
  transition: color .25s ease;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.key-sector-card:hover .key-sector-card__body h5{ color: var(--darkest-green); }
.key-sector-card__body p{
  font-size: var(--fs-body-sm); margin: 0; color: var(--neutral-dark);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.key-sector-card.is-title-2 .key-sector-card__body p{ -webkit-line-clamp: 2; line-clamp: 2; }
@media (max-width: 1024px){
  .card-scroll{
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-right: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .key-sector-card{ flex-basis: auto; width: 100%; height: 320px; }
}
@media (max-width: 768px){
  .key-sector-card{ height: 251px; }
}

@media (max-width: 900px){
  .home #key--sectors { display: none; }
}

/* ==========================================================================
   About section - from the Figma "About Us" frames.
   Desktop (>=1200px): 1280px of content = 681px media block + 80px gap +
   519px text column. The photo is 550 x 518 with a 20px radius and the two
   feature cards start 299px in, so they overlap the photo's right side and
   run out to the edge of the 681px block. Everything is a percentage of that
   block so it scales down with the viewport.
   Below 1200px the section stacks: text, then photo, then the cards.
   ========================================================================== */
/* The section above already has 96px of bottom padding; +16px = the 112px
   gap in Figma. Bottom padding is 112px (56px on small screens, like every
   other section). */
.section--about{ padding-top: 16px; padding-bottom: 112px; }
@media (max-width: 900px){ .section--about{ padding-top: 56px; padding-bottom: 56px; } }
.about-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.about-grid__content{
  order: -1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 24px;
}
.about-grid__content h2{ margin: 0; }
.about-grid__content .entry-content{ color: var(--neutral-darker); }
.about-grid__content .entry-content p{ color: inherit; }
.about-grid__content .entry-content p:last-child{ margin-bottom: 0; }
.about-grid__content .btn{ margin-top: 8px; }

.about-grid__media{ position: relative; }
.about-grid__media img{
  width: 100%;
  aspect-ratio: 343 / 324;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
.about-feature-list{
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 16px;
}
.about-feature{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.about-feature__icon{
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--light-green);
  display: flex; align-items: center; justify-content: center;
  color: var(--darkest-green);
}
/* Icon drawings come straight from the Figma vectors (certificate 40px frame,
   globe 32px frame); on mobile they're drawn at about 83% of that. */
.about-feature__icon .ea-icon--certificate{ width: 33px; height: 33px; }
.about-feature__icon .ea-icon--globe{ width: 27px; height: 27px; }
.about-feature__text{ display: flex; flex-direction: column; gap: 8px; }
.about-feature p{ margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--black); }

/* Tablet: photo gets a landscape crop and the cards sit side by side. */
@media (min-width: 601px) and (max-width: 1199px){
  .about-grid__media img{ aspect-ratio: 2 / 1; }
  .about-feature-list{ flex-direction: row; gap: 20px; }
  .about-feature{ flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1200px){
  .about-grid{ grid-template-columns: minmax(0, 681fr) minmax(0, 519fr); gap: 80px; }
  .about-grid__content{ order: 0; gap: 40px; }
  .about-grid__content .btn{ margin-top: 0; }
  .about-grid__content h2{ font-size: var(--fs-h2); line-height: var(--lh-h2); }
  .about-grid__media img{ width: 80.76%; aspect-ratio: 550 / 518; }
  .about-feature-list{
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    width: 56.1%;
    margin-top: 0;
    gap: 20px;
  }
  .about-feature{ padding: 28px 24px; gap: 24px; }
  .about-feature__icon{ width: 72px; height: 72px; }
  .about-feature__icon .ea-icon--certificate{ width: 40px; height: 40px; }
  .about-feature__icon .ea-icon--globe{ width: 32px; height: 32px; }
}

/* ==========================================================================
   Blog teaser - the featured image has a real notch cut out of its bottom-
   right corner (an image mask, not an overlay), and the circular arrow badge
   sits inside that notch. Whatever is behind the card shows through the gap.
   ========================================================================== */
.card-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap);
}
/* Content Card (blog/resource): the entire card is a single click target
   (title, image and description all navigate together), per Patterns &
   Behavior. */
.blog-card{ display: flex; flex-direction: column; }
.blog-card__link{ display: flex; flex-direction: column; height: 100%; gap: 8px; }
.blog-card__media{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;
}
.blog-card__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 410 / 283.013916015625;
  object-fit: cover;
}
@media (max-width: 1024px){ .card-row{ grid-template-columns: 1fr; } }
@media (max-width: 768px){ .blog-card__media img{ aspect-ratio: 341.1280212402344 / 245; } }

/* Notched variant. The notch is a fixed 93 x 93px pocket so it stays the same
   size at every card width. It is 14px larger than the 79px badge in each
   direction, which leaves an even 7px ring of background around the badge (the
   inner corner is concentric with the badge). The 113 x 109 mask shape below
   is that pocket plus the small rounded flares where it meets the right and
   bottom edges. If you change --notch-w / --notch-h, redraw the
   mask path to match. The wrapper must NOT clip (overflow: visible) or the
   badge would be cut off; the corner radius lives on the image instead. */
.blog-card__media--notch{
  --notch-w: 93px;
  --notch-h: 93px;
  --notch-badge: 79px;   /* badge diameter from Figma */
  display: block;
  overflow: visible;
  border-radius: 0;
}
.blog-card__media--notch img{
  /* Outer corner radius measured from the Figma vector (the --radius-lg token is 20px). The bottom-right corner is 0 on purpose: the notch mask removes that corner entirely, and leaving a radius there let a faint hairline arc of the rounded clip show through at the card's bottom-right. */
  border-radius: 16px 16px 0 16px;
  /* Solid layer minus the notch shape (anchored bottom-right). */
  -webkit-mask-image:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113' height='109' viewBox='0 0 113 109'%3E%3Cpath d='M0 109A20 20 0 0 0 20 89V62.5A46.5 46.5 0 0 1 66.5 16H97A16 16 0 0 0 113 0V109Z'/%3E%3C/svg%3E");
          mask-image:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113' height='109' viewBox='0 0 113 109'%3E%3Cpath d='M0 109A20 20 0 0 0 20 89V62.5A46.5 46.5 0 0 1 66.5 16H97A16 16 0 0 0 113 0V109Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%, 113px 109px;
          mask-size: 100% 100%, 113px 109px;
  -webkit-mask-position: 0 0, 100% 100%;
          mask-position: 0 0, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
}
/* Badge: fills the notch, centred in the pocket. */
.blog-card__notch{
  position: absolute;
  right: calc((var(--notch-w) - var(--notch-badge)) / 2);
  bottom: calc((var(--notch-h) - var(--notch-badge)) / 2);
  width: var(--notch-badge); height: var(--notch-badge);
  border-radius: 50%;
  background: var(--mid-green);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.blog-card__link:hover .blog-card__notch,
.blog-card__media:hover .blog-card__notch{ background: var(--darkest-green); }
.blog-card__arrow{ width: 48px; height: 48px; color: var(--darkest-green); transition: color .15s ease; }
/* Hairline arrow to match the Figma badge (the shared icon's 1.8 stroke is too heavy at this size). */
.blog-card__arrow svg{ width: 100%; height: 100%; stroke-width: 1.05; stroke-linecap: butt; stroke-linejoin: miter; }
.blog-card__link:hover .blog-card__arrow,
.blog-card__media:hover .blog-card__arrow{ color: var(--white); }
.blog-card h5{ color: var(--darkest-green); }
.blog-card > p, .blog-card__link p{ font-size: var(--fs-body-sm); margin-bottom: 0; }
.blog-card__meta{ display: flex; gap: var(--space-sm); font-family: var(--font-heading); font-size: var(--fs-tagline-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--darkest-green-deep); margin-top: auto; }
.blog-card__meta span{ background: var(--light-green); padding: 4px 12px; border-radius: var(--radius-sm); }

/* ==========================================================================
   Contact / Get in Touch — genuinely full-bleed, no outer container/padding
   ========================================================================== */
.contact-section{
  display: grid;
  grid-template-columns: 1fr;
  min-height: 605px;
}
@media (min-width: 1024px){ .contact-section{ grid-template-columns: 646fr 794fr; } }
.contact-section__info{
  background: var(--darkest-green);
  color: var(--white);
  padding-top: 128px;
  padding-bottom: 128px;
  padding-right: var(--container-pad);
  /* Left edge aligns with the site's centered 1440px container, even
     though this section itself is intentionally full-bleed. */
  padding-left: max(var(--container-pad), calc((100vw - var(--container)) / 2 + var(--container-pad)));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.contact-section__info h2{ color: var(--white); margin: 0; }
.contact-section__info p{ color: rgba(255,255,255,.9); margin: 0; }
.contact-section__tel{ color: inherit; text-decoration: none; }
.contact-section__tel:hover, .contact-section__tel:focus-visible{ text-decoration: underline; text-underline-offset: 3px; }
/* Figma nested frame: Fill(486) x Hug(260), gap 32 - heading, paragraph
   and the address/phone rows as one group, 32px apart; the buttons
   below are a separate group, not part of this gap rhythm. Explicit
   486px width per the Figma frame - now correctly fits, since the
   grid ratio above gives this column exactly 486px of content
   (646px column - 80px padding x 2), matching what two fixed-235px
   buttons + 16px gap need as well. */
.contact-section__intro{ display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 486px; margin-bottom: 40px; }
.contact-section__rows{ display: flex; flex-direction: column; gap: 16px; }
.contact-section__row{ display: flex; align-items: center; gap: 16px; }
.contact-section__row .icon-circle{
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.contact-section__row .icon-circle svg{ width: 20px; height: 20px; color: var(--white); }
.contact-section__row span{ color: var(--white); }
/* wrap, not nowrap: the two fixed-235px buttons + 16px gap need 486px,
   which only fits at the 1440px desktop design width (where the column
   is sized to match exactly). Below that - and definitely on mobile,
   where .contact-section__intro's own max-width is nowhere near 486px -
   nowrap has nothing to fall back on and forces the row past the
   viewport instead of stacking. This was the actual remaining overflow
   source on this page. */
.contact-section__actions{ display: flex; gap: 16px; flex-wrap: wrap; }
@media (min-width: 1024px){ .contact-section__actions{ flex-wrap: nowrap; } }
.contact-section__info .btn-primary{ background: var(--white); color: var(--darkest-green-deep); }
.contact-section__info .btn-primary:hover{ background: #EFEFE9; color: var(--darkest-green-deep); }
.contact-section__info .btn-outline{ border-color: var(--white); color: var(--white); }   /* = Light Outline */
.contact-section__info .btn-outline:hover{ background: transparent; border-color: var(--light-green); color: var(--white); }
.contact-section__map{ position: relative; background: #E7E5DE; }
.contact-section__map iframe{ width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.ea-styled-map{ width: 100%; height: 100%; min-height: 320px; }
@media (max-width: 1024px){ .contact-section__map{ min-height: 320px; } }
/* Only the vertical padding changes here for the stacked layout - the
   horizontal padding stays on var(--container-pad) so it tracks the same
   80px / 24px (@900px) / 16px (@600px) tiers every other section uses,
   instead of jumping straight to the mobile 16px value at 1024px while
   everything else is still at 80px. */
@media (max-width: 1024px){
  .contact-section__info{ padding-top: 64px; padding-bottom: 64px; padding-left: var(--container-pad); padding-right: var(--container-pad); }
}

/* ==========================================================================
   Generic page / archive / single content
   ========================================================================== */
.page-header{ background: var(--body); padding: 48px 0 0; }
/* Pages that open with .page-header instead of the homepage hero (Services,
   Key Sectors, single posts, archives, etc.) sit closer to their first section
   than a hero does, so that section gets 50px of padding instead of the
   standard .section rhythm (96px desktop / 56px mobile), and shares
   .page-header's own background so the two don't visibly seam where they
   meet. Targeting it via the adjacent-sibling selector means every current
   and future page-header template gets this automatically, with no extra
   class to remember. */
.page-header + .section{ padding: 50px 0; background: var(--body); }
.entry-content{ max-width: 736px; overflow-wrap: break-word; }   /* Figma "default" text column; no auto margin, so it stays left-aligned inside .container. overflow-wrap guards against pasted content (long URLs, non-breaking spaces from Word/Docs paste) that would otherwise refuse to break and push the box wider than its container. */
body.single-post .entry-content{ max-width: 1000px; }   /* Blog posts only (single.php); other templates keep the 736px column. */
/* Safety net for pasted/editorial content that doesn't respect its container.
   This has to target every descendant, not just direct children: a video
   embed is normally wrapped in a figure (<figure class="wp-block-embed">
   <div class="wp-block-embed__wrapper"><iframe width="560">), so a
   direct-child-only rule caps the figure but not the iframe two levels
   in, which still renders at its native pixel width and overflows the
   page. Table/iframe/pre get their own rules below because capping their
   max-width alone just squashes them (or does nothing, since HTML width=
   attributes and iframe's replaced-element sizing both ignore a plain
   max-width) - they need to scroll internally instead. */
.entry-content *{ max-width: 100%; }
.entry-content table{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;   /* border itself removed - the th/td borders below already form the outer edge, since collapse merges adjoining cell borders into one shared line */
}
/* Generic: styles th/td regardless of whether a given table uses real
   <th> cells or (like content pasted from Word/Docs) just <td><strong>
   inside a <thead> - both patterns end up looking the same either way. */
.entry-content th,
.entry-content td{
  border: 1px solid var(--neutral-lighter);
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-body-sm);
  color: var(--neutral-dark);
}
.entry-content th,
.entry-content thead td{ color: var(--neutral-darker); font-weight: 600; }
.entry-content table ul{ margin: 0; padding-left: 20px; }
.entry-content table ul li{ margin-bottom: 8px; }
.entry-content table ul li:last-child{ margin-bottom: 0; }
.entry-content iframe, .entry-content embed, .entry-content object, .entry-content video{
  max-width: 100%;
  width: 100%;   /* overrides an oEmbed's hardcoded width="560" attribute */
  aspect-ratio: 16 / 9;  /* iframes (unlike img/video) have no true intrinsic ratio for the browser to auto-derive from their width/height attributes, so height:auto alone collapses to the ~150px default iframe height instead of scaling proportionally - 16:9 covers the vast majority of video embeds (YouTube, Vimeo, etc. all default to it) */
  height: auto;
}
.entry-content video{ aspect-ratio: auto; }  /* <video> DOES have a real intrinsic ratio from its own source file - let it use that instead of forcing 16:9 */
.entry-content pre, .entry-content code{ overflow-x: auto; white-space: pre-wrap; overflow-wrap: break-word; }
.entry-content img{ margin: 16px 0; }
.entry-content h2, .entry-content h3, .entry-content h4{ margin-top: 40px; margin-bottom: 16px; }
.entry-content > *:first-child{ margin-top: 0; }
/* WordPress core image alignment (set via the editor's own align
   controls): left/right floats the image so paragraph text wraps
   around it; center stays block-level with auto margins. */
.entry-content .alignleft{ float: left; margin: 8px 24px 16px 0; }
.entry-content .alignright{ float: right; margin: 8px 0 16px 24px; }
.entry-content .aligncenter{ display: block; margin-left: auto; margin-right: auto; float: none; }
/* The sitewide `ul{ list-style:none }` reset (for nav/card lists) also
   strips bullets from editor content - restore normal list styling here. */
/* Links written inside page/post content: same green as the nav menu,
   underlined so they read as links. Only plain editor links (no class) -
   buttons, cards and download tiles keep their own styling. */
.entry-content a:not([class]){
  color: var(--darkest-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.entry-content a:not([class]):hover,
.entry-content a:not([class]):focus-visible{
  color: var(--darkest-green-deep);
  text-decoration-thickness: 2px;
}
.entry-content ul{ list-style: disc; padding-left: 1.5em; margin: 0 0 16px; }
.entry-content ol{ list-style: decimal; padding-left: 1.5em; margin: 0 0 16px; }
.entry-content li{ margin-bottom: 8px; }
.entry-content li:last-child{ margin-bottom: 0; }
.entry-content ul ul, .entry-content ol ol, .entry-content ul ol, .entry-content ol ul{ margin: 8px 0 0; }
.archive-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: var(--gap);
}
/* Blog specifically wants a fixed 3-up grid (Figma), rather than
   auto-fit's variable column count on very wide screens. */
.archive-grid--blog{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px){ .archive-grid--blog{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .archive-grid--blog{ grid-template-columns: 1fr; } }

/* Search results page (search.php) */
.search-header__count{ margin: 8px 0 0; }
.search-header__form{ display: flex; align-items: center; gap: var(--space-md); width: 100%; margin-top: 24px; }
.search-header__form .search-panel__input{ flex: 1 1 auto; width: 100%; }
.search-header__form .btn{ flex: 0 0 auto; }
.search-header__form .search-panel__input{ border-bottom-color: var(--neutral-light); }
@media (max-width: 640px){ .search-header__form .btn{ display: none; } }
.search-card__type{ font-family: var(--font-heading); font-size: var(--fs-tagline-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--neutral-dark); }
.search-empty{ max-width: 736px; }

.pagination{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; }
.pagination__prev, .pagination__next{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: var(--fs-body-sm);
  color: var(--darkest-green-deep);
}
.pagination__prev--disabled, .pagination__next--disabled{ opacity: .4; }
.pagination__arrow{ width: 16px; height: 16px; display: block; }
.pagination__arrow svg{ width: 100%; height: 100%; }
.pagination__arrow--prev{ transform: scaleX(-1); } /* reuses the same right-pointing arrow icon, flipped */
.pagination__numbers{ display: flex; align-items: center; gap: 4px; }
.pagination__numbers .page-numbers{
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 4px;
  border-radius: 50%;
  font-family: var(--font-heading); font-size: var(--fs-body-sm);
  color: var(--neutral-dark);
}
.pagination__numbers .page-numbers.current{ background: var(--light-green); color: var(--darkest-green-deep); }
.pagination__numbers .page-numbers.dots{ color: var(--neutral-dark); }

/* ==========================================================================
   Single Service page - two-column body (content + sidebar), sidebar link
   list panel, and the reusable newsletter box beneath it.
   ========================================================================== */
.service-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
/* Every direct child of a CSS Grid defaults to min-width:auto, which lets
   its own content's natural width override the grid track's width -
   without this, .service-box (its flex row + icon) or a long line inside
   the article can silently push wider than the single mobile column and
   overflow the viewport. This is independent of the grid-template-areas
   reflow below; both are needed. */
.service-layout > *{ min-width: 0; }
/* Mobile: no grid-template-areas needed at all - the three children
   (service-box, main article, newsletter-box) are already in this exact
   visual order in the DOM (see single-service.php / single-key_sector.php),
   so a plain single column just stacks them correctly with zero extra
   CSS. Desktop rearranges the same three siblings into two columns
   purely through named areas. This replaces an earlier display:contents
   + order approach, which had inconsistent cross-browser grid behavior
   (notably Safari) and was the actual source of a mobile horizontal
   overflow bug - content pushed past the viewport instead of wrapping. */
@media (min-width: 1024px){
  .service-layout{
    grid-template-columns: 2fr 1fr;
    /* `auto 1fr` (not the default `auto auto`) is the key part of this
       fix: with two auto rows, CSS Grid's spanning-item algorithm forces
       BOTH rows to grow to jointly match .service-layout__main's full
       height, splitting the extra space between them - which shows up
       as a large gap between service-box and newsletter-box instead of
       the two sitting right after each other. Making row 2 `1fr` gives
       it all of that forced extra growth instead, so row 1 stays sized
       to service-box's own content and newsletter-box starts right
       after it; any leftover space (whenever main is taller than
       service-box + newsletter-box combined) lands invisibly below
       newsletter-box instead of between the two boxes. */
    grid-template-rows: auto 1fr;
    row-gap: 24px;
    column-gap: 48px;
    grid-template-areas: "main box" "main newsletter";
  }
  .service-layout__main{ grid-area: main; }
  .service-box{ grid-area: box; }
  .newsletter-box{ grid-area: newsletter; align-self: start; }
}

.service-box{ background: var(--darker-cream, #EFECE8); border-radius: 0; padding: 32px 24px; }
.service-box--key-sectors{ background: var(--lightest-green); }
.service-box h4{ margin-bottom: 20px; }
.service-box__list{ list-style: none; margin: 0; padding: 0; }
.service-box__list li{ border-top: 1px solid rgba(34,34,34,.1); }
.service-box__list li:first-child{ border-top: none; }
.service-box__list a{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: 16px 0;
  color: var(--neutral-darker);
  font-size: var(--fs-body-sm);
}
.service-box__list a:hover{ color: var(--darkest-green); }
.service-box__list a .arrow{ opacity: .6; flex-shrink: 0; }
.service-box__list a .arrow .ea-icon--arrow-right{ width: 16px; height: 16px; display: block; }

.newsletter-box{
  background: var(--darker-green, #9AA78E);
  color: var(--white);
  border-radius: 0;
  width: 100%;
  max-width: 412px; /* was width:412px + max-width:100% - backwards for a
    grid item: that pattern can fail to resolve correctly in some
    browsers/grid contexts (the actual mobile overflow cause), since it
    tells the box to prefer 412px and only shrink if forced, rather than
    fill-then-cap. width:100% + max-width:412px is the reliable order. */
  min-height: 400px; /* Figma says Height 400, but a fixed height risks
    clipping the Gravity Forms embed's own validation/error states, so
    this is a floor, not a cap - same reasoning as the key-sector-card fix. */
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 24px 40px;
}
.newsletter-box h4{ color: var(--white); margin: 0; }
.newsletter-box p{ color: var(--light-green); margin: 0; }
.newsletter-box__form{ display: flex; flex-direction: column; gap: 20px; }
.newsletter-box .form-field{ margin-bottom: 0; }
.newsletter-box .form-field label{ color: var(--white); }
.newsletter-box .form-field label .required{ color: var(--light-green); }
.newsletter-box .form-field input{ border-bottom-color: rgba(255,255,255,.4); color: var(--white); }
.newsletter-box .form-field input::placeholder{ color: rgba(255,255,255,.65); }
.newsletter-box .form-field input:focus{ border-bottom-color: var(--white); }
/* Screenshot spec: filled white pill (not the outline style used
   elsewhere on green backgrounds), full-width so "Subscribe" and the
   arrow sit at opposite edges - same override pattern as
   .contact-section__info .btn-primary above. */
.newsletter-box .btn-primary{ background: var(--white); color: var(--darkest-green-deep); }
.newsletter-box .btn-primary:hover{ background: var(--light-green, #DAE0D5); color: var(--darkest-green-deep); }

/* Gravity Forms embed: GF ships its own layout/box styling (bordered
   boxed inputs, its own label/legend markup) which doesn't match the
   theme's underline-style fields or this box's dark green background.
   !important throughout because GF's own stylesheet is loaded after
   ours and its selectors are often equally or more specific. */
.newsletter-box__form--gravity .gform_wrapper{ margin: 0 !important; width: 100% !important; max-width: 100% !important; color: var(--white) !important; }
.newsletter-box__form--gravity .gform_wrapper form,
.newsletter-box__form--gravity .gform_body,
.newsletter-box__form--gravity .gform_fields{ width: 100% !important; max-width: 100% !important; }
/* Catch-all, same pattern already used for .entry-content: GF's own
   stylesheet can set a fixed px width on almost any inner element
   depending on form/field configuration (a specific field's "Custom
   CSS Class", a legacy table-based layout, a select's default size
   attribute, etc.) - each one is a potential mobile overflow source
   we can't fully predict from outside the GF admin. This is the actual
   fix for the width overflow on the Service/Key Sector single pages:
   the 412px-wide (mobile: 100%-wide, but still fairly narrow) sidebar
   box is exactly the kind of tight container where a GF field wider
   than its column becomes a page-wide horizontal scrollbar. */
.newsletter-box__form--gravity, .newsletter-box__form--gravity *{ box-sizing: border-box !important; max-width: 100% !important; }
.newsletter-box__form--gravity table{ display: block !important; width: 100% !important; }
.newsletter-box__form--gravity select{ width: 100% !important; }
.newsletter-box__form--gravity .gform_required_legend{ display: none !important; }
.newsletter-box__form--gravity .gform_heading,
.newsletter-box__form--gravity .gform_description{ color: var(--white) !important; }

.newsletter-box__form--gravity .gfield{ margin: 0 0 20px !important; }
.newsletter-box__form--gravity .gfield_label,
.newsletter-box__form--gravity label.gfield_label,
.newsletter-box__form--gravity legend.gfield_label{
  display: block !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: 400 !important;
  margin: 0 0 4px !important;
}
.newsletter-box__form--gravity .gfield_required,
.newsletter-box__form--gravity .gfield_required_asterisk{ color: var(--light-green) !important; }

.newsletter-box__form--gravity .ginput_container{ margin-top: 0 !important; }
.newsletter-box__form--gravity input[type="text"],
.newsletter-box__form--gravity input[type="email"],
.newsletter-box__form--gravity input[type="tel"],
.newsletter-box__form--gravity input[type="url"],
.newsletter-box__form--gravity input[type="number"],
.newsletter-box__form--gravity textarea,
.newsletter-box__form--gravity select{
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
}
.newsletter-box__form--gravity input::placeholder,
.newsletter-box__form--gravity textarea::placeholder{ color: rgba(255,255,255,.65) !important; opacity: 1 !important; }
.newsletter-box__form--gravity input:focus,
.newsletter-box__form--gravity textarea:focus,
.newsletter-box__form--gravity select:focus{ border-bottom-color: var(--white) !important; outline: none !important; }

.newsletter-box__form--gravity .gform_footer,
.newsletter-box__form--gravity .gform_page_footer{
  margin: 20px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
}
/* width intentionally NOT forced here - Gravity Forms' own "Button >
   Width" setting (Fill Container / Auto) controls this; forcing
   width:auto here previously fought that setting and silently ignored
   whatever was chosen in the form editor. */
.newsletter-box__form--gravity .gform_footer input[type="submit"],
.newsletter-box__form--gravity .gform_button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* was: center - label sits left, arrow at the right edge */
  text-align: left !important; /* input[type=submit]'s value text isn't a flex child, so this (not justify-content) is what actually moves it */
  background: var(--white) !important;
  color: var(--darkest-green-deep) !important;
  border-radius: var(--radius-full) !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  font-size: var(--fs-body) !important;
  padding: 12px 48px 12px 24px !important; /* extra right padding clears the arrow icon below */
  cursor: pointer;
  /* Arrow icon: an <input type="submit"> can't take a ::after pseudo-element
     or a real <?php ea_icon() ?> child like the plain-form button gets, so
     it's painted as a background image instead - same path as icons.php's
     'arrow-button', with the stroke colour hardcoded to match the text
     colour above since a background image can't inherit currentColor. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235F7050' stroke-width='1.5'%3E%3Cpath d='M0 11.5 10.75 0.75M3.25 0.75H10.75V8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 24px center !important;
  background-size: 12px 12px !important;
  transition: background-color .15s ease !important;
}
.newsletter-box__form--gravity .gform_footer input[type="submit"]:hover,
.newsletter-box__form--gravity .gform_button:hover{
  background-color: var(--light-green, #DAE0D5) !important;
}
.newsletter-box__form--gravity .validation_error,
.newsletter-box__form--gravity .gfield_description.validation_message{ color: #FFD1D1 !important; }

/* ==========================================================================
   Form fields, checkbox, upload button & accordion
   From Components -- Cards & Form Fields / Interactive Elements. Not yet
   wired into a template (the site has no form pages today) but provided
   as ready-to-use, on-brand classes for the next form/FAQ page built.
   ========================================================================== */

/* Text Input (single line) / Text Field (multi-line) - "Variant 2, neutral
   border": label above, underline-only field, no box. */
.form-field{ display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.form-field label{
  font-family: var(--font-heading);
  font-size: var(--fs-tagline-md);
  color: var(--neutral-dark);
}
.form-field label .required{ color: var(--darkest-green); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea{
  border: none;
  border-bottom: 1px solid var(--neutral-lighter);
  background: transparent;
  padding: var(--space-sm) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--neutral-darker);
  outline: none;
  transition: border-color .15s ease;
}
.form-field textarea{ resize: vertical; min-height: 96px; }
.form-field input:focus,
.form-field textarea:focus{ border-color: var(--darkest-green); }

/* Checkbox */
.form-checkbox{ display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; font-size: var(--fs-body-sm); color: var(--neutral-darker); }
.form-checkbox input[type="checkbox"]{
  appearance: none;
  width: 20px; height: 20px;
  border: 1px solid var(--neutral-lighter);
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.form-checkbox input[type="checkbox"]:checked{
  background: var(--darkest-green);
  border-color: var(--darkest-green);
}
.form-checkbox input[type="checkbox"]:checked::after{
  content: '';
  width: 5px; height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px,-1px);
}

/* Upload / "Browse" button - filled darkest-green, lightens on hover */
.btn-upload{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--darkest-green);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  border: none;
  transition: background-color .15s ease;
}
.btn-upload:hover{ background: var(--light-green); }

/* Accordion (mobile nav Level 2 sub-items / FAQ pattern). Expanded
   content should mirror the equivalent desktop mega-menu copy for that
   section - no separate mobile-only text, per Patterns & Behavior. */
.accordion-item{ border-bottom: 1px solid var(--neutral-lighter); }
.accordion-item__trigger{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  background: none; border: none; text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--neutral-darker);
}
.accordion-item__icon{ flex: 0 0 auto; color: var(--darkest-green); }
.accordion-item__panel{ padding: 0 0 var(--space-lg); color: var(--neutral-dark); font-size: var(--fs-body-sm); }
.accordion-item__panel[hidden]{ display: none; }
.accordion-item__open-link{ display: inline-block; margin-top: var(--space-sm); color: var(--darkest-green); font-family: var(--font-heading); font-size: var(--fs-tagline-md); border-top: 1px solid var(--neutral-lighter); padding-top: var(--space-sm); }

/* ==========================================================================
   Footer — minimal: logo left, copyright right
   ========================================================================== */
.site-footer{ background: var(--neutral-lightest); padding: 28px 0; }
.footer-bottom{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
  font-size: var(--fs-body-sm); color: var(--neutral-darker);
}
.footer-bottom .site-logo{ margin: 0; }
.footer-bottom .site-logo img{ height: 48px; width: auto; max-width: 119px; }
/* Extra footer content (widgets/menus) is supported but hidden by default
   to match the approved design; remove [hidden] below if you add columns. */
.footer-grid[hidden]{ display: none; }
.footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 32px;
}
@media (min-width: 768px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid a{ color: var(--neutral-dark); display:block; padding: 5px 0; }
.footer-grid a:hover{ color: var(--neutral-darker); }
.social-links{ display: flex; gap: 12px; }
.social-links a{ width: 34px; height:34px; border-radius:50%; border:1px solid var(--neutral-lighter); display:flex; align-items:center; justify-content:center; }

/* ==========================================================================
   FAQ accordion, Designer Info extras, current item in sidebar lists
   (template_faq.php, taxonomy-faq_category.php, single-faq.php,
   template_designerinfo.php, single-designer-info.php)
   ========================================================================== */
.service-box__list li.is-current > a{ font-weight: 600; color: var(--darkest-green); }

.faq-intro{ margin-bottom: 40px; }
.faq-group{ margin-bottom: 48px; }
.faq-group:last-child{ margin-bottom: 0; }
.faq-group > h3{ margin-bottom: 16px; }
.faq-item{ border-bottom: 1px solid var(--neutral-lighter); }
.faq-group .faq-item:first-of-type{ border-top: 1px solid var(--neutral-lighter); }
.faq-item__question{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--neutral-darker);
}
.faq-item__question::-webkit-details-marker{ display: none; }
.faq-item__question::after{
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--darkest-green);
  border-bottom: 2px solid var(--darkest-green);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform .2s ease;
}
.faq-item[open] > .faq-item__question::after{ transform: rotate(-135deg); margin-top: 4px; }
.faq-item__question:hover{ color: var(--darkest-green); }
.faq-item__question:focus-visible{ outline: 2px solid var(--darkest-green); outline-offset: 2px; }
.faq-item__answer{ padding: 0 0 24px; color: var(--neutral-dark); }
.faq-item__more{ color: var(--darkest-green); text-decoration: underline; }

/* Designer Info card grid inside the 2/3 main column: two cards across
   instead of the full-width 320px auto-fit. */
.card-grid--in-layout{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.designer-info__image{ margin-bottom: 32px; }
.designer-info__image img{ width: 100%; height: auto; display: block; }
.cad-details{ margin-top: 40px; }
.cad-details__group{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin-bottom: 40px; }
.cad-details__group > h3{ grid-column: 1 / -1; margin: 0; }
.cad-details__item{ margin: 0; }
.cad-details__item img{ max-width: 100%; height: auto; display: block; }
.cad-details__item ul{ list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.cad-details__item li{ margin: 0; padding: 0; }
@media (max-width: 900px){ .cad-details__group{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px){ .cad-details__group{ grid-template-columns: 1fr; } }
.cad-details__item a{ color: var(--darkest-green); text-decoration: underline; }

/* ==========================================================================
   Team page (template_team.php, inc/team-meta-box.php)
   Member name = h3, section headings = h5 (sizes come from the global
   heading scale; only colour/spacing are set here).
   ========================================================================== */
.team-page__intro{ margin-bottom: 48px; }
.team-member{ max-width: 736px; margin-bottom: 72px; }
.team-member:last-child{ margin-bottom: 0; }
.team-member__head{ display: flex; align-items: flex-start; gap: 32px; margin-bottom: 28px; }
.team-member__photo{ flex: 0 0 150px; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--lightest-green); }
.team-member__photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.team-member__intro{ min-width: 0; padding-top: 8px; }
.team-member__name{ color: var(--darkest-green); margin: 0 0 8px; }
h1.team-member__name{ font-size: var(--fs-h3); line-height: var(--lh-h3); }  /* H1 for semantics when it replaces the hidden page title; same look as the H3 */
.team-member__intro p{ margin: 0; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--neutral-darker); }
.team-member__intro .team-member__role{ font-weight: 600; margin-bottom: 4px; }
.team-member__bio p{ font-size: var(--fs-body-sm); }
.team-member__section{ margin-top: 28px; }
.team-member__section h5{ color: var(--darkest-green); margin: 0 0 12px; }
.team-member__section ul{ margin: 0; padding-left: 20px; list-style: disc; }
.team-member__section li{ font-size: var(--fs-body-sm); line-height: 1.5; color: var(--neutral-darker); margin-bottom: 6px; }
@media (max-width: 600px){
  .team-member__head{ flex-direction: column; gap: 16px; }
  .team-member__intro{ padding-top: 0; }
  .team-member{ margin-bottom: 48px; }
}

/* ==========================================================================
   Gravity Forms pages (template_contact.php, template_fee_request.php,
   inc/gravity-form-pages.php). Scoped to .ea-form so the newsletter form
   keeps its own styling. Targets GF's legacy markup; !important only where
   GF's own stylesheet (loaded after this one) would otherwise win.
   ========================================================================== */
.form-page__intro{ max-width: 736px; margin-bottom: 32px; }
.ea-form{ max-width: 736px; }
.ea-form__notice{ padding: 12px 16px; background: var(--lightest-green); color: var(--neutral-darker); font-size: var(--fs-body-sm); }
.ea-form .gform_wrapper{ margin: 0 !important; width: 100% !important; max-width: 100% !important; font-family: var(--font-body); color: var(--neutral-darker); }
.ea-form .gform_wrapper, .ea-form .gform_wrapper *{ box-sizing: border-box; }
.ea-form .gform_heading, .ea-form .gform_required_legend{ display: none !important; }

/* Progress bar: "Step 2 of 3" + slim bar */
.ea-form .gf_progressbar_wrapper{ margin: 0 0 32px; }
.ea-form .gf_progressbar_title{ margin: 0 0 8px; font: 400 var(--fs-body-xs)/1.5 var(--font-body); color: var(--neutral-darker); }
.ea-form .gf_progressbar{ height: 8px !important; padding: 0 !important; border: 0 !important; border-radius: 4px; background: var(--light-green) !important; box-shadow: none !important; overflow: hidden; }
.ea-form .gf_progressbar_percentage{ height: 8px !important; padding: 0 !important; border-radius: 4px; background: var(--darkest-green) !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; overflow: hidden; }
.ea-form .gf_progressbar_percentage span{ display: none !important; }

/* Field grid: full width by default, half classes sit side by side */
.ea-form .gform_wrapper .gform_fields{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 24px !important; row-gap: 32px !important; list-style: none; margin: 0 !important; padding: 0 !important; }
.ea-form .gform_wrapper .gform_fields > .gfield{ grid-column: 1 / -1 !important; float: none !important; clear: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.ea-form .gform_wrapper .gform_fields > .gfield.gf_left_half,
.ea-form .gform_wrapper .gform_fields > .gfield.gf_right_half,
.ea-form .gform_wrapper .gform_fields > .gfield.gf_first_half,
.ea-form .gform_wrapper .gform_fields > .gfield.gf_second_half,
.ea-form .gform_wrapper .gform_fields > .gfield.gfield--width-half{ grid-column: span 1 !important; }

/* Labels */
.ea-form .gfield_label, .ea-form legend.gfield_label{ display: block; margin: 0 0 4px !important; padding: 0 !important; font: 400 var(--fs-body-sm)/1.5 var(--font-body) !important; color: var(--darkest-green) !important; }
.ea-form .gfield_required, .ea-form .gfield_required_asterisk, .ea-form .gfield_required_text{ margin-left: 4px; color: var(--darkest-green) !important; font-style: normal; font-size: inherit; }
.ea-form .gfield_description{ margin: 0 0 8px; padding: 0; font-size: var(--fs-body-xs); line-height: 1.5; color: var(--neutral-dark); }
.ea-form .ginput_container{ margin: 0 !important; }
.ea-form .gfield_html h1, .ea-form .gfield_html h2, .ea-form .gfield_html h3, .ea-form .gfield_html h4, .ea-form .gfield_html h5, .ea-form .gfield_html h6{ margin: 0 0 8px; color: var(--darkest-green); }
.ea-form .gfield_html p{ margin: 0; font-size: var(--fs-body-xs); line-height: 1.5; }

/* Underline-style inputs */
.ea-form input[type="text"], .ea-form input[type="email"], .ea-form input[type="tel"], .ea-form input[type="url"],
.ea-form input[type="number"], .ea-form input[type="password"], .ea-form textarea, .ea-form select{
  display: block; width: 100% !important; max-width: 100% !important; height: auto; padding: 8px 0 !important;
  border: 0 !important; border-bottom: 1px solid var(--neutral-lighter) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; outline: 0;
  font: 400 var(--fs-body-sm)/1.5 var(--font-body) !important; color: var(--neutral-darker) !important;
}
.ea-form textarea{ min-height: 170px; resize: vertical; }
.ea-form input::placeholder, .ea-form textarea::placeholder{ color: var(--neutral) !important; opacity: 1; }  /* --neutral = #666666 */
.ea-form input:focus, .ea-form textarea:focus, .ea-form select:focus{ border-bottom-color: var(--darkest-green) !important; }

/* Name / Address sub-fields: sub-label above the input, 2 columns */
.ea-form .ginput_complex{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 24px; }
.ea-form .ginput_complex > span, .ea-form .ginput_complex > div{ display: flex !important; flex-direction: column-reverse; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.ea-form .ginput_complex > .address_line_1, .ea-form .ginput_complex > .address_line_2, .ea-form .ginput_complex > .address_country, .ea-form .ginput_complex > .ginput_full{ grid-column: 1 / -1; }
.ea-form .ginput_complex label, .ea-form .gform-field-label--type-sub{ margin: 0 0 4px !important; padding: 0 !important; font: 400 var(--fs-body-xs)/1.5 var(--font-body) !important; color: var(--darkest-green) !important; }

/* Checkboxes / radios */
.ea-form .gfield_checkbox, .ea-form .gfield_radio{ display: flex; flex-direction: column; gap: 12px; margin: 12px 0 0 !important; padding: 0 !important; list-style: none; }
.ea-form .gchoice{ display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; }
.ea-form .gchoice input[type="checkbox"], .ea-form .gchoice input[type="radio"]{ flex: 0 0 auto; width: 16px; height: 16px; margin: 3px 0 0 !important; accent-color: var(--darkest-green); }
.ea-form .gchoice label{ margin: 0 !important; max-width: none !important; font: 400 var(--fs-body-sm)/1.5 var(--font-body) !important; color: var(--neutral-darker) !important; }

/* File upload */
.ea-form input[type="file"]{ max-width: 100%; font: 400 var(--fs-body-xs)/1.5 var(--font-body); color: var(--neutral-darker); }
.ea-form input[type="file"]::file-selector-button{ margin-right: 10px; padding: 4px 14px; border: 0; border-radius: 2px; background: var(--darkest-green); color: var(--white); font: 400 var(--fs-body-xs)/1.5 var(--font-body); cursor: pointer; }
.ea-form .gform_fileupload_rules{ display: block; margin-top: 6px; font-size: var(--fs-body-xs); color: var(--neutral-dark); }

/* Buttons: Previous = outline pill, Continue / Submit = filled pill, arrow on the right */
.ea-form .gform_footer, .ea-form .gform_page_footer{ display: flex; flex-wrap: wrap; gap: 16px; margin: 40px 0 0 !important; padding: 0 !important; }
.ea-form .gform_footer input[type="submit"], .ea-form .gform_footer button,
.ea-form .gform_page_footer input[type="button"], .ea-form .gform_page_footer input[type="submit"], .ea-form .gform_page_footer button{
  -webkit-appearance: none; appearance: none; width: auto !important; min-width: 235px !important; min-height: 48px; margin: 0 !important;
  padding: 7px 47px 7px 23px !important; border: 1px solid var(--darkest-green) !important; border-radius: var(--radius-full, 50px) !important;
  background: var(--darkest-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FFFFFF' stroke-width='1.5'%3E%3Cpath d='M0 11.5 10.75 0.75M3.25 0.75H10.75V8'/%3E%3C/svg%3E") no-repeat right 23px center / 12px 12px !important;
  color: var(--white) !important; font: 400 var(--fs-body)/var(--lh-body) var(--font-heading) !important; text-align: left; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ea-form .gform_footer input[type="submit"]:hover, .ea-form .gform_footer button:hover,
.ea-form .gform_page_footer input[type="button"]:hover, .ea-form .gform_page_footer input[type="submit"]:hover{ background-color: var(--mid-green) !important; border-color: var(--mid-green) !important; }
.ea-form .gform_page_footer .gform_previous_button{
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23778A67' stroke-width='1.5'%3E%3Cpath d='M0 11.5 10.75 0.75M3.25 0.75H10.75V8'/%3E%3C/svg%3E") no-repeat right 23px center / 12px 12px !important; color: var(--darkest-green) !important;
}
.ea-form .gform_page_footer .gform_previous_button:hover{ background-color: transparent !important; border-color: var(--mid-green) !important; color: var(--mid-green) !important; }

/* Validation + confirmation */
.ea-form .gform_validation_errors, .ea-form .validation_error{ margin: 0 0 32px !important; padding: 12px 16px; border: 1px solid #B3261E; color: #B3261E; font-size: var(--fs-body-sm); }
.ea-form .gform_validation_errors h2{ margin: 0; font-size: var(--fs-body-sm); color: inherit; }
.ea-form .gfield_error input, .ea-form .gfield_error textarea{ border-bottom-color: #B3261E !important; }
/* Per-field messages are hidden - the summary box above the form already lists every problem. The field itself still gets the red underline. */
.ea-form .validation_message, .ea-form .gfield_validation_message, .ea-form .gfield_description.validation_message{ display: none !important; }
.ea-form .gform_confirmation_message{ padding: 24px; background: var(--lightest-green); color: var(--darkest-green-deep); font-size: var(--fs-body); }

@media (max-width: 600px){
  .ea-form .gform_wrapper .gform_fields{ grid-template-columns: 1fr; }
  .ea-form .gform_wrapper .gform_fields > .gfield.gf_left_half, .ea-form .gform_wrapper .gform_fields > .gfield.gf_right_half,
  .ea-form .gform_wrapper .gform_fields > .gfield.gf_first_half, .ea-form .gform_wrapper .gform_fields > .gfield.gf_second_half{ grid-column: 1 / -1; }
  .ea-form .ginput_complex > .name_first, .ea-form .ginput_complex > .name_last{ grid-column: 1 / -1; }
}


/* ==========================================================================
   DSAPT Amendment pages (template_dsapt.php): summary tables, desktop only
   ========================================================================== */
.dsapt-note{
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--light-green);
  border-left: 4px solid var(--darkest-green);
  font-size: var(--fs-body-sm);
  color: var(--darkest-green-deep);
}
.dsapt-tables{ display: none; }
@media (min-width: 1024px){
  .dsapt-note{ display: none; }
  .dsapt-tables{ display: block; margin-top: 32px; }
}
.dsapt-table-wrap{ margin: 0 0 40px; overflow-x: auto; }
/* The same table pasted into an ordinary page (inside .entry-content) would
   pick up the generic ".entry-content table{display:block}" rule, which turns
   off border-collapse and draws the table's own border AND the cells' borders
   (a double line). Keep it a real table; the wrapper above does the scrolling. */
.entry-content .dsapt-table{ display: table; overflow: visible; margin: 0; max-width: none; }
/* With the sidebar on, the tables (about 800-850px wide at minimum) would
   get too narrow a column and scroll sideways, which hides their right-hand
   border. So: below 1440px the sidebar stacks above the tables (full width);
   from 1440px it sits beside them in a wider 3fr/1fr split, with tighter
   cell padding. */
/* DSAPT Amendment template only: smaller sidebar link text. */
.service-layout--dsapt .service-box__list a{ font-size: 13px; }
@media (min-width: 1024px) and (max-width: 1439px){
  .service-layout--dsapt{ grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: none; row-gap: 32px; }
  .service-layout--dsapt > *{ grid-area: auto; }
  .service-layout--dsapt .newsletter-box{ max-width: none; }
}
@media (min-width: 1440px){
  .service-layout--dsapt{ grid-template-columns: 3fr 1fr; column-gap: 32px; }
  .service-layout--dsapt .dsapt-table th,
  .service-layout--dsapt .dsapt-table td{ padding: 10px 8px; }
}
.dsapt-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.dsapt-table,
.dsapt-table th,
.dsapt-table td{
  border: 1px solid #b5b5b5;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--neutral-dark);
}
.dsapt-table thead th{
  background: var(--darkest-green-deep);
  border-color: var(--darkest-green-deep);
  color: var(--white);
  font-weight: 600;
}
.dsapt-table tr.dsapt-sub td{
  background: var(--light-green);
  color: var(--darkest-green-deep);
  font-weight: 600;
}
.dsapt-table p{ margin: 0 0 8px; color: inherit; }
.dsapt-table p:last-child{ margin-bottom: 0; }
.dsapt-table ul{ margin: 0 0 8px; padding-left: 20px; list-style: disc; }
.dsapt-table ul:last-child{ margin-bottom: 0; }
.dsapt-table li{ margin-bottom: 6px; }
.dsapt-table li:last-child{ margin-bottom: 0; }
.dsapt-table a{ text-decoration: underline; }

/* Blog posts: second part of the article from the legacy ACF repeater (inc/post-legacy-content.php).
   It sits inside .entry-content, so it inherits the article typography; this only adds row spacing. */
.post-extra-content__row{ margin-top: 24px; }
.post-extra-content__row:first-child{ margin-top: 0; }