/* ===========================================================================
   Apex Holdings — V2 design system
   ---------------------------------------------------------------------------
   A refinement layer, loaded last. It adds Material-Design-3-style tokens and
   polishes typography, spacing, controls, cards and focus states. It does not
   restructure any page, change any content, or touch the colour of the logo.

   The primary stays the existing corporate blue #005da9. Every other blue here
   is a tonal step derived from it, so the site still reads as Apex Holdings.

   Scope rules followed throughout:
     - no layout rewrites, no new frameworks, no new fonts;
     - no change to .htaccess, image negotiation, SEO markup or form logic;
     - !important only where a theme rule already uses it.
   =========================================================================== */

:root {
  /* ---- Primary (built on the existing #005da9) ------------------------- */
  --ah-primary:            #005da9;
  --ah-primary-hover:      #00518f;   /* darker step for hover               */
  --ah-primary-active:     #004276;   /* darker still for pressed            */
  --ah-primary-container:  #d8e8f7;   /* tonal surface for quiet emphasis    */
  --ah-on-primary:         #ffffff;
  --ah-on-primary-container: #00345e;

  /* ---- Secondary / tertiary, used sparingly ---------------------------- */
  --ah-secondary:          #42617d;   /* muted slate blue                    */
  --ah-tertiary:           #bfa16b;   /* the existing gold accent            */

  /* ---- Surfaces -------------------------------------------------------- */
  --ah-background:         #ffffff;
  --ah-surface:            #ffffff;
  --ah-surface-variant:    #f5f8fb;   /* very light blue-grey                */
  --ah-surface-raised:     #ffffff;
  --ah-surface-dark:       #0f1b26;   /* footer / dark sections              */

  /* ---- Text ------------------------------------------------------------
     V1 used #6e6e6e for body copy and #aaa inside form fields. #aaa is
     2.3:1 on white and fails WCAG AA; these are the corrected values.      */
  --ah-on-surface:         #1d2730;   /* 13.9:1 on white                     */
  --ah-on-surface-variant: #4f5b66;   /*  7.5:1 on white                     */
  --ah-on-surface-muted:   #6b7682;   /*  4.9:1 on white                     */
  --ah-on-dark:            #ffffff;
  --ah-on-dark-variant:    #b9c4ce;   /*  8.6:1 on --ah-surface-dark         */

  /* ---- Lines ----------------------------------------------------------- */
  --ah-outline:            #ccd6e0;
  --ah-outline-strong:     #9fb0c0;
  --ah-divider:            #e6ecf2;

  /* ---- Status ---------------------------------------------------------- */
  --ah-success:            #1e7a3c;
  --ah-warning:            #9a6400;
  --ah-error:              #b3261e;
  --ah-error-container:    #f9dedc;

  /* ---- Focus ----------------------------------------------------------- */
  --ah-focus-ring:         0 0 0 3px rgba(0, 93, 169, .38);
  --ah-focus-ring-dark:    0 0 0 3px rgba(255, 255, 255, .55);

  /* ---- Typography scale ------------------------------------------------ */
  --ah-font:               "Raleway", "Helvetica Neue", Arial, sans-serif;
  --ah-line-tight:         1.2;
  --ah-line-heading:       1.25;
  --ah-line-body:          1.65;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --ah-space-1: 4px;   --ah-space-2: 8px;   --ah-space-3: 12px;
  --ah-space-4: 16px;  --ah-space-5: 24px;  --ah-space-6: 32px;
  --ah-space-7: 48px;  --ah-space-8: 64px;  --ah-space-9: 80px;

  /* ---- Radii ----------------------------------------------------------- */
  --ah-radius-sm:  4px;
  --ah-radius-md:  8px;
  --ah-radius-lg:  12px;
  --ah-radius-pill: 999px;

  /* ---- Elevation (soft, restrained) ------------------------------------ */
  --ah-elev-1: 0 1px 2px rgba(16, 32, 48, .07), 0 1px 3px rgba(16, 32, 48, .06);
  --ah-elev-2: 0 2px 6px rgba(16, 32, 48, .08), 0 1px 2px rgba(16, 32, 48, .06);
  --ah-elev-3: 0 8px 20px rgba(16, 32, 48, .10), 0 2px 6px rgba(16, 32, 48, .06);

  /* ---- Motion ---------------------------------------------------------- */
  --ah-ease: cubic-bezier(.2, 0, 0, 1);
  --ah-dur:  .2s;
}

/* ===========================================================================
   1. Typography
   V1 body copy was 14px/22px (1.57). Opening the line-height and darkening the
   grey makes long paragraphs markedly easier to read without changing any text.
   =========================================================================== */

body {
  font-family: var(--ah-font);
  color: var(--ah-on-surface-variant);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  line-height: var(--ah-line-body);
  color: var(--ah-on-surface-variant);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ah-font);
  color: var(--ah-on-surface);
  letter-spacing: -.01em;
}

/* V1 set several headings to a line-height equal to their font-size, which
   clips descenders on two-line headings. */
h3 { line-height: var(--ah-line-heading); }
h4 { line-height: 1.35; }
h5, h6 { line-height: 1.4; }

/* Section headings: keep the established look (uppercase, 800, blue first
   word) and only make the size fluid so it stops crowding small screens. */
.section-title {
  font-size: clamp(26px, 4.2vw, 48px);
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* Page banner heading: V1 used line-height equal to font-size. */
.banner h1,
.banner .content h1 {
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* Long body copy was justified, which opens rivers of white space at phone
   widths. Left-aligned below the tablet breakpoint only. */
@media (max-width: 991px) {
  .com-title p,
  .about-content p,
  .about p { text-align: left; }
}

/* ===========================================================================
   2. Links
   =========================================================================== */

a {
  transition: color var(--ah-dur) var(--ah-ease);
}

a:hover,
a:focus {
  color: var(--ah-primary-hover);
}

/* ===========================================================================
   3. Focus — visible, consistent, keyboard-only
   V1 relied on the browser default ring, which the theme removed on several
   controls (`outline: none`). This restores an obvious, branded indicator.
   =========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.navbar-toggle:focus-visible,
.custom-button:focus-visible,
.anchorLink:focus-visible {
  outline: 2px solid var(--ah-primary);
  outline-offset: 2px;
  box-shadow: var(--ah-focus-ring);
  border-radius: var(--ah-radius-sm);
}

/* On dark surfaces the blue ring disappears; use a light one. */
.footer a:focus-visible,
.banner a:focus-visible,
.com-title a:focus-visible {
  outline-color: #ffffff;
  box-shadow: var(--ah-focus-ring-dark);
}

/* Keep the mouse experience unchanged. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ===========================================================================
   4. Form controls

   Rebuilt as one standard field rather than patched.

   The theme's markup is `span.custom-input > [input|select] + label > i`, and
   its styling fought itself: the span was a 30px pill with overflow:hidden,
   the label was absolutely positioned over the field, `label::before` painted
   a 50px blob at z-index -1, and the field carried
   `transform: translate3d(1em, 0, 0)` until focus. Layering a border and a
   background on top of that produced the detached rounded swatch, the borders
   that did not meet, and the stray colour at the right-hand end.

   V2 turns the span itself into the control - a flex row holding a fixed icon
   cell and the field - and switches off the blob, the pill radius and the
   transforms. One bordered box, one radius, an icon that is genuinely centred,
   and a focus state on the whole control via :focus-within.

   Field names, types, validation, the honeypot and all form behaviour are
   untouched.
   =========================================================================== */

/* ---- the control ------------------------------------------------------- */
.formcontact .input.custom-input {
  display: flex;
  align-items: stretch;
  width: 100%;
  background-color: var(--ah-surface);
  border: 1px solid var(--ah-outline);
  border-radius: var(--ah-radius-md);
  overflow: visible;                 /* was hidden: it clipped the focus ring */
  transition: border-color var(--ah-dur) var(--ah-ease),
              box-shadow var(--ah-dur) var(--ah-ease);
}

.formcontact .input.custom-input:hover { border-color: var(--ah-outline-strong); }

.formcontact .input.custom-input:focus-within {
  border-color: var(--ah-primary);
  box-shadow: var(--ah-focus-ring);
}

/* ---- the icon cell ----------------------------------------------------- */
.formcontact .custom-input-label {
  position: static;                  /* was absolute, overlaying the field */
  order: -1;                         /* the label follows the field in the DOM */
  flex: 0 0 46px;
  width: 46px;
  height: auto;
  min-height: 48px;
  padding: 0;
  margin: 0;
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-right: 1px solid var(--ah-divider);
  pointer-events: none;
}

/* The theme's decorative blob behind the icon. */
.formcontact .custom-input-label::before { display: none !important; }

.formcontact .icon-field {
  color: var(--ah-on-surface-muted);
  font-size: 15px;
  line-height: 1;
  transform: none !important;        /* theme scales it to 0.6 on focus */
  transition: color var(--ah-dur) var(--ah-ease);
}

.formcontact .input.custom-input:focus-within .icon-field { color: var(--ah-primary); }

/* ---- the field --------------------------------------------------------- */
.formcontact .custom-input-field,
.formcontact .input.custom-input > input,
.formcontact .input.custom-input > select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;                      /* let it shrink inside the flex row */
  min-height: 48px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none !important;        /* theme offsets it by 1em until focus */
  color: var(--ah-on-surface);
  font-family: var(--ah-font);
  font-size: 15px;
  line-height: 1.5;
  float: none;
}

.formcontact .custom-input-field:focus,
.formcontact .input.custom-input > input:focus,
.formcontact .input.custom-input > select:focus {
  outline: none;
  box-shadow: none;                  /* the ring belongs to the control */
}

/* Native select chevron, since the field border is now the control's. */
.formcontact .input.custom-input > select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234f5b66' d='M4.4 6.1 8 9.7l3.6-3.6 1.1 1.1L8 12 3.3 7.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  cursor: pointer;
}

/* ---- fields with no icon wrapper: textarea, file, bare inputs ---------- */
.formcontact textarea,
.formcontact input[type="file"],
.formcontact > .row input[type="text"]:not(.custom-input-field),
.formcontact > .row input[type="email"]:not(.custom-input-field) {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background-color: var(--ah-surface);
  border: 1px solid var(--ah-outline);
  border-radius: var(--ah-radius-md);
  color: var(--ah-on-surface);
  font-family: var(--ah-font);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color var(--ah-dur) var(--ah-ease),
              box-shadow var(--ah-dur) var(--ah-ease);
}

.formcontact textarea {
  min-height: 140px;
  resize: vertical;
}

.formcontact textarea:hover,
.formcontact input[type="file"]:hover { border-color: var(--ah-outline-strong); }

.formcontact textarea:focus,
.formcontact input[type="file"]:focus {
  border-color: var(--ah-primary);
  box-shadow: var(--ah-focus-ring);
  outline: none;
}

/* The file button reads as a secondary control. */
.formcontact input[type="file"] { padding: 10px 14px; cursor: pointer; }

.formcontact input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  border: 1px solid var(--ah-primary);
  border-radius: var(--ah-radius-pill);
  background-color: var(--ah-primary-container);
  color: var(--ah-on-primary-container);
  font-family: var(--ah-font);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--ah-dur) var(--ah-ease);
}

.formcontact input[type="file"]::file-selector-button:hover {
  background-color: var(--ah-primary);
  color: var(--ah-on-primary);
}

/* ---- placeholders and messages ---------------------------------------- */
.formcontact ::placeholder {
  color: var(--ah-on-surface-muted);
  opacity: 1;
}

.formcontact .form-group,
.formcontact .custom-form-group { margin-bottom: var(--ah-space-4); }

.formcontact .error,
.formcontact .v_error,
#form-messages.error { color: var(--ah-error); }
#form-messages.success { color: var(--ah-success); }

/* ===========================================================================
   5. Buttons
   One shape and one set of states for every call to action.
   =========================================================================== */

.custom-button,
.formcontact button,
.formcontact input[type="submit"],
button.custom-button {
  background-color: var(--ah-primary);
  color: var(--ah-on-primary);
  border: 1px solid var(--ah-primary);
  border-radius: var(--ah-radius-pill);
  font-family: var(--ah-font);
  font-weight: 600;
  letter-spacing: .02em;
  padding: 13px 30px;
  min-height: 44px;
  box-shadow: none;
  transition: background-color var(--ah-dur) var(--ah-ease),
              border-color var(--ah-dur) var(--ah-ease),
              box-shadow var(--ah-dur) var(--ah-ease);
}

.custom-button:hover,
.formcontact button:hover,
.formcontact input[type="submit"]:hover {
  background-color: var(--ah-primary-hover);
  border-color: var(--ah-primary-hover);
  color: var(--ah-on-primary);
  box-shadow: var(--ah-elev-1);
}

.custom-button:active,
.formcontact button:active {
  background-color: var(--ah-primary-active);
  border-color: var(--ah-primary-active);
  box-shadow: none;
}

.custom-button:disabled,
.formcontact button:disabled {
  background-color: var(--ah-outline);
  border-color: var(--ah-outline);
  color: #ffffff;
  cursor: not-allowed;
  box-shadow: none;
}

/* The outlined "Read More" / "Visit Our Website" links on cards. */
/* The theme reveals these links by animating `bottom` (-50px -> 15px) with a
   blanket `transition: 0.5s`. Declaring a narrower transition here REPLACED
   that shorthand and the reveal snapped instead of sliding, so `bottom` is
   restored explicitly at the theme's own duration. */
.bus-item a.anchorLink,
.com-title a.anchorLink {
  border-radius: var(--ah-radius-pill);
  font-weight: 600;
  letter-spacing: .02em;
  transition: bottom .5s var(--ah-ease),
              background-color var(--ah-dur) var(--ah-ease),
              color var(--ah-dur) var(--ah-ease);
}

/* ===========================================================================
   6. Cards and surfaces
   V1 used a flat 3px grey spread (`0 0 3px 1px #ddd`). A directional, softer
   shadow reads as a raised surface rather than an outline.
   =========================================================================== */

.bus-item {
  background-color: var(--ah-surface-raised);
  border: 1px solid var(--ah-divider);
  border-radius: var(--ah-radius-lg);
  box-shadow: var(--ah-elev-1);
  transition: box-shadow var(--ah-dur) var(--ah-ease),
              transform var(--ah-dur) var(--ah-ease),
              border-color var(--ah-dur) var(--ah-ease);
}

.bus-item:hover {
  box-shadow: var(--ah-elev-3);
  border-color: var(--ah-primary-container);
}

.bus-item i { color: var(--ah-primary); }
.bus-item p { color: var(--ah-on-surface); font-weight: 700; }

/* Division company cards. */
.com-item {
  border-radius: var(--ah-radius-lg);
  overflow: hidden;
  box-shadow: var(--ah-elev-1);
}

.com-item .com-title h3 { color: var(--ah-on-dark); }
.com-item .com-title p  { color: var(--ah-on-dark-variant); }

/* Certification carousel tiles. */
#certificate_slider .item {
  background-color: var(--ah-surface);
  border: 1px solid var(--ah-divider);
  border-radius: var(--ah-radius-md);
}

/* The theme uses `transition: all 0.3s` on these tiles; keep that breadth so
   nothing it animates is silently dropped, and add the elevation. */
#certificate_slider .item { transition: all .3s var(--ah-ease); }
#certificate_slider .item:hover { box-shadow: var(--ah-elev-2); }

/* ===========================================================================
   7. Header and navigation
   =========================================================================== */

.header .navbar-nav > li > a {
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ah-on-surface);
  transition: color var(--ah-dur) var(--ah-ease);
}

.header .navbar-nav > li > a:hover,
.header .navbar-nav > li > a:focus {
  color: var(--ah-primary);
}

/* Current page: a quiet underline rather than a colour-only cue.

   The bar is absolutely positioned and anchored to the middle of the text
   box, NOT added to the flow. An in-flow ::after made the active link 8px
   taller than its siblings (99px -> 107px), which shifted the row - the
   "jump" when navigating. It is also anchored to the text rather than to the
   bottom edge because the header changes nav padding from 43px to 26px when
   it becomes fixed on scroll; a bottom-anchored bar would move with it. */
.header .navbar-nav > li.active > a,
.header .navbar-nav > li > a[aria-current="page"] {
  color: var(--ah-primary);
}

/* The current-page / hover underline is drawn with `text-decoration`, which is
   anchored to the TEXT by definition. Every box-based attempt drifted:

     - an in-flow `::after` made the active link 8px taller than its siblings;
     - `top: 50%` on a 99px link resolved to 49.5px, so the bar sat on a
       half-pixel and shimmered;
     - `bottom: <fixed>px` is wrong the moment the link box changes height,
       which it does when the header becomes fixed (43px -> 26px padding) and
       again at breakpoints where the theme adds `padding-bottom: 62px` to the
       nav list.

   `text-underline-offset` measures from the text baseline, so there is exactly
   one bar, always the same distance below the label, in every header state and
   at every width. It also cannot affect layout. */
@media (min-width: 992px) {
  .header .navbar-nav > li > a {
    /* The theme blankets `a { text-decoration: none }`, so the LINE is forced
       here and visibility is controlled purely by its colour. */
    text-decoration-line: underline !important;
    text-decoration-style: solid;
    text-decoration-thickness: 2px !important;
    text-decoration-color: transparent !important;
    -webkit-text-decoration-color: transparent !important;
    text-underline-offset: 7px;
    transition: color var(--ah-dur) var(--ah-ease),
                text-decoration-color var(--ah-dur) var(--ah-ease),
                -webkit-text-decoration-color var(--ah-dur) var(--ah-ease);
  }

  .header .navbar-nav > li > a:hover,
  .header .navbar-nav > li > a:focus-visible,
  .header .navbar-nav > li.active > a,
  .header .navbar-nav > li > a[aria-current="page"] {
    text-decoration-color: var(--ah-primary) !important;
    -webkit-text-decoration-color: var(--ah-primary) !important;
  }

  /* No pseudo-element bar anywhere in the nav, in any state. */
  .header .navbar-nav > li > a::after,
  .header .navbar-nav > li > a::before {
    content: none !important;
  }

  /* The nav underline already signals focus; the full-height halo from the
     global focus ring read as a second, larger border. */
  .header .navbar-nav > li > a:focus-visible {
    outline-offset: -4px;
    box-shadow: none;
    border-radius: 0;
  }
}

/* In the stacked mobile menu a centred underline would collide with the row
   divider, so the current page is marked with a left accent instead. */
@media (max-width: 991px) {
  .navbar-collapse .navbar-nav > li.active > a,
  .navbar-collapse .navbar-nav > li > a[aria-current="page"] {
    box-shadow: inset 3px 0 0 0 var(--ah-primary);
    padding-left: 12px;
  }
}

/* When the header sticks it sits directly on the page with nothing to
   separate it. A hairline and a shallow shadow give it an edge without
   turning it into a heavy bar. */
.header.header-fixed {
  background-color: #ffffff;
  border-bottom: 1px solid var(--ah-divider);
  box-shadow: var(--ah-elev-2);
}

/* Dropdowns. */
.header .dropdown-menu {
  border: 1px solid var(--ah-divider);
  border-radius: var(--ah-radius-md);
  box-shadow: var(--ah-elev-3);
  padding: var(--ah-space-2) 0;
}

.header .dropdown-menu > li > a {
  padding: 10px 20px;
  color: var(--ah-on-surface-variant);
  transition: background-color var(--ah-dur) var(--ah-ease),
              color var(--ah-dur) var(--ah-ease);
}

.header .dropdown-menu > li > a:hover,
.header .dropdown-menu > li > a:focus {
  background-color: var(--ah-surface-variant);
  color: var(--ah-primary);
}

/* Mobile menu: comfortable rows and a clear separator. */
@media (max-width: 991px) {
  .navbar-collapse .navbar-nav > li > a {
    padding-top: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ah-divider);
  }
  .navbar-collapse .navbar-nav > li:last-child > a { border-bottom: 0; }
}

/* ===========================================================================
   8. Footer
   =========================================================================== */

.footer .footer-heading,
.footer h4 {
  color: var(--ah-on-dark);
  letter-spacing: .04em;
}

.footer,
.footer p,
.footer li {
  color: var(--ah-on-dark-variant);
  line-height: var(--ah-line-body);
}

.footer a {
  color: var(--ah-on-dark-variant);
  transition: color var(--ah-dur) var(--ah-ease);
}

/* The footer menu links get their 44px touch target from 11px padding either
   side of a 22px line box. The looser body line-height above would reduce that
   to 43px, so these anchors keep the exact line-height the target depends on. */
.footer .top-footer .menu ul li a {
  line-height: 22px;
  min-height: 44px;
}

.footer a:hover,
.footer a:focus {
  color: var(--ah-on-dark);
  text-decoration: underline;
}

/* Social links.

   A labelled, centred row of filled circles. Filled rather than outlined so
   they read clearly against the dark footer, and each one adopts its own
   network colour on hover and keyboard focus - the convention people already
   recognise - while sitting quietly in the corporate palette at rest. */
.footer .social-heading {
  margin: 0 0 var(--ah-space-3);
  text-align: center;
  color: var(--ah-on-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer .social-links {
  list-style: none;
  margin: 0 0 var(--ah-space-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ah-space-3);
}

.footer .social-links li { margin: 0; }

.footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: var(--ah-radius-pill);
  background-color: rgba(255, 255, 255, .10);
  color: #ffffff;
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--ah-dur) var(--ah-ease),
              color var(--ah-dur) var(--ah-ease);
}

/* No transform on hover. Translating the circle moved it out from under the
   pointer, which cleared :hover, which moved it back - the continuous shake.
   The colour change alone carries the state, and the hit area never moves. */
.footer .social-links a:hover,
.footer .social-links a:focus {
  color: #ffffff;
  text-decoration: none;
}

/* Official brand colours, applied only on hover/focus. */
.footer .social-links a[aria-label*="Facebook"]:hover,
.footer .social-links a[aria-label*="Facebook"]:focus   { background-color: #1877f2; }
.footer .social-links a[aria-label*="LinkedIn"]:hover,
.footer .social-links a[aria-label*="LinkedIn"]:focus   { background-color: #0a66c2; }
.footer .social-links a[aria-label*="Instagram"]:hover,
.footer .social-links a[aria-label*="Instagram"]:focus  { background-color: #d62976; }
.footer .social-links a[aria-label*="YouTube"]:hover,
.footer .social-links a[aria-label*="YouTube"]:focus    { background-color: #ff0000; }

.footer .social-links a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.footer .social-links i { pointer-events: none; }

/* ===========================================================================
   9. Rhythm
   Consistent vertical padding so sections stop varying by 10-20px, and a
   slightly tighter block on phones.
   =========================================================================== */

@media (max-width: 767px) {
  .padding-90 { padding: var(--ah-space-8) 0 var(--ah-space-7); }
  .section-title { margin-bottom: var(--ah-space-4); }
}

/* Dividers used between content blocks. */
hr {
  border: 0;
  border-top: 1px solid var(--ah-divider);
  margin: var(--ah-space-5) 0;
}

/* ===========================================================================
   10. Accessibility helpers
   =========================================================================== */

.skip-to-content:focus {
  outline: 2px solid var(--ah-primary);
  outline-offset: 2px;
}

::selection {
  background: var(--ah-primary-container);
  color: var(--ah-on-primary-container);
}

@media (prefers-reduced-motion: reduce) {
  a, button, .bus-item, .com-item,
  .custom-button, .formcontact input,
  .formcontact textarea, .formcontact select {
    transition: none !important;
  }
}