:root {
   --navy-1000: #020b16;
   --navy-950: #031426;
   --navy-900: #071c32;
   --navy-850: #09243e;
   --navy-800: #0b2b49;
   --blue-700: #155d91;
   --blue-600: #2878b0;
   --blue-500: #3b96d0;
   --blue-100: #eaf3f9;
   --gold: #f4b820;
   --gold-pale: #fff6dc;
   --aqua: #55d9c7;
   --aqua-soft: #dff8f4;
   --ink: #10243a;
   --muted: #617286;
   --line: #dfe6eb;
   --mist: #f4f7f9;
   --white: #fff;
   --shadow: 0 18px 50px rgba(3, 20, 38, .11);
   --shadow-lg: 0 32px 80px rgba(2, 11, 22, .26);
   --max: 1240px;
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   color: var(--ink);
   background: #fff;
   font-family: Inter, Manrope, "Segoe UI", Arial, sans-serif;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden
}

body.nav-open {
   overflow: hidden
}

img {
   display: block;
   max-width: 100%
}

a {
   color: inherit;
   text-decoration: none
}

button,
input,
select,
textarea {
   font: inherit
}

button {
   cursor: pointer
}

.container {
   width: min(calc(100% - 44px), var(--max));
   margin-inline: auto
}

.section {
   padding: 106px 0
}

.section-soft {
   background: var(--mist)
}

.section-dark {
   color: #fff;
   background: var(--navy-950)
}

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 18px;
   color: var(--blue-700);
   font-size: .76rem;
   font-weight: 800;
   letter-spacing: .14em;
   line-height: 1.2;
   text-transform: uppercase
}

.eyebrow:before {
   width: 30px;
   height: 3px;
   border-radius: 10px;
   background: var(--gold);
   content: ""
}

.eyebrow-light {
   color: #cfe0eb
}

.heading {
   margin: 0;
   color: var(--navy-900);
   font-size: clamp(2.2rem, 4.5vw, 3.95rem);
   font-weight: 850;
   letter-spacing: -.052em;
   line-height: 1.03
}

.heading span {
   color: var(--blue-700)
}

.section-dark .heading {
   color: #fff
}

.section-dark .heading span {
   color: var(--gold)
}

.lead {
   max-width: 690px;
   margin: 22px 0 0;
   color: var(--muted);
   font-size: 1.06rem
}

.section-dark .lead {
   color: #b8cad8
}

.button {
   display: inline-flex;
   min-height: 52px;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border: 1px solid transparent;
   border-radius: 4px;
   padding: 14px 22px;
   font-weight: 800;
   line-height: 1.2;
   transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease
}

.button:hover {
   transform: translateY(-2px)
}

.button-gold {
   color: var(--navy-950);
   background: var(--gold);
   box-shadow: 0 12px 28px rgba(244, 184, 32, .2)
}

.button-gold:hover {
   background: #ffc832
}

.button-blue {
   color: #fff;
   background: var(--blue-700);
   box-shadow: 0 12px 28px rgba(21, 93, 145, .2)
}

.button-blue:hover {
   background: var(--navy-800)
}

.button-outline {
   color: #fff;
   border-color: rgba(255, 255, 255, .46);
   background: rgba(255, 255, 255, .05);
   backdrop-filter: blur(8px)
}

.button-outline:hover {
   border-color: #fff;
   background: rgba(255, 255, 255, .13)
}

.button-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--blue-700);
   font-weight: 800
}

.arrow {
   transition: transform .2s ease
}

a:hover .arrow,
button:hover .arrow {
   transform: translateX(4px)
}

.topbar {
   position: relative;
   z-index: 40;
   color: #d8e7f1;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
   background: var(--navy-1000);
   font-size: .79rem
}

.topbar-inner {
   min-height: 38px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px
}

.topbar-group {
   display: flex;
   align-items: center;
   gap: 22px
}

.topbar-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap
}

.status-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--aqua);
   box-shadow: 0 0 0 4px rgba(85, 217, 199, .12)
}

.site-header {
   position: absolute;
   z-index: 35;
   top: 38px;
   right: 0;
   left: 0;
   border-bottom: 1px solid rgba(255, 255, 255, .13);
   transition: background .25s ease, box-shadow .25s ease
}

.site-header.is-sticky {
   position: fixed;
   top: 0;
   border-color: rgba(255, 255, 255, .08);
   background: rgba(2, 11, 22, .96);
   box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
   backdrop-filter: blur(14px)
}

.header-inner {
   min-height: 88px;
   display: flex;
   align-items: center;
   gap: 38px
}

.brand {
   display: flex;
   flex: 0 0 auto;
   align-items: center
}

.brand img {
   width: 222px;
   height: auto
}

.main-nav {
   margin-left: auto
}

.main-nav ul {
   display: flex;
   align-items: center;
   gap: 27px;
   margin: 0;
   padding: 0;
   list-style: none
}

.main-nav a {
   position: relative;
   display: block;
   color: #fff;
   font-size: .85rem;
   font-weight: 700;
   white-space: nowrap
}

/* .main-nav a:after {
   position: absolute;
   right: 0;
   bottom: -12px;
   left: 0;
   height: 2px;
   background: var(--gold);
   content: "";
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .2s ease
} */

.main-nav a:hover:after {
   /* transform: scaleX(1) */
}

.header-live {
   display: flex;
   align-items: center;
   gap: 8px;
   border: 1px solid rgba(85, 217, 199, .23);
   border-radius: 100px;
   padding: 7px 11px;
   color: #dff8f4;
   background: rgba(85, 217, 199, .07);
   font-size: .69rem;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase
}

.header-live:before {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--aqua);
   box-shadow: 0 0 0 4px rgba(85, 217, 199, .1);
   content: ""
}

.nav-toggle {
   width: 46px;
   height: 46px;
   display: none;
   place-items: center;
   border: 1px solid rgba(255, 255, 255, .25);
   border-radius: 4px;
   color: #fff;
   background: transparent
}

.nav-toggle span,
.nav-toggle:before,
.nav-toggle:after {
   width: 20px;
   height: 2px;
   display: block;
   border-radius: 2px;
   background: currentColor;
   content: "";
   transition: transform .2s ease, opacity .2s ease
}

.nav-toggle span {
   margin: 5px 0
}

.nav-open .nav-toggle span {
   opacity: 0
}

.nav-open .nav-toggle:before {
   transform: translateY(7px) rotate(45deg)
}

.nav-open .nav-toggle:after {
   transform: translateY(-7px) rotate(-45deg)
}

.hero {
   position: relative;
   min-height: 900px;
   display: flex;
   align-items: center;
   overflow: hidden;
   color: #fff;
   background: radial-gradient(circle at 78% 38%, rgba(40, 120, 176, .25), transparent 30%), radial-gradient(circle at 16% 70%, rgba(85, 217, 199, .08), transparent 26%), linear-gradient(135deg, var(--navy-1000), var(--navy-900) 62%, #0c3152)
}

.hero:before {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .027) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .027) 1px, transparent 1px);
   background-size: 54px 54px;
   content: "";
   mask-image: linear-gradient(90deg, transparent, black 45%, black)
}

.hero:after {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 0;
   height: 0;
   border-bottom: 95px solid var(--gold);
   border-left: 95px solid transparent;
   content: ""
}

.hero-orbit {
   position: absolute;
   right: -140px;
   top: 90px;
   width: 650px;
   height: 650px;
   border: 1px solid rgba(255, 255, 255, .055);
   border-radius: 50%;
   box-shadow: 0 0 0 80px rgba(255, 255, 255, .018), 0 0 0 160px rgba(255, 255, 255, .012)
}

.hero-inner {
   position: relative;
   z-index: 3;
   display: grid;
   grid-template-columns: 1fr .88fr;
   align-items: center;
   gap: 74px;
   padding: 182px 0 128px
}

.breadcrumbs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 24px;
   color: #abc1d0;
   font-size: .75rem;
   font-weight: 700
}

.breadcrumbs span {
   color: var(--aqua)
}

.hero-kicker {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-bottom: 22px;
   border: 1px solid rgba(85, 217, 199, .2);
   border-radius: 100px;
   padding: 7px 12px;
   color: #ccefe9;
   background: rgba(85, 217, 199, .06);
   font-size: .7rem;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase
}

.hero-kicker:before {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--aqua);
   box-shadow: 0 0 0 4px rgba(85, 217, 199, .1);
   content: ""
}

.hero h1 {
   max-width: 780px;
   margin: 0;
   font-size: clamp(3.2rem, 6.1vw, 5.8rem);
   font-weight: 850;
   letter-spacing: -.065em;
   line-height: .92;
   text-wrap: balance
}

.hero h1 span {
   color: var(--gold)
}

.hero-lead {
   max-width: 700px;
   margin: 28px 0 0;
   color: #dce8f0;
   font-size: clamp(1.05rem, 1.75vw, 1.23rem);
   line-height: 1.63
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 34px
}

.hero-proof {
   display: flex;
   flex-wrap: wrap;
   gap: 18px 28px;
   margin-top: 30px;
   color: #c4d4df;
   font-size: .78rem;
   font-weight: 700
}

.hero-proof span {
   display: flex;
   align-items: center;
   gap: 8px
}

.hero-proof svg {
   color: var(--aqua)
}

.ops-window {
   position: relative;
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 17px;
   padding: 14px;
   background: rgba(7, 28, 50, .76);
   box-shadow: var(--shadow-lg);
   backdrop-filter: blur(16px);
   transform: perspective(1400px) rotateY(-4deg) rotateX(1deg)
}

.ops-window:before {
   position: absolute;
   right: -22px;
   bottom: -22px;
   width: 108px;
   height: 108px;
   border-right: 4px solid var(--gold);
   border-bottom: 4px solid var(--gold);
   content: ""
}

.ops-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
   padding: 8px 8px 16px;
   color: #fff
}

.ops-title {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: .8rem;
   font-weight: 800
}

.ops-title-mark {
   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;
   border-radius: 8px;
   color: var(--navy-950);
   background: var(--gold);
   font-weight: 900
}

.ops-status {
   display: flex;
   align-items: center;
   gap: 7px;
   color: #9ce6d8;
   font-size: .65rem;
   font-weight: 800;
   text-transform: uppercase
}

.ops-status:before {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--aqua);
   box-shadow: 0 0 0 4px rgba(85, 217, 199, .1);
   content: ""
}

.ops-grid {
   display: grid;
   grid-template-columns: 1.25fr .75fr;
   gap: 10px;
   padding-top: 12px
}

.ops-queue {
   display: grid;
   gap: 9px
}

.ops-ticket {
   display: grid;
   grid-template-columns: 38px 1fr auto;
   align-items: center;
   gap: 10px;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 9px;
   padding: 10px;
   color: #fff;
   background: rgba(255, 255, 255, .045)
}

.ticket-icon {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border-radius: 8px;
   color: #a9d9f6;
   background: rgba(59, 150, 208, .13)
}

.ticket-copy strong {
   display: block;
   font-size: .72rem
}

.ticket-copy small {
   display: block;
   margin-top: 2px;
   color: #91a9ba;
   font-size: .59rem
}

.ticket-state {
   border-radius: 100px;
   padding: 4px 7px;
   font-size: .52rem;
   font-weight: 850;
   text-transform: uppercase
}

.state-ai {
   color: #97dfd3;
   background: rgba(85, 217, 199, .1)
}

.state-human {
   color: #ffd76b;
   background: rgba(244, 184, 32, .11)
}

.state-response {
   color: #a9d9f6;
   background: rgba(59, 150, 208, .13)
}

.ops-side {
   display: grid;
   gap: 9px
}

.ops-stat {
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 9px;
   padding: 13px;
   background: rgba(255, 255, 255, .045)
}

.ops-stat small {
   display: block;
   color: #91a9ba;
   font-size: .57rem;
   font-weight: 800;
   text-transform: uppercase
}

.ops-stat strong {
   display: block;
   margin-top: 5px;
   color: #fff;
   font-size: 1.25rem;
   letter-spacing: -.04em
}

.ops-stat strong em {
   color: var(--aqua);
   font-style: normal
}

.ops-activity {
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 9px;
   padding: 12px;
   background: rgba(255, 255, 255, .045)
}

.ops-activity h3 {
   margin: 0 0 10px;
   color: #fff;
   font-size: .65rem
}

.activity-row {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin-top: 8px;
   color: #a8bdcb;
   font-size: .54rem;
   line-height: 1.4
}

.activity-dot {
   width: 7px;
   height: 7px;
   flex: 0 0 7px;
   margin-top: 3px;
   border-radius: 50%;
   background: var(--aqua)
}

.activity-row:nth-child(3) .activity-dot {
   background: var(--gold)
}

.activity-row:nth-child(4) .activity-dot {
   background: var(--blue-500)
}

.service-ribbon {
   position: relative;
   z-index: 5;
   margin-top: -78px
}

.ribbon-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   box-shadow: var(--shadow)
}

.ribbon-item {
   min-height: 155px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   border-right: 1px solid rgba(255, 255, 255, .13);
   padding: 24px;
   color: #fff;
   background: var(--navy-800)
}

.ribbon-item:first-child {
   color: var(--navy-950);
   background: var(--gold)
}

.ribbon-item:last-child {
   border-right: 0
}

.ribbon-number {
   display: block;
   margin-bottom: 17px;
   color: var(--aqua);
   font-size: .68rem;
   font-weight: 850;
   letter-spacing: .1em
}

.ribbon-item:first-child .ribbon-number {
   color: var(--blue-700)
}

.ribbon-item strong {
   font-size: .95rem;
   line-height: 1.25
}

.ribbon-item small {
   display: block;
   margin-top: 7px;
   color: inherit;
   font-size: .68rem;
   line-height: 1.4;
   opacity: .7
}

.positioning-grid {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   align-items: center;
   gap: 88px
}

.positioning-visual {
   position: relative;
   min-height: 590px
}

.empty-desk {
   position: absolute;
   inset: 0 68px 68px 0;
   overflow: hidden;
   border-radius: 0 70px 0 0;
   box-shadow: var(--shadow-lg)
}

.empty-desk img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.empty-desk:after {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(3, 20, 38, .04), rgba(3, 20, 38, .7));
   content: ""
}

.positioning-card {
   position: absolute;
   z-index: 2;
   right: 0;
   bottom: 0;
   width: 280px;
   border-top: 5px solid var(--gold);
   padding: 28px;
   color: #fff;
   background: var(--blue-700);
   box-shadow: var(--shadow)
}

.positioning-card strong {
   display: block;
   font-size: 1.05rem
}

.positioning-card span {
   display: block;
   margin-top: 8px;
   color: #deebf3;
   font-size: .8rem
}

.boundary-line {
   display: flex;
   align-items: center;
   gap: 13px;
   margin-top: 30px;
   border-left: 4px solid var(--gold);
   padding: 18px 20px;
   color: var(--navy-900);
   background: var(--gold-pale);
   font-weight: 750
}

.boundary-line svg {
   flex: 0 0 auto;
   color: var(--blue-700)
}

.value-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-top: 29px
}

.value-item {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   border: 1px solid var(--line);
   padding: 15px;
   background: #fff;
   color: var(--ink);
   font-size: .84rem;
   font-weight: 750
}

.value-item svg {
   flex: 0 0 auto;
   margin-top: 2px;
   color: var(--blue-700)
}

.experience {
   position: relative;
   overflow: hidden;
   background: linear-gradient(145deg, var(--navy-1000), var(--navy-850))
}

.experience:before {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .023) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .023) 1px, transparent 1px);
   background-size: 48px 48px;
   content: ""
}

.experience-head {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 50px;
   margin-bottom: 46px
}

.experience-head .lead {
   max-width: 520px;
   margin: 0
}

.scenario-controls {
   position: relative;
   z-index: 2;
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
   margin-bottom: 24px
}

.scenario-button {
   display: flex;
   align-items: center;
   gap: 9px;
   border: 1px solid rgba(255, 255, 255, .13);
   border-radius: 100px;
   padding: 10px 14px;
   color: #c8d8e3;
   background: rgba(255, 255, 255, .045);
   font-size: .76rem;
   font-weight: 800;
   transition: background .2s ease, border-color .2s ease, color .2s ease
}

.scenario-button:hover,
.scenario-button.active {
   border-color: rgba(244, 184, 32, .55);
   color: var(--navy-950);
   background: var(--gold)
}

.scenario-button svg {
   pointer-events: none
}

.experience-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: .76fr 1.24fr;
   align-items: stretch;
   gap: 34px
}

.phone-shell {
   width: min(100%, 390px);
   margin-inline: auto;
   border: 9px solid #162d42;
   border-radius: 42px;
   padding: 12px;
   background: #0c1a28;
   box-shadow: 0 30px 70px rgba(0, 0, 0, .4)
}

.phone-screen {
   min-height: 590px;
   overflow: hidden;
   border-radius: 28px;
   background: #f5f7f9
}

.phone-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 17px;
   color: #fff;
   background: var(--navy-900)
}

.phone-contact {
   display: flex;
   align-items: center;
   gap: 10px
}

.leo-avatar {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   color: var(--navy-950);
   background: var(--gold);
   font-size: .72rem;
   font-weight: 900
}

.phone-contact strong {
   display: block;
   font-size: .74rem
}

.phone-contact small {
   display: flex;
   align-items: center;
   gap: 5px;
   color: #a8c2d2;
   font-size: .57rem
}

.phone-contact small:before {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--aqua);
   content: ""
}

.phone-time {
   color: #b8ccda;
   font-size: .62rem
}

.chat-body {
   height: 470px;
   display: flex;
   flex-direction: column;
   gap: 9px;
   overflow: hidden;
   padding: 17px;
   background: linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .94)), radial-gradient(circle at 10% 20%, var(--blue-100), transparent 45%)
}

.message {
   max-width: 85%;
   border-radius: 14px;
   padding: 10px 12px;
   font-size: .71rem;
   line-height: 1.45;
   box-shadow: 0 5px 12px rgba(3, 20, 38, .06);
   animation: messageIn .32s ease both
}

.message-guest {
   align-self: flex-end;
   border-bottom-right-radius: 3px;
   color: #fff;
   background: var(--blue-700)
}

.message-leo {
   align-self: flex-start;
   border-bottom-left-radius: 3px;
   color: var(--ink);
   background: #fff
}

.message-human {
   align-self: flex-start;
   border-bottom-left-radius: 3px;
   color: #fff;
   background: var(--navy-800)
}

.message-system {
   align-self: center;
   border: 1px solid #dbe5eb;
   border-radius: 100px;
   padding: 6px 10px;
   color: #607386;
   background: #f8fafb;
   font-size: .58rem;
   font-weight: 800;
   text-transform: uppercase;
   box-shadow: none
}

.typing {
   display: flex;
   gap: 4px;
   align-items: center;
   width: 48px
}

.typing span {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #8ca0af;
   animation: blink 1s infinite
}

.typing span:nth-child(2) {
   animation-delay: .15s
}

.typing span:nth-child(3) {
   animation-delay: .3s
}

.phone-input {
   display: flex;
   align-items: center;
   gap: 8px;
   border-top: 1px solid #e0e7ec;
   padding: 11px 13px;
   background: #fff
}

.input-fake {
   flex: 1;
   border: 1px solid #d9e2e8;
   border-radius: 100px;
   padding: 8px 11px;
   color: #93a2ad;
   font-size: .62rem
}

.send-dot {
   width: 31px;
   height: 31px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   color: #fff;
   background: var(--blue-700)
}

@keyframes messageIn {
   from {
      opacity: 0;
      transform: translateY(7px)
   }

   to {
      opacity: 1;
      transform: translateY(0)
   }
}

@keyframes blink {

   0%,
   80%,
   100% {
      opacity: .3
   }

   40% {
      opacity: 1
   }
}

.control-console {
   display: grid;
   grid-template-rows: auto 1fr;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 15px;
   padding: 17px;
   background: rgba(255, 255, 255, .045);
   box-shadow: var(--shadow-lg);
   backdrop-filter: blur(12px)
}

.console-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
   padding: 5px 4px 17px;
   color: #fff
}

.console-top strong {
   font-size: .85rem
}

.case-id {
   color: #99afbd;
   font-size: .63rem
}

.console-grid {
   display: grid;
   grid-template-columns: .72fr 1.28fr;
   gap: 12px;
   padding-top: 13px
}

.case-summary {
   display: grid;
   align-content: start;
   gap: 10px
}

.case-panel {
   border: 1px solid rgba(255, 255, 255, .09);
   border-radius: 9px;
   padding: 14px;
   background: rgba(255, 255, 255, .04)
}

.case-panel small {
   display: block;
   color: #8fa8b8;
   font-size: .56rem;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase
}

.case-panel strong {
   display: block;
   margin-top: 5px;
   color: #fff;
   font-size: .78rem;
   line-height: 1.35
}

.risk-badge {
   display: inline-flex !important;
   width: max-content;
   align-items: center;
   gap: 6px;
   border-radius: 100px;
   padding: 5px 8px;
   color: #9ce6d8 !important;
   background: rgba(85, 217, 199, .1)
}

.risk-badge:before {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--aqua);
   content: ""
}

.case-timeline {
   position: relative;
   display: grid;
   align-content: start;
   gap: 0;
   border: 1px solid rgba(255, 255, 255, .09);
   border-radius: 9px;
   padding: 17px;
   background: rgba(255, 255, 255, .04)
}

.case-timeline:before {
   position: absolute;
   top: 29px;
   bottom: 29px;
   left: 27px;
   width: 1px;
   background: rgba(255, 255, 255, .13);
   content: ""
}

.timeline-row {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 22px 1fr auto;
   gap: 9px;
   align-items: start;
   min-height: 67px
}

.timeline-dot {
   width: 11px;
   height: 11px;
   margin-top: 4px;
   border: 3px solid var(--navy-850);
   border-radius: 50%;
   background: #6d8392;
   box-shadow: 0 0 0 1px rgba(255, 255, 255, .15)
}

.timeline-row.done .timeline-dot {
   background: var(--aqua)
}

.timeline-row.current .timeline-dot {
   background: var(--gold);
   box-shadow: 0 0 0 5px rgba(244, 184, 32, .09)
}

.timeline-copy strong {
   display: block;
   color: #fff;
   font-size: .7rem
}

.timeline-copy small {
   display: block;
   margin-top: 3px;
   color: #8fa8b8;
   font-size: .58rem;
   line-height: 1.4
}

.timeline-time {
   color: #7891a2;
   font-size: .55rem
}

.scenario-run {
   grid-column: 1/-1;
   width: 100%;
   margin-top: 8px
}

.layer-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   margin-top: 48px;
   background: var(--line)
}

.layer-card {
   position: relative;
   min-height: 330px;
   padding: 32px;
   background: #fff
}

.layer-card:before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: var(--blue-600);
   content: ""
}

.layer-card:nth-child(1):before {
   background: var(--aqua)
}

.layer-card:nth-child(4):before {
   background: var(--gold)
}

.layer-step {
   color: var(--blue-700);
   font-size: .65rem;
   font-weight: 850;
   letter-spacing: .1em
}

.layer-icon {
   width: 55px;
   height: 55px;
   display: grid;
   place-items: center;
   margin: 24px 0;
   color: var(--blue-700);
   background: var(--blue-100)
}

.layer-card:first-child .layer-icon {
   color: #177a6c;
   background: var(--aqua-soft)
}

.layer-card:last-child .layer-icon {
   color: var(--navy-950);
   background: var(--gold-pale)
}

.layer-card h3 {
   margin: 0;
   color: var(--navy-900);
   font-size: 1.12rem;
   line-height: 1.25
}

.layer-card p {
   margin: 13px 0 0;
   color: var(--muted);
   font-size: .85rem
}

.layer-note {
   display: inline-flex;
   margin-top: 18px;
   border-radius: 100px;
   padding: 5px 8px;
   color: var(--blue-700);
   background: var(--blue-100);
   font-size: .59rem;
   font-weight: 850;
   text-transform: uppercase
}

.sectors {
   overflow: hidden;
   background: #fff
}

.sector-layout {
   display: grid;
   grid-template-columns: .37fr .63fr;
   gap: 58px;
   margin-top: 48px
}

.sector-tabs {
   display: grid;
   align-content: start;
   gap: 8px
}

.sector-tab {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   border: 1px solid var(--line);
   padding: 17px 18px;
   color: var(--navy-900);
   background: #fff;
   font-weight: 800;
   text-align: left;
   transition: background .2s ease, border-color .2s ease, color .2s ease
}

.sector-tab:hover,
.sector-tab.active {
   border-color: var(--navy-900);
   color: #fff;
   background: var(--navy-900)
}

.sector-tab span {
   display: flex;
   align-items: center;
   gap: 11px
}

.sector-tab svg {
   color: var(--blue-600)
}

.sector-tab.active svg {
   color: var(--gold)
}

.sector-panel {
   position: relative;
   min-height: 610px;
   overflow: hidden;
   border-radius: 0 70px 0 0;
   color: #fff;
   background: var(--navy-900);
   box-shadow: var(--shadow-lg)
}

.sector-panel-bg {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(3, 20, 38, .98), rgba(3, 20, 38, .86) 66%, rgba(3, 20, 38, .56)), url("https://clearwatchsecurity.co.uk/wp-content/uploads/2019/01/Remote-Concierge-scaled.jpg") center/cover no-repeat;
   transition: background .25s ease
}

.sector-content {
   position: relative;
   z-index: 2;
   max-width: 700px;
   padding: 52px
}

.sector-label {
   color: var(--aqua);
   font-size: .68rem;
   font-weight: 850;
   letter-spacing: .11em;
   text-transform: uppercase
}

.sector-content h3 {
   max-width: 610px;
   margin: 15px 0 16px;
   color: #fff;
   font-size: clamp(2rem, 3.5vw, 3rem);
   letter-spacing: -.045em;
   line-height: 1.05
}

.sector-content>p {
   max-width: 610px;
   margin: 0;
   color: #c1d2dd;
   font-size: .94rem
}

.issue-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 29px
}

.issue-item {
   display: flex;
   align-items: center;
   gap: 9px;
   border: 1px solid rgba(255, 255, 255, .1);
   padding: 11px 12px;
   color: #e3edf3;
   background: rgba(255, 255, 255, .05);
   font-size: .75rem;
   font-weight: 700
}

.issue-item:before {
   width: 7px;
   height: 7px;
   flex: 0 0 7px;
   border-radius: 50%;
   background: var(--gold);
   content: ""
}

.sector-outcome {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   margin-top: 25px;
   background: rgba(255, 255, 255, .1)
}

.outcome-item {
   padding: 16px;
   background: rgba(3, 20, 38, .48)
}

.outcome-item small {
   display: block;
   color: #8da9ba;
   font-size: .57rem;
   font-weight: 850;
   text-transform: uppercase
}

.outcome-item strong {
   display: block;
   margin-top: 5px;
   color: #fff;
   font-size: .78rem;
   line-height: 1.4
}

.boundary {
   position: relative;
   overflow: hidden
}

.boundary-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px;
   margin-top: 47px
}

.boundary-card {
   border: 1px solid var(--line);
   padding: 35px;
   background: #fff
}

.boundary-card.handle {
   border-top: 5px solid var(--aqua)
}

.boundary-card.retain {
   border-top: 5px solid var(--gold)
}

.boundary-card h3 {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 0;
   color: var(--navy-900);
   font-size: 1.25rem
}

.boundary-card h3 svg {
   color: var(--blue-700)
}

.boundary-list {
   display: grid;
   gap: 13px;
   margin: 25px 0 0;
   padding: 0;
   list-style: none
}

.boundary-list li {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   color: var(--ink);
   font-size: .87rem
}

.boundary-list li:before {
   width: 19px;
   height: 19px;
   flex: 0 0 19px;
   display: grid;
   place-items: center;
   margin-top: 2px;
   border-radius: 50%;
   color: var(--navy-950);
   background: var(--aqua);
   content: "✓";
   font-size: .62rem;
   font-weight: 900
}

.retain .boundary-list li:before {
   background: var(--gold)
}

.boundary-result {
   margin-top: 22px;
   border-left: 4px solid var(--blue-700);
   padding: 17px 20px;
   color: var(--navy-900);
   background: var(--blue-100);
   font-weight: 750
}

.tech-section {
   position: relative;
   overflow: hidden;
   background: linear-gradient(145deg, var(--navy-1000), var(--navy-850))
}

.tech-grid {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   align-items: center;
   gap: 80px
}

.tech-stack {
   position: relative;
   min-height: 610px
}

.tech-screen {
   position: absolute;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 14px;
   background: rgba(255, 255, 255, .055);
   box-shadow: var(--shadow-lg);
   backdrop-filter: blur(14px)
}

.screen-main {
   inset: 40px 0 80px 60px;
   padding: 18px
}

.screen-mobile {
   z-index: 2;
   bottom: 0;
   left: 0;
   width: 225px;
   padding: 11px;
   border: 7px solid #153046;
   border-radius: 28px;
   background: #0d2031
}

.dashboard-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
   padding: 5px 3px 16px;
   color: #fff;
   font-size: .75rem;
   font-weight: 800
}

.dash-filters {
   display: flex;
   gap: 6px
}

.dash-filter {
   border-radius: 100px;
   padding: 4px 7px;
   color: #90a8b8;
   background: rgba(255, 255, 255, .06);
   font-size: .5rem
}

.dash-filter.active {
   color: var(--navy-950);
   background: var(--gold)
}

.dash-metrics {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin-top: 12px
}

.dash-metric {
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 8px;
   padding: 11px;
   background: rgba(255, 255, 255, .04)
}

.dash-metric small {
   display: block;
   color: #7791a2;
   font-size: .48rem;
   text-transform: uppercase
}

.dash-metric strong {
   display: block;
   margin-top: 3px;
   color: #fff;
   font-size: 1rem
}

.dash-metric strong em {
   color: var(--aqua);
   font-style: normal
}

.dash-chart {
   display: flex;
   align-items: flex-end;
   gap: 7px;
   height: 145px;
   margin-top: 13px;
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 8px;
   padding: 17px;
   background: rgba(255, 255, 255, .035)
}

.bar {
   flex: 1;
   min-height: 12px;
   border-radius: 3px 3px 0 0;
   background: linear-gradient(180deg, var(--blue-500), rgba(40, 120, 176, .34))
}

.bar:nth-child(3n) {
   background: linear-gradient(180deg, var(--aqua), rgba(85, 217, 199, .25))
}

.mobile-mini-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
   padding: 8px;
   color: #fff;
   font-size: .6rem;
   font-weight: 800
}

.mobile-mini-row {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 8px;
   border-radius: 7px;
   padding: 9px;
   color: #fff;
   background: rgba(255, 255, 255, .05);
   font-size: .5rem
}

.mini-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--aqua)
}

.mini-dot.gold {
   background: var(--gold)
}

.tech-feature-list {
   display: grid;
   gap: 15px;
   margin-top: 30px
}

.tech-feature {
   display: grid;
   grid-template-columns: 47px 1fr;
   gap: 14px;
   align-items: start
}

.tech-feature-icon {
   width: 47px;
   height: 47px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(255, 255, 255, .12);
   color: var(--aqua);
   background: rgba(255, 255, 255, .045)
}

.tech-feature strong {
   display: block;
   color: #fff;
   font-size: .92rem
}

.tech-feature span {
   display: block;
   margin-top: 4px;
   color: #9eb5c4;
   font-size: .8rem
}

.onboarding-grid {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   align-items: start;
   gap: 88px
}

.onboarding-copy {
   position: sticky;
   top: 130px
}

.onboarding-steps {
   display: grid;
   gap: 17px;
   counter-reset: onboard
}

.onboarding-step {
   display: grid;
   grid-template-columns: 70px 1fr;
   gap: 23px;
   border: 1px solid var(--line);
   padding: 26px;
   background: #fff;
   counter-increment: onboard
}

.onboarding-step:before {
   width: 70px;
   height: 70px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   color: var(--navy-950);
   background: var(--gold);
   content: "0" counter(onboard);
   font-weight: 850
}

.onboarding-step h3 {
   margin: 4px 0 8px;
   color: var(--navy-900);
   font-size: 1.12rem
}

.onboarding-step p {
   margin: 0;
   color: var(--muted);
   font-size: .87rem
}

.playbook-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 11px
}

.playbook-tag {
   border-radius: 100px;
   padding: 5px 8px;
   color: var(--blue-700);
   background: var(--blue-100);
   font-size: .59rem;
   font-weight: 800
}

.builder {
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, var(--blue-700), var(--navy-800))
}

.builder-grid {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 70px;
   align-items: start
}

.builder .heading {
   color: #fff
}

.builder .lead {
   color: #d6e6f0
}

.builder-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
   margin-top: 31px
}

.builder-field {
   display: grid;
   gap: 7px
}

.builder-field.full {
   grid-column: 1/-1
}

.builder-field label {
   color: #dbe8f0;
   font-size: .7rem;
   font-weight: 800
}

.builder-field select,
.builder-field input[type=number] {
   width: 100%;
   min-height: 50px;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 4px;
   outline: 0;
   padding: 11px 12px;
   color: #fff;
   background: rgba(3, 20, 38, .35)
}

.builder-field select option {
   color: var(--ink);
   background: #fff
}

.toggle-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   border: 1px solid rgba(255, 255, 255, .16);
   border-radius: 4px;
   padding: 13px 14px;
   color: #fff;
   background: rgba(3, 20, 38, .22);
   font-size: .78rem;
   font-weight: 750
}

.switch {
   position: relative;
   width: 44px;
   height: 24px;
   flex: 0 0 44px
}

.switch input {
   position: absolute;
   opacity: 0
}

.switch-track {
   position: absolute;
   inset: 0;
   border-radius: 100px;
   background: rgba(255, 255, 255, .18);
   transition: background .2s ease
}

.switch-track:after {
   position: absolute;
   top: 3px;
   left: 3px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: #fff;
   content: "";
   transition: transform .2s ease
}

.switch input:checked+.switch-track {
   background: var(--gold)
}

.switch input:checked+.switch-track:after {
   transform: translateX(20px)
}

.recommendation {
   position: relative;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 16px;
   padding: 18px;
   background: rgba(3, 20, 38, .48);
   box-shadow: var(--shadow-lg);
   backdrop-filter: blur(15px)
}

.recommendation-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, .11);
   padding: 5px 4px 17px;
   color: #fff
}

.recommendation-top small {
   color: #a8c0cf;
   font-size: .62rem;
   font-weight: 800;
   text-transform: uppercase
}

.rec-live {
   display: flex;
   align-items: center;
   gap: 7px;
   color: #9ce6d8;
   font-size: .58rem;
   font-weight: 800
}

.rec-live:before {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--aqua);
   content: ""
}

.rec-name {
   padding: 24px 4px 20px
}

.rec-name small {
   display: block;
   color: #8fa9ba;
   font-size: .6rem;
   font-weight: 800;
   text-transform: uppercase
}

.rec-name h3 {
   margin: 7px 0 8px;
   color: #fff;
   font-size: 1.8rem;
   letter-spacing: -.04em
}

.rec-name p {
   margin: 0;
   color: #b9cbd7;
   font-size: .8rem
}

.rec-elements {
   display: grid;
   gap: 9px
}

.rec-element {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   border: 1px solid rgba(255, 255, 255, .09);
   border-radius: 7px;
   padding: 12px 13px;
   color: #fff;
   background: rgba(255, 255, 255, .04);
   font-size: .74rem;
   font-weight: 750
}

.rec-element span:last-child {
   color: #9ce6d8;
   font-size: .57rem;
   font-weight: 850;
   text-transform: uppercase
}

.rec-element.optional span:last-child {
   color: #ffd56a
}

.rec-action {
   width: 100%;
   margin-top: 14px
}

.proof-section {
   overflow: hidden
}

.testimonial-wrap {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   align-items: stretch;
   margin-top: 47px;
   color: #fff;
   background: var(--navy-900);
   box-shadow: var(--shadow)
}

.testimonial-image {
   position: relative;
   min-height: 470px;
   overflow: hidden
}

.testimonial-image img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.testimonial-image:after {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, transparent 52%, var(--navy-900));
   content: ""
}

.testimonial-copy {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 58px
}

.quote-mark {
   position: absolute;
   top: 30px;
   right: 40px;
   color: rgba(244, 184, 32, .2);
   font-family: Georgia, serif;
   font-size: 8rem;
   line-height: 1
}

.stars {
   color: var(--gold);
   letter-spacing: .18em
}

blockquote {
   position: relative;
   z-index: 2;
   margin: 22px 0 27px;
   color: #fff;
   font-size: clamp(1.25rem, 2.2vw, 1.75rem);
   font-weight: 700;
   letter-spacing: -.025em;
   line-height: 1.47
}

.quote-source strong {
   display: block;
   color: var(--gold)
}

.quote-source span {
   display: block;
   margin-top: 3px;
   color: #b8cad8;
   font-size: .78rem
}

.proof-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   margin-top: 1px;
   background: var(--line)
}

.proof-stat {
   min-height: 155px;
   padding: 25px;
   background: #fff
}

.proof-stat strong {
   display: block;
   color: var(--blue-700);
   font-size: 1.55rem;
   letter-spacing: -.04em
}

.proof-stat span {
   display: block;
   margin-top: 7px;
   color: var(--muted);
   font-size: .77rem
}

.faq-grid {
   display: grid;
   grid-template-columns: .82fr 1.18fr;
   gap: 82px
}

.faq-list {
   border-top: 1px solid var(--line)
}

.faq-item {
   border-bottom: 1px solid var(--line)
}

.faq-question {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   border: 0;
   padding: 22px 0;
   color: var(--navy-900);
   background: transparent;
   font-weight: 800;
   text-align: left
}
.faq-question:hover{
   background: transparent;
   color:#000;
}
.faq-question:focus{
   background: transparent;
   color:#000;
}
.faq-plus {
   width: 30px;
   height: 30px;
   flex: 0 0 30px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   color: var(--blue-700);
   background: var(--blue-100);
   transition: transform .2s ease, background .2s ease
}

.faq-item.open .faq-plus {
   color: var(--navy-950);
   background: var(--gold);
   transform: rotate(45deg)
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   color: var(--muted);
   transition: max-height .28s ease
}

.faq-answer p {
   margin: 0;
   padding: 0 46px 24px 0
}

.quote-section {
   position: relative;
   overflow: hidden;
   color: #fff;
   background: var(--navy-950)
}

.quote-section:before {
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 85% 30%, rgba(40, 120, 176, .22), transparent 30%), linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
   background-size: auto, 50px 50px, 50px 50px;
   content: ""
}

.quote-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: .82fr 1.18fr;
   align-items: start;
   gap: 72px
}

.quote-copy .heading {
   color: #fff
}

.quote-copy .lead {
   color: #c1d3df
}

.quote-promises {
   display: grid;
   gap: 12px;
   margin-top: 28px
}

.quote-promises div {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fff;
   font-size: .87rem;
   font-weight: 700
}

.quote-promises div:before {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--aqua);
   content: ""
}

.quote-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   padding: 34px;
   color: var(--ink);
   background: #fff;
   box-shadow: var(--shadow-lg)
}

.field {
   display: grid;
   gap: 7px
}

.field-full {
   grid-column: 1/-1
}

.field label {
   color: var(--navy-900);
   font-size: .74rem;
   font-weight: 800
}

.field input,
.field select,
.field textarea {
   width: 100%;
   min-height: 50px;
   border: 1px solid #d5dee5;
   border-radius: 3px;
   outline: 0;
   padding: 12px 13px;
   color: var(--ink);
   background: #fbfcfd;
   transition: border-color .2s ease, box-shadow .2s ease
}

.field textarea {
   min-height: 90px;
   resize: vertical
}

.field input:focus,
.field select:focus,
.field textarea:focus {
   border-color: var(--blue-700);
   box-shadow: 0 0 0 3px rgba(21, 93, 145, .1)
}

.consent {
   grid-column: 1/-1;
   display: flex;
   align-items: flex-start;
   gap: 9px;
   color: var(--muted);
   font-size: .7rem;
   line-height: 1.4
}

.consent input {
   margin-top: 3px;
   accent-color: var(--blue-700)
}

.quote-form .button {
   grid-column: 1/-1;
   width: 100%
}

.form-message {
   display: none;
   grid-column: 1/-1;
   border-radius: 3px;
   padding: 12px 14px;
   color: #0a5538;
   background: #e5f7ef;
   font-size: .8rem;
   font-weight: 700
}

.form-message.visible {
   display: block
}

.mobile-demo {
   position: fixed;
   z-index: 45;
   right: 12px;
   bottom: 12px;
   left: 12px;
   display: none;
   align-items: center;
   justify-content: center;
   gap: 18px;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 5px;
   padding: 13px 16px;
   color: #fff;
   background: rgba(2, 11, 22, .96);
   box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
   backdrop-filter: blur(12px)
}

.mobile-demo span {
   font-size: .71rem;
   color: #bdd0dc
}

.mobile-demo strong {
   color: var(--gold)
}

.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0)
}

@media(max-width:1120px) {
   .main-nav ul {
      gap: 17px
   }

   .main-nav a {
      font-size: .78rem
   }

   .header-live {
      display: none
   }

   .hero-inner {
      grid-template-columns: 1fr .8fr;
      gap: 45px
   }

   .ops-window {
      transform: none
   }

   .ribbon-grid {
      grid-template-columns: 1fr 1fr
   }

   .ribbon-item:nth-child(2) {
      border-right: 0
   }

   .ribbon-item:nth-child(n+3) {
      border-top: 1px solid rgba(255, 255, 255, .13)
   }

   .layer-grid {
      grid-template-columns: 1fr 1fr
   }

   .sector-layout {
      grid-template-columns: .42fr .58fr;
      gap: 35px
   }

   .footer-brand {
      grid-column: 1/-1
   }
}

@media(max-width:900px) {
   .section {
      padding: 80px 0
   }

   .topbar-group:last-child {
      display: none
   }

   .site-header {
      top: 38px
   }

   .site-header.is-sticky {
      top: 0
   }

   .header-inner {
      min-height: 76px
   }

   .brand img {
      width: 190px
   }

   .nav-toggle {
      display: grid;
      margin-left: auto
   }

   .header-inner>.button {
      display: none
   }

   .main-nav {
      position: fixed;
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(86vw, 380px);
      margin: 0;
      padding: 126px 34px 40px;
      background: var(--navy-1000);
      box-shadow: -20px 0 50px rgba(0, 0, 0, .3);
      transform: translateX(105%);
      transition: transform .25s ease
   }

   .nav-open .main-nav {
      transform: translateX(0)
   }

   .main-nav ul {
      align-items: stretch;
      flex-direction: column;
      gap: 0
   }

   .main-nav li {
      border-bottom: 1px solid rgba(255, 255, 255, .1)
   }

   .main-nav a {
      padding: 16px 0;
      font-size: 1rem
   }

   /* .main-nav a:after {
      display: none
   } */

   .hero {
      min-height: 1260px
   }

   .hero-inner {
      grid-template-columns: 1fr;
      gap: 52px;
      padding: 160px 0 160px
   }

   .ops-window {
      max-width: 680px
   }

   .service-ribbon {
      margin-top: -90px
   }

   .positioning-grid,
   .experience-grid,
   .tech-grid,
   .onboarding-grid,
   .builder-grid,
   .faq-grid,
   .quote-grid {
      grid-template-columns: 1fr
   }

   .positioning-grid,
   .tech-grid,
   .onboarding-grid,
   .builder-grid,
   .faq-grid,
   .quote-grid {
      gap: 55px
   }

   .experience-grid {
      gap: 40px
   }

   .console-grid {
      grid-template-columns: 1fr
   }

   .layer-grid {
      grid-template-columns: 1fr 1fr
   }

   .sector-layout {
      grid-template-columns: 1fr
   }

   .sector-tabs {
      grid-template-columns: 1fr 1fr
   }

   .sector-panel {
      min-height: 650px
   }

   .onboarding-copy {
      position: static
   }

   .testimonial-wrap {
      grid-template-columns: 1fr
   }

   .testimonial-image {
      min-height: 360px
   }

   .testimonial-image:after {
      background: linear-gradient(180deg, transparent 55%, var(--navy-900))
   }

   .testimonial-copy {
      padding: 45px
   }

   .footer-brand {
      grid-column: 1/-1
   }
}

@media(max-width:620px) {
   .container {
      width: min(calc(100% - 28px), var(--max))
   }

   .section {
      padding: 68px 0
   }

   .topbar {
      font-size: .69rem
   }

   .topbar-inner {
      min-height: 34px
   }

   .topbar-item:nth-child(2) {
      display: none
   }

   .site-header {
      top: 34px
   }

   .header-inner {
      min-height: 70px
   }

   .brand img {
      width: 170px
   }

   .hero {
      min-height: 1350px
   }

   .hero-inner {
      padding: 142px 0 150px
   }

   .hero h1 {
      font-size: clamp(2.8rem, 14.5vw, 4.3rem)
   }

   .hero-lead {
      font-size: 1rem
   }

   .hero-actions {
      align-items: stretch;
      flex-direction: column
   }

   .hero-actions .button {
      width: 100%
   }

   .hero-proof {
      align-items: flex-start;
      flex-direction: column;
      gap: 9px
   }

   .ops-window {
      padding: 10px
   }

   .ops-grid {
      grid-template-columns: 1fr
   }

   .ops-side {
      grid-template-columns: 1fr 1fr
   }

   .ops-activity {
      grid-column: 1/-1
   }

   .service-ribbon {
      margin-top: -108px
   }

   .ribbon-grid {
      grid-template-columns: 1fr
   }

   .ribbon-item {
      min-height: 104px;
      border-right: 0
   }

   .ribbon-item:nth-child(n+2) {
      border-top: 1px solid rgba(255, 255, 255, .13)
   }

   .positioning-visual {
      min-height: 470px
   }

   .empty-desk {
      inset: 0 25px 70px 0
   }

   .positioning-card {
      width: 250px
   }

   .value-list {
      grid-template-columns: 1fr
   }

   .experience-head {
      align-items: flex-start;
      flex-direction: column
   }

   .scenario-controls {
      display: grid;
      grid-template-columns: 1fr 1fr
   }

   .scenario-button {
      justify-content: center;
      border-radius: 5px
   }

   .phone-screen {
      min-height: 560px
   }

   .chat-body {
      height: 440px
   }

   .console-grid {
      grid-template-columns: 1fr
   }

   .layer-grid {
      grid-template-columns: 1fr
   }

   .layer-card {
      min-height: 0
   }

   .sector-tabs {
      grid-template-columns: 1fr
   }

   .sector-panel {
      min-height: 760px;
      border-radius: 0 42px 0 0
   }

   .sector-content {
      padding: 34px 23px
   }

   .issue-grid,
   .sector-outcome {
      grid-template-columns: 1fr
   }

   .boundary-grid {
      grid-template-columns: 1fr
   }

   .tech-stack {
      min-height: 520px
   }

   .screen-main {
      inset: 0 0 75px 35px
   }

   .screen-mobile {
      width: 185px
   }

   .dash-metrics {
      grid-template-columns: 1fr 1fr
   }

   .dash-metric:last-child {
      grid-column: 1/-1
   }

   .onboarding-step {
      grid-template-columns: 54px 1fr;
      gap: 17px;
      padding: 21px 17px
   }

   .onboarding-step:before {
      width: 54px;
      height: 54px
   }

   .builder-form {
      grid-template-columns: 1fr
   }

   .builder-field,
   .builder-field.full {
      grid-column: 1
   }

   .testimonial-image {
      min-height: 300px
   }

   .testimonial-copy {
      padding: 34px 23px
   }

   .proof-stats {
      grid-template-columns: 1fr
   }

   .faq-answer p {
      padding-right: 0
   }

   .quote-form {
      grid-template-columns: 1fr;
      padding: 24px 18px
   }

   .field,
   .field-full,
   .consent,
   .quote-form .button {
      grid-column: 1
   }

   .footer-brand,
   .footer-contact-column {
      grid-column: 1/-1
   }

   .mobile-demo {
      display: flex
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *:before,
   *:after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important
   }

   .reveal {
      opacity: 1;
      transform: none
   }

   .typing span {
      animation: none
   }
}

.remote-customer-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin-top: 42px
}

.remote-customer {
   min-height: 126px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--line);
   padding: 22px;
   text-align: center;
   background: var(--mist)
}

.remote-customer strong {
   color: var(--navy-900);
   font-size: 1.04rem;
   letter-spacing: -.03em
}

.remote-customer span {
   margin-top: 7px;
   color: var(--muted);
   font-size: .67rem
}

.remote-customer-note {
   max-width: 840px;
   margin: 15px 0 0;
   color: #7b8b98;
   font-size: .66rem
}

.remote-proof-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   margin-top: 32px;
   background: var(--line)
}

.remote-proof-grid article {
   min-height: 155px;
   padding: 27px;
   background: #fff
}

.remote-proof-grid strong,
.remote-proof-grid span {
   display: block
}

.remote-proof-grid strong {
   color: var(--blue-700);
   font-size: 1rem
}

.remote-proof-grid span {
   margin-top: 8px;
   color: var(--muted);
   font-size: .76rem
}

.concierge-link-section {
   background: #fff
}

.concierge-link-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 60px
}

.concierge-link-head>div {
   max-width: 760px
}

.concierge-link-head>.lead {
   max-width: 430px;
   margin: 0
}

.concierge-model-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-top: 48px
}

.concierge-model {
   min-height: 265px;
   border: 1px solid var(--line);
   padding: 31px;
   background: var(--mist)
}

.concierge-model.featured {
   color: #fff;
   border-color: var(--navy-900);
   background: var(--navy-900);
   box-shadow: var(--shadow)
}

.concierge-model>span {
   color: var(--blue-700);
   font-size: .65rem;
   font-weight: 850;
   letter-spacing: .1em;
   text-transform: uppercase
}

.concierge-model.featured>span {
   color: var(--gold)
}

.concierge-model h3 {
   margin: 34px 0 10px;
   color: var(--navy-900);
   font-size: 1.28rem
}

.concierge-model.featured h3 {
   color: #fff
}

.concierge-model p {
   margin: 0;
   color: var(--muted);
   font-size: .8rem
}

.concierge-model.featured p {
   color: #b9cad7
}

.concierge-link-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   margin-top: 18px;
   border-left: 5px solid var(--gold);
   padding: 24px 27px;
   background: var(--blue-100)
}

.concierge-link-cta strong,
.concierge-link-cta span {
   display: block
}

.concierge-link-cta strong {
   color: var(--navy-900)
}

.concierge-link-cta span {
   margin-top: 4px;
   color: var(--muted);
   font-size: .77rem
}

.ops-stat strong {
   font-size: 1rem
}

.consent a {
   text-decoration: underline;
   text-underline-offset: 2px
}

@media(max-width:900px) {

   .remote-customer-grid,
   .remote-proof-grid,
   .concierge-model-grid {
      grid-template-columns: 1fr
   }

   .concierge-link-head,
   .concierge-link-cta {
      align-items: flex-start;
      flex-direction: column
   }

   .concierge-link-head>.lead {
      max-width: 690px;
      margin-top: 0
   }

   .concierge-link-cta .button {
      width: 100%
   }
}

/* CWNAV-CSS-START */
.header-inner {
   gap: 26px
}

.main-nav ul {
   gap: 20px
}

.main-nav>ul>li>a {
   font-size: .88rem
}

.cw-has-drop {
   position: relative
}

.cw-has-drop>a {
   display: inline-flex;
   align-items: center;
   gap: 5px
}

.cw-has-drop>a::after {
   content: "";
   width: 7px;
   height: 7px;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: rotate(45deg) translateY(-2px);
   opacity: .65;
   transition: .15s
}

.cw-has-drop:hover>a::after {
   opacity: 1;
   border-color: var(--gold, #f4b820)
}

.cw-caret {
   display: none
}

.cw-drop {
   position: absolute;
   top: calc(100% + 12px);
   left: 0;
   min-width: 236px;
   background: var(--navy-950, #031426);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 12px;
   box-shadow: 0 22px 54px rgba(3, 20, 38, .45);
   padding: 10px;
   display: none;
   flex-direction: column;
   gap: 2px;
   z-index: 70
}

.cw-drop::before {
   content: "";
   position: absolute;
   bottom: 100%;
   left: 0;
   right: 0;
   height: 14px
}

.cw-drop.cw-drop-right {
   left: auto;
   right: 0
}

.cw-drop a {
   display: block;
   padding: 9px 13px;
   border-radius: 8px;
   font-size: .86rem;
   font-weight: 600;
   color: #e6eef5;
   white-space: nowrap;
   transition: .14s
}

.cw-drop a:hover {
   background: rgba(255, 255, 255, .06);
   color: var(--gold, #f4b820)
}

.cw-mega {
   flex-direction: row;
   gap: 10px;
   min-width: 520px
}

.cw-col {
   display: flex;
   flex-direction: column;
   gap: 1px;
   min-width: 236px
}

.cw-col-h {
   font-size: .68rem;
   font-weight: 800;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--gold, #f4b820);
   padding: 8px 13px 5px
}

.cw-soon {
   position: relative
}

.cw-soon::after {
   content: "Soon";
   font-size: .6rem;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #9fb6c8;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 999px;
   padding: 1px 7px;
   margin-left: 8px;
   vertical-align: middle
}

.cw-has-drop:hover>.cw-drop,
.cw-has-drop:focus-within>.cw-drop {
   display: flex
}

@media (max-width:900px) {
   .main-nav.open .cw-has-drop {
      display: flex;
      flex-wrap: wrap;
      align-items: center
   }

   .main-nav.open .cw-has-drop>a {
      flex: 1;
      pointer-events: auto
   }

   .main-nav.open .cw-has-drop>a::after {
      display: none
   }

   .main-nav.open .cw-caret {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      order: 2;
      background: transparent;
      border: 0;
      cursor: pointer;
      flex: 0 0 auto
   }

   .main-nav.open .cw-caret::before {
      content: "";
      width: 9px;
      height: 9px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(45deg);
      transition: .2s
   }

   .main-nav.open .cw-has-drop.open .cw-caret::before {
      transform: rotate(-135deg)
   }

   .main-nav.open .cw-drop {
      position: static;
      order: 3;
      flex-basis: 100%;
      display: none;
      min-width: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 0 0 10px 14px;
      margin: 0
   }

   .main-nav.open .cw-drop.cw-drop-right {
      right: auto
   }

   .main-nav.open .cw-has-drop.open>.cw-drop {
      display: flex
   }

   .main-nav.open .cw-mega {
      flex-direction: column;
      min-width: 0;
      gap: 0
   }

   .main-nav.open .cw-col {
      min-width: 0
   }

   .main-nav.open .cw-drop a {
      padding: 11px 0;
      white-space: normal
   }

   .main-nav.open .cw-col-h {
      padding: 10px 0 2px
   }
}

.cw-has-drop>a.cw-static {
   cursor: default
}

/* CWNAV-CSS-END */

/* CWFOOTER-START — canonical footer styles, identical on every page */
.site-footer {
   color: #c4d2dc;
   background: #020d19
}

.footer-main {
   display: grid;
   grid-template-columns: 1.5fr .8fr 1fr 1.1fr;
   gap: 50px;
   padding: 70px 0
}

.footer-brand img {
   height: 38px;
   width: auto;
   margin-bottom: 20px
}

.footer-brand p {
   margin: 0;
   max-width: 320px;
   color: #8fa3b2;
   font-size: .9rem;
   line-height: 1.7
}

.footer-title {
   margin: 0 0 20px;
   color: #fff;
   font-size: .82rem;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase
}

.footer-links {
   display: grid;
   gap: 11px;
   margin: 0;
   padding: 0;
   list-style: none
}

.footer-links a {
   color: #c4d2dc;
   font-size: .92rem;
   text-decoration: none;
   transition: .15s
}

.footer-links a:hover {
   color: #e8b84b
}

.footer-contact {
   display: grid;
   gap: 12px
}

.footer-contact a {
   display: flex;
   align-items: center;
   gap: 11px;
   color: #c4d2dc;
   font-size: .92rem;
   text-decoration: none
}

.footer-contact a:hover {
   color: #e8b84b
}

.footer-address {
   margin: 16px 0 0;
   color: #8fa3b2;
   font-size: .88rem;
   line-height: 1.6
}

.footer-bottom {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding: 24px 0;
   color: #718895;
   font-size: .78rem;
   line-height: 1.6
}

.footer-legal {
   display: grid;
   gap: 10px
}

.footer-bottom-links {
   display: flex;
   gap: 18px
}

.footer-bottom-links a {
   color: #718895;
   text-decoration: none
}

.footer-bottom-links a:hover {
   color: #e8b84b
}

.footer-creds {
   display: flex;
   align-items: center;
   gap: 30px;
   margin: 0;
   padding: 0;
   list-style: none
}

.footer-creds li {
   display: flex
}

.footer-creds img {
   width: auto;
   display: block;
   opacity: .9;
   transition: opacity .15s
}

.footer-creds img:hover {
   opacity: 1
}

.cred-sia,
.cred-safe {
   height: 52px
}

.cred-act {
   height: 34px
}

@media (max-width:900px) {
   .footer-main {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      padding: 50px 0
   }

   .footer-bottom {
      align-items: flex-start
   }

   .footer-creds {
      gap: 24px;
      flex-wrap: wrap
   }

   .cred-sia,
   .cred-safe {
      height: 44px
   }

   .cred-act {
      height: 28px
   }
}

@media (max-width:560px) {
   .footer-main {
      grid-template-columns: 1fr
   }
}

/* CWFOOTER-END */

/* --- carried from approved page --- */
.footer-contact svg {
   flex: none;
   margin-top: 2px
}

.footer-contact div {
   display: flex;
   align-items: flex-start;
   gap: 10px
}

/* ================================================================
   CLEAR WATCH — REMOTE CONCIERGE: REFRESH + ADDITIONS LAYER
   Added 20 Sep 2026. Purely additive: appended after the approved
   stylesheet so every rule here can be removed in one block without
   touching approved styling.
   ================================================================ */

/* --- 1. Accessibility: skip link ------------------------------- */
.skip-link {
   position: absolute;
   z-index: 200;
   top: -60px;
   left: 12px;
   border-radius: 0 0 6px 6px;
   padding: 10px 18px;
   color: var(--navy-950, #031426);
   background: var(--gold, #f4b820);
   font-size: .82rem;
   font-weight: 700;
   text-decoration: none;
   transition: top .18s ease
}

.skip-link:focus {
   top: 0
}

/* --- 2. Accessibility: visible focus ring ---------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
   outline: 3px solid var(--gold, #f4b820);
   outline-offset: 3px;
   border-radius: 3px
}

.button:focus-visible {
   outline-offset: 4px
}

/* --- 3. Mobile call bar (matches the other service pages) ------ */
.mobile-call {
   display: none
}

.mobile-call strong {
   color: var(--gold, #f4b820)
}

@media(max-width:760px) {
   .mobile-call {
      position: fixed;
      z-index: 80;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-top: 3px solid var(--gold, #f4b820);
      padding: 12px 14px;
      color: #fff;
      background: var(--navy-950, #031426);
      font-size: .72rem;
      text-decoration: none
   }

   body {
      padding-bottom: 58px
   }
}

/* --- 4. Related services strip --------------------------------- */
.related-services {
   border-top: 1px solid rgba(3, 20, 38, .09);
   background: #f6f8fa
}

.related-head {
   margin-bottom: 26px;
   max-width: 820px
}

.related-head .heading {
   font-size: clamp(1.45rem, 2.5vw, 2.05rem);
   line-height: 1.2
}

.related-head .heading {
   margin: 8px 0 10px
}

.related-head p {
   color: #4a5c6b;
   font-size: .92rem;
   line-height: 1.65
}

.related-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
   gap: 16px
}

.related-card {
   display: flex;
   flex-direction: column;
   gap: 8px;
   border: 1px solid rgba(3, 20, 38, .10);
   border-radius: 12px;
   padding: 20px 20px 18px;
   color: inherit;
   background: #fff;
   text-decoration: none;
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.related-card:hover {
   transform: translateY(-3px);
   border-color: rgba(19, 118, 173, .42);
   box-shadow: 0 16px 34px rgba(3, 20, 38, .10)
}

.related-card span {
   color: var(--blue-600, #1376ad);
   font-size: .68rem;
   font-weight: 800;
   letter-spacing: .14em;
   text-transform: uppercase
}

.related-card h3 {
   margin: 0;
   color: var(--navy-950, #031426);
   font-size: 1.02rem;
   font-weight: 700;
   letter-spacing: -.01em
}

.related-card p {
   margin: 0;
   color: #4a5c6b;
   font-size: .85rem;
   line-height: 1.6
}

.related-card em {
   margin-top: 4px;
   color: var(--blue-600, #1376ad);
   font-size: .78rem;
   font-weight: 700;
   font-style: normal
}

@media(prefers-reduced-motion:reduce) {
   .related-card {
      transition: none
   }

   .related-card:hover {
      transform: none
   }
}

/* --- 5. Refresh: typographic rhythm on small screens ----------- */
@media(max-width:560px) {
   .hero h1 {
      font-size: clamp(1.85rem, 8.4vw, 2.6rem);
      line-height: 1.12
   }

   .heading {
      font-size: clamp(1.42rem, 6.2vw, 1.95rem);
      line-height: 1.22
   }

   .hero-lead,
   .lead {
      font-size: .95rem;
      line-height: 1.66
   }

   .hero-actions {
      flex-direction: column;
      align-items: stretch
   }

   .hero-actions .button {
      justify-content: center
   }
}

/* --- 6. Refresh: consistent section rhythm --------------------- */
.section+.section {
   border-top: 1px solid rgba(3, 20, 38, .045)
}

.section-dark+.section-dark,
.section-dark+.section-soft,
.section-soft+.section-dark {
   border-top: 0
}

/* --- 7. Refresh: card interaction consistency ------------------ */
.concierge-model,
.boundary-card {
   transition: transform .2s ease, box-shadow .2s ease
}

.concierge-model:hover,
.boundary-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 14px 30px rgba(3, 20, 38, .09)
}

@media(prefers-reduced-motion:reduce) {

   .concierge-model,
   .boundary-card {
      transition: none
   }

   .concierge-model:hover,
   .boundary-card:hover {
      transform: none
   }
}

/* --- 8. Print ---------------------------------------------------*/
@media print {

   .site-header,
   .topbar,
   .mobile-call,
   .hero-actions,
   .skip-link {
      display: none !important
   }

   .section {
      page-break-inside: avoid
   }
}

/* --- 9. FIX: mobile drawer never opened ------------------------
   The canonical header script toggles `.main-nav.open`, but the only
   rule that slides the drawer in is `.nav-open .main-nav` (the older
   body-class hook). The drawer therefore stayed at translateX(105%)
   with z-index:-1 — open, but off-screen and behind the page.
   This affects every page using the canonical header, not just this
   one; the same fix belongs in the global stylesheet.
   ---------------------------------------------------------------- */
@media(max-width:900px) {
   .main-nav.open {
      transform: translateX(0);
      z-index: 90;
      overflow-y: auto;
      overscroll-behavior: contain
   }

   /* The drawer is a sibling of the toggle inside the header, so once it has a
     z-index it paints over its own close button. Lift the toggle above it. */
   .site-header {
      z-index: 100
   }

   .nav-toggle {
      position: relative;
      z-index: 120
   }

   .nav-scroll-lock {
      overflow: hidden
   }
}

/* ================================================================
   20 Sep 2026 — review round 2 (Ash)
   ================================================================ */

/* --- 10. FIX: FAQ toggle is not optically centred ---------------
   The toggle was a "+" text glyph centred in a 30px circle. Font
   metrics push the glyph off-centre, and the 45deg rotate that turns
   it into an X makes the offset obvious. Replaced with two CSS bars
   so both the + and the X are geometrically centred in every font.
   ---------------------------------------------------------------- */
.faq-plus {
   position: relative;
   font-size: 0;
   line-height: 0;
   color: transparent
}

.faq-plus::before,
.faq-plus::after {
   position: absolute;
   top: 50%;
   left: 50%;
   border-radius: 1px;
   background: var(--blue-700, #1376ad);
   content: ""
}

/* .faq-plus::before {
   width: 13px;
   height: 2px;
   transform: translate(-50%, -50%)
}

.faq-plus::after {
   width: 2px;
   height: 13px;
   transform: translate(-50%, -50%)
} */

.faq-item.open .faq-plus::before,
.faq-item.open .faq-plus::after {
   background: var(--navy-950, #031426)
}

/* --- 11. COMPACT: hero ------------------------------------------
   Was min-height:900px with 182px/128px padding, rendering 1014px
   tall on desktop with a large dead band under the content.
   ---------------------------------------------------------------- */
.hero {
   min-height: 0
}

.hero-inner {
   padding: 0px 0 92px
}

@media(max-width:900px) {
   .hero {
      min-height: 0
   }

   .hero-inner {
      padding: 112px 0 84px;
      gap: 38px
   }
}

@media(max-width:560px) {
   .hero {
      min-height: 0
   }

   .hero-inner {
      padding: 104px 0 72px
   }
}

/* --- 12. COMPACT: proof / customers section ---------------------
   Each assurance card carried 56px of dead space below its text
   (min-height:155px), and the section added 106px of bottom padding
   under the grid.
   ---------------------------------------------------------------- */
.proof-section {
   padding: 66px 0
}

.remote-customer-grid {
   margin-top: 32px
}

.remote-customer {
   min-height: 100px;
   padding: 18px
}

.remote-customer-note {
   margin-top: 13px
}

.remote-proof-grid {
   margin-top: 26px
}

.remote-proof-grid article {
   min-height: 0;
   padding: 24px 26px
}

@media(max-width:900px) {
   .proof-section {
      padding: 58px 0
   }
}

/* --- 13. Logo: embedded for offline review ----------------------
   Both logo images carry data-production-src with the live URL.
   ---------------------------------------------------------------- */
.site-header .brand img,
.footer-brand img {
   height: 34px;
   width: auto;
   display: block
}

.footer-brand img {
   height: 38px
}

/* ================================================================
   20 Sep 2026 — review round 3 (Ash): customer logo slots + colour
   ================================================================ */

/* --- 14. Customer cards: logo well + brand accent --------------
   Each card now carries a logo well above the name. Until cleared
   logo artwork is supplied, the well shows a brand-styled monogram.
   DEVELOPER: replace <span class="rc-logo-slot">XX</span> with
   <img src="…" alt="<company name>"> — the well sizes any image to
   38px high and centres it.
   ---------------------------------------------------------------- */
.remote-customer {
   position: relative;
   justify-content: flex-start;
   gap: 0;
   border-color: rgba(19, 93, 145, .16);
   padding-top: 26px;
   background: #fff;
   box-shadow: 0 1px 2px rgba(3, 20, 38, .04)
}

.remote-customer::before {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--gold, #f4b820), rgba(244, 184, 32, .25));
   content: ""
}

.remote-customer-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 42px;
   margin-bottom: 12px
}

.remote-customer-logo img {
   max-width: 160px;
   max-height: 38px;
   width: auto;
   height: auto;
   object-fit: contain
}

.rc-logo-slot {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 46px;
   height: 38px;
   border: 1px solid rgba(19, 93, 145, .22);
   border-radius: 6px;
   padding: 0 12px;
   color: var(--blue-700, #155d91);
   background: var(--blue-100, #eaf3f9);
   font-size: .92rem;
   font-weight: 800;
   letter-spacing: .06em
}

.remote-customer strong {
   margin-top: 2px
}

/* --- 15. Colour: assurance cards -------------------------------- */
.remote-proof-grid {
   gap: 16px;
   background: transparent
}

.remote-proof-grid article {
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(19, 93, 145, .14);
   border-radius: 10px;
   padding: 26px 26px 24px;
   background: linear-gradient(180deg, #f7fbfd, #fff 58%)
}

.remote-proof-grid article::before {
   position: absolute;
   top: 0;
   left: 0;
   width: 46px;
   height: 3px;
   background: var(--blue-600, #2878b0);
   content: ""
}

.remote-proof-grid article:nth-child(2)::before {
   background: var(--aqua, #55d9c7)
}

.remote-proof-grid article:nth-child(3)::before {
   background: var(--gold, #f4b820)
}

/* --- 16. Colour: break the run of white sections ---------------- */
.proof-section {
   background: var(--mist, #f4f7f9)
}

.proof-section .remote-customer-note {
   color: #6b7c8a
}

/* --- 17. Colour: concierge model cards -------------------------- */
.concierge-model {
   position: relative;
   overflow: hidden;
   border-radius: 10px
}

.concierge-model::after {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: rgba(19, 93, 145, .22);
   content: ""
}

.concierge-model.featured::after {
   background: var(--gold, #f4b820)
}

/* --- 18. Colour: related service cards -------------------------- */
.related-card {
   position: relative;
   overflow: hidden;
   background: linear-gradient(180deg, #f8fbfd, #fff 60%)
}

.related-card::before {
   position: absolute;
   top: 0;
   left: 0;
   width: 44px;
   height: 3px;
   background: var(--blue-600, #2878b0);
   content: ""
}

.related-card:nth-child(2)::before {
   background: var(--aqua, #55d9c7)
}

.related-card:nth-child(3)::before {
   background: var(--gold, #f4b820)
}

.related-card:nth-child(4)::before {
   background: var(--blue-700, #155d91)
}

/* --- 19. Colour: boundary cards --------------------------------- */
.boundary-card {
   position: relative;
   overflow: hidden
}

.boundary-card.handle {
   background: linear-gradient(180deg, #f5fbfa, #fff 62%)
}

.boundary-card.retain {
   background: linear-gradient(180deg, #f8fafc, #fff 62%)
}

/* ================================================================
   20 Sep 2026 — review round 4 (Ash): hero headline scale
   ----------------------------------------------------------------
   This page carried the largest H1 in the build: capped at 5.8rem
   (92.8px from 1920px up) against 5.1rem on the other service pages
   and 4.55rem on the homepage. With line-height .92 and a 780px
   column the headline wrapped to three tight lines and read as a
   solid slab, 6.6:1 against the 14.1px nav.
   Brought into line with Security Guarding / Mobile Patrols /
   Keyholding: same cap, looser leading, wider column so it wraps to
   two lines.
   ================================================================ */
.hero h1 {
   max-width: 880px;
   font-size: clamp(2.9rem, 5.4vw, 5.1rem);
   letter-spacing: -.048em;
   line-height: .98;
   color:#fff;
}

@media(max-width:900px) {
   .hero h1 {
      max-width: 100%;
      font-size: clamp(2.6rem, 6.6vw, 3.6rem);
      line-height: 1.02
   }
}

@media(max-width:560px) {
   .hero h1 {
      font-size: clamp(2.2rem, 10.5vw, 3rem);
      line-height: 1.04;
      letter-spacing: -.038em
   }
}

/* ================================================================
   20 Sep 2026 — review round 5 (Ash): overall vertical rhythm
   ----------------------------------------------------------------
   Audit at 1440px: every section carried padding:106px 0, i.e. 212px
   of empty band between every content block. Across 13 sections that
   was 2,322px of pure gutter — 18% of a 13,064px page — and it was
   the single largest source of white space. No other dead space of
   consequence: the biggest internal gaps were 46-48px.
   Reduced to 74px (≈30% tighter) while keeping the rhythm even.
   This is the site-wide .section value (104-106px on all 33 pages),
   so the same change belongs in the global stylesheet.
   ================================================================ */
.section {
   padding: 64px 0
}

.proof-section {
   padding: 56px 0
}

@media(max-width:900px) {
   .section {
      padding: 50px 0
   }

   .proof-section {
      padding: 44px 0
   }
}

@media(max-width:560px) {
   .section {
      padding: 42px 0
   }

   .proof-section {
      padding: 38px 0
   }
}

/* tighten the heading-block to content gap inside sections */
.layer-grid,
.sector-layout,
.scenario-controls {
   margin-top: 34px
}

.boundary-result {
   margin-top: 34px
}

/* --- 20. Short-column voids ------------------------------------
   Three two-column blocks leave one side much shorter than the
   other, which reads as dead space: the FAQ intro (627px column,
   content ends after ~230px) and the onboarding copy (488 vs 774).
   Pinning the short column keeps it beside its content instead of
   stranding it at the top of an empty column. No content change.
   ---------------------------------------------------------------- */
@media(min-width:1024px) {

   /* the onboarding block IS taller than the viewport, so pinning helps there */
   .onboarding-copy {
      position: sticky;
      top: 112px;
      align-self: start
   }

   /* the FAQ block fits on one screen, so pinning does nothing — narrow the
     intro column instead so the void is smaller and the questions get the room */
   .faq-grid {
      grid-template-columns: minmax(260px, .72fr) 1.5fr !important;
      gap: 54px !important
   }
}

/* ================================================================
   20 Sep 2026 — social media icons (footer)
   ----------------------------------------------------------------
   NOTE FOR THE DEVELOPER: this block and the matching markup belong
   in the GLOBAL footer template, not on this page alone. See
   SOCIAL-ICONS-SPEC.md. Adding it here means this page's footer no
   longer byte-matches the other 32 until the global change is made.
   Icons: Simple Icons (CC0) and Font Awesome Free brands (CC BY 4.0).
   ================================================================ */
.footer-social {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 22px 0 0;
   padding: 0;
   list-style: none
}

.footer-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 50%;
   color: #fff;
   background: rgba(255, 255, 255, .03);
   text-decoration: none;
   transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease
}

.footer-social svg {
   width: 15px;
   height: 15px;
   fill: currentColor;
   display: block
}

.footer-social a:hover {
   color: var(--navy-950, #031426);
   background: var(--gold, #f4b820);
   border-color: var(--gold, #f4b820);
   transform: translateY(-2px)
}

.footer-social a:focus-visible {
   outline: 3px solid var(--gold, #f4b820);
   outline-offset: 3px
}

@media(prefers-reduced-motion:reduce) {
   .footer-social a {
      transition: none
   }

   .footer-social a:hover {
      transform: none
   }
}

@media(max-width:700px) {
   .footer-social {
      justify-content: flex-start;
      gap: 10px;
      margin-top: 18px
   }

   .footer-social a {
      width: 40px;
      height: 40px
   }

   .footer-social svg {
      width: 17px;
      height: 17px
   }
}

/* --- GLOBAL: accreditation badges are now links -------------------
   Each badge links to its issuing body so a buyer can verify the
   claim. Opens in a new tab with rel="noopener". The img alt text
   becomes the link's accessible name.
   ------------------------------------------------------------------ */
.footer-creds a {
   display: block;
   border-radius: 4px;
   line-height: 0;
   text-decoration: none
}

.footer-creds a:hover img {
   opacity: 1
}

.footer-creds a:focus-visible {
   outline: 3px solid var(--gold, #f4b820);
   outline-offset: 4px
}