/* ==========================================================================
   AusWide Immigration, design system
   Layered on top of Bootstrap 5. Bootstrap provides the grid, offcanvas,
   accordion and modal behaviour; everything visual below is ours.

   Contents
     01  Tokens
     02  Base & typography
     03  Buttons
     04  Header (topbar + navbar)
     05  Hero
     06  Section furniture
     07  Cards (service / post / testimonial / feature)
     08  Trust, stats & compliance
     09  Accordion & visa panels
     10  Forms
     11  CTA bands
     12  Footer
     13  Blog article
     14  Admin
     15  Utilities, motion & print
     16  Responsive
   ========================================================================== */

/* ------------------------------------------------------------------ 01 ---
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand. Sampled from the AusWide emblem */
  --aw-navy:        #12295C;
  --aw-navy-600:    #1B3573;
  --aw-navy-800:    #0E2049;
  --aw-navy-900:    #081431;
  --aw-navy-50:     #F1F5FC;
  --aw-navy-100:    #DDE5F5;

  --aw-maroon:      #8E1B34;
  --aw-maroon-600:  #A32444;
  --aw-maroon-800:  #6E1226;
  --aw-maroon-50:   #FCF2F4;

  --aw-gold:        #C8A24A;
  --aw-gold-light:  #E6CE93;
  --aw-gold-50:     #FBF6EA;

  /* Neutrals */
  --aw-ink:         #151A26;
  --aw-body:        #4B5566;
  --aw-muted:       #737D8C;
  --aw-line:        #E3E8F0;
  --aw-line-soft:   #EEF1F6;
  --aw-surface:     #FFFFFF;
  --aw-surface-alt: #F6F8FC;

  /* Support */
  --aw-whatsapp:    #25D366;
  --aw-success:     #16794C;
  --aw-danger:      #B3261E;
  --aw-warning:     #9A6700;

  /* Type */
  --aw-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --aw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --aw-radius-sm: 6px;
  --aw-radius:    12px;
  --aw-radius-lg: 20px;
  --aw-radius-xl: 28px;

  --aw-shadow-xs: 0 1px 2px rgba(8, 20, 49, .06);
  --aw-shadow-sm: 0 2px 8px rgba(8, 20, 49, .06);
  --aw-shadow:    0 10px 30px -12px rgba(8, 20, 49, .18);
  --aw-shadow-lg: 0 28px 60px -24px rgba(8, 20, 49, .28);

  --aw-section-y: clamp(3.5rem, 7vw, 6.5rem);
  --aw-ease: cubic-bezier(.4, .14, .3, 1);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--aw-font-body);
  --bs-body-color: var(--aw-body);
  --bs-body-bg: var(--aw-surface);
  --bs-primary: var(--aw-navy);
  --bs-link-color: var(--aw-navy);
  --bs-link-hover-color: var(--aw-maroon);
  --bs-border-color: var(--aw-line);
}

/* ------------------------------------------------------------------ 02 ---
   Base & typography
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
  font-family: var(--aw-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--aw-body);
  background: var(--aw-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Safety net only. Real overflow is fixed at the source (see §16); this must
     never be the thing holding the layout together, because it silently hides
     regressions and breaks position:sticky in some engines. */
  overflow-x: hidden;
}

/* Replaced media must never be the reason a page scrolls sideways. */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}
img, video, canvas { height: auto; }

/* Unbroken strings, email addresses, URLs, reference numbers, are the most
   common cause of a blown-out mobile layout. Break them rather than overflow. */
p, li, dd, td, th, figcaption,
h1, h2, h3, h4, h5, h6,
.aw-article, .aw-contactline, .aw-footer, .aw-quote__text {
  overflow-wrap: break-word;
}
a[href^="mailto:"], a[href^="tel:"], .aw-break { overflow-wrap: anywhere; }

h1, h2, h3, h4, h5, .aw-display {
  font-family: var(--aw-font-display);
  color: var(--aw-ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.012em;
}

h1 { font-size: clamp(2.15rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
h3 { font-size: clamp(1.28rem, 2vw, 1.65rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1.02rem; }

h6 {
  font-family: var(--aw-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aw-maroon);
}

p { margin-bottom: 1.15rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--aw-navy);
  text-decoration-color: color-mix(in srgb, var(--aw-navy) 30%, transparent);
  text-underline-offset: .18em;
  transition: color .2s var(--aw-ease), text-decoration-color .2s var(--aw-ease);
}
a:hover { color: var(--aw-maroon); text-decoration-color: currentColor; }

strong, b { color: var(--aw-ink); font-weight: 650; }

::selection { background: var(--aw-navy); color: #fff; }

:focus-visible {
  outline: 3px solid var(--aw-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.aw-icon { flex: none; vertical-align: -.15em; }

.lead {
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.66;
  color: var(--aw-body);
  font-weight: 400;
}

.aw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aw-maroon);
  margin-bottom: .9rem;
}
.aw-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--aw-gold);
}
.aw-eyebrow--center::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--aw-gold);
}
.aw-eyebrow--light { color: var(--aw-gold-light); }

/* Skip link for keyboard users */
.aw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--aw-navy);
  color: #fff;
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--aw-radius) 0;
}
.aw-skip:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------------ 03 ---
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--aw-font-body);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: .005em;
  border-radius: 999px;
  padding: .72rem 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1.5px solid transparent;
  transition: transform .18s var(--aw-ease), box-shadow .22s var(--aw-ease),
              background-color .22s var(--aw-ease), color .22s var(--aw-ease),
              border-color .22s var(--aw-ease);
}
.btn:active { transform: translateY(1px); }

.btn-lg { padding: .92rem 2rem; font-size: 1.02rem; }
.btn-sm { padding: .5rem 1.1rem; font-size: .86rem; }

.btn-navy {
  background: var(--aw-navy);
  border-color: var(--aw-navy);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(18, 41, 92, .8);
}
.btn-navy:hover,
.btn-navy:focus {
  background: var(--aw-navy-800);
  border-color: var(--aw-navy-800);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(18, 41, 92, .9);
}

/* Primary call-to-action pair. These are one button in two surface variants,
   not two different buttons. Same shape, radius, icon and label; only the fill
   changes with the backdrop, and it has to:
       maroon on white  8.91:1     gold on white  2.41:1  (fails WCAG 1.4.11)
       gold on navy     7.55:1     maroon on navy 2.04:1  (fails)
   So .btn-maroon is the light-surface CTA (header, contact form, service forms,
   admin) and .btn-gold the dark-surface one (hero, CTA band, navy sidecards,
   footer). Swapping either one for "consistency" breaks contrast. */
.btn-maroon {
  background: var(--aw-maroon);
  border-color: var(--aw-maroon);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(142, 27, 52, .8);
}
.btn-maroon:hover,
.btn-maroon:focus {
  background: var(--aw-maroon-800);
  border-color: var(--aw-maroon-800);
  color: #fff;
  box-shadow: 0 14px 28px -12px rgba(142, 27, 52, .9);
}

.btn-gold {
  background: var(--aw-gold);
  border-color: var(--aw-gold);
  color: var(--aw-navy-900);
}
.btn-gold:hover, .btn-gold:focus {
  background: var(--aw-gold-light);
  border-color: var(--aw-gold-light);
  color: var(--aw-navy-900);
}

.btn-outline-navy {
  border-color: color-mix(in srgb, var(--aw-navy) 32%, transparent);
  color: var(--aw-navy);
  background: transparent;
}
.btn-outline-navy:hover,
.btn-outline-navy:focus {
  background: var(--aw-navy);
  border-color: var(--aw-navy);
  color: #fff;
}

/* Ghost button for dark backgrounds. The border is the only thing giving it a
   shape, so it carries real weight: .38 white measured just 3.04:1 against the
   hero navy, which reads as a barely-there outline. .55 lands at 4.66:1. */
.btn-outline-light-navy {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  background: rgba(255, 255, 255, .10);
}
.btn-outline-light-navy:hover,
.btn-outline-light-navy:focus {
  background: #fff;
  /* The border must contrast with the button's own fill, not the page. A white
     border on a white fill erases the outline; a navy one disappears into the
     navy backdrop instead. Gold reads as a ring against the white and carries
     the accent already used by the neighbouring CTA. */
  border-color: var(--aw-gold);
  color: var(--aw-navy);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
}

.btn-whatsapp {
  background: var(--aw-whatsapp);
  border-color: var(--aw-whatsapp);
  color: #04301A;
  box-shadow: 0 8px 20px -10px rgba(37, 211, 102, .85);
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
  background: #1FBA59;
  border-color: #1FBA59;
  color: #04301A;
}

/* Text link that behaves like a button */
.aw-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 650;
  font-size: .95rem;
  color: var(--aw-navy);
  text-decoration: none;
}
.aw-link-arrow .aw-icon { transition: transform .22s var(--aw-ease); }
.aw-link-arrow:hover { color: var(--aw-maroon); }
.aw-link-arrow:hover .aw-icon { transform: translateX(4px); }

/* ------------------------------------------------------------------ 04 ---
   Header
   -------------------------------------------------------------------------- */
.aw-topbar {
  background: var(--aw-navy-900);
  color: rgba(255, 255, 255, .8);
  font-size: .83rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.aw-topbar a {
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.aw-topbar a:hover { color: var(--aw-gold-light); }
.aw-topbar__divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .18);
}
.aw-topbar__marn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--aw-gold-light);
  font-weight: 600;
  letter-spacing: .02em;
}

.aw-announce {
  background: var(--aw-maroon);
  color: #fff;
  font-size: .86rem;
  text-align: center;
  padding: .55rem 1rem;
}
.aw-announce a { color: #fff; text-decoration: underline; }

.aw-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  border-bottom: 1px solid var(--aw-line-soft);
  transition: box-shadow .25s var(--aw-ease);
}

/* The frosted panel lives on a pseudo-element, NOT on .aw-header itself.
   backdrop-filter makes an element a containing block for its fixed-position
   descendants, with it on the header, the mobile nav drawer (a fixed-position
   Bootstrap offcanvas nested inside the navbar) resolved top:0/bottom:0 against
   the 68px-tall header instead of the viewport and collapsed to a sliver on
   every screen below 1200px. The pseudo-element has no descendants, so it can
   carry the effect harmlessly. Do not move these two properties back up. */
.aw-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: background-color .25s var(--aw-ease);
  pointer-events: none;
}
.aw-header.is-stuck { box-shadow: 0 8px 28px -18px rgba(8, 20, 49, .5); }
.aw-header.is-stuck::before { background: rgba(255, 255, 255, .97); }

.aw-navbar { padding: .7rem 0; }

/* Logo lockup: SVG emblem + live HTML wordmark so it stays crisp and themeable */
.aw-logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}
/* The emblem is a wide composition, so it is sized by height and left to find
   its own width. Forcing it square wasted about half the box and shrank the
   artwork to the point of being unreadable in the header. */
.aw-logo__mark {
  height: 46px;
  width: auto;
  flex: none;
  transition: transform .35s var(--aw-ease);
}
.aw-logo:hover .aw-logo__mark { transform: scale(1.03); }

.aw-logo__word {
  font-family: var(--aw-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--aw-navy);
  white-space: nowrap;
}
.aw-logo__word em { font-style: normal; color: var(--aw-maroon); }

.aw-logo__sub {
  display: block;
  font-family: var(--aw-font-display);
  font-size: .63rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--aw-navy);
  opacity: .78;
  margin-top: .22rem;
}

.aw-logo--light .aw-logo__word,
.aw-logo--light .aw-logo__sub { color: #fff; }
.aw-logo--light .aw-logo__word em { color: var(--aw-gold-light); }

/* Nav links */
.aw-nav .nav-link {
  font-weight: 550;
  font-size: .97rem;
  color: var(--aw-ink);
  padding: .55rem .9rem;
  border-radius: var(--aw-radius-sm);
  position: relative;
  transition: color .2s var(--aw-ease);
}
.aw-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .28rem;
  height: 2px;
  background: var(--aw-maroon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--aw-ease);
}
.aw-nav .nav-link:hover { color: var(--aw-maroon); }
.aw-nav .nav-link:hover::after,
.aw-nav .nav-link.active::after { transform: scaleX(1); }
.aw-nav .nav-link.active { color: var(--aw-maroon); }

/* Services dropdown */
.aw-dropdown {
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-lg);
  box-shadow: var(--aw-shadow-lg);
  padding: .6rem;
  min-width: 340px;
  /* Viewport-relative, deliberately NOT `100%`: this menu is absolutely
     positioned inside a ~90px-wide <li>, so a percentage would resolve against
     that and crush the panel to the width of the word "Services". The mobile
     drawer case is handled in §16.3, which takes the menu out of the overlay
     entirely. */
  max-width: calc(100vw - 2rem);
  /* Last-resort guard for short windows: eight services in one column measured
     756px tall, which ran 102px off the bottom of a 1366x768 laptop. The
     two-column grid below is the real fix; this keeps the menu reachable if the
     window is shorter still. */
  max-height: calc(100vh - 7.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: .5rem !important;
}
.aw-dropdown .dropdown-item {
  border-radius: var(--aw-radius);
  padding: .68rem .8rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  white-space: normal;
  color: var(--aw-ink);
  transition: background-color .18s var(--aw-ease);
}
.aw-dropdown .dropdown-item:hover,
.aw-dropdown .dropdown-item:focus { background: var(--aw-navy-50); color: var(--aw-navy); }
.aw-dropdown .dropdown-item.active { background: var(--aw-navy-50); color: var(--aw-navy); }

.aw-dropdown__icon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--aw-navy-50);
  color: var(--aw-navy);
}
.aw-dropdown__icon--maroon { background: var(--aw-maroon-50); color: var(--aw-maroon); }
.aw-dropdown__icon--gold   { background: var(--aw-gold-50);   color: #8A6D1F; }

/* Both are spans; without display:block a short title and its description run
   together on one line ("Family & Partner Visas Partner, prospective…"). */
.aw-dropdown__title { display: block; font-weight: 620; font-size: .94rem; line-height: 1.3; }
.aw-dropdown__desc  { display: block; font-size: .8rem; color: var(--aw-muted); line-height: 1.45; margin-top: .12rem; }

.aw-dropdown__footer {
  margin: .4rem .2rem 0;
  padding: .7rem .8rem;
  border-top: 1px solid var(--aw-line-soft);
  font-size: .88rem;
}

/* Eight services stacked in one column stood 756px tall and fell off the bottom
   of a 1366x768 laptop. Two columns halve that to roughly 400px, which clears
   every common screen. Inside the mobile drawer it stays a single column. */
@media (min-width: 1200px) {
  .aw-dropdown { min-width: 664px; }
  .aw-dropdown__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .1rem .35rem;
    align-items: start;
  }
}

/* Caret on the Services nav item. Bootstrap's own .dropdown-toggle::after
   triangle never rendered here because .aw-nav .nav-link::after (the hover
   underline) is more specific and wins, so this is a real icon instead. */
.aw-nav__caret {
  margin-left: .3rem;
  transition: transform .22s var(--aw-ease);
}
.nav-item.dropdown.show > .nav-link .aw-nav__caret,
.nav-link[aria-expanded="true"] .aw-nav__caret {
  transform: rotate(180deg);
}

/* Mobile offcanvas.
   Needs two classes to outrank Bootstrap's own `.offcanvas.offcanvas-end`
   width, as a single class this rule never applied and the drawer always
   fell back to Bootstrap's 400px. */
.offcanvas.aw-offcanvas { width: min(88vw, 380px); }
.aw-offcanvas .nav-link {
  padding: .8rem 0;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--aw-line-soft);
}
.aw-offcanvas .nav-link::after { display: none; }

.aw-burger {
  border: 1.5px solid var(--aw-line);
  border-radius: var(--aw-radius-sm);
  padding: .45rem .6rem;
  background: #fff;
  color: var(--aw-navy);
  line-height: 0;
}

/* ------------------------------------------------------------------ 05 ---
   Hero
   -------------------------------------------------------------------------- */
.aw-hero {
  position: relative;
  background:
    radial-gradient(120% 120% at 78% 8%, rgba(142, 27, 52, .38) 0%, transparent 52%),
    radial-gradient(90% 90% at 12% 92%, rgba(27, 53, 115, .8) 0%, transparent 60%),
    linear-gradient(152deg, var(--aw-navy-900) 0%, var(--aw-navy) 52%, var(--aw-navy-800) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Faint dotted "flight path" texture */
.aw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .5;
  mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
  z-index: -1;
}

/* Gold hairline sweep echoing the emblem's swoosh */
.aw-hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -32%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(200, 162, 74, .3);
  border-right-color: rgba(200, 162, 74, .6);
  z-index: -1;
}

.aw-hero__inner {
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

.aw-hero h1 { color: #fff; margin-bottom: 1.1rem; }
.aw-hero h1 em {
  font-style: normal;
  color: var(--aw-gold-light);
  position: relative;
  white-space: nowrap;
}
.aw-hero .lead { color: rgba(255, 255, 255, .84); max-width: 34rem; }

.aw-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  /* Gold at .45 blended to only 2.04:1 against the hero navy, so the pill's
     outline was effectively invisible. .8 reaches 3.59:1 and the shape reads. */
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(200, 162, 74, .8);
  color: var(--aw-gold-light);
  border-radius: 999px;
  padding: .42rem 1rem .42rem .55rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
}
.aw-hero__badge span.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--aw-gold);
  box-shadow: 0 0 0 4px rgba(200, 162, 74, .22);
  margin-left: .3rem;
}

.aw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.aw-hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.aw-hero__point {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .82);
}
.aw-hero__point .aw-icon { color: var(--aw-gold); }

/* Emblem panel on the right */
.aw-hero__figure {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.aw-hero__emblem {
  width: min(100%, 400px);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
  animation: awFloat 7s var(--aw-ease) infinite;
}
@keyframes awFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.aw-hero__ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .18);
  animation: awSpin 90s linear infinite;
}
@keyframes awSpin { to { transform: rotate(360deg); } }

/* Compact page header for interior pages */
.aw-pagehead {
  background:
    radial-gradient(100% 140% at 88% 0%, rgba(142, 27, 52, .38) 0%, transparent 55%),
    linear-gradient(140deg, var(--aw-navy-900) 0%, var(--aw-navy) 100%);
  color: #fff;
  padding: clamp(2.75rem, 6vw, 4.75rem) 0 clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.aw-pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(70% 80% at 80% 10%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(70% 80% at 80% 10%, #000, transparent 70%);
}
.aw-pagehead > * { position: relative; }
.aw-pagehead h1 { color: #fff; }
.aw-pagehead p { color: rgba(255, 255, 255, .82); max-width: 46rem; }

.aw-breadcrumb {
  font-size: .84rem;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.aw-breadcrumb a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.aw-breadcrumb a:hover { color: var(--aw-gold-light); }
.aw-breadcrumb .sep { opacity: .45; }

/* ------------------------------------------------------------------ 06 ---
   Section furniture
   -------------------------------------------------------------------------- */
.aw-section { padding: var(--aw-section-y) 0; }
.aw-section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.aw-section--alt { background: var(--aw-surface-alt); }
.aw-section--navy { background: var(--aw-navy-900); color: rgba(255, 255, 255, .8); }
.aw-section--navy h2, .aw-section--navy h3 { color: #fff; }

.aw-section__head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.aw-section__head--center { margin-inline: auto; text-align: center; }
.aw-section__head p { color: var(--aw-muted); margin-top: .85rem; }

.aw-rule {
  height: 3px;
  width: 56px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aw-maroon), var(--aw-gold));
  margin-top: 1.1rem;
}
.aw-section__head--center .aw-rule { margin-inline: auto; }

/* ------------------------------------------------------------------ 07 ---
   Cards
   -------------------------------------------------------------------------- */
.aw-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-lg);
  padding: 1.85rem;
  transition: transform .3s var(--aw-ease), box-shadow .3s var(--aw-ease),
              border-color .3s var(--aw-ease);
  overflow: hidden;
}
.aw-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--aw-navy), var(--aw-maroon));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--aw-ease);
}
.aw-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--aw-shadow);
  border-color: transparent;
}
.aw-card:hover::after { transform: scaleX(1); }

.aw-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--aw-navy-50);
  color: var(--aw-navy);
  margin-bottom: 1.15rem;
  transition: background-color .3s var(--aw-ease), color .3s var(--aw-ease);
}
.aw-card--maroon .aw-card__icon { background: var(--aw-maroon-50); color: var(--aw-maroon); }
.aw-card--gold   .aw-card__icon { background: var(--aw-gold-50);   color: #8A6D1F; }

.aw-card:hover .aw-card__icon { background: var(--aw-navy); color: #fff; }
.aw-card--maroon:hover .aw-card__icon { background: var(--aw-maroon); color: #fff; }
.aw-card--gold:hover   .aw-card__icon { background: var(--aw-gold);   color: #fff; }

.aw-card h3 { font-size: 1.28rem; margin-bottom: .55rem; }
.aw-card p { font-size: .97rem; color: var(--aw-muted); }

.aw-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.05rem 0 1.2rem;
}

.aw-chip {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .26rem .6rem;
  border-radius: 999px;
  background: var(--aw-navy-50);
  color: var(--aw-navy);
  border: 1px solid var(--aw-navy-100);
}
.aw-chip--maroon { background: var(--aw-maroon-50); color: var(--aw-maroon); border-color: #F2DCE1; }
.aw-chip--gold   { background: var(--aw-gold-50);   color: #8A6D1F; border-color: #F0E3C4; }
.aw-chip--ghost  { background: transparent; color: var(--aw-muted); border-color: var(--aw-line); }

/* Whole-card link overlay, keeps the real anchor accessible */
.aw-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Feature (why choose us) */
.aw-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.aw-feature__icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--aw-line);
  color: var(--aw-maroon);
  box-shadow: var(--aw-shadow-xs);
}
.aw-feature h4 { font-size: 1.06rem; margin-bottom: .3rem; }
.aw-feature p { font-size: .93rem; color: var(--aw-muted); margin: 0; }

/* Post card */
.aw-post {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-lg);
  overflow: hidden;
  transition: transform .3s var(--aw-ease), box-shadow .3s var(--aw-ease);
}
.aw-post:hover { transform: translateY(-5px); box-shadow: var(--aw-shadow); }

.aw-post__cover {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(90% 120% at 15% 15%, rgba(200, 162, 74, .35), transparent 60%),
    linear-gradient(140deg, var(--aw-navy) 0%, var(--aw-navy-900) 100%);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .3);
  position: relative;
  overflow: hidden;
}
.aw-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.aw-post__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: .5;
}
.aw-post__cover .aw-icon { position: relative; z-index: 1; }

.aw-post__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.aw-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--aw-muted);
  margin-bottom: .75rem;
}
.aw-post__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.aw-post h3 { font-size: 1.2rem; line-height: 1.34; margin-bottom: .6rem; }
.aw-post h3 a { color: var(--aw-ink); text-decoration: none; }
.aw-post:hover h3 a { color: var(--aw-maroon); }
.aw-post p { font-size: .94rem; color: var(--aw-muted); }
.aw-post__foot { margin-top: auto; padding-top: 1.1rem; }

/* Testimonial */
.aw-quote {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-lg);
  padding: 2rem 1.85rem 1.6rem;
  display: flex;
  flex-direction: column;
}
.aw-quote__mark { color: var(--aw-gold); opacity: .55; margin-bottom: .9rem; }
.aw-quote__text {
  font-family: var(--aw-font-display);
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--aw-ink);
  flex: 1;
}
.aw-quote__stars { color: var(--aw-gold); display: flex; gap: .12rem; margin: 1.1rem 0 .9rem; }
.aw-quote__who {
  border-top: 1px solid var(--aw-line-soft);
  padding-top: .9rem;
  font-size: .9rem;
}
.aw-quote__who strong { display: block; color: var(--aw-ink); }
.aw-quote__who span { color: var(--aw-muted); font-size: .84rem; }

/* Empty state */
.aw-empty {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  border: 1.5px dashed var(--aw-line);
  border-radius: var(--aw-radius-lg);
  background: var(--aw-surface-alt);
}
.aw-empty__icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--aw-line);
  color: var(--aw-muted);
}
.aw-empty h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.aw-empty p { color: var(--aw-muted); max-width: 34rem; margin-inline: auto; }

/* ------------------------------------------------------------------ 08 ---
   Trust, stats & compliance
   -------------------------------------------------------------------------- */
.aw-trustbar {
  background: #fff;
  border-bottom: 1px solid var(--aw-line-soft);
  padding: 1.4rem 0;
}
.aw-trustbar__item {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .9rem;
  color: var(--aw-body);
}
.aw-trustbar__item .aw-icon { color: var(--aw-maroon); flex: none; }
.aw-trustbar__item strong { color: var(--aw-ink); font-weight: 620; }

.aw-marn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  background: var(--aw-navy-50);
  border: 1px solid var(--aw-navy-100);
  border-left: 3px solid var(--aw-gold);
  border-radius: var(--aw-radius);
  padding: .85rem 1.15rem;
  font-size: .9rem;
}
.aw-marn__num {
  font-family: var(--aw-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--aw-navy);
  letter-spacing: .02em;
}
.aw-marn a { font-weight: 600; }

.aw-stat { text-align: center; }
.aw-stat__num {
  font-family: var(--aw-font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: var(--aw-navy);
  line-height: 1;
}
.aw-section--navy .aw-stat__num { color: var(--aw-gold-light); }
.aw-stat__label {
  font-size: .84rem;
  color: var(--aw-muted);
  margin-top: .5rem;
  letter-spacing: .02em;
}
.aw-section--navy .aw-stat__label { color: rgba(255, 255, 255, .7); }

/* Compliance disclaimer. Deliberately understated but always visible */
.aw-disclaimer {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: var(--aw-gold-50);
  border: 1px solid #F0E3C4;
  border-radius: var(--aw-radius);
  padding: 1.1rem 1.25rem;
  font-size: .89rem;
  line-height: 1.6;
  color: #6B5518;
}
.aw-disclaimer .aw-icon { color: var(--aw-gold); flex: none; margin-top: .1rem; }
.aw-disclaimer strong { color: #4E3D0F; }

.aw-alert-note {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  border-radius: var(--aw-radius);
  padding: 1rem 1.15rem;
  font-size: .92rem;
  border: 1px solid;
}
.aw-alert-note--info   { background: var(--aw-navy-50);   border-color: var(--aw-navy-100); color: #223A6B; }
.aw-alert-note--urgent { background: var(--aw-maroon-50); border-color: #F2DCE1;            color: var(--aw-maroon-800); }
.aw-alert-note .aw-icon { flex: none; margin-top: .12rem; }

/* ------------------------------------------------------------------ 09 ---
   Accordion & visa panels
   -------------------------------------------------------------------------- */
.aw-accordion .accordion-item {
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius) !important;
  margin-bottom: .75rem;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .25s var(--aw-ease), border-color .25s var(--aw-ease);
}
.aw-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--aw-navy-100);
  box-shadow: var(--aw-shadow-sm);
}
.aw-accordion .accordion-button {
  font-family: var(--aw-font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--aw-ink);
  background: #fff;
  padding: 1.1rem 1.35rem;
  box-shadow: none !important;
  gap: 1rem;
}
.aw-accordion .accordion-button:not(.collapsed) { color: var(--aw-navy); background: var(--aw-navy-50); }
.aw-accordion .accordion-button::after {
  background-image: none;
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--aw-ease);
  flex: none;
}
.aw-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.aw-accordion .accordion-body { padding: 0 1.35rem 1.35rem; }

.aw-subclass {
  display: inline-flex;
  align-items: center;
  font-family: var(--aw-font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .22rem .5rem;
  border-radius: 5px;
  background: var(--aw-maroon);
  color: #fff;
  margin-left: auto;
  margin-right: .5rem;
  white-space: nowrap;
}

.aw-visa__grid {
  display: grid;
  gap: 1.5rem;
  /* min() keeps the track from demanding 240px inside an accordion body that is
     narrower than that on small phones, a bare minmax(240px,1fr) overflows. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin-top: 1.2rem;
}
.aw-visa__block h5 {
  font-family: var(--aw-font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aw-maroon);
  margin-bottom: .75rem;
}

.aw-ticklist { list-style: none; padding: 0; margin: 0; }
.aw-ticklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .6rem;
  font-size: .94rem;
  line-height: 1.55;
}
.aw-ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .34em;
  width: 16px;
  height: 9px;
  border-left: 2px solid var(--aw-gold);
  border-bottom: 2px solid var(--aw-gold);
  transform: rotate(-45deg);
}
.aw-ticklist--navy li::before { border-color: var(--aw-navy); }
.aw-ticklist--light li::before { border-color: var(--aw-gold-light); }
.aw-ticklist--light li { color: rgba(255, 255, 255, .82); }

.aw-visa__note {
  margin-top: 1.25rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--aw-gold);
  background: var(--aw-gold-50);
  border-radius: 0 var(--aw-radius-sm) var(--aw-radius-sm) 0;
  font-size: .88rem;
  color: #6B5518;
}

/* Sticky sidebar on service/blog pages */
.aw-sticky { position: sticky; top: 7rem; }

.aw-sidecard {
  background: #fff;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-lg);
  padding: 1.6rem;
  box-shadow: var(--aw-shadow-xs);
}
.aw-sidecard--navy {
  background: linear-gradient(150deg, var(--aw-navy) 0%, var(--aw-navy-900) 100%);
  border-color: transparent;
  color: rgba(255, 255, 255, .82);
}
.aw-sidecard--navy h3, .aw-sidecard--navy h4 { color: #fff; }
.aw-sidecard h4 { font-size: 1.12rem; margin-bottom: .7rem; }

.aw-sidenav { list-style: none; padding: 0; margin: 0; }
.aw-sidenav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem;
  border-radius: var(--aw-radius-sm);
  font-size: .93rem;
  color: var(--aw-body);
  text-decoration: none;
  transition: background-color .18s var(--aw-ease), color .18s var(--aw-ease);
}
.aw-sidenav a:hover { background: var(--aw-navy-50); color: var(--aw-navy); }
.aw-sidenav a.active {
  background: var(--aw-navy-50);
  color: var(--aw-navy);
  font-weight: 620;
  box-shadow: inset 3px 0 0 var(--aw-maroon);
}

/* ------------------------------------------------------------------ 10 ---
   Forms
   -------------------------------------------------------------------------- */
.form-label {
  font-size: .87rem;
  font-weight: 620;
  color: var(--aw-ink);
  margin-bottom: .4rem;
}
.form-label .req { color: var(--aw-maroon); }

.form-control,
.form-select {
  border: 1.5px solid var(--aw-line);
  border-radius: var(--aw-radius);
  padding: .78rem 1rem;
  font-size: .97rem;
  color: var(--aw-ink);
  background-color: #fff;
  transition: border-color .2s var(--aw-ease), box-shadow .2s var(--aw-ease);
}
/* Bootstrap's own -sm padding loses to the rule above, which left compact
   fields with 1rem of horizontal padding: a narrow column (an "order" number,
   say) then had no room left to show its own value. */
.form-control-sm,
.form-select-sm {
  padding: .4rem .6rem;
  border-radius: var(--aw-radius-sm);
}

.form-control::placeholder { color: #A6AEBC; }
.form-control:focus,
.form-select:focus {
  border-color: var(--aw-navy);
  box-shadow: 0 0 0 4px rgba(18, 41, 92, .1);
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--aw-danger);
  background-image: none;
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); }
.invalid-feedback { font-size: .82rem; color: var(--aw-danger); }
.form-text { font-size: .82rem; color: var(--aw-muted); }

textarea.form-control { min-height: 148px; resize: vertical; }

/* Honeypot. Hidden from humans, visible to naive bots */
.aw-hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

.aw-formcard {
  background: #fff;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--aw-shadow);
}

.aw-contactline {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--aw-line-soft);
}
.aw-contactline:last-child { border-bottom: 0; }
.aw-contactline__icon {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--aw-navy-50);
  color: var(--aw-navy);
}
.aw-contactline__label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aw-muted);
  margin-bottom: .18rem;
}
.aw-contactline a { font-weight: 600; color: var(--aw-ink); text-decoration: none; }
.aw-contactline a:hover { color: var(--aw-maroon); }

/* Toast/flash */
.aw-flash {
  border-radius: var(--aw-radius);
  border: 1px solid;
  padding: .95rem 1.15rem;
  font-size: .93rem;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.aw-flash--success { background: #EDF7F1; border-color: #C6E5D3; color: #14603F; }
.aw-flash--error   { background: #FDF0EF; border-color: #F5CFCC; color: #8C1D18; }
.aw-flash--info    { background: var(--aw-navy-50); border-color: var(--aw-navy-100); color: #223A6B; }

/* Floating WhatsApp button */
.aw-fab {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 1040;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--aw-whatsapp);
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .7);
  transition: transform .25s var(--aw-ease);
}
.aw-fab:hover { transform: scale(1.08); color: #fff; }
.aw-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--aw-whatsapp);
  animation: awPulse 2.4s ease-out infinite;
}
@keyframes awPulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ------------------------------------------------------------------ 11 ---
   CTA bands
   -------------------------------------------------------------------------- */
.aw-cta {
  position: relative;
  background:
    radial-gradient(90% 130% at 85% 15%, rgba(142, 27, 52, .5) 0%, transparent 55%),
    linear-gradient(140deg, var(--aw-navy) 0%, var(--aw-navy-900) 100%);
  color: rgba(255, 255, 255, .84);
  border-radius: var(--aw-radius-xl);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  overflow: hidden;
  isolation: isolate;
}
.aw-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(60% 100% at 90% 20%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(60% 100% at 90% 20%, #000, transparent 70%);
  z-index: -1;
}
.aw-cta h2 { color: #fff; }
.aw-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------------ 12 ---
   Footer
   -------------------------------------------------------------------------- */
.aw-footer {
  background: var(--aw-navy-900);
  color: rgba(255, 255, 255, .68);
  font-size: .93rem;
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.aw-footer h5 {
  font-family: var(--aw-font-body);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.aw-footer a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.aw-footer a:hover { color: var(--aw-gold-light); }

.aw-footer__links { list-style: none; padding: 0; margin: 0; }
.aw-footer__links li { margin-bottom: .6rem; }
.aw-footer__links a { display: inline-flex; align-items: center; gap: .45rem; }

.aw-footer__contact { list-style: none; padding: 0; margin: 0; }
.aw-footer__contact li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: .85rem;
}
.aw-footer__contact .aw-icon { color: var(--aw-gold); flex: none; margin-top: .18rem; }

.aw-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.aw-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
  transition: background-color .2s var(--aw-ease), transform .2s var(--aw-ease),
              color .2s var(--aw-ease), border-color .2s var(--aw-ease);
}
.aw-social a:hover {
  background: var(--aw-gold);
  border-color: var(--aw-gold);
  color: var(--aw-navy-900);
  transform: translateY(-2px);
}

.aw-footer__marn {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(200, 162, 74, .28);
  border-radius: var(--aw-radius);
  padding: 1rem 1.15rem;
  font-size: .86rem;
  line-height: 1.55;
}
.aw-footer__marn strong { color: var(--aw-gold-light); }

.aw-footer__disclaimer {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.5rem 0;
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}

.aw-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.25rem 0;
  font-size: .84rem;
  color: rgba(255, 255, 255, .5);
}

/* ------------------------------------------------------------------ 13 ---
   Blog article
   -------------------------------------------------------------------------- */
.aw-article {
  font-size: 1.08rem;
  line-height: 1.78;
  color: #3D4657;
}
.aw-article > * + * { margin-top: 1.35rem; }
.aw-article h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 2.75rem;
  padding-top: .25rem;
}
.aw-article h3 { font-size: 1.25rem; margin-top: 2rem; }
.aw-article ul, .aw-article ol { padding-left: 1.3rem; }
.aw-article li { margin-bottom: .55rem; }
.aw-article blockquote {
  border-left: 3px solid var(--aw-gold);
  background: var(--aw-gold-50);
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--aw-radius) var(--aw-radius) 0;
  font-family: var(--aw-font-display);
  font-size: 1.12rem;
  color: var(--aw-ink);
}
.aw-article a { font-weight: 550; }
.aw-article img { max-width: 100%; height: auto; border-radius: var(--aw-radius); }
.aw-article hr { margin: 2.5rem 0; border-color: var(--aw-line); }

.aw-share { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.aw-share a {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--aw-line);
  color: var(--aw-muted);
  transition: all .2s var(--aw-ease);
}
.aw-share a:hover { background: var(--aw-navy); border-color: var(--aw-navy); color: #fff; }

/* ------------------------------------------------------------------ 14 ---
   Admin
   -------------------------------------------------------------------------- */
/* dvh tracks the mobile browser's collapsing address bar; plain vh leaves a
   dead strip of background below the fold on iOS/Android. */
.aw-admin { background: #F4F6FA; min-height: 100vh; min-height: 100dvh; }

.aw-admin__sidebar {
  background: var(--aw-navy-900);
  color: rgba(255, 255, 255, .7);
  width: 258px;
  flex: none;
  position: fixed;
  inset: 0 auto 0 0;
  padding: 1.25rem 1rem;
  overflow-y: auto;
  z-index: 1035;
  transition: transform .28s var(--aw-ease);
}
.aw-admin__main { margin-left: 258px; padding: 1.5rem; min-width: 0; }

/* Dimmed backdrop behind the mobile sidebar drawer. Inert until JS opens the
   drawer, so it can never swallow clicks on desktop. */
.aw-admin__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1034;
  background: rgba(8, 20, 49, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--aw-ease), visibility .28s var(--aw-ease);
}
.aw-admin__backdrop.is-open { opacity: 1; visibility: visible; }

/* Stops the page behind the drawer scrolling under the user's finger. */
body.aw-admin--locked { overflow: hidden; }

.aw-admin__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: 1rem;
  color: #fff;
  text-decoration: none;
}
.aw-admin__brand img { width: 38px; height: 38px; }
.aw-admin__brand span {
  font-family: var(--aw-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
}
.aw-admin__brand small {
  display: block;
  font-family: var(--aw-font-body);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
}

.aw-admin__nav { list-style: none; padding: 0; margin: 0; }
.aw-admin__nav > li { margin-bottom: .18rem; }
.aw-admin__nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .75rem;
  border-radius: var(--aw-radius-sm);
  color: rgba(255, 255, 255, .72);
  font-size: .93rem;
  text-decoration: none;
  transition: background-color .18s var(--aw-ease), color .18s var(--aw-ease);
}
.aw-admin__nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.aw-admin__nav a.active { background: var(--aw-maroon); color: #fff; font-weight: 600; }
.aw-admin__nav .badge { margin-left: auto; }

.aw-admin__label {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  padding: 1.15rem .75rem .45rem;
}

.aw-admin__topbar {
  background: #fff;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius);
  padding: .85rem 1.15rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.aw-panel {
  background: #fff;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius);
  box-shadow: var(--aw-shadow-xs);
}
.aw-panel__head {
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--aw-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.aw-panel__head h2, .aw-panel__head h3 { font-size: 1.1rem; margin: 0; }
.aw-panel__body { padding: 1.35rem; }

.aw-tile {
  background: #fff;
  border: 1px solid var(--aw-line);
  border-radius: var(--aw-radius);
  padding: 1.25rem;
  height: 100%;
  box-shadow: var(--aw-shadow-xs);
}
.aw-tile__num {
  font-family: var(--aw-font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--aw-navy);
  line-height: 1;
}
.aw-tile__label { font-size: .82rem; color: var(--aw-muted); margin-top: .35rem; }
.aw-tile__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--aw-navy-50);
  color: var(--aw-navy);
}

/* Menu editor rows.
   A flex line rather than a Bootstrap grid: the admin content well sits below
   the lg breakpoint, so col-lg-* never applied and every control collapsed into
   a col-4, which is what made the save button sit on top of the toggles. */
.aw-menu__head,
.aw-menu__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.aw-menu__head {
  padding: 0 0 .5rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--aw-muted);
  border-bottom: 1px solid var(--aw-line);
}
.aw-menu__row {
  padding: .7rem 0;
  border-bottom: 1px solid var(--aw-line-soft);
}
.aw-menu__row > label { margin: 0; }

.aw-menu__c-label   { flex: 1 1 9rem;  min-width: 8rem; }
.aw-menu__c-url     { flex: 2 1 12rem; min-width: 9rem; }
.aw-menu__c-order   { flex: 0 0 5.5rem; }
.aw-menu__c-flags   { flex: 0 0 auto; display: flex; gap: .9rem; align-items: center; }
.aw-menu__c-actions { flex: 0 0 auto; margin-left: auto; display: flex; gap: .35rem; }

.aw-menu__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: .82rem;
  color: var(--aw-muted);
}

/* Stack the row on narrow screens so nothing is squeezed to nothing. */
@media (max-width: 767.98px) {
  .aw-menu__c-label,
  .aw-menu__c-url,
  .aw-menu__c-order { flex: 1 1 100%; }
  .aw-menu__c-actions { margin-left: 0; }
}

.aw-table { margin: 0; font-size: .92rem; }
.aw-table thead th {
  background: var(--aw-surface-alt);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--aw-muted);
  border-bottom: 1px solid var(--aw-line);
  padding: .8rem 1rem;
  white-space: nowrap;
}
.aw-table tbody td { padding: .9rem 1rem; vertical-align: middle; border-color: var(--aw-line-soft); }
.aw-table tbody tr:hover { background: #FAFBFE; }

.aw-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .74rem;
  font-weight: 650;
  padding: .24rem .6rem;
  border-radius: 999px;
  text-transform: capitalize;
}
.aw-status--new         { background: #E8F0FE; color: #1A47A0; }
.aw-status--contacted   { background: var(--aw-gold-50); color: #8A6D1F; }
.aw-status--in_progress { background: #FFF1E6; color: #9A4A0F; }
.aw-status--closed      { background: #EDF7F1; color: #14603F; }
.aw-status--spam        { background: #F1F2F4; color: #5C636E; }

.aw-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(80% 90% at 80% 10%, rgba(142, 27, 52, .35) 0%, transparent 55%),
    linear-gradient(150deg, var(--aw-navy-900) 0%, var(--aw-navy) 100%);
}
.aw-login__card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: var(--aw-radius-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--aw-shadow-lg);
}

/* ------------------------------------------------------------------ 15 ---
   Utilities, motion & print
   -------------------------------------------------------------------------- */
.aw-text-navy   { color: var(--aw-navy) !important; }
.aw-text-maroon { color: var(--aw-maroon) !important; }
.aw-text-gold   { color: var(--aw-gold) !important; }
.aw-text-muted  { color: var(--aw-muted) !important; }
.aw-bg-alt      { background: var(--aw-surface-alt) !important; }
.aw-bg-navy     { background: var(--aw-navy-900) !important; }

.aw-divider { height: 1px; background: var(--aw-line); border: 0; }
.aw-divider--gold {
  height: 2px;
  background: linear-gradient(90deg, var(--aw-gold), transparent);
  border: 0;
}

.aw-maxw-42 { max-width: 42rem; }
.aw-maxw-52 { max-width: 52rem; }

/* Scroll reveal. JS adds .is-visible */
.aw-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--aw-ease), transform .65s var(--aw-ease);
}
.aw-reveal.is-visible { opacity: 1; transform: none; }

/* Stagger children inside a grid */
.aw-reveal[data-delay="1"] { transition-delay: .08s; }
.aw-reveal[data-delay="2"] { transition-delay: .16s; }
.aw-reveal[data-delay="3"] { transition-delay: .24s; }
.aw-reveal[data-delay="4"] { transition-delay: .32s; }
.aw-reveal[data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aw-reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 16 ---
   Responsive

   Breakpoints follow Bootstrap's so the utility classes in the templates and
   the rules here never disagree:
     xs  <576    phones (portrait)
     sm  ≥576    phones (landscape) / small tablets
     md  ≥768    tablets
     lg  ≥992    tablets (landscape) / small laptops
     xl  ≥1200   laptops. The navbar expands here (navbar-expand-xl)
     xxl ≥1400   desktops
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------- 16.1 grid safety
   A Bootstrap row carries a negative inline margin of half its gutter. `.g-5`
   raises that gutter to 3rem, so the row hangs 12px past each edge of its
   `.container`, whose padding is only .75rem. From 576px up the container's
   auto side-margins absorb the overhang; below that the container is
   full-bleed and those 24px become genuine horizontal scroll. Which is what
   `body{overflow-x:hidden}` was quietly masking on the home, about, contact,
   FAQ and service pages. Cap the horizontal gutter to what the container can
   actually absorb, leaving the vertical gutter (--bs-gutter-y) untouched so
   stacked columns keep their breathing room. */
@media (max-width: 575.98px) {
  .row.g-5,
  .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* Nothing may out-grow its column, whatever the content. */
.row > * { min-width: 0; }

/* Horizontally scrollable tables get a shadow hint at whichever edge is still
   hiding content, so it is obvious they can be swiped. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  #fff 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(8, 20, 49, .13), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(8, 20, 49, .13), transparent) right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ------------------------------------------------------- 16.2 large screens */
@media (min-width: 1400px) {
  .container { max-width: 1296px; }
  .aw-admin__main { padding: 2rem 2.25rem; }
}

/* Very wide monitors: stop the measure running away from the reader. */
@media (min-width: 1800px) {
  .aw-article { font-size: 1.12rem; }
}

/* ------------------------------------------- 16.3 below xl. Navbar collapses */
@media (max-width: 1199.98px) {
  .aw-logo__mark { height: 40px; }
  .aw-logo__word { font-size: 1.35rem; }

  /* Inside the drawer the services menu is a panel in the flow, not a floating
     overlay, an absolutely-positioned 340px menu cannot fit a phone drawer. */
  .aw-offcanvas .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: .25rem 0 .25rem .5rem;
    margin-top: 0 !important;
    background: transparent;
    /* The desktop height cap would give this panel its own scrollbar nested
       inside the drawer's. Let the drawer do the scrolling. */
    max-height: none;
    overflow: visible;
  }
  .aw-offcanvas .aw-dropdown .dropdown-item { padding: .6rem .55rem; }
  .aw-offcanvas .aw-dropdown__footer { border-top-color: var(--aw-line); }
  .aw-offcanvas .navbar-nav { width: 100%; }

  /* The drawer scrolls on its own; let long service lists reach the bottom. */
  .aw-offcanvas .offcanvas-body { overflow-y: auto; }
}

/* ------------------------------------------------------- 16.4 below lg (992) */
@media (max-width: 991.98px) {
  html { scroll-padding-top: 5rem; }

  .aw-admin__sidebar { transform: translateX(-100%); }
  .aw-admin__sidebar.is-open { transform: none; box-shadow: var(--aw-shadow-lg); }
  .aw-admin__main { margin-left: 0; padding: 1rem; }

  .aw-hero__figure { margin-top: 2.5rem; }
  .aw-hero__emblem { width: min(72%, 320px); }
  .aw-sticky { position: static; }

  /* A forced line-break in the hero headline has nowhere to go on a narrow
     screen, let the accent phrase wrap with the rest of the sentence. */
  .aw-hero h1 em { white-space: normal; }

  /* 16px is the threshold below which iOS Safari zooms the page on focus and
     leaves the user stranded at the wrong scale. max() raises only the fields
     that fall short; :not() keeps the deliberately large `-lg` fields large. */
  .form-control:not(.form-control-lg),
  .form-select:not(.form-select-lg) { font-size: max(16px, .97rem); }
}

/* ------------------------------------------------------- 16.5 below md (768) */
@media (max-width: 767.98px) {
  body { font-size: 1rem; }

  h1 { font-size: clamp(1.85rem, 7.4vw, 2.45rem); }
  h2 { font-size: clamp(1.5rem,  5.6vw, 1.95rem); }
  h3 { font-size: clamp(1.18rem, 4.4vw, 1.4rem); }
  .lead { font-size: 1.05rem; }

  .aw-card { padding: 1.5rem; }
  .aw-quote { padding: 1.6rem 1.35rem 1.35rem; }
  .aw-cta { border-radius: var(--aw-radius-lg); }
  .aw-fab { width: 52px; height: 52px; right: .9rem; bottom: .9rem; }
  .aw-hero__points { gap: .75rem 1.25rem; }
  .aw-accordion .accordion-button { flex-wrap: wrap; gap: .5rem; font-size: 1rem; }

  /* The subclass pill is pushed right by margin-left:auto on wide rows; once
     the button wraps it should sit under the name, hard left. */
  .aw-subclass { margin-left: 0; }

  .aw-sidecard { padding: 1.35rem; }
  .aw-formcard { border-radius: var(--aw-radius-lg); }

  /* Admin tables: tighter cells so more columns survive before scrolling. */
  .aw-table { font-size: .88rem; }
  .aw-table thead th { padding: .65rem .75rem; }
  .aw-table tbody td { padding: .7rem .75rem; }

  /* A table left to auto-fit a phone crushes its text column to one word per
     line, which is far harder to read than a short sideways scroll. Hold a
     usable minimum and let .table-responsive do what it is there for. The
     scroll shadows in §16.1 advertise that there is more to the right. */
  .table-responsive > .aw-table { min-width: 30rem; }
  .aw-table td .fw-semibold { overflow-wrap: normal; }
  .aw-panel__body { padding: 1.1rem; }
  .aw-panel__head { padding: .9rem 1.1rem; }
}

/* ------------------------------------------------------- 16.6 below sm (576) */
@media (max-width: 575.98px) {
  .aw-section { padding: 3rem 0; }
  .aw-section--tight { padding: 2.25rem 0; }

  /* Stacked CTAs read better full-width than as two ragged pills. */
  .aw-hero__actions .btn,
  .aw-cta__actions .btn { width: 100%; }
  .btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }

  .aw-hero__badge {
    flex-wrap: wrap;
    font-size: .76rem;
    padding: .4rem .8rem;
    line-height: 1.45;
  }
  .aw-hero__points { flex-direction: column; gap: .6rem; }

  /* Four trust items at col-6 leave ~130px per cell. Too tight for an icon
     plus two lines of copy. One per row instead. */
  .aw-trustbar .col-6 { width: 100%; }
  .aw-trustbar { padding: 1.1rem 0; }

  .aw-marn { display: flex; align-items: flex-start; }
  .aw-card { padding: 1.35rem; }
  .aw-card__icon { width: 46px; height: 46px; margin-bottom: .9rem; }
  .aw-empty { padding: 2rem 1rem; }

  .aw-accordion .accordion-button { padding: .95rem 1rem; }
  .aw-accordion .accordion-body { padding: 0 1rem 1rem; }

  .aw-article { font-size: 1rem; }
  .aw-article blockquote { padding: 1rem 1.1rem; margin: 1.5rem 0; }

  .aw-footer { text-align: left; }
  .aw-footer__bottom { text-align: center; }

  /* Pagination can run past the edge once there are more than a few pages. */
  .pagination { flex-wrap: wrap; justify-content: center; gap: .2rem; }
  .pagination .page-link { padding: .35rem .6rem; font-size: .85rem; }

  .aw-login { padding: 1rem; }
  .aw-login__card { border-radius: var(--aw-radius-lg); }
}

/* ------------------------------------------------ 16.7 small phones (<400px) */
@media (max-width: 399.98px) {
  .aw-logo__mark { height: 34px; }
  .aw-logo__word { font-size: 1.2rem; }
  .aw-logo__sub { font-size: .56rem; letter-spacing: .22em; }

  h1 { font-size: 1.72rem; }
  h2 { font-size: 1.4rem; }

  .btn { padding: .68rem 1.15rem; font-size: .93rem; }
  .aw-card { padding: 1.15rem; }
  .aw-formcard { padding: 1.15rem; }
  .aw-sidecard { padding: 1.15rem; }
  .aw-quote { padding: 1.35rem 1.15rem 1.15rem; }

  .aw-admin__main { padding: .75rem; }
  .aw-admin__topbar { padding: .7rem .85rem; gap: .65rem; }
}

/* --------------------------------------- 16.8 very small / folded (<=360px) */
@media (max-width: 359.98px) {
  .aw-section { padding: 2.5rem 0; }
  .aw-hero__inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .aw-eyebrow { font-size: .7rem; letter-spacing: .1em; }
  .aw-eyebrow::before, .aw-eyebrow--center::after { width: 18px; }
  .aw-fab { width: 48px; height: 48px; }
}

/* --------------------------------------------------- 16.9 touch / no hover
   Hover lifts fire on tap on touch devices and leave cards stuck in the
   hovered state until the next tap elsewhere. Neutralise them, and give
   controls a comfortable minimum target. */
@media (hover: none) {
  .aw-card:hover,
  .aw-post:hover,
  .aw-fab:hover,
  .aw-social a:hover { transform: none; }
  .aw-card:hover { box-shadow: none; border-color: var(--aw-line); }
  .aw-card:hover::after { transform: scaleX(0); }
  .aw-link-arrow:hover .aw-icon { transform: none; }

  .aw-nav .nav-link,
  .aw-admin__nav a,
  .aw-sidenav a { min-height: 44px; }
  .aw-social a, .aw-share a { width: 44px; height: 44px; }
}

/* ------------------------------------------- 16.10 short / landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .aw-hero__inner { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .aw-hero__figure { display: none; }
  .aw-login { min-height: auto; padding: 2rem 1rem; }
  .aw-fab { width: 46px; height: 46px; }
}

@media print {
  .aw-header, .aw-topbar, .aw-footer, .aw-fab, .aw-cta, .btn, .aw-share { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .aw-pagehead { background: none !important; color: #000; padding: 0 0 1rem; }
  .aw-pagehead h1, .aw-pagehead p { color: #000; }
}