/* =========================================================
   Amala — color schemes + dev switcher (dairy-farm template)
   The template's gold palette was converted to variables:
   --accent (#fec321), --accent-dark (#d7a92b),
   --accent-light (#fff3d3 tint), --accent-lighter (#fecf4d).
   ========================================================= */

:root { --accent:#6f8a5f; --accent-dark:#4f6543; --accent-light:#eef1ea; --accent-lighter:#cdd8c2; }


/* ===== Oct 2 2026 (Sam: gutters too big on phones) =====
   The template pins .content_wrap to fixed widths per breakpoint (280px under 480,
   440px to 639, 600px to 767, 708px to 959): 20px gutters at its reference widths,
   but 55px on a 390px phone and 80-96px on small tablets. Below 960px the wrapper is
   fluid instead, with the template's own gutters (20px phones, 30px small tablets).
   The mobile header keeps its own wrapper rules (responsive.css .header_mobile). */
@media (max-width: 959px) {
  .page_content_wrap .content_wrap, .top_panel_title .content_wrap, .call_wrap .content_wrap,
  .footer_wrap .content_wrap, .copyright_wrap .content_wrap { width: calc(100% - 60px); }
}
@media (max-width: 767px) {
  .page_content_wrap .content_wrap, .top_panel_title .content_wrap, .call_wrap .content_wrap,
  .footer_wrap .content_wrap, .copyright_wrap .content_wrap { width: calc(100% - 40px); }
}
/* With real gutters the template's grid overhang (.columns_wrap margin-right:-30px,
   offset by padding-right on the columns) poked the staff Educational Degrees grid 2px
   past the viewport at 480-959px. Keep that grid inside its column: no overhang,
   symmetric column padding instead. */
@media (max-width: 1024px) {
  body.staff .amala-degrees .columns_wrap { margin-right: 0; }
  body.staff .amala-degrees .columns_wrap > .column-1_3 { padding: 0 12px; }
}
/* 480-767px: the template wraps the third degree column onto its own row; give it the
   same breathing room the licences grid already gets when it wraps. */
@media (min-width: 480px) and (max-width: 767px) {
  body.staff .amala-degrees .columns_wrap > .column-1_3:nth-child(3) { margin-top: 1.5rem; }
}
/* ---- accessibility: skip link + <main> landmark (Oct 2 2026, WCAG 2.4.1) ----
   The link is the first focusable thing on every page; it sits off-screen until it
   receives keyboard focus (never display:none, so screen readers still get it).
   #main-content wraps the hero/title band + page content; tabindex=-1 lets it take
   focus, scroll-margin keeps the target clear of the sticky header. */
main { display: block; }
#main-content { scroll-margin-top: 90px; outline: none; }
.amala-skip-link {
  position: absolute; top: 0; left: -9999px; z-index: 100000;
  background: var(--accent-dark); color: #fff !important; padding: .8rem 1.4rem;
  font-family: 'Lexend', Arial, sans-serif; font-size: 16px; line-height: 1.2;
  text-decoration: none; border-radius: 0 0 6px 0;
  transition: none !important;   /* the template animates <a> props; no slide-in from off-screen */
}
.amala-skip-link:focus { left: 0; outline: 3px solid #fff !important; outline-offset: -5px; }
/* heading that exists for the document outline only (e.g. "Services" above the home cards) */
.amala-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ---- accessibility: heading levels (Oct 2 2026, WCAG 2.4.6) ----
   Several titles were retagged so the outline runs h1 > h2 > h3 without skips:
   Core Values tiles h4 -> h3, contact cards h4 -> h2 (plus the staff/services
   changes pinned next to their own rules). The template sizes headings by TAG,
   so these mirror its h4 cascade (theme.css + responsive.css) for the retagged
   elements - the tag changed, the design did not. */
.home2 .amala-core-values h3.sc_title,
body.contacts .sc_columns_count_3 h2.sc_title {
  font-size: 1.867em; line-height: 1.3em; text-transform: none;
}
.home2 .amala-core-values h3.sc_title { margin-bottom: .65em; }
body.contacts .sc_columns_count_3 h2.sc_title { margin-top: 2.28em; margin-bottom: .28em; }
@media (min-width: 768px) and (max-width: 1262px) {
  .home2 .amala-core-values h3.sc_title,
  body.contacts .sc_columns_count_3 h2.sc_title { font-size: 1.3846em; }
}
@media (max-width: 767px) {
  .home2 .amala-core-values h3.sc_title,
  body.contacts .sc_columns_count_3 h2.sc_title { font-size: 1.3333em; }
}
/* Amala: per-service photos on the home service cards.
   Oct 2 2026: fixed 16:9 box (was a fixed 210px height, so the crop changed with
   the viewport). Sam's card photos are cropped 740x420, i.e. 16:9, so they show in
   full at every width; crop future card photos to 16:9 too (e.g. 1200x675).
   object-fit: cover is only a safety net for an off-ratio photo. */
.sc_services_item_featured { margin-bottom: 1.1rem; }
.sc_services_item_featured img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 4px;
}
/* Amala: wide photo under a service/story heading.
   Oct 2 2026: fixed 2:1 box (was max-height 360px, i.e. a 3:1 banner on desktop and
   near-portrait on phones). Crop deep-dive photos to 2:1 (e.g. 2000x1000). */
.amala-service-photo { margin: 0 0 1.6rem; }
.amala-service-photo img {
  width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; display: block; border-radius: 6px;
}

/* ===== Amala dairy fixes ===== */

/* One unified nav across ALL pages, home included: a solid dark scheme bar with
   logo left + menu right and white text. The template paints
   .top_panel_wrap_inner white, covering the outer wrap, so color the inner too. */
.top_panel_wrap.top_panel_style_4 { position: sticky; top: 0; z-index: 1000; }
.top_panel_wrap.top_panel_style_4,
.top_panel_style_4 .top_panel_wrap_inner { background: var(--accent-dark) !important; }
.top_panel_wrap.top_panel_style_4 .top_panel_middle { padding: 6px 0; }
.top_panel_style_4 .menu_main_nav > li > a,
.top_panel_style_4 .logo_text { color: #fff !important; }
/* Logo hard-left, menu hard-right, both vertically centered in the bar. */
.top_panel_style_4 .top_panel_middle > .content_wrap {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
}
/* the template's clearfix :before/:after become stray flex items that eat the
   space-between gap — remove them so the menu can reach the right edge */
.top_panel_style_4 .top_panel_middle > .content_wrap::before,
.top_panel_style_4 .top_panel_middle > .content_wrap::after { display: none !important; }
.top_panel_style_4 .contact_logo,
.top_panel_style_4 .menu_main_wrap { float: none; margin: 0; flex: 0 0 auto; }
.top_panel_style_4 .logo { margin: 0; }
/* keep the menu a single horizontal row pinned to the right (no float wrap) */
.top_panel_style_4 .menu_main_wrap .menu_main_nav { display: flex; flex-wrap: nowrap; }
.top_panel_style_4 .menu_main_wrap .menu_main_nav > li { float: none; display: block; }
/* Sep 22 2026 client meeting: nav links read lowercase, 16px / 400 / no tracking.
   Covers the desktop bar, the About dropdown (Staff/Story) and the mobile menu.
   Top-level padding is scaled by 15/16 so the bar keeps its original height. */
.menu_main_nav > li > a,
.menu_main_nav > li > ul > li > a {
  text-transform: lowercase !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.menu_main_nav > li > a { padding: 1.36em 1.62em 1.27em !important; }

/* Page-title band: solid scheme color (replaces yellow/milk bg_cust_1),
   centered, no breadcrumb. */
.top_panel_title .top_panel_title_inner,
.top_panel_title .top_panel_title_inner.bg_cust_1 {
  background: var(--accent) !important; background-image: none !important;
  text-align: center; padding: 3.2rem 1rem !important;
}
.top_panel_title .page_title {
  color: #fff !important; margin: 0;
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-weight: 700 !important; text-transform: none !important;
}
.top_panel_title .breadcrumbs { display: none !important; }
/* Sep 22 2026 (Sam): the "line . line" divider motif is removed site-wide —
   under page titles (spans removed from the HTML) and under every section
   title (template's .sc_item_title decoration, below). */
.top_panel_title .amala_subtitle {
  display: block; color: #fff; opacity: .92; margin-top: .8rem;
  font-size: 1.1rem; font-style: italic;
}

/* Eight Limbs / price-block lists were clipped to 3 items — show all. */
.sc_price_block,
.sc_price_block_description,
.sc_price_block_description ul,
.columns_wrap.sc_columns_count_2 .sc_column_item {
  height: auto !important; max-height: none !important; overflow: visible !important;
}


/* Remove the dairy "milk splash" yellow band (yellow_bg.jpg) wherever it bleeds
   in — the empty services spacer and the home Mission Statement band. */
.vc_custom_1475063547001 { background-image: none !important; }
/* Home Mission Statement band: plain white (Sep 22 2026 client meeting) instead
   of the milk image — the template's section_style_dark_text colours apply. */
.home2 .vc_custom_1475063547001::before { background-color: #fff; }

/* ---- accessibility: scroll-reveal safeguard ----
   (comment moved down from ~L78 on Oct 2 2026 so it sits with the rules it
   describes - it had been orphaned several blocks above them.)
   The template hid [data-animation] sections at visibility:hidden
   (core.animation.css:10) / opacity:0 until core.animation.js revealed them,
   so a failed observer or disabled JS left the page blank.
   Oct 2 2026: the scroll fade-in is RETIRED - every data-animation attribute
   is gone from the HTML. These rules stay as a defensive backstop: if an
   attribute is ever reintroduced (template markup pasted in, a partial
   restore), the section still renders instead of disappearing. Reduced-motion
   users additionally get no motion at all, below. */
.sc_section[data-animation],
[data-animation] {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* Contact page: remove the large gap between the header band and the form
   (the default .page_content_wrap top padding is ~100px). */
body.contacts .page_content_wrap { padding-top: 1.5rem !important; }
/* Events page: the template's huge section margins left ~150px of blank above
   the intro line and below the list (Sep 22 2026 QA). */
body.events .page_content_wrap { padding-top: 1.5rem !important; padding-bottom: 2rem !important; }
body.events .page_content_wrap .sc_section.margin_top_huge { margin-top: 2rem !important; }
body.events .page_content_wrap .sc_section.margin_bottom_huge { margin-bottom: 3rem !important; }

/* Section titles ("Mission Statement", "Core Values", "Educational Degrees",
   "Upcoming Events"...): no line . line under them (Sep 22 2026, Sam), and
   drop the 3.2rem the template reserved for the dot. */
.sc_item_title:after,
.sc_item_title span:before,
.sc_item_title span:after { display: none !important; content: none !important; }
.sc_item_title { padding-bottom: 0.4rem; }

/* Service cards (home + services page): equal-height columns so the "read more"
   buttons bottom-align, centered as a group (2 cards since sound baths was
   removed, Sep 22 2026), with space above the button. */
.sc_services_style_services-1 .sc_columns.columns_wrap { display: flex; flex-wrap: wrap; justify-content: center; }
.sc_services_style_services-1 .column-1_3 { display: flex; }
.sc_services_style_services-1 .sc_services_item { display: flex; flex-direction: column; width: 100%; }
.sc_services_style_services-1 .sc_services_item_content { display: flex; flex-direction: column; flex: 1 1 auto; }
.sc_services_style_services-1 .sc_services_item_description { display: flex; flex-direction: column; flex: 1 1 auto; }
.sc_services_style_services-1 .sc_services_item_description p { margin-bottom: 1.5rem; }
.sc_services_style_services-1 .sc_services_item_description .sc_button { margin-top: auto !important; align-self: center; }

/* Core Values: 3 across the top row, 2 centered on the bottom (was 4 + 1). */
.home2 .columns_wrap.sc_columns_count_5 {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3%;
  /* Oct 2 2026: the template gives .columns_wrap a negative right margin (its
     gutter trick, paired with column padding we override), which made this grid
     30px wider than the content column and pushed it 15px right of the heading. */
  margin-left: 0 !important; margin-right: 0 !important;
}
.home2 .columns_wrap.sc_columns_count_5 > .column-1_5 {
  width: 30%; max-width: 30%; margin: 0; float: none; box-sizing: border-box;
  border: 1px solid #e6e6e6; border-radius: 4px; padding: 2rem 1.5rem;
  background: #fff; transition: box-shadow 300ms ease;
}
.home2 .columns_wrap.sc_columns_count_5 > .column-1_5:hover {
  box-shadow: 0 0 10px 5px #ebebeb;
}
/* Oct 2 2026 (Sam: tiles not centred): the template's .columns_wrap clearfix
   :before/:after turn into stray flex items in this grid - :before sat at the start
   of the first row and pushed the three tiles ~30px right (past the content edge),
   :after took an empty row of its own below. Same fix as the header's content_wrap. */
.home2 .columns_wrap.sc_columns_count_5::before,
.home2 .columns_wrap.sc_columns_count_5::after { display: none !important; }

/* Photo bands ("Coming soon" on services.html; formerly the home Our Story band):
   darken the shared hero photo so the text reads, and keep the band title white
   (the template paints inverse_colors titles in the accent, illegible on the photo). */
.vc_custom_1475148381788::before {
  background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url(../images/hero.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.vc_row.inverse_colors.vc_custom_1475148381788 .sc_item_title { color: #fff !important; }

/* "Get in touch" moved into the page flow (below Services) — break it out to
   full viewport width so the dark band still spans edge to edge. */
.home2 .post_content > .call_wrap {
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}

/* Slightly larger body paragraphs across the site (paragraphs only). */
.body_wrap p { font-size: 16.5px; line-height: 1.6em; }



/* About split (7/7 meeting) — Sam's name keeps its size, credentials a
   bit smaller. */
.team_title .amala-creds { font-size: 0.65em; font-weight: 400; }

/* About nav dropdown — keyboard fallback for the superfish hover menu
   (desktop nav only; the mobile panel uses its own click toggles). */
.menu_main_nav_area.menu_hover_fade .menu_main_nav > li.menu-item-has-children:focus-within > ul.sub-menu {
  display: block;
}

/* "Get in touch" band — 7/7 meeting: title removed, text slides to the
   left edge, buttons (Contact + Accessibility) grouped on the right. */
.call_wrap_inner .call-text { margin-left: 0; }
/* Sep 22 2026 QA: the accent green on the #231f20 band measured 4.25:1 (sage)
   down to 1.9:1 (dusk) — use the light accent tint so it passes AA everywhere.
   Oct 2 2026: the `footer` tag dropped out of the selector — the call band is a
   <div class="call_wrap"> now (it was <footer>, which is not a landmark the band
   deserves). Nothing in theme.css targets .call-text directly; its colour was
   only ever inherited from `.scheme_original footer .call_wrap_inner`
   (theme.css:1721, ported below as `.scheme_original .call_wrap
   .call_wrap_inner`), and a direct match plus !important beats inheritance
   outright. Specificity is (0,4,0) here vs (0,3,1) before, so this also still
   wins anything that tied with the old selector. */
.scheme_original .call_wrap .call_wrap_inner .call-text { color: var(--accent-lighter) !important; }
.call_wrap_inner .call-buttons {
  float: right;
  display: flex;
  gap: 12px;
  margin: 0.5em 0 0;
}
.call_wrap_inner .call-buttons .sc_button { float: none; margin: 0; }
/* Oct 2 2026 (Sam): the call-band buttons (contact / accessibility / view services)
   read lowercase like the nav and the green buttons. Case only: size, weight and
   the button box are unchanged. */
.call_wrap_inner .call-buttons .sc_button { text-transform: lowercase !important; }
@media (max-width: 767px) {
  .call_wrap_inner .call-buttons {
    float: left;
    clear: left;
    flex-wrap: wrap;
    margin-top: 1.5em;
  }
}

/* Footer socials sit in the LEFT column under the wordmark + tagline,
   matching the ecoisty footer's left side. */
.footer_wrap .widget_text .sc_socials { margin-top: 6px; }

/* Footer social icons — ecoisty style (ported from ecoisty style.css
   .main-footer .footer-social): outlined transparent circle, muted grey
   icon, fills with the scheme accent on hover. Replaces the dairy-farm
   solid accent-filled circles. */
.footer_wrap .sc_socials .sc_socials_item { margin: 0 2px 0 0 !important; }
.footer_wrap .sc_socials a {
  width: 40px !important;
  height: 40px !important;
  line-height: 38px !important;
  background: transparent !important;
  border: 1px solid #939991 !important;
  border-radius: 50% !important;
  color: #c0c6ca !important;
  transition: all 500ms ease !important;
}
.footer_wrap .sc_socials a span {
  font-size: 15px !important;
  line-height: inherit !important;
  color: inherit !important;
  transition: color 500ms ease;
}
.footer_wrap .sc_socials a:hover,
.footer_wrap .sc_socials a:focus-visible {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ===== Web fonts (baked in at build time) =====
   Client decision (Sep 9 2026): Zilla Slab Light headlines, Lexend Light copy.
   Sep 22 2026: the "Practice Amala" wordmark is Lexend too - 300 in the nav and
   the footer, 400 in the hero (rule further down this file). */

:root {
  --amala-head: 'Zilla Slab', Georgia, serif;
  --amala-copy: 'Lexend', Arial, sans-serif;
}

/* copy roles: body text plus template bits that hard-code Average/Libre/Oswald */
:root body,
:root .top_panel_top,
:root .top_panel_middle .contact_cart > a > span:not(.contact_icon),
:root .post_info_posted,
:root blockquote > a,
:root blockquote > p > a,
:root blockquote cite,
:root .sc_form .sc_form_item label,
:root .sc_price,
:root .sc_dropcaps .sc_dropcaps_item,
:root .sc_table table tr:first-child th,
:root .sc_table table tr:first-child td,
:root .b-tag,
:root .pagination_single > .pager_numbers,
:root .pagination_single a {
  font-family: var(--amala-copy);
  font-weight: 300;
}
:root input,
:root textarea,
:root select {
  font-family: inherit;
  font-weight: inherit;
}

/* headline roles: headings, page-title band, nav (incl. dropdowns), buttons, tab titles */
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6,
:root .top_panel_title .page_title,
:root .top_panel_title .post_navi,
:root .menu_main_nav > li > a,
:root .menu_main_nav > li > ul,
:root .sidebar_outer_menu .menu_side_nav > li > a,
:root .sidebar_outer_menu .menu_side_nav > li ul,
:root .sidebar_outer_menu .menu_side_responsive > li ul,
:root .sc_button,
:root .theme_button,
:root button,
:root input[type="submit"],
:root input[type="reset"],
:root input[type="button"],
:root .sc_tabs .sc_tabs_titles li,
:root .sc_recent_news .post_item .post_title,
:root .sc_recent_news .post_item h6.post_title,
:root .sc_price_block .sc_price_block_title,
:root .sc_countdown .sc_countdown_digits,
:root .sc_countdown .sc_countdown_separator,
:root .widget_area .widget_calendar .month_cur,
:root .comments_list_wrap .comment_reply {
  font-family: var(--amala-head);
  font-weight: 300;
}

/* page-title band (pinned to Libre Baskerville !important above) and the
   events.html calendar headings (same, in amala-calendar.css) */
:root .top_panel_title .page_title,
:root .amala-cal-month,
:root .amala-event-title,
:root .amala-event-day {
  font-family: var(--amala-head) !important;
  font-weight: 300 !important;
}


/* ===== Story page: one flowing chronological narrative (replaced the milestone tabs) ===== */
.amala-story-narrative { max-width: 860px; }
.amala-story-narrative p { margin-bottom: 1.15em; }
.amala-story-milestone {
  display: flex; align-items: center; gap: 14px;
  text-transform: none;
  margin: 2.6rem 0 1.2rem;
  color: var(--accent-dark);
  font-size: 1.4rem; line-height: 1.3; letter-spacing: .02em;
}
.amala-story-milestone:first-child { margin-top: .8rem; }
/* short accent rule after each milestone title — echoes the page-title divider motif */
.amala-story-milestone::after {
  content: ''; height: 1px; flex: 0 0 70px; background: var(--accent-lighter);
}

/* ===== Wordmark: "Practice Amala" is Lexend Light everywhere (nav, hero, footer) =====
   Sep 22 2026 client meeting: replaces the Crete Round business-card match.
   Must stay AFTER the headline rules above (equal specificity; source order wins). */
.logo_text.amala-wordmark,
.amala-hero-wordmark.amala-wordmark,
.footer_wrap .amala-wordmark {
  font-family: 'Lexend', Arial, sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
.footer_wrap .amala-wordmark { color: #fff; }
/* hero wordmark: larger than the nav wordmark */
.amala-hero-wordmark.amala-wordmark {
  font-size: min(140px, 9.3vw) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

/* ===== Sep 22 2026, round 2 (user's own list) ===== */

/* About dropdown (Staff / Story): template renders sub-menu links at 12px vs
   15px for the top-level items — match the top level and give them room. */
.menu_main_nav > li > ul > li > a {
  font-size: 16px !important;
  line-height: 1.4 !important;
  padding: 0.55em 1em !important;
  text-align: center !important;
}

/* Services: a paragraph of air between the last line of copy and the dark
   price card (both intentional flow and groups)... */
.amala-price-single { margin-top: 1.6rem; }
/* ...and the divider between intentional flow and groups carried ~150px of
   template margin on each side — bring both gaps down. */
.sc_line.sc_line_position_center_center { margin: 3.2rem 0 3rem !important; }

/* Story: less air above "The Path to Amala" and after the last line. */
body.story .page_content_wrap { padding-top: 1.5rem !important; padding-bottom: 2.5rem !important; }
body.story .sc_section > .sc_section_inner > .sc_item_title { margin-top: 1.6rem; }
body.story .sc_section.margin_bottom_huge { margin-bottom: 1.5rem !important; }

/* Accessibility statement: same tightening as story/events — the template's
   ~106px/~165px page padding plus the section's 9.2rem/9.5rem "huge" margins
   left ~250px of blank above the copy and ~315px below (Sep 23 2026, Sam). */
body.accessibility .page_content_wrap { padding-top: 1.5rem !important; padding-bottom: 2.5rem !important; }
body.accessibility .sc_section.margin_top_huge { margin-top: 2rem !important; }
body.accessibility .sc_section.margin_bottom_huge { margin-bottom: 1.5rem !important; }

/* Contact: tighter above and below the email / phone / social row. */
body.contacts .sc_columns_count_3.margin_top_huge { margin-top: 2.5rem !important; }
body.contacts .sc_columns_count_3.margin_bottom_huge { margin-bottom: 1rem !important; }
body.contacts .page_content_wrap { padding-bottom: 2rem !important; }

/* Footer: the email / phone / accessibility block sits flush with the right
   edge of the footer, text still left-aligned inside the block. */
.footer_wrap .widget_socials .widget_inner {
  display: table;          /* shrink-wrap to the text width... */
  margin-left: auto;       /* ...and push the block to the column's right edge */
  text-align: left;
}

/* Filled buttons ("read more", "book", "contact us", "Send Message", the
   calendar's "event details"): the template set dark #231f20 text on the
   accent green at weight 300 — swap to white + bold for legibility. The
   hover state (accent-dark background) keeps the same white bold text.
   Oct 2 2026: the bare `button` half of this needs more guards. Three elements
   that used to be a <div> or an <a> are real <button>s now (scroll-to-top, the
   mobile menu toggle, the mobile panel's Close), and they are NOT green
   buttons — white + 700 would repaint the dark hamburger white and re-weight
   "Close". Excluded here, same trick the calendar nav already uses; each keeps
   the colour its own class rule gives it. */
.scheme_original .sc_button.sc_button_style_filled,
.scheme_original .sc_button.sc_button_style_filled:hover,
.scheme_original .sc_form .sc_form_button button,
.scheme_original .sc_form .sc_form_button button:hover,
.scheme_original button:not(.amala-cal-nav):not(.scroll_to_top):not(.menu_button):not(.close),
.scheme_original button:not(.amala-cal-nav):not(.scroll_to_top):not(.menu_button):not(.close):hover {
  color: #fff !important;
  font-weight: 700 !important;
}

/* ===== Sep 22 2026 client round — per-page blocks (one owner each) ===== */
/* ===== Homepage (Sep 22 2026 client round) ===== */


/* --- Mission Statement band ---------------------------------------------
   `.section_style_dark_text .sc_item_title` still reserved 3.2rem under the
   title for the divider dot that was removed globally, and the band was
   bottom-heavy (4rem + 0.6rem + 2rem). Even it out. */
.home2 .vc_custom_1475063547001 .sc_item_title {
  margin: 3.6rem 0 3rem;
  padding-bottom: 0;
}
.home2 .vc_custom_1475063547001 .sc_section_content_wrap > .sc_section_block {
  /* the template pulls this block up 24px, which ate half of the title's
     bottom margin — zero it so the 3rem below the heading is the real gap */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.home2 .vc_custom_1475063547001 > .wpb_column .sc_section.section_style_dark_text {
  margin-bottom: 3rem !important;
}

/* --- Core Values ---------------------------------------------------------
   Sam: "less space between Core Value text and the green line above it".
   Was margin_top_huge (9.2rem) + the title's own 5.6rem. One controlled
   2.8rem gap instead, and a shorter white tail before the green Offerings
   band below. */
/* Sep 22 2026 client meeting: the Core Values row is now its own full-width
   green band; the tiles stay white. */
.home2 .amala-core-values-band { background-color: var(--accent) !important; padding: 3rem 0 3.5rem; }
.home2 .amala-core-values-band::before { background-color: var(--accent); }   /* production full-bleed pseudo */
.home2 .amala-core-values-band .sc_item_title { color: #fff; }
.home2 .amala-core-values { margin: 0 !important; }
.home2 .amala-core-values > .sc_section_inner > .sc_item_title { margin-top: 0; }
/* The 3-up Core Values grid above is unconditional (width:30%), which left the
   five cards ~85px wide on a phone. Stack them below 660px. */
@media (max-width: 660px) {
  .home2 .columns_wrap.sc_columns_count_5 > .column-1_5 {
    width: 100%; max-width: 420px;
  }
}

/* --- Offerings band ------------------------------------------------------
   Sep 22 2026: the service cards row is a full-bleed WHITE band (Core Values
   took the green; two green bands in a row read as one). .amala-fullbleed::before
   paints the viewport-wide background, so the colour lives on the pseudo and
   only the padding stays on the row itself.
   Page order: hero > white mission > green core values > white offerings >
   dark call band > footer. */
.home2 .amala-offerings-band::before {
  background-color: #fff;
}
.home2 .amala-offerings-band {
  padding-top: 3.8rem;
  padding-bottom: 4rem;
}
.home2 .amala-offerings-band .vc_column-inner {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.home2 .amala-offerings-band .sc_services {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* cards sit flat on the white band (template paints them #fff anyway) */
.home2 .amala-offerings-band .sc_services_style_services-1 .sc_services_item {
  background-color: transparent !important;
}
.home2 .amala-offerings-band .sc_services_style_services-1.sc_services_type_images .sc_services_item_content {
  padding-bottom: 0 !important;
}
.home2 .amala-offerings-band .sc_item_descr {
  margin: 2.2rem 0 0;
}

/* ===== Services page (Sep 22 2026 client round) ===== */

/* Sam: "Only 1 box - Eight Limbs should be removed". The Astanga box is gone
   from #yoga and #groups, so each section's price row now holds a single
   .column-1_2. The columns are inline-blocks, so centre them with text-align
   on the wrapper (margin:auto does nothing for an inline-block) and zero the
   template's -4px gutter fudge so the box lands dead centre. */
.amala-price-single { text-align: center; }
.amala-price-single > [class*="column-"] {
  float: none;
  margin-right: 0;
  text-align: left;
}
/* Below the 2-column breakpoint the lone box should use the full width
   rather than sit at 50% with dead space beside it. */
@media (max-width: 767px) {
  .amala-price-single > [class*="column-"] { width: 100%; }
}
/* The template reserves 8.45em under the button so two price boxes match in
   height; with one box that is just a slab of dead colour. Scoped so the
   template's own shortcodes demo page keeps its original proportions. */
.amala-price-single .sc_price_block_link { height: auto; padding-bottom: 2.6rem; }
/* #groups has no trailing sc_line, so its box otherwise butts straight into
   the "Coming soon" band. */
.amala-price-single:last-child { margin-bottom: 3rem; }

/* Sam: "Price not larger $" - the template set the number at 3.4em and the
   currency at 1.4em, which read as a raised/superscript dollar sign. Same
   size, same baseline, no lift. The "/60 minutes" period is sized off
   .sc_price, so it is untouched. */
.sc_price_block .sc_price_block_money .sc_price_currency,
.sc_price_block .sc_price_block_money .sc_price_money {
  font-size: 2.2em;
  line-height: 1.1;
  vertical-align: baseline;
  position: static;
  top: auto;
}

/* ===== Staff page (Sep 22 2026 client round) ===== */
/* Sam: "WAY smaller, more compact." Same words, same components — just a
   tight vertical rhythm instead of the template's 6-10rem gaps. The Board of
   Directors placeholder block was removed from staff.html. */

/* The template reserves ~100px top / ~155px bottom on the page body. */
body.staff .page_content_wrap.page_paddings_yes {
  padding-top: 1.75rem !important;
  padding-bottom: 2.5rem !important;
}

/* --- Bio block (post_item_single_team) --- */
body.staff .post_item_single_team { margin-bottom: 0; }
body.staff .post_item_single_team .post_content { display: none; }
/* Narrower photo column (was 43%) so the name/creds sit alongside it. */
body.staff .post_item_single_team.post_featured_right .single_team_post_featured {
  width: 30%;
  padding: 0 0 1rem 2.5rem;
}
body.staff .post_item_single_team .single_team_post_featured .post_thumb {
  border-width: 8px;
}
body.staff .post_item_single_team .single_team_post_featured .socials_single_team {
  margin-top: 0.85rem;
}
body.staff .post_item_single_team .single_team_post_description .team_title {
  font-size: 2.15rem;
  line-height: 1.2;
  margin: 0 0 0.4rem;
}
/* Credentials a touch smaller again so name + creds hold one line here. */
body.staff .team_title .amala-creds { font-size: 0.55em; }
body.staff .post_item_single_team .single_team_post_description .team_position {
  font-size: 13px;
  letter-spacing: 0.12em;
  margin: 0 0 0.9rem;
  /* Oct 2 2026: "Founder" is a <p> now (it was an h6 that broke the heading order);
     these pin the h6 look it had. */
  font-family: "Zilla Slab", Georgia, serif;
  text-transform: uppercase;
  /* Oct 2 2026 accessibility pass: was #a0a0a0, the template's h6 grey — 2.56:1
     on white, and this is 13px text, so it needed AA 4.5:1. #767676 is the
     lightest neutral grey that reaches it (4.54:1) — same tone, just legible. */
  color: #767676;
  line-height: 1.2em;
}
body.staff .post_item_single_team .single_team_post_description .team_brief_info {
  margin-top: 0;
}
body.staff .post_item_single_team .single_team_post_description .team_brief_info_title {
  margin: 0 0 0.3rem;
  /* Oct 2 2026: h5 -> h3 for the outline; keep the template's h5 size per breakpoint */
  font-size: 1em;
  line-height: 1.25em;
}
@media (min-width: 768px) and (max-width: 1262px) {
  body.staff .post_item_single_team .single_team_post_description .team_brief_info_title { font-size: 1.2308em; }
}
@media (max-width: 767px) {
  body.staff .post_item_single_team .single_team_post_description .team_brief_info_title { font-size: 1.1667em; }
}
body.staff .post_item_single_team .single_team_post_description .team_brief_info_text p {
  margin: 0 0 0.85em;   /* Oct 2 2026: Sam's "About me" is six paragraphs */
}
body.staff .post_item_single_team .single_team_post_description .team_brief_info_text p:last-child {
  margin-bottom: 0;
}

/* --- Compact rhythm shared by the two lower sections --- */
body.staff .sc_section.amala-sec { margin-bottom: 2.5rem; }
/* Section titles stay below Sam's name in the hierarchy. */
body.staff .sc_item_title {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 1.5rem 0 0.75rem;
}

/* --- Educational Degrees (3 columns) --- */
body.staff .amala-degrees .sc_title {
  font-size: 1.15rem;
  line-height: 1.3;
  text-transform: none;   /* Oct 2 2026: h4 -> h3 for the outline; the template uppercases h3 */
  margin: 0 0 0.5rem;
  min-height: 2.6em; /* 2 lines, so the three paragraphs start level */
}
body.staff .amala-degrees .wpb_text_column p {
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
}
/* Oct 2 2026 (Sam): more air above and below Educational Degrees so the page reads
   as three sections - bio / degrees / licences + trainings. Specificity matches the
   .amala-sec rhythm rule above so these margins win. 72px above and below on desktop
   (the title's own 1.5rem top margin collapses into the 4.5rem, it does not add);
   36px each side on phones, where the root font-size is 12px. */
body.staff .sc_section.amala-degrees { margin-top: 4.5rem; margin-bottom: 4.5rem; }
@media (max-width: 767px) {
  body.staff .sc_section.amala-degrees { margin-top: 3rem; margin-bottom: 3rem; }
}

/* --- Licences & Certifications / Professional Trainings --- */
body.staff .amala-quals .sc_title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  text-transform: none;   /* Sep 23 2026: client wants title case, not the template's uppercase h3 */
}
body.staff .amala-quals .sc_list_style_iconed li {
  font-size: 15.5px;
  line-height: 1.45;
  margin-bottom: 0.3rem;
}

/* --- Mobile: stack the bio, photo above the text --- */
@media (max-width: 767px) {
  body.staff .post_item_single_team.post_featured_right .single_team_post_featured {
    float: none;
    width: 100%;
    max-width: 320px;
    padding: 0 0 1.25rem;
  }
  body.staff .post_item_single_team .single_team_post_description .team_title {
    font-size: 1.8rem;
  }
  /* keep the name above the section titles in the hierarchy on small screens */
  body.staff .sc_item_title { font-size: 1.5rem; }
  body.staff .amala-degrees .sc_title { min-height: 0; }
  body.staff .amala-quals .sc_columns .column-1_2:last-child { margin-top: 1.5rem; }
}

/* ===== Sep 23 2026: green (filled) buttons sitewide =====
   Lowercase, 15px / 400 (were 12px / 700 uppercase; Send Message was 15px / 700).
   Heights and side padding are pinned to what each button had before the type
   change, so the boxes keep their size: small buttons 44px tall (read more, book,
   contact us, Event details), the contact form button 55px. The hero CTA keeps
   its own spec (20px, "The Path to Amala"). */
.sc_button.sc_button_style_filled.sc_button_size_small,
.amala-event-link {
  text-transform: lowercase !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  box-sizing: border-box;
  height: 44px;
  padding: 0 45.6px !important;
  line-height: 40px !important;
}
/* specificity (0,4,1): must beat the dev-only three-:not() button rule above (switcher guards) */
.scheme_original .sc_form .sc_form_item.sc_form_button button[type="submit"] {   /* QA Oct 2: (0,5,1), later in source, so 400 beats the generic button rule */
  text-transform: lowercase !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  box-sizing: border-box;
  height: 55px;
  min-width: 223px;
  padding: 0 54.45px !important;
  line-height: 51px !important;
}

/* Sep 23 2026: the three service-card titles used to drop 28px -> 18px at 1279px
   and -> 16px at 767px with the template's body-font breakpoints. Scale smoothly. */
.sc_services_style_services-1 .sc_services_item_title {
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.3em !important;      /* Oct 2 2026: tags are h3 (home) / h2 (services) now, keep the h4 look */
  text-transform: none !important;
}
/* ===== Static hero + full-bleed bands =====
   Originally generated from tools/prod/amala-prod.css by the build pipeline that was
   retired on Sep 23 2026; this is now plain site CSS. Mentions of tools/ or
   build-prod.py below are historical. */
/* ==========================================================================
   amala-prod.css - production-only rules (generated build; not loaded in dev)
   --------------------------------------------------------------------------
   tools/build-prod.py APPENDS this file verbatim to the END of
   css/amala-theme.css when it generates amala-site/. It is never served on its
   own, so every url() below resolves relative to css/ - hence
   ../images/hero.jpg.

   Because it is appended, it lands AFTER every rule already in
   amala-theme.css, including the two wordmark rules the build retargets onto
   .amala-hero-wordmark.amala-wordmark (Sep 22 2026: the wordmark is Lexend
   everywhere - nav/footer 300, hero 400 - it is no longer the business-card
   face). Those two carry !important on font-family / font-weight /
   font-size / line-height, so they win over section 2 below regardless of
   order; section 2 repeats the same values so this file still documents the
   whole hero on its own and renders correctly if the dev rule is ever
   dropped. It does mean NO rule in this file may TIE on specificity with an
   amala-theme.css rule, or it silently flips the winner. See the
   .wpb_text_column note in section 1.

   It replaces the two template subsystems the production build drops:
     * the slider hero        ->  .amala-hero        (markup: tools/prod/hero.html)
     * the Visual Composer    ->  .amala-fullbleed   (+ the carry-overs in 1.)

   Every number was measured off the live dev homepage (sage scheme, Zilla Slab
   headlines / Lexend copy, animations on) at 1400 / 1024 / 768 / 480 / 390 px.
   Static hero vs slider: max deviation 0.68 px at those five widths.

   ORDER MATTERS, twice over - do not reorder:
     * section 1 must stay above section 3 - .amala-fullbleed::before
       deliberately overrides the .vc_row::before clearfix, and those two
       selectors have equal specificity, so source order is what decides.
     * inside section 1, .vc_col-sm-12 must stay above .vc_column_container.

   NOTE: the forbidden-string scan in build-prod.py covers output CSS, so these
   comments deliberately avoid the banned literals. Keep it that way.
   ========================================================================== */


/* ==========================================================================
   1.  Visual Composer stylesheet carry-overs
   --------------------------------------------------------------------------
   The dropped Visual Composer stylesheet is 456 KB; enumerating its rules in
   the browser against the live DOM of all 7 pages showed only 13 of them match
   anything at all. Three of those 13 are NOT carried over:

     .wpb_content_element { margin-bottom: 35px }
         dead - style.css:6845 sets margin-bottom:0 !important on the same
         element, and !important wins regardless of sheet order.

     the full-width row rule (transition: opacity .5s; overflow: hidden)
         its attribute hook is stripped from the HTML; the overflow clip moves
         to .amala-fullbleed > .wpb_column in section 3 (the row itself must
         NOT clip, or it clips its own full-bleed background - verified: the
         band edges go white).

     .wpb_text_column p:last-child { margin-bottom: 0 }
         see the note above the single-selector version below.

   The rest are reproduced in the source order the original used. That order is
   load-bearing: the later .vc_column_container{padding:0} is what cancels the
   .vc_col-sm-12 grid gutter, so the 15px gutter comes from .vc_column-inner
   alone. Swap the two and every band's text moves in by 15px (measured: the
   390px homepage also grows 115px taller).
   ========================================================================== */
.vc_row { margin-left: -15px; margin-right: -15px; }
.vc_row::before, .vc_row::after,
.vc_column-inner::before, .vc_column-inner::after { content: " "; display: table; }
.vc_row::after, .vc_column-inner::after { clear: both; }
.vc_col-sm-12 {
  position: relative; min-height: 1px;
  padding-left: 15px; padding-right: 15px; box-sizing: border-box;
}
@media (min-width: 768px) { .vc_col-sm-12 { float: left; width: 100%; } }
.vc_column_container { width: 100%; padding-left: 0; padding-right: 0; }
.vc_column_container > .vc_column-inner {
  box-sizing: border-box; padding-left: 15px; padding-right: 15px; width: 100%;
}
/* The original shipped this as two selectors:
       .wpb_text_column :last-child      (0,2,0)
       .wpb_text_column p:last-child     (0,2,1)
   Only the (0,2,0) half is carried over, on purpose. That stylesheet used to
   load BEFORE amala-theme.css, so amala-theme.css:207
       .sc_services_style_services-1 .sc_services_item_description p
           { margin-bottom: 1.5rem }
   - also (0,2,1) - beat it on source order. This file is appended AFTER that
   rule, so keeping the (0,2,1) half would flip the winner and close up 24px
   under every services.html service card (measured: -24px at 1400, -18px at
   390, cascading ~46px off the page height).
   The (0,2,0) half still outranks style.css `p { margin-bottom: 1.4em }`,
   which is where the 0 is genuinely needed - dropping it entirely pushes
   index.html down 46px at 1400 and 115px at 390. */
.wpb_text_column :last-child { margin-bottom: 0; }


/* ==========================================================================
   2.  Static hero  (markup: tools/prod/hero.html, replaces the slider section)
   --------------------------------------------------------------------------
   Reproduces the slider's HERO BAND geometry without the slider. The slider
   was built on a 1240x762 grid with layout "auto", so the band scaled by
   r = min(1, viewport / 1240):

     height      762 * r                  ->  min(762px, 100vw * 762 / 1240)

   That height is still exact parity, and verify-prod.py still gates it: the
   whole page below the hero hangs off it.

   INSIDE the band, parity with the slider is NO LONGER the goal (Sep 22 2026
   client round - the dev slider's own layer layout is being retuned, and the
   two engines centre differently anyway). So the layout here is the simple,
   honest one: a centred column, one gap, no transform nudge. verify-prod.py
   reports the wordmark/CTA rects instead of gating them (`--gate-hero` turns
   the old gate back on).

   Type comes from the client meeting, not from the slider:
     wordmark  "Practice Amala"   Lexend 400, min(140px, 9.3vw), line-height 1.2
     button    "The Path to Amala" sentence case, padding 26px 47px
                                   (14px 24px at <=767px)
   The wordmark's font-family, font-size, line-height and font-weight are also
   set - with !important - by the dev wordmark rule that the build retargets
   onto .amala-hero-wordmark.amala-wordmark, so that rule is what actually
   wins; the identical values below keep this file readable on its own and are
   what renders if the dev rule is ever dropped. white-space: nowrap is not
   decoration on either element: both are single-line at every width.
   ========================================================================== */
.amala-hero {
  position: relative;
  overflow: hidden;
  background-color: #231f20;                    /* sits behind the photo, as before */
  /* The slider set this height from JS, so it was always a whole number:
     Math.round(762 * vw / 1240). A plain calc() keeps the fraction (629.26px
     at 1024, 239.66px at 390) and the whole page below the hero then lands on
     a different half-pixel than dev - identical pixels, rasterised 1px off.
     round() reproduces the JS rounding exactly: 762 / 629 / 472 / 240 px at
     1400 / 1024 / 768 / 390, matching dev to 0.00px.
     The plain calc() stays first as the fallback for engines without round()
     (Chrome < 125, Firefox < 118); they get the old sub-pixel height, which
     is visually identical - never a collapsed hero. */
  height: min(762px, calc(100vw * 762 / 1240));
  height: min(762px, round(nearest, calc(100vw * 762 / 1240), 1px));
}
.amala-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/hero.jpg) center / cover no-repeat;
  /* 0.3025, not 0.55. amala-theme.css dev L242-244 puts brightness(0.55) on
     BOTH the slide holder and the image layer inside it - and those two are
     nested, so the dev photo is darkened twice: 0.55 x 0.55 = 0.3025.
     (Measured on the dev homepage at 1400: photo median grey 46; with a single
     0.55 it renders 82.) The wordmark and the button are NOT in that subtree,
     so they stay pure white / full-strength accent in both builds - only the
     photo is affected, and a darker photo can only help the white text. */
  filter: brightness(0.3025);                   /* darkens the photo, not the text */
}
.amala-hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* One plain gap, no transform. The pair is simply centred in the band; the
     old tuned formulas chased the slider's asymmetric -60/+95 layer offsets,
     which are no longer the target. Scales with the wordmark so the pair keeps
     its proportions: 44px from ~1420px down to 20px on phones. */
  gap: clamp(20px, 3.1vw, 44px);
}
.amala-hero .amala-hero-wordmark {
  /* Scoped to .amala-hero: a bare .amala-hero-wordmark (0,1,0) loses `color`
     to the template's .scheme_original h1 (0,1,1) and renders near-black. */
  margin: 0;
  color: #fff;
  font-size: min(140px, 9.3vw);                 /* matches the dev hero layer */
  line-height: 1.2;
  font-weight: 400;                             /* one step above the nav wordmark */
  letter-spacing: normal;                       /* h1 elsewhere carries tracking */
  text-transform: none;                         /* "Practice Amala", as written */
  white-space: nowrap;
  /* font-family (Lexend) comes from the wordmark rule earlier in this
     stylesheet, which the build retargets onto
     .amala-hero-wordmark.amala-wordmark. That rule also repeats font-size /
     line-height / font-weight with !important, so it - not this block - is
     what wins; the values are identical on purpose. Without it this renders
     in Zilla Slab. */
}
.amala-hero .amala-hero-cta {
  /* Scoped for the same reason: a bare class loses `color` to
     .scheme_original a and renders in the accent green on accent green. */
  display: inline-block;
  background-color: var(--accent);
  border: 2px solid var(--accent);
  color: #fff;
  font-family: var(--amala-head);
  font-weight: 300;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.25;
  letter-spacing: normal;
  padding: 17px 36px;
  text-transform: none;                         /* "The Path to Amala", as written */
  white-space: nowrap;
  text-decoration: none;
}
.amala-hero .amala-hero-cta:hover,
.amala-hero .amala-hero-cta:focus-visible {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
@media (max-width: 767px) {
  /* the gap clamp already bottoms out at 20px here; only the button shrinks */
  .amala-hero .amala-hero-cta { font-size: 14px; padding: 12px 20px; }
}


/* ==========================================================================
   3.  Full-bleed bands  (replaces the Visual Composer full-width runtime)
   --------------------------------------------------------------------------
   That runtime measured $(window).width() - which EXCLUDES the scrollbar -
   then stretched the row to it and wrote matching inline padding back, so the
   content never moved. A plain 100vw row is ~15px wider than that on Windows
   and shifts the content ~8px. So only the BACKGROUND bleeds here, on a
   viewport-wide pseudo-element; the row itself stays exactly where the normal
   flow puts it, and no content moves at all.
   (html { overflow-x: hidden } at style.css:79 clips the overhang.)

   .amala-fullbleed::before deliberately replaces the ::before clearfix from
   section 1 on these rows - that is why section 1 must come first. ::after
   must stay a clearfix: at >=768px the column is floated, so
   .vc_row::after { clear: both } is the only thing giving the row its height.

   The band colours and the photo band's image live in amala-theme.css, moved
   onto ::before by the CSS transforms in section 3 of the plan. The photo band
   needs background-size/position/repeat alongside its image: the pseudo has no
   intrinsic size, so `cover` is not optional there.

   Verified: ::before used width is exactly 100vw on every band at every width,
   and full-page pixel samples across each band (x = 0, 1, 5, w/2, w-6, w-2,
   w-1) are byte-identical to the dev page.
   ========================================================================== */
.amala-fullbleed {
  position: relative;
  z-index: 0;                 /* stacking context, so z-index:-1 stays inside */
  background: none !important;
}
.amala-fullbleed::before {
  content: "";
  display: block;             /* overrides the display:table clearfix above */
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}
/* The clip that used to sit on the full-width row itself. On the row it would
   clip the bleed above; on the column it still contains the fadeInUp reveal,
   and it changes no measured rect on any page or width. */
.amala-fullbleed > .wpb_column { overflow: hidden; }


/* =========================================================================
   Oct 2 2026: accessibility pass (WCAG 2.1 AA) — CSS half
   -------------------------------------------------------------------------
   Three things are happening in this pass and they all land here:

   1. SEMANTIC MARKUP, SAME LOOK. Several elements changed tag so the page has
      one landmark/heading structure instead of four footer elements and
      clickable divs: the dark call band is a <div class="call_wrap"> (was
      <footer>), the footer's two widget columns are <div>s (were <aside>), the
      copyright strip moved INSIDE the real <footer>, and scroll-to-top / the
      mobile menu toggle / the mobile panel's Close are real <button>s (were an
      <a> and two <div>s). The template styles a lot of that off the TAG, so
      those rules are ported to the classes below. Nothing here is meant to
      change a single pixel — if it does, it is a bug.

   2. KEYBOARD VISIBILITY. style.css:143 kills every focus outline site-wide
      (`:active, :focus { outline:0 }`), so there was no visible focus anywhere
      (WCAG 2.4.7). Rings are added back with :focus-visible, so they appear
      for keyboard users and never on a mouse click.

   3. CONTRAST (WCAG 1.4.3). The brand sage #6f8a5f carries white at 3.83:1 —
      fine for large headings (needs 3:1), short of the 4.5:1 small text needs.
      Client's call: sage keeps the big areas (page-title bands, the Core Values
      band, the mobile header), and --accent-dark #4f6543 (6.4:1 on white) takes
      the buttons and anything small sitting on green. Greys on the dark footer
      and the staff page move up to the lightest value that reaches 4.5:1.

   Measured with axe + hand-checked ratios; each ratio is noted at its rule.
   ========================================================================= */


/* -------------------------------------------------------------------------
   A1.  Call band: the footer element became <div class="call_wrap">
   -------------------------------------------------------------------------
   theme.css styles the ENTIRE band through the `footer` TAG, and the band is a
   SIBLING of the real footer on every page (on index.html it sits inside
   .post_content), never a descendant of one — so every one of these stopped
   matching the moment the tag changed. Un-ported, the band loses its #231f20
   background and its white buttons and renders sage-on-white.

   Ported verbatim, `footer` -> `.call_wrap`, values unchanged:
     theme.css:1721  .scheme_original footer .call_wrap_inner { color }
     theme.css:1724  .scheme_original footer .call_wrap_inner { background-color }
     theme.css:1727  ... .sc_button { color: #fff }
     theme.css:1730  ... .sc_button { border-color: #fff }
     theme.css:1733  ... .sc_button:hover { color: var(--accent) }
     theme.css:1736  ... .sc_button:hover { border-color: var(--accent) }
     responsive.css:30  footer .call_wrap_inner { margin-bottom: -1px }  (1263-1439px)

   Specificity goes (0,2,1) -> (0,3,0) and (0,4,1) -> (0,4,0), i.e. never lower
   than the rule it replaces, and these sit at the end of the last stylesheet
   so ties resolve here. The rule they must NOT outrank still outranks them:
   .scheme_original .sc_button.sc_button_style_border:hover carries
   `border-color: … !important` (theme.css ~2795) and keeps winning the hover
   border exactly as it does today. The .call-text override further up this
   file keeps its own !important.
   NOT ported: theme.css:1711's `footer .call_wrap_inner .call-title` half —
   the .call-title element was removed from the markup in the 7/7 round. Its
   other half (`footer.widget_area .widget_title`) is on the real footer, which
   is still a <footer>, so it is untouched.
   ------------------------------------------------------------------------- */
.scheme_original .call_wrap .call_wrap_inner {
  color: var(--accent);
  background-color: #231f20;
}
.scheme_original .call_wrap .call_wrap_inner .sc_button {
  color: #ffffff;
  border-color: #ffffff;
}
.scheme_original .call_wrap .call_wrap_inner .sc_button:hover,
.scheme_original .call_wrap .call_wrap_inner .sc_button:focus-visible {
  color: var(--accent-lighter);          /* Oct 2 2026: sage on #231f20 was 4.25:1 on hover */
  border-color: var(--accent-lighter);
}
@media (min-width: 1263px) and (max-width: 1439px) {
  .call_wrap .call_wrap_inner { margin-bottom: -1px; }
}


/* -------------------------------------------------------------------------
   A2.  Footer widgets: the aside columns became <div>s
   -------------------------------------------------------------------------
   The columns' own box (inline-block, vertical-align, 50% width, -4px gutter
   fudge, 30px padding-right, border-box) comes from `[class*="column-"]`
   (style.css:1233) and `.column-1_2` (style.css:1302) — class-based, so the
   tag change costs it nothing. What DID key on the tag:

     style.css:6121        .footer_wrap aside            { margin-bottom: 1.5em }
     theme.css:1600        .widget_area_inner aside + aside { border-color: #d3d3d3 }
     responsive.css:1836   (480-767px) .widget_area aside { width: 48% … }
     responsive.css:2858   (<=479px)   .widget_area aside { width: 100% … }
     style.css:56          `aside` in the global tag reset — only word-wrap and
                           -webkit-font-smoothing are not div defaults, and both
                           are re-applied by that same reset at the <p> level
                           inside (all the footer text lives in <p>s). word-wrap
                           is restated below anyway, for long email addresses.

   The responsive pair is the one that actually moves pixels: without it the
   columns would sit at 50% instead of 48% between 480-767px (and the -4px
   gutter fudge is the only thing keeping two 50% inline-blocks plus their
   source whitespace on one row), and would stay side-by-side instead of
   stacking with 3.5em of air below 480px.

   Checked and deliberately NOT ported, because none of them ever matched this
   footer — its columns are .column-1_2 and there are exactly two of them:
     style.css:6082, theme.css:1742, responsive.css:1430/1644/2692/2867
       footer .widget_area_inner aside.column-1_4:nth-child(n+5)   (no 1_4s)
     responsive.css:1854  .widget_area aside:nth-child(2n+3)/(2n+4) (needs >=3)
     style.css:3081       .widget_area aside .post_item + .post_item (no post widget)
     shortcodes.css:3638  aside .sc_recent_news …                  (no news widget)
     style.css:5836       .sidebar_outer aside, .sidebar aside+aside (sidebars hidden)
     responsive.css:975   .sidebar aside …                          (sidebars hidden)
   ------------------------------------------------------------------------- */
.footer_wrap .widget {
  margin-bottom: 1.5em;
  word-wrap: break-word;
}
.scheme_original .widget_area_inner .widget + .widget { border-color: #d3d3d3; }
@media (min-width: 480px) and (max-width: 767px) {
  .widget_area .widget {
    display: inline-block;
    float: none;
    vertical-align: top;
    width: 48%;
    margin-left: 4%;
  }
  /* the template's own two cancellations of that 4% — kept as separate rules so
     this block reads the same as the one it replaces */
  .widget_area .widget[class*="column-"] { margin-left: 0; }
  .widget_area .widget:nth-child(2n+1) { margin-left: 0; }
  .widget_area .widget + .widget {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
  }
}
@media (max-width: 479px) {
  .widget_area .widget {
    display: inline-block;   /* QA Oct 2: the template's value; 'block' let the two columns margin-collapse (-18px) */
    float: none;
    width: 100%;
    margin-left: 0 !important;
  }
  .widget_area .widget + .widget { margin-top: 3.5em; }
}


/* -------------------------------------------------------------------------
   A3.  Copyright strip moved INSIDE <footer class="footer_wrap">
   -------------------------------------------------------------------------
   It used to be a sibling of the footer; it is now the footer's last child, so
   the whole footer is one landmark. What was checked for new constraints:

     footer .footer_wrap_inner .content_wrap { overflow: hidden }  style.css:6087
         Not a constraint: .copyright_wrap is a sibling of .footer_wrap_inner,
         not a descendant of it, so neither it nor its own .content_wrap is
         matched. (Its text column still comes from .copyright_wrap_inner >
         .content_wrap, untouched.)
     .footer_wrap_inner { padding: 2.75em 0 0.6em }                style.css:6118
         On the inner div only — nothing on .footer_wrap itself.
     .body_filled .widget_area[class*="scheme_"]:not(.footer_wrap)
       .widget_area_inner { padding: 3.65em 2.65em 4.7em }         style.css:1676
         Explicitly EXCLUDES .footer_wrap, so no inset is added.
     .scheme_original footer .widget_area_inner { background-color: #231f20 }
         Paints the inner div only; the footer element itself stays transparent,
         so the strip's own .copyright_wrap_inner #181516 is what you see —
         exactly as when it was outside.
     .footer_wrap .widget { margin-bottom: 1.5em }                 (A2 above)
         .copyright_wrap carries no .widget class, so it is not caught.
     No rule anywhere sets width / max-width / padding / overflow / display on
     .footer_wrap as the subject, so the strip is still a plain full-width
     block in normal flow.

   Conclusion: nothing is strictly required. The rule below is a belt-and-
   braces pin so a future padding/float on .footer_wrap cannot inset the band,
   plus clear:both in case the columns above are ever floated again.
   ------------------------------------------------------------------------- */
.footer_wrap > .copyright_wrap {
  display: block;
  clear: both;
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}


/* -------------------------------------------------------------------------
   A4.  Button resets for the three elements that became <button>
   -------------------------------------------------------------------------
   scroll-to-top was an <a>; the mobile menu toggle and the panel's Close were
   <div>s. These strip the UA button chrome so each renders exactly as before,
   while every class-based rule the template already had for them keeps
   applying (size, position, background, the fontello icon on ::before).

   Why line-height is restated rather than inherited for scroll-to-top:
   `.scroll_to_top { line-height: 3em }` (style.css:6438) is (0,1,0), and
   `button.scroll_to_top` here is (0,1,1) — HIGHER — so a blanket
   `line-height: inherit` would clobber the 3em that centres the arrow glyph in
   the 3em box. It is pinned back to 3em instead.
   Everything else the template sets for these three is at (0,2,0) or better
   and so still outranks this block: .scroll_to_top's position/size/background/
   transition (style.css:6438, theme.css:1766-1778, responsive.css 1270/2489/
   3646), .header_mobile .menu_button's position + transparent background +
   26px/25px type (style.css:3381, 3396; responsive.css:3714) and its #231f20
   colour (theme.css:1104), and .header_mobile .side_wrap .close's
   position/uppercase/display (style.css:3434) and hover colour (theme.css:1124).
   No class rule sets padding on any of the three, so padding:0 is safe for all.
   The two mobile ones are absolutely positioned, so they are blockified and do
   not need a `display` reset for the div -> button change.
   ------------------------------------------------------------------------- */
button.scroll_to_top,
button.menu_button,
button.close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  /* UA buttons are border-box, the <div>/<a> they replace were content-box.
     With padding and border both 0 the rendered box is identical either way
     (verified by cloning each one back to its old tag and diffing), but pinning
     it means a future padding behaves the way it would have on the original. */
  box-sizing: content-box;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: inherit;
  text-decoration: none;
  cursor: pointer;
}
button.menu_button,
button.close {
  background: transparent;
  line-height: inherit;
}
button.close {
  /* The <div> had no transition; `a, button { transition: all .3s ease }`
     (style.css:133) would have faded the Close label's hover colour in over
     300ms instead of snapping as it did before. (.menu_button and
     .scroll_to_top are unaffected — each has its own transition in its class
     rule, so they keep the timing they already had.) */
  transition: none;
}
button.scroll_to_top {
  /* Both restated for the same reason: `.scroll_to_top` (style.css:6438) sets
     line-height:3em and text-align:center at (0,1,0), and `button.scroll_to_top`
     is (0,1,1) — HIGHER — so the blanket `line-height: inherit` /
     `text-align: inherit` above would clobber the two values that centre the
     fontello arrow in the 3em box. Verified against a cloned <a>: identical. */
  line-height: 3em;
  text-align: center;
}


/* -------------------------------------------------------------------------
   A5.  Sticky-header offset + keyboard focus rings (WCAG 2.4.7)
   -------------------------------------------------------------------------
   The header is sticky at 90px, so any in-page jump (#anchor, the skip link,
   an event card target) landed behind it. scroll-padding-top gives the browser
   that offset for every scroll-into-view, including :target and find-in-page.

   The rings use :focus-visible only, so mouse clicks stay clean. They beat
   style.css:143 `:active, :focus { outline:0 }` ((0,1,0)) on specificity.
   Two existing rules must keep winning, and do:
     #main-content { outline: none }  (1,0,0) — the skip-link target is the <h1>
       now; it takes focus programmatically and should NOT show a ring.
     .amala-skip-link:focus { outline: 3px solid #fff !important } — !important
       for the ring, and (0,2,0) for its -5px offset, so both survive.
   ------------------------------------------------------------------------- */
html { scroll-padding-top: 90px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}
/* Form fields are the one place that needs !important. The template zeroes
   their focus outline FOUR times over, and the strongest of them -
   `[class*="sc_input_hover_"] input[type="text"]:focus { outline:none }`
   (style.css:452; the contact form's <form> carries sc_input_hover_default) -
   is (0,3,1), higher than any plain `input:focus-visible` selector. The other
   three are style.css:371 (the bare input/select/textarea block),
   style.css:400 (`input[type="text"]:focus` etc.) and style.css:143. Measured:
   without this the contact form's four fields had no visible focus at all. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-dark) !important;
  outline-offset: 2px !important;
}
/* Dark or green ground: accent-dark on sage is 1.67:1 (invisible), so these
   contexts take a white ring instead — 3.83:1 on sage, 13.8:1 on #231f20,
   both clear of the 3:1 WCAG 1.4.11 asks of a focus indicator.
   `.context :focus-visible` is (0,2,0), so it outranks the (0,1,1) element
   rules above and ties-then-wins against [tabindex]:focus-visible on source
   order. .copyright_wrap now lives inside .footer_wrap, so it is covered.
   .header_mobile is used whole rather than just .side_wrap: the hamburger sits
   on the sage .panel_middle bar OUTSIDE the panel and needs the same ring. */
.top_panel_wrap :focus-visible,
.header_mobile :focus-visible,
.amala-hero :focus-visible,
.amala-core-values-band :focus-visible,
.call_wrap :focus-visible,
.footer_wrap :focus-visible,
.sc_price_block :focus-visible {
  /* !important so this can never lose to the field rule's !important above.
     No form field lives in any of these contexts today, so it changes nothing
     now; it just makes the outcome order-independent if one ever does. */
  outline-color: #fff !important;
}
/* scroll-to-top is a sage circle, and an accent-dark ring on sage would be
   1.67:1 - but the ring sits at +2px offset, i.e. entirely OUTSIDE the circle
   on the page behind it, where accent-dark reads 6.41:1 on white. So it keeps
   the default ring deliberately; do not "fix" it to white, which would be
   white-on-white out there. */


/* -------------------------------------------------------------------------
   A6.  Contrast: filled green buttons -> --accent-dark  (WCAG 1.4.3)
   -------------------------------------------------------------------------
   "read more", "book", "contact us", the contact form's "Send Message", the
   calendar's "event details" and the hero's "The Path to Amala" all carried
   white text on sage: 3.83:1, and none of them is large text (15px/400,
   20px/300 for the hero), so all failed the 4.5:1 bar. On --accent-dark
   #4f6543 the same white reads 6.41:1. Hover/focus goes one step darker again,
   #3f5136, which is 8.6:1 — so the hover state passes too, and the button
   still visibly changes on hover.

   Specificity: the backgrounds being overridden are
   `.scheme_original … .sc_button.sc_button_style_filled` (0,3,0) and its
   `:not([class*="sc_button_hover_"]):hover` variant (0,5,0), plus
   `.scheme_original button` (0,1,1) for the form button. !important is used
   here rather than chasing (0,5,0)+ selectors — the same choice the Sep 23
   button block above makes — and it also clears
   `.scheme_original [class*="sc_button_hover_…"]:hover { … !important }` in
   case a hover-flavour class is ever added to the markup (none carries one
   today). border-color moves with background-color: every one of these draws a
   1-2px border in the same green, and leaving it sage would ring the dark
   button.

   The hero CTA's HOVER is deliberately left alone: it inverts to a transparent
   fill with a white border over the darkened hero photo (white on ~rgb(46,46,46)
   is about 13:1), which already passes and is the design. Only its resting
   fill moves.
   ------------------------------------------------------------------------- */
.scheme_original .sc_button.sc_button_style_filled,
.scheme_original .sc_form .sc_form_item.sc_form_button button,
.scheme_original .amala-event-link,
.amala-hero .amala-hero-cta {
  background-color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}
.scheme_original .sc_button.sc_button_style_filled:hover,
.scheme_original .sc_button.sc_button_style_filled:focus-visible,
.scheme_original .sc_form .sc_form_item.sc_form_button button:hover,
.scheme_original .sc_form .sc_form_item.sc_form_button button:focus-visible,
.scheme_original .amala-event-link:hover,
.scheme_original .amala-event-link:focus-visible {
  background-color: #3f5136 !important;
  border-color: #3f5136 !important;
}


/* -------------------------------------------------------------------------
   A7.  Contrast: sage text on white, sage links on dark, and the greys
   ------------------------------------------------------------------------- */

/* Contact page cards (Email / Phone / Social): the links were sage on white,
   3.0:1 at 16.5px. --accent-dark reads 6.41:1. Beats
   `.scheme_original a` (0,1,1) at (0,2,1); the matching :hover variant beats
   `.scheme_original a:hover` (0,2,1) at (0,3,1) and steps one shade darker so
   the hover is still felt. */
.scheme_original .sc_highlight a { color: var(--accent-dark); }
.scheme_original .sc_highlight a:hover,
.scheme_original .sc_highlight a:focus-visible { color: #3f5136; }

/* Footer email / phone / "Accessibility statement": sage on the #231f20 band
   is 4.25:1 — short for 16.5px copy. --accent-lighter #cdd8c2 reads 11.0:1.
   Specificity: the colour comes from `.scheme_original .widget_area_inner a`
   (0,2,0) and, on hover, `.scheme_original .widget_area_inner a:hover`
   -> #727272 (0,2,1) — which is 3.1:1 and also failed. These are (0,3,1) and
   (0,4,1), so both win outright. Hover resolves to plain white (13.8:1) so the
   links still respond to the pointer. */
.scheme_original .footer_wrap .widget_socials a { color: var(--accent-lighter); }
.scheme_original .footer_wrap .widget_socials a:hover,
.scheme_original .footer_wrap .widget_socials a:focus-visible { color: #ffffff; }

/* Footer tagline and the "Phone:" label: #727272 on #231f20 is 3.1:1.
   #9a9a9a is 5.79:1 — same muted-grey role, legible.
   Specificity: the grey is inherited from `.scheme_original footer
   .widget_area_inner { color:#727272 }` (0,2,1). `:not(.amala-wordmark)`
   takes this to (0,3,1) so it wins — and the exclusion is load-bearing, not
   decoration: without it this would also outrank
   `.footer_wrap .amala-wordmark { color:#fff }` (0,2,0) and turn the footer
   wordmark grey. */
.footer_wrap .textwidget p:not(.amala-wordmark) { color: #9a9a9a; }

/* Copyright strip: #727272 on #181516 is 2.7:1. #9a9a9a is 6.44:1.
   Specificity: theme.css sets this three times —
   `.scheme_original .copyright_wrap_inner` (0,2,0),
   `… .copyright_text` (0,3,0) and `… a` (0,3,0). Matching (0,3,0)/(0,3,1) here
   plus source order (this is the last stylesheet) takes all three. The `a`
   selector is pre-emptive: copyright_style_menu can grow a footer menu, and
   there is no link in the strip today. */
.scheme_original .copyright_wrap_inner,
.scheme_original .copyright_wrap_inner p,
.scheme_original .copyright_wrap_inner .copyright_text,
.scheme_original .copyright_wrap_inner a { color: #9a9a9a; }

/* In-text links were distinguished by colour alone (WCAG 1.4.1). Underline the
   ones that sit in running copy; buttons are excluded — they are identified by
   their filled box, and an underline inside one reads as a mistake. */
.post_content p a:not(.sc_button):not(.amala-hero-cta):not(.amala-event-link),
.sc_section_content_wrap p a:not(.sc_button):not(.amala-hero-cta):not(.amala-event-link) {
  text-decoration: underline;
}

/* The contact form's aria-live status line (#amala-form-status). It ships with
   .amala-visually-hidden and the a11y JS removes that class to announce a
   result, so it needs a visible appearance for the moment it has one.
   --accent-dark on white is 6.41:1. */
.amala-form-status:not(.amala-visually-hidden) {
  display: block;
  margin-top: 0.9rem;
  color: var(--accent-dark);
  font-weight: 600;
}


/* -------------------------------------------------------------------------
   A8.  Contrast items checked and deliberately left as they are
   -------------------------------------------------------------------------
   * The green header bar is ALREADY --accent-dark: the Sep 22 round pinned
     `.top_panel_wrap.top_panel_style_4` and `.top_panel_style_4
     .top_panel_wrap_inner` to it with !important (near the top of this file),
     and nothing in scheme_original paints `.top_panel_middle` — theme.css only
     has `.top_panel_position_over.top_panel_middle`, and these pages are
     top_panel_position_above. The 16px nav links are therefore already white
     on #4f6543, 6.41:1. Sticky/fixed is consistent for the same reason:
     theme.css's only .top_panel_fixed background rule is for
     `.top_panel_position_over`, so the !important pair covers both states.
   * The home Mission Statement band is ALREADY white, not sage — the Sep 22
     round replaced the dairy "milk splash" with `.home2
     .vc_custom_1475063547001::before { background-color: #fff }` and the band
     runs the template's section_style_dark_text colours. There is no
     white-on-sage left in it to fix; repainting it --accent-dark would undo a
     client decision, so it is untouched.
   * Page-title bands (.top_panel_title) and the Core Values band keep sage:
     their white text is large (24px+), which passes at 3:1 (3.83:1 measured).
   * The call band's BORDER buttons ("contact" / "accessibility" / "view
     services") hover to sage on #231f20, 4.25:1. Ported as-is in A1 because
     they are not in this pass's list, and they are sc_button_size_large (1em,
     padding 1.05em/3.63em) so this is borderline rather than clearly failing.
     Flagged for the next round.
   * The services price boxes are #231f20 and their "book" button is now
     --accent-dark, so the button's fill sits 2.54:1 against the box. Its white
     bold label is 6.41:1 and is what identifies it as a control, so 1.4.3 is
     met and 1.4.11 is met via the label; noted because the previous sage fill
     had more edge separation from the box.
   ------------------------------------------------------------------------- */

/* Oct 2 2026 accessibility pass (orchestrator): the template hides the mobile panel's
   Close control (.header_mobile .side_wrap .close { display:none }), so with a focus
   trap in the panel a keyboard user could only leave via Escape. Keep it out of the
   visual design but in the tab order: visually hidden until it receives keyboard
   focus, then shown where the template positions it (top 15px / right 20px). */
.header_mobile .side_wrap button.close {
  display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.header_mobile .side_wrap button.close:focus-visible {
  width: auto; height: auto; margin: 0; clip: auto; clip-path: none; overflow: visible;
  top: 15px; right: 20px; padding: 4px 10px;
  color: #fff; background: var(--accent-dark); border-radius: 3px;
  outline: 2px solid #fff; outline-offset: 2px;
}

/* Oct 2 2026 accessibility pass - QA round fixes (orchestrator) */
/* dropdown links sit on a light grey panel, not the green bar: a white ring was 1.5:1 */
.top_panel_wrap .sub-menu :focus-visible { outline-color: var(--accent-dark) !important; }
/* scroll-to-top is faded out until the page scrolls, but opacity:0 is still focusable,
   so Shift+Tab from the top of a page lost focus off-screen. Hide it for real until the
   template adds .show, and keep the outline out of the template's 1.5s "transition: all". */
.scroll_to_top:not(.show) { visibility: hidden; pointer-events: none; }
.scroll_to_top.show { visibility: visible; }
button.scroll_to_top { transition-property: opacity, visibility, bottom, background-color, color; }
/* services price-box titles drop to 22.4px under 768px (no longer "large" text), where
   sage on the #231f20 box is 4.25:1 - use the light tint the call band already uses. */
@media (max-width: 767px) {
  .scheme_original .sc_price_block .sc_price_block_title,
  .scheme_original .sc_price_block .sc_price_block_title span { color: var(--accent-lighter) !important; }
}

/* Oct 3 2026 (Sam): the message box on the contact form was light green with white
   text. theme.css:2978-3003 styles form fields laid over a Google map, but one selector
   in that block (.scheme_original .sc_form .sc_form_message textarea) is missing the
   .sc_googlemap_content scope and so catches this form's textarea. Same selector,
   later in the cascade: give the textarea the inputs' colours and border states. */
.scheme_original .sc_form .sc_form_message textarea {
  background-color: #ffffff;
  border-color: #d3d3d3;
  color: #727272;
}
.scheme_original .sc_form .sc_form_message textarea:hover { border-color: var(--accent); }
.scheme_original .sc_form .sc_form_message textarea:focus { border-color: #231f20; }