/* ══ WP FULL WIDTH OVERRIDE ══ */
html,body{margin:0!important;padding:0!important;overflow-x:hidden!important}
#page,#outer-wrap,#wrap,#wrapper,.hfeed,.site,
#content,#primary,#main,main,.site-main,.site-content,
#site-content,.content-area,.entry-content,.post-content,
.page-content,article.page,.hentry,
.ast-container,.ast-page-builder-template,
.oceanwp-container,.wp-site-blocks{
  width:100%!important;max-width:100%!important;
  padding:0!important;margin:0!important;
  float:none!important;background:transparent!important;
  box-sizing:border-box!important}
#secondary,.widget-area{display:none!important}

/* ═══════════════════════════════════════════
   PORBANDARONLINE.COM v2 — MAIN.CSS
   Global tokens · reset · typography · layout
   ═══════════════════════════════════════════ */

/* ── CSS CUSTOM PROPERTIES ── */
:root {
  --blue:     #0082C8;
  --blue-d:   #006AAA;
  --blue-dd:  #004F85;
  --blue-l:   #E0F1FB;
  --blue-m:   #B8DDEF;
  --yellow:   #FFB800;
  --yellow-d: #E09F00;
  --yellow-l: #FFF5CC;
  --yellow-m: #FFE080;
  --dark:     #041824;
  --dark-2:   #0A2A3A;
  --bg:       #F7F5F1;
  --sand:     #EDE8E0;
  --white:    #FFFFFF;
  --border:   #DDD8D0;
  --border-l: #EDE8E2;
  --text:     #1A1A1E;
  --text-2:   #2E2E32;
  --muted:    #6A6460;
  --light:    #A09890;
  --green:    #0A9B58;
  --green-l:  #D0F5E8;
  --red:      #D42B2B;
  --red-l:    #FDE8E8;
  --teal:     #0E7C7B;
  --teal-l:   #E0F4F4;
  --purple:   #6B3FA0;
  --purple-l: #EEE6F8;
  --sh:       0 4px 20px rgba(0,130,200,.1);
  --sh-lg:    0 8px 40px rgba(0,130,200,.14);
  --sh-xl:    0 16px 60px rgba(0,130,200,.18);
  --r:        12px;
  --r-lg:     18px;
  --r-xl:     24px;
  --t:        .2s ease;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }

/* ── TYPOGRAPHY BASE ── */
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; line-height: 1.2; color: var(--text); }

/* ── LAYOUT ── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ── SPACING UTILITIES ── */
.py-40 { padding: 40px 0; }
.py-48 { padding: 48px 0; }
.py-56 { padding: 56px 0; }
.py-64 { padding: 64px 0; }
.py-72 { padding: 72px 0; }

/* ── COLOR UTILITIES ── */
.bg-white   { background: var(--white); }
.bg-sand    { background: var(--sand); }
.bg-blue-l  { background: var(--blue-l); }
.bg-dark    { background: var(--dark); }

/* ── TEXT UTILITIES ── */
.text-center { text-align: center; }
.text-blue   { color: var(--blue); }
.text-yellow { color: var(--yellow); }
.text-muted  { color: var(--muted); }

/* ── BODY TEXT ── */
.body-text { font-size: 14.5px; color: var(--muted); line-height: 1.82; margin-bottom: 16px; }
.body-text strong { color: var(--text); font-weight: 600; }

/* ── SECTION HEADERS ── */
.sec-eyebrow { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow-d); display: block; margin-bottom: 7px; }
.sec-title   { font-family: 'Playfair Display', serif; font-size: clamp(22px, 3vw, 36px); color: var(--text); line-height: 1.2; margin-bottom: 10px; }
.sec-sub     { font-size: 14px; color: var(--muted); max-width: 520px; line-height: 1.7; }
.sec-divider { width: 48px; height: 3px; background: linear-gradient(90deg, var(--blue), var(--yellow)); border-radius: 2px; margin-bottom: 20px; }
.sec-head     { margin-bottom: 40px; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; }

/* ── PAGINATION ── */
.pagination { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 40px; }
.pg-btn { width: 36px; height: 36px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; transition: all var(--t); }
.pg-btn:hover { border-color: var(--blue); color: var(--blue); }
.pg-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
}