/* Contact page */
.ct-hero{background:linear-gradient(115deg,#073a7d,#0a4da2 55%,#14b8d4);color:#fff;padding:34px 0 84px;position:relative;overflow:hidden}
.ct-hero::before{content:"";position:absolute;right:-70px;top:-90px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.08)}
.ct-hero::after{content:"";position:absolute;left:38%;bottom:-140px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06)}
.ct-hero .wrap{position:relative;z-index:1}
.ct-hero .crumb,.ct-hero .crumb a{color:rgba(255,255,255,.85)}
.ct-hero h1{font-size:clamp(1.8rem,4.5vw,2.8rem);margin:6px 0 6px;color:#fff}
.ct-hero p{margin:0;font-size:1.1rem;opacity:.95;max-width:620px}
.ct-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:-52px;position:relative;z-index:2}
.ct-q{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;color:var(--ink);box-shadow:var(--shadow-lg);transition:.25s;min-width:0}
.ct-q:hover{transform:translateY(-5px);text-decoration:none;border-color:var(--blue)}
.ct-q i{font-style:normal;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:1.4rem;color:#fff;flex:none}
.q1{background:linear-gradient(135deg,#0a4da2,#2f80ed)}.q2{background:linear-gradient(135deg,#0b7a8a,#14b8d4)}.q3{background:linear-gradient(135deg,#e53935,#ff7043)}.q4{background:linear-gradient(135deg,#1b7f4b,#4cc38a)}
.ct-q div{min-width:0}.ct-q small{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.ct-q b{display:block;overflow-wrap:anywhere;line-height:1.3}
.ct-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;margin-top:26px;align-items:start}
.ct-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:24px;min-width:0}
.ct-card h2{font-size:1.25rem;margin:0 0 16px;color:var(--blue-d);display:flex;align-items:center;gap:10px}
.ct-card h2 .ic{width:38px;height:38px;border-radius:12px;background:var(--sky);display:grid;place-items:center;font-size:1.1rem}
.ct-dl{margin:0 0 16px;display:grid;gap:12px}
.ct-dl>div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.ct-dl>div:last-child{border:0;padding:0}
.ct-dl dt{font-weight:700;color:var(--muted);font-size:.9rem}.ct-dl dd{margin:0;overflow-wrap:anywhere}
.ct-map{width:100%;height:340px;border:0;border-radius:16px;background:var(--sky);margin-bottom:14px}
.ct-btns{display:flex;gap:10px;flex-wrap:wrap}
.ct-note{background:#fff7e0;border:1px solid #f3dba0;border-radius:12px;padding:10px 14px;font-size:.9rem;margin:0 0 16px}
.ct-f{display:grid;gap:14px}
.ct-f .r2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ct-f label{display:block;min-width:0}
.ct-f label>span{display:block;font-weight:600;font-size:.88rem;margin-bottom:5px;color:var(--ink)}.ct-f em{color:#d32f2f;font-style:normal}
.ct-f input,.ct-f textarea{width:100%;border:1.5px solid #c9d7ea;border-radius:12px;padding:11px 14px;font:inherit;background:#fbfdff;transition:.2s}
.ct-f input:focus,.ct-f textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,128,237,.15);background:#fff}
.ct-f textarea{resize:vertical;min-height:120px}
.ct-f .btn{justify-self:start;padding:12px 30px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.ct-sec{margin-top:40px}
.ct-hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ct-hl a{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 10px;text-align:center;color:var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.25s}
.ct-hl a:hover{transform:translateY(-5px);text-decoration:none;border-color:var(--blue)}
.ct-hl strong{font-size:1.7rem;color:var(--blue)}.ct-hl span{color:var(--muted);font-size:.85rem}
.ct-hl a.sos{background:linear-gradient(135deg,#e53935,#ff7043);border:0}.ct-hl a.sos strong,.ct-hl a.sos span{color:#fff}
.ct-off{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ct-off article{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow);align-items:center}
.ct-off img,.ct-off .ph{width:78px;height:78px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #fff;box-shadow:0 0 0 2px var(--blue)}
.ct-off .ph{display:grid;place-items:center;font-size:2rem;background:var(--sky)}
.ct-off h3{font-size:1rem;margin:0 0 2px}.ct-off p{margin:0 0 6px;color:var(--muted);font-size:.86rem;line-height:1.35}
.ct-mini{display:flex;gap:6px;flex-wrap:wrap}.ct-mini a{background:var(--sky);border-radius:999px;padding:2px 12px;font-size:.82rem;font-weight:600}
.ct-dirhead{display:flex;gap:16px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}
.filter{width:100%;max-width:420px;border:1.5px solid #c9d7ea;border-radius:999px;padding:10px 18px;font:inherit;margin:8px 0 14px;background:#fff}
.ct-tw{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.ct-table{width:100%;border-collapse:collapse}
.ct-table th{background:linear-gradient(90deg,var(--blue-d),var(--blue));color:#fff;text-align:left;padding:12px 14px;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.ct-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.ct-table tbody tr:nth-child(even){background:#f7faff}.ct-table tbody tr:hover{background:var(--sky)}
.ct-table td:first-child{color:var(--muted);width:44px}.ct-table td.act{text-align:right;white-space:nowrap}
.ct-other{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.ct-other a{background:linear-gradient(160deg,#fff,#eaf3ff);border:1px solid var(--line);border-radius:18px;padding:16px 10px;text-align:center;color:var(--ink);display:flex;flex-direction:column;gap:6px;transition:.25s}
.ct-other a:hover{transform:translateY(-5px);text-decoration:none;box-shadow:var(--shadow-lg)}.ct-other i{font-style:normal;font-size:1.7rem}.ct-other b{font-size:.88rem}
.ct-follow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 28px;flex-wrap:wrap}.ct-follow h3{margin:0;color:var(--blue-d)}.ct-follow p{margin:0}
@media(max-width:900px){.ct-main{grid-template-columns:1fr}.ct-dl>div{grid-template-columns:1fr;gap:2px}}
@media(max-width:640px){
  .ct-hero{padding-bottom:72px}.ct-card{padding:18px;border-radius:18px}.ct-f .r2{grid-template-columns:1fr}.ct-map{height:260px}
  .ct-table thead{display:none}.ct-table,.ct-table tbody,.ct-table tr,.ct-table td{display:block;width:100%}
  .ct-table tr{padding:12px 14px;border-bottom:1px solid var(--line)}.ct-table td{border:0;padding:2px 0}.ct-table td:first-child{display:none}
  .ct-table td[data-l]:not(:nth-child(2)):before{content:attr(data-l) ": ";color:var(--muted);font-size:.8rem}
  .ct-table td.act{text-align:left;padding-top:6px}
}
@media print{.ct-hero,.ct-quick,.ct-main,.ct-sec:not(#directory),.ct-btns,.filter,.act{display:none!important}.ct-tw{box-shadow:none}}

/* ---- design v3 overrides: flat editorial ---- */
.ct-hero{background:var(--ink);padding:38px 0 96px;border-radius:0}
.ct-hero::before,.ct-hero::after{display:none}
.ct-hero h1{font-family:var(--serif);font-weight:600}
.ct-hero p{color:#ded8c8}
.ct-hero .crumb,.ct-hero .crumb a{color:#b9b3a3}
.ct-q{border-radius:2px;box-shadow:none;border:1px solid var(--line);border-top:3px solid var(--ink);padding:15px 18px}
.ct-q:hover{transform:none;border-color:var(--line);border-top-color:var(--crimson);box-shadow:none}
.ct-q i{border-radius:2px;background:var(--ink)}
.q1{background:var(--ink)}.q2{background:var(--green)}.q3{background:var(--crimson)}.q4{background:var(--gold)}
.ct-card{border-radius:0;box-shadow:none;border:1px solid var(--line)}
.ct-card h2{font-size:1.15rem}
.ct-card h2 .ic{background:var(--paper);border-radius:2px}
.ct-dl>div{border-bottom:1px solid var(--line)}
.ct-map{border-radius:2px;border:1px solid var(--line);background:var(--paper)}
.ct-note{background:#fdf6e3;border:1px solid #e6d7b0;border-left:3px solid var(--gold);border-radius:0}
.ct-f input,.ct-f textarea{border:1px solid var(--line-2);border-radius:2px;background:#fff}
.ct-f input:focus,.ct-f textarea:focus{border-color:var(--ink);box-shadow:0 0 0 2px rgba(21,26,32,.08)}
.ct-f label>span{text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;color:var(--ink-2)}
.ct-hl a{border-radius:2px;box-shadow:none}
.ct-hl a:hover{transform:none;border-color:var(--ink)}
.ct-hl strong{font-family:var(--serif)}
.ct-hl a.sos{background:var(--crimson)}
.ct-off article{border-radius:0;box-shadow:none;border:1px solid var(--line)}
.ct-off img,.ct-off .ph{box-shadow:none;border:1px solid var(--line)}
.ct-off .ph{background:var(--paper)}
.ct-mini a{background:var(--paper);border:1px solid var(--line);border-radius:2px}
.filter{border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:none;padding:8px 2px}
.ct-tw{background:var(--card);border-radius:0;box-shadow:none;border:1px solid var(--line)}
.ct-table th{background:var(--paper);color:var(--ink);border-bottom:2px solid var(--ink);font-size:.68rem}
.ct-table tbody tr:nth-child(even){background:var(--sky2)}
.ct-table tbody tr:hover{background:var(--paper)}
.ct-other a{background:var(--card);border-radius:2px}
.ct-other a:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.ct-follow h3{border:0;padding:0}

/* =========================================================
   contact-fx.css  –  hover / animation effects for contact.php
   Load AFTER contact.css (already done via $extraCss).
   Brand colour: change --fx or define --brand in your theme.
   ========================================================= */
.ct-quick, .ct-off, .ct-table, .ct-hl, .ct-other { --fx: var(--brand, #1d4ed8); --fx2: var(--brand2, #06b6d4); }

/* ---------- entrance animation ---------- */
@keyframes ctUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ctShine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes ctRing { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); } 100% { box-shadow: 0 0 0 14px rgba(220,38,38,0); } }

/* ---------- Quick contact cards (Call Us / Mail / 112 / WhatsApp) ---------- */
.ct-q { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; animation: ctUp .5s both; }
.ct-q:nth-child(2) { animation-delay: .08s; } .ct-q:nth-child(3) { animation-delay: .16s; } .ct-q:nth-child(4) { animation-delay: .24s; }
.ct-q::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-130%) skewX(-20deg); pointer-events: none; }
.ct-q:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(15,23,42,.16); border-color: var(--fx); }
.ct-q:hover::before { animation: ctShine .9s ease; }
.ct-q i { transition: transform .35s cubic-bezier(.3,1.6,.5,1); display: inline-block; }
.ct-q:hover i { transform: scale(1.18) rotate(-8deg); }
.ct-q:active { transform: translateY(-2px) scale(.98); }
.ct-q:has(.q3) i, .ct-q .q3 { animation: ctRing 1.8s infinite; border-radius: 50%; }   /* 112 pulse */

/* Call Us card with Mobile + Phone */
.ct-multi { cursor: default; }
.ct-multi > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-num { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: inherit; transition: background .25s, transform .25s, color .25s; }
.ct-num .k { font-size: .72rem; opacity: .65; text-transform: uppercase; letter-spacing: .04em; min-width: 62px; }
.ct-num b { font-size: 1.02rem; }
.ct-num:hover { background: color-mix(in srgb, var(--fx) 12%, transparent); color: var(--fx); transform: translateX(6px); }
.ct-num:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Office details list ---------- */
.ct-dl > div { transition: background .25s, transform .25s; border-radius: 10px; padding-left: 6px; }
.ct-dl > div:hover { background: color-mix(in srgb, var(--fx) 7%, transparent); transform: translateX(5px); }
.ct-dl a { transition: color .2s; } .ct-dl a:hover { color: var(--fx); }

/* ---------- Helplines & other ways ---------- */
.ct-hl a, .ct-other a { transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s; }
.ct-hl a:hover, .ct-other a:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 12px 26px rgba(15,23,42,.15); border-color: var(--fx); }
.ct-other a i { display: inline-block; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.ct-other a:hover i { transform: scale(1.25) rotate(-8deg); }

/* =========================================================
   SENIOR OFFICERS
   ========================================================= */
.ct-off article { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; animation: ctUp .55s both; animation-delay: calc(var(--i, 0) * 70ms); }
/* gradient accent bar that grows on hover */
.ct-off article::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--fx), var(--fx2)); transition: width .45s ease; z-index: 2; }
/* soft glow background */
.ct-off article::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--fx) 14%, transparent), transparent 60%); opacity: 0; transition: opacity .4s; z-index: -1; }
.ct-off article:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(15,23,42,.18); border-color: var(--fx); }
.ct-off article:hover::before { width: 100%; }
.ct-off article:hover::after { opacity: 1; }

/* photo: zoom + ring */
.ct-off .pw { display: inline-block; overflow: hidden; border-radius: 50%; flex: none; transition: box-shadow .35s, transform .35s; }
.ct-off .pw img { display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.ct-off article:hover .pw { box-shadow: 0 0 0 4px var(--fx), 0 8px 20px rgba(15,23,42,.25); transform: scale(1.04); }
.ct-off article:hover .pw img { transform: scale(1.14); filter: saturate(1.15); }
.ct-off .ph { display: inline-block; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.ct-off article:hover .ph { transform: scale(1.2) rotate(-6deg); }

.ct-off h3 { transition: color .25s; }
.ct-off article:hover h3 { color: var(--fx); }

/* call / email pills */
.ct-mini a { position: relative; overflow: hidden; transition: transform .25s, background .25s, color .25s, box-shadow .25s; }
.ct-mini a:hover { background: var(--fx); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px color-mix(in srgb, var(--fx) 40%, transparent); }

/* =========================================================
   POLICE STATION DIRECTORY TABLE
   ========================================================= */
.ct-table tbody tr { position: relative; transition: background .25s, box-shadow .25s, transform .25s; animation: ctUp .45s both; animation-delay: calc(min(var(--i, 0), 14) * 35ms); }
.ct-table tbody tr:hover { background: color-mix(in srgb, var(--fx) 8%, transparent); box-shadow: inset 5px 0 0 var(--fx), 0 6px 18px rgba(15,23,42,.10); transform: scale(1.008); z-index: 1; }
.ct-table td:first-child { transition: color .25s, font-weight .25s; }
.ct-table tbody tr:hover td:first-child { color: var(--fx); font-weight: 700; }

/* station name: animated underline */
.ct-sn { position: relative; text-decoration: none; transition: color .25s; }
.ct-sn::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: linear-gradient(90deg, var(--fx), var(--fx2)); transition: width .3s ease; }
.ct-table tbody tr:hover .ct-sn { color: var(--fx); }
.ct-table tbody tr:hover .ct-sn::after { width: 100%; }

/* phone pill */
.ct-tel { display: inline-block; padding: 3px 10px; border-radius: 999px; text-decoration: none; transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.ct-tel:hover { background: var(--fx); color: #fff; transform: scale(1.07); box-shadow: 0 6px 14px color-mix(in srgb, var(--fx) 40%, transparent); }

/* "View details" button: fills + arrow slides */
.ct-table .act .btn { transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.ct-table .act .arr { display: inline-block; transition: transform .25s; }
.ct-table tbody tr:hover .act .btn { background: var(--fx); color: #fff; border-color: var(--fx); }
.ct-table .act .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--fx) 40%, transparent); }
.ct-table .act .btn:hover .arr { transform: translateX(5px); }

/* ---------- mobile: no row scaling on touch screens ---------- */
@media (hover: none) { .ct-table tbody tr:hover { transform: none; } .ct-off article:hover { transform: none; } }
@media (max-width: 640px) { .ct-num .k { min-width: 56px; } }
@media (prefers-reduced-motion: reduce) { .ct-q, .ct-off article, .ct-table tbody tr { animation: none !important; } * { transition-duration: .01ms !important; } }