/* ==========================================================
   industry.css   VERSION 1
   Shared stylesheet for the 9 industry IT-support pages
   (it-support-<industry>-perth). All of them used near
   identical markup with their own inline <style> block, so
   this is the deduplicated union of those eight sheets:
   160 unique rules covering every class any of them used.

   Removed: nav, hamburger, footer, sticky bar and WhatsApp
   bubble rules. shell.css owns those and loads after this.

   Added: the :root block, because every page stylesheet on
   this site carries its own complete set so a token can
   never go missing. Plus the press-feedback, reduced-motion
   and contrast rules at the bottom.

   Label pills stripped: .industry-pill, .coverage-label and
   .problem-label all had a fill and a capsule. Plain
   uppercase text now, per the sitewide rule.
   ========================================================== */
:root {
  /* Mobile standard (phones, max-width 720px). Identical in every page
     stylesheet; the "MOBILE STANDARD" block at the end of this file maps
     this page's classes onto them. */
  --m-gutter: 20px;
  --m-section: 48px;
  --m-block: 24px;
  --m-hero-top: 24px;
  --m-band: 24px;
  --m-card-pad: 20px;
  --m-card-radius: 14px;
  --m-panel-pad: 16px;
  --m-panel-radius: 12px;
  --m-row-pad: 14px 16px;
  --m-gap-cards: 12px;
  --m-gap-rows: 10px;
  --m-h1: 1.7rem;
  --m-h2: 1.3rem;
  --m-h2-space: 12px;
  --m-text: 16px;
  --m-text-min: 13px;
  --m-btn: 48px;

  --blue: #1560FF;
  --blue-lt: #EEF3FF;
  --blue-mid: #C7D8FF;
  --blue-dk: #0A3ACC;
  --ink: #0F172A;
  --ink2: #1E293B;
  --muted: #5E6E84;
  --muted2: #64748B;
  --border: #E2E8F0;
  --border2: #CBD5E1;
  --bg: #FFFFFF;
  --bg2: #F8FAFC;
  --bg3: #F1F5F9;
  --wa: #22C55E;
  --wa-dk: #15803D;
  --wa-deep: #166534;
  --gold: #F59E0B;
  /* These three were used below but never defined, so the summary box
     heading (teal) was invisible on its dark panel, the gradient bars
     did not render and the dark panels had square corners. */
  --teal: #00CFFF;
  --green: #15803D;
  --radius-lg: var(--radius);
  --display: 'Sora', 'Sora Fallback', sans-serif;
  --body: 'DM Sans', 'DM Sans Fallback', sans-serif;
  --radius: 14px;
  --nav-h: 64px;
  --mob-nav-h: 60px;
  /* Critically damped, no overshoot: the default for hover and reveal motion
     that is not carrying momentum from a drag or flick. */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  /* Fast, for the instant press feedback itself. */
  --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.post-breadcrumb a:where(:not([class])) {
  display: inline-block;
  padding: 12px 6px;
  margin: -12px -6px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.post-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.post-meta-author { color: var(--ink); font-weight: 700; }
.post-body p { margin-bottom: 1.35rem; }
.post-body h3:where(:not([class])) { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 1.75rem 0 0.5rem; }
.post-body ul:where(:not([class])), .post-body ol:where(:not([class])) { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-body li { margin-bottom: 0.6rem; color: var(--ink2); }
.post-body strong:where(:not([class])) { color: var(--ink); font-weight: 700; }
.post-body a:not([class]) { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--blue-mid); }
/* Anything with a class is a button or card and must never be underlined. */
.post-body a[class] { text-decoration: none; border-bottom: 0; }
.callout strong:where(:not([class])) { color: var(--blue); }
.callout-green strong:where(:not([class])) { color: var(--green); }
.summary-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal), var(--wa));
}
.summary-box ul:where(:not([class])) { padding-left: 0; list-style: none; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1.75rem 0; }
.check-list { list-style: none; padding: 0; margin: 1.25rem 0; }
.inline-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal), var(--wa));
}
.faq-section { margin: 3rem 0 0; }
.industry-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0; }
.industry-pill svg { flex-shrink: 0; width: 14px; height: 14px; }
.post-footer-link { font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; display: flex; align-items: center; gap: 4px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal), var(--wa));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 99999;
  transition: transform 0.1s var(--ease-press);
}
.article-wrap { max-width: 740px; margin: 0 auto; padding: calc(var(--nav-h) + 44px) 2rem 5rem; }
.post-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted2); margin-bottom: 1.25rem; flex-wrap: wrap; }
.post-h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted2);
  font-weight: 500;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2rem;
}
.post-body { font-size: 15.5px; color: var(--ink2); line-height: 1.85; }
.post-body h2:where(:not([class])) {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
  margin: 2.75rem 0 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.summary-box {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin: 0 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.summary-box-title {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.85rem;
}
.summary-box ul li:where(:not([class])) {
  font-size: 13.5px;
  color: rgba(255,255,255,0.75);
  padding: 0.3rem 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.summary-box ul li:where(:not([class]))::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}
.stat-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1rem; text-align: center; }
.stat-val {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
  margin-bottom: 5px;
}
.stat-lbl { margin-top: 3px; font-size: 12px; color: var(--muted); font-weight: 500; display: block; line-height: 1.4; }
.callout {
  background: var(--blue-lt);
  border: 1.5px solid var(--blue-mid);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 1.75;
}
.callout-blue { background: var(--blue-lt); border: 1px solid var(--blue-mid); border-left: 3px solid var(--blue); }
.callout-blue strong:where(:not([class])) { color: var(--blue-dk); }
.callout-green {
  border-color: #BBF7D0;
  border-left-color: var(--wa);
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-left: 3px solid var(--wa);
}
.callout-amber strong:where(:not([class])) { color: #92400E; }
.check-list li:where(:not([class])) {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 0.75rem;
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 1.7;
}
.check-icon svg { width: 9px; height: 9px; color: var(--wa-dk); }
.service-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 1.75rem 0; }
.service-link-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: border-color 0.15s, background 0.15s;
}
.service-link-card > div { min-width: 0; overflow-wrap: break-word; }
.service-link-label { line-height: 1.35; font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.service-link-price { white-space: nowrap; font-size: 12px; color: var(--muted); font-weight: 500; }
.service-link-arrow { color: var(--blue); font-size: 16px; flex-shrink: 0; opacity: 0.7; }
.industry-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  padding: 0;
}
.faq-section-title {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.post-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat-val { font-size: 1.65rem; }
}
.callout-amber { border: 1px solid #FDE68A; border-left: 3px solid #D97706; background: #FFFBEB; border-color: #FDE68A; border-left-color: #D97706; }
.coverage-list, .problem-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.75rem;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.coverage-item, .problem-item { display: grid; grid-template-columns: 260px 1fr; border-bottom: 1px solid var(--border); }
.coverage-item:last-child, .problem-item:last-child { border-bottom: none; }
.coverage-label, .problem-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.coverage-icon > svg { width: 12px; height: 12px; }
.coverage-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--wa-dk);
  font-weight: 800;
  margin-top: 1px;
}
.problem-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  color: #DC2626;
  font-weight: 800;
  margin-top: 1px;
}
.coverage-label-text, .problem-label-text {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.coverage-desc, .problem-desc { padding: 1rem 1.25rem; font-size: 14px; color: var(--ink2); line-height: 1.65; background: var(--bg); }
#scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1560FF, #00CFFF, #22C55E);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 99999;
}
.coverage-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.coverage-item { display: grid; grid-template-columns: 260px 1fr; gap: 0; border-bottom: 1px solid var(--border); }
.coverage-item:last-child { border-bottom: none; }
.coverage-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.coverage-label-text {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.coverage-desc { padding: 1rem 1.25rem; font-size: 14px; color: var(--ink2); line-height: 1.65; background: var(--bg); }
.problem-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.problem-item { display: grid; grid-template-columns: 260px 1fr; gap: 0; border-bottom: 1px solid var(--border); }
.problem-item:last-child { border-bottom: none; }
.problem-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.problem-label-text {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.problem-desc { padding: 1rem 1.25rem; font-size: 14px; color: var(--ink2); line-height: 1.65; background: var(--bg); }
@media (max-width: 720px) {
  body { padding-top: var(--mob-nav-h); }
  .article-wrap { padding: 1.5rem 1.25rem 4rem; }
  .post-h1 { font-size: 1.7rem; }
  .post-body h2:where(:not([class])), .faq-section-title { font-size: 1.3rem; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .inline-cta { padding: 1.4rem 1.25rem; }
  .inline-cta-btns { flex-direction: column; }
  .inline-cta-btn, .inline-cta-btn-outline { width: 100%; justify-content: center; }
  .service-links { grid-template-columns: minmax(0, 1fr); }
  /* Stack the two-column tables on mobile */
  .coverage-item, .problem-item { grid-template-columns: 1fr; }
  .coverage-label, .problem-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 0.5rem;
  }
  .coverage-desc, .problem-desc { padding: 0.85rem 1.25rem; }
}
.check-icon {
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: var(--wa-dk);
  font-weight: 800;
}
.check-icon.ok { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); }
.check-icon.ok svg { width: 9px; height: 9px; color: var(--wa-dk); }
.check-icon > svg { width: 10px; height: 10px; }
.check-icon.warn { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); }
.check-icon.warn svg { width: 9px; height: 9px; color: #DC2626; }
/* ==========================================================
   Press feedback, motion and accessibility
   Written against the classes the pages actually use:
   .inline-cta-btn / -outline and .faq-question are the
   buttons, .service-link-card, .industry-pill and
   .post-footer-link are the links, and .callout, .faq-item,
   .summary-box and .stat-box are the panels.
   ========================================================== */
/* The grey iOS tap flash paints over the press feedback below, so the two
   fight each other. The scale and colour change are the feedback now. */
.inline-cta-btn, .inline-cta-btn-outline, .service-link-card, .industry-pill, .post-footer-link { -webkit-tap-highlight-color: transparent; }
/* Feedback on press, not release: the control compresses the instant a finger
   or cursor is down, so a tap is never left unacknowledged. */
.inline-cta-btn:active, .inline-cta-btn-outline:active { transform: scale(0.97); transition: transform 0.1s var(--ease-press); }
.service-link-card:active { transform: scale(0.985); transition: transform 0.1s var(--ease-press); }
.industry-pill:active, .post-footer-link:active { transform: scale(0.95); transition: transform 0.1s var(--ease-press); }
/* Hover settles into place rather than bouncing past it. Overshoot belongs to
   momentum-driven gestures, not a static hover. */
.service-link-card, .callout, .summary-box, .stat-box {
  transition: border-color 0.2s, transform 0.3s var(--ease-settle), box-shadow 0.3s var(--ease-settle);
}
/* The FAQ arrow gets a touch of overshoot, which is the one place it belongs:
   Apple's own spec value for rotation is damping 0.8, so the tap reads as
   answered rather than merely obeyed. */
/* Reduced transparency: no translucent surfaces on these pages, so nothing
   to declare. shell.css handles the chrome. */
/* ==========================================================
   On-page audit form
   These pages previously sent every CTA off to the hub's form
   at /business-it-support#audit-section, which loses people on
   the hop. The form lives here now. There is no WhatsApp route
   on the industry pages: a practice manager researching
   compliance at 9pm wants to leave details, not open a chat.
   ========================================================== */
.audit-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal), var(--wa));
}
.audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.audit-input-group { display: flex; flex-direction: column; gap: 5px; }
.audit-input-group.full { grid-column: 1 / -1; }
.audit-input, .audit-select {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color 0.18s, background 0.18s;
}
.audit-input:focus, .audit-select:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.1); }
.audit-select option { background: var(--ink); color: #fff; }
.audit-submit {
  grid-column: 1 / -1;
  margin-top: 4px;
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 50px;
  padding: 14px 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s, transform 0.25s var(--ease-settle);
}
.audit-submit:active { transform: scale(0.98); transition: transform 0.1s var(--ease-press); }
/* ==========================================================
   Keyboard focus
   Nothing here had a focus indicator, so a keyboard user had
   no idea where they were on a 3,000 word page. focus-visible
   rather than focus, so a mouse click does not leave a ring
   behind but tabbing always shows one.
   ========================================================== */
.inline-cta-btn:focus-visible, .inline-cta-btn-outline:focus-visible, .service-link-card:focus-visible, .industry-pill:focus-visible, .post-footer-link:focus-visible, .post-breadcrumb a:where(:not([class])):focus-visible, .post-body a:focus-visible, .audit-submit:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}
/* On the dark CTA and audit panels the blue ring disappears into the
   background, so those get a light one instead. */
.inline-cta .inline-cta-btn:focus-visible, .inline-cta .inline-cta-btn-outline:focus-visible, .audit-block .audit-submit:focus-visible {
  outline-color: #fff;
}
.audit-input:focus-visible, .audit-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.check-list li strong:where(:not([class])) { color: var(--ink); font-weight: 700; }
/* Inline success and error, so a submission never leaves the site for
   Web3Forms' own branded confirmation page. */
.audit-done-tick > svg { width: 26px; height: 26px; }
.audit-done-tick {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(34,197,94,0.15);
  border: 1.5px solid rgba(34,197,94,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #4ADE80;
}
.audit-done-title { font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0 0 0.4rem; }
.audit-err {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 600;
  color: #FCA5A5;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0;
}
.audit-submit:disabled { opacity: 0.6; cursor: default; }
/* The hidden attribute is ignored on anything that sets its own display, so
   the form stayed visible after submitting. */
[hidden] { display: none !important; }
/* ==========================================================
   Dark panel contrast and CTA layout
   The outline button sat at 0.75 alpha text on a 0.2 alpha
   border, which was barely legible. These pages are read by
   practice managers and solicitors, so the bar is higher.
   ========================================================== */
.inline-cta {
  background: var(--ink);
  border-radius: var(--radius-lg);
  margin: 2.5rem 0;
  position: relative;
  overflow: hidden;
  padding: 2rem 2.25rem;
}
.inline-cta-title {
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
.inline-cta-desc { color: rgba(255,255,255,0.72); font-size: 14.5px; line-height: 1.75; margin-bottom: 1.5rem; max-width: 62ch; }
.inline-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.inline-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  font-family: var(--body);
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(21,96,255,0.35);
  transition: transform 0.25s var(--ease-settle);
  white-space: nowrap;
  font-size: 14.5px;
  padding: 13px 26px;
}
.inline-cta-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  border-radius: 50px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 26px;
  border: 1.5px solid rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.04);
}
/* Audit panel: same treatment, plus room to breathe. */
.audit-block { background: var(--ink); border-radius: 16px; margin: 2.5rem 0; position: relative; overflow: hidden; padding: 2.25rem 2.25rem 2rem; }
.audit-block-title {
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.audit-block-desc { font-size: 14px; line-height: 1.7; margin: 0 0 1.5rem; color: rgba(255,255,255,0.72); max-width: 62ch; margin-bottom: 1.75rem; }
.audit-label { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: rgba(255,255,255,0.85); }
.audit-input::placeholder { color: rgba(255,255,255,0.6); }
.audit-note {
  grid-column: 1 / -1;
  font-size: 12.5px;
  text-align: center;
  margin-top: 2px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 54ch;
  margin: 0.5rem auto 0;
}
.audit-done { text-align: center; padding: 1.5rem 0 0.75rem; }
.audit-done-text { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.72); max-width: 46ch; margin: 0 auto; }
@media (max-width: 620px) {
  .audit-grid { grid-template-columns: 1fr; }
  .inline-cta { padding: 1.5rem 1.35rem; }
  .inline-cta-btn, .inline-cta-btn-outline { width: 100%; justify-content: center; }
  .audit-block { padding: 1.5rem 1.25rem; }
}
/* Links to the other industry pages, at the foot of each page. */
.ind-more { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.ind-more-title { font-family: var(--display); font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.5rem; }
.ind-more-sub { font-size: 14px; color: var(--muted); margin-bottom: 1.25rem; }

/* FAQ layout on this page: one column. */
.ind-faq-list { display: flex; flex-direction: column; gap: 10px; }
/* ==========================================================
   FAQ: one component, the same on every page. The homepage design,
   copied into each page stylesheet that has an FAQ (index, pricing,
   reviews, health-check, service, tech-tip, suburb, industry,
   business-it). Keep every copy identical: change one, change all.

   Markup:
     <div class="faq-item">
       <button type="button" class="faq-q" aria-expanded="false" aria-controls="faq-a-1">
         Question
         <svg viewBox="0 0 24 24" ...><polyline points="6 9 12 15 18 9"/></svg>
       </button>
       <div class="faq-a" id="faq-a-1" role="region"><p>Answer</p></div>
     </div>
   The shared handler in _includes/scripts.html opens one at a time.
   The answer opens with grid-template-rows 0fr to 1fr rather than a
   max-height, so it sizes itself to the text and can never be clipped.
   The page lays the items out (list, gap, columns); this block only
   styles an item.
   ========================================================== */
.faq-item { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s; }
.faq-item.open { border-color: var(--blue-mid); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: color 0.15s,background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.faq-q:active { background: var(--bg2); }
.faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* Rotation gets a touch of overshoot so the tap feels answered. */
.faq-q svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--blue); transition: transform 0.35s var(--ease-settle); }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s var(--ease-settle); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p:where(:not([class])) {
  min-height: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  margin: 0;
  padding: 0 1.5rem;
  transition: padding 0.4s var(--ease-settle);
}
.faq-item.open .faq-a p:where(:not([class])) { padding: 0 1.5rem 1.25rem; }
.faq-a a:where(:not([class])) { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--blue-mid); }
.faq-a strong:where(:not([class])) { color: var(--ink); font-weight: 600; }
@media (hover: hover) {
  .post-breadcrumb a:where(:not([class])):hover { color: var(--blue-dk); }
  .post-body a:not([class]):hover { color: var(--blue-dk); border-bottom-color: var(--blue-dk); }
  .inline-cta-btn:hover { transform: translateY(-2px); }
  .industry-pill:hover { color: var(--blue-dk); }
  .industry-pill:hover svg { color: var(--blue-dk); }
  .post-footer-link:hover { color: var(--blue-dk); }
  .service-link-card:hover {
    border-color: var(--blue);
    background: var(--blue-lt);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15,23,42,0.08);
  }
  .audit-submit:hover { background: var(--blue-dk); }
  .inline-cta-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }
  .faq-item:hover { border-color: var(--blue-mid); }
  .faq-q:hover { color: var(--blue); }
  .faq-a a:where(:not([class])):hover { color: var(--blue-dk); border-bottom-color: var(--blue-dk); }
}
@media (max-width:720px) {
  .faq-q { font-size: 14px; padding: 1rem 1.25rem; }
  .faq-a p:where(:not([class])) { font-size: 13.5px; padding: 0 1.25rem; }
  .faq-item.open .faq-a p:where(:not([class])) { padding: 0 1.25rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service-link-card, .callout, .summary-box, .stat-box, .inline-cta-btn, .inline-cta-btn-outline, .industry-pill, .post-footer-link {
    transition-duration: 0.15s;
  }
  .service-link-card:hover, .service-link-card:active, .inline-cta-btn:active, .inline-cta-btn-outline:active, .industry-pill:active, .post-footer-link:active {
    transform: none;
  }
  .audit-submit:active { transform: none; }
  .audit-input, .audit-select, .audit-submit { transition-duration: 0.15s; }
  .faq-item, .faq-q, .faq-q svg, .faq-a, .faq-a p:where(:not([class])) { transition: none; }
}
@media (prefers-contrast: more) {
  .post-body p, .post-body li, .summary-box { color: #334155; }
  .callout, .summary-box, .stat-box, .service-link-card { border-color: #0F172A; }
  .inline-cta-btn-outline, .industry-pill { border-color: #0A3ACC; }
  .audit-input, .audit-select { border-color: rgba(255,255,255,0.5); }
  .audit-label { color: #fff; }
  .audit-block-desc, .audit-note { color: rgba(255,255,255,0.8); }
  .inline-cta-btn:focus-visible, .inline-cta-btn-outline:focus-visible, .service-link-card:focus-visible, .industry-pill:focus-visible, .post-footer-link:focus-visible, .post-breadcrumb a:where(:not([class])):focus-visible, .post-body a:focus-visible, .audit-submit:focus-visible, .audit-input:focus-visible, .audit-select:focus-visible {
    outline-width: 3px;
  }
  .audit-done-text { color: rgba(255,255,255,0.85); }
  .audit-err { color: #FECACA; border-color: #EF4444; }
  .faq-a p:where(:not([class])) { color: #334155; }
  .faq-item { border-color: #0F172A; }
}

/* ==========================================================
   MOBILE STANDARD, phones (max-width: 720px)
   The same numbers on every page (tokens in :root, --m-*):
     side margin 20 | sections 48 top and bottom, hero 24 on top |
     thin bands 24 | cards and lists inside a section 24 above and
     below | cards 20 padding, 14 corners | boxes inside a
     card 16 padding, 12 corners | table-style rows 14/16 |
     gaps: 12 between cards, 10 between stacked rows |
     H1 1.7rem | H2 1.3rem with 12 below | reading text 16px |
     no sentence under 13px | buttons 48px tall, full width.
   It sits last in the file on purpose, so it wins over the older
   per-breakpoint values above it. Desktop is untouched.
   ========================================================== */
@media (max-width: 720px) {
  /* Side margin and page top */
  .article-wrap { padding-left: var(--m-gutter); padding-right: var(--m-gutter); padding-top: calc(var(--mob-nav-h) + var(--m-hero-top)); }

  /* Article head: 24 under the breadcrumb, 12 under the label, 16 under
     the headline, 24 under the byline; 48 to the next block */
  .post-breadcrumb { margin-bottom: 24px; }
  .post-cat { display: block; margin-bottom: 12px; }
  .post-h1 { font-size: var(--m-h1); margin-top: 0; margin-bottom: 16px; }
  .post-meta { padding-bottom: 24px; margin-bottom: var(--m-section); }
  .summary-box { margin-top: 0; margin-bottom: var(--m-section); }

  /* Body: 48 above every section heading, 24 around the cards and lists
     inside a section, 48 around the big call-to-action boxes */
  .post-body h2:where(:not([class])) { margin-top: var(--m-section); margin-bottom: var(--m-h2-space); }
  .post-body > :first-child { margin-top: 0; }
  .stat-row, .callout, .service-links, .coverage-list, .problem-list { margin-top: var(--m-block); margin-bottom: var(--m-block); }
  .inline-cta, .audit-block { margin-top: var(--m-section); margin-bottom: var(--m-section); }
  .faq-section, .ind-more, .post-footer-nav { margin-top: var(--m-section); }
  .faq-section-title, .ind-more { padding-top: var(--m-block); }
  .post-footer-nav { padding-top: var(--m-block); }

  /* Cards, rows and the boxes inside them */
  .summary-box, .stat-box, .callout, .service-link-card, .inline-cta, .audit-block { padding: var(--m-card-pad); border-radius: var(--m-card-radius); }
  .coverage-list, .problem-list { border-radius: var(--m-card-radius); }

  /* Gaps */
  .stat-row, .service-links, .audit-grid { gap: var(--m-gap-cards); }
  .ind-faq-list { gap: var(--m-gap-rows); }

  /* Headings */
  .post-body h2:where(:not([class])), .faq-section-title { font-size: var(--m-h2); }
  .faq-section-title { margin-bottom: var(--m-h2-space); }
  .inline-cta-title, .audit-block-title { margin-bottom: var(--m-h2-space); }

  /* Text */
  .post-body, .post-body p:where(:not([class])), .check-list > li, .problem-item, .coverage-item { font-size: var(--m-text); }
  .post-breadcrumb, .stat-lbl, .service-link-price, .audit-label, .audit-note { font-size: var(--m-text-min); }

  /* Buttons */
  .inline-cta-btn, .inline-cta-btn-outline, .audit-submit { min-height: var(--m-btn); padding-top: 0; padding-bottom: 0; width: 100%; justify-content: center; }

  .post-body h2:where(:not([class])) + *, .faq-section-title + *, .ind-more-title + * { margin-top: 0; }
  .ind-more-sub { font-size: var(--m-text); }
  .coverage-list, .problem-list { padding: 0; }
  .industry-links { gap: 8px; }
}