/*
 * Tier 1 Services – October 2026 visual refresh
 * Inspired by the editorial photography and confidence of professional
 * security installers; original T1 navy, blue, green, services and flow retained.
 * This stylesheet loads AFTER the existing source site's embedded rules.
 */
:root {
  --refresh-navy: #052d52;
  --refresh-deep: #031f38;
  --refresh-blue: #0567af;
  --refresh-green: #069c62;
  --refresh-mist: #f3f8fb;
  --refresh-ink: #153048;
  --refresh-muted: #52687a;
  --refresh-border: #e0e9f0;
  --refresh-shadow: 0 20px 65px rgba(3,31,56,.10);
}
html { scroll-padding-top:100px; }
body { color:var(--refresh-ink); }
*:focus-visible { outline:3px solid #07a769; outline-offset:3px; }
img { max-width:100%; }
.container { width:min(100% - 48px, 1260px); }
.section { padding:102px 0; }
.eyebrow { letter-spacing:.13em; font-weight:800; }
/* Navigation: same familiar color family and links, more breathing room. */
.site-header {
  background:#f7fafc !important;
  border-bottom:1px solid rgba(3,31,56,.10) !important;
  box-shadow:0 4px 22px rgba(3,31,56,.05) !important;
  position:sticky !important;
  top:0;
  z-index:80 !important;
}
.nav-wrap { min-height:92px; height:auto; gap:22px; }
.site-header .brand { display:flex; align-items:center; flex:0 0 auto; }
.site-header .brand img {
  width:auto !important; height:72px !important; max-width:116px !important;
  object-fit:contain !important; mix-blend-mode:normal !important;
}
.site-nav { gap:clamp(10px,1.65vw,24px); }
.site-nav a { font-size:.9rem; font-weight:750; color:var(--refresh-navy); }
.site-nav a:hover { color:var(--refresh-green); }
.nav-cta { font-size:.84rem !important; padding:13px 17px !important; white-space:nowrap; }
.btn { border-radius:9px !important; font-weight:800; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform:translateY(-2px); }
/* Hero: visually grounded in installation photography. */
.hero {
  background:linear-gradient(115deg,rgba(2,30,56,.97) 0%,rgba(5,53,94,.95) 65%,rgba(2,33,58,.89) 100%) !important;
  padding:78px 0 82px !important;
  overflow:clip;
  position:relative;
}
.hero:before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 75% 22%,rgba(24,125,180,.18),transparent 48%); }
.hero .container { position:relative; }
.hero-grid {
  display:grid !important; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr) !important;
  gap:clamp(36px,4.2vw,76px) !important; align-items:center !important;
}
.hero-copy { max-width:720px; }
.hero .eyebrow { font-size:.73rem; color:#91f4b8 !important; }
.hero h1 {
  color:#fff !important; max-width:680px;
  font-size:clamp(2.4rem,4vw,4.05rem) !important;
  line-height:1.075 !important; letter-spacing:-.055em !important;
  text-wrap:balance; margin:19px 0 22px !important;
  text-shadow:none !important;
}
.hero-lede { color:#dbe9f3 !important; font-size:clamp(.98rem,1.24vw,1.13rem) !important;
  line-height:1.8 !important; max-width:625px; text-shadow:none !important; }
.hero-actions { gap:14px !important; margin-top:28px; flex-wrap:wrap !important; }
.hero-actions .booking-top-cta { padding:15px 19px; box-shadow:0 8px 24px rgba(0,0,0,.13); }
.hero-actions .text-link { color:#ebf6fc !important; font-size:.89rem; }
.trust-list { margin-top:26px !important; flex-wrap:wrap !important; gap:9px 14px !important; }
.trust-list li { border:1px solid rgba(255,255,255,.15); border-radius:99px; color:#e4f0f8;
 background:rgba(255,255,255,.05); padding:7px 11px; font-size:.78rem; }
.hero-visual { position:relative; min-width:0; }
.hero-photo { position:relative; overflow:hidden; isolation:isolate;
 border-radius:20px; min-height:510px; box-shadow:0 36px 75px rgba(0,14,30,.37);
 border:1px solid rgba(255,255,255,.22); background:var(--refresh-deep); }
.hero-photo:after { content:""; position:absolute; inset:32% 0 0;
 background:linear-gradient(180deg,transparent 10%,rgba(1,27,48,.9) 100%); pointer-events:none; }
.hero-photo img { width:100%;height:100%;min-height:510px;position:absolute;inset:0;object-fit:cover;
 object-position:45% 40%;display:block; }
.hero-photo-label { position:absolute;left:34px;right:30px;bottom:30px;z-index:1;color:white;
 display:flex;flex-direction:column;gap:5px; }
.hero-photo-mark { font-size:.68rem;letter-spacing:.19em;color:#9bf1bf;font-weight:850; }
.hero-photo-label strong { font-size:clamp(1.4rem,2.3vw,2.25rem);line-height:1.11;
 max-width:310px;letter-spacing:-.045em;white-space:pre-line; }
.hero-photo-label small { color:#d5e6ee;letter-spacing:.045em; }
.hero-visual .hero-panel { display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
 padding:11px 0 0 !important; border:0 !important; background:transparent !important;
 box-shadow:none !important; max-width:none !important; }
.hero-visual .hero-panel .signal { display:flex !important;flex-direction:column !important;
 gap:6px !important; min-width:0; margin:0 !important; padding:12px 13px !important;
 background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.13);border-radius:12px; }
.hero-visual .hero-panel .signal>span { display:none !important; }
.hero-visual .hero-panel .signal strong { display:block;color:white !important;font-size:.82rem; }
.hero-visual .hero-panel .signal small { color:#cbdce8 !important;font-size:.68rem;line-height:1.5 !important; }
.hero-visual .hero-panel .panel-mark { display:none !important; }
/* Business categories strip */
.audience-band { background:#eaf3f8 !important; border-color:#dce6ef !important; }
.audience-grid { padding:10px 0; align-items:center; }
.audience-grid>p { color:var(--refresh-blue) !important; }
.audience-grid strong { color:var(--refresh-navy) !important; text-shadow:none !important; }
.audience-grid span { color:var(--refresh-muted) !important; text-shadow:none !important; }
.audience-grid>div { border-left-color:#cfdae4 !important; }
/* Service category photography and clean, readable service cards */
.services-section { background:#f7fafc !important; }
.section-heading { gap:45px !important; }
.section-heading h2 { color:var(--refresh-navy) !important; text-shadow:none !important; max-width:780px; }
.section-heading>p { color:var(--refresh-muted) !important; text-shadow:none !important; }
.section-heading .eyebrow { color:var(--refresh-green) !important; text-shadow:none !important; }
.services-section .service-group { margin-top:60px !important; }
.services-section .service-group:first-of-type { margin-top:42px !important; }
.service-feature {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.93fr);
  min-height:290px; margin-bottom:24px; overflow:hidden; border-radius:20px;
  background:var(--refresh-navy);box-shadow:0 15px 42px rgba(3,31,56,.15);
}
.service-feature .service-group-head { display:flex !important;flex-direction:column !important;
 justify-content:center;align-items:flex-start !important; gap:15px !important;
 margin:0 !important;padding:clamp(25px,3.6vw,54px) !important; }
.service-feature .service-group-head > div { max-width:none !important; }
.services-section .service-feature .service-group-head h3 { color:#fff !important;
 text-shadow:none !important;font-size:clamp(1.85rem,3vw,2.8rem) !important;
 line-height:1.16 !important; letter-spacing:-.035em; margin-top:4px; }
.services-section .service-feature .service-group-head p,
.services-section .service-feature .service-group-head>p { color:#dbe9f1 !important;
 text-shadow:none !important;font-weight:400 !important;
 line-height:1.7 !important;margin:0 !important; max-width:550px; }
.services-section .service-feature .service-badge { color:#b2f1c9 !important;background:rgba(118,216,154,.12) !important;
 border-color:rgba(130,225,160,.24) !important;margin-bottom:9px !important; }
.service-feature-media { position:relative;overflow:hidden;min-height:290px; }
.service-feature-media:after { content:"";position:absolute;inset:25% 0 0;
 background:linear-gradient(180deg,transparent,rgba(3,31,56,.78)); }
.service-feature-media img { display:block;width:100%;height:100%;position:absolute;inset:0;
 object-fit:cover;object-position:center 48%;transition:transform .7s ease; }
.service-feature:hover .service-feature-media img { transform:scale(1.04); }
.service-feature-label { position:absolute;z-index:2;bottom:23px;left:26px;right:24px;display:flex;
 flex-direction:column;gap:5px; }
.service-feature-label span { font-size:.68rem;color:#abf1ce;font-weight:900;letter-spacing:.13em; }
.service-feature-label strong { color:white;font-size:1.13rem;letter-spacing:-.02em;
 text-shadow:0 1px 9px rgba(0,0,0,.3); }
.installation-grid { gap:17px !important; }
.installation-grid .modern-service-card,
.advisory-grid .modern-service-card,
.advisory-grid .modern-service-card.brand-blue,
.advisory-grid .modern-service-card.brand-green {
  background:#fff !important; background-image:none !important; backdrop-filter:none !important;
  color:var(--refresh-ink) !important; border:1px solid var(--refresh-border) !important;
  border-radius:15px !important;box-shadow:0 7px 24px rgba(3,31,56,.052) !important;
  padding:28px !important; min-height:0 !important; overflow:visible !important;
  transition:transform .2s ease,box-shadow .2s ease !important;
}
.installation-grid .modern-service-card:hover {
  transform:translateY(-5px);box-shadow:0 20px 42px rgba(3,31,56,.1) !important;
}
.installation-grid .modern-service-card.brand-blue { border-top:4px solid var(--refresh-blue) !important; }
.installation-grid .modern-service-card.brand-green { border-top:4px solid var(--refresh-green) !important; }
.installation-grid .modern-service-card .service-icon { background:rgba(5,103,175,.09) !important;
 border:0 !important;color:var(--refresh-blue) !important;font-size:.9rem !important;
 font-weight:900 !important;width:42px !important;height:42px !important;margin-bottom:17px !important;
 letter-spacing:.04em; box-shadow:none !important; }
.installation-grid .modern-service-card.brand-green .service-icon { background:rgba(6,156,98,.09) !important;
 color:var(--refresh-green) !important; }
.installation-grid .modern-service-card h3,
.advisory-grid .modern-service-card h3 { color:var(--refresh-navy) !important;
 text-shadow:none !important;font-size:1.2rem !important;line-height:1.28;letter-spacing:-.018em; }
.installation-grid .modern-service-card p,
.installation-grid .modern-service-card li,
.advisory-grid .modern-service-card p,
.advisory-grid .modern-service-card li {
 color:var(--refresh-muted) !important;text-shadow:none !important;
 font-size:.87rem;line-height:1.65; }
.installation-grid .modern-service-card>p { margin-bottom:15px !important; }
.installation-grid .modern-service-card ul { border-top:1px solid #e7edf2 !important; }
.installation-grid .modern-service-card li::before { background:#e8f5ee !important;
 color:var(--refresh-green) !important; }
.services-section>.container>a.btn { margin-top:32px; }
/* Approach: replace generic graphic with real-work photographic look. */
.approach-section { background:#eaf3f8 !important; }
.approach-grid { gap:clamp(35px,5vw,80px) !important; }
.approach-image { min-height:480px !important;border-radius:18px !important;
 box-shadow:var(--refresh-shadow); }
.approach-image>img.approach-image-img {
 width:100%;height:100%;min-height:480px;position:absolute;inset:0;object-fit:cover;
 object-position:47% 52%;border-radius:18px; }
.approach-image:after {content:"";position:absolute;inset:40% 0 0;z-index:1;
 background:linear-gradient(180deg,transparent,rgba(1,27,48,.45));pointer-events:none; }
.approach-image .image-note { z-index:3 !important;left:21px !important;bottom:21px !important;
 right:21px !important;max-width:380px;padding:19px 23px !important;
 border-radius:11px;box-shadow:0 8px 28px rgba(0,0,0,.15); }
.approach-copy h2 { color:var(--refresh-navy) !important;text-shadow:none !important; }
.approach-copy .eyebrow { color:var(--refresh-green) !important;text-shadow:none !important; }
.approach-copy>p:not(.eyebrow) { color:var(--refresh-muted) !important;text-shadow:none !important; }
.steps li { border-color:#d5e2eb !important; }
.steps h3 { color:var(--refresh-navy) !important; text-shadow:none !important; }
.steps p { color:var(--refresh-muted) !important;text-shadow:none !important; }
/* Why T1: restore premium dark-blue contrast. */
.why-section { background:linear-gradient(120deg,#052d52 0%,#073a60 100%) !important; }
.why-grid { gap:clamp(30px,4.5vw,75px) !important; }
.why-section h2 { color:#fff !important; }
.why-grid>div>p:not(.eyebrow) { color:#c9dbe8 !important;font-size:1rem;line-height:1.8; }
.why-points { gap:10px; }
.why-points article { background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1) !important;
 border-radius:12px; padding:24px !important; }
.why-points strong {color:white !important;}
.why-points p {color:#c1d4e1 !important;line-height:1.65;}
/* Contact: simple premium booking card. HighLevel form embed remains untouched. */
.contact-section {background:#f7fafc !important;}
.contact-copy h2 {color:var(--refresh-navy) !important;text-shadow:none !important;}
.contact-section .eyebrow {color:var(--refresh-green) !important;text-shadow:none !important;}
.contact-intro-copy>p:not(.eyebrow),
.contact-copy>p:not(.eyebrow):not(.location) {color:var(--refresh-muted) !important;text-shadow:none !important;}
.contact-details span {color:var(--refresh-muted) !important;text-shadow:none !important;}
.contact-details strong {color:var(--refresh-navy) !important;text-shadow:none !important;}
.contact-details a { border-color:var(--refresh-border) !important; }
.contact-intro-details {border-color:var(--refresh-border) !important;}
.location {color:var(--refresh-green) !important;text-shadow:none !important;}
.contact-options-grid {display:block !important;max-width:820px;margin:0 auto;}
.booking-card {border-radius:20px !important;padding:26px !important;
 border:1px solid var(--refresh-border) !important;overflow:hidden;
 box-shadow:var(--refresh-shadow) !important; display:grid;
 grid-template-columns:minmax(0,1fr) minmax(190px,.85fr); align-items:center;
 gap:12px 28px; background:#fff !important; }
.booking-card .form-head {grid-column:1;align-self:end;margin:0 !important;}
.booking-card .form-head span {font-size:clamp(1.3rem,2.5vw,1.65rem);letter-spacing:-.02em;}
.booking-card>p {grid-column:1;margin:0 !important;}
.booking-card .booking-link-btn {grid-column:1;justify-self:start;margin:8px 0 0 !important;}
.booking-image-wrap {grid-column:2;grid-row:1 / span 3;margin:0 !important;
 border-radius:14px !important;height:245px;border:0 !important;}
.booking-image {height:100% !important;object-fit:cover;object-position:center;}
/* Footnote and nonblocking cookie notice. */
.site-footer {background:#031f38 !important;}
.footer-grid {gap:35px !important;}
.footer-logo-crop {width:135px !important;height:90px !important;background:transparent !important;overflow:visible !important;}
.footer-grid .footer-logo-crop img { position:static !important;width:125px !important;
 max-width:125px !important;height:90px !important;object-fit:contain !important;
 filter:none !important; mix-blend-mode:normal !important; }
.footer-action { margin-top:55px; border-top:1px solid rgba(255,255,255,.13);
 padding:28px 0;display:flex;justify-content:space-between;align-items:center;gap:18px; }
.footer-action-kicker {color:#8df0b4;letter-spacing:.16em;font-size:.68rem;font-weight:850;}
.footer-action h2 {color:#fff;font-size:1.55rem;letter-spacing:-.025em;margin:7px 0;}
.footer-action p {color:#c1d5df;margin:0;}
.footer-action .btn {white-space:nowrap;}
.footer-bottom {margin-top:0 !important;}
.footer-license {font-size:.75rem;color:#aac4cf;padding-top:13px;}
.cookie-note[hidden] {display:none !important;}
.cookie-note {position:fixed;z-index:1000;bottom:14px;left:14px;right:14px;
 max-width:530px;display:flex;align-items:center;gap:20px;padding:14px 17px;
 background:#fff;border:1px solid #d9e5eb;border-radius:10px;
 box-shadow:0 12px 45px rgba(3,31,56,.22);color:var(--refresh-ink);}
.cookie-note p {margin:0;font-size:.77rem;line-height:1.5;}
.cookie-note a {color:var(--refresh-blue);font-weight:750;}
.cookie-note button {appearance:none;border:0;color:var(--refresh-navy);
 background:#eaf3f8;border-radius:8px;width:28px;height:28px;font-size:1.4rem;
 cursor:pointer;flex-shrink:0;line-height:1;}
/* Responsive: desktop, tablet, phone. */
@media (max-width:1050px) {
  .hero-grid {grid-template-columns:minmax(0,1fr) minmax(0,.9fr) !important;gap:30px !important;}
  .hero h1 {font-size:clamp(2.3rem,4vw,3.35rem) !important;}
  .hero-photo,.hero-photo img {min-height:420px !important;}
  .nav-wrap {gap:10px;}
  .site-nav {gap:12px;}
  .nav-cta {padding:11px 12px !important;font-size:.72rem !important;}
}
@media (max-width:900px) {
  .section {padding:75px 0 !important;}
  .hero-grid {grid-template-columns:1fr !important;gap:38px !important;}
  .hero-copy {max-width:780px;}
  .hero h1 {font-size:clamp(2.5rem,5.5vw,3.6rem) !important;}
  .hero-visual {max-width:750px;}
  .hero-photo,.hero-photo img {min-height:390px !important;}
  .service-feature {min-height:0;grid-template-columns:1fr 1fr;}
  .service-feature-media {min-height:285px;}
  .service-feature .service-group-head {padding:27px !important;}
  .booking-contact-intro {gap:28px;}
  .why-points article {padding:20px !important;}
}
@media (max-width:680px) {
  .container {width:min(100% - 30px,1260px) !important;}
  .nav-wrap {min-height:72px;}
  .site-header .brand img {max-width:92px !important;height:62px !important;}
  .menu-toggle {display:flex !important;}
  .site-nav {top:72px;gap:0;}
  .site-nav a {padding:12px 8px !important;}
  .hero {padding:46px 0 55px !important;}
  .hero h1 {font-size:clamp(2.1rem,9vw,3.2rem) !important;}
  .hero-lede {font-size:.98rem !important;}
  .hero-visual .hero-panel {grid-template-columns:1fr !important;gap:7px;}
  .hero-visual .hero-panel .signal {padding:9px 13px !important;}
  .hero-photo,.hero-photo img {min-height:340px !important;}
  .hero-photo-label {bottom:20px;left:21px;right:20px;}
  .hero-photo-label strong {font-size:1.7rem;}
  .section {padding:66px 0 !important;}
  .section-heading {gap:17px !important;}
  .services-section .service-group {margin-top:44px !important;}
  .service-feature {grid-template-columns:1fr;border-radius:16px;}
  .service-feature .service-group-head {padding:29px 23px !important;}
  .service-feature-media {min-height:245px;}
  .services-section .service-feature .service-group-head h3 {font-size:1.83rem !important;}
  .installation-grid {grid-template-columns:1fr !important;gap:12px !important;}
  .installation-grid .modern-service-card {padding:24px !important;}
  .approach-image,.approach-image>img.approach-image-img {min-height:320px !important;}
  .approach-image .image-note {left:13px !important;right:13px !important;bottom:13px !important;padding:13px 15px !important;}
  .why-points {grid-template-columns:1fr !important;}
  .why-points article {padding:21px !important;}
  .booking-card {grid-template-columns:1fr !important;padding:22px !important;}
  .booking-card .form-head,.booking-card>p,.booking-card .booking-link-btn {grid-column:1;}
  .booking-image-wrap {grid-column:1;grid-row:4;height:205px;}
  .footer-action {flex-direction:column;align-items:flex-start;}
  .footer-action .btn {white-space:normal;}
  .cookie-note {bottom:8px;left:8px;right:8px;}
}
@media (prefers-reduced-motion:reduce) {
  .service-feature-media img,.installation-grid .modern-service-card,.btn {transition:none !important;}
}


/* ===========================================================
   Restore the original T1 moving hexagon / holographic background.
   Its art and animation remain in index.html and assets. The prior
   redesign hid the backdrop behind opaque section backgrounds.
   These tinted, translucent surfaces reveal movement while
   preserving the refreshed photography, typography and contrast.
   =========================================================== */
.t1-holo-background {
  background: #073a37;
}
.t1-holo-background__art {
  filter: brightness(.86) saturate(1.06);
}
.t1-holo-background__light {
  opacity: .66;
}
.hero {
  background: linear-gradient(115deg,
    rgba(2, 30, 56, .80) 0%,
    rgba(5, 47, 82, .79) 65%,
    rgba(2, 33, 58, .82) 100%) !important;
}
.audience-band {
  background: rgba(234, 243, 248, .87) !important;
}
.services-section {
  background: rgba(247, 250, 252, .82) !important;
}
.approach-section {
  background: rgba(234, 243, 248, .81) !important;
}
.why-section {
  background: linear-gradient(120deg,
    rgba(5, 45, 82, .78),
    rgba(7, 58, 96, .79)) !important;
}
.contact-section {
  background: rgba(247, 250, 252, .83) !important;
}
/* Respect users requesting reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .t1-holo-background__art,
  .t1-holo-background__light {
    animation: none !important;
    will-change: auto !important;
  }
}

/* Revision: unnumbered service cards; preserve their clean borders and spacing. */
.installation-grid .modern-service-card > h3 { margin-top:0 !important; }


/* ================================================================
   TIER 1 / VISIBLE HEX BACKGROUND MOTION (OCTOBER 2026)
   Make the ORIGINAL animated artwork significantly easier to see.
   Movement is an even-paced lateral drift, not a fast flash or zoom.
   All text/card imagery, the three service groups and page flow stay.
   ================================================================ */
.t1-holo-background__art {
  inset: -10% !important; /* extra artwork outside viewport avoids edge gaps */
  opacity: 1 !important;
  filter: brightness(1.14) saturate(1.26) contrast(1.07) !important;
  animation: t1-hex-visible-drift 16s ease-in-out infinite alternate !important;
  will-change: transform;
}
@keyframes t1-hex-visible-drift {
  0%   { transform: translate3d(-3.8%, -1.6%, 0) scale(1.13); }
  100% { transform: translate3d( 3.8%,  1.6%, 0) scale(1.13); }
}
.t1-holo-background__light {
  opacity: .90 !important;
  filter: saturate(1.40) brightness(1.12) !important;
  animation: t1-hex-visible-light 10s ease-in-out infinite alternate !important;
  will-change: transform, opacity;
}
@keyframes t1-hex-visible-light {
  0%   { transform: translate3d(-11%, -3%, 0) rotate(-2deg); opacity: .64; }
  50%  { opacity: .95; }
  100% { transform: translate3d( 11%,  3%, 0) rotate( 2deg); opacity: .80; }
}
/* More of the colored hexagons show through each large content band.
   Readable foreground cards and the original T1 navy/blue/green remain. */
.t1-holo-background ~ main .hero {
  background: linear-gradient(115deg,
    rgba(2,30,56,.70),rgba(4,43,77,.70) 60%,rgba(2,33,58,.73)) !important;
}
.t1-holo-background ~ main .audience-band {
  background: rgba(234,243,248,.73) !important;
}
.t1-holo-background ~ main .services-section {
  background: rgba(247,250,252,.72) !important;
}
.t1-holo-background ~ main .approach-section {
  background: rgba(234,243,248,.70) !important;
}
.t1-holo-background ~ main .why-section {
  background: linear-gradient(120deg,
    rgba(5,45,82,.69),rgba(7,58,96,.70)) !important;
}
.t1-holo-background ~ main .contact-section {
  background: rgba(247,250,252,.73) !important;
}
/* Accessibility: honor OS-level reduced motion without hiding the art. */
@media (prefers-reduced-motion: reduce) {
  .t1-holo-background__art,
  .t1-holo-background__light {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}


/* ================================================================
   FULLY TRANSPARENT SECTION / CARD SPACING (OCTOBER 2026)
   Reveal the animated background in the whitespace between cards
   and between major homepage sections, while keeping content blocks
   themselves readable.
   ================================================================ */
.t1-holo-background ~ main .audience-band,
.t1-holo-background ~ main .services-section,
.t1-holo-background ~ main .approach-section,
.t1-holo-background ~ main .contact-section {
  background: transparent !important;
}

/* Keep the card interiors readable while letting the gaps show through. */
.t1-holo-background ~ main .services-section .installation-grid,
.t1-holo-background ~ main .approach-section .approach-grid,
.t1-holo-background ~ main .contact-section .contact-grid {
  background: transparent !important;
}


/* ================================================================
   SHARPER ANIMATED BACKGROUND (OCTOBER 2026)
   Reduce the soft / blurry look by lowering the zoom amount and
   toning down the lighting haze while keeping the background visible.
   ================================================================ */
.t1-holo-background__art {
  inset: -6% !important;
  filter: brightness(1.08) saturate(1.14) contrast(1.14) !important;
  image-rendering: auto;
  animation: t1-hex-sharper-drift 16s ease-in-out infinite alternate !important;
}
@keyframes t1-hex-sharper-drift {
  0%   { transform: translate3d(-2.6%, -1.0%, 0) scale(1.06); }
  100% { transform: translate3d( 2.6%,  1.0%, 0) scale(1.06); }
}
.t1-holo-background__light {
  opacity: .58 !important;
  filter: saturate(1.18) brightness(1.02) !important;
  animation: t1-hex-sharper-light 10s ease-in-out infinite alternate !important;
}
@keyframes t1-hex-sharper-light {
  0%   { transform: translate3d(-8%, -2%, 0) rotate(-1deg); opacity: .46; }
  50%  { opacity: .62; }
  100% { transform: translate3d( 8%,  2%, 0) rotate(1deg); opacity: .56; }
}

/* ================================================================
   READABLE TEXT ON FULLY TRANSPARENT ANIMATED BACKGROUND
   Keep every section gutter and inter-card gap 100% transparent.
   Dark contrast surfaces go ONLY beneath actual text content.
   ================================================================ */
:root {
  --t1-readable-panel: rgba(2, 31, 52, .88);
  --t1-readable-white: #fff;
  --t1-readable-copy: #edf6fc;
  --t1-readable-accent: #a1f6bf;
}

/* Who we serve: the green moving background used to wash out text. */
.t1-holo-background ~ main .audience-grid {
  gap: 12px;
  padding-block: 17px;
}
.t1-holo-background ~ main .audience-grid > p,
.t1-holo-background ~ main .audience-grid > div {
  background: var(--t1-readable-panel) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
}
.t1-holo-background ~ main .audience-grid > p {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 18px 16px;
  color: var(--t1-readable-accent) !important;
  font-weight: 850;
  text-shadow: none !important;
}
.t1-holo-background ~ main .audience-grid > div {
  padding: 18px 20px;
  border-left: 1px solid rgba(255,255,255,.20) !important;
}
.t1-holo-background ~ main .audience-grid strong {
  color: var(--t1-readable-white) !important;
  text-shadow: none !important;
}
.t1-holo-background ~ main .audience-grid span {
  color: var(--t1-readable-copy) !important;
  text-shadow: none !important;
}

/* Capabilities heading: make both columns readable independently,
   preserving the moving artwork in the space between the columns. */
.t1-holo-background ~ main .services-section .section-heading > div,
.t1-holo-background ~ main .services-section .section-heading > p {
  background: var(--t1-readable-panel) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: clamp(18px, 2.3vw, 28px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.t1-holo-background ~ main .services-section .section-heading > p {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--t1-readable-copy) !important;
  text-shadow: none !important;
  font-weight: 500;
  line-height: 1.72;
}
.t1-holo-background ~ main .services-section .section-heading h2 {
  color: var(--t1-readable-white) !important;
  text-shadow: none !important;
}
.t1-holo-background ~ main .services-section .section-heading .eyebrow {
  color: var(--t1-readable-accent) !important;
  text-shadow: none !important;
}

/* Approach: a single localized panel protects the heading, description
   and step-by-step copy without covering the gap beside the photo. */
.t1-holo-background ~ main .approach-section .approach-copy {
  background: var(--t1-readable-panel) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 38px);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.t1-holo-background ~ main .approach-copy h2,
.t1-holo-background ~ main .approach-copy .steps h3 {
  color: var(--t1-readable-white) !important;
  text-shadow: none !important;
}
.t1-holo-background ~ main .approach-copy > p:not(.eyebrow),
.t1-holo-background ~ main .approach-copy .steps p {
  color: var(--t1-readable-copy) !important;
  text-shadow: none !important;
}
.t1-holo-background ~ main .approach-copy .eyebrow {
  color: var(--t1-readable-accent) !important;
  text-shadow: none !important;
}
.t1-holo-background ~ main .approach-copy .steps li {
  border-color: rgba(255,255,255,.22) !important;
}

/* Contact copy only; the booking card stays white with navy text. */
.t1-holo-background ~ main .contact-section .contact-intro-copy,
.t1-holo-background ~ main .contact-section .contact-intro-details {
  background: var(--t1-readable-panel) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: clamp(18px, 2.7vw, 30px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.t1-holo-background ~ main .contact-section .contact-copy h2,
.t1-holo-background ~ main .contact-section .contact-details strong {
  color: var(--t1-readable-white) !important;
  text-shadow: none !important;
}
.t1-holo-background ~ main .contact-section .contact-intro-copy > p:not(.eyebrow),
.t1-holo-background ~ main .contact-section .contact-details span {
  color: var(--t1-readable-copy) !important;
  text-shadow: none !important;
}
.t1-holo-background ~ main .contact-section .eyebrow,
.t1-holo-background ~ main .contact-section .location {
  color: var(--t1-readable-accent) !important;
  text-shadow: none !important;
}
.t1-holo-background ~ main .contact-section .contact-details a {
  border-color: rgba(255,255,255,.22) !important;
}

@media (max-width: 680px) {
  .t1-holo-background ~ main .audience-grid > p,
  .t1-holo-background ~ main .audience-grid > div {
    padding: 17px 18px;
  }
  .t1-holo-background ~ main .audience-grid > div {
    border: 1px solid rgba(255,255,255,.20) !important;
  }
  .t1-holo-background ~ main .approach-section .approach-copy {
    padding: 23px 20px;
  }
}


/* ================================================================
   HOW WE WORK: IMAGE + COPY IN THE SAME CARD (OCTOBER 2026)
   Combine the left image and right text into one shared panel.
   ================================================================ */
.t1-holo-background ~ main .approach-section .approach-grid {
  background: var(--t1-readable-panel) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 22px !important;
  padding: clamp(18px, 2.8vw, 30px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
  align-items: stretch !important;
}
.t1-holo-background ~ main .approach-section .approach-image {
  min-height: 100% !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.t1-holo-background ~ main .approach-section .approach-image > img.approach-image-img {
  min-height: 100% !important;
  border-radius: 16px !important;
}
.t1-holo-background ~ main .approach-section .approach-copy {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: clamp(8px, 1.2vw, 14px) !important;
  box-shadow: none !important;
}
@media (max-width: 680px) {
  .t1-holo-background ~ main .approach-section .approach-grid {
    padding: 16px !important;
    gap: 18px !important;
  }
  .t1-holo-background ~ main .approach-section .approach-copy {
    padding: 6px 4px 2px !important;
  }
}


/* ================================================================
   ONE CONTACT CARD: talk + contact methods + booking + photograph
   Intentional single visual container; existing HighLevel form untouched.
   ================================================================ */
.t1-holo-background ~ main .contact-section .unified-contact-card {
  width: 100%;
  box-sizing: border-box;
  background: rgba(3, 31, 56, .94) !important;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 23px;
  box-shadow: 0 22px 56px rgba(0,20,42,.25);
  padding: clamp(24px, 3.6vw, 46px);
  overflow: hidden;
}
/* Remove the three independent boxes; their content now shares one surface. */
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-intro-copy,
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-intro-details {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-contact-intro {
  display: grid !important;
  grid-template-columns: minmax(0,1.42fr) minmax(240px,.78fr) !important;
  align-items: center;
  gap: clamp(20px, 3.3vw, 54px) !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-intro-details {
  border-left: 1px solid rgba(255,255,255,.24) !important;
  padding-left: clamp(20px, 2.5vw, 36px) !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-intro-copy > p:not(.eyebrow) {
  color: #dfebf4 !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-details strong,
.t1-holo-background ~ main .contact-section .unified-contact-card h2 {
  color: #fff !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-details a {
  border-color: rgba(255,255,255,.20) !important;
}
/* One thin divider separates the contact options from booking inside same card. */
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-options-grid {
  display: block !important;
  width: 100%;
  max-width: none !important;
  margin: clamp(25px,3.2vw,39px) 0 0 !important;
  padding: clamp(25px,3.2vw,39px) 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.22);
  background: transparent !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-card {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(230px,.88fr) !important;
  gap: 12px clamp(22px,3.2vw,48px) !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  align-items: center;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-card .form-head,
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-card > p,
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-link-btn {
  grid-column: 1;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-card .form-head {
  align-self: end;
  margin: 0 !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-card .form-head span {
  display: block;
  color: #fff !important;
  font-size: clamp(1.45rem,2.5vw,2.1rem);
  line-height: 1.25;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-card > p {
  margin: 0 !important;
  color: #dfebf4 !important;
  text-shadow: none !important;
  line-height: 1.7;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-link-btn {
  align-self: start;
  justify-self: start;
  margin: 10px 0 0 !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-image-wrap {
  grid-column: 2;
  grid-row: 1 / span 3;
  height: 265px;
  width: 100%;
  margin: 0 !important;
  background: #052d52;
  border: 1px solid rgba(255,255,255,.17) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-image {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media (max-width: 780px) {
  .t1-holo-background ~ main .contact-section .unified-contact-card .booking-contact-intro {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .t1-holo-background ~ main .contact-section .unified-contact-card .contact-intro-details {
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.22) !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
  }
  .t1-holo-background ~ main .contact-section .unified-contact-card .booking-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .t1-holo-background ~ main .contact-section .unified-contact-card .booking-image-wrap {
    grid-column: 1 !important;
    grid-row: 4 !important;
    height: 250px;
    margin-top: 14px !important;
  }
}
@media (max-width: 480px) {
  .t1-holo-background ~ main .contact-section .unified-contact-card {
    padding: 23px 20px !important;
    border-radius: 17px;
  }
  .t1-holo-background ~ main .contact-section .unified-contact-card .booking-image-wrap {
    height: 200px;
  }
}


/* ================================================================
   CONTACT SECTION: attached call image + updated discovery copy
   ================================================================ */
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin: 20px 0 0;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-secondary-link {
  color: #d8ecf7;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-secondary-link:hover {
  color: #fff;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-intro-details {
  display: grid;
  gap: 16px;
  align-content: start;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-side-image-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
}
.t1-holo-background ~ main .contact-section .unified-contact-card .contact-side-image {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 780px) {
  .t1-holo-background ~ main .contact-section .unified-contact-card .contact-intro-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Keep the original booking CTA, but show the introduction-call picture
   just once, beside the Let's Talk content above. */
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: clamp(20px, 3vw, 44px) !important;
}
.t1-holo-background ~ main .contact-section .unified-contact-card .booking-card .booking-link-btn {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
  white-space: nowrap;
}
@media (max-width: 780px) {
  .t1-holo-background ~ main .contact-section .unified-contact-card .booking-card {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .t1-holo-background ~ main .contact-section .unified-contact-card .booking-card .booking-link-btn {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    margin-top: 8px !important;
  }
}