/* Tech Armour Smart Estate: refinement layer.
   Loaded after styles.css and booking.css. Layout, imagery and motion are untouched.
   Type: Red Hat Display (headings, prices) and Red Hat Text (body), self-hosted. */
@font-face{font-family:'Red Hat Display';src:url(assets/fonts/red-hat-display-latin-wght-normal.woff2) format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Red Hat Text';src:url(assets/fonts/red-hat-text-latin-wght-normal.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{--fog:#e9eded;--rule:#d3d9db;--ink-soft:#3b4f5a}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga"}
em,i,.tiny-number,.process-number,.editorial-note,.offer-number{font-style:normal}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500}
h2{font-size:clamp(34px,3.35vw,52px);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
h3{letter-spacing:-.022em}
p{text-wrap:pretty}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.hero :focus-visible,.assessments :focus-visible,.closing :focus-visible,.booking-summary :focus-visible,.device-dock :focus-visible,.scene-top :focus-visible{outline-color:#fff}

/* Labels: sentence case, no tracking, only where they carry information */
.eyebrow{font:500 14px/1.5 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:14px}
.eyebrow.light{color:#c6d2d8}
.eyebrow.light span{display:none}
.assessments .eyebrow{color:#a9bcc5}

/* Buttons */
.button{min-height:56px;padding:17px 30px;gap:0;justify-content:center;border-radius:2px;font:500 15px/1.2 var(--sans);letter-spacing:0;transition:background-color .25s,color .25s,border-color .25s}
.button:hover{background:#f56f57;border-color:#f56f57;box-shadow:none}
.button span{font-size:inherit}
.button.small{min-height:46px;padding:12px 22px;font-size:14px;gap:0}
.button.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.button.dark:hover{background:#17394c;border-color:#17394c}
.button.outline{background:transparent;border:1px solid rgba(255,255,255,.42);color:#fff}
.button.outline:hover{background:#fff;border-color:#fff;color:var(--navy)}
.text-link{gap:0;justify-content:flex-start;border:0;padding:4px 0;font:500 15px/1.4 var(--sans);letter-spacing:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:currentColor;transition:color .2s,text-decoration-color .2s}
.text-link:hover{color:inherit;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.light-link:hover{color:#fff}
.cta-short{display:none}

/* Header */
.header{border-bottom:1px solid var(--rule)}
.desktop-nav{gap:34px}
.desktop-nav a{font-size:14px;font-weight:500;letter-spacing:0}
.desktop-nav a:after{background:var(--navy)}
.mobile-nav a{font-size:16px;font-weight:500}

/* Hero: one typographic moment, no ornaments */
.hero-inner{padding-top:84px;padding-bottom:70px}
.hero h1{font-size:clamp(54px,5.5vw,88px);line-height:1.01;letter-spacing:-.026em;font-weight:500;margin:0 0 26px}
.hero-inner>p{font-size:18px;line-height:1.65;color:#e1e8eb;max-width:480px}
.hero-actions{margin-top:34px;gap:30px}
.hero-assurances{gap:28px;margin-top:38px}
.hero-assurances span{font-size:14px;gap:9px;color:#d2dde1}
.hero-assurances i{width:18px;height:18px;color:#d2dde1}

/* Intro bar */
.intro-bar>p{font:500 22px/1.25 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.intro-bar b{font-size:16px;font-weight:500;margin:0 0 6px}
.intro-bar div>span:last-child{font-size:14px;line-height:1.55;max-width:240px}
.intro-bar>div{padding-left:28px}

/* Section heads */
.section-head>p{font-size:16px;line-height:1.7;max-width:440px}

/* Explorer */
.estate-explorer{box-shadow:none;border:1px solid var(--rule)}
.explorer-top{font-size:13px}
.explorer-top>div{font-weight:500}
.device-pin{width:34px;height:34px;box-shadow:none;border:1px solid rgba(255,255,255,.85);background:rgba(7,29,43,.8);font:600 13px/1 var(--sans)}
.device-pin:hover,.device-pin.active{box-shadow:none;background:var(--coral);border-color:var(--coral);color:var(--navy)}
.scene-top>span{font-size:13px;font-weight:500;background:rgba(7,29,43,.82);text-shadow:none;padding:9px 14px}
.scene-back{font-size:13px;font-weight:500;padding:9px 14px}
.scene-footnote{font-size:12px;background:rgba(7,29,43,.7);padding:4px 8px;text-shadow:none}
.dock-hint{font-size:14px;max-width:380px}
.device-select{font-size:14px;gap:10px}
.device-select span{font:400 14px var(--sans);color:#8fa3ad}
.insight-panel h3{font-size:34px;line-height:1.08;margin-bottom:16px}
.insight-panel p{font-size:15px;line-height:1.7}
.insight-panel p+p{margin-top:14px}
.insight-panel .eyebrow{font-size:13px;margin-bottom:12px}
.selected-device-label{font-size:13px;margin-top:22px}
.selected-device-label span{font-size:15px;font-weight:500}
.insight-tabs button{font-size:14px;font-weight:500}
#insight-content h4{font-size:16px;font-weight:500;line-height:1.4}
.plain-checks li{font-size:14px;line-height:1.55;margin-top:7px;padding-left:16px}
.plain-checks li:before{width:6px;height:1px;top:.8em;background:var(--ink-soft)}
.layer-navigation button>span{font-size:14px;white-space:normal;line-height:1.3}
.layer-navigation small{font-size:13px}
.layer-navigation button.active{background:#e9eeef}
.explorer-caption{font-size:14px}
.explorer-caption .text-link{color:var(--ink)}

/* Perspective + report */
.perspective-copy>p{font-size:16px;line-height:1.75}
.perspective-copy>p+p{margin-top:16px}
.perspective-copy .text-link{margin-top:28px}
.report-copy>p{font-size:16px;line-height:1.75}
.report-features{margin:28px 0 34px}
.report-features>div{margin:20px 0}
.report-features p{font-size:15px;line-height:1.6}
.report-features b{font-size:16px;font-weight:500;margin-bottom:3px}
.report-copy p.fine-print{font-size:13px}
.paper-open{font-size:14px;font-weight:500;box-shadow:none;border-radius:2px}
.report-quick-links{margin-top:34px}
.report-quick-links button{font-size:15px;font-weight:500;padding:14px 0}
.report-quick-links span{font-size:13px;font-weight:400}

/* Assessments */
.package-grid{padding-top:0}
.package-card{padding:36px 32px 28px;min-height:0}
.package-top{margin-bottom:26px}
.package-top span{font:500 14px/1.3 var(--sans);color:#a3b6bf}
.featured .package-top span{color:#5a6d77}
.package-card h3{font-size:30px;line-height:1.12;min-height:0;margin-bottom:18px;letter-spacing:-.025em}
.package-description{font-size:15px;line-height:1.65;min-height:76px}
.package-fit{font-size:14px;padding:14px 0;color:#dfe9ed}
.featured .package-fit{color:#3f525c}
.check-list{font-size:14px;line-height:1.5;margin:22px 0 28px}
.check-list li{padding-left:22px;margin:11px 0}
.check-list li:before{content:'';width:9px;height:1px;background:currentColor;opacity:.55;top:10px;font-size:14px}
.package-price{font:500 44px/1.1 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:12px 0 22px}
.package-price small{font:400 14px var(--sans);letter-spacing:0;margin-right:8px}
.package-price span{font:400 13px/1.4 var(--sans);margin-top:6px;letter-spacing:0}
.package-card .button{width:100%;justify-content:center;font-size:15px;padding:16px 20px;min-height:54px}
.scope-link{font-size:14px;font-weight:500;padding:10px 0;margin-top:14px}
.scope-link span{font-size:20px;font-weight:400}
.package-bottom p{font-size:14px}
.monitoring-banner{background:#0d2a3a;border-color:#2f4856}
.monitoring-banner h3{font-size:28px}
.monitoring-banner p{font-size:15px;line-height:1.65}
.monitoring-banner .eyebrow{font-size:14px;margin-bottom:10px}
.monitoring-details li{font-size:14px;padding-left:18px;line-height:1.5}
.monitoring-details li:before{content:'';width:7px;height:1px;background:#9fb2bb;top:.8em}
.monitoring-action strong{font:500 40px/1.2 var(--serif)}
.monitoring-action .button{justify-content:center;font-size:15px;padding:14px 18px}
.monitoring-action small{font-size:13px}

/* Approach, FAQ, closing, footer */
.process-number{font:500 14px/1 var(--sans);color:var(--muted)}
.process-grid h3{font-size:22px;margin:16px 0 12px}
.process-grid p{font-size:15px;line-height:1.7}
.faq-layout h2{font-size:clamp(34px,3.2vw,46px)}
.faq-list summary{font-size:17px;font-weight:500}
.faq-list summary>span{font:300 26px/1 var(--sans);color:var(--ink-soft)}
.faq-list details p{font-size:15px;line-height:1.75}
.closing h2{font-size:clamp(40px,4.6vw,68px);line-height:1.04;letter-spacing:-.028em}
.footer b{font-size:15px;font-weight:500}
.footer p{font-size:14px}
.footer nav{font-size:14px;gap:24px}
.copyright{font-size:13px}

/* Dialogs */
dialog::backdrop{backdrop-filter:none}
.report-toolbar h2{font-size:24px}
.report-reader nav button{font-size:14px}
.report-reader nav button span{font-size:12px}
.report-pagination>span{font-size:13px}
.report-pagination>div{font-size:14px}
.scope-dialog h2{font-size:clamp(30px,3.2vw,42px)}
.scope-dialog p{font-size:15px;line-height:1.75}
.scope-dialog h3{font-size:22px}
.scope-dialog .check-list{font-size:15px}
.scope-dialog .scope-price{font:500 34px/1.2 var(--serif)}
.comparison-table{font-size:14px}
.comparison-table td{font-size:14px}
.comparison-table .button{font-size:14px;min-height:40px;padding:10px 16px}
.toast{font-size:14px}

/* Booking + confirmation */
.booking-heading{padding:56px 0 30px}
.booking-heading h1{font:500 clamp(38px,4.2vw,58px)/1.06 var(--serif);letter-spacing:-.032em}
.booking-heading>p{font-size:17px;max-width:560px}
.booking-progress{gap:30px;font-size:15px;margin-top:28px}
.booking-progress li{padding-bottom:7px;border-bottom:2px solid transparent}
.booking-progress li[aria-current]{border-bottom-color:var(--coral);color:var(--navy);font-weight:500}
.booking-progress span{border:0;border-radius:0;width:auto;height:auto;margin:0 5px 0 0;font-size:15px;display:inline}
.booking-progress span:after{content:'.'}
.booking-progress [aria-current] span{background:none;color:var(--navy)}
.connection-notice{font-size:14px}
.block-heading h2{font-size:26px;font-weight:500}
.block-heading p{font-size:14px;margin-top:6px}
.booking-package:hover{border-color:#8da0a9;background:#f5f8f8}
.booking-package:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:#fff}
.package-heading{font:500 24px/1.15 var(--serif)}
.package-subtitle{font-size:13px}
.package-amount{font:500 24px/1.2 var(--serif)}
.package-amount small{font:400 13px/1.6 var(--sans)}
.booking-package .package-fit{font-size:13px;color:#4c5f69;border-top-color:#d3d9db}
.booking-monitoring b{font-size:15px;font-weight:500}
.booking-monitoring span>span{font-size:14px}
.booking-monitoring small{font-size:13px}
.optional-tag{font-size:13px;color:var(--muted)}
.booking-field label{font-size:14px;font-weight:500}
.booking-field small{font-size:13px;font-weight:400}
.booking-field input,.booking-field select,.booking-field textarea{font-size:16px;border-radius:2px;border-color:#cdd5d8}
.booking-field input:focus,.booking-field select:focus,.booking-field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(250,129,107,.28)}
.booking-extras summary{font-size:15px}
.appointment-trigger{border-radius:2px}
.appointment-trigger strong{font:500 22px/1.3 var(--serif)}
.appointment-trigger small{font-size:14px}
.appointment-caption{font-size:13px}
.booking-pay{font-size:16px;border-radius:2px}
.booking-submit>p:not(.booking-error){font-size:13px}
.booking-terms{font-size:14px}
.booking-summary:before{display:none}
.booking-summary h2{font-size:30px}
.booking-summary>p:not(.booking-price-note){font-size:15px;line-height:1.7}
.summary-inclusions summary{font-size:14px}
.summary-inclusions li{font-size:14px}
.summary-inclusions li:before{content:'';width:7px;height:1px;background:currentColor;top:.9em}
.summary-appointment>span{font-size:13px;color:#a9bcc5}
.summary-appointment strong{font:500 20px/1.35 var(--serif);color:#fff}
.summary-appointment small{font-size:14px}
.booking-total>span{font-size:14px}
.booking-total strong{font:500 34px/1.2 var(--serif);color:#fff}
.booking-recurring{font-size:14px}
.booking-recurring strong{color:#fff}
.booking-price-note{font-size:13px}
.stripe-assurance{font-size:13px}
.stripe-assurance b{font:600 14px/1 var(--sans);letter-spacing:0;margin-left:0;color:#e1e9ec}
.booking-help{font-size:14px}
.booking-help a{font-size:14px;font-weight:500}
.calendar-heading h2{font-size:28px}
.calendar-heading p{font-size:14px}
.calendar-weekdays{font-size:13px}
.calendar-days button{border-radius:2px;font-size:14px}
.calendar-days button:not(:disabled):after{border-radius:0;background:var(--coral)}
.calendar-days button:not(:disabled):hover{background:#e9eeef;border-color:#cbd5d8}
.calendar-key{font-size:13px}
.calendar-key>span{border-radius:0;background:var(--coral)}
.calendar-times h3{font-size:24px}
.time-options button{font-size:14px;border-radius:2px;background:#fff}
.times-timezone,.time-placeholder,.selected-appointment{font-size:14px}
.calendar-footer p{font-size:13px}
.calendar-footer .button{font-size:14px}
.confirmation-icon{border-radius:0}
.confirmation-card>p{font-size:15px}
.confirmation-details div{font-size:14px}
.order-footer{font-size:13px}

@media(max-width:960px){
  #layer-intro h3{grid-row:1/4}
  .hero h1{font-size:clamp(50px,8.4vw,72px)}
  .package-card h3{min-height:0;font-size:26px}
  .package-price{font-size:36px}
  .package-card .button{font-size:14px;padding:14px 12px}
  .package-top span{font-size:13px}
  .check-list{font-size:13px}
  .package-description{font-size:14px;min-height:0}
  .package-fit{font-size:13px}
}
@media(max-width:700px){
  .cta-long{display:none}.cta-short{display:inline}
  .header-cta{font-size:14px!important;padding:10px 16px!important;min-height:42px!important;gap:0!important;max-width:none!important}
  .header-cta.text-link{padding:0!important;min-height:0!important}
  h2,.section-head h2,.perspective-copy h2,.report-copy h2,.faq-layout h2,.scope-dialog h2{font-size:31px;line-height:1.12}
  .closing h2{font-size:40px}
  .hero{height:auto;min-height:680px}
  .hero-inner{padding-top:56px;padding-bottom:56px}
  .hero h1{font-size:clamp(46px,13.4vw,58px);margin:0 0 22px}
  .hero-inner>p{font-size:16px;max-width:340px}
  .hero-actions .button{font-size:15px;min-height:54px;padding:16px 24px}
  .hero-actions .text-link{font-size:15px}
  .hero-assurances{gap:12px 20px;flex-wrap:wrap}
  .hero-assurances span{font-size:13px}
  .intro-bar{gap:18px;grid-template-columns:1fr}
  .intro-bar>div{border-left:0;border-top:1px solid var(--rule);padding:16px 0 0}
  .intro-bar>div:first-of-type{border-top:0;padding-top:0}
  .intro-bar b{font-size:16px}
  .intro-bar div>span:last-child{font-size:14px;max-width:none}
  .section-head>p{font-size:15px}
  .explorer-top{font-size:12px}
  .scene-top>span,.scene-back{font-size:12px;padding:6px 9px}
  .scene-footnote{font-size:11px;left:7px;bottom:6px}
  .device-pin{width:28px;height:28px;font-size:11px}
  .dock-hint{font-size:12px;max-width:62%}
  .device-dock>.text-link{font-size:13px}
  .device-select{font-size:12px;line-height:1.3;padding:7px 6px;gap:5px}
  .device-select span{font-size:12px}
  .insight-panel p{font-size:15px}
  .insight-panel h3{font-size:28px}
  .plain-checks li{font-size:14px}
  .layer-navigation button>span{font-size:12px}
  .layer-navigation small{font-size:12px}
  .explorer-caption{font-size:13px}
  .explorer-caption .text-link{font-size:13px}
  .perspective-copy>p,.report-copy>p{font-size:15px}
  .package-card{padding:28px 24px}
  .package-card h3{font-size:30px}
  .package-card .check-list{font-size:15px}
  .package-description{font-size:15px}
  .package-card .button{font-size:15px;padding:16px}
  .package-price{font-size:40px}
  .scope-link{font-size:14px}
  .monitoring-action .button{font-size:15px}
  .process-grid{grid-template-columns:1fr}
  .process-grid p{font-size:15px}
  .faq-list summary{font-size:16px}
  .faq-list details p{font-size:15px}
  .footer p{font-size:13px;max-width:none}
  .footer nav{font-size:14px}
  .report-toolbar h2{font-size:22px}
  .report-reader nav button{font-size:13px}
  .report-pagination>span{font-size:12px}
  .booking-heading h1{font-size:38px}
  .booking-heading>p{font-size:15px;max-width:none}
  .booking-progress{gap:18px;font-size:14px}
  .package-heading{font-size:22px}
  .package-amount{font-size:22px}
  .package-subtitle{font-size:13px}
  .booking-pay{font-size:15px}
  .calendar-heading h2{font-size:25px}
  .time-options button{font-size:14px}
}
@media(max-width:380px){
  .hero h1{font-size:44px}
  .layer-navigation button>span{font-size:12px}
}
.booking-pay{justify-content:center;gap:12px}
.booking-pay>span:last-child{margin-left:0;font-size:inherit}
.report-reader nav button span{flex:0 0 22px;min-width:22px}
.package-card .package-top span,.package-card .package-top span:first-child,.package-card .package-top span:last-child{font:500 14px/1.3 var(--sans);font-style:normal;letter-spacing:0;color:#a3b6bf}
.package-card.featured .package-top span,.package-card.featured .package-top span:first-child,.package-card.featured .package-top span:last-child{color:#5a6d77}
.check-list li:before{color:inherit}

/* Round 2: balanced insight panel and varied section heads */
@media(min-width:901px){
  .insight-panel{display:flex;flex-direction:column}
  #layer-intro:not([hidden]){flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
  #layer-intro h3{font-size:clamp(40px,3.6vw,52px);line-height:1.04;letter-spacing:-.02em;margin:0}
  #layer-intro p{max-width:34ch}
  #layer-intro p:first-of-type{color:var(--ink)}
  #layer-intro p:last-of-type{color:var(--muted);padding-top:18px;border-top:1px solid var(--line)}
  #layer-intro p+p{margin-top:0}
  #layer-intro .intro-copy{display:grid;gap:18px}
}
.assessments .section-head{display:block;text-align:center;margin-bottom:56px}
.assessments .section-head h2{max-width:20ch;margin:0 auto}
.assessments .section-head>p{max-width:52ch;margin:18px auto 0}
.approach .section-head{display:block;margin-bottom:0}
.approach .section-head h2{font-size:clamp(40px,4.4vw,62px);line-height:1.04;letter-spacing:-.024em;max-width:15ch}
.approach .section-head>p{max-width:46ch;margin-top:22px}
@media(max-width:700px){.assessments .section-head{text-align:left}.assessments .section-head h2,.assessments .section-head>p{margin-left:0}}

/* picture wrappers (AVIF with WebP/JPEG fallback) */
.hero picture,.closing picture,.estate-overview picture{display:contents}
.estate-overview picture>img{width:100%;height:100%;object-fit:fill}
.closing picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:76% center;opacity:.3}
.layers-static{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:20px}
.layers-static h3{font-size:20px;margin:0 0 6px}.layers-static p,.layers-static li{font-size:15px;line-height:1.7}.layers-static ul{margin:8px 0 0;padding-left:18px}

/* Preloader: the Tech Armour mark draws itself once per visit, then lifts away */
#preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#071d2b;pointer-events:none;animation:pl-lift .65s cubic-bezier(.76,0,.24,1) 1.45s forwards}
.pl-done #preloader{display:none}
#preloader svg{overflow:visible;animation:pl-fade .25s ease 1.4s forwards}
#preloader path{stroke-dasharray:1;stroke-dashoffset:1}
.pl-shield{animation:pl-draw .85s cubic-bezier(.65,0,.35,1) .05s forwards}
.pl-bug{animation:pl-draw .45s cubic-bezier(.65,0,.35,1) forwards}
.pl-b2{animation-delay:.4s}.pl-b1{animation-delay:.6s}.pl-b3{animation-delay:.7s}.pl-b4{animation-delay:.75s}
@keyframes pl-draw{to{stroke-dashoffset:0}}
@keyframes pl-fade{to{opacity:0}}
@keyframes pl-lift{0%{clip-path:inset(0 0 0 0)}99%{clip-path:inset(0 0 100% 0);visibility:visible}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  #preloader{animation:pl-fade .25s ease .35s forwards}
  #preloader svg{animation:none}
  #preloader path{stroke-dashoffset:0;animation:none!important}
}
.footer nav{flex-wrap:wrap;gap:10px 24px}

/* Touch targets: at least 44px on phones */
@media(max-width:700px){
  .text-link,.scene-back,.footer nav a,.insight-tabs button,.explorer-caption a{display:inline-flex;align-items:center;min-height:44px}
  .faq-list summary{min-height:44px}
  .device-pin{position:relative}.device-pin:after{content:"";position:absolute;inset:-9px}
  .footer nav{gap:0 22px}
}