/*
 * 2212 PSS / PRIVATE SECURITY SOLUTIONS
 * Security-operations visual system. Edit this file to change the theme.
 * The base responsive components live in styles.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root {
  --navy:#0a1115;--navy-2:#111c21;--ink:#e5eded;
  --muted:#8fa3a8;--line:#2e4045;--gold:#b8c59c;
  --gold-light:#dae5c7;--paper:#0b1418;
  --serif:"Barlow Condensed",Impact,sans-serif;
  --sans:Inter,Arial,sans-serif;
  --mono:"IBM Plex Mono",monospace;
}
html{scroll-padding-top:118px}
body{background:#0b1418;color:#e4ebeb}
::selection{background:#b7caa2;color:#061014}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:2px solid #c6dab5;outline-offset:2px}
.topline{background:#070c0f;color:#9cabad;border-bottom:1px solid #1b2c30;font:500 9px/1.4 var(--mono);letter-spacing:1.45px}
.top-sep{color:#b0c59c;padding:0 8px}
.micro-status-dot,.folio-pulse{display:inline-block;width:6px;height:6px;background:#b1c9a5;border-radius:50%;box-shadow:0 0 9px #b1c9a588;vertical-align:middle;margin-left:7px}
.site-header{background:#0c1519ed;backdrop-filter:blur(16px);border-bottom:1px solid #2d4147}
.navbar{height:77px}
.brand{gap:12px}
.brand-icon{display:flex;align-items:center;justify-content:center;width:35px;height:41px;color:#c3d4b6}
.brand-icon svg{width:29px;height:35px}
.brand-mark{font:700 29px/1 var(--serif);color:#ebf2ee;letter-spacing:.1px;white-space:nowrap}
.brand-mini{font:600 17px/1 var(--mono);vertical-align:2px;margin:0 2px;color:#afc59d}
.brand-divider{height:30px;background:#405258}
.brand-text{gap:5px}.brand-text strong{font-size:9px;letter-spacing:1.35px;color:#d4e1da}.brand-text small{font:400 8px/1.2 var(--mono);letter-spacing:.7px;color:#80979b}
.desktop-nav a{font:500 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.55px;color:#9bafb1}
.desktop-nav a:hover{color:#d6e5ce}
.nav-contact{color:#101815;background:#becfae;border:1px solid #c8dabd;padding:13px 16px;font:700 10px/1.2 var(--mono);letter-spacing:.2px;transition:.2s}
.nav-contact:hover,.btn-gold:hover{background:#e1edda;color:#101915}
.mobile-nav{background:#0c181d}.mobile-nav a{border-color:#2c4144}
.container{max-width:1400px}
.hero{background:#071116;min-height:710px;border-bottom:1px solid #273d42}
.hero-art{background-image:url('./assets/hero-pss.svg');opacity:1;background-position:57% center}
.hero-vignette{background:linear-gradient(90deg,#071216f5 0%,#071216ec 30%,#08151cc1 53%,#09161b3f 79%,#0b151824 100%),linear-gradient(0deg,#051013e3 0%,transparent 38%)}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 36px,#6b9caa06 37px,#6b9caa06 38px),repeating-linear-gradient(90deg,transparent 0px,transparent 36px,#6b9caa06 37px,#6b9caa06 38px)}
.hero-content{min-height:640px}
.hero-copy{padding:108px 0 110px;max-width:760px;position:relative;z-index:2}
.eyebrow,.eyebrow.light{font:600 10px/1.5 var(--mono);letter-spacing:1.4px;color:#b8cdb0}
.eyebrow-rule{background:#bdd0ad}
.hero .eyebrow{display:flex;align-items:center;gap:13px}
.series{color:#84999e}
.hero h1{font:700 clamp(70px,8vw,128px)/.85 var(--serif);letter-spacing:1.8px;margin-top:30px;text-transform:uppercase;color:#f2f6f0}
.hero h1 em{font-weight:500;letter-spacing:2px;font-style:normal;color:#c5d4bf}
.hero-highlight{color:#b3c6a6}
.hero-lead{font-size:14px;max-width:555px;line-height:1.95;letter-spacing:.05px;color:#b1c1c3;margin-top:35px}
.hero-actions{margin-top:37px;gap:28px}
.btn{font:700 10px/1.3 var(--mono);letter-spacing:1.1px;border-radius:0}
.btn-gold{color:#0b1619;background:#c0d1ae;border:1px solid #c0d1ae}
.text-link{font:600 10px/1.5 var(--mono);letter-spacing:.8px}
.text-link.on-dark{color:#d0dcd7}
.hero-folio{right:43px;bottom:105px;top:auto;display:block;width:244px;height:auto;padding:20px;border:1px solid #6c92958a;background:#0b191fd6;box-shadow:0 20px 70px #02090d77;backdrop-filter:blur(8px);font-family:var(--mono)}
.folio-top{font-size:11px;color:#dce9dc;letter-spacing:1.2px;padding-bottom:15px;border-bottom:1px solid #405358}
.folio-top .folio-pulse{margin:0 9px 0 0}
.folio-grid{display:grid;grid-template-columns:76px 1fr;gap:12px 6px;padding:20px 0}
.folio-grid span{font-size:9px;color:#789196}.folio-grid strong{font:500 10px/1.3 var(--mono);color:#d1e1d8;letter-spacing:.4px}
.folio-bottom{padding-top:15px;border-top:1px solid #405358;font:500 8px/1.5 var(--mono);color:#acbeaf;letter-spacing:.6px}
.hero-footer{background:#0c191eeb;border-top:1px solid #33464a}
.hero-footer-content{font:500 10px/1 var(--mono);letter-spacing:1px;color:#b0bfc0}
.gold-star{color:#b4c69f}.hero-scroll{color:#b9cfac}
.section-pad{padding:105px 0}
.intro-section,.collection-section,.quote-section,.process-section{background:#0b1418;color:#e8eeec}
.section-head h2,.quote-sidebar h2,.process-title h2,.closing h2{font:600 clamp(43px,5vw,70px)/.95 var(--serif);letter-spacing:.3px;text-transform:uppercase;color:#f2f6f1}
.section-head h2 em,.quote-sidebar h2 em,.process-title h2 em,.closing h2 em{font-style:normal;color:#b7c8a8}
.section-intro,.quote-sidebar>p:not(.eyebrow),.process-title p{color:#91a7aa;font-size:12px;line-height:2.1}
.split-head{padding-bottom:16px}
.services-grid{gap:16px}
.service-tile{border:1px solid #34484d;height:405px;box-shadow:none;background:#132329}
.service-art{filter:grayscale(.85) saturate(.55) brightness(.62) contrast(1.23)}
.service-tile:after{content:"";position:absolute;inset:0;pointer-events:none;border-top:3px solid #b9cda2;opacity:.65}
.service-tile:hover{border-color:#a8bd9d}
.service-overlay{background:linear-gradient(0deg,#061014ed 0%,#09151ac5 53%,transparent 100%)}
.service-number{font:600 9px/1.4 var(--mono);letter-spacing:1.15px;color:#baceab}
.service-tile h3{font:600 46px/.96 var(--serif);text-transform:uppercase;letter-spacing:1px}
.service-tile p{color:#aab8b7;font-size:11px;line-height:1.75}
.service-more{font:600 9px/1.4 var(--mono);letter-spacing:.6px;color:#c5d9b7}
.collection-section{background:#0f1b20;border-top:1px solid #2b3e43;border-bottom:1px solid #2b3e43}
.tabs{border-color:#32464a;gap:8px}
.tab{background:#0b171c;border:1px solid #304348;color:#93a7aa;font:600 11px/1.5 var(--mono);letter-spacing:.5px;transition:.15s}
.tab:hover{color:#e4ece7;background:#192a30}.tab.active{color:#e2ecdb;background:#21332e;border:1px solid #7c9b84;border-bottom:3px solid #bdd0ad}
.tab-index{color:#a5c0a5}.tab-arrow{color:#a9bfa3}
.fleet-bar{border-color:#34464a;color:#dce8e0}
.fleet-bar strong{font:600 12px/1.3 var(--mono);letter-spacing:1px;color:#edf3ed}
.fleet-bar .fleet-description,#fleetCount{font:400 10px/1.5 var(--mono);color:#8a9ea2;letter-spacing:.2px}
.live-dot{background:#b4cba7;box-shadow:0 0 0 3px #b4cba71c}
.ground-filters{border-color:#35494b}.mini-filter{background:#142329;border-color:#32474b;color:#9badac;font:500 10px var(--mono)}.mini-filter.selected{background:#bbceb0;color:#0b1418;border-color:#bbceb0}
.fleet-grid{gap:17px}
.fleet-card{background:#111e23;border:1px solid #34474a;box-shadow:none;transition:transform .2s,border-color .2s}
.fleet-card:hover{transform:translateY(-3px);border-color:#a5bba7}
.fleet-image{background:#13262c;filter:saturate(.65) brightness(.86)}
.fleet-content{color:#d8e4de}
.fleet-topline{border-color:#334a4d}.fleet-category{color:#c5d3c8;font:600 10px/1.3 var(--mono);letter-spacing:.1px}
.fleet-status{border:1px solid #435a53;background:#1c302b;color:#b8cfaa;font:500 9px/1.2 var(--mono);letter-spacing:.15px;padding:5px 8px}
.fleet-card h3{font:600 32px/1.1 var(--serif);text-transform:uppercase;color:#eaf1eb;letter-spacing:.3px}
.fleet-description-long{color:#8da5a7!important;font-size:11px!important}
.fleet-specs{border-color:#34474a}
.fleet-specs>div+div{border-color:#34474a}
.fleet-specs span{font:400 9px/1.4 var(--mono);color:#82999b}
.fleet-specs strong{color:#dbe6df;font:600 11px/1.5 var(--mono)}
.fleet-actions{border-color:#34474a}.model-source{font:400 9px/1.5 var(--mono);color:#9cafa9}
.choose-vehicle{color:#14221b;background:#bed0b0;font:700 9px/1.4 var(--mono);letter-spacing:.2px;border:1px solid #bed0b0;padding:12px 11px}
.choose-vehicle:hover{background:#dae7d1}
.catalog-disclaimer{color:#92a7a9;font-size:10px;border-color:#3b5255;background:#16252a;line-height:1.8}
.disc-icon{color:#bacda8}
.quote-section{background:radial-gradient(circle at 3% 6%,#1b3137 0%,transparent 45%),#091318}
.quote-steps>div{border-color:#30464a}
.quote-steps>div>span{font:500 13px var(--mono);color:#b9caa9}
.quote-steps strong{color:#e5ebe7;font-size:12px}.quote-steps small{color:#91a6a7}
.private-note{background:#17282b;border-left:2px solid #bdcfad}
.private-note>span{color:#baceb1}.private-note strong{font:600 10px/1.4 var(--mono);color:#dce9d7;letter-spacing:1px}.private-note p{color:#9fb0ae}
.form-card{background:#142228;border:1px solid #496166;box-shadow:0 25px 80px #02080c77}
.form-top{background:#192d30;border-bottom:1px solid #455e57}
.form-top small{color:#afc6ad;font:500 10px/1.4 var(--mono);letter-spacing:1.2px}
.form-top h3{font:600 36px/.95 var(--serif);text-transform:uppercase;letter-spacing:.6px}
.form-emblem{font:700 24px/1 var(--serif);letter-spacing:1px;color:#d6e6c7;border-color:#718c7e}.form-emblem-mini{display:block;font:500 9px/1 var(--mono);letter-spacing:1px;margin-top:8px}
.form-block-heading{color:#d0dcd5;border-color:#385056;font:600 10px/1.3 var(--mono);letter-spacing:.9px}
.form-block-heading span{font:600 16px/1 var(--mono);color:#b2c9a6}
.service-radio{border-color:#40585a;color:#b4c8c2;background:#112024}
.service-radio span{color:#becfae}
.service-radio strong{font:600 11px var(--mono)}
.service-radio.selected{border-color:#c0d3af;color:#e1eedc;background:#263e34}
.field label{font-size:11px;color:#c7d6d2;font-weight:600}
.field label span{color:#bfd5ab}
.field input:not([type=radio]):not([type=checkbox]),.field select,.field textarea{background:#0d1a1e;border:1px solid #40575a;color:#e4ece9;font-size:12px;min-height:49px;border-radius:0;color-scheme:dark}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#c1d4b3}
.field input::placeholder,.field textarea::placeholder{color:#667e81}
.field select option{background:#102126;color:#e0ebe5}
.choice,.package{border-color:#40575a;color:#c7d7d2;background:#102025}
.choice input,.consent input,.package input{accent-color:#bdd0b1}
.package:has(input:checked){background:#263f34;border-color:#bdd2ae}
.package strong{color:#dce8df}.package small{color:#92aaa8}
.form-legal-note{background:#25302b;border-color:#bbcead;color:#b0bfb4}
.consent{color:#a4b7b6}.consent a{color:#d4e3bf}.consent strong{color:#c6dcae}
.submit-caption{color:#80999c}
#formFeedback.success{color:#c5e2ca;background:#1a3c30;border-color:#466f52}
#formFeedback.error{color:#ffd0cb;background:#3e2524;border-color:#8d5956}
.process-section{background:#0b1418}.process-line{background:#435855}.process-item>span{font:600 10px var(--mono);color:#b8cba9}.process-item h3{font:600 32px/.98 var(--serif);text-transform:uppercase;color:#e8efe9}.process-item p{color:#8ba1a3}
.closing{background:linear-gradient(120deg,#182e2c,#0b161a);border-top:1px solid #445a52}.closing:after{font-family:var(--serif);font-size:390px;letter-spacing:0;color:#b2c6a4}.closing h2 em{color:#c5d6b7}
.footer{background:#070c0f;border-top:1px solid #28393b}.footer-brand{font:700 44px/1 var(--serif);letter-spacing:1px;color:#edf4eb}.footer-brand span{font:600 13px var(--mono);color:#b9cdaa;letter-spacing:.8px}.footer-right span{color:#b9cdaa;font-family:var(--mono)}.footer-bottom{border-color:#2b3d40}.footer-bottom a{color:#c2d4ae}
.privacy-page{background:#0b1418}.privacy-content h1{font:600 58px/1 var(--serif);text-transform:uppercase;color:#e9f1e8}.privacy-content h1 em{color:#bbd0ae}.privacy-content h2{font:600 28px var(--serif);text-transform:uppercase;color:#e2ebe1}.privacy-content p{color:#a4b8b6}.privacy-content p a{color:#d1e1bc}
@media(max-width:1150px){.hero-folio{right:30px;bottom:90px}.hero h1{font-size:clamp(67px,8vw,115px)}}
@media(max-width:960px){.hero-folio{display:none}.hero-vignette{background:linear-gradient(90deg,#071216ee 0%,#071216cc 55%,#07121666 100%),linear-gradient(0deg,#061116d6 0%,transparent 50%)}.service-tile h3{font-size:39px}}
@media(max-width:690px){.navbar{height:69px}.brand-icon{width:27px}.brand-icon svg{width:25px}.brand-mark{font-size:24px}.brand-mini{font-size:14px;vertical-align:1px}.brand-text strong{font-size:7.5px;letter-spacing:.5px}.brand-text small{font-size:6.5px;letter-spacing:0}.hero{min-height:670px}.hero-content{min-height:598px}.hero-copy{padding:87px 0 90px}.hero h1{font-size:clamp(57px,11.7vw,77px);line-height:.93;letter-spacing:0}.hero-lead{font-size:12px;line-height:1.85;margin-top:28px}.hero-actions{gap:18px}.btn{font-size:9px}.hero-footer-content{font-size:8px}.section-pad{padding:74px 0}.section-head h2,.quote-sidebar h2,.process-title h2{font-size:46px}.services-grid{gap:12px}.service-tile{height:320px}.service-tile h3{font-size:41px}.tabs{border-top:0}.tab{border:1px solid #334b4c}.fleet-card h3{font-size:32px}.form-top h3{font-size:32px}.footer-brand span{font-size:10px}.closing h2{font-size:44px}.privacy-content h1{font-size:44px}}
@media(max-width:370px){.brand-icon{display:none}.hero h1{font-size:53px}.brand{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fleet-card{transition:none}}
/* Mobile: long technical headline stays inside the viewport even without webfonts */
@media(max-width:690px){.hero-copy{max-width:100%;min-width:0}.hero h1{font-size:clamp(47px,10.7vw,70px)}}
html,body{max-width:100%;overflow-x:clip}

/* Phiên bản nội dung tiếng Việt: cải thiện khả năng đọc của câu dài và dấu tiếng Việt. */
.hero h1{font-size:clamp(68px,7vw,105px);line-height:.91;letter-spacing:.1px}
.hero h1 em{display:inline-block;font-size:.65em;letter-spacing:.65px;line-height:1.12;margin-top:10px}
.hero-lead{font-size:15px;line-height:1.85;max-width:590px}
.section-intro,.quote-sidebar>p:not(.eyebrow),.process-title p{font-size:13px;line-height:1.9}
.service-tile p{font-size:12.5px;line-height:1.8}
.service-tile h3{font-size:43px;line-height:1.06}
.service-number,.service-more{font-size:10px}
.fleet-description-long{font-size:12.5px!important;line-height:1.8!important}
.fleet-bar .fleet-description{font-size:11px}
.catalog-disclaimer,.private-note p,.submit-caption,.form-legal-note{font-size:11px;line-height:1.85}
.fleet-topline{gap:10px;align-items:flex-start}
.fleet-status{max-width:144px;text-align:right;line-height:1.4}
.service-radio strong{font-size:11px;white-space:normal;text-align:center}
.quote-steps small,.package small{font-size:11px;line-height:1.6}
.footer-top p{font-size:12px;letter-spacing:0}
@media (max-width:1150px){.hero h1{font-size:clamp(67px,7vw,102px)}}
@media (max-width:960px){.hero h1{font-size:clamp(58px,8vw,86px)}}
@media (max-width:690px){
 .hero h1{font-size:clamp(52px,11vw,75px);line-height:.96}
 .hero h1 em{font-size:.57em;letter-spacing:0;margin-top:9px}
 .hero-lead{font-size:13px;line-height:1.8}
 .hero-copy{padding-top:74px}
 .service-tile h3{font-size:38px}
 .service-radio strong{font-size:10px;line-height:1.45}
 .fleet-status{font-size:9px}
 .section-intro,.quote-sidebar>p:not(.eyebrow),.process-title p{font-size:12.5px}
}
@media (max-width:370px){.hero h1{font-size:50px}.hero h1 em{font-size:.54em}}

/* ===== v1.2 / private security practice ===== */
.services-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.security-primary{background:#152820}
.security-tile-art{position:absolute;inset:0;background:radial-gradient(circle at 65% 32%,#61866a66,transparent 48%),linear-gradient(147deg,#1e3d3b,#071318 74%);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#a3c49c}
.security-tile-art:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 30px,#cbe8bf0d 31px,transparent 32px),repeating-linear-gradient(0deg,transparent 0 30px,#cbe8bf0d 31px,transparent 32px)}
.security-tile-art svg{width:65%;height:70%;position:relative;opacity:.32;transform:translate(18%,-16%)}
.security-tile-art>span{position:absolute;top:19px;left:22px;font:600 10px var(--mono);letter-spacing:1.1px;color:#9aafa6}
.services-grid .service-tile h3{font-size:clamp(31px,3.1vw,43px)}
.services-grid .service-overlay{inset:auto 22px 26px}
.services-grid .service-tile{height:405px}
.services-grid .service-tile p{min-height:63px}
.protection-section{background:#101d21;border-top:1px solid #30464a;border-bottom:1px solid #31474b}
.protection-heading{margin-bottom:40px}
.protection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.protection-card{position:relative;padding:29px 29px 25px;min-height:365px;display:flex;flex-direction:column;border:1px solid #344c4e;background:linear-gradient(150deg,#182a2d,#0a1519);transition:border-color .2s,transform .2s}
.protection-card:hover{border-color:#92af97;transform:translateY(-2px)}
.protection-ornament{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #324749;padding-bottom:21px;color:#9bb99b}
.protection-ornament span{font:600 11px var(--mono);letter-spacing:1px;color:#b6cbb2}
.protection-ornament svg{height:34px;width:34px;color:#b0c5b0}
.protection-kicker{font:600 10px/1.4 var(--mono);color:#8baba3;letter-spacing:.9px;margin:27px 0 11px}
.protection-card h3{font:600 clamp(28px,2.9vw,41px)/1.08 var(--serif);text-transform:uppercase;color:#edf1eb;margin:0 0 14px}
.protection-card>p:not(.protection-kicker){font:400 12.5px/1.85 var(--sans);color:#9fb1af;margin:0 0 28px;max-width:350px}
.protection-cta{background:transparent;color:#c8ddba;border:0;border-top:1px solid #395550;padding:18px 0 0;text-align:left;margin-top:auto;font:600 10px/1.4 var(--mono);letter-spacing:.4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.protection-cta:hover{color:#f1f9ed}
.protection-note{margin-top:20px;border-left:2px solid #9cbb94;background:#1a2c2d;padding:20px 25px;display:grid;grid-template-columns:195px 1fr;gap:20px;align-items:start}
.protection-note strong{font:600 10px/1.6 var(--mono);letter-spacing:1px;color:#d6e8cc}
.protection-note p{font:400 11px/1.85 var(--sans);color:#9cafa9;margin:0}
.form-service-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-radio{padding:12px 4px;min-height:84px}
.service-radio strong{font-size:10px;line-height:1.5}
.desktop-nav{gap:19px}
@media(max-width:1150px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.services-grid .service-tile{height:340px}.services-grid .service-overlay{inset:auto 24px 24px}.services-grid .service-tile h3{font-size:40px}.protection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:690px){.services-grid,.protection-grid{grid-template-columns:1fr}.services-grid .service-tile{height:305px}.services-grid .service-tile p{min-height:0}.protection-card{min-height:340px}.protection-note{grid-template-columns:1fr;gap:6px;padding:20px}.form-service-options{grid-template-columns:repeat(2,minmax(0,1fr))}.service-radio{min-height:72px}.service-radio strong{font-size:10px}}
@media(max-width:360px){.form-service-options{grid-template-columns:repeat(2,minmax(0,1fr))}.service-radio{flex-direction:column}}

/* v1.3 — media managed with /admin: preserve all established layouts */
.protection-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.42;filter:saturate(.65)}
.protection-photo[hidden]{display:none!important}
.protection-card.with-photo:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,21,22,.90),rgba(8,21,22,.56)),linear-gradient(0deg,rgba(7,20,22,.9),transparent 80%)}
.protection-card> :not(.protection-photo){position:relative;z-index:2}
.security-tile-art[data-photo-active="true"]:before{background:linear-gradient(0deg,#08191a66,#08191a11);z-index:1}
.security-tile-art[data-photo-active="true"] svg{opacity:.06}

/* === 2212 PSS LUXURY V2 START === */

/* 01 — BRAND SYSTEM */

:root {
  --navy: #0b1218;
  --navy-2: #171f25;
  --paper: #0c141a;
  --ink: #f3f0e9;
  --muted: #abb4b5;
  --line: rgba(210,220,220,.15);
  --gold: #c1ad87;
  --gold-light: #e8d7b6;
  --serif: "Playfair Display", Georgia, serif;
  --sans: Manrope, Arial, sans-serif;
  --mono: Manrope, Arial, sans-serif;
}

body {
  background: #0b1218;
  color: #f0eee8;
  font-family: var(--sans);
  letter-spacing: .005em;
}

::selection {
  background: #c1ad87;
  color: #101820;
}

.container {
  max-width: 1420px;
}

/* 02 — HEADER & NAVIGATION */

.topline {
  background: #080e12;
  border-bottom: 1px solid #ffffff15;
  color: #abb3b4;
  font: 500 10px/1.4 var(--sans);
  letter-spacing: 1.2px;
}

.site-header {
  background: rgba(11,18,24,.93);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid #ffffff20;
  box-shadow: 0 8px 35px #00000018;
}

.navbar {
  height: 82px;
}

.brand-mark {
  font: 750 27px/1 var(--sans);
  letter-spacing: -1px;
  color: #f5f3ed;
}

.brand-mini {
  font: 600 14px/1 var(--sans);
  color: #cbb792;
  vertical-align: 2px;
}

.brand-icon {
  color: #d7c29f;
}

.brand-text strong {
  font: 700 10px/1.3 var(--sans);
  letter-spacing: 1.3px;
  color: #e9e4d9;
}

.brand-text small {
  font: 500 9px/1.3 var(--sans);
  letter-spacing: .6px;
  color: #a3adaf;
}

.desktop-nav {
  gap: 24px;
}

.desktop-nav a {
  font: 600 11px/1.5 var(--sans);
  text-transform: none;
  letter-spacing: .15px;
  color: #c8cdcc;
  transition: color .25s;
}

.desktop-nav a:hover {
  color: #e6d5b5;
}

.nav-contact {
  background: transparent;
  color: #e5d2ae;
  border: 1px solid #c0ab8770;
  border-radius: 6px;
  padding: 13px 19px;
  font: 650 10px/1.4 var(--sans);
  letter-spacing: .5px;
}

.nav-contact:hover {
  background: #c1ad87;
  color: #11191c;
}

/* 03 — HERO */

.hero {
  background: #091116;
  min-height: 740px;
  border-color: #ffffff18;
}

.hero-art {
  filter: saturate(.76) contrast(1.03);
  background-position: 62% center;
}

.hero-vignette {
  background:
    linear-gradient(
      90deg,
      rgba(6,12,17,.94) 0%,
      rgba(7,15,21,.83) 28%,
      rgba(8,16,22,.44) 57%,
      rgba(8,15,20,.16) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5,11,16,.90) 0%,
      transparent 35%
    );
}

.hero:after {
  opacity: .12;
}

.hero-content {
  min-height: 668px;
}

.hero-copy {
  max-width: 760px;
  padding: 103px 0 118px;
}

.eyebrow,
.eyebrow.light {
  font: 650 10px/1.5 var(--sans);
  letter-spacing: 2px;
  color: #ccb899;
}

.eyebrow-rule {
  background: #bea782;
  width: 34px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(59px,6.1vw,92px);
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -1.8px;
  text-transform: none;
  color: #f8f5ef;
  margin-top: 30px;
}

.hero h1 em {
  display: inline-block;
  font-family: var(--serif);
  font-size: .53em;
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -.8px;
  color: #d6c3a3;
  margin-top: 10px;
}

.hero-highlight {
  color: #e2d0b0;
}

.hero-lead {
  max-width: 570px;
  color: #d4dad8;
  font: 400 14px/2.05 var(--sans);
  letter-spacing: .1px;
  margin-top: 32px;
}

.hero-actions {
  gap: 29px;
  margin-top: 38px;
}

/* 04 — PREMIUM BUTTONS */

.btn {
  font: 700 11px/1.4 var(--sans);
  letter-spacing: .35px;
  text-transform: none;
  border-radius: 7px;
  padding: 17px 24px;
  transition: all .25s ease;
}

.btn-gold {
  background: #d2bd98;
  color: #151d21;
  border: 1px solid #d2bd98;
  box-shadow: 0 9px 26px #00000024;
}

.btn-gold:hover {
  background: #e9d6b6;
  border-color: #e9d6b6;
  color: #151d21;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px #00000035;
}

.text-link {
  font: 600 11px/1.5 var(--sans);
  letter-spacing: .15px;
  border-color: #ae9674;
}

.hero-folio {
  background: rgba(12,23,29,.68);
  border: 1px solid #ffffff2c;
  border-radius: 10px;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px #00000060;
}

.folio-top,
.folio-bottom,
.folio-grid span,
.folio-grid strong {
  font-family: var(--sans);
}

.hero-footer {
  background: #0d171ccc;
  border-color: #ffffff25;
  backdrop-filter: blur(10px);
}

.hero-footer-content {
  font: 650 10px/1.3 var(--sans);
  letter-spacing: .7px;
}

.gold-star,
.hero-scroll {
  color: #d0b78a;
}

/* 05 — EDITORIAL TYPOGRAPHY */

.section-pad {
  padding: 116px 0;
}

.intro-section,
.process-section {
  background: #0d151b;
}

.protection-section {
  background: #111a21;
  border-color: #ffffff15;
}

.collection-section {
  background: #0d161c;
  border-color: #ffffff15;
}

.quote-section {
  background:
    radial-gradient(
      ellipse at 0% 10%,
      #26303655,
      transparent 48%
    ),
    #0b141a;
}

.section-head {
  margin-bottom: 50px;
}

.section-head h2,
.quote-sidebar h2,
.process-title h2,
.closing h2 {
  font-family: var(--serif);
  font-size: clamp(40px,4.4vw,67px);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -1.3px;
  text-transform: none;
  color: #f5f2ec;
}

.section-head h2 em,
.quote-sidebar h2 em,
.process-title h2 em,
.closing h2 em {
  font-style: italic;
  font-weight: 400;
  color: #d5c3a1;
}

.section-intro,
.quote-sidebar > p:not(.eyebrow),
.process-title p {
  color: #abb5b6;
  font: 400 13px/2.05 var(--sans);
}

/* 06 — FOUR MAIN SERVICES */

.services-grid {
  gap: 20px;
}

.service-tile {
  height: 460px;
  background: #111f24;
  border: 1px solid #ffffff24;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 15px 40px #00000030;
  transition: all .4s ease;
}

.service-tile:after {
  display: none;
}

.service-tile:hover {
  transform: translateY(-5px);
  border-color: #d2bd9880;
  box-shadow: 0 24px 60px #00000055;
}

.service-art {
  filter: saturate(.85) brightness(.94);
  transform: scale(1.02);
  transition: transform .65s, filter .4s;
}

.service-tile:hover .service-art {
  transform: scale(1.08);
  filter: saturate(.95) brightness(1.02);
}

.service-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(5,12,17,.96),
    rgba(6,14,19,.78) 32%,
    rgba(6,14,19,.08) 78%
  );
}

.service-overlay,
.services-grid .service-overlay {
  z-index: 2;
  inset: auto 25px 27px;
  background: none;
}

.service-number {
  color: #e0cda9;
  font: 650 10px/1.4 var(--sans);
  letter-spacing: 1.2px;
}

.service-tile h3,
.services-grid .service-tile h3 {
  font: 500 clamp(30px,2.7vw,41px)/1.23 var(--serif);
  text-transform: none;
  letter-spacing: -.7px;
  color: #f6f4ee;
}

.service-tile p {
  color: #d0d4d1;
  font: 400 12px/1.85 var(--sans);
}

.service-more {
  font: 700 10px/1.5 var(--sans);
  letter-spacing: .35px;
  color: #d9c8a8;
  border-color: #ffffff45;
}

/* 07 — SIX SECURITY SERVICE CARDS */

.protection-grid {
  gap: 18px;
}

.protection-card {
  min-height: 430px;
  padding: 29px;
  border: 1px solid #ffffff25;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(
    150deg,
    #222c30,
    #121b21
  );
  box-shadow: 0 14px 36px #00000025;
  transition: all .35s ease;
}

.protection-card:hover {
  transform: translateY(-4px);
  border-color: #ccb69080;
  box-shadow: 0 23px 56px #00000045;
}

.protection-photo {
  opacity: .88;
  filter: saturate(.78) contrast(1.03);
}

.protection-card.with-photo:before {
  background: linear-gradient(
    0deg,
    rgba(7,14,20,.99) 1%,
    rgba(7,14,20,.89) 30%,
    rgba(7,14,20,.34) 80%,
    rgba(7,14,20,.16) 100%
  );
}

.protection-ornament {
  border-color: #ffffff55;
}

.protection-ornament span,
.protection-ornament svg {
  color: #ddc49d;
}

.protection-kicker {
  color: #d8c19a;
  font: 650 10px/1.45 var(--sans);
  letter-spacing: 1.15px;
  margin: 35px 0 12px;
}

.protection-card h3 {
  font: 500 clamp(27px,2.45vw,38px)/1.26 var(--serif);
  letter-spacing: -.6px;
  text-transform: none;
  color: #faf6ef;
}

.protection-card > p:not(.protection-kicker) {
  color: #d0d7d4;
  font: 400 12px/1.92 var(--sans);
}

.protection-cta {
  color: #e4ceaa;
  border-color: #ffffff55;
  font: 700 10px/1.5 var(--sans);
  letter-spacing: .3px;
}

.protection-cta:hover {
  color: #fff;
}

.protection-note {
  background: #1a252b;
  border: 1px solid #ffffff21;
  border-left: 2px solid #c2ad88;
  border-radius: 0 9px 9px 0;
}

.protection-note strong {
  color: #e1d0af;
  font: 700 10px/1.5 var(--sans);
}

/* 08 — VEHICLE COLLECTION */

.tabs {
  gap: 10px;
}

.tab {
  background: #172229;
  border: 1px solid #ffffff28;
  border-radius: 7px;
  color: #c7c9c4;
  font: 650 11px/1.5 var(--sans);
  letter-spacing: .1px;
  transition: all .3s;
}

.tab:hover {
  background: #223039;
  color: #fff;
}

.tab.active {
  background: #dcc9a8;
  border: 1px solid #dcc9a8;
  color: #211f1a;
}

.tab-index,
.tab-arrow {
  color: inherit;
}

.fleet-bar {
  border-color: #ffffff2b;
}

.fleet-grid {
  gap: 20px;
}

.fleet-card {
  background: #172127;
  border: 1px solid #ffffff26;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 38px #00000030;
  transition: all .32s ease;
}

.fleet-card:hover {
  transform: translateY(-5px);
  border-color: #ddc69d80;
  box-shadow: 0 24px 58px #00000050;
}

.fleet-image {
  aspect-ratio: 1.9/1;
  filter: saturate(.90) brightness(.96);
  background: #1a282d;
}

.fleet-content {
  padding: 28px 27px 25px;
}

.fleet-card h3 {
  font: 500 clamp(25px,2.2vw,33px)/1.25 var(--serif);
  letter-spacing: -.5px;
  text-transform: none;
  color: #f4f2eb;
}

.fleet-category {
  color: #ceb58c;
  font: 650 10px/1.4 var(--sans);
}

.fleet-status {
  background: #23312f;
  border: 1px solid #c1ad8750;
  border-radius: 5px;
  color: #d4d0bf;
}

.fleet-description-long {
  color: #b9c3c3 !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
}

.fleet-specs,
.fleet-actions,
.fleet-topline {
  border-color: #ffffff26;
}

.choose-vehicle {
  background: transparent;
  color: #dfc9a2;
  border: 1px solid #cab38d90;
  border-radius: 6px;
  font: 700 10px/1.4 var(--sans);
  transition: all .25s;
}

.choose-vehicle:hover {
  background: #d2bd98;
  color: #152027;
}

.catalog-disclaimer {
  background: #19242a;
  border: 1px solid #ffffff25;
  border-radius: 8px;
}

/* 09 — PRIVATE ENQUIRY FORM */

.form-card {
  background: #162128;
  border: 1px solid #ffffff2c;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 28px 65px #00000055;
}

.form-top {
  background: linear-gradient(
    120deg,
    #29343a,
    #182329
  );
  border-bottom: 1px solid #ffffff27;
  padding: 32px 34px;
}

.form-top h3 {
  font: 500 34px/1.2 var(--serif);
  letter-spacing: -.3px;
  text-transform: none;
}

.form-top small {
  color: #d3bc98;
  font: 650 10px/1.4 var(--sans);
}

.form-block-heading {
  color: #e7e6e0;
  font: 700 11px/1.5 var(--sans);
  border-color: #ffffff30;
}

.form-block-heading span {
  color: #d4be96;
}

.service-radio,
.choice,
.package {
  background: #101b21;
  border: 1px solid #ffffff2c;
  border-radius: 7px;
  color: #d8e0dc;
  transition: all .2s;
}

.service-radio strong {
  font: 650 11px/1.3 var(--sans);
}

.service-radio.selected,
.package:has(input:checked) {
  background: #302e28;
  border-color: #d2b98b;
  color: #fff5e7;
}

.field label {
  color: #e2e5df;
  font: 650 11px/1.5 var(--sans);
}

.field input:not([type=radio]):not([type=checkbox]),
.field select,
.field textarea {
  background: #0e171d;
  color: #f2f3ed;
  border: 1px solid #ffffff35;
  border-radius: 7px;
  min-height: 50px;
  font: 500 12px/1.5 var(--sans);
  transition: all .2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #d2b98b;
  box-shadow: 0 0 0 3px #d2b98b18;
  outline: none;
}

.choice input,
.consent input,
.package input {
  accent-color: #cbb58d;
}

.form-legal-note {
  background: #282a29;
  border-color: #ceb48c;
  color: #d2d3ca;
  border-radius: 7px;
}

.private-note {
  background: #1b282c;
  border-left: 2px solid #c2ac84;
  border-radius: 0 8px 8px 0;
}

/* 10 — PROCESS & FOOTER */

.process-line {
  background: #c1ad8760;
}

.process-item > span {
  color: #cdb68c;
  font: 700 11px/1.4 var(--sans);
}

.process-item h3 {
  font: 500 32px/1.2 var(--serif);
  text-transform: none;
}

.process-item p {
  color: #b4bdbd;
  font: 400 12px/1.9 var(--sans);
}

.closing {
  background: linear-gradient(
    115deg,
    #1f2b31,
    #0b1419
  );
  border-color: #ffffff25;
}

.closing h2 em {
  color: #d7c09c;
}

.footer {
  background: #090f14;
  border-color: #ffffff1c;
}

.footer-brand {
  font: 650 38px/1.1 var(--sans);
  letter-spacing: -1.2px;
  color: #f3f1eb;
}

.footer-brand span {
  color: #c8b18b;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 1px;
}

.footer-bottom {
  border-color: #ffffff20;
}

.footer-right span,
.footer-bottom a {
  color: #cdb48b;
}

/* 11 — MOBILE RESPONSIVE */

@media (max-width: 1150px) {
  .services-grid {
    gap: 15px;
  }

  .service-tile {
    height: 420px;
  }

  .hero h1 {
    font-size: clamp(52px,6.6vw,84px);
  }
}

@media (max-width: 960px) {
  .hero-vignette {
    background: linear-gradient(
      90deg,
      #081117f5 0%,
      #091318cc 65%,
      #0913186b 100%
    );
  }
}

@media (max-width: 690px) {
  .navbar {
    height: 70px;
  }

  .hero {
    min-height: 665px;
  }

  .hero-content {
    min-height: 592px;
  }

  .hero-copy {
    padding: 82px 0 92px;
  }

  .hero h1 {
    font-size: clamp(43px,10.2vw,65px);
    line-height: 1.21;
    letter-spacing: -1.6px;
  }

  .hero h1 em {
    font-size: .52em;
  }

  .hero-lead {
    font-size: 12.5px;
    line-height: 1.85;
    margin-top: 25px;
  }

  .section-pad {
    padding: 80px 0;
  }

  .section-head h2,
  .quote-sidebar h2,
  .process-title h2 {
    font-size: clamp(35px,8.4vw,49px);
  }

  .services-grid,
  .protection-grid {
    gap: 14px;
  }

  .service-tile,
  .services-grid .service-tile {
    height: 350px;
  }

  .service-tile h3,
  .services-grid .service-tile h3 {
    font-size: 33px;
  }

  .service-overlay,
  .services-grid .service-overlay {
    inset: auto 23px 24px;
  }

  .protection-card {
    min-height: 410px;
    padding: 25px;
  }

  .protection-card h3 {
    font-size: 31px;
  }

  .tab {
    border: 1px solid #ffffff26;
    border-radius: 7px;
  }

  .fleet-card h3 {
    font-size: 30px;
  }

  .form-top {
    padding: 25px 22px;
  }

  .form-top h3 {
    font-size: 29px;
  }

  .closing h2 {
    font-size: 38px;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: 43px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-tile,
  .fleet-card,
  .protection-card,
  .service-art,
  .btn {
    transition: none !important;
    transform: none !important;
  }
}

/* === 2212 PSS LUXURY V2 END === */