/* Maps Fixology's components onto the tokens. Additive only —
   the parent theme is never edited. */
body {
  background: var(--as-black);
  color: var(--as-text-muted);
  font-family: var(--as-font-body);
}

/* Fix round 1 (Task 10): Fixology's inline "fixology-main-style-inline-css"
   block sets `body #main{background-color:#ffffff}` at specificity
   (0,1,1) -- an id beats our bare `body` element selector regardless of
   source order. Matching selector + specificity here wins on load order
   alone (this stylesheet is enqueued after the theme's inline style), no
   !important needed. */
body #main {
  background: var(--as-black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--as-font-head);
  color: var(--as-text);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

a { color: var(--as-accent); }
a:hover { color: var(--as-accent-hover); }

/* Accent text is legible only on dark ground; on the accent itself,
   text is near-black. White on accent is 2.7:1 and must never appear.

   Fix round 1: Fixology's main.css carries
   ".tm-textcolor-dark a, h1...h6 { color: rgba(0,0,0,.8); }" at
   specificity (0,1,1) — note it includes bare "a", not just headings.
   Every button here IS an anchor, so a bare ".as-btn--ghost" (0,1,0)
   loses to that rule if an editor ever applies the theme's "Dark"
   text-colour option to a row containing these buttons: --as-text
   (white) is overridden to near-black on our dark surfaces, i.e.
   invisible. The markup always carries both ".as-btn" and the
   modifier class together (see page-hero.php), so scoping as
   ".as-btn.as-btn--*" costs nothing structurally and reaches (0,2,0),
   which beats (0,1,1) with no !important — same pattern as
   .as-hero__title / .as-pillar__title. */
.as-btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: var(--as-font-head);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--as-accent);
  transition: background .15s ease, color .15s ease;
}
.as-btn.as-btn--solid { background: var(--as-accent); color: var(--as-on-accent); }
.as-btn.as-btn--solid:hover { background: var(--as-accent-hover); color: var(--as-on-accent); }
.as-btn.as-btn--ghost { background: transparent; color: var(--as-text); }
.as-btn.as-btn--ghost:hover { background: var(--as-accent); color: var(--as-on-accent); }

/* The short rule that sits under every mockup heading. */
.as-rule {
  display: block;
  width: 84px;
  height: 3px;
  background: var(--as-accent);
  margin: 20px 0 28px;
}

/* Metallic treatment for the home hero heading, with a solid fallback
   for browsers without background-clip:text. */
.as-metal {
  color: #D8D8D8;
  background: linear-gradient(180deg, #F2F2F2 0%, #B9B9B9 48%, #8A8A8A 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .as-metal { color: transparent; }
}

.as-surface { background: var(--as-surface); }
.as-surface-2 { background: var(--as-surface-2); }
.as-divider { border-color: var(--as-line); }

/* Nothing may scroll the page sideways; wide content scrolls itself. */
.as-scroll-x { overflow-x: auto; }
img { max-width: 100%; height: auto; }

/* as_page_hero (Task 7).
   Colour-bearing selectors below are scoped two classes deep
   (".as-hero .as-hero__*") rather than left as bare "h1" or a single
   class. Fixology's own main.css carries
   ".tm-textcolor-dark h1, h2, h3 { color: rgba(0,0,0,.8); }" — one
   class + one type selector, specificity (0,1,1) — which beats a bare
   "h1" or a lone ".as-hero__title" (0,1,0) on load order alone and
   would silently render this heading near-black on our near-black
   background. Two classes (0,2,0) beats (0,1,1) by specificity, no
   !important needed, so this still loses cleanly to a real .as-* override
   later and never enters an !important arms race. */
.as-hero {
  position: relative;
  overflow: hidden;
  background: var(--as-black);
  padding: 96px var(--as-gutter);
}
/* Stacking, bottom to top: photo, video (fades in over the photo once it
   is actually playing), dark gradient, content. Explicit z-indexes because
   ::before comes first in the DOM and would otherwise paint underneath. */
/* Parent-scoped (0,2,0) because core's ".entry-content img { height: auto }"
   (0,1,1) beats a lone class and collapses every cover image to its
   natural height. Same for the card, tile, feature and showcase images. */
.as-hero .as-hero__media,
.as-hero .as-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.as-hero__video { opacity: 0; transition: opacity .8s ease; }
.as-hero__video.is-playing { opacity: 1; }
.as-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.35) 100%);
}
.as-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--as-maxw);
  margin: 0 auto;
}
.as-hero .as-hero__pause {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 6px 12px;
  font-family: var(--as-font-head);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--as-text);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.35);
  cursor: pointer;
}
.as-hero .as-hero__pause[hidden] { display: none; }
.as-hero .as-hero__pause:hover { border-color: var(--as-accent); }
.as-hero .as-hero__pause:focus-visible { outline: 2px solid var(--as-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .as-hero__video { transition: none; }
}
.as-hero .as-hero__title { font-size: clamp(40px, 5.4vw, 84px); font-weight: 700; line-height: 1; letter-spacing: .005em; margin: 0; color: var(--as-text); }
.as-hero .as-hero__line { display: block; }
/* The mockups break the white line ("STRUCTURE / DEFINES", "STRUCTURAL /
   SERVICES") and let the green line run on, so only the white line is
   held to a measure. */
.as-hero .as-hero__line:not(.as-hero__line--accent) { max-width: 8em; }
.as-hero .as-hero__line--accent { color: var(--as-accent); }
.as-hero__intro { max-width: 34em; font-size: 20px; line-height: 1.55; color: var(--as-text); }
.as-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

@media (max-width: 782px) {
  .as-hero { padding: 64px var(--as-gutter); }
  .as-hero::before { background: rgba(0,0,0,.8); }
}

/* as_service_pillar (Task 8).
   Same hazard as as_page_hero: Fixology's main.css carries
   ".tm-textcolor-dark h1, h2, h3 { color: rgba(0,0,0,.8); }" at
   specificity (0,1,1). ".as-pillar__title" is an h3, so a bare
   ".as-pillar__title" (0,1,0) would still lose and render near-black
   on our dark surface. Scoped two classes deep as ".as-pillar
   .as-pillar__title" (0,2,0) beats it on specificity alone — no
   !important, same pattern as the hero title above. */
/* Mockup-gap round: the home mockup shows the three pillars as ONE joined
   panel -- icon on the left, title and list on the right, a hairline
   between columns and a green arrow bottom-right -- not three separate
   tall cards. The panel itself is the row (".wpb_row:has(.as-pillar)"
   in the layout section at the end of this file). */
.as-pillar {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: start;
  height: 100%;
  padding: 32px 28px 48px;
  background: var(--as-surface);
}
.wpb_column + .wpb_column .as-pillar { border-left: 1px solid var(--as-line); }
.as-pillar__icon { color: var(--as-text); width: 96px; margin: 0; }
.as-pillar__icon svg { width: 100%; height: auto; }
.as-pillar__body { min-width: 0; }
.as-pillar .as-pillar__title { font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0 0 14px; color: var(--as-text); }
.as-pillar__list,
.as-list { list-style: none; margin: 0; padding: 0; }
.as-pillar__list li,
.as-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--as-text-muted);
}
.as-pillar__list li::before,
.as-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--as-accent);
}
/* Fix round 1: ".as-pillar__more" is also an anchor and hits the same
   ".tm-textcolor-dark a" rule (0,1,1) as the buttons above. Scoped
   under ".as-pillar" — always the parent in the rendered markup — to
   reach (0,2,0), matching the escalation already applied to
   ".as-pillar__title" just above. */
.as-pillar .as-pillar__more { position: absolute; right: 28px; bottom: 20px; font-size: 26px; line-height: 1; color: var(--as-accent); }
.as-pillar .as-pillar__more:hover { color: var(--as-accent-hover); }

@media (max-width: 1100px) {
  .as-pillar { grid-template-columns: 1fr; gap: 16px; }
  .as-pillar__icon { width: 96px; }
}
/* 767px, not 782: WPBakery stacks its columns below 768px, so 768-782
   still has three columns side by side. */
@media (max-width: 767px) {
  .as-pillar { grid-template-columns: 96px 1fr; }
  .wpb_column + .wpb_column .as-pillar { border-left: 0; border-top: 1px solid var(--as-line); }
}

/* as_trust_strip (Task 9).
   Same hazard as as_page_hero / as_service_pillar: Fixology's main.css
   carries ".tm-textcolor-dark a, h1...h6 { color: rgba(0,0,0,.8); }" at
   specificity (0,1,1). ".as-trust__title" is an h4, directly in scope, so
   a bare ".as-trust__title" (0,1,0) would lose and render near-black on
   our dark surface. Scoped two classes deep as ".as-trust .as-trust__title"
   (0,2,0) beats it on specificity alone — no !important, same pattern used
   for .as-hero__title and .as-pillar__title. */
.as-trust {
  background: var(--as-surface);
  padding: 32px 16px;
  border-bottom: 2px solid var(--as-accent);
}
/* Six items, icon beside the text as in the home mockup. Spacing is item
   padding either side of a hairline divider, not grid gap, so every pixel
   of each column goes to icon + text. min-width: 0 matters: grid items
   default to min-width: auto, which let long words ("strengthens",
   "developments") push the text out of its column and across the next
   divider. Icons are 38px tall -- the wide ones (team, house) are ~46px
   across, leaving the copy most of the column. */
.as-trust__inner {
  max-width: var(--as-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.as-trust__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 4px 16px;
  border-left: 1px solid var(--as-line);
}
.as-trust__item:first-child { border-left: 0; }
.as-trust__body { min-width: 0; overflow-wrap: break-word; }
.as-trust__icon { flex: none; color: var(--as-accent); font-size: 27px; line-height: 1; }
/* Parent-scoped: core's ".entry-content img { height: auto }" (0,1,1)
   beats a lone class and left the icons at ~80px. */
.as-trust .as-trust__img { flex: none; display: block; width: auto; height: 38px; margin-top: 2px; }
.as-trust .as-trust__title { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; margin: 0 0 6px; color: var(--as-text); }
.as-trust__text { font-size: 13px; line-height: 1.5; margin: 0; color: var(--as-text-muted); }

/* Three per row (two rows) wherever a sixth of the row would squeeze the
   copy below a readable measure. */
@media (max-width: 1399px) {
  .as-trust__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .as-trust__item:nth-child(3n+1) { border-left: 0; }
}
/* Phones: two per row, icon above the text. */
@media (max-width: 600px) {
  .as-trust__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-trust__item { display: block; border-left: 0; padding: 0 10px; }
  .as-trust .as-trust__img { margin: 0 0 12px; }
  .as-trust__icon { display: block; margin-bottom: 12px; }
}

/* Contact Form 7 (Task 12: contact + quote forms).
   Fixology's main.css gives text/textarea/select a grey-on-near-black
   fill (color:#999 on background rgba(0,0,0,.03), border #e5e5e5) at
   specificity (0,1,0) per bare type-selector -- readable against our
   black body but muddy, and it never reaches our tokens. Scoped under
   ".wpcf7-form" (always present in CF7's rendered markup) reaches
   (0,2,0), which beats every one of those bare-type rules on
   specificity alone -- same escalation pattern used throughout this
   file, no !important.

   The submit button is the real defect: Fixology renders CF7 submits
   with its own hard-coded skincolor red (#ed1b24) and white text --
   13px bold on that red measures ~4.42:1, under the 4.5:1 AA floor for
   text that small, and it also ignores our green accent entirely.
   Restyled onto --as-accent / --as-on-accent, the same pairing already
   verified for .as-btn--solid. */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-textarea,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-quiz {
  background: var(--as-surface);
  color: var(--as-text);
  border: 1px solid var(--as-line);
}
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-tel:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-textarea:focus,
.wpcf7-form .wpcf7-select:focus,
.wpcf7-form .wpcf7-quiz:focus {
  background: var(--as-surface);
  color: var(--as-text);
  border-color: var(--as-accent);
}
.wpcf7-form .wpcf7-text::placeholder,
.wpcf7-form .wpcf7-tel::placeholder,
.wpcf7-form .wpcf7-email::placeholder,
.wpcf7-form .wpcf7-textarea::placeholder {
  color: var(--as-text-muted);
  opacity: 1;
}
.wpcf7-form .wpcf7-list-item-label { color: var(--as-text-muted); }
.wpcf7-form input[type="submit"] {
  background: var(--as-accent);
  color: var(--as-on-accent);
  border: 1px solid var(--as-accent);
  font-weight: 700;
}
.wpcf7-form input[type="submit"]:hover {
  background: var(--as-accent-hover);
  border-color: var(--as-accent-hover);
}
/* Finding B (final fix wave): Fixology's main.css sets
   `input[type="submit"] { outline: none !important; }` (css/main.css:230),
   which removes the browser's default focus ring on both lead-capture
   submit buttons with no replacement anywhere in skin.css -- a WCAG 2.4.7
   (AA) failure; a keyboard user tabbing to Submit has no visible
   indication of focus. `box-shadow` is not touched by that rule (verified:
   the only `box-shadow: none !important` in main.css is scoped to
   `.tm-search-overlay ... input[type="search"]`, unrelated), so no
   `!important` is needed here -- this selector's own specificity is
   enough to add a ring without fighting the parent rule. Two concentric
   rings rather than one, because the button itself and the page behind it
   need different contrast: an inner ring in --as-on-accent (near-black)
   against the lime --as-accent button face, and an outer ring in
   --as-accent-hover against the near-black page background -- both meet
   the 3:1 non-text contrast floor (WCAG 1.4.11) that a single white ring
   would not (white-on-accent measures ~2.7:1, the same failure this
   codebase already rejects for button text). */
.wpcf7-form input[type="submit"]:focus,
.wpcf7-form input[type="submit"]:focus-visible {
  box-shadow: 0 0 0 2px var(--as-on-accent), 0 0 0 5px var(--as-accent-hover);
}
.wpcf7-form .wpcf7-not-valid-tip { color: #ff6b6b; }

/* Select2 (Task 15 finding): the Get a Quote page's Material and Timeline
   selects are progressively enhanced by select2.min.css, which hard-codes
   ".select2-container--default .select2-selection--single
   .select2-selection__rendered { color:#444 }" -- 4 classes, specificity
   (0,4,0) -- another "readable on a light UI" default that measured at
   2.16:1 on our black ground. Scoped under ".wpcf7-form" (5 classes,
   (0,5,0)) to beat it on specificity alone, same escalation pattern as
   every other override in this file, no !important. */
.wpcf7-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--as-text);
}

/* Select2 results panel (Task 15 fix round 1). The .wpcf7-form scoping just
   above only fixes the CLOSED control -- select2 appends its OPEN dropdown
   (.select2-container.select2-container--open > .select2-dropdown) directly
   to <body>, entirely outside .wpcf7-form, so that fix never reached it.
   Found by actually opening the dropdown rather than trusting the
   closed-state fix to generalize. Unlike the closed control, this panel
   keeps select2's own white background, so it needs a DARK token, not
   --as-text. No Fixology/select2 rule sets the option's base colour
   explicitly, so it was silently inheriting body's `color:
   var(--as-text-muted)` (rgb(200,204,210)) onto a white panel -- 1.61:1.
   Any explicit declaration beats an inherited one regardless of
   specificity, so no escalation is needed for the base row; --as-on-accent
   (#0A0B0D) is reused here as the palette's existing "dark text for a
   light surface" token rather than inventing a new value. The
   highlighted/hovered option is a separate, explicit library rule --
   ".select2-container--default .select2-results__option--highlighted
   [aria-selected]" at (0,3,0), white text on a hard-coded blue #5897fb,
   2.90:1. ".select2-container--open" (present whenever this can apply)
   adds one more class, (0,4,0), to beat it on specificity alone, using the
   same accent/on-accent pairing already verified for .as-btn--solid. */
.select2-container--default .select2-results__option {
  color: var(--as-on-accent);
}
.select2-container--open .select2-results__option--highlighted[aria-selected] {
  background: var(--as-accent);
  color: var(--as-on-accent);
}

/* Header (Task 14).
   Fixology's main.css sets the header background via a bare class,
   `.tm-bgcolor-white { background-color: #fff; }` at specificity
   (0,1,0), applied to both #tm-stickable-header-w and #site-header
   (see header-main.php). Both carry real ids in the rendered markup,
   so scoping id+class here reaches (1,1,0), which beats the bare
   class on specificity alone -- no !important, same escalation
   pattern used throughout this file. header_bg_color is left on its
   theme-option default ("white") rather than reassigned in PHP,
   because the option isn't wired to any dynamically generated CSS
   (logo_max_height and header_bg_custom_color are the same story --
   dead options with no 'output' consumer) -- only this static class
   controls the colour, so this is the actual point of control. */
#tm-stickable-header-w.tm-bgcolor-white,
#site-header.tm-bgcolor-white,
#site-header.tm-sticky-bgcolor-white.is_stuck {
  background: var(--as-black);
}

/* Header lockup (carried finding 1). No horizontal lockup asset
   exists -- see inc/branding.php for why one wasn't composed here.
   logoimg now points at logo-mark.png (the A-beam alone, cropped from
   logo.svg). The wordmark is real DOM text (fix round 2, finding 2):
   `.as-logo-wordmark`, appended by the child's `thememount_logo()`
   override in inc/branding.php, which prints get_bloginfo('name') as
   an actual span rather than CSS-generated content -- indexable, and
   not dependent on a title attribute staying populated. `#masthead`
   scoping matches the two rules above: id+class(+type) beats the
   parent's bare `.headerlogo img` (0,1,1) on specificity alone. */
#masthead .headerlogo {
  display: flex;
  align-items: center;
  gap: 12px;
}
#masthead .headerlogo .site-title {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  text-align: left;
}
#masthead .headerlogo .site-title a.home-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
#masthead .headerlogo img {
  max-height: 72px;
  width: auto;
}
/* Mockup-gap round: stacked lockup after the home mockup -- "ADRIAN"
   spaced out above a large metallic "STRUCTURES LTD", a green rule, and
   the tagline. Sized to fit the parent's fixed 100px header row. */
#masthead .headerlogo .as-logo-wordmark {
  display: flex;
  flex-direction: column;
  font-family: var(--as-font-head);
  text-transform: uppercase;
  color: var(--as-text);
  white-space: nowrap;
  line-height: 1;
}
#masthead .headerlogo .as-logo-l1 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2em;
  color: #D6D8DC;
}
#masthead .headerlogo .as-logo-l2 {
  margin-top: 2px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--as-accent);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #D8D8D8;
  background: linear-gradient(180deg, #F4F4F4 0%, #BEBEBE 55%, #8E8E8E 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  #masthead .headerlogo .as-logo-l2 { color: transparent; }
}
#masthead .headerlogo .as-logo-l2 small { font-size: 14px; font-weight: 600; letter-spacing: .04em; }
#masthead .headerlogo .as-logo-tag {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--as-text-muted);
}
/* Sticky (scrolled) header: Fixology shrinks the bar to 70px and adds
   .is_stuck to #site-header; the lockup shrinks with it -- smaller mark,
   tighter wordmark, no tagline. Two ids keep these above the full-size
   rules on specificity alone. */
#masthead #site-header .headerlogo img,
#masthead #site-header .headerlogo .as-logo-l1,
#masthead #site-header .headerlogo .as-logo-l2 {
  transition: max-height .2s ease, font-size .2s ease;
}
#masthead #site-header.is_stuck .headerlogo img { max-height: 46px; }
#masthead #site-header.is_stuck .headerlogo .as-logo-l1 { font-size: 11px; }
#masthead #site-header.is_stuck .headerlogo .as-logo-l2 { font-size: 22px; border-bottom: 0; padding-bottom: 0; }
#masthead #site-header.is_stuck .headerlogo .as-logo-l2 small { font-size: 11px; }
#masthead #site-header.is_stuck .headerlogo .as-logo-tag { display: none; }
#masthead #site-header.is_stuck #site-header-menu #site-navigation:where(:not(.toggled-on)) div.nav-menu > ul > li.as-nav-cta > a { padding: 10px 20px; }
@media (prefers-reduced-motion: reduce) {
  #masthead #site-header .headerlogo img,
  #masthead #site-header .headerlogo .as-logo-l1,
  #masthead #site-header .headerlogo .as-logo-l2 { transition: none; }
}

@media (max-width: 1250px) {
  #masthead .headerlogo .as-logo-tag { display: none; }
  #masthead .headerlogo .as-logo-l2 { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 480px) {
  #masthead .headerlogo .as-logo-wordmark { display: none; }
}

/* Nav type, the outlined "Get a Quote" button and the green underline on
   the current page (home mockup). The button is the menu item carrying
   the "as-nav-cta" CSS class (Appearance -> Menus -> CSS Classes; set by
   bin/seed-mockup.sh), not "the last item", so reordering the menu can't
   silently move the button. Same #masthead escalation as the rules below;
   ":where(:not(.toggled-on))" keeps all of this off the light mobile
   panel, which keeps Fixology's own stacked-list styling. */
#masthead #site-header-menu #site-navigation:where(:not(.toggled-on)) div.nav-menu > ul > li > a {
  position: relative;
  font-family: var(--as-font-head);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .05em;
}
/* A real text underline, not a positioned bar: the bar was placed a fixed
   30px above the link's bottom edge, which crossed straight through the
   text once the sticky header shrinks the link box from 100px to 70px. */
#masthead #site-header-menu #site-navigation:where(:not(.toggled-on)) div.nav-menu > ul > li:is(.current-menu-item, .current-menu-ancestor):not(.as-nav-cta) > a {
  text-decoration: underline;
  text-decoration-color: var(--as-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
#masthead #site-header-menu #site-navigation:where(:not(.toggled-on)) div.nav-menu > ul > li.as-nav-cta > a {
  display: inline-block;
  vertical-align: middle;
  /* !important only because Fixology's inline nav rule sets
     "line-height: 100px !important" on every top-level link; an
     !important can only be beaten by another, and this selector
     out-ranks that one (3 ids vs 2). */
  line-height: 1 !important;
  height: auto;
  padding: 14px 24px;
  border: 1px solid var(--as-accent);
  color: var(--as-text);
}
#masthead #site-header-menu #site-navigation:where(:not(.toggled-on)) div.nav-menu > ul > li.as-nav-cta > a:hover {
  background: var(--as-accent);
  color: var(--as-on-accent);
}

/* Nav active-item colour: spotted during the visual pass for this task,
   not one of the brief's listed defects, but out of palette (Fixology's
   dynamic inline CSS -- thememount_add_inline_dynamic_css() -- sets the
   active/current menu item to its hard-coded skincolor red #ed1b24,
   generated from a two-id selector chain, e.g.
   "#site-header-menu #site-navigation div.nav-menu > ul > li.current-menu-item > a").
   Red-on-black reads as an error state and isn't a palette token.
   Adding #masthead as a third id keeps this on the same "escalate via
   scoping, never !important" pattern as the rest of this file. */
#masthead #site-header-menu #site-navigation div.nav-menu > ul > li.current-menu-item > a,
#masthead #site-header-menu #site-navigation div.nav-menu > ul > li.current-menu-ancestor > a,
#masthead #site-header-menu #site-navigation div.nav-menu > ul > li.current_page_item > a,
#masthead #site-header-menu #site-navigation div.nav-menu > ul > li.current_page_ancestor > a,
#masthead #site-header-menu #site-navigation div.nav-menu > ul > li.current_page_parent > a {
  color: var(--as-accent);
}

/* Nav DEFAULT-state colour: found during Task 15's visual pass by scanning
   every rendered page for near-black text on our near-black ground -- not
   the known tm-textcolor-dark hazard, a different Fixology rule with the
   same effect. thememount_add_inline_dynamic_css() also sets the
   non-current top-level nav links to a hard-coded near-black text colour
   (rgb(32,32,32), the theme's default "dark text on a light header" skin
   colour) via
   "#site-header-menu #site-navigation div.nav-menu > ul > li > a"
   -- 2 ids + 1 class + 4 types, specificity (2,1,4). Our header background
   is --as-black (fix above, "tm-bgcolor-white"), so every nav item except
   the current page rendered invisible: dark grey on black, no error, no
   automated check catches it. Escalated the same way as the active-item
   rule immediately above -- #masthead as a third id reaches (3,1,4),
   which beats (2,1,4) on id count alone, no !important. A parallel :hover
   rule (specificity (3,2,4), the extra weight from the :hover pseudo-class)
   restores the existing bare "a:hover" accent-hover behaviour, which this
   fix would otherwise also out-rank and silently swallow.

   ":where(:not(.toggled-on))" (fix round 1), not a bare ":not(.toggled-on)":
   the mobile-panel guard below needed to exclude this rule from the
   ".toggled-on" state, but a bare ":not(.toggled-on)" here would have
   added one class to this selector's specificity -- (3,1,4) -> (3,2,4) --
   which ties the active-item rule immediately above at its own (3,2,4).
   Tied specificity falls back to source order, and this rule comes later
   in the file, so it would have silently started beating the active-item
   rule on every page, everywhere, all the time (not just in the
   toggled-on state the guard was meant to scope to) -- caught by
   re-measuring the desktop "Home" link after adding the guard and finding
   it had gone white instead of accent green. ":where()" always
   contributes zero specificity regardless of what's inside it, so
   ":where(:not(.toggled-on))" keeps this rule's specificity at its
   original (3,1,4) while still excluding the toggled-on state. */
#masthead #site-header-menu #site-navigation:where(:not(.toggled-on)) div.nav-menu > ul > li > a {
  color: var(--as-text);
}
#masthead #site-header-menu #site-navigation:where(:not(.toggled-on)) div.nav-menu > ul > li > a:hover {
  color: var(--as-accent-hover);
}

/* Mobile off-canvas panel (Task 15 fix round 1). Fixology opens the mobile
   nav by adding "toggled-on" directly to #site-navigation, and that panel
   has a LIGHT background (~rgb(244,246,247), from Fixology's own mobile
   nav CSS, not touched here) -- the opposite of the black desktop header.
   The two rules just above, and the active-item rule further up this
   file, all assume a dark ground; applied unconditionally they broke this
   state instead of fixing it -- found only by actually opening the mobile
   menu and measuring it, not by scanning the closed default state:
     - white default text (var(--as-text)) on rgb(244,246,247): 1.08:1
     - accent-green active-item text (already correct at 7.7:1 on black
       desktop) on rgb(244,246,247): 2.52:1
   ".menu-toggle" (which adds "toggled-on") is display:none at desktop
   widths -- verified 0x0 / display:none at 1440px -- so "toggled-on"
   reliably means "the light mobile panel is showing" and never coincides
   with the black desktop header. ":not(.toggled-on)" on the two rules
   above excludes this state, which lets Fixology's original near-black
   default nav-link colour (rgb(32,32,32), unaffected by our rule once
   excluded) show through correctly against the light panel with no extra
   rule needed. The active-item colour has no such fallback -- it's our
   own rule with no light-ground variant -- so it gets an explicit
   toggled-on override here, reusing --as-on-accent (the palette's
   existing "dark text for a light surface" token) rather than the accent
   green, which cannot reach AA on a near-white background. One more
   class (".toggled-on") on top of the existing active-item selector
   reaches (3,3,4), which beats that rule's own (3,2,4) on specificity
   alone. */
#masthead #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li.current-menu-item > a,
#masthead #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li.current-menu-ancestor > a,
#masthead #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li.current_page_item > a,
#masthead #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li.current_page_ancestor > a,
#masthead #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li.current_page_parent > a {
  color: var(--as-on-accent);
}

/* Mega-menu defensive coverage (Task 15 fix round 2). Fixology's mega-menu
   markup (.mega-menu-wrap / .mega-menu-item / .mega-sub-menu, its bundled
   Max Mega Menu integration) is gated behind ".tm-mmmenu-override-yes" --
   confirmed present on #site-header on THIS install right now
   (Appearance -> Theme Options, a client-togglable setting, not code that
   would ever need re-adding). No .mega-menu-wrap element currently
   renders -- the separate per-menu-item "enable mega menu" setting isn't
   on -- so none of this fires today, but every rule above that targets
   the plain "div.nav-menu > ul > li > a" path has a mega-menu twin in
   Fixology's own CSS carrying the same dark-on-dark hazard for the
   top-level links, and none of the rules above reach it. If the client
   (or a future admin) ever enables mega menu for any item, the
   invisible-navigation bug returns with no warning, since the gating
   class is already flipped on. Cheap insurance: mirror the top-level
   default/hover/active rules onto the mega-menu selector shape, same
   #masthead escalation, same tokens. Specificity check: Fixology's own
   mega-menu default-colour hazard rule is
   ".tm-mmmenu-override-yes #site-header-menu #site-navigation
   .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item > a"
   -- 2 ids, 5 classes, 2 types = (2,5,2); adding #masthead reaches
   (3,5,2), which beats it on id-count alone before the class count is
   even compared, same escalation used throughout this file.

   The mega SUBMENU text (".mega-sub-menu a") is deliberately NOT
   overridden here. Fixology's own hazard rule for it is the same
   rgb(38,38,38) value already measured safe for the plain ".sub-menu"
   dropdown (13.96-15.13:1, both render on a light panel) -- but no
   .mega-sub-menu markup exists on this install to actually open and
   measure, so asserting a fix for text nobody has rendered would repeat
   the exact mistake this task exists to catch. Documented as an
   assumption-by-analogy, not a verified fix; see verification-notes.md
   for the re-verify-when-enabled note. */
#masthead #site-header-menu #site-navigation:where(:not(.toggled-on)) .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item > a {
  color: var(--as-text);
}
#masthead #site-header-menu #site-navigation:where(:not(.toggled-on)) .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item > a:hover {
  color: var(--as-accent-hover);
}
#masthead #site-header-menu #site-navigation .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current-menu-item > a,
#masthead #site-header-menu #site-navigation .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current-menu-ancestor > a,
#masthead #site-header-menu #site-navigation .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current_page_item > a,
#masthead #site-header-menu #site-navigation .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current_page_ancestor > a,
#masthead #site-header-menu #site-navigation .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current_page_parent > a {
  color: var(--as-accent);
}
#masthead #site-header-menu #site-navigation.toggled-on .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current-menu-item > a,
#masthead #site-header-menu #site-navigation.toggled-on .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current-menu-ancestor > a,
#masthead #site-header-menu #site-navigation.toggled-on .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current_page_item > a,
#masthead #site-header-menu #site-navigation.toggled-on .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current_page_ancestor > a,
#masthead #site-header-menu #site-navigation.toggled-on .mega-menu-wrap .mega-menu.mega-menu-horizontal > li.mega-menu-item.current_page_parent > a {
  color: var(--as-on-accent);
}

/* Mobile menu toggle icon (Task 15 fix round 2). The hamburger icon is
   drawn as three background-colour bars -- the element's own box plus a
   ::before/::after pair positioned with "top" offsets -- not a font-icon
   glyph (.tm-fixology-icon-bars has no registered ::before content in the
   icon font's own stylesheet; its bar geometry and light default fill,
   #ecf0f1, come from Fixology's large per-page inline dynamic-CSS block,
   via "#site-header-menu #site-navigation .menu-toggle
   .tm-fixology-icon-bars" -- 2 ids, 2 classes, (2,2,0)). All three boxes
   nonetheless computed to rgb(38,38,38), not that light default --
   tracked down by dumping every rule in that inline block whose selector
   contains "icon-bars" and searching its raw text for the matching hex,
   which surfaced a second, ".tm-responsive-icon-dark"-gated rule setting
   the same three boxes to #262626. That gating class is NOT present
   anywhere in this DOM (confirmed), so on paper the light #ecf0f1 default
   should have applied -- but empirically, repeatedly, on a clean reload,
   it did not. Root cause not fully resolved (a specificity fight between
   the two Fixology-authored rules that live-inspection couldn't settle
   with confidence in the time available), but the practically important
   fact is measured, not assumed: the rendered result was rgb(38,38,38) on
   the black header bar, ~1.4:1 -- the button a visitor needs to find the
   whole menu was itself nearly invisible, at every width the toggle is
   shown. The toggle sits in the header row, which stays black
   (--as-black) in both the collapsed and the toggled-on state (confirmed
   by re-checking #site-header's own background in both), so this needs
   no light/dark split, unlike the nav links -- one unconditional rule
   covers both. First attempt used only "#masthead .menu-toggle
   i.tm-fixology-icon-bars" (1 id), which the (2,2,0) Fixology rule above
   beat on id-count alone even before this second rule entered the
   picture -- matching the same #site-header-menu/#site-navigation id
   pair used by every other nav rule in this file reaches (3,2,1)+type,
   which resolved it without !important; kept that fix rather than
   chasing the exact cascade further, since the measured, re-verified
   result (21:1, both states) is what actually matters here. */
#masthead #site-header-menu #site-navigation .menu-toggle .tm-fixology-icon-bars,
#masthead #site-header-menu #site-navigation .menu-toggle .tm-fixology-icon-bars::before,
#masthead #site-header-menu #site-navigation .menu-toggle .tm-fixology-icon-bars::after {
  background-color: var(--as-text);
  color: var(--as-text);
}

/* Footer legal block (as_contact() disclosure, Task 14). */
.as-legal { background: var(--as-surface-2); border-top: 1px solid var(--as-line); padding: 22px var(--as-gutter); }
.as-legal__inner { max-width: var(--as-maxw); margin: 0 auto; font-size: 13px; color: var(--as-text-muted); }
.as-legal__inner p { margin: 0 0 6px; }

/* ======================================================================
   Mockup-gap round: layout.
   ====================================================================== */

/* Fixology sets html { font-size: 10px }, so every rem in this file used
   to render at 62.5% of its intended size (hero intro 10.5px, pillar
   bullets 9.2px, trust text 8.5px). All sizes here are px for that
   reason; don't reintroduce rem. Body copy at the mockup's reading size. */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* The mockups use a container ~93% of the canvas; Fixology's 1170px
   container leaves the home page looking narrow and the six-up trust
   strip cramped at desktop widths. Widen it where the screen allows. */
/* --as-maxw follows the parent's .container content width at each of its
   breakpoints (1170/970/750px minus 2x15 padding), so full-bleed sections
   line their content up with the header and page-builder rows. */
@media (max-width: 1199px) { :root { --as-maxw: 940px; } }
@media (max-width: 991px)  { :root { --as-maxw: 720px; } }
@media (max-width: 767px)  { :root { --as-maxw: 100%; } }
@media (min-width: 1400px) {
  :root { --as-maxw: 1290px; }
  #masthead .container,
  .site-content .container,
  #colophon .container { width: 1320px; }
}

/* Full-bleed sections break out of whatever column they sit in. clip
   (not hidden) on the wrapper stops the 100vw scrollbar overhang from
   scrolling the page sideways without creating a scroll container that
   would break the sticky header. */
#content-wrapper { overflow-x: clip; }
.as-hero,
.as-showcase {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Builder rows holding our own sections: drop Fixology's default row
   padding (80px top / 60px bottom), which left an empty black band under
   the header and dead gaps between home sections. Fixology sets it via
   "body.thememount-page-full-width #content .site-main .entry-content >
   .wpb-content-wrapper > .wpb_row.vc_row-fluid" (1,6,1); "#page" on top
   of the same chain out-ranks it on id count. Its first-row -82px pull-up
   (cancelling .site-main's 82px top padding) is deliberately kept -- with
   the padding gone, that is what puts the hero flush under the header. */
#page #content .site-main .entry-content > .wpb-content-wrapper > .wpb_row:has(.as-hero, .as-pillar, .as-trust, .as-card, .as-showcase, .as-feature, .as-cta-wrap) {
  padding-top: 0;
  padding-bottom: 0;
}

/* Hero proportions after the home mockup: tall, content vertically
   centred, heading set large and bold. */
.as-hero {
  display: flex;
  align-items: center;
  min-height: 520px;
  padding-top: 88px;
  padding-bottom: 88px;
}
.as-hero__inner { width: 100%; }
.home .as-hero { min-height: 640px; }
.as-hl { color: var(--as-accent); }
.as-nocase { text-transform: none; }

/* Home pillars: the row IS the panel. Flex so all three columns share one
   height; Fixology's clearfix pseudo-elements would become flex items. */
.wpb_row:has(.as-pillar) {
  display: flex;
  flex-wrap: wrap;
  padding-left: 15px;
  padding-right: 15px;
}
.wpb_row:has(.as-pillar)::before,
.wpb_row:has(.as-pillar)::after { display: none; }
.wpb_row:has(.as-pillar) > .wpb_column > .vc_column-inner { height: 100%; padding: 0; }
.wpb_row:has(.as-pillar) > .wpb_column > .vc_column-inner > .wpb_wrapper { height: 100%; }
/* Spacing lives on the sections, not the rows: Fixology pins row margins
   with the same high-specificity chain as the padding above. */
.as-trust { margin: 32px 0 72px; }

/* Services cards (services mockup): pulled up over the bottom of the page
   hero, which gets extra room underneath for them. */
.entry-content:has(.as-card) .as-hero { padding-bottom: 400px; }
#page #content .site-main .entry-content > .wpb-content-wrapper > .wpb_row:has(.as-card) {
  position: relative;
  z-index: 3;
  margin-top: -360px;
  margin-bottom: 80px;
}
/* The builder floats its columns, and those floats live in the page's
   formatting context, not the row's: the hero row's full-width floated
   column would shove the pulled-up card row straight back below it,
   cancelling the overlap. flow-root makes each hero row contain its own
   float, so later rows are free to overlap it. */
.wpb_row:has(.as-hero) { display: flow-root; }
.as-card { height: 100%; background: var(--as-surface); }
.as-card__media { aspect-ratio: 16 / 5; overflow: hidden; background: var(--as-black); }
.as-card .as-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-card__body { border-top: 3px solid var(--as-accent); padding: 22px 26px 28px; }
.as-card .as-card__title { margin: 0 0 14px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--as-text); }
.as-card .as-card__title a { color: inherit; }
.as-card .as-card__title a:hover { color: var(--as-accent-hover); }

/* Projects proof page (projects mockup): one full-bleed section, photo
   behind everything, intro left, tiles right. */
.as-showcase {
  position: relative;
  padding: 96px var(--as-gutter) 110px;
  background: var(--as-black);
  border-bottom: 2px solid var(--as-accent);
}
.as-showcase .as-showcase__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.as-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 40%, rgba(0,0,0,.6) 100%);
}
.as-showcase__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr);
  gap: 48px;
  max-width: var(--as-maxw);
  margin: 0 auto;
}
.as-showcase .as-showcase__title { margin: 0; font-size: clamp(34px, 3.2vw, 50px); font-weight: 700; line-height: 1.04; color: var(--as-text); }
.as-showcase .as-showcase__line { display: block; }
.as-showcase .as-showcase__line--accent { color: var(--as-accent); }
.as-showcase__text { font-size: 19px; line-height: 1.55; color: var(--as-text); }
.as-showcase__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-content: start; }
/* Column flex so a tile sharing a row with the taller contact box grows
   its photo to match, rather than leaving an empty block under it. */
.as-tile { display: flex; flex-direction: column; background: var(--as-black); color: var(--as-text); }
.as-tile__media { display: block; flex: 1 1 auto; min-height: 0; aspect-ratio: 10 / 3.4; overflow: hidden; }
.as-tile__caption { flex: none; }
.as-tile .as-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-tile__caption { display: block; padding: 14px 22px 16px; }
.as-tile__title {
  display: inline-block;
  padding-bottom: 5px;
  font-family: var(--as-font-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--as-text);
  background: linear-gradient(var(--as-accent), var(--as-accent)) left bottom / 150px 3px no-repeat;
}

/* "Start a structural project" box: last cell of the projects grid, and
   standalone (".as-cta-wrap") at the foot of each service page. */
.as-cta {
  padding: 28px 30px;
  background: rgba(12,13,17,.94);
  border: 1px solid var(--as-accent);
}
.as-cta .as-cta__title { margin: 0 0 12px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--as-text); }
.as-cta__text { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: var(--as-text); }
.as-cta__phone { margin: 0 0 4px; font-family: var(--as-font-head); font-size: 24px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.as-cta__email { margin: 0 0 18px; font-size: 18px; }
.as-cta .as-cta__email a { color: var(--as-text); }
.as-cta .as-cta__email a:hover { color: var(--as-accent-hover); }
.as-cta__action { margin: 0; }
.as-cta-wrap { max-width: var(--as-maxw); margin: 0 auto 88px; padding: 0 var(--as-gutter); }
.as-cta-wrap .as-cta {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  column-gap: 40px;
  align-items: center;
  padding: 36px 40px;
}
.as-cta-wrap .as-cta__title { grid-column: 1; grid-row: 1; }
.as-cta-wrap .as-cta__text { grid-column: 1; grid-row: 2 / span 2; margin: 0; align-self: start; }
.as-cta-wrap .as-cta__phone { grid-column: 2; grid-row: 1; }
.as-cta-wrap .as-cta__email { grid-column: 2; grid-row: 2; margin: 0; }
.as-cta-wrap .as-cta__action { grid-column: 2; grid-row: 3; margin-top: 16px; }

/* Service detail photo feature (portfolio packs 04 / 05). */
.as-feature { max-width: var(--as-maxw); margin: 72px auto 56px; padding: 0 var(--as-gutter); }
.as-feature__mosaic { display: grid; gap: 6px; }
.as-feature__mosaic--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 260px 260px; }
.as-feature__mosaic--3 .as-feature__cell:first-child { grid-row: 1 / span 2; }
.as-feature__mosaic--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 380px; }
.as-feature__mosaic--1 { grid-template-rows: 420px; }
.as-feature__cell { overflow: hidden; background: var(--as-black); }
.as-feature .as-feature__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-feature__band { padding: 36px 40px 40px; background: var(--as-surface); border-top: 3px solid var(--as-accent); }
.as-feature .as-feature__title { margin: 0 0 10px; font-size: clamp(30px, 3.2vw, 46px); font-weight: 700; line-height: 1.05; color: var(--as-text); }
.as-feature__tags { display: flex; flex-wrap: wrap; margin: 0 0 14px; padding: 0; list-style: none; font-size: 20px; color: var(--as-text); }
.as-feature__tags li + li::before { content: "\2022"; margin: 0 14px; color: var(--as-accent); }
.as-feature__text { margin: 0; max-width: 60em; font-size: 18px; line-height: 1.55; color: var(--as-text-muted); }

/* Contact / quote forms sit straight in the page content, which on these
   builder-free pages spans the whole viewport -- keep them in the column. */
.entry-content .wpcf7 { max-width: var(--as-maxw); margin: 56px auto 88px; padding: 0 var(--as-gutter); }

/* Card stacking follows WPBakery's own column breakpoint (767px). */
@media (max-width: 767px) {
  .entry-content:has(.as-card) .as-hero { padding-bottom: 64px; }
  #page #content .site-main .entry-content > .wpb-content-wrapper > .wpb_row:has(.as-card) { margin-top: 0; }
  .wpb_row:has(.as-card) .wpb_column + .wpb_column { margin-top: 24px; }
}
/* Side by side, the three cards share one height (flex row; the builder's
   clearfix pseudo-elements would otherwise become flex items). Safe now
   that the hero row contains its own float (flow-root above). */
@media (min-width: 768px) {
  .wpb_row:has(.as-card) { display: flex; flex-wrap: wrap; }
  .wpb_row:has(.as-card)::before,
  .wpb_row:has(.as-card)::after { display: none; }
  .wpb_row:has(.as-card) > .wpb_column > .vc_column-inner,
  .wpb_row:has(.as-card) > .wpb_column > .vc_column-inner > .wpb_wrapper { height: 100%; }
}

@media (max-width: 1100px) {
  .as-showcase__inner { grid-template-columns: 1fr; gap: 32px; }
  .as-cta-wrap .as-cta { display: block; }
}
@media (max-width: 782px) {
  .as-hero,
  .home .as-hero { min-height: 0; }
  .as-showcase__grid { grid-template-columns: 1fr; }
  .as-feature__mosaic--3,
  .as-feature__mosaic--2 { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
  .as-feature__mosaic--3 .as-feature__cell:first-child { grid-row: auto; }
  .as-feature__mosaic--1 { grid-template-rows: 220px; }
  .as-feature__band { padding: 28px 22px; }
  .as-feature__tags { display: block; font-size: 17px; }
  .as-feature__tags li { position: relative; padding-left: 18px; }
  .as-feature__tags li + li::before { content: none; }
  .as-feature__tags li::after {
    content: "";
    position: absolute;
    left: 0; top: .6em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--as-accent);
  }
  .as-cta-wrap .as-cta { padding: 28px 22px; }
}

/* Keyboard focus (review finding): Fixology removes focus outlines, so no
   new link or button showed where keyboard focus was. One visible ring for
   every link and button; filled accent buttons get an inner dark ring so
   the focus edge reads against the green face too. :focus-visible only, so
   mouse clicks don't draw it. */
body a:focus-visible,
body button:focus-visible {
  outline: 2px solid var(--as-accent);
  outline-offset: 3px;
}
body .as-btn.as-btn--solid:focus-visible {
  outline: 2px solid var(--as-accent-hover);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 2px var(--as-on-accent);
}

/* Mobile off-canvas menu (review finding): Fixology's red 3px top border
   and Raleway 13px links survived on the open panel. Keep its light panel
   and dark text (already measured for contrast), but use the brand accent
   and type. */
#masthead #site-header-menu #site-navigation.toggled-on ul#menu-main-menu {
  border-top-color: var(--as-accent);
}
#masthead #site-header-menu #site-navigation.toggled-on div.nav-menu > ul > li > a {
  font-family: var(--as-font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
}