/*
Theme Name: Assure Computer Solutions
Theme URI: https://assurecs.net
Author: Tyler's Tech Services
Description: Lightweight SitePilot-compatible WordPress theme for Assure Computer Solutions, appointment-only computer repair in Temple, TX.
Version: 1.13.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: acs
*/

/* ---------------------------------------------------------------
   Tokens
   Bright orange #FF6600 pairs with the original logo's orange and charcoal.
   It is 2.9:1 on white, so it is never a text colour and never carries white
   text; it stays for decorative accents (header strip, borders, traces).
   Orange buttons are a deeper, fully saturated orange with white text:
   --orange-button #C94A00 (white text 4.71:1, AA for normal text) and
   --orange-button-hover #A83C00 (white text 6.34:1). Small links are
   charcoal with an orange underline or arrow. --orange-strong (#F05A00,
   3.4:1 on white, 3.1:1 on --surface and --orange-50) is used where an orange
   graphic must meet 3:1: button edges, icons, state indicators. Small orange
   text (eyebrows) uses --orange-text (5.2:1 on white, 4.8:1 on --surface).
   Focus rings are charcoal (15:1 on white; white on the slate band).
   Cool slate #334155 is the restrained secondary colour: service icons,
   secondary panels, step markers, line drawings and supporting labels. It is
   10.4:1 on white and 9.4:1 on --slate-50, so it may carry text. Primary
   actions stay orange. --slate-line is decorative only (borders, grid detail).
---------------------------------------------------------------- */
:root {
  --orange: #ff6600;
  --orange-strong: #f05a00;
  --orange-text: #c2410c;
  --orange-50: #fff0e5;
  --orange-button: #c94a00;
  --orange-button-hover: #a83c00;
  --on-orange: #ffffff;
  --charcoal: #333333;
  --slate: #334155;
  --slate-50: #eef3f8;
  --slate-line: #cfd9e4;
  --ink: #252525;
  --text: #444444;
  --muted: #5b6068;
  --bg: #ffffff;
  --surface: #f5f6f7;
  --surface-2: #eceef1;
  --line: #e1e6ec;
  --line-strong: #c9cdd3;
  --control: #868c95;
  --focus: #252525;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 6px 20px rgba(17, 24, 39, 0.07);
  --wrap: 72rem;
  --measure: 38rem;
  --section-y: clamp(2.5rem, 6.5vw, 5rem);
  --gap: clamp(1rem, 2.2vw, 1.5rem);
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0v24' fill='none' stroke='%23334155' stroke-opacity='.08'/%3E%3C/svg%3E");
  --traces: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='408' fill='none' stroke='%23334155' stroke-opacity='.26' stroke-width='1.5'%3E%3Cpath d='M480 72H360l-24 24H270M480 168H408l-24-24h-42M480 264H432l-24 24H330M480 336H384l-48 48h-54M432 0v24l-24 24h-30'/%3E%3Ccircle cx='264' cy='96' r='5'/%3E%3Ccircle cx='336' cy='144' r='5'/%3E%3Ccircle cx='324' cy='288' r='5'/%3E%3Ccircle cx='372' cy='48' r='5'/%3E%3Ccircle cx='276' cy='384' r='5' stroke='%23f05a00' stroke-opacity='1'/%3E%3C/svg%3E");
  /* Sticky header: --sticky-top is the WordPress admin bar (0 when logged out);
     --header-h is the closed header's height (site.js measures the exact value). */
  --sticky-top: 0px;
  --header-h: 4.4rem;
  /* Circuit-trace details (decorative CSS backgrounds only; never behind running text or form controls). */
  --trace-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='36' fill='none' stroke='%23334155' stroke-opacity='.3' stroke-width='1.5'%3E%3Cpath d='M360 9H262l-9 9h-74M360 27H318l-7-7h-47M92 18H40l-8-8H0M114 18h61'/%3E%3Crect x='92' y='11' width='22' height='14' rx='2'/%3E%3Cpath d='M97 11V7M103 11V7M109 11V7M97 25v4M103 25v4M109 25v4'/%3E%3Ccircle cx='175' cy='18' r='3.5'/%3E%3Ccircle cx='260' cy='20' r='3.5' stroke='%23f05a00' stroke-opacity='1'/%3E%3C/svg%3E");
  --trace-strip-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='36' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.5'%3E%3Cpath d='M360 9H262l-9 9h-74M360 27H318l-7-7h-47M92 18H40l-8-8H0M114 18h61'/%3E%3Crect x='92' y='11' width='22' height='14' rx='2'/%3E%3Cpath d='M97 11V7M103 11V7M109 11V7M97 25v4M103 25v4M109 25v4'/%3E%3Ccircle cx='175' cy='18' r='3.5'/%3E%3Ccircle cx='260' cy='20' r='3.5' stroke='%23ff6600' stroke-opacity='1'/%3E%3C/svg%3E");
  --trace-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='26' fill='none' stroke='%23334155' stroke-opacity='.3' stroke-width='1.5'%3E%3Cpath d='M16 0v9l7 7h22M64 0v5l6 6h18M100 0v14'/%3E%3Ccircle cx='49' cy='16' r='3.5'/%3E%3Ccircle cx='92' cy='11' r='3.5' stroke='%23f05a00' stroke-opacity='1'/%3E%3Ccircle cx='100' cy='18' r='3.5'/%3E%3C/svg%3E");
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------
   Base
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-top: calc(var(--sticky-top) + var(--header-h) + 1rem); }
@media (min-width: 960px) { :root { --header-h: 5.1rem; } }
/* WordPress admin bar (logged in): 32px, 46px at 782px and below, and at 600px and
   below it scrolls away with the page, so the header can stick to the very top. */
html:has(> body.admin-bar) { --sticky-top: 32px; }
@media screen and (max-width: 782px) { html:has(> body.admin-bar) { --sticky-top: 46px; } }
@media screen and (max-width: 600px) { html:has(> body.admin-bar) { --sticky-top: 0px; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px) {
  body { font-size: 1.125rem; }
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6rem; color: var(--ink); font-weight: 700; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); font-weight: 800; letter-spacing: -0.022em; line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -0.018em; }
h3, .h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
strong { color: var(--ink); font-weight: 700; }

/* Inline links in running text stay underlined so they never rely on colour alone. */
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--orange-strong); }
a:hover { color: var(--ink); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 0.75rem; top: -5rem; z-index: 100;
  background: var(--bg); color: var(--ink); font-weight: 700; padding: 0.7rem 1rem;
  border: 2px solid var(--orange-strong); border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: calc(var(--sticky-top) + 0.75rem); }
.muted { color: var(--muted); font-size: 0.94em; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--muted); max-width: var(--measure); }
.eyebrow {
  margin: 0 0 0.6rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--orange-text);
}
.eyebrow a { text-decoration: none; color: inherit; }
.eyebrow a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Layout
---------------------------------------------------------------- */
.container { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }
@media (max-width: 480px) { .container { width: calc(100% - 2rem); } }
.container.narrow > * { max-width: var(--measure); }
.prose { max-width: var(--measure); }
.section { padding: var(--section-y) 0; }
.section--warm { position: relative; background: var(--surface); }
/* Traces dropping from the top edge of grey sections, in the right-hand padding only. */
.section--warm::before {
  content: ""; position: absolute; top: 0; right: max(1rem, calc((100% - var(--wrap)) / 2)); width: 7rem; height: 1.6rem; pointer-events: none;
  background: var(--trace-drop) right top / auto 100% no-repeat;
}
.section--warm > .container { position: relative; }
.section--tight { padding-top: 0; }
.section-head { max-width: var(--measure); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head h2 { margin-bottom: 0.4rem; }
.section-head p { margin: 0; color: var(--muted); }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
.split > .photo { max-width: 34rem; }
.split > .photo--tyler { max-width: 19rem; }
@media (min-width: 860px) {
  .split--photo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .split--portrait { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .split > .photo, .split > .photo--tyler { max-width: none; }
}
.split__text { max-width: var(--measure); }
.split__text > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Buttons and links in designed groups (no permanent underline)
---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 1.3rem;
  border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--primary { background: var(--orange-button); border-color: var(--orange-button); color: var(--on-orange); }
.btn--primary:hover { background: var(--orange-button-hover); border-color: var(--orange-button-hover); color: var(--on-orange); text-decoration: none; box-shadow: 0 4px 14px rgba(201, 74, 0, 0.32); }
.btn--secondary { background: var(--bg); border-color: var(--control); color: var(--ink); }
.btn--secondary:hover { border-color: var(--orange-strong); color: var(--ink); background: var(--orange-50); text-decoration: none; }
.btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn--on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.btn--small { min-height: 44px; padding: 0.45rem 1.05rem; font-size: 0.95rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
@media (max-width: 480px) {
  .button-row .btn--primary { flex: 1 1 100%; }
  .button-row .btn--secondary, .button-row .btn--on-dark { flex: 1 1 auto; padding-inline: 0.9rem; }
}

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 700; color: var(--ink); text-decoration: none; padding: 0.3rem 0;
}
.arrow-link .icon--arrow { width: 1.05em; height: 1.05em; color: var(--orange-strong); transition: transform 0.15s ease; }
.arrow-link:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--orange-strong); }
.arrow-link:hover .icon--arrow { transform: translateX(3px); }
.link-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 1.5rem 0 0; }

/* ---------------------------------------------------------------
   Header and navigation
---------------------------------------------------------------- */
.site-header {
  position: sticky; top: var(--sticky-top); z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px -12px rgba(17, 24, 39, 0.28);
}
.site-header::before { content: ""; display: block; height: 4px; background: var(--orange); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 0.75rem 0; }
.site-brand { display: inline-flex; flex: none; border-radius: 6px; }
.site-logo { width: 13.75rem; height: auto; }
.nav-toggle { display: none; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.menu { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 44px; padding: 0.4rem 0.75rem;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; border-radius: 8px;
}
.menu a:hover { color: var(--ink); background: var(--orange-50); }
.menu > li > a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--orange-strong); border-radius: 8px 8px 0 0; }
.icon--chevron { width: 1rem; height: 1rem; }
.menu__item { position: relative; }
.sub-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 20; min-width: 15rem;
  list-style: none; margin: 0; padding: 0.4rem; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.sub-menu a { display: flex; width: 100%; padding: 0.55rem 0.8rem; font-weight: 600; }
.menu__item--has-sub:hover > .sub-menu,
.menu__item--has-sub:focus-within > .sub-menu { display: block; }
.menu__item--has-sub.is-dismissed > .sub-menu { display: none; }

@media (max-width: 959px) {
  /* Without JavaScript the full menu is always open, so the header scrolls normally. */
  html:not(.js) .site-header { position: relative; top: auto; }
  .site-header__inner { padding: 0.6rem 0; }
  .site-logo { width: 11.5rem; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.4rem 0.95rem;
    background: var(--bg); color: var(--ink); border: 2px solid var(--control); border-radius: 999px;
    font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  }
  .js .nav-toggle:hover { border-color: var(--orange-strong); color: var(--ink); background: var(--orange-50); }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: 0.25rem 0 1rem; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open {
    display: flex;
    /* The open menu scrolls inside the sticky header on short screens. The side padding keeps focus rings visible. */
    /* Screen height minus the admin bar, the closed header, and the row gap, padding and border added when open. */
    max-height: calc(100vh - var(--sticky-top) - var(--header-h) - 1.6rem - 1px);
    max-height: calc(100dvh - var(--sticky-top) - var(--header-h) - 1.6rem - 1px);
    overflow-y: auto; overscroll-behavior: contain;
    margin-inline: -0.5rem; padding-inline: 0.5rem;
  }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > li { border-bottom: 1px solid var(--line); }
  .menu a { width: 100%; padding: 0.7rem 0.25rem; font-size: 1.05rem; }
  .menu > li > a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--orange-strong); padding-left: 0.75rem; border-radius: 0; }
  .icon--chevron { display: none; }
  .sub-menu, .menu__item--has-sub:hover > .sub-menu, .menu__item--has-sub:focus-within > .sub-menu {
    display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0.5rem 1rem; min-width: 0;
  }
  .sub-menu a { font-weight: 500; color: var(--text); padding: 0.55rem 0.25rem; }
  .menu__item--has-sub.is-dismissed > .sub-menu { display: block; }
  .site-nav .btn { width: 100%; }
}

/* ---------------------------------------------------------------
   Hero
---------------------------------------------------------------- */
.hero {
  position: relative; overflow-x: clip;
  padding: clamp(1.75rem, 5vw, 4.5rem) 0 clamp(2rem, 4.5vw, 3.75rem);
  background: linear-gradient(180deg, var(--slate-50) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line);
}
.hero > .container { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.hero__text { max-width: 38rem; }
.hero h1 { margin-bottom: 1.1rem; }
.hero__intro { font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.55; color: var(--text); margin-bottom: 1.1rem; }
.hero__note {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem; border-radius: 999px;
  background: var(--orange-50); color: var(--ink); font-weight: 600; font-size: 0.98rem;
}
.hero__note .icon { color: var(--orange-strong); }
/* The hero photo sits straight in its column with the standard photo style (no backing panel or offset frame). */
@media (min-width: 900px) {
  .hero__grid--photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(2.5rem, 4vw, 3.5rem); }
  .hero .photo img { aspect-ratio: 5 / 4; }
  /* Circuit detail on the photo side only, fading out before the text column. */
  .hero::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; pointer-events: none;
    background: var(--traces) right -2rem center no-repeat, var(--grid);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  }
}
@media (max-width: 899px) {
  .hero__grid--photo .hero__media { order: -1; }
  .hero { padding-top: max(2.25rem, clamp(1.75rem, 5vw, 4.5rem)); }
  .hero .photo img { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------
   Photos: one style everywhere. Straight in the content column, a modest
   radius, a thin border and a light shadow. No rotation, offset panel or
   frame. Each kind keeps its own aspect ratio (portrait, screenshots, repairs).
---------------------------------------------------------------- */
.photo { margin: 0; }
.photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.photo--tyler img { aspect-ratio: 4 / 5; }
.photo--service { position: relative; margin-top: 1.75rem; max-width: 34rem; }
.photo--illustration img { object-fit: contain; background: var(--slate-50); border-color: var(--slate-line); }
.photo--service img, .photo--article img { aspect-ratio: 3 / 2; }
.photo--article { max-width: var(--measure); margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.photo figcaption { margin-top: 0.65rem; font-size: 0.92rem; color: var(--muted); }
/* Credit for an outside (stock) photo, under its caption. Required for CC BY / CC BY-SA. */
.photo-credit { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.photo-credit a { color: var(--muted); text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; }
.photo-credit a:hover { color: var(--ink); text-decoration-color: var(--orange-strong); }

/* ---------------------------------------------------------------
   Galleries (service pages). No library, no autoplay.
   Without JavaScript every photo is stacked with its number and caption.
   With JavaScript (html.js) the photos sit in one row that snaps one at a time,
   with Previous/Next buttons and a visible "Photo 1 of 2" count.
---------------------------------------------------------------- */
.gallery { margin-top: 1.75rem; max-width: 34rem; min-width: 0; }
.gallery__title { font-size: 1.12rem; margin: 0 0 0.3rem; }
.gallery__intro { color: var(--muted); font-size: 0.98rem; margin: 0 0 0.9rem; }
.gallery__track { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.gallery__slide { min-width: 0; }
.gallery__figure { margin: 0; }
.gallery__frame { position: relative; }
.gallery__frame img {
  width: 100%; height: auto; aspect-ratio: var(--gallery-ratio, 3 / 2); object-fit: cover;
  border-radius: var(--radius-sm); background: var(--slate-50); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.gallery--contain .gallery__frame img { object-fit: contain; }
.gallery figcaption { margin-top: 0.8rem; font-size: 0.97rem; color: var(--text); line-height: 1.5; }
.gallery__label {
  display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.55rem; border-radius: 6px;
  background: var(--slate-50); border: 1px solid var(--slate-line); color: var(--slate); font-size: 0.85rem; font-weight: 700;
}
.gallery__controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.gallery__controls[hidden] { display: none; }
.gallery__btn {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; min-width: 44px; padding: 0.45rem 1rem;
  background: var(--bg); color: var(--ink); border: 2px solid var(--control); border-radius: 999px;
  font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.gallery__btn:hover { border-color: var(--orange-strong); background: var(--orange-50); color: var(--ink); }
.gallery__btn[aria-disabled="true"] { opacity: 0.45; cursor: default; border-color: var(--control); background: var(--bg); }
.gallery__btn .icon { width: 1.1rem; height: 1.1rem; color: var(--orange-strong); }
.gallery__btn .icon--prev { transform: rotate(180deg); }
.gallery__status { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); text-align: center; }
.js .gallery__num { display: none; }
.js .gallery__track {
  display: flex; gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0.5rem; scrollbar-width: none;
  /* Room for the photo shadow and the focus ring inside the scroll area. */
  padding: 0.5rem; margin: -0.5rem; border-radius: var(--radius);
}
.js .gallery__track::-webkit-scrollbar { display: none; }
.js .gallery__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery__track:focus-visible { outline: 3px solid var(--focus); outline-offset: -1px; }
@media (prefers-reduced-motion: no-preference) { .js .gallery__track { scroll-behavior: smooth; } }

/* ---------------------------------------------------------------
   Cards (services, articles, links) — one reusable pattern
---------------------------------------------------------------- */
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 620px) { .card-grid--3, .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 2.4vw, 1.75rem); box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card p, .card li { color: var(--muted); font-size: 1rem; }
.card .checklist li { color: var(--text); }
.card > :last-child { margin-bottom: 0; }
.card__title { font-size: 1.15rem; margin: 0 0 0.4rem; text-wrap: pretty; }
.card__link { color: var(--ink); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(.card__link):hover { border-color: var(--orange); box-shadow: var(--shadow); }
.card:has(.card__link):hover .card__link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--orange-strong); text-underline-offset: 0.2em; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.card__link:focus-visible { outline: none; }
.icon-badge {
  display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: 1rem;
  border-radius: 10px; background: var(--slate-50); color: var(--slate); border: 1px solid var(--slate-line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.card:has(.card__link):hover .icon-badge { color: var(--orange-strong); border-color: var(--orange-strong); }
.icon-badge .icon { width: 1.5rem; height: 1.5rem; }
.services-more { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.services-more__title { font-size: clamp(1.3rem, 2.2vw, 1.55rem); margin-bottom: clamp(1rem, 2vw, 1.4rem); }
@media (max-width: 619px) {
  /* Compact rows on phones: icon beside the text instead of above it. */
  .service-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.1rem 1.15rem; }
  .service-card .icon-badge { grid-row: span 3; margin: 0; width: 2.6rem; height: 2.6rem; }
  .service-card > :not(.icon-badge) { grid-column: 2; }
  .service-card .card__title { margin-top: 0.15rem; }
  .card-grid { gap: 0.75rem; }
}
.card-arrow { margin-top: auto; padding-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.card-arrow .icon { width: 1.05em; height: 1.05em; color: var(--orange-strong); }

/* ---------------------------------------------------------------
   Pricing
---------------------------------------------------------------- */
.price-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
.price-card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-top: 4px solid var(--orange);
  border-radius: var(--radius); padding: clamp(1.25rem, 2.4vw, 1.75rem); box-shadow: var(--shadow-sm);
}
@media (min-width: 720px) {
  .price-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Subgrid keeps title, price and description rows aligned across a row of cards. */
  .price-grid { grid-template-rows: auto auto 1fr; }
  .price-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .price-card__label { align-self: end; }
}
.price-card__label { margin: 0 0 0.75rem; font-size: 1.15rem; }
.price-card__amount { margin: 0 0 0.75rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.5rem; }
.price-card__figure { font-size: clamp(2.2rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.price-card__unit { color: var(--muted); font-size: 0.98rem; font-weight: 600; }
.price-card__detail { margin: 0; font-size: 1rem; color: var(--muted); }

.deposit-note {
  display: flex; align-items: flex-start; gap: 0.9rem; margin: var(--gap) 0 0;
  padding: 1rem 1.25rem; background: var(--bg); border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.deposit-note p { margin: 0; font-size: 1rem; }
.deposit-note__icon { flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: var(--slate-50); color: var(--slate); border: 1px solid var(--slate-line); }
.deposit-note__icon .icon { width: 1.2rem; height: 1.2rem; }
.price-note { color: var(--muted); max-width: var(--measure); margin-top: 1rem; }
/* Pickup, on-site and business rates as one compact row under the repair prices (Home, Residential). */
.price-extras { margin: var(--gap) 0 0; padding: 1rem 1.25rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.price-extras__title { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.price-extras__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem 1.75rem; }
@media (min-width: 860px) { .price-extras__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.price-extras__item { font-size: 1rem; line-height: 1.45; }
.price-extras__item span { display: block; color: var(--muted); font-size: 0.95rem; }

/* ---------------------------------------------------------------
   Steps
---------------------------------------------------------------- */
.steps-heading { margin: clamp(2.25rem, 5vw, 3.25rem) 0 1rem; font-size: 1.3rem; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* A numbered list of steps inside a text column (Wi-Fi "How I help"). */
.steps.steps--list { grid-template-columns: 1fr; gap: 0.9rem; margin: 0 0 1.25rem; }
.steps-heading.steps-heading--compact { margin: 1.75rem 0 1rem; font-size: 1.15rem; }
.step { counter-increment: step; position: relative; padding-left: 3.25rem; }
.step::before {
  content: counter(step); position: absolute; left: 0; top: -0.1rem; width: 2.3rem; height: 2.3rem;
  border-radius: 50%; background: var(--slate); color: #fff; font-weight: 800; font-size: 1rem;
  display: grid; place-items: center;
}
.step__title { font-size: 1.08rem; margin: 0 0 0.3rem; }
.step p { margin: 0; color: var(--muted); font-size: 1rem; }

/* ---------------------------------------------------------------
   Lists, checklists, FAQ
---------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: 0.65rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--orange-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f05a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.panel { background: var(--slate-50); border: 1px solid var(--slate-line); border-radius: var(--radius); padding: clamp(1.25rem, 2.6vw, 1.85rem); }
.panel h2, .panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel--white { background: var(--bg); box-shadow: var(--shadow-sm); }

.faq { border-top: 1px solid var(--line); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0; font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--orange-strong); font-weight: 500; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--orange-strong); text-underline-offset: 0.2em; }
.faq details p { margin: 0 0 1.1rem; color: var(--text); }


/* ---------------------------------------------------------------
   Customer reviews: plain cards, the customer's words, no carousel
---------------------------------------------------------------- */
.section--reviews { padding-top: 0; }
.review-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .review-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--radius);
  padding: clamp(1.2rem, 2.4vw, 1.6rem); box-shadow: var(--shadow-sm);
}
.review-card--google { border-top-color: var(--slate); }
.review-card__figure { margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.review-stars { display: flex; gap: 0.15rem; margin: 0 0 0.75rem; }
.review-stars__star { width: 1.1rem; height: 1.1rem; fill: var(--line-strong); }
.review-stars__star.is-on { fill: var(--orange-strong); }
.review-card__label {
  align-self: flex-start; margin: 0 0 0.6rem; padding: 0.05rem 0.55rem; border-radius: 6px;
  background: var(--slate-50); border: 1px solid var(--slate-line); color: var(--slate); font-size: 0.82rem; font-weight: 700;
}
.review-card__quote { margin: 0 0 1rem; color: var(--text); overflow-wrap: anywhere; }
.review-card__quote p { margin: 0 0 0.7rem; }
.review-card__quote p:last-child { margin-bottom: 0; }
.review-card__empty { margin: 0 0 1rem; color: var(--muted); font-style: italic; }
.review-card__by { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.1rem; }
.review-card__name { font-weight: 700; color: var(--ink); }
.review-card__meta { font-size: 0.92rem; color: var(--muted); }
.review-card__meta a { color: var(--muted); }
.review-card__more { margin: 0.5rem 0 0; font-size: 0.95rem; }
.review-card__service { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--muted); }
.review-card__service a { color: var(--muted); }
.review-links { max-width: 48rem; margin-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.review-links__title { font-size: 1.25rem; }
.review-links p { margin: 0; }
.review-links .button-row { margin-top: 1rem; }
.review-links__note { margin: 0.75rem 0 0; font-size: 0.92rem; color: var(--muted); }
.reviews-list + .reviews-list { margin-top: clamp(2.5rem, 6vw, 4rem); }
.reviews-empty { max-width: var(--measure); color: var(--muted); margin: 0; }

/* Trustindex Google reviews widget (free plugin, markup and logos untouched). Everything here is scoped to
   .acs-reviews-widget, so no other part of the site changes. It only sets the site font, makes the text readable
   on a phone, enlarges the slider controls and gives them the site's focus ring, and shows the arrows below the
   cards under 1024px (the plugin shows none there). Line heights and box heights are left alone: the plugin clips
   long reviews at a whole number of lines for "Read more". The plugin's own "navigation arrows" setting still wins. The
   [data-layout-id] qualifier lifts these rules above the plugin's own stylesheet, whatever layout is chosen. */
.acs-reviews-widget { min-width: 0; max-width: 100%; margin: 0; }
.acs-reviews-widget > pre { margin: 0; padding: 0; border: 0; background: none; white-space: normal; }
.acs-reviews-widget .ti-widget, .acs-reviews-widget .ti-widget * { font-family: var(--font) !important; }
.acs-reviews-widget .ti-widget[data-layout-id] { max-width: 100%; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-widget-container .ti-review-content { font-size: 1rem; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-widget-container .ti-name { font-size: 1rem; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-widget-container .ti-date { font-size: 0.875rem; color: var(--muted); opacity: 1; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-widget-container .ti-rating-text, .acs-reviews-widget .ti-widget[data-layout-id] .ti-widget-container .ti-footer { font-size: 0.9375rem; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-controls .ti-next, .acs-reviews-widget .ti-widget[data-layout-id] .ti-controls .ti-prev { width: 44px; height: 44px; border-radius: 22px; margin-top: -7px; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-read-more { display: flex; align-items: center; min-height: 44px; padding: 0; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-read-more span { font-size: 0.9375rem; font-weight: 600; opacity: 1; color: var(--ink); text-decoration: underline !important; text-underline-offset: 0.2em; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-controls :is(.ti-next, .ti-prev):focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px !important; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-read-more:focus-visible { outline: none !important; }
.acs-reviews-widget .ti-widget[data-layout-id] .ti-read-more:focus-visible span, .acs-reviews-widget .ti-widget[data-layout-id] .ti-read-more span:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 3px !important; }
@media (min-width: 1024px) {
  /* The plugin places its 30px arrows 1px inside the edges; at 44px they would cover the first letters of the cards. */
  .acs-reviews-widget .ti-widget[data-layout-id] .ti-controls .ti-prev { left: -13px; }
  .acs-reviews-widget .ti-widget[data-layout-id] .ti-controls .ti-next { right: -13px; }
}
@media (max-width: 1023px) {
  .acs-reviews-widget .ti-widget[data-layout-id] .ti-reviews-container { display: flex; flex-direction: column; }
  .acs-reviews-widget .ti-widget[data-layout-id] .ti-controls { display: flex; flex-direction: row-reverse; justify-content: center; order: 3; position: static; width: auto; height: auto; margin: 0.75rem 0 0; }
  .acs-reviews-widget .ti-widget[data-layout-id] .ti-controls .ti-next, .acs-reviews-widget .ti-widget[data-layout-id] .ti-controls .ti-prev { position: relative; margin: 0 0.375rem; right: auto; left: auto; } /* margins: the plugin sets gap: unset !important */
}
@media (prefers-reduced-motion: reduce) { .acs-reviews-widget .ti-widget, .acs-reviews-widget .ti-widget * { transition: none !important; animation: none !important; } }
.pager { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.pager__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pager__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 44px; min-height: 44px; padding: 0.4rem 0.85rem;
  border: 2px solid var(--control); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 700; text-decoration: none;
}
a.pager__link:hover { color: var(--ink); border-color: var(--orange-strong); background: var(--orange-50); text-decoration: none; }
.pager__link.is-current { background: var(--slate); border-color: var(--slate); color: #fff; }
.pager .icon { width: 1.05em; height: 1.05em; color: var(--orange-strong); }
.pager .icon--prev { transform: rotate(180deg); }

/* ---------------------------------------------------------------
   Page headers (inner pages)
---------------------------------------------------------------- */
.page-header {
  position: relative; overflow: hidden;
  padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(1.75rem, 4vw, 3rem); background: var(--slate-50); border-bottom: 1px solid var(--slate-line);
}
.page-header > .container { position: relative; z-index: 1; }
/* A thin trace strip in the top padding, at every width (above the eyebrow, never behind the heading). */
.page-header::after {
  content: ""; position: absolute; top: 0.45rem; right: 0; width: min(22.5rem, 72%); height: 1.35rem; pointer-events: none;
  background: var(--trace-strip) right center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%);
}
@media (min-width: 768px) { .page-header::after { top: 0.75rem; height: 1.75rem; width: min(30rem, 55%); } }
@media (min-width: 1100px) {
  /* Grid detail in the empty right-hand side only (the heading is at most 46rem wide). */
  .page-header::before {
    content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: calc(50% + 15rem); pointer-events: none;
    background: var(--grid);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
  }
}
/* Service banners: a decorative photo fills the right-hand part of the header and fades into the plain
   background before the text, so the heading and lead always sit on a clean background. No frame, panel or
   traces over it. Phones: a short strip across the top, faded out before the text below it. */
.page-header--banner::before, .page-header--banner::after { content: none; }
.page-header--banner { padding-top: 7rem; }
.page-header__banner {
  position: absolute; top: 0; right: 0; width: 100%; height: 7rem; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%), linear-gradient(180deg, #000 45%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 38%), linear-gradient(180deg, #000 45%, transparent);
  mask-composite: intersect;
}
.page-header__banner img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--focus-sm, 50% 50%);
}
/* A banner whose photo is not recognisable as a thin strip is left out on phones (with its credit). */
@media (max-width: 759px) {
  .page-header--banner-wide-only { padding-top: clamp(2.25rem, 5vw, 4rem); }
  .page-header--banner-wide-only .page-header__banner, .page-header--banner-wide-only .page-header__credit { display: none; }
}
@media (min-width: 760px) {
  .page-header--banner { padding-top: clamp(2.25rem, 5vw, 4rem); }
  .page-header--banner .page-header__text { max-width: min(34rem, 54%); }
  /* Starts 1rem after the text column (the column's right edge inside the centred container) and is fully
     transparent there, reaching full strength about halfway across. */
  .page-header__banner {
    bottom: 0; width: auto; height: auto;
    left: calc((100% - min(var(--wrap), 100% - 2.5rem)) / 2 + min(34rem, 0.54 * min(var(--wrap), 100% - 2.5rem)) + 1rem);
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.55) 22%, #000 48%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.55) 22%, #000 48%);
    mask-composite: add;
  }
  .page-header__banner img { object-position: var(--focus, 50% 50%); }
}
/* Credit for an outside photo used as the banner (required for CC BY-SA), on the plain background. */
.page-header__credit { margin: 0.85rem 0 0; font-size: 0.8rem; color: var(--muted); }
.page-header__credit .photo-credit { display: inline; margin: 0; font-size: inherit; }
/* "View all services": an understated pill under the lead, easy to tap, quieter than the orange button. */
.back-link-row { margin: 1.25rem 0 0; }
.back-link {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  border: 1.5px solid var(--control); border-radius: 999px; background: var(--bg);
  color: var(--ink); font-size: 0.95rem; font-weight: 700; line-height: 1.2; text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.back-link:hover { color: var(--ink); border-color: var(--orange-strong); background: var(--orange-50); text-decoration: none; }
.back-link .icon--back { width: 1.05em; height: 1.05em; color: var(--orange-strong); transform: rotate(180deg); }
.page-header h1 { margin-bottom: 0.6rem; max-width: 46rem; }
.page-header .lead { margin-bottom: 0; }
.page-header .article__meta { margin: 0.25rem 0 0; color: var(--muted); }
.page-header .article__meta a { color: var(--muted); }

/* ---------------------------------------------------------------
   Service pages
---------------------------------------------------------------- */
.service-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.service-intro > * { min-width: 0; }
@media (min-width: 900px) { .service-intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.service-intro__text > :last-child { margin-bottom: 0; }
.service-intro .panel h2 { font-size: 1.25rem; }

/* ---------------------------------------------------------------
   CTA band
---------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--slate); color: #f1f5f9; padding: clamp(2.25rem, 5vw, 3.5rem) 0; border-top: 4px solid var(--orange); }
.cta-band::before {
  content: ""; position: absolute; top: 0.4rem; right: 0; width: min(22.5rem, 70%); height: 1.3rem; pointer-events: none;
  background: var(--trace-strip-light) right center / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.cta-band > .container { position: relative; }
@media (min-width: 768px) { .cta-band::before { top: 0.65rem; height: 1.75rem; width: min(30rem, 50%); } }
.cta-band h2 { color: #fff; margin: 0 0 0.35rem; }
.cta-band p { margin: 0; color: #e2e8f0; }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.cta-band .button-row { margin: 0; }
.cta-band :focus-visible { outline-color: #fff; }
/* On the dark band the button keeps a bright #FF6600 edge (3.4:1 against the slate). */
.cta-band .btn--primary { border-color: var(--orange); }

/* ---------------------------------------------------------------
   Contact section (Home, Contact Us, Book Appointment)
---------------------------------------------------------------- */
.contact-section { display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .contact-section { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.contact-section__intro { max-width: 32rem; margin-bottom: 1.5rem; }
.contact-section__intro strong { display: block; margin-top: 0.4rem; font-weight: 600; }
.contact-details { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.25rem; }
.contact-details__item { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-details__item p { margin: 0; }
.contact-details__icon { flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--slate-50); color: var(--slate); border: 1px solid var(--slate-line); }
.contact-details__icon .icon { width: 1.3rem; height: 1.3rem; }
.contact-details__label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.contact-details__value { font-weight: 700; color: var(--ink); font-size: 1.1rem; }
.contact-details__value a { color: var(--ink); text-decoration: none; }
.contact-details__value a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange-strong); }
.contact-details__actions { display: flex; gap: 0.6rem; margin-top: 0.5rem !important; }
.contact-details .arrow-link { padding-bottom: 0; }
.contact-section .photo--location { max-width: 30rem; }
.contact-section .photo--location img { aspect-ratio: 4 / 3; }
/* Contact Us and Book Appointment: the form first, with the longer details beside it on wide
   screens and below it on phones, so "Request an appointment" lands on the form itself. */
.section--form { padding-top: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 940px) { .contact-section--form-first { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } }
.contact-section__aside-title { font-size: 1.35rem; margin: 0 0 0.5rem; }
@media (min-width: 940px) { .contact-section--form-first .contact-section__info { padding-top: 0.4rem; } }
.form-quick { margin: -0.5rem 0 1.25rem; font-weight: 600; color: var(--ink); }
.nowrap { white-space: nowrap; }
/* The #appointment-form anchor clears the sticky header and the admin bar through html scroll-padding-top
   (no extra scroll-margin here: the two would add up and leave a gap above the form). */
.form-panel:focus { outline: none; }

.form-panel {
  background: var(--bg); border: 1px solid var(--line); border-top: 4px solid var(--orange);
  border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow);
}
.form-panel__title { font-size: 1.4rem; margin: 0 0 0.3rem; }
.form-note { color: var(--muted); margin-bottom: 1.25rem; }
.form-links { font-size: 0.9rem; color: var(--muted); margin: 1.25rem 0 0; }
.form-fallback { margin: 0; padding: 0.9rem 1rem; background: var(--surface); border-radius: var(--radius-sm); font-weight: 600; color: var(--ink); }

/* Appointment form: Gravity Forms inside the ACS panel (.appointment-form, whichever form ID is selected) and the
   local mock-up (.form-preview). Other Gravity Forms forms on the site are not touched.

   Hosted dev prints Gravity Forms 2.10's Orbital theme (.gform-theme--framework). Orbital lays the form out
   itself (a 12-column grid with a row gap between fields, labels, choice rows, control heights) and is configured
   through its CSS variables. The site's sizes are set here through those variables, on the wrapper, with one
   class more than the plugin's own declarations, so Orbital keeps its layout and nothing is styled twice.
   (The earlier element rules, written for markup without Orbital, added a margin to every field on top of
   Orbital's 40px row gap, gave every radio row 44px plus Orbital's gap, and reset the space between a radio
   and its label.) The form's own Style settings print --gf-color-primary, --gf-font-size-secondary,
   --gf-ctrl-size and similar on #gform_wrapper_N; they are left alone: only the variables derived from them are
   set, and --gf-ctrl-size follows --gf-ctrl-size-md. */
.appointment-form .gform-theme--framework {
  --gf-font-family-base: var(--font);
  --gf-font-family-primary: var(--font);
  --gf-font-family-secondary: var(--font);
  --gf-font-family-tertiary: var(--font);
  --gf-form-gap-y: 1.5rem;
  --gf-label-space-primary: 0.4rem;
  --gf-label-choice-field-space-primary: 0.35rem;
  --gf-desc-space: 0.4rem;
  --gf-desc-choice-field-space: 0.35rem;
  --gf-field-choice-gap: 0;
  --gf-ctrl-size-md: 48px;
  --gf-ctrl-font-size: 1.0625rem;
  --gf-ctrl-radius: var(--radius-sm);
  --gf-ctrl-textarea-radius: var(--radius-sm);
  --gf-ctrl-textarea-height: 9.5rem;
  --gf-ctrl-label-font-size-primary: 1.0625rem;
  --gf-ctrl-label-font-weight-primary: 700;
  --gf-ctrl-label-line-height-primary: 1.35;
  --gf-ctrl-label-font-size-secondary: 1.0625rem;
  --gf-ctrl-label-font-weight-secondary: 500;
  --gf-ctrl-label-line-height-secondary: 1.4;
  --gf-ctrl-label-font-size-tertiary: 0.9375rem;
  --gf-ctrl-label-color-tertiary: var(--muted);
  --gf-ctrl-label-font-size-req: 0.875rem;
  --gf-ctrl-label-font-weight-req: 400;
  --gf-ctrl-label-color-req: var(--muted);
  --gf-ctrl-desc-font-size: 0.9375rem;
  --gf-ctrl-desc-line-height: 1.45;
  --gf-ctrl-desc-color: var(--muted);
  --gf-ctrl-choice-check-color: var(--orange-button);
  --gf-ctrl-border-color-focus: var(--orange-button);
  --gf-ctrl-outline-color-focus: var(--focus);
  --gf-color-danger: #a4161a;
  --gf-color-danger-rgb: 164, 22, 26;
}
/* Each choice is a compact row about 41px tall: the padded label is the click target, next to the radio. */
.appointment-form .gform-theme--framework .gfield--type-choice .gchoice { align-items: center; }
.appointment-form .gform-theme--framework .gfield--type-choice .gform-field-label--type-inline { padding-block: 0.55rem; }
/* Orbital's "large" field size gives a textarea an 18rem minimum height; the description box starts at 9.5rem
   (about five lines) whatever size the form editor chose, and can still be made taller. */
.appointment-form .gform-theme--foundation .gfield textarea.textarea { min-block-size: var(--gf-ctrl-textarea-height); }
/* Invisible reCAPTCHA has no visible control (Google shows its own badge), so its "CAPTCHA" label is kept for
   screen readers only. The form file hides it too (labelPlacement hidden_label); this covers forms imported
   earlier. Without site keys Gravity Forms prints no data-size, and the label stays as a visible sign of that. */
.appointment-form .gfield--type-captcha:has(> .ginput_recaptcha[data-size="invisible"]) > .gfield_label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Without Orbital (legacy markup, as form 1 prints on production) and the local mock-up: the same sizes, set on
   the elements. */
.appointment-form .gform_wrapper:not(.gform-theme--framework) :is(label, .gfield_label, legend.gfield_label),
.form-preview label, .form-preview .label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; font-size: 1.0625rem; line-height: 1.35; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gfield, .form-preview .field { margin: 0 0 1.5rem; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) fieldset.gfield, .form-preview fieldset { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) legend.gfield_label { padding: 0; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) :is(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"]), select, textarea),
.form-preview input[type="text"], .form-preview input[type="email"], .form-preview input[type="tel"], .form-preview select, .form-preview textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.8rem; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--control); border-radius: var(--radius-sm);
}
.appointment-form .gform_wrapper:not(.gform-theme--framework) textarea, .form-preview textarea { min-height: 9.5rem; height: 9.5rem; resize: vertical; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) :is(input, select, textarea):focus-visible,
.form-preview input:focus-visible, .form-preview select:focus-visible, .form-preview textarea:focus-visible { border-color: var(--orange-button); outline: 3px solid var(--focus); outline-offset: 1px; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) :is(.gfield_radio, .gfield_checkbox) { list-style: none; padding: 0; margin: 0; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gchoice, .form-preview .choices label { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding-block: 0.55rem; font-weight: 500; line-height: 1.4; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gchoice { padding: 0; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gchoice label { display: block; margin: 0; padding-block: 0.55rem; font-weight: 500; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) input:is([type="radio"], [type="checkbox"]), .form-preview input[type="radio"] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--orange-button); }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gfield_description, .form-preview .field__help { margin: 0.4rem 0 0; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
.appointment-form .gform_wrapper:not(.gform-theme--framework) :is(.gfield_required_text, .gfield_required_custom) { font-weight: 400; font-size: 0.875rem; color: var(--muted); }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gfield_required { margin-left: 0.25rem; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) :is(.gform-field-label--type-sub, .ginput_complex label), .form-preview .sublabel { display: block; margin: 0.25rem 0 0; font-weight: 500; font-size: 0.9375rem; color: var(--muted); }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .ginput_complex, .form-preview .field__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 360px) { .appointment-form .gform_wrapper:not(.gform-theme--framework) .ginput_complex, .form-preview .field__pair { grid-template-columns: 1fr; } }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gfield_error :is(input, textarea, select) { border-color: #a4161a; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gfield_error :is(.gfield_label, legend) { color: #a4161a; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) :is(.validation_message, .gform_validation_errors) { color: #a4161a; font-weight: 600; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gform_validation_errors { border: 2px solid #a4161a; border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.appointment-form .gform_wrapper:not(.gform-theme--framework) .gform_validation_errors h2 { margin: 0; font-size: 1rem; color: #a4161a; }

/* Both kinds of markup: the honeypot stays hidden, and the theme's focus moves (site.js) to the error summary or
   the confirmation show the site's focus ring. */
.appointment-form .gform_wrapper :is(.gform_validation_container, .gform_hidden) { display: none !important; }
.appointment-form .gform_confirmation_message { padding: 1rem; background: var(--orange-50); border-left: 4px solid var(--orange); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.appointment-form :is(.gform_confirmation_message, .gform_validation_errors):focus { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The appointment form's submit button looks like .btn--primary. Gravity Forms 2.10's Orbital theme styles it
   (blue, 14px, square corners) with long selectors and loads before this file, so these rules are scoped to the
   ACS form panel (.appointment-form, whichever form ID is configured) and are specific enough to win without
   !important. They cover an <input type="submit"> (what Gravity Forms prints) and a <button>. Gravity Forms'
   spinner sits beside the button and is left alone. */
.appointment-form .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button).gform_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  inline-size: auto; max-width: 100%; height: auto; min-height: 48px; margin: 0; padding: 0.6rem 1.3rem;
  font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: none;
  white-space: normal; text-align: center; text-decoration: none; cursor: pointer;
  color: var(--on-orange); background: var(--orange-button); border: 2px solid var(--orange-button); border-radius: 999px;
  box-shadow: none; outline: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.appointment-form .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button).gform_button:hover {
  color: var(--on-orange); background: var(--orange-button-hover); border-color: var(--orange-button-hover); box-shadow: 0 4px 14px rgba(201, 74, 0, 0.32);
}
.appointment-form .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button).gform_button:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
/* While Gravity Forms is sending (or if it disables the button), it stays orange but reads as busy. */
.appointment-form .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button).gform_button:is(:disabled, [aria-disabled="true"]) {
  color: var(--on-orange); background: var(--orange-button); border-color: var(--orange-button); box-shadow: none; opacity: 0.7; cursor: progress;
}
@media (max-width: 480px) {
  .appointment-form .gform_wrapper.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(input[type="submit"], button).gform_button { inline-size: 100%; }
}

.form-preview__flag { background: #fff6d6; border: 1px solid #d9b441; border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; font-size: 0.9rem; color: var(--ink); }
.form-preview .req, .form-preview .opt { font-weight: 400; color: var(--muted); font-size: 0.875rem; }
.form-preview .choices { display: flex; flex-direction: column; }
.form-preview fieldset[disabled] .btn { opacity: 0.65; cursor: not-allowed; }

/* ---------------------------------------------------------------
   Policies and articles (long-form text)
---------------------------------------------------------------- */
.policy-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1000px) { .policy-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; } .toc { position: sticky; top: calc(var(--sticky-top) + var(--header-h) + 1.5rem); } }
.toc { font-size: 0.97rem; }
.toc__title { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 0.35rem 0 0.35rem 0.9rem; color: var(--text); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); border-left-color: var(--orange-strong); }
@media (max-width: 999px) { .toc { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.25rem; } .toc ul { columns: 2 12rem; border: 0; } .toc a { padding-left: 0; } }
.policy { max-width: var(--measure); }
.policy h2 { font-size: 1.4rem; margin-top: 2.5rem; scroll-margin-top: 1.5rem; }
.policy h2:first-of-type { margin-top: 1.5rem; }
.policy__updated { color: var(--muted); font-size: 0.95rem; }
.key-points { margin: 0 0 1rem; }
.key-points h2 { margin-top: 0 !important; font-size: 1.15rem; }
.key-points .checklist { margin: 0; }
.key-points .checklist li:last-child { margin-bottom: 0; }
.policy__sign { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); }

.entry-content { max-width: var(--measure); }
.entry-content > * + * { margin-top: 1rem; }
.entry-content h2 { margin-top: 2.25rem; font-size: 1.55rem; }
.entry-content h3 { margin-top: 1.75rem; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 0.5rem; text-align: left; }
.entry-content blockquote { margin-left: 0; padding-left: 1.1rem; border-left: 3px solid var(--orange); }
.article-back { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); max-width: var(--measure); }

/* ---------------------------------------------------------------
   Blog lists
---------------------------------------------------------------- */
.post-card__meta { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; }
.post-card__cat {
  padding: 0.1rem 0.5rem; border-radius: 6px; border: 1px solid var(--slate-line);
  background: var(--slate-50); color: var(--slate); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
.post-card .post-card__title { font-size: 1.2rem; margin: 0 0 0.5rem; text-wrap: pretty; }
.post-card__excerpt { margin-bottom: 1rem; }
.post-card__more { margin: auto 0 0 !important; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--ink) !important; font-size: 0.98rem !important; }
.post-card__more .icon { width: 1.05em; height: 1.05em; color: var(--orange-strong); }
.empty-state { max-width: 40rem; text-align: left; }
.empty-state .icon-badge { margin-bottom: 1rem; }
.empty-state h2 { font-size: 1.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.pagination a, .pagination span.page-numbers {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--control); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600;
}
.pagination a:hover { border-color: var(--orange-strong); color: var(--ink); background: var(--orange-50); }
.pagination .page-numbers.current { background: var(--slate); color: #fff; border-color: var(--slate); }

/* ---------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 3.75rem) 0 1.5rem; font-size: 1rem; }
.site-footer__grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1fr 1fr; }
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .site-footer__brand { grid-column: auto; } }
.site-footer__logo { display: inline-flex; margin-bottom: 0.9rem; border-radius: 6px; }
.site-logo--footer { width: 11rem; }
.site-footer__brand > p { color: var(--muted); margin-bottom: 1rem; }
.site-footer__heading { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--slate); margin: 0 0 0.75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text); text-decoration: none; }
.site-footer__col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange-strong); }
.site-footer__contact li { margin-bottom: 0.4rem; }
.site-footer__contact a, .site-footer__contact span { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 36px; color: var(--ink); text-decoration: none; font-weight: 600; }
.site-footer__contact a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange-strong); }
.site-footer__contact .icon { width: 1.1rem; height: 1.1rem; color: var(--slate); }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.site-footer__legal p { margin: 0; }

/* ---------------------------------------------------------------
   Reminder dialogs (directions, remote support): one shared pattern
---------------------------------------------------------------- */
html.acs-dialog-open { overflow: hidden; }
.acs-dialog {
  width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100dvh - 2rem);
  padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible;
}
.acs-dialog::backdrop { background: rgba(15, 23, 42, 0.58); }
.acs-dialog__panel {
  position: relative; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.85rem clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 4vw, 1.85rem);
  background: var(--bg); border-top: 4px solid var(--orange); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
}
/* A small trace detail in the top corner, beside the close button row only. */
.acs-dialog__panel::before {
  content: ""; position: absolute; top: 0.9rem; left: clamp(1.25rem, 4vw, 2rem); width: 7rem; height: 1.6rem; pointer-events: none;
  background: var(--trace-drop) left top / auto 100% no-repeat; transform: scaleX(-1);
}
.acs-dialog__top { display: flex; justify-content: flex-end; margin: 0 -0.5rem 0.35rem 0; }
.acs-dialog__close-form { margin: 0; }
.acs-dialog__close {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.4rem 0.85rem;
  background: var(--bg); color: var(--ink); border: 2px solid var(--control); border-radius: 999px;
  font: inherit; font-size: 0.95rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.acs-dialog__close:hover { border-color: var(--orange-strong); background: var(--orange-50); color: var(--ink); }
.acs-dialog__close .icon { width: 1.1rem; height: 1.1rem; }
.acs-dialog__close--nojs { display: none; }
.acs-dialog__title { font-size: clamp(1.35rem, 3.6vw, 1.6rem); margin: 0 0 0.6rem; }
.acs-dialog p { margin: 0 0 0.85rem; }
.acs-dialog__warning {
  display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.75rem 0.9rem;
  background: var(--orange-50); border-left: 4px solid var(--orange-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink); font-weight: 600; font-size: 0.98rem;
}
.acs-dialog__warning .icon { color: var(--orange-text); margin-top: 0.15rem; }
.acs-dialog__actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.25rem; }
.acs-dialog__actions .btn { width: 100%; white-space: normal; text-align: center; }
.acs-dialog__meta { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1.1rem 0 0 !important; color: var(--muted); font-size: 0.95rem; user-select: text; }
.acs-dialog__meta .icon { color: var(--slate); width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
/* Remote support download choices (inside the remote dialog). */
.acs-download { margin-top: 1.25rem; }
.acs-download__pick { display: grid; gap: 0.6rem; margin: 0 0 1rem; }
.acs-download__pick[hidden] { display: none; }
.acs-download__pick .btn { width: 100%; white-space: normal; text-align: center; flex-direction: column; gap: 0.1rem; }
.acs-download__for { display: block; font-size: 0.9rem; font-weight: 600; }
.acs-dialog .acs-download__question { margin: 0; font-weight: 700; color: var(--ink); }
.acs-dialog .acs-download__note { margin: 0; font-size: 0.92rem; color: var(--muted); }
.acs-download__all { border-top: 1px solid var(--line); padding-top: 0.35rem; }
.acs-download__all summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--ink); }
.acs-download__all summary:hover { text-decoration: underline; text-decoration-color: var(--orange-strong); text-underline-offset: 0.2em; }
.acs-download__list { list-style: none; margin: 0.15rem 0 0.25rem; padding: 0; display: grid; gap: 0.5rem; }
.acs-download__list a {
  display: block; min-height: 44px; padding: 0.6rem 0.9rem; border: 1.5px solid var(--control); border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.acs-download__list a:hover { border-color: var(--orange-strong); background: var(--orange-50); color: var(--ink); }
.acs-download__list span { font-weight: 500; color: var(--muted); }
.acs-dialog .acs-download__status { margin: 0.85rem 0 0; font-weight: 600; color: var(--ink); }
.acs-dialog .acs-download__status:empty { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .acs-dialog[open] .acs-dialog__panel { animation: acs-dialog-in 0.16s ease-out; }
  @keyframes acs-dialog-in { from { opacity: 0; transform: translateY(0.5rem); } }
}
/* Without JavaScript the trigger links to #acs-dialog-<key>, and the same content shows as a panel. */
html:not(.js) .acs-dialog__close-form { display: none; }
html:not(.js) .acs-dialog:target {
  display: block; position: fixed; inset: 0; z-index: 200; margin: auto; height: fit-content;
  box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.58);
}
html:not(.js) .acs-dialog:target .acs-dialog__close--nojs { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}