/*
Theme Name: OnePoint
Theme URI: https://example.com/onepoint
Author: Syed Azaan Shah
Author URI: https://example.com
Description: Corporate WordPress theme for OnePoint Integrated Services - an integrated facility management provider. Clean, technical and minimal. Built to work with Elementor. Use the OnePoint Child theme for all your own changes.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onepoint
Tags: business, corporate, one-column, two-columns, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --op-primary:#1E73BE;
  --op-primary-dark:#175a95;
  --op-ink:#1A1A1A;
  --op-muted:#9CA3AF;
  --op-white:#FFFFFF;
  --op-surface:#F4F6F8;
  --op-line:#E3E7EC;

  --op-font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --op-font-head:"IBM Plex Sans Condensed","IBM Plex Sans",Arial Narrow,Arial,sans-serif;
  --op-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --op-max:1200px;
  --op-gutter:24px;
  --op-radius:2px;
  --op-section-y:88px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--op-white);
  color:var(--op-ink);
  font-family:var(--op-font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--op-primary);text-decoration:none;}
a:hover{color:var(--op-primary-dark);text-decoration:underline;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--op-font-head);
  color:var(--op-ink);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0 0 .6em;
}
h1{font-size:clamp(34px,5vw,54px);}
h2{font-size:clamp(27px,3.4vw,38px);}
h3{font-size:22px;}
h4{font-size:19px;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0 0 1.15em;padding-left:1.25em;}
blockquote{
  margin:1.5em 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--op-primary);
  color:#3d3d3d;font-size:19px;
}
code,pre{font-family:var(--op-font-mono);font-size:.92em;}
pre{background:var(--op-surface);padding:18px;overflow:auto;border:1px solid var(--op-line);}
table{width:100%;border-collapse:collapse;margin:0 0 1.5em;}
th,td{border:1px solid var(--op-line);padding:10px 12px;text-align:left;}
th{background:var(--op-surface);font-weight:600;}
hr{border:0;border-top:1px solid var(--op-line);margin:2.5em 0;}
:focus-visible{outline:2px solid var(--op-primary);outline-offset:2px;}

.op-skip-link{
  position:absolute;left:-9999px;top:0;background:var(--op-primary);color:#fff;
  padding:10px 16px;z-index:1000;
}
.op-skip-link:focus{left:8px;top:8px;}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);white-space:nowrap;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.op-wrap{width:100%;max-width:var(--op-max);margin:0 auto;padding-left:var(--op-gutter);padding-right:var(--op-gutter);}
.op-section{padding-top:var(--op-section-y);padding-bottom:var(--op-section-y);}
.op-section--surface{background:var(--op-surface);}
.op-section--ink{background:var(--op-ink);color:#e9ebee;}
.op-section--ink h2,.op-section--ink h3{color:#fff;}
.op-grid{display:grid;gap:24px;}
.op-grid--3{grid-template-columns:repeat(3,1fr);}
.op-grid--4{grid-template-columns:repeat(4,1fr);}
.op-grid--2{grid-template-columns:repeat(2,1fr);}

/* eyebrow: mono label, the theme's signature detail */
.op-eyebrow{
  font-family:var(--op-font-mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--op-primary);
  display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
}
.op-eyebrow::before{content:"";width:7px;height:7px;background:var(--op-primary);flex:none;}
.op-section--ink .op-eyebrow{color:#7fb4e6;}
.op-section--ink .op-eyebrow::before{background:#7fb4e6;}

.op-section-head{max-width:640px;margin:0 0 44px;}
.op-section-head p{color:#565b62;}
.op-section--ink .op-section-head p{color:#b7bcc3;}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.op-btn{
  display:inline-block;
  font-family:var(--op-font-body);
  font-size:15px;font-weight:600;letter-spacing:.02em;
  padding:14px 26px;border:1px solid var(--op-primary);
  background:var(--op-primary);color:#fff;border-radius:var(--op-radius);
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.op-btn:hover{background:var(--op-primary-dark);border-color:var(--op-primary-dark);color:#fff;text-decoration:none;}
.op-btn--ghost{background:transparent;color:var(--op-ink);border-color:var(--op-line);}
.op-btn--ghost:hover{background:transparent;color:var(--op-primary);border-color:var(--op-primary);}
.op-section--ink .op-btn--ghost{color:#fff;border-color:rgba(255,255,255,.35);}
.op-section--ink .op-btn--ghost:hover{color:#fff;border-color:#fff;}
.op-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}

/* ==========================================================================
   5. Header
   ========================================================================== */
.op-topbar{
  background:var(--op-ink);color:#c9ced5;
  font-family:var(--op-font-mono);font-size:12px;letter-spacing:.05em;
}
.op-topbar .op-wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;min-height:38px;}
.op-topbar a{color:#c9ced5;}
.op-topbar a:hover{color:#fff;}
.op-topbar-items{display:flex;flex-wrap:wrap;gap:8px 22px;}

.op-header{background:#fff;border-bottom:1px solid var(--op-line);position:sticky;top:0;z-index:90;}
.admin-bar .op-header{top:32px;}
.op-header .op-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px;}
.op-brand{display:flex;align-items:center;gap:12px;}
.op-brand img{max-height:50px;width:auto;}
.op-brand-text{display:flex;flex-direction:column;line-height:1.1;}
.op-brand-name{font-family:var(--op-font-head);font-size:23px;font-weight:700;color:var(--op-ink);letter-spacing:-.01em;}
.op-brand-name:hover{text-decoration:none;color:var(--op-ink);}
.op-brand-tag{font-family:var(--op-font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--op-muted);margin-top:4px;}

.op-nav-area{display:flex;align-items:center;gap:20px;}
.op-menu{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
.op-menu li{position:relative;}
.op-menu a{
  font-size:15px;font-weight:500;color:var(--op-ink);
  padding:28px 0;display:block;border-bottom:2px solid transparent;
}
.op-menu a:hover{color:var(--op-primary);text-decoration:none;border-bottom-color:var(--op-primary);}
.op-menu .current-menu-item > a{color:var(--op-primary);border-bottom-color:var(--op-primary);}
.op-menu .sub-menu{
  list-style:none;margin:0;padding:8px 0;position:absolute;left:0;top:100%;
  min-width:220px;background:#fff;border:1px solid var(--op-line);
  box-shadow:0 10px 24px rgba(26,26,26,.08);display:none;z-index:95;
}
.op-menu li:hover > .sub-menu,.op-menu li:focus-within > .sub-menu{display:block;}
.op-menu .sub-menu a{padding:9px 18px;border-bottom:0;}
.op-menu .sub-menu a:hover{background:var(--op-surface);border-bottom:0;}

.op-burger{
  display:none;background:none;border:1px solid var(--op-line);border-radius:var(--op-radius);
  padding:9px 11px;cursor:pointer;
}
.op-burger span{display:block;width:20px;height:2px;background:var(--op-ink);margin:4px 0;}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.op-hero{background:var(--op-ink);color:#fff;padding:96px 0 88px;}
.op-hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.op-hero h1{color:#fff;max-width:14ch;}
.op-hero p{color:#c2c7ce;font-size:18px;max-width:52ch;}
.op-hero .op-eyebrow{color:#7fb4e6;}
.op-hero .op-eyebrow::before{background:#7fb4e6;}

/* signature: scope-of-work panel that reads like an FM asset register */
.op-scope{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);}
.op-scope-head{
  font-family:var(--op-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#8f97a1;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.16);
}
.op-scope ul{list-style:none;margin:0;padding:0;}
.op-scope li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.09);
  font-size:15px;color:#e7e9ec;
}
.op-scope li:last-child{border-bottom:0;}
.op-scope li span{font-family:var(--op-font-mono);font-size:11px;color:#7d848e;letter-spacing:.08em;}

/* ==========================================================================
   7. Cards
   ========================================================================== */
.op-card{
  background:#fff;border:1px solid var(--op-line);border-radius:var(--op-radius);
  padding:28px 26px;transition:border-color .18s ease,box-shadow .18s ease;
}
.op-card:hover{border-color:var(--op-primary);box-shadow:0 8px 22px rgba(30,115,190,.08);}
.op-card h3{margin-bottom:10px;font-size:20px;}
.op-card p{color:#565b62;font-size:15.5px;margin:0;}
.op-card-tag{
  font-family:var(--op-font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--op-muted);text-transform:uppercase;display:block;margin-bottom:14px;
}
.op-card-link{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;}
.op-card-thumb{margin:-28px -26px 20px;border-bottom:1px solid var(--op-line);}
.op-card-thumb img{width:100%;height:190px;object-fit:cover;}

/* sectors */
.op-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;}
.op-chips li{
  border:1px solid var(--op-line);background:#fff;border-radius:var(--op-radius);
  padding:9px 15px;font-size:14.5px;color:#3d4249;
}

/* steps - numbered because mobilisation really is a sequence */
.op-step{border-top:2px solid var(--op-primary);padding-top:20px;}
.op-step-no{font-family:var(--op-font-mono);font-size:12px;letter-spacing:.14em;color:var(--op-primary);display:block;margin-bottom:10px;}
.op-step h3{font-size:19px;margin-bottom:8px;}
.op-step p{color:#565b62;font-size:15.5px;margin:0;}
.op-section--ink .op-step p{color:#b7bcc3;}
.op-section--ink .op-step{border-top-color:#7fb4e6;}
.op-section--ink .op-step-no{color:#7fb4e6;}

/* ==========================================================================
   8. CTA band
   ========================================================================== */
.op-cta{background:var(--op-primary);color:#fff;padding:64px 0;}
.op-cta .op-wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;}
.op-cta h2{color:#fff;margin:0 0 8px;}
.op-cta p{color:#e2eefa;margin:0;max-width:62ch;}
.op-cta .op-btn{background:#fff;color:var(--op-primary);border-color:#fff;}
.op-cta .op-btn:hover{background:var(--op-ink);border-color:var(--op-ink);color:#fff;}

/* ==========================================================================
   9. Content pages
   ========================================================================== */
.op-page-head{background:var(--op-surface);border-bottom:1px solid var(--op-line);padding:56px 0;}
.op-page-head h1{margin:0;}
.op-breadcrumb{font-family:var(--op-font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--op-muted);margin-bottom:12px;}
.op-main{padding:64px 0;}
.op-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;}
.op-layout--full{grid-template-columns:minmax(0,1fr);}
.op-entry{max-width:75ch;}
.op-entry-meta{font-family:var(--op-font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--op-muted);margin-bottom:14px;}
.op-entry-thumb{margin-bottom:28px;}
.op-post-list article{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--op-line);}
.op-post-list article:last-child{border-bottom:0;}
.op-post-list h2{font-size:26px;margin-bottom:8px;}

.op-sidebar .widget{margin-bottom:34px;}
.op-sidebar .widget-title{
  font-family:var(--op-font-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--op-ink);padding-bottom:10px;border-bottom:1px solid var(--op-line);margin-bottom:16px;
}
.op-sidebar ul{list-style:none;margin:0;padding:0;}
.op-sidebar li{padding:7px 0;border-bottom:1px solid var(--op-line);font-size:15px;}

.op-search-form{display:flex;gap:8px;}
input[type=text],input[type=email],input[type=search],input[type=url],input[type=tel],textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--op-line);border-radius:var(--op-radius);
  font-family:var(--op-font-body);font-size:15px;background:#fff;color:var(--op-ink);
}
input:focus,textarea:focus,select:focus{border-color:var(--op-primary);outline:none;}

.op-pagination{margin-top:40px;display:flex;gap:8px;flex-wrap:wrap;}
.op-pagination .page-numbers{
  border:1px solid var(--op-line);padding:9px 14px;border-radius:var(--op-radius);
  font-size:14px;color:var(--op-ink);
}
.op-pagination .page-numbers.current,.op-pagination .page-numbers:hover{
  background:var(--op-primary);border-color:var(--op-primary);color:#fff;text-decoration:none;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.op-footer{background:var(--op-ink);color:#aeb4bc;padding:64px 0 0;font-size:15px;}
.op-footer h4{
  color:#fff;font-family:var(--op-font-mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:16px;font-weight:500;
}
.op-footer a{color:#aeb4bc;}
.op-footer a:hover{color:#fff;}
.op-footer ul{list-style:none;margin:0;padding:0;}
.op-footer li{padding:5px 0;}
.op-footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;}
.op-footer-brand .op-brand-name{color:#fff;}
.op-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:20px 0;
  font-family:var(--op-font-mono);font-size:11.5px;letter-spacing:.06em;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:#7d848e;
}

/* placeholder note shown until real details are added */
.op-placeholder{
  font-family:var(--op-font-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--op-muted);border:1px dashed rgba(156,163,175,.5);
  padding:6px 10px;display:inline-block;border-radius:var(--op-radius);
}

/* ==========================================================================
   11. WordPress core classes
   ========================================================================== */
.alignleft{float:left;margin:0 24px 16px 0;}
.alignright{float:right;margin:0 0 16px 24px;}
.aligncenter{margin-left:auto;margin-right:auto;}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto;}
.alignfull{max-width:100%;}
.wp-caption{max-width:100%;}
.wp-caption-text,.wp-block-image figcaption{font-size:13.5px;color:var(--op-muted);margin-top:8px;}
.sticky{border-left:3px solid var(--op-primary);padding-left:20px;}

/* ==========================================================================
   12. Responsive
   ========================================================================== */
@media (max-width:1024px){
  :root{--op-section-y:64px;}
  .op-hero-inner{grid-template-columns:1fr;gap:40px;}
  .op-grid--4{grid-template-columns:repeat(2,1fr);}
  .op-layout{grid-template-columns:minmax(0,1fr);}
  .op-footer-cols{grid-template-columns:repeat(2,1fr);gap:32px;}
}
@media (max-width:820px){
  .op-burger{display:block;}
  .op-nav{
    display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-top:1px solid var(--op-line);border-bottom:1px solid var(--op-line);
    padding:8px 0;box-shadow:0 12px 24px rgba(26,26,26,.07);
  }
  .op-nav.is-open{display:block;}
  .op-header .op-wrap{position:relative;}
  .op-menu{flex-direction:column;gap:0;}
  .op-menu a{padding:13px var(--op-gutter);border-bottom:1px solid var(--op-line);}
  .op-menu a:hover{border-bottom-color:var(--op-line);background:var(--op-surface);}
  .op-menu .sub-menu{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 16px;}
  .op-nav-area .op-btn{display:none;}
  .op-grid--3,.op-grid--2{grid-template-columns:1fr;}
  .op-hero{padding:64px 0 56px;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .op-grid--4{grid-template-columns:1fr;}
  .op-footer-cols{grid-template-columns:1fr;}
  .op-topbar{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* ==========================================================================
   13. Logo, social and floating WhatsApp
   ========================================================================== */
.op-brand img,.op-brand .custom-logo{max-height:56px;width:auto;}
.op-footer-brand img{max-height:52px;width:auto;margin-bottom:16px;}

.op-social{display:flex;gap:10px;align-items:center;}
.op-social a{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.22);color:#c9ced5;border-radius:var(--op-radius);
}
.op-social a:hover{background:var(--op-primary);border-color:var(--op-primary);color:#fff;text-decoration:none;}
.op-social svg{width:14px;height:14px;fill:currentColor;}

.op-wa-float{
  position:fixed;right:18px;bottom:18px;z-index:120;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.op-wa-float:hover{background:#1da851;color:#fff;text-decoration:none;}
.op-wa-float svg{width:30px;height:30px;fill:currentColor;}

.op-call{display:flex;align-items:center;gap:12px;}
.op-call-icon{
  width:42px;height:42px;flex:none;border:1px solid var(--op-line);border-radius:var(--op-radius);
  display:flex;align-items:center;justify-content:center;color:var(--op-primary);
}
.op-call-icon svg{width:18px;height:18px;fill:currentColor;}
.op-call-label{font-family:var(--op-font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--op-muted);display:block;}
.op-call-number{font-family:var(--op-font-head);font-size:19px;font-weight:700;color:var(--op-ink);letter-spacing:.01em;}
.op-call-number:hover{color:var(--op-primary);text-decoration:none;}

/* ==========================================================================
   14. Hero with background image
   ========================================================================== */
.op-hero{position:relative;overflow:hidden;}
.op-hero--image{background-size:cover;background-position:center;background-repeat:no-repeat;}
.op-hero-overlay{position:absolute;inset:0;background:rgba(26,26,26,.78);}
.op-hero--image .op-wrap{position:relative;z-index:2;}
.op-hero-call{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  color:#fff;font-family:var(--op-font-head);font-size:23px;font-weight:700;
}
.op-hero-call:hover{color:#7fb4e6;text-decoration:none;}
.op-hero-call span{
  width:44px;height:44px;border-radius:50%;background:var(--op-primary);
  display:inline-flex;align-items:center;justify-content:center;
}
.op-hero-call svg{width:19px;height:19px;fill:#fff;}
.op-hero-call small{display:block;font-family:var(--op-font-mono);font-size:10.5px;letter-spacing:.13em;color:#9aa2ac;text-transform:uppercase;font-weight:400;}

/* three info boxes sitting on the hero edge */
.op-infobar{position:relative;z-index:3;margin-top:-58px;}
.op-infobar .op-grid{gap:0;background:#fff;border:1px solid var(--op-line);box-shadow:0 14px 34px rgba(26,26,26,.10);}
.op-info{display:flex;gap:16px;padding:26px 24px;border-right:1px solid var(--op-line);}
.op-info:last-child{border-right:0;}
.op-info-icon{
  width:44px;height:44px;flex:none;background:var(--op-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;border-radius:var(--op-radius);
}
.op-info-icon svg{width:20px;height:20px;fill:currentColor;}
.op-info h3{font-size:17px;margin:0 0 4px;}
.op-info p{font-size:14.5px;color:#565b62;margin:0;}

/* ==========================================================================
   15. Service card icons
   ========================================================================== */
.op-icon-box{
  width:52px;height:52px;margin-bottom:18px;
  border:1px solid var(--op-line);border-radius:var(--op-radius);
  display:flex;align-items:center;justify-content:center;color:var(--op-primary);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.op-icon-box svg{width:24px;height:24px;fill:currentColor;}
.op-card:hover .op-icon-box{background:var(--op-primary);border-color:var(--op-primary);color:#fff;}

@media (max-width:1024px){
  .op-infobar{margin-top:-40px;}
  .op-infobar .op-grid--3{grid-template-columns:1fr;}
  .op-info{border-right:0;border-bottom:1px solid var(--op-line);}
  .op-info:last-child{border-bottom:0;}
}
@media (max-width:820px){
  .op-header .op-call{display:none;}
  .op-infobar{margin-top:0;padding-top:0;}
  .op-hero-call{font-size:20px;}
}

/* ==========================================================================
   16. Service cards with numbers, project cards, filters
   ========================================================================== */
.op-card--service,.op-card--project{display:flex;flex-direction:column;}
.op-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.op-card-no{
  font-family:var(--op-font-mono);font-size:26px;font-weight:500;line-height:1;
  color:var(--op-line);letter-spacing:-.02em;
}
.op-card--service:hover .op-card-no{color:var(--op-primary);}
.op-card--service h3{margin-top:6px;}
.op-card h3 a{color:var(--op-ink);}
.op-card h3 a:hover{color:var(--op-primary);text-decoration:none;}
.op-card-link{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;}
.op-card-link svg{width:15px;height:15px;fill:currentColor;transition:transform .18s ease;}
.op-card-link:hover{text-decoration:none;}
.op-card-link:hover svg{transform:translateX(3px);}

.op-thumb-empty{
  display:flex;align-items:center;justify-content:center;height:190px;
  background:var(--op-surface);color:var(--op-muted);
}
.op-thumb-empty svg{width:38px;height:38px;fill:currentColor;}

.op-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px;}
.op-filter-btn{
  border:1px solid var(--op-line);border-radius:var(--op-radius);
  padding:9px 16px;font-size:14.5px;color:#3d4249;background:#fff;
}
.op-filter-btn:hover{border-color:var(--op-primary);color:var(--op-primary);text-decoration:none;}
.op-filter-btn.is-active{background:var(--op-primary);border-color:var(--op-primary);color:#fff;}

.op-empty{
  border:1px dashed var(--op-line);padding:26px;text-align:center;
  color:#565b62;border-radius:var(--op-radius);
}

/* ==========================================================================
   17. Service page: header row and side boxes
   ========================================================================== */
.op-page-head--service{background:var(--op-ink);border-bottom:0;color:#fff;}
.op-page-head--service h1{color:#fff;margin:0;}
.op-page-head--service .op-breadcrumb{color:#8f97a1;}
.op-page-head--service .op-breadcrumb a{color:#8f97a1;}
.op-page-head--service .op-breadcrumb a:hover{color:#fff;}
.op-page-head-row{display:flex;align-items:center;gap:20px;}
.op-icon-box--lg{
  width:72px;height:72px;flex:none;margin:0;
  background:var(--op-primary);border-color:var(--op-primary);color:#fff;
}
.op-icon-box--lg svg{width:32px;height:32px;}

.op-side-box{border:1px solid var(--op-line);border-radius:var(--op-radius);padding:24px;margin-bottom:24px;}
.op-side-box h4{
  font-family:var(--op-font-mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--op-ink);margin:0 0 16px;font-weight:500;
}
.op-side-list{list-style:none;margin:0;padding:0;}
.op-side-list li{border-bottom:1px solid var(--op-line);}
.op-side-list li:last-child{border-bottom:0;}
.op-side-list a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 0;font-size:15px;color:#3d4249;
}
.op-side-list a:hover{color:var(--op-primary);text-decoration:none;}
.op-side-list svg{width:15px;height:15px;fill:currentColor;opacity:.5;}
.op-side-list .is-current > a{color:var(--op-primary);font-weight:600;}

.op-side-box--dark{background:var(--op-ink);border-color:var(--op-ink);color:#c2c7ce;}
.op-side-box--dark h4{color:#fff;}
.op-side-box--dark p{font-size:15px;margin-bottom:16px;}
.op-side-call{
  display:flex;align-items:center;gap:10px;color:#fff;
  font-family:var(--op-font-head);font-size:21px;font-weight:700;margin-bottom:16px;
}
.op-side-call:hover{color:#7fb4e6;text-decoration:none;}
.op-side-call svg{width:18px;height:18px;fill:var(--op-primary);}
.op-btn--wa{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:#25D366;border-color:#25D366;
}
.op-btn--wa:hover{background:#1da851;border-color:#1da851;}
.op-btn--wa svg{width:17px;height:17px;fill:currentColor;}

.op-facts{list-style:none;margin:0;padding:0;}
.op-facts li{padding:11px 0;border-bottom:1px solid var(--op-line);font-size:15px;}
.op-facts li:last-child{border-bottom:0;}
.op-facts span{
  display:block;font-family:var(--op-font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--op-muted);margin-bottom:3px;
}

.op-contact-list{list-style:none;margin:0;padding:0;}
.op-contact-list li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--op-line);font-size:15px;}
.op-contact-list li:last-child{border-bottom:0;}
.op-contact-icon{
  width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--op-surface);color:var(--op-primary);border-radius:var(--op-radius);
}
.op-contact-icon svg{width:16px;height:16px;fill:currentColor;}

.op-projects-block{margin-top:56px;padding-top:44px;border-top:1px solid var(--op-line);}
.op-projects-block .op-section-head{margin-bottom:28px;}

@media (max-width:820px){
  .op-page-head-row{gap:14px;}
  .op-icon-box--lg{width:54px;height:54px;}
  .op-icon-box--lg svg{width:24px;height:24px;}
  .op-projects-block .op-grid--2{grid-template-columns:1fr;}
}