/* Aspiring IT — KQM storefront skin  (v3)
   NOTE: KQM sets the root font-size to 14px, so this file uses px, not rem —
   rem would render everything ~12% smaller than aspiring.com.au.
   Host at https://aspiring.com.au/static/kqm/kqm-theme.css
   Loaded from KQM Settings → Integrations → JavaScript <head>.
   Loads BEFORE KQM's own CSS, so selectors are prefixed with `html`
   to win the cascade. Brand: Sora (headings) / Inter (body),
   cyan #0DABE3, navy #002E41, cool grays, square corners.
   Header classes (.ait-*) mirror aspiring.com.au/css/style.css. */

/* ---------- 1. Tokens (override KQM's theme.css variables) ---------- */
html:root {
  --ait-cyan: #0DABE3;
  --ait-blue: #0A8BC7;
  --ait-navy: #002E41;
  --ait-gray-dark: #4D5254;
  --ait-gray-mid: #A0A4A7;
  --ait-gray-light: #E7EAEB;
  --ait-sky: #E6F6FC;                 /* light-blue shop bar */
  --ait-sky-line: #BFE7F7;
  --ait-line: rgba(0, 46, 65, 0.14);
  --ait-line-soft: rgba(255, 255, 255, 0.16);
  --ait-display: 'Sora', Arial, sans-serif;
  --ait-body: 'Inter', Arial, sans-serif;
  --ait-max: 1160px;
  --ait-pad: clamp(20px, 4vw, 48px);

  --font-family-body: var(--ait-body);
  --font-family-heading: var(--ait-display);
  --footer-background-color: var(--ait-navy);
  --footer-color: #ffffff;
  --brand-primary-contrast: var(--ait-navy);
  --brand-primary-btn-hover-bg: var(--ait-navy);
  --brand-primary-btn-hover-border: var(--ait-navy);
  --brand-primary-btn-hover-color: #ffffff;
  --brand-primary-btn-active-bg: var(--ait-navy);
  --brand-primary-btn-active-border: var(--ait-navy);
  --brand-primary-btn-active-color: #ffffff;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-pill: 0;
  --bs-body-font-family: var(--ait-body);
  --bs-body-color: var(--ait-gray-dark);
  --bs-link-color: var(--ait-blue);
  --bs-link-hover-color: var(--ait-navy);
}

/* ---------- 2. Base type + page width (match the main site's .wrap) ---------- */
html body {
  font-family: var(--ait-body);
  color: var(--ait-gray-dark);
  -webkit-font-smoothing: antialiased;
}
html body .container {
  max-width: var(--ait-max);
  padding-left: var(--ait-pad);
  padding-right: var(--ait-pad);
}
html body h1, html body h2, html body h3, html body h4, html body h5,
html body .h1, html body .h2, html body .h3, html body .h4 {
  font-family: var(--ait-display);
  color: var(--ait-navy);
  letter-spacing: -0.015em;
}
html body h1, html body .h1 { font-weight: 800; }
html body h2, html body h3, html body h4, html body h5 { font-weight: 700; }
html body #main h3.text-center.fw-bold { text-transform: none; font-size: 30.4px; }
html body .product-detail .product-title { font-size: clamp(20px, 1.9vw, 25.6px); line-height: 1.3; font-weight: 600; }
/* .product-title is also used on product cards — keep those compact */
html body .card .product-title, html body .product-list .product-title {
  font: 600 15.2px/1.35 var(--ait-body); color: var(--ait-navy); letter-spacing: 0;
}
html body .product-price { font-family: var(--ait-display); color: var(--ait-navy); font-weight: 700; }
html body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* KQM bug: the collapsed "More Options" filter panel is ~11,000px wide,
   giving category pages a horizontal scrollbar */
html body .refine-panel { overflow-x: clip; }
/* KQM fades the filter panel white → grey; flat white instead, as on the main site */
html.online-store body .refine-panel,
html.online-store body .refine-panel::before,
html.online-store body .refine-panel::after { background: #fff; }
/* Filter "More" badges → brand-blue text link */
html body .refine-panel [ks-function="refine-choose-more"] { margin-top: 6px; }
html body .refine-panel [ks-function="refine-choose-more"] .badge {
  background: none !important; color: var(--ait-blue) !important; padding: 0;
  font: 600 14.4px/1.5 var(--ait-body); letter-spacing: 0;
}
html body .refine-panel [ks-function="refine-choose-more"] .badge::after { content: " \203A"; }
html body .refine-panel [ks-function="refine-choose-more"]:hover .badge {
  color: var(--ait-navy) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* ---------- 3. Square corners everywhere (brand: no rounded edges) ---------- */
html body .btn, html body .form-control, html body .form-select,
html body .input-group > *, html body .dropdown-menu, html body .card,
html body .badge, html body .modal-content, html body .alert,
html body .list-group, html body .list-group-item, html body .pagination .page-link,
html body .accordion-item, html body .accordion-button, html body .nav-pills .nav-link,
html body .toast, html body .popover, html body .stock-badge, html body img.rounded {
  border-radius: 0 !important;
}

/* ---------- 4. KQM buttons ---------- */
html body .btn {
  font-family: var(--ait-body);
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color .15s, color .15s, border-color .15s;
}
html body .btn-primary { background: var(--ait-cyan); border-color: var(--ait-cyan); color: var(--ait-navy); }
html body .btn-primary:hover, html body .btn-primary:focus-visible, html body .btn-primary:active {
  background: var(--ait-navy) !important; border-color: var(--ait-navy) !important; color: #fff !important;
}
html body .btn-secondary, html body .btn-dark { background: var(--ait-navy); border-color: var(--ait-navy); color: #fff; }
html body .btn-secondary:hover, html body .btn-dark:hover { background: var(--ait-cyan); border-color: var(--ait-cyan); color: var(--ait-navy); }
html body .btn-outline-primary, html body .btn-outline-secondary,
html body .btn-outline-dark, html body .btn-light { background: #fff; border: 1px solid var(--ait-line); color: var(--ait-navy); }
html body .btn-outline-primary:hover, html body .btn-outline-secondary:hover,
html body .btn-outline-dark:hover, html body .btn-light:hover { border-color: var(--ait-navy); background: var(--ait-navy); color: #fff; }
html body .btn-outline-success { border-color: var(--ait-line); color: var(--ait-navy); }
html body .btn-outline-success:hover { background: var(--ait-navy); border-color: var(--ait-navy); color: #fff; }

/* ---------- 5. Forms ---------- */
html body .form-control, html body .form-select { border: 1px solid var(--ait-line); font-family: var(--ait-body); }
html body .form-control:focus, html body .form-select:focus { border-color: var(--ait-cyan); box-shadow: 0 0 0 3px rgba(13, 171, 227, .2); }
html body .form-check-input:checked { background-color: var(--ait-cyan); border-color: var(--ait-cyan); }

/* ---------- 6. Hide KQM's own header once ours is in place ----------
   `ait-js` is set by the inline head snippet; if kqm-theme.js fails to
   load, the head snippet removes it and KQM's header comes back. */
html.ait-js body header.header-container,
html.ait-js body nav.navbar-megamenu { display: none !important; }

/* ---------- 7. Main-site header (copy of aspiring.com.au) ---------- */
.ait-top { position: sticky; top: 0; z-index: 1030; line-height: 1.65; }
.ait-wrap { max-width: var(--ait-max); margin: 0 auto; padding-left: var(--ait-pad); padding-right: var(--ait-pad); box-sizing: border-box; }
.ait-header {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ait-line);
  font-family: var(--ait-body);
  position: relative; z-index: 2;   /* keep the Services dropdown above the shop bar */
}
.ait-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 15.2px; padding-bottom: 15.2px; }
.ait-logo { display: block; height: 30px; flex-shrink: 0; }
.ait-logo img { height: 100%; width: auto; display: block; }
.ait-nav ul { list-style: none; display: flex; gap: 33.6px; margin: 0; padding: 0; }
.ait-nav a { text-decoration: none; font-size: 15.2px; font-weight: 500; color: var(--ait-gray-dark); position: relative; padding: .35em 0; }
.ait-nav a:hover { color: var(--ait-navy); }
.ait-nav a.current { color: var(--ait-navy); font-weight: 600; }
.ait-nav a.current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--ait-cyan); }
.ait-has-dd { position: relative; }
.ait-dd {
  position: absolute; top: calc(100% + 16px); left: -19.2px; z-index: 5;
  background: #fff; border: 1px solid var(--ait-line); box-shadow: rgba(0, 46, 65, .14) 0 18px 40px;
  min-width: 260px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.ait-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -17.6px; height: 17.6px; } /* hover bridge */
.ait-has-dd:hover .ait-dd, .ait-has-dd:focus-within .ait-dd { opacity: 1; visibility: visible; transform: translateY(0); }
.ait-nav .ait-dd a { display: flex; flex-direction: column; padding: .65em .85em; font-weight: 500; color: var(--ait-navy); }
.ait-nav .ait-dd a:hover { background: var(--ait-gray-light); }
.ait-dd .desc { font-weight: 400; font-size: 12.8px; color: var(--ait-gray-mid); margin-top: .1em; }
.ait-cta { display: flex; align-items: center; gap: 20.8px; flex-shrink: 0; }
.ait-phone { display: flex; flex-direction: column; text-decoration: none; font-size: 12.8px; color: var(--ait-gray-mid); line-height: 1.35; }
.ait-phone strong { font-family: var(--ait-display); font-weight: 700; color: var(--ait-navy); font-size: 15.2px; }
.ait-btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--ait-body); font-weight: 600; font-size: 15.2px; line-height: 1.5;
  padding: .9em 1.6em; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s; white-space: nowrap;
}
.ait-btn:hover { transform: translateY(-2px); }
.ait-btn-cyan { background: var(--ait-cyan); color: var(--ait-navy); }
.ait-btn-cyan:hover { background: #0C9BCE; color: var(--ait-navy); }
.ait-btn-outline { background: transparent; border-color: var(--ait-line); color: var(--ait-navy); }
.ait-btn-outline:hover { border-color: var(--ait-navy); color: var(--ait-navy); }
.ait-toggle { display: none; background: none; border: 1px solid var(--ait-line); padding: .55em .65em; cursor: pointer; }
.ait-toggle span { display: block; width: 20px; height: 2px; background: var(--ait-navy); margin: 4px 0; }
@media (max-width: 980px) {
  .ait-nav, .ait-phone { display: none; }
  .ait-toggle { display: inline-flex; flex-direction: column; }
}
/* "Get a quote" stays visible on mobile, as on aspiring.com.au */

/* Mobile menu (copy of main site) */
.ait-mnav {
  display: none; position: fixed; inset: 0; z-index: 1060; background: #fff;
  padding: 24px var(--ait-pad); overflow-y: auto; font-family: var(--ait-body);
  transform: translateX(100%); opacity: 0; transition: transform .3s, opacity .3s;
}
.ait-mnav.open { display: block; }
.ait-mnav.open.in { transform: translateX(0); opacity: 1; }
.ait-mnav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.ait-mnav-head .ait-logo { height: 26px; }
.ait-mnav ul { list-style: none; padding: 0; margin: 0; }
.ait-mnav > ul > li { border-bottom: 1px solid var(--ait-line); }
.ait-mnav a:not(.ait-btn) { display: block; padding: 16px 0; text-decoration: none; color: var(--ait-navy); font-size: 17.6px; font-weight: 500; }
.ait-mnav .sub a:not(.ait-btn) { font-size: 15.2px; color: var(--ait-gray-dark); padding: 11.2px 0; }
.ait-mnav .sub { padding-left: 16px; }
.ait-mnav-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 12.8px; }
.ait-mnav-cta .ait-btn { justify-content: center; }
html.ait-noscroll, html.ait-noscroll body { overflow: hidden; }

/* ---------- 8. Light-blue shop bar ---------- */
.ait-shopbar { background: var(--ait-sky); border-bottom: 1px solid var(--ait-sky-line); font-family: var(--ait-body); position: relative; }
.ait-shopbar-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.ait-cat-btn {
  display: inline-flex; align-items: center; gap: .6em; flex-shrink: 0;
  height: 42px; padding: 0 1.1em; border: 0; cursor: pointer;
  background: var(--ait-navy); color: #fff; font: 600 14.72px/1 var(--ait-body);
}
.ait-cat-btn:hover, .ait-cat-btn[aria-expanded="true"] { background: var(--ait-blue); }
.ait-cat-btn .ait-burger { display: inline-grid; gap: 3px; }
.ait-cat-btn .ait-burger i { display: block; width: 14px; height: 2px; background: currentColor; }
.ait-cat-btn .ait-chev { font-size: .7em; transition: transform .15s; }
.ait-cat-btn[aria-expanded="true"] .ait-chev { transform: rotate(180deg); }
html body .ait-shopbar .ait-search { flex: 1 1 auto; min-width: 0; margin: 0; }
html body .ait-shopbar .ait-search form { margin: 0; }
html body .ait-shopbar .ait-search .input-overlay { position: relative; }
html body .ait-shopbar .ait-search .form-control {
  height: 42px; background: #fff !important; border: 1px solid var(--ait-sky-line);
  border-radius: 0 !important; font-size: 14.72px; color: var(--ait-navy);
}
html body .ait-shopbar .ait-search .form-control:focus { border-color: var(--ait-cyan); }
html body .ait-shopbar .ait-search .icon-left { color: var(--ait-navy); }
.ait-shoplinks { display: flex; align-items: center; gap: 22.4px; flex-shrink: 0; }
html body .ait-shoplinks .header-link {
  display: inline-flex; align-items: center; gap: .1em; margin: 0 !important; padding: 0 !important;
  color: var(--ait-navy); font: 600 14.72px/1 var(--ait-body); text-transform: none; letter-spacing: 0; text-decoration: none;
}
html body .ait-shoplinks .header-link:hover { color: var(--ait-blue); }
@media (max-width: 767.98px) {
  .ait-shopbar-inner { flex-wrap: wrap; padding-top: 9.6px; padding-bottom: 9.6px; gap: 9.6px 16px; }
  html body .ait-shopbar .ait-search { order: 3; flex-basis: 100%; }
  .ait-shoplinks { margin-left: auto; }
  .ait-cat-btn .ait-cat-label-long { display: none; }
}

/* Categories panel */
.ait-cats {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: #fff; border-top: 1px solid var(--ait-sky-line); border-bottom: 1px solid var(--ait-line);
  box-shadow: rgba(0, 46, 65, .14) 0 18px 40px;
  display: none;
}
.ait-cats.open { display: block; }
.ait-cats-grid { display: grid; grid-template-columns: 240px 1fr; min-height: 300px; }
.ait-cats-list { list-style: none; margin: 0; padding: 16px 0; border-right: 1px solid var(--ait-line); }
.ait-cats-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11.2px 17.6px 11.2px 0; text-decoration: none;
  color: var(--ait-navy); font: 500 15.2px/1.2 var(--ait-body);
  border-left: 3px solid transparent; padding-left: 14.4px;
}
.ait-cats-list a::after { content: "\203A"; color: var(--ait-gray-mid); font-size: 17.6px; }
.ait-cats-list a.active { background: var(--ait-sky); border-left-color: var(--ait-cyan); font-weight: 600; }
.ait-cats-pane { padding: 22.4px 0 25.6px 32px; display: none; }
.ait-cats-pane.active { display: block; }
.ait-cats-pane h4 { font: 700 18.4px/1.2 var(--ait-display) !important; color: var(--ait-navy) !important; margin: 0 0 16px; letter-spacing: -0.01em; }
.ait-cats-pane h4 a { color: inherit; text-decoration: none; }
.ait-cats-pane ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 3.2px 24px; }
.ait-cats-pane ul a { display: flex; align-items: center; gap: 11.2px; padding: 8.8px 6.4px; text-decoration: none; color: var(--ait-gray-dark); font-size: 14.72px; }
.ait-cats-pane ul a:hover { background: var(--ait-gray-light); color: var(--ait-navy); }
.ait-cats-pane ul a i { color: var(--ait-cyan); width: 1.2em; text-align: center; }
.ait-cats-all { display: inline-block; margin-top: 17.6px; font-weight: 600; font-size: 14.4px; color: var(--ait-blue); text-decoration: none; }
.ait-cats-all:hover { color: var(--ait-navy); }
@media (max-width: 767.98px) {
  .ait-cats { max-height: calc(100vh - 140px); overflow-y: auto; }
  .ait-cats-grid { grid-template-columns: 1fr; min-height: 0; }
  .ait-cats-list { border-right: 0; padding: 8px 0; }
  .ait-cats-pane { padding: 8px 0 19.2px; border-top: 1px solid var(--ait-line); }
  .ait-cats-pane h4 { display: none; }
  /* sub-list sits inside the category list on phones — undo the list-item styling */
  .ait-cats-list .ait-cats-pane { padding: 3.2px 0 12.8px 19.2px; border-top: 0; }
  .ait-cats-list .ait-cats-pane ul { grid-template-columns: 1fr; }
  .ait-cats-list .ait-cats-pane a { justify-content: flex-start; border-left: 0; padding: 8.8px 6.4px; font: 400 14.72px/1.3 var(--ait-body); color: var(--ait-gray-dark); background: none; }
  .ait-cats-list .ait-cats-pane a::after { content: none; }
  .ait-cats-list .ait-cats-pane a.ait-cats-all { color: var(--ait-blue); font-weight: 600; }
}

/* ---------- 9. Content blocks ---------- */
html body .breadcrumb { font-size: 13.6px; }
html body .breadcrumb a { color: var(--ait-gray-dark); text-decoration: none; }
html body .breadcrumb a:hover { color: var(--ait-blue); }
html body .bg-gray-100 { background: #F4F6F7 !important; }
html body .card { border-color: var(--ait-line); }
html body .accordion-button:not(.collapsed) { background: #F4F6F7; color: var(--ait-navy); box-shadow: none; }
html body .slick-dots li.slick-active button:before { color: var(--ait-cyan); opacity: 1; }
html body .slick-prev:before, html body .slick-next:before,
html body .slick-carousel .fa-chevron-left, html body .slick-carousel .fa-chevron-right { color: var(--ait-navy); }
html body .page-item.active .page-link { background: var(--ait-navy); border-color: var(--ait-navy); color: #fff; }
html body .page-link { color: var(--ait-navy); }

/* ---------- 10. Footer (rebuilt by kqm-theme.js) ----------
   Values copied from aspiring.com.au/css/style.css (.site-footer, .footer-top,
   .footer-brand, .footer-social, .footer-col, .footer-bottom, .lattice.light). */
html body footer { margin-top: 96px; }
html body footer .footer { background: var(--ait-navy); color: #fff; position: relative; overflow: hidden; }
.ait-lattice {
  position: absolute; width: 460px; height: 460px; right: -160px; top: -180px; z-index: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.09) 0 1px, transparent 1px 9px);
  transform: rotate(-9deg); pointer-events: none;
}
.ait-footer { position: relative; z-index: 1; font: 400 16px/1.65 var(--ait-body); color: #fff; }
.ait-footer .ait-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 48px;
  padding-top: 72px; padding-bottom: 48px;
}
.ait-footer .ait-flogo { display: block; height: 26px; }
.ait-footer .ait-flogo img { height: 100%; width: auto; display: block; }
.ait-footer .ait-tagline { color: rgba(255,255,255,.6); font-size: 14.72px; max-width: 32ch; margin: 19.2px 0 0; }
.ait-footer .ait-social { display: flex; gap: 14.4px; margin-top: 24px; }
.ait-footer .ait-social a {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ait-line-soft); color: #fff; transition: border-color .15s, background .15s;
}
.ait-footer .ait-social a:hover { border-color: var(--ait-cyan); background: rgba(13,171,227,.14); color: #fff; }
.ait-footer .ait-social svg { width: 15px; height: 15px; display: block; }
.ait-footer h5 {
  font: 700 12.48px/1.65 var(--ait-display) !important; letter-spacing: .09em !important; text-transform: uppercase;
  color: rgba(255,255,255,.45) !important; margin: 0 0 16px;
}
.ait-footer ul { list-style: none; padding: 0; margin: 0; }
.ait-footer li { margin-bottom: 11.2px; }
.ait-footer li a, .ait-footer li .plain { text-decoration: none; color: rgba(255,255,255,.82); font-size: 14.88px; }
html body .ait-footer li a { color: rgba(255,255,255,.82); }   /* beat KQM's footer link colour */
html body .ait-footer li a:hover { color: var(--ait-cyan); }
@media (max-width: 980px) { .ait-footer .ait-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 640px) { .ait-footer .ait-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Bottom bar — mirrors .footer-bottom: copyright left, legal links right */
.ait-bottom { position: relative; z-index: 1; }
.ait-bottom-inner {
  border-top: 1px solid var(--ait-line-soft);   /* line spans the content width, as on the main site */
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 25.6px; padding-bottom: 25.6px;
  font: 400 13.12px/1.65 var(--ait-body); color: rgba(255,255,255,.5);
}
.ait-bottom-inner a { text-decoration: none; color: rgba(255,255,255,.5) !important; font-weight: 400; }
.ait-bottom-inner a:hover { color: #fff !important; }
.ait-bottom-inner .ait-copy { min-width: 0; }
.ait-bottom-inner #poweredbykqm { display: block; }
/* Same as .footer-bottom on aspiring.com.au: links in a wrapping row, flush left once wrapped */
.ait-bottom-inner .ait-legal-links { display: flex; flex-wrap: wrap; gap: 6.4px 22.4px; }
.ait-bottom-inner .ait-legal-links a { margin: 0 !important; display: inline !important; }
html body footer .footer > .container.ait-kqm-orig { display: none !important; }

/* ---------- 11. Shop home page (built by kqm-theme.js on "/") ----------
   KQM's own home content (rich-text block + category tiles) is hidden;
   the Featured Products carousel is kept and restyled. */
html.ait-js #main:has(> #home-carousel) > .fr-view,
html.ait-js #main:has(> #home-carousel) > .bg-gray-100 { display: none !important; }

.ait-home { font-family: var(--ait-body); color: var(--ait-gray-dark); line-height: 1.65; font-size: 16px; }
.ait-home h1, .ait-home h2, .ait-home h3 { font-family: var(--ait-display); color: var(--ait-navy); margin: 0; }
.ait-home p { margin: 0; }
.ait-chip {
  display: inline-block; background: var(--ait-cyan); color: var(--ait-navy);
  font: 700 14.4px/1.65 var(--ait-body); padding: 6.5px 16px; transform: rotate(-2deg);
}
.ait-sec { padding: 88px 0; }
.ait-sec-head { max-width: 660px; margin-bottom: 40px; }
.ait-sec-head h2 { font-size: clamp(28px, 3.2vw, 36.8px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.16; margin-top: 18px; }
.ait-sec-head p { margin-top: 14px; font-size: 17px; }

/* Hero */
/* Navy hero — sets the shop apart from the white aspiring.com.au home hero */
.ait-hero { position: relative; overflow: hidden; padding: 72px 0 80px; background: var(--ait-navy); color: rgba(255,255,255,.78); }
html body .ait-hero h1 { color: #fff; }
.ait-hero .ait-hero-note { color: rgba(255,255,255,.7); }
.ait-hero .ait-btn-outline { border-color: var(--ait-line-soft); color: #fff; }
.ait-hero .ait-btn-outline:hover { border-color: #fff; color: #fff; }
.ait-hero::before { /* diamond-grid texture, top-left — main site's hero lattice, in white for the navy ground */
  content: ""; position: absolute; left: -180px; top: -160px; width: 420px; height: 420px; opacity: .7;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px);
  transform: rotate(-9deg); pointer-events: none;
}
.ait-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.ait-hero h1 { font-size: clamp(38px, 4.6vw, 57.6px); font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; margin-top: 22px; }
.ait-hero .ait-lede { margin-top: 22px; font-size: 18px; line-height: 1.65; max-width: 540px; }
.ait-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ait-hero-note { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 14px; }
.ait-hero-note::before { content: ""; width: 10px; height: 10px; background: var(--ait-good, #1F8A57); transform: rotate(45deg); box-shadow: 0 0 0 4px rgba(31,138,87,.15); }
.ait-btn-navy { background: var(--ait-navy); color: #fff; }
.ait-btn-navy:hover { background: #01405A; color: #fff; }
.ait-btn .ait-arrow { transition: transform .15s; }
.ait-btn:hover .ait-arrow { transform: translateX(3px); }

.ait-hero-visual { position: relative; min-height: 380px; }
.ait-hero-visual::before { /* angled cyan square */
  content: ""; position: absolute; right: 0; top: 0; width: 78%; height: 100%;
  background: var(--ait-cyan); transform: rotate(4deg); transform-origin: top right;
}
.ait-card {
  position: relative; background: #fff; border-left: 4px solid var(--ait-cyan);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); padding: 17px 21px; width: 82%;
}
.ait-card + .ait-card { margin-top: 18px; }
.ait-card:nth-child(1) { margin-left: 0; }
.ait-card:nth-child(2) { margin-left: 12%; }
.ait-card:nth-child(3) { margin-left: 4%; }
.ait-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ait-card-label { font: 600 11.5px/1.65 var(--ait-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ait-gray-mid); }
.ait-status { font: 700 10.5px/1 var(--ait-body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border: 1px solid currentColor; }
.ait-status.good { color: #1F8A57; background: rgba(31,138,87,.07); }
.ait-status.info { color: var(--ait-blue); background: rgba(10,139,199,.07); }
.ait-card-title { font: 600 16px/1.4 var(--ait-body); color: var(--ait-navy); margin-top: 6px; }
.ait-card-sub { font-size: 13px; color: var(--ait-gray-mid); margin-top: 2px; }

/* Trust strip */
/* Navy band — same look as .stats-band on the main site */
/* Light blue (same as the shop bar) so it frames the navy hero rather than running on from it */
.ait-trust { background: var(--ait-sky); border-bottom: 1px solid var(--ait-sky-line); padding: 51px 0; position: relative; overflow: hidden; }
.ait-trust::before { /* lattice, top-right — navy lines on the light ground */
  content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -120px;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,46,65,.07) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(0,46,65,.07) 0 1px, transparent 1px 9px);
  transform: rotate(-9deg); pointer-events: none;
}
.ait-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; z-index: 1; }
.ait-trust-item strong { display: block; font: 800 clamp(22px, 2.2vw, 28px)/1.15 var(--ait-display); color: var(--ait-navy); margin-bottom: 6px; }
/* Two-column strip (tablet/mobile): every heading breaks onto two lines, so all four look alike */
.ait-trust-item br.ait-mbr { display: none; }
@media (max-width: 991.98px) { .ait-trust-item br.ait-mbr { display: inline; } }
.ait-trust-item span { display: block; font-size: 13.6px; line-height: 1.5; color: var(--ait-gray-dark); }
/* Each item spans two rows of the strip's grid via subgrid, so in any row the captions start on the
   same line even when one heading wraps ("100+ businesses") and its neighbour doesn't ("Since 2002") */
@supports (grid-template-rows: subgrid) {
  .ait-trust { padding-bottom: 23px; }                   /* + the caption's 28px below = 51px, as before */
  .ait-trust-grid { row-gap: 0; }
  .ait-trust-item { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .ait-trust-item span { padding-bottom: 28px; }          /* spacing between rows of items (replaces row-gap) */
}

/* Category cards */
.ait-catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ait-catcard {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--ait-line); padding: 28px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ait-catcard:hover { border-color: var(--ait-navy); transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(0,46,65,.35); }
.ait-caticon {
  width: 52px; height: 52px; display: grid; place-items: center; background: var(--ait-cyan); color: var(--ait-navy);
  font-size: 22px; position: relative; margin-bottom: 20px;
}
.ait-caticon::after { content: ""; position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; background: var(--ait-navy); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ait-catcard h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.ait-catcard h3 a { color: inherit; text-decoration: none; }
.ait-catcard h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.ait-catcard ul { list-style: none; margin: 12px 0 0; padding: 0; position: relative; z-index: 1; }
.ait-catcard li a { display: block; padding: 4px 0; color: var(--ait-gray-dark); text-decoration: none; font-size: 14.5px; }
.ait-catcard li a:hover { color: var(--ait-blue); }
.ait-catcard .ait-more { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: 14.5px; color: var(--ait-blue); }

/* Popular chips */
.ait-popular { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; align-items: center; }
.ait-popular-label { font: 700 13px/1 var(--ait-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ait-gray-mid); margin-right: 6px; }
.ait-pop {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; text-decoration: none;
  background: var(--ait-sky); border: 1px solid var(--ait-sky-line); color: var(--ait-navy); font-weight: 600; font-size: 14.5px;
}
.ait-pop small { font-weight: 400; font-size: 12.5px; color: var(--ait-gray-dark); }
.ait-pop:hover { background: var(--ait-navy); border-color: var(--ait-navy); color: #fff; }
.ait-pop:hover small { color: rgba(255,255,255,.7); }

/* Steps */
.ait-steps-sec { background: var(--ait-navy); color: rgba(255,255,255,.78); position: relative; overflow: hidden; }
.ait-steps-sec .ait-sec-head h2 { color: #fff; }
.ait-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ait-line-soft); }
.ait-step { padding: 32px 32px 8px 0; }
.ait-step + .ait-step { padding-left: 32px; border-left: 1px solid var(--ait-line-soft); }
.ait-step-num { font: 800 15px/1 var(--ait-display); color: var(--ait-cyan); letter-spacing: .06em; }
.ait-step h3 { color: #fff !important; font-size: 20px; font-weight: 700; margin: 14px 0 10px; }
.ait-step p { font-size: 15.5px; }

/* Featured products (KQM's carousel, kept) */
html body .ait-featured-sec { padding-top: 88px; }
html body .ait-featured-sec h3.text-center.fw-bold { display: none; }
/* slick's arrows sit 50px outside the carousel; inset it so they don't cause a horizontal scrollbar */
html body .ait-featured-sec .slick-carousel { width: auto; margin-left: 56px !important; margin-right: 56px !important; }
@media (max-width: 575.98px) { html body .ait-featured-sec .slick-carousel { margin-left: 36px !important; margin-right: 36px !important; } }

/* CTA band */
.ait-cta-band { padding: 88px 0 0; } /* footer adds its own 96px top margin, as on the main site */
.ait-cta-box { position: relative; overflow: hidden; background: var(--ait-navy); padding: 64px 56px; color: rgba(255,255,255,.78); }
.ait-cta-box::after { content: ""; position: absolute; right: -80px; top: -40px; width: 420px; height: 140%; background: rgba(255,255,255,.05); transform: rotate(14deg); }
.ait-cta-box h2 { color: #fff !important; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.015em; position: relative; z-index: 1; }
.ait-cta-box p { margin-top: 12px; font-size: 17px; position: relative; z-index: 1; max-width: 620px; }
.ait-cta-box .ait-hero-ctas { position: relative; z-index: 1; }
.ait-btn-outline-light { background: transparent; border-color: var(--ait-line-soft); color: #fff; }
.ait-btn-outline-light:hover { border-color: #fff; color: #fff; }

@media (max-width: 991.98px) {
  .ait-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ait-hero-visual { min-height: 0; max-width: 520px; }
  .ait-catgrid { grid-template-columns: repeat(2, 1fr); }
  .ait-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .ait-steps { grid-template-columns: 1fr; }
  .ait-step, .ait-step + .ait-step { padding: 28px 0 8px; border-left: 0; border-top: 1px solid var(--ait-line-soft); }
  .ait-step:first-child { border-top: 0; }
}
@media (max-width: 575.98px) {
  .ait-sec { padding: 56px 0; }
  .ait-cta-band { padding: 56px 0 0; }
  .ait-hero { padding: 44px 0 56px; }
  .ait-catgrid { grid-template-columns: 1fr; }
  .ait-card { width: 92%; }
  .ait-card:nth-child(2) { margin-left: 8%; }
  .ait-cta-box { padding: 40px 24px; }
}