@charset "UTF-8";
/* ==========================================================================
   Reliable Protection Services (GH) Ltd — brand.css
   Design tokens and shared components.

   DIRECTION
   The palette is fixed by the client's tiger-crest logo: red, gold, green.
   Everything else is derived from the world this company actually works in —
   duty rosters, guard registers, checkpoint logs, patrol rounds recorded
   every fifteen minutes. The type is condensed and signal-like rather than
   soft and corporate, and reference numbers are set in mono because a guard
   company genuinely runs on them.

   SIGNATURE
   The patrol-round tick: a thin gold rule broken by regular marks, echoing
   the 15-minute recorded rounds in their own company profile. It appears
   once per section heading and nowhere else.
   ========================================================================== */

:root {
    /* --- Brand ------------------------------------------------------- */
    --rps-red:        #C8102E;
    --rps-red-dark:   #9E0C24;
    --rps-red-tint:   #FDEEF0;
    --rps-gold:       #D4A017;
    --rps-gold-dark:  #A87C0F;
    --rps-gold-tint:  #FDF6E4;
    --rps-green:      #0B6E4F;
    --rps-green-dark: #08543C;
    --rps-green-tint: #E8F4EF;

    /* --- Neutrals ---------------------------------------------------- */
    --rps-ink:        #14213D;
    --rps-ink-2:      #3D4761;
    --rps-ink-3:      #6B7488;
    --rps-line:       #D9DDE5;
    --rps-line-soft:  #EBEEF3;
    --rps-mist:       #F5F6F8;
    --rps-paper:      #FFFFFF;

    /* --- Status ------------------------------------------------------ */
    --rps-alert:      #B42318;
    --rps-warn:       #B54708;
    --rps-ok:         #0B6E4F;
    --rps-info:       #175CD3;

    /* --- Type -------------------------------------------------------- */
    --font-display: "Oswald", "Arial Narrow", sans-serif;
    --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem);
    --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.03rem);
    --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
    --step-2:  clamp(1.45rem, 1.32rem + 0.65vw, 1.85rem);
    --step-3:  clamp(1.85rem, 1.60rem + 1.20vw, 2.60rem);
    --step-4:  clamp(2.30rem, 1.85rem + 2.20vw, 3.80rem);

    /* --- Space ------------------------------------------------------- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
    --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;

    /* --- Form -------------------------------------------------------- */
    --radius:    3px;
    --radius-lg: 5px;
    --shadow-1:  0 1px 2px rgba(20, 33, 61, .07);
    --shadow-2:  0 3px 10px rgba(20, 33, 61, .09);
    --shadow-3:  0 12px 32px rgba(20, 33, 61, .13);

    --wrap: 1180px;
    --wrap-narrow: 760px;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--rps-ink);
    background: var(--rps-paper);
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--rps-red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rps-red-dark); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.005em;
    margin: 0 0 var(--sp-3);
    color: var(--rps-ink);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin: 0 0 var(--sp-4); }

/* Visible keyboard focus everywhere. */
:focus-visible {
    outline: 3px solid var(--rps-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

.rps-skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--rps-ink); color: #fff; padding: var(--sp-3) var(--sp-4);
}
.rps-skip:focus { left: 0; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap        { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section       { padding-block: var(--sp-8); }
.section--tight{ padding-block: var(--sp-6); }
.section--mist { background: var(--rps-mist); }
.section--ink  { background: var(--rps-ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 620px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   SIGNATURE — the patrol-round tick
   A gold rule broken at regular intervals, after the company's own practice
   of guards recording a checkpoint round every fifteen minutes.
   ========================================================================== */

.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rps-red);
    margin-bottom: var(--sp-2);
}

.tick-rule {
    --tick: var(--rps-gold);
    height: 7px;
    margin: var(--sp-3) 0 var(--sp-5);
    background-image:
        linear-gradient(to right, var(--tick) 0 2px, transparent 2px 100%),
        linear-gradient(to right, var(--tick), var(--tick));
    background-size: 15px 7px, 100% 1px;
    background-position: 0 0, 0 3px;
    background-repeat: repeat-x, no-repeat;
    max-width: 210px;
}
.tick-rule--center { margin-inline: auto; }
.tick-rule--light  { --tick: var(--rps-gold); opacity: .85; }

.section--ink .tick-rule { --tick: var(--rps-gold); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0.72rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary  { background: var(--rps-red); color: #fff; }
.btn-primary:hover  { background: var(--rps-red-dark); color: #fff; }

.btn-ghost    { background: transparent; color: var(--rps-ink); border-color: var(--rps-line); }
.btn-ghost:hover    { border-color: var(--rps-ink); color: var(--rps-ink); }

.btn-gold     { background: var(--rps-gold); color: var(--rps-ink); }
.btn-gold:hover     { background: var(--rps-gold-dark); color: #fff; }

.btn-green    { background: var(--rps-green); color: #fff; }
.btn-green:hover    { background: var(--rps-green-dark); color: #fff; }

.btn-onink    { background: #fff; color: var(--rps-ink); }
.btn-onink:hover    { background: var(--rps-gold); color: var(--rps-ink); }

.btn-sm { padding: .45rem 1rem; font-size: var(--step--1); }
.btn-lg { padding: .95rem 2rem; font-size: var(--step-1); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ==========================================================================
   Reference numbers — set in mono, at size. A guard company runs on these.
   ========================================================================== */

.ref {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--rps-ink);
    white-space: nowrap;
}
.ref-lg { font-size: var(--step-1); }
.ref-xl { font-size: var(--step-2); letter-spacing: -.03em; }
.ref-muted { color: var(--rps-ink-3); }

/* ==========================================================================
   Status badges
   ========================================================================== */

.rps-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .70rem;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .22rem .55rem;
    border-radius: 2px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.badge-new         { background: var(--rps-red-tint);   color: var(--rps-red);     border-color: #F5C9D0; }
.badge-review      { background: #EFF4FF;               color: var(--rps-info);    border-color: #C7D7FE; }
.badge-survey      { background: var(--rps-gold-tint);  color: var(--rps-gold-dark);border-color: #F0DFA8; }
.badge-quoted      { background: #F3F0FF;               color: #5925DC;            border-color: #D9D0FE; }
.badge-negotiating { background: #FFF6ED;               color: var(--rps-warn);    border-color: #FDDCAB; }
.badge-won         { background: var(--rps-green-tint); color: var(--rps-green);   border-color: #A9D6C4; }
.badge-lost        { background: #FEF3F2;               color: var(--rps-alert);   border-color: #FECDCA; }
.badge-archived    { background: var(--rps-mist);       color: var(--rps-ink-3);   border-color: var(--rps-line); }

/* Priority — a left bar, read like a duty roster marker. */
.rps-prio {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: var(--step--1); font-weight: 600;
}
.rps-prio::before { content: ""; width: 3px; height: 1em; border-radius: 1px; }
.prio-low::before      { background: var(--rps-line); }
.prio-normal::before   { background: var(--rps-ink-3); }
.prio-high::before     { background: var(--rps-gold); }
.prio-critical::before { background: var(--rps-red); }
.prio-critical         { color: var(--rps-red); }

.sla-flag {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--font-mono); font-size: .70rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--rps-alert);
}
.sla-flag::before { content: "▲"; font-size: .6rem; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background: var(--rps-paper);
    border: 1px solid var(--rps-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card--lift  { transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.card--lift:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* Service cards carry a top brand edge that fills on hover. */
.svc-card { position: relative; display: block; text-decoration: none; color: inherit; }
.svc-card::before {
    content: ""; position: absolute; inset: 0 auto auto 0;
    height: 3px; width: 34%; background: var(--rps-red);
    border-radius: var(--radius-lg) 0 0 0;
    transition: width .28s var(--ease);
}
.svc-card:hover::before, .svc-card:focus-visible::before { width: 100%; }
.svc-card h3 { margin-top: var(--sp-2); }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: var(--sp-4); }

.field label,
.field .label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rps-ink-2);
    margin-bottom: var(--sp-2);
}
.field .req { color: var(--rps-red); }
.field .hint { display: block; font-size: var(--step--1); color: var(--rps-ink-3); margin-top: var(--sp-1); }

.input, .select, .textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--rps-ink);
    background: var(--rps-paper);
    border: 1.5px solid var(--rps-line);
    border-radius: var(--radius);
    padding: .68rem .8rem;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--rps-ink-3); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--rps-red);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7488' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    padding-right: 2.2rem;
}
.input.has-error, .select.has-error, .textarea.has-error { border-color: var(--rps-alert); }
.field-error { display: block; color: var(--rps-alert); font-size: var(--step--1); margin-top: var(--sp-1); }

/* Selectable tiles — used for services and shift patterns. */
.tile-set { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .tile-set-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tile-set-3 { grid-template-columns: repeat(3, 1fr); } }

.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.tile-body {
    border: 1.5px solid var(--rps-line);
    border-radius: var(--radius);
    padding: var(--sp-4);
    height: 100%;
    transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.tile:hover .tile-body { border-color: var(--rps-ink-3); }
.tile input:checked + .tile-body {
    border-color: var(--rps-red);
    background: var(--rps-red-tint);
    box-shadow: inset 0 0 0 1px var(--rps-red);
}
.tile input:focus-visible + .tile-body { outline: 3px solid var(--rps-gold); outline-offset: 2px; }
.tile-title { font-family: var(--font-display); font-weight: 500; display: block; margin-bottom: var(--sp-1); }
.tile-note  { font-size: var(--step--1); color: var(--rps-ink-3); }

/* ==========================================================================
   Notices
   ========================================================================== */

.rps-flash {
    position: relative;
    padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-4);
    border-radius: var(--radius);
    border-left: 3px solid;
    margin-bottom: var(--sp-4);
    font-size: var(--step-0);
}
.rps-flash-success { background: var(--rps-green-tint); border-color: var(--rps-green); color: var(--rps-green-dark); }
.rps-flash-danger  { background: #FEF3F2;               border-color: var(--rps-alert); color: #912018; }
.rps-flash-warning { background: #FFF6ED;               border-color: var(--rps-warn);  color: #93370D; }
.rps-flash-info    { background: #EFF4FF;               border-color: var(--rps-info);  color: #194185; }
.rps-flash-close {
    position: absolute; top: .4rem; right: .5rem;
    background: none; border: 0; font-size: 1.3rem; line-height: 1;
    cursor: pointer; color: inherit; opacity: .55; padding: .2rem .4rem;
}
.rps-flash-close:hover { opacity: 1; }

.note-box {
    background: var(--rps-gold-tint);
    border-left: 3px solid var(--rps-gold);
    padding: var(--sp-4);
    font-size: var(--step--1);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ==========================================================================
   Emergency bar and WhatsApp
   ========================================================================== */

.emergency-bar {
    background: var(--rps-ink);
    color: #fff;
    font-size: var(--step--1);
    padding: .45rem 0;
}
.emergency-bar .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.emergency-bar a { color: #fff; text-decoration: none; }
.emergency-bar a:hover { text-decoration: underline; }
.emergency-bar .hotline {
    font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em;
    display: inline-flex; align-items: center; gap: .4rem;
}
.emergency-bar .hotline::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--rps-gold);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
    .emergency-bar .hotline::before { animation: none; }
}

.wa-float {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
    display: inline-flex; align-items: center; gap: .55rem;
    background: #25D366; color: #073B22;
    font-family: var(--font-display); font-weight: 500; font-size: var(--step--1);
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
    padding: .7rem 1.1rem; border-radius: 999px;
    box-shadow: var(--shadow-3);
    transition: transform .18s var(--ease);
}
.wa-float:hover { transform: translateY(-2px); color: #073B22; }
@media (max-width: 640px) {
    .wa-float { right: .75rem; bottom: .75rem; padding: .7rem .85rem; }
    .wa-float span { display: none; }
}

/* ==========================================================================
   Client marquee — featured clients, continuous scroll
   ========================================================================== */

.marquee {
    overflow: hidden;
    position: relative;
    padding-block: var(--sp-4);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    gap: var(--sp-7);
    width: max-content;
    animation: marquee var(--marquee-speed, 35s) linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; }
}
.marquee-item {
    display: flex; align-items: center; justify-content: center;
    height: 56px; flex: 0 0 auto;
    filter: grayscale(1); opacity: .62;
    transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.marquee-item:hover { filter: grayscale(0); opacity: 1; }
.marquee-item img { max-height: 56px; width: auto; }
/* Text fallback for clients with no logo supplied. */
.marquee-name {
    font-family: var(--font-display); font-weight: 500;
    font-size: var(--step-0); letter-spacing: .04em;
    text-transform: uppercase; color: var(--rps-ink-2); white-space: nowrap;
}

/* ==========================================================================
   Stats
   ========================================================================== */

.stat { text-align: center; }
.stat-value {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 600;
    line-height: 1;
    color: var(--rps-red);
    letter-spacing: -.02em;
}
.section--ink .stat-value { color: var(--rps-gold); }
.stat-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rps-ink-3);
    margin-top: var(--sp-2);
}
.section--ink .stat-label { color: rgba(255,255,255,.72); }

/* ==========================================================================
   Process — numbering is earned here: it is a real sequence.
   ========================================================================== */

.process-step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.process-num {
    font-family: var(--font-mono);
    font-size: var(--step-1);
    font-weight: 500;
    color: var(--rps-gold);
    line-height: 1;
    padding-top: .15rem;
    min-width: 2.4rem;
}
.process-step + .process-step { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--rps-line-soft); }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.table th {
    background: var(--rps-ink); color: #fff;
    font-family: var(--font-display); font-weight: 500;
    font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase;
    text-align: left; padding: .65rem .75rem; white-space: nowrap;
}
.table td { padding: .7rem .75rem; border-bottom: 1px solid var(--rps-line-soft); vertical-align: middle; }
.table tbody tr:hover { background: var(--rps-mist); }
.table .num { text-align: right; font-family: var(--font-mono); }
.table-empty { text-align: center; color: var(--rps-ink-3); padding: var(--sp-7) var(--sp-4); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.text-center { text-align: center; }
.text-muted  { color: var(--rps-ink-3); }
.text-sm     { font-size: var(--step--1); }
.mono        { font-family: var(--font-mono); }
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }

@media print {
    .no-print, .wa-float, .emergency-bar { display: none !important; }
    body { font-size: 11pt; color: #000; }
}