/* Perth Metro Cabling brand layer over the builder template.
   Brand purple from the logo: #4E2182. Brighter violet for buttons on the dark theme. */
:root {
  --pmc-purple: #4e2182;
  --pmc-violet: #7b4bd1;
  --pmc-violet-hover: #8d5fe0;
  --pmc-lilac: #c3a8f5;
}

/* the template's single accent token (was yellow #f7b74a) */
html body,
html[data-theme="dark"] body,
html[data-theme="light"] body {
  --token-416055ca-c668-46e9-91cb-87caf560324d: var(--pmc-violet) !important;
}

/* literal yellows in template.css */
.client-eyebrow { background: var(--pmc-violet) !important; color: #fff !important; }
.client-area-link span,
.client-faq summary span { color: var(--pmc-lilac) !important; }
.client-area-link:hover { border-color: var(--pmc-violet) !important; }
.factory-call { background: var(--pmc-violet) !important; color: #fff !important; }
.factory-call:hover { background: var(--pmc-violet-hover) !important; }
[data-slideshow] button:focus-visible { outline-color: var(--pmc-lilac) !important; }

/* header bar (shows on scroll, always on tablet/phone): dark purple instead of beige, white text */
html, html[data-theme] { --template-nav-surface: #1d1233 !important; --template-nav-text: #fff !important; }
[data-site-header] [style*="--token-74ea7aab"] { background-color: #1d1233 !important; box-shadow: 0 0 0 1px rgba(195,168,245,.18); }
[data-site-header] .iw-text { color: #fff !important; }
[data-site-header] svg { --18mrqx2: #fff; }

/* purple label chips (ABOUT, OUR SERVICES, hero licence chip): white text and dot */
[style*="background-color: var(--token-416055ca"] [data-iw-name="Text"] { --extracted-a0htzi: #fff !important; }
[style*="background-color: var(--token-416055ca"] [data-iw-name="Ellipse"] { background-color: #fff !important; }

/* accent-coloured text (stats, numbers) reads better in a lighter lilac on dark */
[style*="--iw-text-color:var(--token-416055ca"] { --iw-text-color: var(--pmc-lilac) !important; }

/* hero: smaller headline so it sits in 3 to 4 lines, darker photo so the nav reads */
[data-iw-name="Hero"] .iw-styles-preset-mm3tlv { font-size: calc(var(--iw-font-size) * .8) !important; }
[data-iw-name="Hero"] img[src*="tech-installing-camera"] { filter: brightness(.6); }
img[src*="hero-cameras-sunset"] { filter: brightness(.55) saturate(1.1); }

/* banners with text over bright photos */

img[src*="alarm-keypad"] { filter: brightness(.42); }

/* long email address in the contact card */
.iw-1y0cd0m .iw-text { font-size: 15px !important; word-break: normal !important; overflow-wrap: anywhere !important; }

/* logo only (no business name text), header and footer */
a[aria-label="home page"] .iw-jpiwa7 { display: none !important; }
a[aria-label="home page"] .iw-bxgmq3 { width: auto !important; height: auto !important; padding: 0 !important; overflow: visible !important; }
a[aria-label="home page"] .iw-m5wv6 {
  -webkit-mask: none !important; mask: none !important;
  background: url("/assets/media/pmc/logo-mark-white.png") left center / contain no-repeat !important;
  width: 88px !important; aspect-ratio: 263 / 160 !important;
}
.iw-yw3mre a[aria-label="home page"] .iw-m5wv6 {
  background-image: url("/assets/media/pmc/logo-white.png") !important; width: 170px !important; aspect-ratio: 782 / 553 !important;
}

/* hero: second button (call), trust line */
div:has(> a[data-pmc-call]) { display: flex !important; flex-wrap: wrap; gap: 12px; }
a[data-pmc-call] .iw-1ha6aif { background-color: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); backdrop-filter: blur(6px); }
a[data-pmc-call] [data-iw-name="Icon"] { display: none !important; }
.pmc-hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; color: #e9e2f5; font: 500 15px/1.3 "Geist", sans-serif; }
.pmc-stars { color: #f5c24b; letter-spacing: 2px; }
.pmc-dot { opacity: .5; }

/* about: the story under the headline (the template column had a fixed height) */
.pmc-about-body { margin: 18px 0 0 !important; max-width: 560px; color: #b9b2c6 !important; font: 400 17px/1.6 "Geist", sans-serif !important; }
div:has(> .ssr-variant > .pmc-about-body) { height: auto !important; justify-content: flex-start !important; gap: 28px !important; }
div:has(> div > .ssr-variant > .pmc-about-body) { height: auto !important; }

/* FAQ: call card under the intro */
.pmc-faq-card { margin-top: 32px; padding: 26px; border-radius: 10px; max-width: 420px;
  background: linear-gradient(140deg, #2b1653 0%, #1a0f2e 100%); border: 1px solid rgba(195,168,245,.22); }
.pmc-faq-card .pmc-faq-card__title { margin: 0 0 8px !important; color: #fff !important; font: 600 21px/1.25 "Geist", sans-serif !important; }
.pmc-faq-card .pmc-faq-card__text { margin: 0 0 20px !important; color: #cfc6de !important; font: 400 15px/1.55 "Geist", sans-serif !important; }
.pmc-faq-card__btn { display: inline-block; padding: 12px 18px; border-radius: 4px; background: var(--pmc-violet); color: #fff !important;
  text-decoration: none; font: 600 15px/1 "Geist", sans-serif; }
.pmc-faq-card__btn:hover { background: var(--pmc-violet-hover); }

/* contact: brand card instead of an empty map box, GHL form on a white card */
[data-map-placeholder] {
  background: url("/assets/media/pmc/logo-white.png") center 40% / auto 42% no-repeat,
              radial-gradient(120% 120% at 20% 0%, #3a1d6e 0%, #1a0f2e 70%) !important;
  color: #d9cdf2 !important; border: 0 !important; align-items: flex-end !important; padding-bottom: 26px !important;
  font-size: 15px !important;
}
.iw-cr50xj h3.iw-text, .iw-1y0cd0m .iw-text { font-size: 17px !important; word-break: normal !important; overflow-wrap: anywhere !important; }
.pmc-ghl-form { position: relative; width: 100%; min-height: 720px; background: #fff; border-radius: 10px; padding: 8px 6px; box-sizing: border-box; }
.pmc-ghl-form iframe { width: 100%; height: 704px; min-height: 704px; border: 0; border-radius: 8px; display: block; position: relative; }
.pmc-ghl-form__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: #6b6480; font: 500 15px/1.4 "Geist", sans-serif; }
.pmc-ghl-form.is-loaded .pmc-ghl-form__loading { display: none; }

/* process line in lilac, not tan */
[style*="--border-style: dashed"] { --border-color: rgba(195,168,245,.5) !important; }

/* ---- fixes from the screenshot review ---- */
/* nav links were washed out over the hero photo */
[data-site-header] .iw-fvuvd3 { opacity: 1 !important; }
.site-header--hero:not(.site-header--scrolled) .iw-fvuvd3 .iw-text { text-shadow: 0 1px 10px rgba(0,0,0,.65); }

/* hero: both buttons the same height */
a[data-pmc-call] { min-height: 0 !important; padding: 0 18px !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box; }
div:has(> a[data-pmc-call]) { align-items: stretch !important; }

/* hero text stays readable over the photo, on phones most of all */
#desktop-hero .iw-text, #tablet-hero .iw-text, #mobile-hero .iw-text, .pmc-hero-trust { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
[style*="background-color: var(--token-416055ca"] .iw-text, a .iw-text { text-shadow: none !important; }
#mobile-hero img[src*="tech-installing-camera"], #tablet-hero img[src*="tech-installing-camera"] { filter: brightness(.5); }

/* about: space between the licence line and the big numbers */
div:has(> .iw-5fw8dz) { gap: 28px !important; }
.iw-5fw8dz { margin-top: 26px !important; }

/* less dead space under the 3 steps */
[data-iw-name="Process"] { padding-bottom: 72px !important; }

/* ---- service pages (/services/...) ---- */
.pmc-svc { width: 100%; color: #cfc8dc; font: 400 17px/1.65 "Geist", sans-serif; text-align: left; }
.pmc-svc h2 { margin: 56px 0 18px; color: #fff; font: 700 30px/1.2 "Cabinet Grotesk", "Geist", sans-serif; letter-spacing: -.01em; }
.pmc-svc > h2:first-child { margin-top: 8px; }
.pmc-svc p { margin: 0 0 16px; }
.pmc-svc a { color: var(--pmc-lilac); }
.pmc-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.pmc-list li { position: relative; padding: 16px 18px 16px 46px; border-radius: 8px; background: #141218; border: 1px solid rgba(255,255,255,.07); }
.pmc-list li::before { content: ""; position: absolute; left: 18px; top: 25px; width: 10px; height: 10px; border-radius: 50%; background: var(--pmc-violet); }
.pmc-list--ticks li::before { content: "✓"; background: none; top: 15px; left: 17px; width: auto; height: auto; color: var(--pmc-lilac); font-weight: 700; }
.pmc-list strong { color: #fff; font-weight: 600; }

.pmc-rebate { margin: 8px 0 8px; padding: 34px 34px 28px; border-radius: 12px;
  background: linear-gradient(145deg, #2b1653 0%, #170d2a 100%); border: 1px solid rgba(195,168,245,.28); }
.pmc-rebate h2 { margin: 6px 0 14px !important; }
.pmc-rebate .pmc-list li { background: rgba(0,0,0,.28); border-color: rgba(195,168,245,.14); }
.pmc-rebate .pmc-list { margin-bottom: 20px; }
.pmc-rebate__tag { display: inline-block; margin: 0 !important; padding: 6px 10px; border-radius: 4px; background: var(--pmc-violet); color: #fff; font: 600 12px/1.1 "Geist", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.pmc-small { margin: 18px 0 0 !important; color: #a79fb8; font-size: 13.5px; line-height: 1.55; }

.pmc-btn { display: inline-block; padding: 14px 20px; border-radius: 4px; background: var(--pmc-violet); color: #fff !important; text-decoration: none; font: 600 15px/1 "Geist", sans-serif; }
.pmc-btn:hover { background: var(--pmc-violet-hover); }
.pmc-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }
.pmc-btn--ghost:hover { background: rgba(255,255,255,.08); }

.pmc-faqs { border-top: 1px solid rgba(255,255,255,.12); }
.pmc-faqs details { border-bottom: 1px solid rgba(255,255,255,.12); }
.pmc-faqs summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; color: #fff; font: 500 18px/1.35 "Geist", sans-serif; }
.pmc-faqs summary::-webkit-details-marker { display: none; }
.pmc-faqs summary::after { content: "+"; color: var(--pmc-lilac); font-size: 26px; line-height: 1; transition: transform .2s; }
.pmc-faqs details[open] summary::after { transform: rotate(45deg); }
.pmc-faqs details p { margin: 0 0 20px; max-width: 640px; }

.pmc-cta { margin-top: 56px; padding: 30px 32px; border-radius: 12px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between;
  background: #141218; border: 1px solid rgba(195,168,245,.22); }
.pmc-cta__title { margin: 0 0 6px !important; color: #fff; font: 700 24px/1.2 "Cabinet Grotesk", "Geist", sans-serif; }
.pmc-cta__text { margin: 0 !important; max-width: 460px; font-size: 15.5px; }
.pmc-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 809px) {
  .pmc-svc { font-size: 16px; }
  .pmc-svc h2 { font-size: 25px; margin-top: 44px; }
  .pmc-rebate { padding: 24px 18px 22px; }
  .pmc-cta { padding: 24px 20px; }
}

/* hero call button: outline drawn on the link itself so it always matches the quote button's height */
a[data-pmc-call] { align-self: stretch !important; display: inline-flex !important; align-items: center !important; padding: 0 18px !important;
  border-radius: 4px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); backdrop-filter: blur(6px); }
a[data-pmc-call] .iw-1ha6aif { display: none !important; }
a[data-pmc-call]:hover { background: rgba(255,255,255,.14); }
a[data-pmc-call] { height: auto !important; min-height: 44px !important; box-sizing: border-box; }
@media (max-width: 809px) { a[data-pmc-call] { min-height: 37px !important; } }

/* ---- blocks lifted from the template's Services and About pages ---- */
.pmc-scope { display: contents !important; }                    /* wrapper only carries the source page's style scope */
.pmc-scope [data-iw-name="Projects List"] { height: auto !important; }
.pmc-scope [data-section="services"] { padding-bottom: 70px !important; }
.pmc-scope [data-section="about"] { height: auto !important; }
.pmc-card-desc { display: block; white-space: normal; line-height: 1.55; }
.pmc-licence { margin: 16px 0 4px !important; color: var(--pmc-lilac) !important; font: 600 15px/1.4 "Geist", sans-serif !important; }
.pmc-social { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0 !important; }
.pmc-social a { color: #d9cdf2 !important; font: 500 14px/1.4 "Geist", sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.pmc-social a:hover { color: #fff !important; }

/* hero: darker overlay and softer photo contrast, so the bright camera and window don't fight the text (Andres, 2026-11-11) */
[data-iw-name="Hero"] img[src*="tech-installing-camera"],
#mobile-hero img[src*="tech-installing-camera"], #tablet-hero img[src*="tech-installing-camera"] { filter: brightness(.62) contrast(.78) saturate(.85) !important; }
[data-iw-name="Hero"] [data-iw-background-image-wrapper]::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,7,24,.82) 0%, rgba(12,7,24,.62) 42%, rgba(12,7,24,.42) 100%),
              linear-gradient(180deg, rgba(12,7,24,.35) 0%, rgba(12,7,24,0) 30%, rgba(12,7,24,.45) 100%); }

/* =====================================================================
   Site structure pieces (menu drop-down, footer lists, card buttons, inner pages)
   ===================================================================== */
/* same build as the template's own "button with arrow": 44px high, purple, dark square, arrow */
.pmc-arrow-btn { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 6px 6px 6px 12px; box-sizing: border-box;
  border-radius: 4px; background: var(--pmc-violet); color: #fff !important; font: 500 16px/24px "Geist", sans-serif; text-decoration: none; white-space: nowrap; }
.pmc-arrow-btn i { width: 32px; height: 32px; border-radius: 2px; background: #171614; display: grid; place-items: center; color: var(--pmc-violet); flex: 0 0 auto; }
.pmc-arrow-btn svg { transition: transform .25s ease; }
.pmc-card-btn { display: flex; width: fit-content; margin-top: 18px; }
a:hover .pmc-card-btn, .pmc-arrow-btn:hover { background: var(--pmc-violet-hover); }
a:hover .pmc-card-btn svg, .pmc-arrow-btn:hover svg, a[data-iw-name="Button with arrow"]:hover [data-iw-name="Icon"] svg { transform: translate(2px, -2px); }
a[data-iw-name="Button with arrow"] [data-iw-name="Icon"] svg { transition: transform .25s ease; }

/* menu: Services drop-down (desktop / mouse only; on phones Services goes to the services section) */
.pmc-dd-wrap { position: relative; display: inline-flex; align-items: center; }
.pmc-dd { display: none; position: absolute; top: 100%; left: -16px; min-width: 290px; padding: 10px; flex-direction: column; gap: 2px; z-index: 60;
  background: #1d1233; border: 1px solid rgba(195,168,245,.22); border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.pmc-dd::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }   /* keeps the hover alive across the gap */
.pmc-dd a { padding: 10px 12px; border-radius: 5px; color: #fff !important; font: 500 15px/1.3 "Geist", sans-serif; text-decoration: none; white-space: nowrap; }
.pmc-dd a:hover, .pmc-dd a:focus-visible { background: rgba(123,75,209,.35); }
@media (hover: hover) and (min-width: 810px) {
  .pmc-dd-wrap::after { content: ""; width: 7px; height: 7px; margin-left: 7px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-2px) rotate(45deg); opacity: .85; }
  .pmc-dd-wrap:hover .pmc-dd, .pmc-dd-wrap:focus-within .pmc-dd { display: flex; animation: pmc-drop .18s ease both; }
}
@keyframes pmc-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* footer: services list and operating hours, like his current footer */
.pmc-foot-list { display: flex; flex-direction: column; gap: 7px; margin-top: 24px; }
.pmc-foot-head { margin: 0 0 4px !important; color: #fff !important; font: 600 15px/1.3 "Geist", sans-serif !important; }
.pmc-foot-list a { color: #b9b2c6 !important; font: 400 14px/1.4 "Geist", sans-serif; text-decoration: none; }
.pmc-foot-list a:hover { color: #fff !important; }
.pmc-hours { list-style: none; margin: 12px 0 0; padding: 0; color: #d6d1d1; font: 400 14px/1.95 "Geist", sans-serif; }
.pmc-hours span { display: inline-block; width: 46px; color: #fff; }

/* inner pages */
.pmc-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 44px; }
.pmc-btn-row .pmc-btn { height: 44px; padding: 0 20px; display: inline-flex; align-items: center; box-sizing: border-box; }
.pmc-eyebrow { display: inline-block; margin: 64px 0 0 !important; padding: 6px 10px; border-radius: 4px; background: var(--pmc-violet); color: #fff;
  font: 600 12px/1.1 "Geist", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.pmc-svc .pmc-eyebrow + h2 { margin-top: 14px; }
.pmc-svc h3 { margin: 0 0 8px; color: #fff; font: 600 19px/1.3 "Geist", sans-serif; }
.pmc-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pmc-review { position: relative; margin: 0; padding: 22px; border-radius: 10px; background: #141218; border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 12px; }
.pmc-review blockquote { margin: 0; color: #e6e0f0; font-size: 15.5px; line-height: 1.6; }
.pmc-review figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pmc-review figcaption strong { color: #fff; font-weight: 600; }
.pmc-review figcaption span { color: #a79fb8; }
.pmc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pmc-steps li { position: relative; padding: 22px; border-radius: 10px; background: #141218; border: 1px solid rgba(255,255,255,.07); }
.pmc-steps p { margin: 0; font-size: 15.5px; }
.pmc-step-no { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 4px; background: #1c1a17; color: #fff; font: 500 18px/1 "Geist", sans-serif;
  transition: background-color .45s ease, box-shadow .45s ease; }
.pmc-quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px; align-items: start; margin-top: 72px; scroll-margin-top: 110px; }
.pmc-quote__info h2 { margin-top: 0 !important; }
.pmc-quote__info a { color: #fff !important; font: 500 20px/1.5 "Geist", sans-serif; text-decoration: none; overflow-wrap: anywhere; }
.pmc-quote__info a:hover { color: var(--pmc-lilac) !important; }
html[data-pmc-plain] [data-iw-name="Hero Image"], html[data-pmc-plain] .iw-2jhbwr, html[data-pmc-plain] .iw-ykfsh { display: none !important; }
html[data-pmc-plain] .pmc-quote { margin-top: 8px; }
.pmc-btn-row--center { margin-top: 12px; }
@media (max-width: 809px) {
  .pmc-reviews, .pmc-steps, .pmc-quote { grid-template-columns: minmax(0, 1fr); }
  .pmc-quote { margin-top: 52px; }
  #mobile-hero [name="Eyebrow Label Container"] { margin-top: 16px; }
}

/* 3-step section on the homepage: no photo, steps use the full width (Andres, 2026-11-11) */
[data-iw-name="Process"] .iw-17fg70g { display: none !important; }
[data-iw-name="Process"] .iw-1n36hig { width: 100% !important; flex: 1 1 auto !important; max-width: none !important; }

/* =====================================================================
   Life: motion ported to plain CSS/JS from three 21st.dev components
   (Stagger Reveal Grid by pulkitxm, Process Timeline by shadcnui-blocks, Spotlight Card by preetsuthar17).
   assets/js/client.js adds the classes. Nothing is hidden unless that script is running,
   and all of it switches off for people who ask for reduced motion.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* hero: text rises in on load, photo settles slowly */
  @keyframes pmc-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes pmc-settle { from { transform: scale(1.09); } to { transform: scale(1); } }
  [data-iw-name="Hero"] [name="Eyebrow Label Container"] { animation: pmc-rise .7s .05s cubic-bezier(.2,.7,.2,1) both; }
  [data-iw-name="Hero"] .iw-styles-preset-mm3tlv { animation: pmc-rise .8s .15s cubic-bezier(.2,.7,.2,1) both; }
  [data-iw-name="Hero"] .iw-styles-preset-mm3tlv ~ *, [data-iw-name="Hero"] .pmc-hero-sub { animation: pmc-rise .8s .3s cubic-bezier(.2,.7,.2,1) both; }
  [data-iw-name="Hero"] .pmc-hero-trust { animation: pmc-rise .8s .42s cubic-bezier(.2,.7,.2,1) both; }
  [data-iw-name="Hero"] div:has(> a[data-pmc-call]) { animation: pmc-rise .8s .54s cubic-bezier(.2,.7,.2,1) both; }
  [data-iw-name="Hero"] img[src*="tech-installing-camera"] { animation: pmc-settle 9s ease-out both; }

  /* scroll reveal with stagger */
  .pmc-rv { opacity: 0 !important; transform: translateY(34px) scale(.975) !important; }
  .pmc-rv-anim { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1) !important; transition-delay: var(--pmc-delay, 0s) !important; }

  /* cards: lift, photo zoom, spotlight that follows the mouse */
  .pmc-spot { position: relative; }
  .pmc-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(123,75,209,.26), transparent 70%); }
  .pmc-spot:hover::after { opacity: 1; }
  .pmc-scope [data-section="services"] a[href] { transition: transform .35s cubic-bezier(.2,.7,.2,1); border-radius: 6px; }
  .pmc-scope [data-section="services"] a[href]:hover { transform: translateY(-6px); }
  .pmc-scope [data-section="services"] a[href] img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
  .pmc-scope [data-section="services"] a[href]:hover img { transform: scale(1.06); }
  .pmc-review, .pmc-steps li, .pmc-list li { transition: transform .3s ease, border-color .3s ease; }
  .pmc-review:hover, .pmc-steps li:hover { transform: translateY(-4px); border-color: rgba(195,168,245,.35); }

  /* 3 steps: the line draws itself and each number lights up in turn */
  .pmc-ready .pmc-badge { transition: background-color .45s ease, box-shadow .45s ease; transition-delay: calc(var(--i) * .6s); }
  .pmc-ready.pmc-go .pmc-badge { background-color: var(--pmc-violet) !important; box-shadow: 0 0 0 5px rgba(123,75,209,.22); }
  .pmc-ready .pmc-line { clip-path: inset(0 100% 0 0); transition: clip-path .6s ease; transition-delay: calc(var(--i) * .6s + .25s); }
  .pmc-ready .pmc-line.pmc-line-v { clip-path: inset(0 0 100% 0); }
  .pmc-ready.pmc-go .pmc-line { clip-path: inset(0 0 0 0); }
  .pmc-steps.pmc-go .pmc-step-no { background: var(--pmc-violet); box-shadow: 0 0 0 5px rgba(123,75,209,.22); }
  .pmc-steps li:nth-child(1) .pmc-step-no { transition-delay: 0s; } .pmc-steps li:nth-child(2) .pmc-step-no { transition-delay: .5s; } .pmc-steps li:nth-child(3) .pmc-step-no { transition-delay: 1s; }

  /* quote call card: slow glow */
  @keyframes pmc-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(123,75,209,0); } 50% { box-shadow: 0 0 38px 0 rgba(123,75,209,.28); } }
  .pmc-faq-card { animation: pmc-glow 5s ease-in-out infinite; }
}

/* =====================================================================
   3 steps as a vertical timeline + wall of reviews (Andres, 2026-11-11)
   ===================================================================== */
.pmc-eyebrow::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #fff; vertical-align: middle; }
.pmc-tl, .pmc-wall { position: relative; width: 100%; box-sizing: border-box; padding: 110px 50px; display: flex; flex-direction: column; align-items: center; }
.pmc-tl__head, .pmc-wall__head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin-bottom: 56px; }
.pmc-tl__head .pmc-eyebrow, .pmc-wall__head .pmc-eyebrow { margin: 0 !important; }
.pmc-tl h2, .pmc-wall h2 { margin: 0 !important; text-align: center; }

.pmc-tl__list { position: relative; list-style: none; margin: 0; padding: 0; width: 100%; max-width: 780px; display: grid; gap: 44px; --p: 1; }
.pmc-tl__list::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: rgba(255,255,255,.12); }
.pmc-tl__fill { position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: linear-gradient(180deg, var(--pmc-violet), var(--pmc-lilac));
  transform-origin: top; transform: scaleY(var(--p)); box-shadow: 0 0 14px rgba(123,75,209,.7); }
.pmc-tl__step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 28px; align-items: start; }
.pmc-tl__no { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 6px; background: var(--pmc-violet); color: #fff;
  font: 600 22px/1 "Cabinet Grotesk", "Geist", sans-serif; box-shadow: 0 0 0 6px rgba(123,75,209,.2); }
.pmc-tl__text { padding: 6px 0 0; }
.pmc-tl__text h3 { margin: 0 0 10px !important; color: #fff; font: 600 26px/1.2 "Cabinet Grotesk", "Geist", sans-serif !important; letter-spacing: -.01em; }
.pmc-tl__text p { margin: 0 !important; color: #b9b2c6; font: 400 17px/1.65 "Geist", sans-serif; }
.pmc-tl__cta, .pmc-wall__more { margin-top: 52px; display: flex; justify-content: center; }
/* live state (only when the motion script is running): steps wait, then light up as the line reaches them */
.pmc-tl--live .pmc-tl__no { background: #1c1a17; box-shadow: 0 0 0 1px rgba(255,255,255,.12); transition: background-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.pmc-tl--live .pmc-tl__text { opacity: .35; transform: translateX(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.pmc-tl--live .pmc-tl__step.is-on .pmc-tl__no { background: var(--pmc-violet); box-shadow: 0 0 0 6px rgba(123,75,209,.22); transform: scale(1.06); }
.pmc-tl--live .pmc-tl__step.is-on .pmc-tl__text { opacity: 1; transform: none; }
.pmc-tl--live .pmc-tl__fill { transition: transform .12s linear; }

.pmc-wall__score { margin: 0 !important; display: flex; align-items: center; gap: 10px; color: #cfc8dc; font: 400 17px/1.4 "Geist", sans-serif; }
.pmc-wall__score strong { color: #fff; font-weight: 600; }
.pmc-wall__grid { width: 100%; columns: 3; column-gap: 16px; }
.pmc-wall__grid .pmc-review { break-inside: avoid; margin: 0 0 16px; }
.pmc-wall .pmc-review blockquote { font-size: 16px; }
.pmc-svc .pmc-tl, .pmc-svc .pmc-wall { padding: 72px 0 0; }
.pmc-svc .pmc-tl__head, .pmc-svc .pmc-wall__head { margin-bottom: 40px; }
.pmc-svc .pmc-wall h2, .pmc-svc .pmc-tl h2 { font: 700 30px/1.2 "Cabinet Grotesk", "Geist", sans-serif; color: #fff; text-transform: none; }
@media (max-width: 1099px) { .pmc-wall__grid { columns: 2; } }
@media (max-width: 809px) {
  .pmc-tl, .pmc-wall { padding: 72px 15px; }
  .pmc-tl__head, .pmc-wall__head { margin-bottom: 40px; }
  .pmc-wall__grid { columns: 1; }
  .pmc-wall__grid .pmc-review:nth-child(n+7) { display: none; }      /* phones show six; the button leads to the rest */
  .pmc-tl__list { gap: 36px; }
  .pmc-tl__list::before, .pmc-tl__fill { left: 25px; top: 26px; bottom: 26px; }
  .pmc-tl__step { grid-template-columns: 52px minmax(0, 1fr); gap: 18px; }
  .pmc-tl__no { width: 52px; height: 52px; font-size: 19px; }
  .pmc-tl__text h3 { font-size: 22px !important; }
  .pmc-tl__text p { font-size: 16px; }
}

/* hero: headline on two lines, smaller intro line (Andres, 2026-11-11) */
[data-iw-name="Hero"] .iw-xm6wvj, [data-iw-name="Hero"] .iw-176034p, [data-iw-name="Hero"] .iw-a7x3lj,
[data-iw-name="Hero"] .iw-15umk4u, [data-iw-name="Hero"] .iw-15qsx91 { width: 960px !important; max-width: calc(100vw - 100px) !important; }
[data-iw-name="Hero"] .iw-styles-preset-mm3tlv { text-wrap: balance; font-size: 56px !important; line-height: 1.08 !important; }
[data-iw-name="Hero"] .pmc-hero-sub { font-size: 18px !important; line-height: 1.6 !important; max-width: 600px; }
#tablet-hero .iw-styles-preset-mm3tlv { font-size: 44px !important; }
@media (max-width: 809px) {
  [data-iw-name="Hero"] .iw-xm6wvj, [data-iw-name="Hero"] .iw-176034p, [data-iw-name="Hero"] .iw-a7x3lj,
  [data-iw-name="Hero"] .iw-15umk4u, [data-iw-name="Hero"] .iw-15qsx91 { max-width: calc(100vw - 30px) !important; }
  #mobile-hero .iw-styles-preset-mm3tlv { font-size: 25px !important; line-height: 1.15 !important; }
  [data-iw-name="Hero"] .pmc-hero-sub { font-size: 16px !important; }
}

/* ---- fixes after the Codex review and Andres's notes (2026-11-11 evening) ---- */
.pmc-wall, .pmc-tl, .pmc-review { font-family: "Geist", sans-serif; }
.pmc-faq-card__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pmc-faq-card__btn { min-height: 44px; box-sizing: border-box; display: inline-flex !important; align-items: center; }
.pmc-faq-card__btn--ghost { background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }
.pmc-faq-card__btn--ghost:hover { background: rgba(255,255,255,.08) !important; }
/* readability: lighter secondary text, bigger small print, 44px touch targets (Codex finding 9) */
.pmc-card-desc { color: #c9c2d6; }
.pmc-scope [data-section="about"] p.iw-text:not(a *) { color: #c9c2d6 !important; }   /* never button labels */
[data-iw-name="Footer"] p.iw-text, [data-iw-name="Footer"] a.iw-text { font-size: 14.5px !important; line-height: 1.6 !important; }
[data-iw-name="Footer"] p.iw-text { color: #cfc8dc !important; }
.pmc-foot-list a, .pmc-hours { font-size: 14.5px; }
.pmc-foot-list a { padding: 3px 0; }
.factory-call { min-height: 44px !important; box-sizing: border-box; }
[aria-label="Open navigation"] { min-width: 44px !important; min-height: 44px !important; }
[data-iw-name="Hero"] div:has(> .pmc-hero-sub) { width: 100% !important; max-width: 600px !important; }
@media (max-width: 809px) {
  .pmc-scope [data-section="services"] { padding-bottom: 24px !important; }
  .pmc-scope [data-section="about"] { padding-top: 48px !important; padding-bottom: 32px !important; }
  [data-section="faqs"] { padding-bottom: 36px !important; }
  [data-section="contact"] { padding-top: 36px !important; }
  .pmc-foot-list a { padding: 7px 0; }
}

/* =====================================================================
   Hero balance (Andres, 2026-11-11, reference: the template's own hero).
   Text block = four rows like the template (chip, two-line headline, intro, buttons), sat in the
   vertical middle. The header bar at the top is answered by a trust bar along the bottom.
   ===================================================================== */
[data-iw-name="Hero"] .iw-xm6wvj, [data-iw-name="Hero"] .iw-176034p, [data-iw-name="Hero"] .iw-a7x3lj,
[data-iw-name="Hero"] .iw-15umk4u, [data-iw-name="Hero"] .iw-15qsx91 { width: 860px !important; }
[data-iw-name="Hero"] .iw-styles-preset-mm3tlv { font-size: 62px !important; line-height: 1.06 !important; letter-spacing: -.025em; }
[data-iw-name="Hero"] .pmc-hero-sub { font-size: 20px !important; line-height: 1.55 !important; max-width: 640px; color: #e4deee !important; }
[data-iw-name="Hero"] div:has(> .pmc-hero-sub) { max-width: 640px !important; }
[data-iw-name="Hero"] img[src*="tech-installing-camera"] { object-position: 62% 32% !important; }
[data-iw-name="Hero"] [data-iw-background-image-wrapper]::after {
  background: linear-gradient(90deg, rgba(12,7,24,.86) 0%, rgba(12,7,24,.66) 38%, rgba(12,7,24,.32) 72%, rgba(12,7,24,.22) 100%),
              linear-gradient(180deg, rgba(12,7,24,.42) 0%, rgba(12,7,24,0) 26%, rgba(12,7,24,0) 62%, rgba(12,7,24,.72) 100%) !important; }

.pmc-hero-bar { position: relative; z-index: 3; width: 100%; box-sizing: border-box; padding: 0 50px; margin-top: -104px; margin-bottom: 30px; pointer-events: none; }
.pmc-hero-bar__in { pointer-events: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 74px; align-items: center;
  border-radius: 6px; background: rgba(29,18,51,.78); border: 1px solid rgba(195,168,245,.2); backdrop-filter: blur(10px); }
.pmc-hero-bar p { margin: 0 !important; padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  color: #d9d2e6; font: 400 16px/1.35 "Geist", sans-serif; }
.pmc-hero-bar p + p { border-left: 1px solid rgba(195,168,245,.18); }
.pmc-hero-bar strong { color: #fff; font-weight: 600; }
#tablet-hero .iw-styles-preset-mm3tlv { font-size: 46px !important; }
@media (max-width: 1099px) { .pmc-hero-bar p { font-size: 14.5px; padding: 12px 12px; } .pmc-hero-bar { padding: 0 30px; } }
@media (max-width: 809px) {
  #mobile-hero .iw-styles-preset-mm3tlv { font-size: 25px !important; line-height: 1.15 !important; }
  [data-iw-name="Hero"] .pmc-hero-sub { font-size: 16.5px !important; }
  .pmc-hero-bar { margin-top: 0; margin-bottom: 0; padding: 0; }
  .pmc-hero-bar__in { grid-template-columns: minmax(0, 1fr); border-radius: 0; border-left: 0; border-right: 0; min-height: 0; backdrop-filter: none; background: #1d1233; }
  .pmc-hero-bar p { justify-content: flex-start; padding: 11px 15px; font-size: 15px; }
  .pmc-hero-bar p + p { border-left: 0; border-top: 1px solid rgba(195,168,245,.14); }
}
@media (prefers-reduced-motion: no-preference) { .pmc-hero-bar__in { animation: pmc-rise .8s .7s cubic-bezier(.2,.7,.2,1) both; } }

/* hero block: even rhythm between rows, and the block sits in the true middle between header and trust bar */
[data-iw-name="Hero"] div:has(> .pmc-hero-sub) { margin-top: 10px !important; }
#desktop-hero .iw-xm6wvj { position: relative; top: -14px; }
#tablet-hero .iw-xm6wvj { position: relative; top: -6px; }
#mobile-hero .iw-xm6wvj { position: relative; top: 18px; }
@media (max-width: 1099px) and (min-width: 810px) { .pmc-hero-bar p { font-size: 13.5px; flex-wrap: wrap; row-gap: 2px; } }

/* ---- from the Playwright sweep (2026-11-11): one heading font on every size, 44px buttons on phones ---- */
html:has(.pmc-svc) h1.iw-text { font-family: "Cabinet Grotesk", "Cabinet Grotesk Placeholder", sans-serif !important; }
@media (max-width: 809px) {
  a[data-iw-name^="Button"] { min-height: 44px !important; box-sizing: border-box; }
  a[data-pmc-call] { min-height: 44px !important; }
}

/* =====================================================================
   One system for the whole page (measured with Playwright, 2026-11-11).
   Before: side margins were 50px or 100px depending on the section, section headings came in three
   sizes and weights, the small labels were 37px or 25px tall, and the space between sections ran
   from 92px to 238px. Now: one margin, one heading style, one label style, one rhythm.
   Screen sizes follow the template: desktop 1200+, tablet 810 to 1199, phone under 810.
   ===================================================================== */
:root { --pmc-h2: 54px; }
@media (max-width: 1199.98px) { :root { --pmc-h2: 43px; } }
@media (max-width: 809.98px) { :root { --pmc-h2: 32px; } }

/* 1. section headings: every one matches the "Our services" heading */
.pmc-scope [data-section="about"] h2, [data-section="faqs"] h2, .pmc-tl h2, .pmc-wall h2 {
  font-family: "Cabinet Grotesk", "Cabinet Grotesk Placeholder", sans-serif !important; font-size: var(--pmc-h2) !important; font-weight: 700 !important;
  line-height: 1.2 !important; letter-spacing: -.02em !important; text-transform: uppercase !important; color: #fff !important; }
.pmc-svc .pmc-tl h2, .pmc-svc .pmc-wall h2 { font-size: 30px !important; text-transform: none !important; letter-spacing: -.01em !important; }

/* 2. small labels: same box and type as the template's (8px 12px padding, 37px tall, 14px, white dot) */
.pmc-eyebrow, .client-eyebrow, .pmc-rebate__tag { display: inline-flex !important; align-items: center; gap: 8px; box-sizing: border-box; height: 37px; padding: 8px 12px !important; border-radius: 4px !important;
  background: var(--pmc-violet) !important; color: #fff !important; font: 500 14px/21px "Cabinet Grotesk", "Geist", sans-serif !important; letter-spacing: 0 !important; text-transform: uppercase; }
.pmc-eyebrow::before, .client-eyebrow::before, .pmc-rebate__tag::before { content: ""; display: block; width: 5px; height: 5px; margin: 0; border-radius: 50%; background: #fff; flex: 0 0 auto; }

/* 3. one side margin: 50px desktop, 40px tablet, 15px phone (the wall and services sat 50px further in) */
.pmc-scope [data-section="services"] { padding-left: 0 !important; padding-right: 0 !important; }
.pmc-tl, .pmc-wall { padding-left: 0; padding-right: 0; }

/* 4. one rhythm: about 200px between one section's content and the next on desktop, about 110px on phones */
.pmc-scope [data-section="services"] { padding-top: 150px !important; padding-bottom: 32px !important; }
.pmc-tl { padding-top: 120px; }
.pmc-wall { padding-top: 90px; }
[data-section="contact"] { padding-top: 108px !important; }
@media (max-width: 1199.98px) and (min-width: 810px) {
  .pmc-scope [data-section="services"] { padding-top: 120px !important; }
  [data-section="contact"] { padding-top: 90px !important; }
}
@media (max-width: 809.98px) {
  .pmc-scope [data-section="services"] { padding-top: 100px !important; padding-bottom: 24px !important; }
  .pmc-tl { padding-top: 72px; padding-bottom: 72px; }
  .pmc-wall { padding-top: 40px; padding-bottom: 36px; }
  [data-section="faqs"] { padding-top: 30px !important; padding-bottom: 0 !important; }
  [data-section="contact"] { padding-top: 112px !important; }
}

/* rhythm fine-tune after re-measuring (tablet target 200px, phone target 110px) and one label text size everywhere */
[name$="Label Container"] .iw-text { font-size: 14px !important; line-height: 21px !important; }
@media (max-width: 1199.98px) and (min-width: 810px) {
  .pmc-scope [data-section="services"] { padding-top: 156px !important; padding-bottom: 6px !important; }
  [data-section="faqs"] { padding-top: 90px !important; }
  [data-section="contact"] { padding-top: 128px !important; }
}
@media (max-width: 809.98px) {
  [data-section="faqs"] { padding-top: 74px !important; }
  [data-section="contact"] { padding-top: 156px !important; }
}

/* ---- from the visual pass ---- */
/* About quote button: purple like every other quote button, white label */
.pmc-scope [data-section="about"] a[aria-label="Get Free Quote"] .iw-1ha6aif { background-color: var(--pmc-violet) !important; }
.pmc-scope [data-section="about"] a[aria-label="Get Free Quote"] p.iw-text { color: #fff !important; --iw-text-color: #fff !important; }
.pmc-scope [data-section="about"] a[aria-label="Get Free Quote"]:hover .iw-1ha6aif { background-color: var(--pmc-violet-hover) !important; }
/* service cards: descriptions reserve the same height in a row, so the buttons line up */
@media (min-width: 810px) { .pmc-card-desc { min-height: 4.65em; } }
@media (min-width: 810px) and (max-width: 1199.98px) { .pmc-card-desc { min-height: 6.2em; } }

/* =====================================================================
   Containers and buttons on one system (measured 2026-11-11).
   Corners: the template uses 4px on images, cards, labels and buttons. Mine had drifted to 6, 8, 10 and 12px.
   Buttons: primary = purple, 44px tall, 4px corners, Geist 16px medium, arrow box (no arrow on phones, like the
   template's own phone buttons). Secondary = white outline, same size and type. Header call button = 14px on every size.
   ===================================================================== */
.pmc-review, .pmc-faq-card, .pmc-ghl-form, .pmc-ghl-form iframe, .pmc-rebate, .pmc-list li, .pmc-hero-bar__in, .pmc-tl__no, .pmc-dd, .pmc-dd a,
.pmc-cta, .pmc-steps li, [data-map-placeholder], .pmc-step-no { border-radius: 4px !important; }
.pmc-review, .pmc-faq-card { padding: 24px !important; }
.pmc-rebate { padding: 32px !important; }
@media (max-width: 809.98px) { .pmc-rebate { padding: 24px 18px !important; } .pmc-hero-bar__in { border-radius: 0 !important; } }

.pmc-arrow-btn, .pmc-btn { height: 44px !important; min-height: 44px; box-sizing: border-box; border-radius: 4px !important; font: 500 16px/24px "Geist", sans-serif !important; white-space: nowrap; }
.pmc-btn { display: inline-flex !important; align-items: center; padding: 0 18px !important; background: var(--pmc-violet); color: #fff !important; text-decoration: none; }
.pmc-btn--ghost { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85) !important; }
.pmc-btn--ghost:hover { background: rgba(255,255,255,.14) !important; }
a[data-pmc-call] .iw-text { font-size: 16px !important; font-weight: 500 !important; }
a[data-iw-name^="Button"] .iw-text { font-size: 16px !important; line-height: 24px !important; font-weight: 500 !important; }
.factory-call { font: 600 14px/1.2 "Geist", sans-serif !important; padding: 12px 16px !important; }
.pmc-faq-card__btns { gap: 12px; }
@media (max-width: 809.98px) {
  .pmc-arrow-btn { padding: 0 18px !important; gap: 0 !important; }
  .pmc-arrow-btn i { display: none !important; }
  a[data-iw-name^="Button"] { padding-left: 18px !important; padding-right: 18px !important; }
}
a[data-iw-name^="Button"] { min-height: 44px !important; box-sizing: border-box; }   /* every size, not only phones */

/* About lost its tag row (Andres, 2026-11-11): re-measured at rest, the rhythm only needed a tablet touch-up */
@media (max-width: 1199.98px) and (min-width: 810px) { .pmc-scope [data-section="services"] { padding-bottom: 32px !important; } }

/* =====================================================================
   Service pages, his page structure in our style (2026-11-11).
   Same system as the homepage: 50 / 30 / 15px side margins, 4px corners, Cabinet Grotesk headings,
   purple labels, 44px buttons, 200px between sections on desktop and tablet, about 110px on phones.
   ===================================================================== */
:root { --pmc-gut: 50px; --pmc-sec: 100px; --pmc-h3s: 40px; }
@media (max-width: 1199.98px) { :root { --pmc-gut: 30px; --pmc-h3s: 34px; } }
@media (max-width: 809.98px) { :root { --pmc-gut: 15px; --pmc-sec: 55px; --pmc-h3s: 28px; } }

.pmc-sp { display: block; width: 100%; color: #c9c2d6; font: 400 17px/1.65 "Geist", sans-serif; }
:is(.pmc-sp, .pmc-sp-body) > section { box-sizing: border-box; width: 100%; padding: var(--pmc-sec) var(--pmc-gut); margin: 0 auto; }
.pmc-sp p { margin: 0; }
.pmc-sp .pmc-eyebrow { margin: 0 !important; }
.pmc-sp-h { margin: 0 !important; color: #fff; font: 700 var(--pmc-h3s)/1.15 "Cabinet Grotesk", "Cabinet Grotesk Placeholder", sans-serif; letter-spacing: -.015em; }
.pmc-chip { display: inline-flex; align-items: center; gap: 8px; height: 37px; box-sizing: border-box; padding: 8px 12px; margin: 0; border-radius: 4px;
  background: var(--pmc-violet); color: #fff; font: 500 14px/21px "Cabinet Grotesk", "Geist", sans-serif; text-transform: uppercase; }
.pmc-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; flex: 0 0 auto; }

/* hero: same build as the homepage hero */
:is(.pmc-sp, .pmc-sp-body) > .pmc-sp-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 640px; height: 100vh; max-height: 900px;
  padding: 110px var(--pmc-gut) 150px; }
.pmc-sp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: brightness(.62) contrast(.85) saturate(.9); }
.pmc-sp-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,7,24,.86) 0%, rgba(12,7,24,.66) 38%, rgba(12,7,24,.32) 72%, rgba(12,7,24,.22) 100%),
              linear-gradient(180deg, rgba(12,7,24,.42) 0%, rgba(12,7,24,0) 26%, rgba(12,7,24,0) 62%, rgba(12,7,24,.72) 100%); }
.pmc-sp-hero__in { position: relative; z-index: 2; max-width: 860px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pmc-sp-hero__title { margin: 0; color: #fff; font: 800 62px/1.06 "Cabinet Grotesk", "Cabinet Grotesk Placeholder", sans-serif; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.pmc-sp-hero__sub { max-width: 640px; color: #e4deee; font-size: 20px; line-height: 1.55; }
.pmc-sp-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pmc-sp-hero__bar { position: absolute; z-index: 2; left: var(--pmc-gut); right: var(--pmc-gut); bottom: 30px; }

/* three text sections, photo alternating sides like his page */
.pmc-sp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pmc-sp-row.is-flip .pmc-sp-row__img { order: -1; }
.pmc-sp-row__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pmc-sp-row__text > p:not(.pmc-eyebrow) { max-width: 600px; }
.pmc-sp-row__text > .pmc-arrow-btn { margin-top: 8px; }
.pmc-sp-row__text .pmc-list, .pmc-sp-row__text .pmc-faqs { width: 100%; }
.pmc-sp-row__img { aspect-ratio: 1 / 1; max-height: 600px; border-radius: 4px; overflow: hidden; background: #141218; }
.pmc-sp-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* rebate block sits between the hero and the first section, like the brief asks */
:is(.pmc-sp, .pmc-sp-body) > .pmc-sp-rebate { padding-bottom: 0; }
.pmc-sp-rebate .pmc-rebate { max-width: 1000px; margin: 0 auto; }
.pmc-sp-rebate .pmc-rebate h2 { color: #fff; font: 700 var(--pmc-h3s)/1.15 "Cabinet Grotesk", "Geist", sans-serif; letter-spacing: -.015em; margin: 16px 0 14px !important; }
.pmc-sp-rebate .pmc-rebate p { margin: 0 0 16px; }
.pmc-sp-rebate .pmc-rebate .pmc-small { margin: 18px 0 0 !important; }
.pmc-sp-rebate + .pmc-sp-row { padding-top: calc(var(--pmc-sec) * 2); }

/* reviews: same wall as the homepage */
:is(.pmc-sp, .pmc-sp-body) > .pmc-wall { padding: var(--pmc-sec) var(--pmc-gut); }

/* the 3 step process with his three icons */
.pmc-sp-head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin-bottom: 48px; }
.pmc-sp-head h2 { margin: 0 !important; font-size: var(--pmc-h2) !important; }
.pmc-sp-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pmc-sp-steps__list li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: 4px; background: #141218; border: 1px solid rgba(255,255,255,.07); }
.pmc-sp-steps__icon { width: 72px; height: 72px; object-fit: contain; filter: invert(1); opacity: .92; margin-bottom: 6px; }
.pmc-sp-steps__no { color: var(--pmc-lilac); font: 600 14px/1 "Geist", sans-serif; letter-spacing: .06em; }
.pmc-sp-steps__list h3 { margin: 0; color: #fff; font: 600 24px/1.2 "Cabinet Grotesk", "Geist", sans-serif; }
.pmc-sp-steps__list p { flex: 1 1 auto; margin: 0 0 8px; font-size: 16px; }

/* request a quote, with the form */
.pmc-sp-quote { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.pmc-sp-quote__info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pmc-sp-quote__line a { color: #fff !important; font: 500 22px/1.4 "Geist", sans-serif; text-decoration: none; overflow-wrap: anywhere; }
.pmc-sp-quote__line a:hover { color: var(--pmc-lilac) !important; }
.pmc-sp-quote .pmc-licence { margin: 4px 0 0 !important; }

@media (max-width: 1199.98px) {
  .pmc-sp-hero__title { font-size: 46px; }
  .pmc-sp-row, .pmc-sp-quote { gap: 40px; }
  .pmc-sp-steps__list li { padding: 22px; }
}
@media (max-width: 809.98px) {
  .pmc-sp { font-size: 16px; }
  :is(.pmc-sp, .pmc-sp-body) > .pmc-sp-hero { height: auto; min-height: 620px; max-height: none; padding: 120px var(--pmc-gut) 48px; justify-content: center; }
  .pmc-sp-hero__title { font-size: 25px; line-height: 1.15; }
  .pmc-sp-hero__sub { font-size: 16.5px; }
  .pmc-sp-hero__bar { position: static; margin: 32px calc(-1 * var(--pmc-gut)) -48px; }
  .pmc-sp-row, .pmc-sp-quote, .pmc-sp-steps__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pmc-sp-row.is-flip .pmc-sp-row__img { order: 0; }
  .pmc-sp-row__img { order: -1; max-height: none; }
  .pmc-sp-head { margin-bottom: 32px; }
  .pmc-sp-steps__icon { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: no-preference) {
  .pmc-sp-hero__in > * { animation: pmc-rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .pmc-sp-hero__in > :nth-child(2) { animation-delay: .1s; } .pmc-sp-hero__in > :nth-child(3) { animation-delay: .22s; } .pmc-sp-hero__in > :nth-child(4) { animation-delay: .34s; }
  .pmc-sp-hero__img { animation: pmc-settle 9s ease-out both; }
  .pmc-sp-hero__bar .pmc-hero-bar__in { animation: pmc-rise .8s .5s cubic-bezier(.2,.7,.2,1) both; }
  .pmc-sp-row__img img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .pmc-sp-row__img:hover img { transform: scale(1.04); }
  .pmc-sp-steps__list li { transition: transform .3s ease, border-color .3s ease; }
  .pmc-sp-steps__list li:hover { transform: translateY(-4px); border-color: rgba(195,168,245,.35); }
}
/* service pages: black page like the homepage (the template's inner pages are light underneath), homepage trust bar */
.pmc-sp { background: #000; }
html:has(.pmc-sp) body, .pmc-sp-page { background: #000; }
.pmc-sp-hero .pmc-sp-hero__bar { position: absolute; margin: 0; padding: 0; left: var(--pmc-gut); right: var(--pmc-gut); bottom: 30px; width: auto; }
@media (max-width: 809.98px) {
  .pmc-sp-hero .pmc-sp-hero__bar { position: static; margin: 32px calc(-1 * var(--pmc-gut)) -48px; }
}

/* =====================================================================
   Lists turned into designed sections (Andres, 2026-11-11), ported from 21st.dev:
   Feature List Showcase (felipemenezes098) -> .pmc-show, Feature Grid Spotlight Cards (mohammadshehadeh) -> .pmc-why,
   and the rebate as three cards that lead with the amount.
   ===================================================================== */
/* feature list + photo */
.pmc-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.pmc-show__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pmc-show__intro { max-width: 560px; }
.pmc-show__list { list-style: none; margin: 4px 0 8px; padding: 0; width: 100%; border-top: 1px solid rgba(255,255,255,.12); }
.pmc-show__item { border-bottom: 1px solid rgba(255,255,255,.12); }
.pmc-show__btn { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 18px 0; cursor: pointer; }
.pmc-show__btn:focus-visible { outline: 2px solid var(--pmc-lilac); outline-offset: 2px; border-radius: 4px; }
.pmc-show__no { color: #8f87a3; font: 600 14px/1 "Geist", sans-serif; letter-spacing: .06em; transition: color .3s ease; }
.pmc-show__title { color: #cfc8dc; font: 600 22px/1.25 "Cabinet Grotesk", "Geist", sans-serif; transition: color .3s ease; }
.pmc-show__plus { position: relative; width: 14px; height: 14px; justify-self: end; }
.pmc-show__plus::before, .pmc-show__plus::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--pmc-lilac); transition: transform .3s ease; }
.pmc-show__plus::after { transform: rotate(90deg); }
.pmc-show__desc { margin: 0 !important; padding: 0 36px 20px 56px; color: #c9c2d6; }
.pmc-show__item.is-on .pmc-show__no { color: var(--pmc-lilac); }
.pmc-show__item.is-on .pmc-show__title { color: #fff; }
.pmc-show__item.is-on .pmc-show__plus::after { transform: rotate(0); }
.pmc-show__media { position: relative; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; background: #141218; }
.pmc-show__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pmc-show__img.is-on { opacity: 1; transform: none; }
.pmc-show__count { position: absolute; right: 16px; bottom: 16px; padding: 7px 10px; border-radius: 4px; background: rgba(12,7,24,.72); color: #cfc8dc; font: 500 13px/1 "Geist", sans-serif; backdrop-filter: blur(6px); }
.pmc-show__count b { color: #fff; font-weight: 600; }
/* until the script runs every description is open, so nothing is hidden without it */
.pmc-show--live .pmc-show__desc { display: grid; grid-template-rows: 0fr; padding-bottom: 0; transition: grid-template-rows .35s ease, padding .35s ease; overflow: hidden; }
.pmc-show--live .pmc-show__desc > span { min-height: 0; }
.pmc-show--live .pmc-show__item.is-on .pmc-show__desc { grid-template-rows: 1fr; padding-bottom: 20px; }

/* why cards */
.pmc-why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pmc-why__card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; border-radius: 4px; background: #141218; border: 1px solid rgba(255,255,255,.08); }
.pmc-why__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 4px; background: rgba(123,75,209,.18); color: var(--pmc-lilac); }
.pmc-why__card h3 { margin: 0; color: #fff; font: 600 24px/1.2 "Cabinet Grotesk", "Geist", sans-serif; }
.pmc-why__card p { margin: 0; font-size: 16px; }
.pmc-why__mark { position: absolute; width: 14px; height: 14px; pointer-events: none; color: rgba(195,168,245,.6); }
.pmc-why__mark::before, .pmc-why__mark::after { content: ""; position: absolute; background: currentColor; }
.pmc-why__mark::before { left: 6px; top: 0; width: 1.5px; height: 14px; }
.pmc-why__mark::after { top: 6px; left: 0; height: 1.5px; width: 14px; }
.pmc-why__mark--a { left: -7px; top: -7px; }
.pmc-why__mark--b { right: -7px; bottom: -7px; }

/* rebate cards */
.pmc-rebate__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 8px 0 22px; }
.pmc-rebate__card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 4px; background: rgba(0,0,0,.3); border: 1px solid rgba(195,168,245,.16); }
.pmc-rebate__amt { margin: 0 0 2px !important; color: var(--pmc-lilac) !important; font: 700 30px/1.1 "Cabinet Grotesk", "Geist", sans-serif !important; letter-spacing: -.01em; }
.pmc-rebate__card h3 { margin: 0; color: #fff; font: 600 18px/1.3 "Geist", sans-serif; }
.pmc-rebate__card p:not(.pmc-rebate__amt) { margin: 0 !important; font-size: 15px; line-height: 1.6; }
.pmc-sp-rebate .pmc-rebate { max-width: none; }

@media (max-width: 1199.98px) { .pmc-show { gap: 40px; } .pmc-why__card { padding: 26px 22px; } .pmc-rebate__amt { font-size: 26px !important; } }
@media (max-width: 1099px) { .pmc-rebate__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 809.98px) {
  .pmc-show, .pmc-why__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pmc-show__media { order: -1; }
  .pmc-show__title { font-size: 19px; }
  .pmc-show__desc { padding: 0 8px 18px 56px; }
  .pmc-why__grid { gap: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pmc-why__card { transition: transform .3s ease, border-color .3s ease; }
  .pmc-why__card:hover { transform: translateY(-4px); border-color: rgba(195,168,245,.35); }
  .pmc-rebate__card { transition: border-color .3s ease; }
  .pmc-rebate__card:hover { border-color: rgba(195,168,245,.4); }
}
/* feature list on phones: the photo opens inside the item you tap, so words and picture stay together */
.pmc-show__thumb { display: none; }
@media (max-width: 809.98px) {
  .pmc-show__media { display: none; }
  .pmc-show__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin: 2px 0 14px; }
  .pmc-show__desc { padding: 0 0 18px 56px; }
}

/* ---- Codex round 3 fixes ---- */
/* 5. timeline text always readable and aligned; only the line and the number animate */
.pmc-tl--live .pmc-tl__text { opacity: 1 !important; transform: none !important; }
.pmc-tl--live .pmc-tl__step:not(.is-on) .pmc-tl__text h3 { color: #d9d2e6 !important; }
.pmc-tl__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--pmc-lilac) !important; font: 600 15px/1.4 "Geist", sans-serif; text-decoration: none; }
.pmc-tl__link:hover { color: #fff !important; }
.pmc-tl__link span { transition: transform .25s ease; }
.pmc-tl__link:hover span { transform: translateX(3px); }
/* 8. desktop sticky header: the logo keeps the same 50px line as the page when the bar appears */
@media (min-width: 1200px) { [data-site-header].site-header--scrolled { --173lbr3: 16px 42px 0px 42px !important; } }
/* 10. homepage hero: the label is now a paragraph, the headline the H1 */
[data-iw-name="Hero"] [name="Eyebrow Label Container"] p.iw-text { margin: 0; }
/* 12. phone hero: same space above and below the text block */
#mobile-hero .iw-xm6wvj { top: 25px; }

/* ---- Codex round 4 fixes ---- */
/* 3. scroll reveals move content into place but never hide it: text, reviews and forms are always readable */
@media (prefers-reduced-motion: no-preference) {
  .pmc-rv { opacity: 1 !important; transform: translateY(26px) !important; }
}
/* 2. reduced motion: feature list still opens and closes, just without the slide */
@media (prefers-reduced-motion: reduce) {
  .pmc-show--live .pmc-show__desc, .pmc-show__img { transition: none !important; }
}
/* 7. NBN photos are dark: lift them a little (same photos) */
.pmc-sp-row__img img[src*="/nbn-"] { filter: brightness(1.28) contrast(1.05); }

/* =====================================================================
   One frame for every page (Andres, 2026-11-12: "make sure that all the pages have the same containers").
   The homepage is the reference. Service, contact, legal, thank-you and 404 pages now share:
   its section headings, its contact section (lifted from the homepage at build time), its thin background
   lines, and content that runs exactly from the left margin to the right margin.
   ===================================================================== */
/* section headings: the homepage's style (54 / 43 / 32px, uppercase) */
.pmc-sp-h { font: 700 var(--pmc-h2)/1.2 "Cabinet Grotesk", "Cabinet Grotesk Placeholder", sans-serif !important; letter-spacing: -.02em !important; text-transform: uppercase; }
.pmc-sp-head h2 { text-align: center; text-wrap: balance; }
/* text-and-photo rows: the photo fills its half right up to the margin */
.pmc-sp-row__img { aspect-ratio: 4 / 3; max-height: none; width: 100%; }
/* the homepage's background lines: 7 on desktop, 6 on tablet, 5 on phones, 30% strength, inside the side margins */
.pmc-sp-body { position: relative; isolation: isolate; }
.pmc-lines { position: absolute; z-index: -1; inset: 0 var(--pmc-gut); display: flex; justify-content: space-between; opacity: .3; pointer-events: none; }
.pmc-lines i { width: 1px; height: 100%; background: var(--token-c85232d8-beec-48e3-8059-dba98b5651ba, #5c544c); }
@media (max-width: 1199.98px) { .pmc-lines i:nth-child(2) { display: none; } }
@media (max-width: 809.98px) { .pmc-lines i:nth-child(3) { display: none; } }
/* hero options: a shorter hero for the legal pages, and one with no trust bar */
:is(.pmc-sp, .pmc-sp-body) > .pmc-sp-hero--short { height: auto; min-height: 560px; max-height: none; }
:is(.pmc-sp, .pmc-sp-body) > .pmc-sp-hero--nobar { padding-bottom: 110px; }
.pmc-sp-hero h1.pmc-sp-hero__title { margin: 0; }
p.pmc-chip { margin: 0; }
/* the homepage's contact section on the other pages */
:is(.pmc-sp, .pmc-sp-body) > [data-section="contact"] { padding-bottom: var(--pmc-sec); }
/* privacy policy and terms: his text in a readable column that starts at the page margin */
:is(.pmc-sp, .pmc-sp-body) > .pmc-legal { max-width: calc(820px + 2 * var(--pmc-gut)); margin: 0; }
.pmc-legal h2, .pmc-legal h3 { margin: 40px 0 12px !important; color: #fff; font: 700 26px/1.25 "Cabinet Grotesk", "Geist", sans-serif; letter-spacing: -.01em; text-transform: none; }
.pmc-legal h3 { font-size: 20px; }
.pmc-legal > :first-child { margin-top: 0 !important; }
.pmc-legal p { margin: 0 0 14px !important; }
@media (max-width: 809.98px) { .pmc-legal h2 { font-size: 22px; } .pmc-legal h3 { font-size: 18px; } }

/* Hero and first section placed exactly like the homepage (measured 2026-11-12: homepage hero 900 / 800 / 620px tall,
   first section's content 229 / 209 / 179px below the hero; the other pages had 100 to 380px). */
:root { --pmc-first: 203px; }
@media (max-width: 1199.98px) { :root { --pmc-first: 156px; } }
@media (max-width: 809.98px) { :root { --pmc-first: 153px; } }
.pmc-sp-hero + .pmc-sp-body > .pmc-lines + section, .pmc-sp-hero + .pmc-legal { padding-top: var(--pmc-first) !important; }
.pmc-sp-hero + [data-section="contact"] { padding-top: 125px !important; }
.pmc-sp-body + [data-section="contact"] { padding-top: 22px !important; }      /* 200px after the last section, like the homepage */
.pmc-sp > [data-section="contact"]:not(:last-child) { padding-bottom: 0; }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .pmc-sp > .pmc-sp-hero:not(.pmc-sp-hero--short) { height: 800px; min-height: 0; max-height: none; }
  .pmc-sp-hero + [data-section="contact"] { padding-top: 78px !important; }
}
@media (max-width: 809.98px) {
  /* homepage phone hero: 620px of photo with the text centred under the header, trust bar underneath the photo */
  .pmc-sp > .pmc-sp-hero { display: block; height: auto; min-height: 0; padding: 0; }
  .pmc-sp-hero { --pmc-hero-h: 650px; }          /* the page starts 30px under the top edge here, so 620px shows, like the homepage */
  .pmc-sp-hero--short { --pmc-hero-h: 590px; }
  .pmc-sp-hero .pmc-sp-hero__in { min-height: var(--pmc-hero-h); box-sizing: border-box; padding: 160px var(--pmc-gut) 8px; justify-content: center; max-width: none; }
  .pmc-sp-hero__img, .pmc-sp-hero::after { bottom: auto !important; height: var(--pmc-hero-h) !important; }
  .pmc-sp-hero .pmc-sp-hero__bar { position: relative; margin: 0; }
  .pmc-sp-hero + [data-section="contact"] { padding-top: 95px !important; }
  .pmc-sp-body + [data-section="contact"] { padding-top: 0 !important; }
}
/* Contact page: reviews 200px under the form (110px on phones), like every other gap */
[data-section="contact"] + .pmc-sp-body > .pmc-lines + section { padding-top: 80px !important; }
@media (min-width: 810px) and (max-width: 1199.98px) { [data-section="contact"] + .pmc-sp-body > .pmc-lines + section { padding-top: 120px !important; } }
@media (max-width: 809.98px) { [data-section="contact"] + .pmc-sp-body > .pmc-lines + section { padding-top: 30px !important; } }

/* Wide screens (Andres, 2026-11-12, screenshots at ~2200px): the homepage keeps its content in a 1500px column,
   the other pages ran to the window edge. One column for every page and every part: content, trust bar, lines. */
@media (min-width: 1200px) {
  :root { --pmc-gut: max(50px, calc((100% - 1500px) / 2)); }
  .pmc-hero-bar { padding-left: max(50px, calc((100% - 1500px) / 2)); padding-right: max(50px, calc((100% - 1500px) / 2)); }
}
/* homepage: its top block drew the background lines 50px inside the content edge, its reviews block on the edge */
.iw-15lig38 { left: 0 !important; right: 0 !important; }
/* homepage FAQs and contact were capped at 1340px, the rest of the page at 1500px: one column for all */
.client-section-inner, .iw-nshnh.client-contact { max-width: 1500px !important; }
/* long hero labels (the intercom page) wrap onto two lines on phones: the purple box grows with them */
.pmc-chip { height: auto; min-height: 37px; }
/* phone: the trust bar under the photo runs edge to edge like the homepage's (it kept a 15px left offset and ran off the right) */
@media (max-width: 809.98px) {
  .pmc-sp-hero .pmc-sp-hero__bar { left: 0 !important; right: 0 !important; width: 100% !important; padding: 0 !important; }
}
/* hero label written like the homepage's ("CCTV In Perth", not all capitals) */
.pmc-sp-hero .pmc-chip { text-transform: none; }
/* phone tap targets at least 44px tall: footer links, social links, the homepage's step links */
@media (max-width: 809.98px) {
  .pmc-social a, .pmc-foot-list a, a.iw-styles-preset-kzr73p, .pmc-tl__link { display: inline-flex !important; align-items: center; min-height: 44px; box-sizing: border-box; }
}
/* intercom "What We Install": one short paragraph per service, name in bold (was a click-to-open list) */
.pmc-sp-row__text > p.pmc-para { margin-top: -6px; }
.pmc-para strong { color: #fff; font-weight: 600; }
/* email and phone in the contact card and footer are links now: same look as before, lilac on hover */
a.pmc-plain-link { color: inherit !important; text-decoration: none; }
a.pmc-plain-link:hover { color: var(--pmc-lilac) !important; }

/* Phone and tablet header (Andres, 2026-11-12: "fix this make it even"): menu button the same 44px height as the
   call button, both centred on the bar, 8px apart, 8px in from the bar's edge like the logo. */
.iw-SQEA9.iw-v-1u6l69a .iw-1lw5zz8, .iw-SQEA9.iw-v-esagj7 .iw-1lw5zz8 { padding-right: 60px !important; }
.iw-SQEA9.iw-v-1u6l69a .iw-1spr5x3-container, .iw-SQEA9.iw-v-esagj7 .iw-1spr5x3-container { top: calc(50% - 22px) !important; }
.iw-SQEA9.iw-v-1u6l69a .iw-1yifhsf, .iw-SQEA9.iw-v-esagj7 .iw-1yifhsf { width: 44px !important; height: 44px !important; }