/* Mahalaxmi Enterprises — Barmer
   Computer sales & service, CCTV security, printers, networking, power backup.

   Design intent: an established authorised dealer, not a repair counter.
   Light, corporate, generous whitespace. The crimson and amber are taken from
   the company logo; deep navy carries the utility bar and footer. */

:root {
  --brand: #C13B37;
  --brand-700: #9E2C29;
  --brand-50: #FDF1F0;
  --amber: #E8862A;
  --amber-50: #FEF4E9;

  --navy: #0E1F35;
  --navy-2: #16304F;

  --ink: #0D1B2E;
  --ink-2: #44546B;
  --muted: #6E8099;

  --bg: #FFFFFF;
  --bg-alt: #F4F7FB;
  --line: #E2E9F1;
  --line-2: #CFDAE7;

  --green: #1F9D57;

  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --sh-sm: 0 1px 2px rgba(13, 27, 46, .06), 0 1px 3px rgba(13, 27, 46, .04);
  --sh: 0 4px 16px rgba(13, 27, 46, .07);
  --sh-lg: 0 18px 48px rgba(13, 27, 46, .12);

  --wrap: 1200px;
  --head: 74px;
  --topbar: 40px;

  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + var(--topbar) + 16px); }

body {
  margin: 0;
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .55em;
  font-weight: 800;
  letter-spacing: -.022em;
}
h1 { font-size: clamp(2.05rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: .35rem; }
strong { color: var(--ink); font-weight: 700; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(3.4rem, 6.5vw, 5.6rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #C3D2E4; }
.section--navy h2, .section--navy h3 { color: #fff; }
.center { text-align: center; }
.lead { font-size: 1.08rem; color: var(--ink-2); max-width: 64ch; }
.center .lead { margin-inline: auto; }
.muted { color: var(--muted); }

/* ---------- section heads ---------- */
.eyebrow {
  display: inline-block; font-family: var(--f-head); font-size: .75rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--brand); margin-bottom: .7rem;
}
.section--navy .eyebrow { color: var(--amber); }
.head { margin-bottom: 2.6rem; }
.head--center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.5rem; border-radius: 8px; font-family: var(--f-head);
  font-weight: 700; font-size: .95rem; border: 1.5px solid transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(193, 59, 55, .28); }
.btn--primary:hover { background: var(--brand-700); box-shadow: 0 6px 20px rgba(193, 59, 55, .34); }
.btn--wa { background: var(--green); color: #fff; }
.btn--wa:hover { background: #16824A; }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); }
.btn--outline { border-color: var(--line-2); color: var(--ink); background: #fff; }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn--lg { padding: .98rem 1.85rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.head--center .btn-row, .center .btn-row { justify-content: center; }

/* ---------- utility bar ----------
   Sticks above the header and stays put: the phone number and address are the
   two things a local visitor needs at any scroll depth, so they never leave the
   screen. The header sticks directly beneath it at top: var(--topbar). */
.topbar {
  position: sticky; top: 0; z-index: 61;
  background: var(--navy); color: #A9BDD4; font-size: .82rem;
}
.topbar__inner {
  display: flex; align-items: center; gap: 1.4rem;
  height: var(--topbar); min-height: var(--topbar); flex-wrap: nowrap; overflow: hidden;
}
.topbar a { color: #D6E2F0; font-weight: 600; }
.topbar a:hover { color: var(--amber); }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__item svg { color: var(--amber); flex: none; }
.topbar__spacer { margin-left: auto; }
.topbar__badge {
  display: inline-flex; align-items: center; gap: .4rem; background: rgba(232, 134, 42, .16);
  color: #F5B879; padding: .18rem .7rem; border-radius: 99px; font-weight: 700; font-size: .74rem;
  letter-spacing: .04em;
}
@media (max-width: 860px) { .topbar__hide { display: none; } .topbar__inner { justify-content: center; } .topbar__spacer { margin-left: 0; } }

/* ---------- header ---------- */
.header {
  position: sticky; top: var(--topbar); z-index: 60; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.header__inner { display: flex; align-items: center; gap: 1.4rem; min-height: var(--head); }
.brand { display: flex; align-items: center; gap: .72rem; margin-right: auto; }
.brand img { width: 46px; height: 46px; border-radius: 9px; flex: none; box-shadow: var(--sh-sm); }
.brand__name {
  font-family: var(--f-head); font-weight: 800; font-size: 1.12rem; color: var(--ink);
  letter-spacing: -.02em; line-height: 1.1; display: block;
}
.brand__tag {
  font-size: .68rem; color: var(--muted); letter-spacing: .11em; text-transform: uppercase;
  font-weight: 700; display: block; margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: .1rem; }
.nav a {
  padding: .55rem .78rem; border-radius: 7px; font-size: .92rem; font-weight: 600;
  color: var(--ink-2); font-family: var(--f-head); transition: color .16s ease, background .16s ease;
}
.nav a:hover { color: var(--brand); background: var(--brand-50); }
.nav a[aria-current="page"] { color: var(--brand); background: var(--brand-50); }

.header__cta { display: flex; align-items: center; gap: .5rem; }
.nav-toggle {
  display: none; background: #fff; border: 1.5px solid var(--line-2); color: var(--ink);
  width: 44px; height: 44px; border-radius: 9px; cursor: pointer; align-items: center; justify-content: center;
}

@media (max-width: 1040px) {
  /* The drawer hangs below BOTH the utility bar (40px) and the header, at every
     mobile width — there is deliberately no narrower override, because setting
     it to var(--head) alone tucks the drawer underneath the header by the
     height of the utility bar. If the links ever outgrow the viewport the
     drawer scrolls rather than running off the bottom. */
  .nav {
    position: fixed; inset: calc(var(--head) + var(--topbar)) 0 auto; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: .7rem 1.25rem 1.2rem;
    transform: translateY(-150%); transition: transform .26s ease; box-shadow: var(--sh-lg); gap: 0;
    max-height: calc(100dvh - var(--head) - var(--topbar)); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: .85rem .6rem; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-toggle { display: inline-flex; }
  .header__cta .desk { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: var(--bg-alt); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -12%; top: -35%; width: 58%; height: 150%;
  background: radial-gradient(closest-side, rgba(193, 59, 55, .09), transparent 72%);
  pointer-events: none;
}
.hero__grid {
  position: relative; display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(2rem, 4vw, 3.6rem); align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4.4rem);
}
.hero h1 { margin-bottom: .7rem; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero__sub { font-size: 1.1rem; margin-bottom: 1.7rem; max-width: 54ch; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; padding: 0; list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--line);
  padding: .42rem .85rem; border-radius: 99px; font-size: .82rem; font-weight: 600;
  color: var(--ink); box-shadow: var(--sh-sm); margin: 0;
}
.chips svg { color: var(--green); flex: none; }

.hero__panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 1.7rem; box-shadow: var(--sh-lg);
}
.hero__panel h3 { margin-bottom: 1.1rem; font-size: 1.05rem; }
.catlist { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .5rem; }
.catlist li { margin: 0; }
.catlist a {
  display: flex; align-items: center; gap: .8rem; padding: .68rem .8rem; border-radius: 10px;
  border: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: .93rem;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.catlist a:hover { border-color: var(--brand); background: var(--brand-50); transform: translateX(3px); }
.catlist .ic {
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand); flex: none;
}
.catlist .arw { margin-left: auto; color: var(--muted); }

@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

/* ---------- brand strip ---------- */
.brands { padding: 2.2rem 0; border-bottom: 1px solid var(--line); background: #fff; }
.brands__label {
  text-align: center; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 800; margin-bottom: 1.3rem; font-family: var(--f-head);
}
.brands__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem;
  list-style: none; padding: 0; margin: 0;
}
.brands__grid li {
  margin: 0; text-align: center; padding: .85rem .5rem; border: 1px solid var(--line);
  border-radius: 10px; font-family: var(--f-head); font-weight: 800; color: var(--ink);
  letter-spacing: .02em; font-size: .95rem; background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.brands__grid li:hover { border-color: var(--brand); color: var(--brand); box-shadow: var(--sh); }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: 1.15rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--line-2); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.card h3 { margin-bottom: .4rem; }
.card p { font-size: .94rem; margin: 0; color: var(--ink-2); }
.card ul { margin: .85rem 0 0; padding-left: 1.05rem; font-size: .9rem; color: var(--ink-2); }
.card ul li { margin-bottom: .25rem; }
.card__ic {
  width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand); margin-bottom: 1.05rem;
}
.card__ic--amber { background: var(--amber-50); color: var(--amber); }
.card__link {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; color: var(--brand);
  font-weight: 700; font-size: .89rem; font-family: var(--f-head);
}
.card__link:hover { gap: .6rem; }

/* pillar card — the four big categories */
.pillar { position: relative; overflow: hidden; }
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--amber));
}

/* ---------- spec list (camera types etc.) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.tags li {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: .4rem .8rem; font-size: .85rem; font-weight: 600; color: var(--ink-2);
}
.section--navy .tags li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #D8E4F1; }

/* ---------- checks ---------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; margin: 0; font-size: .96rem; }
.checks .tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-50);
  color: var(--brand); display: grid; place-items: center; margin-top: 3px;
}
.section--navy .checks .tick { background: rgba(232, 134, 42, .18); color: var(--amber); }

/* ---------- numbered steps ---------- */
.steps { counter-reset: st; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.45rem; position: relative; }
.step::before {
  counter-increment: st; content: counter(st);
  width: 32px; height: 32px; border-radius: 8px; background: var(--brand); color: #fff;
  font-family: var(--f-head); font-weight: 800; font-size: .95rem;
  display: grid; place-items: center; margin-bottom: .85rem;
}
.step h3 { font-size: 1rem; margin-bottom: .3rem; }
.step p { font-size: .89rem; margin: 0; }

/* ---------- sectors ---------- */
.sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .8rem; list-style: none; padding: 0; margin: 0; }
.sectors li {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem .9rem; text-align: center; font-weight: 700; color: var(--ink);
  font-size: .92rem; font-family: var(--f-head);
}
.sectors svg { margin: 0 auto .55rem; color: var(--brand); }

/* ---------- split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.split--start { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- panel ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--sh); }
.panel--flat { box-shadow: none; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .38rem; }
.field label { font-size: .86rem; font-weight: 700; color: var(--ink); font-family: var(--f-head); }
.field .hint { font-weight: 500; color: var(--muted); font-size: .8rem; }
.req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem; border-radius: 9px; background: #fff;
  border: 1.5px solid var(--line-2); color: var(--ink); font: inherit; font-size: .95rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #9FB0C4; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-50);
}
.field textarea { resize: vertical; min-height: 108px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
@media (max-width: 620px) { .two { grid-template-columns: 1fr; } }
.radio-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-row label {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem;
  border: 1.5px solid var(--line-2); border-radius: 99px; cursor: pointer; font-size: .88rem;
  font-weight: 600; background: #fff; color: var(--ink-2); font-family: var(--f-head);
}
.radio-row input { accent-color: var(--brand); }
.radio-row label:has(input:checked) { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.form__note { font-size: .85rem; color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .6rem; max-width: 880px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq details[open] { border-color: var(--line-2); box-shadow: var(--sh); }
.faq summary {
  cursor: pointer; padding: 1.05rem 1.25rem; font-weight: 700; list-style: none; color: var(--ink);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  font-family: var(--f-head); font-size: .99rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 1.45rem; font-weight: 400; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 1.25rem 1.15rem; margin: 0; font-size: .95rem; }

/* ---------- contact / map ---------- */
.map-frame { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; min-height: 360px; background: var(--bg-alt); box-shadow: var(--sh); }
.map-frame iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
.info { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; }
.info li { display: flex; gap: .9rem; align-items: flex-start; margin: 0; }
.info .ic {
  flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-50);
  color: var(--brand); display: grid; place-items: center;
}
.info span {
  display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 800; margin-bottom: .1rem; font-family: var(--f-head);
}
.info a, .info p { color: var(--ink); margin: 0; font-weight: 600; }
.info a:hover { color: var(--brand); }

/* ---------- CTA band ---------- */
.cta {
  background: linear-gradient(115deg, var(--navy) 0%, var(--navy-2) 60%, #2A4468 100%);
  border-radius: var(--r-xl); padding: clamp(2.1rem, 4.5vw, 3.4rem); text-align: center; color: #C9D8E9;
  position: relative; overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; height: 130%;
  background: radial-gradient(closest-side, rgba(232, 134, 42, .22), transparent 70%);
}
.cta > * { position: relative; }
.cta h2 { color: #fff; }
.cta p { max-width: 58ch; margin-inline: auto; }

/* ---------- footer ---------- */
.footer { background: var(--navy); color: #9DB2CA; padding: 3.4rem 0 6.5rem; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 2.2rem; }
@media (max-width: 940px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em; color: #fff;
  margin-bottom: 1rem; font-family: var(--f-head); font-weight: 800;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer li { margin: 0; }
.footer a:hover { color: var(--amber); }
.footer .brand__name { color: #fff; }
.footer .brand__tag { color: var(--amber); }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.4rem; padding-top: 1.4rem;
  font-size: .84rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
}

/* ---------- mobile action bar ---------- */
.actionbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: none; gap: .5rem;
  padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  backdrop-filter: blur(10px); box-shadow: 0 -4px 16px rgba(13, 27, 46, .08);
}
.actionbar .btn { flex: 1; padding: .78rem .4rem; font-size: .9rem; }
@media (max-width: 780px) { .actionbar { display: flex; } }
@media (min-width: 781px) { .footer { padding-bottom: 3.4rem; } }

/* ---------- page header (inner pages) ---------- */
.pagehead { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.crumb { font-size: .84rem; color: var(--muted); margin-bottom: .8rem; font-weight: 600; }
.crumb a:hover { color: var(--brand); }
.pagehead h1 { margin-bottom: .5rem; }

/* ---------- misc ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: 99px;
  background: var(--brand-50); color: var(--brand); font-size: .76rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; font-family: var(--f-head);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 50%; transform: translate(-50%, -130%); top: 6px; z-index: 200;
  background: var(--brand); color: #fff; padding: .6rem 1.2rem; border-radius: 7px;
  font-weight: 700; transition: transform .2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- choice cards (enquiry: "What is this about?") ----------
   Replaces a cramped row of radio pills. Each option is a real <label> wrapping
   a visually-hidden radio, so it stays keyboard- and screen-reader-correct while
   presenting as a card. */
/* The grid is NEVER put on the <fieldset>. A <legend> is a direct child of the
   fieldset, and browsers disagree about whether it becomes a grid item — Chrome
   lifts it out of flow, others lay it out inside the grid and knock every option
   out of alignment. An inner wrapper sidesteps the whole disagreement. */
.choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice__legend {
  font-size: .86rem; font-weight: 700; color: var(--ink); font-family: var(--f-head);
  padding: 0; margin-bottom: .6rem; display: block;
}
.choice__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
}
@media (max-width: 400px) { .choice__grid { grid-template-columns: 1fr; } }

/* Row layout, not a centred stack: labels vary in length ("Buying & quote" vs
   "CCTV site survey"), and centring them made the four cards read as ragged. */
.choice__opt {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .85rem .95rem; border: 1.5px solid var(--line-2); border-radius: var(--r);
  cursor: pointer; text-align: left; background: #fff; font-family: var(--f-head);
  font-weight: 700; font-size: .9rem; color: var(--ink-2); line-height: 1.3;
  min-height: 62px;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.choice__opt:hover { border-color: var(--brand); color: var(--brand); }
.choice__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.choice__opt .ic {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: var(--bg-alt); color: var(--muted); transition: background .16s ease, color .16s ease;
}
.choice__opt:has(input:checked) {
  border-color: var(--brand); background: var(--brand-50); color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.choice__opt:has(input:checked) .ic { background: var(--brand); color: #fff; }
.choice__opt:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- trust row ---------- */
.trustrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.trustrow__item { background: #fff; padding: 1.35rem 1.2rem; display: flex; gap: .85rem; align-items: flex-start; }
.trustrow__item .ic { flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; }
.trustrow__item strong { display: block; font-family: var(--f-head); font-size: .95rem; color: var(--ink); margin-bottom: .1rem; }
.trustrow__item span { font-size: .84rem; color: var(--muted); line-height: 1.45; display: block; }

/* ---------- category tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.tile {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.4rem 1.2rem; text-align: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tile:hover { border-color: var(--brand); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.tile .ic { width: 52px; height: 52px; border-radius: 13px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; margin: 0 auto .9rem; }
.tile h3 { font-size: 1rem; margin-bottom: .2rem; }
.tile p { font-size: .85rem; margin: 0; color: var(--muted); }

/* ---------- google reviews ---------- */
.rev-summary {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .7rem 1.4rem;
  width: fit-content; margin: 0 auto 2rem; box-shadow: var(--sh-sm);
}
.rev-summary__score { font-family: var(--f-head); font-weight: 800; font-size: 1.5rem; color: var(--ink); line-height: 1; }
.rev-summary__meta { font-size: .85rem; color: var(--muted); }

/* ---------- reviews marquee ----------
   Continuous slow horizontal scroll. The track holds the real cards followed by
   one aria-hidden clone of the same set; the animation translates by exactly one
   set width, so the loop is seamless with no jump. Speed is constant px/sec
   (set in JS) rather than a fixed duration, so 3 cards and 8 cards drift at the
   same pace. */
.rev-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rev-track { display: flex; gap: 1.1rem; width: max-content; will-change: transform; }
.rev-track .review { width: 340px; flex: none; }

.rev-track.is-scrolling { animation: rev-scroll var(--rev-dur, 60s) linear infinite; }
@keyframes rev-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--rev-shift, 0px))); }
}
/* Let people actually read a card. */
.rev-marquee:hover .rev-track.is-scrolling,
.rev-marquee:focus-within .rev-track.is-scrolling { animation-play-state: paused; }

/* Too few real reviews to loop convincingly: show them centred and still,
   rather than repeating one card until it looks like several. */
.rev-track.is-static { width: auto; flex-wrap: wrap; justify-content: center; }
.rev-track.is-static .review { width: min(100%, 420px); }

@media (prefers-reduced-motion: reduce) {
  .rev-track.is-scrolling { animation: none; }
  .rev-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.review__top { display: flex; align-items: center; gap: .75rem; }
.review__av {
  flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-family: var(--f-head); font-weight: 800; font-size: 1.05rem;
  overflow: hidden;
}
.review__av img { width: 100%; height: 100%; object-fit: cover; }
.review__who { min-width: 0; }
.review__name { font-family: var(--f-head); font-weight: 700; color: var(--ink); font-size: .95rem; display: block; }
.review__when { font-size: .8rem; color: var(--muted); }
.stars { display: inline-flex; gap: 2px; color: #F5A623; }
.review__text { font-size: .94rem; margin: 0; color: var(--ink-2); }
.review__src { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }

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

/* ---------- Legal pages (privacy, terms) ----------------------------------
   Long-form prose, which nothing else on this site is. Measure is capped near
   70ch because these pages are actually read top to bottom, unlike the
   marketing pages built out of cards. */
.legal { max-width: 70ch; }
.legal h2 { font-size: clamp(1.18rem, 2.2vw, 1.42rem); margin: 2.4rem 0 .7rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.02rem; margin: 1.5rem 0 .45rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal p { margin-bottom: .9rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.legal li { margin-bottom: .4rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .92rem; }
.legal th, .legal td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--ink); font-weight: 700; background: var(--bg-alt); }
.legal__updated { font-size: .9rem; color: var(--ink-2); margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.legal__box { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; margin: 0 0 1.4rem; }
.legal__box p:last-child { margin-bottom: 0; }