*{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
      font-size:16px;
      line-height:1.6;
      color:var(--ink);
      background:var(--bg-page);
    }
    a{text-decoration:none;color:inherit}
    a:hover{color:var(--brand)}
    img{max-width:100%;display:block;border:0}

    /* MAIN PAGE WRAP */
    .page-main{
      background:var(--bg-page);
      padding:16px 0 40px;
    }
    .page-shell{
      max-width:1180px;
      margin:0 auto;
      padding:0 8px;       /* <= Option B: minimal side gap */
    }

    /* HERO IMAGE WITH PLAY ICON */
    .blog-hero{
      margin:0 auto 24px;
      border-radius:24px;
      overflow:hidden;
      background:#000;
      box-shadow:0 16px 40px rgba(0,0,0,0.22);
    }
    .blog-hero a{
      position:relative;
      display:block;
    }
    .blog-hero img{
      width:100%;
      height:auto;
      object-fit:cover;
      display:block;
    }
    .blog-hero .play-btn{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:78px;
      height:78px;
      border-radius:50%;
      background:rgba(0,0,0,0.55);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .blog-hero .play-btn i{
      font-size:42px;
      color:#fff;
      text-shadow:0 0 8px rgba(0,0,0,0.7);
    }
    @media (max-width:600px){
      .blog-hero{border-radius:20px;margin-bottom:18px}
      .blog-hero .play-btn{width:58px;height:58px}
      .blog-hero .play-btn i{font-size:30px}
    }

    /* LAYOUT: CARDS + SIDEBAR */
    .dcc-sec{
      padding:0 0 10px;
    }
    .blog-layout{
      display:grid;
      grid-template-columns:minmax(0,2.1fr) minmax(0,1.1fr);
      gap:22px;
      align-items:flex-start;
    }
    @media (max-width:960px){
      .blog-layout{
        grid-template-columns:1fr;
      }
      .blog-sidebar{
        margin-top:4px;
      }
    }

    /* MAIN CARDS */
    .blog-card{
      background:var(--bg-card);
      border-radius:var(--radius-card);
      box-shadow:var(--shadow-soft);
      padding:22px 22px 20px;
      margin-bottom:20px;
    }
    @media (max-width:600px){
      .blog-card{
        border-radius:22px;
        padding:18px 18px 16px;
      }
    }

    .blog-card-meta{
      text-transform:uppercase;
      letter-spacing:0.14em;
      font-size:0.78rem;
      color:#9ca3af;
      margin-bottom:6px;
    }
    .blog-card-title{
      font-size:1.35rem;
      line-height:1.3;
      margin-bottom:10px;
      color:#020617;
    }
    .blog-card-excerpt{
      font-size:0.98rem;
      color:var(--muted);
      margin-bottom:12px;
    }
    .blog-card p{
      margin-bottom:10px;
    }
    .blog-card h3{
      font-size:1.02rem;
      margin:12px 0 6px;
      color:#111827;
    }
    .blog-card ul{
      padding-left:20px;
      margin:4px 0 10px;
    }
    .blog-card li{
      margin-bottom:4px;
    }

    .blog-readmore{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-weight:600;
      color:var(--brand);
      margin-top:4px;
    }
    .blog-readmore i{font-size:0.9rem}

    /* SIDEBAR CONTAINER */
    .blog-sidebar{
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .sidebar-box{
      background:#ffffff;
      border-radius:24px;
      padding:16px 16px 14px;
      box-shadow:var(--shadow-soft);
    }
    .sidebar-box + .sidebar-box{
      margin-top:6px;
    }

    .sidebar-box h3{
      font-size:1rem;
      margin-bottom:4px;
      color:#020617;
    }
    .sidebar-post-date{
      font-size:0.8rem;
      color:var(--muted);
      margin-bottom:10px;
    }

    /* Sidebar tags */
    .sidebar-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .sidebar-tag{
      font-size:0.78rem;
      padding:5px 9px;
      border-radius:999px;
      background:#eef2ff;
      color:#1d4ed8;
      white-space:nowrap;
    }

    /* Sidebar posts (plan your project) */
    .sidebar-post{
      display:flex;
      gap:10px;
      align-items:flex-start;
      margin-top:12px;
    }
    .sidebar-post img{
      width:60px;
      height:60px;
      border-radius:12px;
      object-fit:cover;
      flex-shrink:0;
    }
    .sidebar-post-title{
      font-size:0.9rem;
      font-weight:600;
      margin-bottom:2px;
    }

    /* UNIVERSAL SIDEBAR VIDEO CARDS */
    .sidebar-video{
      position:relative;
      display:block;
      margin-bottom:14px;
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 12px 30px rgba(15,23,42,0.25);
    }
    .sidebar-video img{
      width:100%;
      height:auto;
      display:block;
      object-fit:cover;
    }
    .sidebar-video .play-btn{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:52px;
      height:52px;
      background:rgba(0,0,0,0.55);
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .sidebar-video .play-btn i{
      font-size:30px;
      color:#ffffff;
    }

    @media (max-width:600px){
      .sidebar-box{
        border-radius:22px;
        padding:14px 14px 12px;
      }
      .sidebar-video{
        margin-bottom:12px;
        border-radius:16px;
      }
      .sidebar-video .play-btn{
        width:44px;
        height:44px;
      }
      .sidebar-video .play-btn i{
        font-size:24px;
      }
    }

    /* READ MORE BAND */
    .dcc-band{
      max-width:1180px;
      margin:0 auto 40px;
      padding:0 8px;
    }
    .dcc-trigger{
      width:100%;
      border-radius:999px;
      padding:10px 14px;
      border:1px solid #d1d5db;
      background:#ffffff;
      font-size:0.9rem;
      font-weight:600;
      color:#111827;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      cursor:pointer;
    }
    .dcc-panel{
      display:none;
      margin-top:10px;
      background:#ffffff;
      border-radius:18px;
      padding:12px 14px;
      box-shadow:0 12px 30px rgba(15,23,42,0.08);
    }
    .dcc-links{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .dcc-tag{
      font-size:0.8rem;
      padding:6px 10px;
      border-radius:999px;
      background:#eef2ff;
      color:#1d4ed8;
      white-space:nowrap;
    }

    /* BRAND CLOSURE */
    .brand-closure{
      background:#ffffff;
      border-top:1px solid #e5e7eb;
      padding:28px 0 26px;
    }
    .brand-closure .wrap{
      max-width:1180px;
      margin:0 auto;
      padding:0 8px;
    }
    .closure-brand{
      text-align:center;
      margin-bottom:10px;
    }
    .closure-social{
      display:flex;
      justify-content:center;
      gap:18px;
      font-size:1.25rem;
      margin-bottom:8px;
    }
    .closure-social a{color:#0f172a}
    .closure-social a:hover{color:#ef4444}
    .closure-meta{
      font-size:0.8rem;
      text-align:center;
      color:#6b7280;
    }
    .footer-legal-link{color:#1d4ed8}

    /* Floating CTAs (reuse your existing look) */
    .fab-call{
      position:fixed;
      right:18px;
      bottom:88px;
      z-index:70;
      background:#0b57d0;
      color:#fff;
      width:48px;
      height:48px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 10px 24px rgba(15,23,42,0.45);
      font-size:22px;
    }
    .fab-wa{
      position:fixed;
      right:14px;
      bottom:22px;
      z-index:70;
    }

    /* Small screens – ensure no extra random padding */
    @media (max-width:600px){
      .page-main{padding-top:12px}
      .page-shell{padding:0 8px;}
    }/* =====================================================
   PREMIUM HEADER CTA BUTTON — MOBILE GUTTER FIX
   ===================================================== */
@media (max-width: 600px) {

  /* Entire CTA group container */
  .dcc-header .dcc-cta-group {
    padding: 0 10px !important;     /* adds clean left/right gap */
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Individual CTA buttons */
  .dcc-header .dcc-cta {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
    border-radius: 16px !important;   /* nice rounded mobile shape */
  }

  /* Optional — reduce icon size for better balance */
  .dcc-header .dcc-cta-icon i {
    font-size: 18px !important;
  }
}/* =====================================================
   MOBILE LOGO ALIGNMENT — MATCH CTA LEFT GAP
   ===================================================== */
@media (max-width: 600px) {

  /* Move the entire brand block slightly right */
  .dcc-header .dcc-brand {
    padding-left: 10px !important;   /* Same as CTA gap */
    padding-right: 10px !important;
  }

  /* Reduce logo size slightly for perfect balance */
  .dcc-header .dcc-logo {
    max-width: 150px !important;
    height: auto !important;
  }

  /* Keep brand text aligned nicely under the logo */
  .dcc-header .dcc-brand-text {
    margin-left: 4px !important;
  }
}/* =========================================
   OFFICE PAGE – HERO VIDEO + TITLE CARD FIX
   ========================================= */

/* Outer shell – common padding for mobile & desktop */
.office-hero-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 12px 22px;
}

/* Video hero – keep fillet & gap from sides */
.office-hero-video {
  margin: 0 0 18px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}

.office-hero-video img {
  display: block;
  width: 100%;
  height: auto;
}

/* Title card with blue strip */
.office-hero-intro {
  position: relative;
  border-radius: 26px;
  padding: 18px 18px 20px;
  background: linear-gradient(145deg, #f5f7fb 0%, #e4e7f0 100%);
  box-shadow: 0 14px 40px rgba(15,23,42,0.10);
}

/* Blue strip on the left – same aesthetic family as city blocks */
.office-hero-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: #0B3C88;
}

/* Inner padding so text never touches edges */
.office-hero-intro .tips-hero-inner {
  padding: 0 4px 0 14px; /* extra left to clear blue strip */
}

/* Breadcrumbs */
.office-hero-intro .tips-crumbs {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 6px;
}

/* H1 – laptop + mobile friendly */
.office-hero-intro h1 {
  font-size: 1.9rem;
  line-height: 1.28;
  margin: 0 0 10px;
  color: #0f172a;
  word-break: break-word;
}

/* Hero paragraph */
.office-hero-intro p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4b5563;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .office-hero-shell {
    padding: 0 10px 20px;
  }

  .office-hero-video {
    border-radius: 20px;
    margin-bottom: 14px;
  }

  .office-hero-intro {
    border-radius: 22px;
    padding: 14px 14px 16px;
  }

  .office-hero-intro::before {
    top: 10px;
    bottom: 10px;
  }

  .office-hero-intro h1 {
    font-size: 1.45rem;
    line-height: 1.35;
  }

  .office-hero-intro .tips-hero-inner {
    padding: 0 2px 0 12px;
  }
}/* =========================================
   OFFICE PAGE — FIX FOR LAPTOP / DESKTOP
   Ensures BOTH sections never touch the edges
   ========================================= */

/* Increase safe padding on larger screens */
@media (min-width: 1024px) {

  /* Outer shell – add wide gutters */
  .office-hero-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Video hero spacing */
  .office-hero-video {
    border-radius: 28px;
    margin-left: 20px;
    margin-right: 20px;
  }

  /* Title card padding */
  .office-hero-intro {
    margin-left: 20px;
    margin-right: 20px;
    padding: 30px 38px 34px !important;
    border-radius: 28px !important;
  }

  /* Blue strip height adjust */
  .office-hero-intro::before {
    top: 20px;
    bottom: 20px;
    left: 0;
  }

  /* H1 improved desktop size */
  .office-hero-intro h1 {
    font-size: 2.1rem !important;
    line-height: 1.28;
  }

  /* Internal padding for text */
  .office-hero-intro .tips-hero-inner {
    padding-left: 24px !important;
    padding-right: 10px !important;
  }
}

/* =========================================
   OPTIONAL: Extra safety for very large screens
   (Prevents stretching too wide)
   ========================================= */
@media (min-width: 1440px) {
  .office-hero-shell {
    max-width: 1280px;
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}/* ===========================================================
   FIX PREMIUM HEADER SPACING (MATCH RESIDENTIAL PAGE)
   =========================================================== */

/* 1) Fix full header container width */
.dcc-header .wrap {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* 2) Fix logo spacing (top & left safe padding) */
.dcc-brand {
  padding-left: 6px !important;
  padding-top: 6px !important;
}

/* 3) Fix CTA button spacing */
.dcc-cta-group {
  gap: 12px !important;
  padding-right: 6px !important;
}

/* 4) Fix header vertical alignment */
.dcc-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 5) Mobile fix (same as residential page) */
@media (max-width: 600px) {
  .dcc-header .wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .dcc-logo {
    width: 72px !important;
  }

  .dcc-brand-text .dcc-brand-name {
    font-size: 1.05rem !important;
  }

  .dcc-cta-group {
    margin-top: 6px !important;
  }
}/* ============================================
   DELECON® — FIXED & STABLE OFFICE HERO SYSTEM
   ============================================ */

/* WRAPPER (keeps safe space both sides) */
.office-hero-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px 28px;
}

/* HERO VIDEO BLOCK */
.office-hero-video {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.20);
}

/* HERO IMAGE */
.office-hero-video img {
  width: 100%;
  display: block;
  border-radius: 28px;
}

/* RESTORE YOUTUBE PLAY ICON */
.office-hero-video .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.office-hero-video .play-btn i {
  color: #fff;
  font-size: 42px;
}

/* TITLE BOX */
.office-hero-intro {
  background: linear-gradient(145deg, #f5f7fb, #e5e8f1);
  border-radius: 28px;
  padding: 28px;
  position: relative;
  margin-bottom: 30px;
  box-shadow: 0 14px 36px rgba(15,23,42,0.12);
}

/* BLUE STRIP LEFT */
.office-hero-intro::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 5px;
  background: #0B3C88;
  border-radius: 4px;
}

/* INNER TEXT PADDING */
.office-hero-intro .tips-hero-inner {
  padding-left: 16px;
}

/* H1 */
.office-hero-intro h1 {
  color: #0f172a;
  font-size: 2.1rem;
  line-height: 1.32;
  margin-bottom: 12px;
}

/* PARAGRAPH */
.office-hero-intro p {
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.55;
}

/* MOBILE FIXES */
@media (max-width: 600px) {
  .office-hero-shell { padding: 0 14px 20px; }

  .office-hero-video { border-radius: 22px; }
  .office-hero-video img { border-radius: 22px; }

  .office-hero-video .play-btn {
    width: 58px;
    height: 58px;
  }
  .office-hero-video .play-btn i {
    font-size: 30px;
  }

  .office-hero-intro {
    padding: 18px 16px;
    border-radius: 22px;
  }
  .office-hero-intro::before {
    top: 12px;
    bottom: 12px;
  }
  .office-hero-intro h1 {
    font-size: 1.45rem;
  }
}

/* ============================================
   UNIVERSAL CONTAINER PADDING UPGRADE
   ============================================ */

.blog-card,
.tips-section,
.section,
.city-block {
  padding: 32px 34px !important;
  border-radius: 28px !important;
}

@media (max-width: 600px){
  .blog-card,
  .tips-section,
  .section,
  .city-block {
    padding: 18px 20px !important;
    border-radius: 20px !important;
  }
}