/* ================================================================
   Onboard Holidays & Travel — Frontend CSS v5.0
   Editorial / boutique-travel-agency system — matches the approved
   design concept (onboard-homepage-concept.html) exactly: Fraunces +
   Inter, warm paper background, ink/ocean/sunset/gold palette, sharp
   2px/10px radii instead of the old pill-rounded gradient look.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Approved concept palette (exact hex values, do not alter) ---- */
  --ob-ink:        #0B2436;
  --ob-ink-soft:   #3A5568;
  --ob-paper:      #FBF7EF;
  --ob-paper-2:    #F3ECDD;
  --ob-ocean:      #0090C5;
  --ob-ocean-deep: #075C7A;
  --ob-sunset:     #E85D2A;
  --ob-sunset-deep:#C2361F;
  --ob-gold:       #F0A93A;
  --ob-line:       rgba(11,36,54,.12);

  /* ---- Legacy token names repointed to the new palette so every
     existing template/component that references them shifts to the
     new look without needing every single rule rewritten. ---- */
  --ob-primary:       var(--ob-ocean);
  --ob-primary-dark:  var(--ob-ocean-deep);
  --ob-primary-mid:   var(--ob-ocean);
  --ob-primary-light: var(--ob-paper-2);
  --ob-accent:        var(--ob-sunset);
  --ob-accent-dark:   var(--ob-sunset-deep);
  --ob-accent-light:  #F7E2D2;
  --ob-yellow:        var(--ob-gold);
  --ob-yellow-dark:   #D89321;
  --ob-dark:          var(--ob-ink);
  --ob-surface:       var(--ob-paper-2);
  --ob-gray-700:      var(--ob-ink-soft);
  --ob-gray-500:      var(--ob-ink-soft);
  --ob-gray-300:      var(--ob-line);
  --ob-gray-200:      var(--ob-line);
  --ob-gray-100:      var(--ob-paper-2);
  --ob-white:         var(--ob-paper);
  --ob-danger:        var(--ob-sunset-deep);
  --ob-success:       #2E7D4F;
  --ob-sunset-gradient:      linear-gradient(120deg,var(--ob-ocean) 0%,var(--ob-sunset) 60%,var(--ob-gold) 100%);
  --ob-sunset-gradient-soft: linear-gradient(120deg,rgba(0,144,197,.12) 0%,rgba(232,93,42,.12) 55%,rgba(240,169,58,.12) 100%);
  --ob-ocean-gradient:       linear-gradient(135deg,var(--ob-ocean-deep) 0%,var(--ob-ocean) 100%);

  /* ---- Shape language: sharp editorial radii, not pill-rounded ---- */
  --ob-r:             10px;
  --ob-r-lg:          10px;
  --ob-r-xl:          14px;
  --ob-r-full:        2px;

  --ob-sh:            0 10px 30px -12px rgba(11,36,54,.25);
  --ob-sh-lg:         0 22px 40px -18px rgba(11,36,54,.35);
  --ob-sh-accent:     0 14px 30px -10px rgba(194,54,31,.35);

  --ob-t:             .25s cubic-bezier(.25,.46,.45,.94);
  --ob-t-lg:          .4s cubic-bezier(.2,.8,.2,1);
  --ob-max:           1240px;
  --ob-font:          'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ob-font-display:  'Fraunces',Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ob-font);font-size:16px;line-height:1.65;color:var(--ob-ink);background:var(--ob-paper);-webkit-font-smoothing:antialiased}
/* Horizontal-scroll guard lives on #ob-main/.ob-footer (NOT html/body) —
   see the note near the bottom of this file for why: overflow-x:hidden on
   html/body breaks position:sticky for the header, since it's a direct
   child of body and any non-visible overflow on an ancestor makes that
   ancestor the sticky element's scrolling container instead of the
   viewport. Scoping it to the content wrappers (which sit alongside the
   header, not around it) gets the same "no horizontal scrollbar" result
   without breaking the sticky nav.
   Uses `clip`, NOT `hidden`. Per the CSS Overflow spec, pairing a
   non-visible overflow-x with a `visible` overflow-y forces the browser
   to compute overflow-y as `auto` too — which silently clipped the
   homepage hero's `margin-top:-96px` (the trick that lets it render
   behind/under the transparent sticky header). That clipping cut the
   hero off at #ob-main's own top edge, so the page's paper-colored
   background showed through the transparent header instead of the dark
   hero photo — leaving the white nav links unreadable against a light
   background. `clip` doesn't trigger that same forced pairing (both
   axes only get force-paired when one side is neither `visible` nor
   `clip`), so overflow-y stays genuinely `visible` and the hero overlap
   renders correctly again, while horizontal scroll is still blocked. */
#ob-main,.ob-footer{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--ob-t)}
a:hover{color:var(--ob-ocean-deep)}
ul,ol{list-style:none;margin:0;padding:0}

/* Fraunces on every heading-style element across the site — weight 600,
   NOT italic (italic Fraunces is reserved for pull-quotes/blockquotes,
   matching the approved concept). Keeps the same class names/markup,
   sets the typographic voice to Fraunces (display) / Inter (body). */
h1,h2,h3,h4,.ob-h1,.ob-h2,.ob-logo__text,.ob-brand,.ob-hero__h1,.ob-sd-hero__title,
.ob-page-hero__h1,.ob-post-hero__title,.ob-cta-banner__h2,.ob-footer__cta-title,
.ob-auth-left__title,.ob-auth-box__title,.ob-scard__title,
.ob-card__title,.ob-why-card__title,.ob-blog-hero-banner__title,.ob-booking-card__price,
.ob-sd-booking__price,.ob-about-stat__num,.ob-fare-card__code,.ob-db-identity__name,
.ob-blog-list-card__title,.ob-timeline-card__title,.serif{
  font-family:var(--ob-font-display);
  font-weight:600;
  font-style:normal;
  letter-spacing:-.01em;
}
blockquote,.ob-quote,.ob-pullquote{font-family:var(--ob-font-display);font-style:italic;font-weight:400}

/* ── Typography ── */
.ob-h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-.03em}
.ob-h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;line-height:1.18;color:var(--ob-dark);letter-spacing:-.025em}
.ob-lead{font-size:1.05rem;line-height:1.75;color:var(--ob-gray-500)}
.ob-section-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ob-accent);margin-bottom:.625rem}
.ob-text-center{text-align:center}

/* ── Layout ── */
.ob-container{max-width:var(--ob-max);margin:0 auto;padding:0 1.5rem;width:100%}
@media(min-width:768px){.ob-container{padding:0 2rem}}
@media(min-width:1280px){.ob-container{padding:0 2.5rem}}
.ob-section{padding:5rem 0}
@media(max-width:768px){.ob-section{padding:3.5rem 0}}
.ob-bg-surface{background:var(--ob-surface)}
.ob-section-header{text-align:center;max-width:620px;margin:0 auto 3.5rem}
.ob-section-header .ob-lead{margin-top:.875rem}

/* ══ HEADER — sticky, transparent-over-hero → blurred paper bar once the
   page scrolls past ~40px (see the .scrolled toggle script in header.php).
   Matches the approved concept 1:1: logo+mark left, centered nav links,
   sign-in/CTA right. position:sticky works fine here because #ob-main no
   longer needs a fixed-header offset — the header takes up normal flow
   height and simply sticks at top:0. ══ */
.ob-header{position:sticky;top:0;left:0;right:0;width:100%;z-index:1000;padding:22px 0;background:rgba(251,247,239,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--ob-line);transition:background .35s ease,padding .35s ease,box-shadow .35s ease}
/* Safe default (above): solid paper bar, ink text, readable with zero JS/scroll
   dependency — used on every page EXCEPT the homepage hero. Opt-in transparent
   hero-overlay treatment below requires BOTH .ob-header--transparent (only
   echoed by header.php when the full-bleed dark hero is actually present)
   AND :not(.scrolled) (still-at-top-of-page). */
.ob-header.ob-header--transparent:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.ob-header.scrolled{background:rgba(251,247,239,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:14px 0;box-shadow:0 1px 0 var(--ob-line)}
#ob-main{display:block}

.ob-header__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.ob-brand{display:flex;align-items:center;gap:10px;font-family:var(--ob-font-display);font-weight:500;font-size:1.375rem;letter-spacing:-.01em;color:var(--ob-ink);flex-shrink:0}
.ob-header.ob-header--transparent:not(.scrolled) .ob-brand{color:#fff}
.ob-brand__img{height:52px;width:auto;max-width:220px;object-fit:contain}
@media(max-width:560px){.ob-brand__img{height:42px}}
.ob-brand__text{white-space:nowrap}

/* Desktop nav — centered between logo and CTAs */
.ob-nav{display:none}
@media(min-width:1024px){.ob-nav{display:flex;align-items:center}}
.ob-nav__menu{display:flex;align-items:center;gap:2.25rem;font-size:.906rem;font-weight:500}
.ob-nav__menu>li>a{position:relative;display:inline-block;padding:.25rem 0;color:var(--ob-ink);opacity:.82;transition:opacity .2s;text-decoration:none}
.ob-header.ob-header--transparent:not(.scrolled) .ob-nav__menu>li>a{color:#fff}
.ob-nav__menu>li>a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--ob-sunset);transform:scaleX(0);transition:transform .25s}
.ob-nav__menu>li>a:hover,.ob-nav__menu>li.current-menu-item>a,.ob-nav__menu>li.current_page_item>a{opacity:1}
.ob-nav__menu>li>a:hover::after,.ob-nav__menu>li.current-menu-item>a::after{transform:scaleX(1)}

.ob-header__call{display:none}
.ob-header__actions{display:flex;align-items:center;gap:1.125rem;flex-shrink:0}
/* Online Applications off (Settings → Features): header.php renders no
   Sign in/Dashboard/Plan a trip buttons, so .ob-header__actions is empty on
   desktop (the mobile hamburger inside it is display:none above 1024px).
   Push the primary nav into that now-empty space with margin-left:auto —
   it's still a flex item of .ob-header__inner, so this pins it flush to
   the header's right edge instead of leaving a gap where the button was. */
.ob-header--no-account .ob-nav{margin-left:auto}
@media(max-width:1023px){.ob-header__actions>.ob-btn{display:none}}
.ob-mobile-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;border:none;background:none;padding:8px;flex-shrink:0}
@media(min-width:1024px){.ob-mobile-toggle{display:none}}
.ob-mobile-toggle span{display:block;height:2px;background:var(--ob-ink);border-radius:2px;transition:all var(--ob-t)}
.ob-header.ob-header--transparent:not(.scrolled) .ob-mobile-toggle span{background:#fff}
.ob-header.ob-header--transparent:not(.scrolled) .ob-header__actions .ob-btn-line{color:#fff!important;border-color:rgba(255,255,255,.65)}
.ob-header.ob-header--transparent:not(.scrolled) .ob-header__actions .ob-btn-line:hover{background:#fff;color:var(--ob-ink)!important}
.ob-mobile-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ob-mobile-toggle.open span:nth-child(2){opacity:0}
.ob-mobile-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.ob-mobile-nav{position:fixed;inset:0;z-index:1200;background:var(--ob-paper);transform:translateX(-100%);transition:transform var(--ob-t-lg);overflow-y:auto;padding:5rem 0 2rem}
.ob-mobile-nav.open{transform:translateX(0)}
.ob-mobile-menu{padding:0 1.5rem}
.ob-mobile-menu li a{display:block;padding:.875rem 0;font-size:1.1rem;font-weight:500;color:var(--ob-ink);border-bottom:1px solid var(--ob-line)}
.ob-mobile-menu li a:hover{color:var(--ob-ocean-deep)}
body.ob-nav-open{overflow:hidden}

/* ══ BUTTONS — sharp 2px radius, 1px border, sentence case, lift or
   fill-swap on hover. Matches the approved concept's .btn system. ══ */
.ob-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.375rem;font-family:var(--ob-font);font-size:.875rem;font-weight:600;border-radius:var(--ob-r-full);border:1px solid var(--ob-ink);cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s;white-space:nowrap;text-decoration:none;line-height:1.4}
.ob-btn-dark,.ob-btn-primary{background:var(--ob-ink);color:var(--ob-paper)!important;border-color:var(--ob-ink)}
.ob-btn-dark:hover,.ob-btn-primary:hover{transform:translateY(-2px)}
.ob-btn-line,.ob-btn-outline,.ob-btn-ghost{background:transparent;color:var(--ob-ink)!important;border-color:var(--ob-ink)}
.ob-btn-line:hover,.ob-btn-outline:hover,.ob-btn-ghost:hover{background:var(--ob-ink);color:var(--ob-paper)!important}
.ob-btn-sunset,.ob-btn-accent{background:var(--ob-sunset);border-color:var(--ob-sunset);color:#fff!important}
.ob-btn-sunset:hover,.ob-btn-accent:hover{transform:translateY(-2px);background:var(--ob-sunset-deep);border-color:var(--ob-sunset-deep);color:#fff!important}
.ob-btn-hero-outline,.ob-btn-cta-ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.55)}
.ob-btn-hero-outline:hover,.ob-btn-cta-ghost:hover{background:#fff;color:var(--ob-ink)!important}
.ob-btn-sm{padding:.55rem 1.125rem;font-size:.8rem}
.ob-btn-lg{padding:.95rem 2rem;font-size:.95rem}
.ob-btn-xl{padding:1.1rem 2.4rem;font-size:1rem}
.ob-btn-block{width:100%;display:flex}

/* ══ HERO — split layout matching the approved concept: eyebrow, Fraunces
   headline (one word can carry the .ob-hero__em gold-underline treatment),
   subhead, two CTAs, plus a right-hand stat panel with a vertical divider.
   Full-bleed photo background with a dual gradient (bottom-darken +
   diagonal-darken from the left) sits behind everything. Any admin-
   configured slides render as a simple CSS crossfade, not a carousel. ══ */
.ob-hero{position:relative;z-index:0;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;margin-top:-96px;padding-top:96px;background:var(--ob-ink)}
.ob-hero-bg{position:absolute;inset:0;z-index:-2}
.ob-hero-bg img,.ob-hero-bg picture{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.05)}
/* Top layer is a dedicated dark→transparent scrim sized to the header, not
   the whole hero: whatever background image an admin uploads (Homepage
   Builder), the sticky transparent header's white logo/nav text needs to
   stay readable over it. The existing 180deg + 100deg gradients below still
   handle the hero's overall mood-lighting; this just guarantees contrast
   in the strip the header actually sits in. */
.ob-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,14,20,.65) 0%,rgba(4,14,20,.34) 90px,rgba(4,14,20,0) 200px),linear-gradient(180deg,rgba(7,45,60,.25) 0%,rgba(7,45,60,.15) 40%,rgba(7,20,28,.88) 100%),linear-gradient(100deg,rgba(7,45,60,.55) 0%,rgba(7,45,60,0) 55%)}
.ob-hero-inner{position:relative;z-index:1;width:100%;padding-bottom:4.75rem}
.ob-hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:3.75rem;align-items:end}
.ob-hero-grid--single{grid-template-columns:1fr;max-width:52rem}
@media(max-width:900px){.ob-hero-grid{grid-template-columns:1fr}}
.ob-hero-eyebrow{display:flex;align-items:center;gap:10px;color:#F7D9A8;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.375rem}
.ob-hero-eyebrow::before{content:'';width:28px;height:1px;background:#F7D9A8}
.ob-hero h1,.ob-hero__h1{font-family:var(--ob-font-display);font-weight:600;font-style:normal;color:#fff;font-size:clamp(2.4rem,5.4vw,4.5rem);line-height:1.06;letter-spacing:-.02em;margin-bottom:1.625rem;text-shadow:none}
.ob-hero h1 em,.ob-hero__h1 em,.ob-hero__em{font-style:normal;font-weight:600;color:var(--ob-gold);position:relative}
.ob-hero h1 em::after,.ob-hero__h1 em::after,.ob-hero__em::after{content:'';position:absolute;left:2px;right:2px;bottom:6px;height:9px;background:rgba(232,93,42,.55);z-index:-1}
.ob-hero-sub,.ob-hero__sub{color:rgba(255,255,255,.82);font-size:1.0625rem;line-height:1.6;max-width:420px;margin-bottom:2.125rem}
.ob-hero-actions,.ob-hero__actions{display:flex;gap:.875rem;flex-wrap:wrap;margin-bottom:0}
.ob-hero-side{color:#fff;border-left:1px solid rgba(255,255,255,.25);padding-left:2.25rem}
@media(max-width:900px){.ob-hero-side{border-left:none;border-top:1px solid rgba(255,255,255,.25);padding-left:0;padding-top:1.5rem}}
.ob-hero-stat-row,.ob-hero__stats{display:flex;flex-direction:column;gap:1.375rem;border-top:none;padding-top:0}
@media(max-width:900px){.ob-hero-stat-row,.ob-hero__stats{flex-direction:row;gap:1.875rem}}
.ob-hero-stat b,.ob-hero__stat-num{display:block;font-family:var(--ob-font-display);font-size:2.1rem;font-weight:600;color:#fff}
.ob-hero-stat span,.ob-hero__stat-label{font-size:.78rem;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.08em;margin-top:0}

/* ══ MARQUEE — dark looping ticker strip directly under the hero ══ */
.marquee-strip{background:var(--ob-ink);color:var(--ob-paper);overflow:hidden;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.marquee-track{display:flex;gap:56px;white-space:nowrap;animation:ob-scroll-left 32s linear infinite;width:max-content}
.marquee-track span{font-family:var(--ob-font-display);font-style:italic;font-size:15px;color:rgba(251,247,239,.55);display:flex;align-items:center;gap:56px}
.marquee-track span b{font-style:normal;font-weight:500;color:var(--ob-gold);margin-right:56px}
@keyframes ob-scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══ SECTION LABEL SYSTEM — varied numbered tags instead of a repeated
   centered badge+heading pattern ══ */
.num-tag{font-size:.78rem;font-weight:600;color:var(--ob-sunset-deep);letter-spacing:.1em;margin-bottom:1.125rem}

/* ══ STAT BAND — full-bleed 4-column dark band ══ */
.ob-trust-strip,.stat-band{background:var(--ob-ocean-deep);color:#fff;padding:0}
.ob-trust-grid,.stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.ob-trust-grid,.stat-grid{grid-template-columns:repeat(2,1fr)}}
/* Tighter vertical rhythm than the big editorial sections on purpose —
   the stat band is a quick trust-numbers strip, not a full section. */
.ob-trust-item,.stat-cell{padding:2.75rem 2.5rem;border-left:1px solid rgba(255,255,255,.14);display:block;text-align:left}
@media(max-width:768px){.ob-trust-item,.stat-cell{padding:2rem 1.5rem}}
.ob-trust-item:first-child,.stat-cell:first-child{border-left:none}
@media(max-width:900px){.ob-trust-item:nth-child(3),.stat-cell:nth-child(3){border-left:none}}
.ob-trust-icon,.ob-trust-title{display:none}
.stat-cell b,.ob-trust-item b{display:block;font-family:var(--ob-font-display);font-weight:600;font-size:2.8rem;margin-bottom:.375rem}
.stat-cell span,.ob-trust-sub{font-size:.8125rem;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.08em}

/* ══ SERVICES GRID ══ */
.ob-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:1024px){.ob-services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ob-services-grid{grid-template-columns:1fr}}

.ob-services-grid{perspective:1600px}

/* ── Bento asymmetry — desktop only. The PHP loop that renders
   .ob-scard is a plain foreach with no size data per item, so the
   varied sizing here is done purely via nth-child spans against the
   existing 3-column grid rather than touching the template markup. The
   first card in every group of 6 spans 2 columns and 2 rows (a "hero"
   tile), the 4th spans 2 rows, giving the grid an irregular bento
   rhythm instead of a uniform matrix of equal boxes. */
@media(min-width:1025px){
  .ob-services-grid{grid-auto-flow:dense}
  .ob-services-grid .ob-scard:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
  .ob-services-grid .ob-scard:nth-child(6n+4){grid-row:span 2}
  .ob-services-grid .ob-scard:nth-child(6n+1) .ob-scard__img{aspect-ratio:16/10}
  .ob-services-grid .ob-scard:nth-child(6n+4) .ob-scard__img{aspect-ratio:4/5}
}
.ob-scard{
  position:relative;
  background:var(--ob-white);
  border-radius:30px;
  border:1px solid var(--ob-gray-200);
  display:flex;
  flex-direction:column;
  isolation:isolate;
  box-shadow:0 1px 2px rgba(13,27,15,.04);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
/* Clean lift on hover — simple translateY + soft shadow, no tilt/glow/sheen */
.ob-scard:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px -12px rgba(13,27,15,.18),0 4px 10px -4px rgba(13,27,15,.08);
  border-color:var(--ob-gray-200);
}
.ob-scard__img{position:relative;overflow:hidden;border-radius:30px 30px 0 0;aspect-ratio:16/9;background:var(--ob-gray-100);flex-shrink:0}
.ob-scard--featured .ob-scard__img{aspect-ratio:21/9}
.ob-scard__img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,27,15,0) 45%,rgba(13,27,15,.55) 100%);
  opacity:0;
  transition:opacity var(--ob-t-lg);
  z-index:1;
}
.ob-scard:hover .ob-scard__img::after{opacity:1}
.ob-scard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ob-scard:hover .ob-scard__img img{transform:scale(1.05)}
.ob-scard__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--ob-primary-light);transition:transform var(--ob-t-lg)}
.ob-scard:hover .ob-scard__placeholder{transform:scale(1.05)}
/* Floating quick-view button — glass, fades/scales in over the image on hover */
.ob-scard__quickview{
  position:absolute;
  bottom:.9rem;right:.9rem;z-index:2;
  width:2.5rem;height:2.5rem;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  opacity:0;
  transform:translateY(10px) scale(.85);
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1),background .3s ease;
  pointer-events:none;
}
.ob-scard__quickview .ob-svg-icon{width:16px;height:16px}
.ob-scard:hover .ob-scard__quickview{opacity:1;transform:translateY(0) scale(1);background:var(--ob-accent)}
.ob-scard__type{
  position:absolute;top:.75rem;left:.75rem;z-index:2;
  background:var(--ob-primary);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:.28rem .7rem;border-radius:var(--ob-r-full);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:transform var(--ob-t-lg);
}
.ob-scard:hover .ob-scard__type{transform:translateY(-2px)}
.ob-scard__type--tour{background:var(--ob-accent)}
.ob-scard__apply-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.75rem 1rem;border-radius:var(--ob-r-full);
  background:var(--ob-primary);color:#fff;font-weight:700;font-size:.9rem;
  border:none;text-decoration:none;margin-top:auto;
  transition:background var(--ob-t-lg),transform var(--ob-t-lg),filter var(--ob-t);
}
.ob-scard__apply-btn:hover{background:var(--ob-primary-dark);filter:brightness(.96);transform:translateY(-1px);color:#fff}
.ob-scard__featured{position:absolute;top:.75rem;right:.75rem;z-index:2;background:#5C2E00;color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.28rem .7rem;border-radius:var(--ob-r-full);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ob-scard__body{padding:1.375rem 1.625rem 1.625rem;display:flex;flex-direction:column;flex:1;position:relative;z-index:1;overflow:hidden;border-radius:0 0 30px 30px}
.ob-scard__title{font-size:1.05rem;font-weight:700;color:var(--ob-dark);margin-bottom:.5rem;line-height:1.3;transition:color var(--ob-t);position:relative;z-index:1}
.ob-scard__title a{color:inherit}
.ob-scard:hover .ob-scard__title{color:var(--ob-primary)}
.ob-scard--featured .ob-scard__title{font-size:1.2rem}
.ob-scard__meta{display:flex;align-items:center;gap:1rem;font-size:.8rem;color:var(--ob-gray-500);margin-bottom:.875rem;flex-wrap:wrap;position:relative;z-index:1}
.ob-scard__rating{color:var(--ob-accent-dark);font-weight:600}
.ob-scard__desc{font-size:.875rem;color:var(--ob-gray-500);line-height:1.65;margin-bottom:1.25rem;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;position:relative;z-index:1}
.ob-scard__foot{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--ob-gray-100);margin-top:auto;transition:border-color var(--ob-t-lg);position:relative;z-index:1}
.ob-scard:hover .ob-scard__foot{border-top-color:var(--ob-primary-light)}
.ob-scard__price{font-size:1.3rem;font-weight:800;color:var(--ob-primary);letter-spacing:-.02em}
.ob-scard__price-note{font-size:.72rem;color:var(--ob-gray-500);margin-top:.1rem}
.ob-scard__foot .ob-btn{transition:transform var(--ob-t-lg),box-shadow var(--ob-t-lg)}
.ob-scard:hover .ob-scard__foot .ob-btn{transform:translateX(2px);box-shadow:0 6px 16px -4px rgba(45,106,79,.4)}
.ob-scard__foot .ob-btn .ob-svg-icon{transition:transform var(--ob-t-lg)}
.ob-scard:hover .ob-scard__foot .ob-btn .ob-svg-icon{transform:translateX(3px)}
@media(hover:none){
  .ob-scard:hover{transform:none;box-shadow:0 1px 2px rgba(13,27,15,.04)}
  .ob-scard__quickview{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ob-scard,.ob-scard__img img,.ob-scard__img::after,.ob-scard__type,.ob-scard__title,.ob-scard__foot .ob-btn,.ob-scard__foot .ob-btn .ob-svg-icon,.ob-scard__quickview{transition:none}
  .ob-scard:hover{transform:none}
  .ob-scard:hover .ob-scard__img img{transform:none}
}

/* ══ BENTO GRID — first services section on the homepage: one large
   "feature" card + smaller cards, instead of a uniform matrix. ══ */
.ob-bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:1024px){.ob-bento-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ob-bento-grid{grid-template-columns:1fr}}
.ob-bento-grid__feature{grid-column:span 2;grid-row:span 2}
.ob-bento-grid__feature .ob-scard__img{aspect-ratio:16/10}
@media(max-width:640px){.ob-bento-grid__feature{grid-column:span 1}}

/* ══ HORIZONTAL SCROLL ROW — used for the other service-type sections on
   the homepage so every section doesn't repeat the same grid layout. ══ */
.ob-scroll-row{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.ob-scroll-row::-webkit-scrollbar{height:8px}
.ob-scroll-row::-webkit-scrollbar-thumb{background:var(--ob-gray-200);border-radius:var(--ob-r-full)}
.ob-scroll-row__item{flex:0 0 300px;scroll-snap-align:start}
@media(max-width:640px){.ob-scroll-row__item{flex-basis:82vw}}

/* ══ ABOUT SECTION — v2, overlapping quote card instead of a plain badge ══ */
.ob-about-inner-v2{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.ob-about-inner-v2{grid-template-columns:1fr;gap:2rem}}
.ob-about-image-wrap-v2{position:relative}
.ob-about-image-wrap-v2 .ob-about-img{border-radius:var(--ob-r-xl);width:100%;aspect-ratio:4/4.6;object-fit:cover;box-shadow:var(--ob-sh-lg)}
.ob-about-quote-card{position:absolute;left:-1.5rem;bottom:-1.75rem;max-width:290px;background:var(--ob-white);border-radius:var(--ob-r-lg);padding:1.5rem 1.75rem;box-shadow:0 24px 48px -12px rgba(0,0,0,.22);border-left:4px solid var(--ob-accent)}
.ob-about-quote-card__mark{font-family:var(--ob-font-display);font-size:2.5rem;line-height:.6;color:var(--ob-accent);display:block;margin-bottom:.5rem}
.ob-about-quote-card__text{font-size:.92rem;font-weight:600;color:var(--ob-dark);line-height:1.5;font-style:italic}
@media(max-width:600px){.ob-about-quote-card{position:static;max-width:none;margin-top:1.25rem;left:0;bottom:0}}
.ob-about-content-v2 .ob-about-text{margin:1rem 0 1.75rem;color:var(--ob-gray-500);line-height:1.8}

/* ══ REVIEWS — horizontal scroll-snap row (replaces the 3-col card grid) ══ */
.ob-reviews-row{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.ob-reviews-row__item{flex:0 0 340px;scroll-snap-align:start}
@media(max-width:640px){.ob-reviews-row__item{flex-basis:85vw}}

/* ══ WHY CHOOSE US — numbered horizontal process strip ══ */
.ob-why-timeline{display:flex;gap:0;position:relative}
@media(max-width:900px){.ob-why-timeline{flex-direction:column;gap:2rem}}
.ob-why-step{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:0 1.25rem;position:relative}
.ob-why-step:not(:last-child)::after{content:'';position:absolute;top:26px;left:calc(50% + 26px);right:calc(-50% + 26px);height:2px;background:var(--ob-gray-200)}
@media(max-width:900px){.ob-why-step:not(:last-child)::after{display:none}}
.ob-why-step__marker{display:flex;align-items:center;gap:.75rem;position:relative;z-index:1}
.ob-why-step__num{width:52px;height:52px;border-radius:50%;background:var(--ob-sunset-gradient);color:#fff;font-family:var(--ob-font-display);font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--ob-sh-accent)}
.ob-why-step__icon{color:var(--ob-primary)}
.ob-why-step__title{font-size:1.02rem;font-weight:700;color:var(--ob-dark);margin:0 0 .35rem}
.ob-why-step__text{font-size:.85rem;color:var(--ob-gray-500);line-height:1.65;margin:0}

/* ══ BLOG LIST — horizontal rows with a small thumbnail (distinct from
   the services' full-image ob-scard treatment) ══ */
.ob-blog-list{display:flex;flex-direction:column;gap:1.25rem}
.ob-blog-list-card{display:flex;gap:1.5rem;background:var(--ob-white);border:1px solid var(--ob-gray-200);border-radius:var(--ob-r-lg);padding:1rem;transition:box-shadow var(--ob-t-lg),transform var(--ob-t-lg)}
.ob-blog-list-card:hover{box-shadow:var(--ob-sh-lg);transform:translateY(-3px)}
.ob-blog-list-card__thumb{flex:0 0 160px;border-radius:var(--ob-r);overflow:hidden;aspect-ratio:4/3;display:block}
.ob-blog-list-card__thumb img{width:100%;height:100%;object-fit:cover}
.ob-blog-list-card__thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--ob-primary-light);color:var(--ob-primary)}
.ob-blog-list-card__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.ob-blog-list-card__cat{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ob-accent-dark);margin-bottom:.35rem}
.ob-blog-list-card__title{font-size:1.05rem;font-weight:700;color:var(--ob-dark);margin:0 0 .5rem;line-height:1.3}
.ob-blog-list-card__title a{color:inherit}
.ob-blog-list-card:hover .ob-blog-list-card__title{color:var(--ob-primary)}
.ob-blog-list-card__desc{font-size:.85rem;color:var(--ob-gray-500);line-height:1.6;margin:0 0 .75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ob-blog-list-card__meta{display:flex;align-items:center;gap:.6rem;font-size:.76rem;color:var(--ob-gray-500);flex-wrap:wrap}
.ob-blog-list-card__link{margin-left:auto;font-weight:700;color:var(--ob-primary);display:inline-flex;align-items:center;gap:.3rem}
@media(max-width:600px){
  .ob-blog-list-card{flex-direction:column}
  .ob-blog-list-card__thumb{flex-basis:auto;aspect-ratio:16/9}
  .ob-blog-list-card__meta{gap:.5rem}
  .ob-blog-list-card__link{margin-left:0;width:100%}
}

/* ══ WHY CHOOSE US ══ */
.ob-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem}
@media(max-width:1024px){.ob-why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.ob-why-grid{grid-template-columns:1fr}}
/* Why cards — bold redesign */
.ob-why-card{background:#fff;border-radius:26px;padding:2.25rem 1.875rem 2rem;border:0;box-shadow:0 2px 16px rgba(0,0,0,.07);transition:transform var(--ob-t-lg),box-shadow var(--ob-t-lg);position:relative;display:flex;flex-direction:column;gap:.875rem}
/* The bar is drawn as a full-size copy of the card's own rounded box (same
   border-radius, same dimensions via inset:0) so its corner curvature is
   identical to the card's — then a mask reveals only the top 4px strip.
   A thin box with its own "20px 20px 0 0" radius gets its vertical radius
   silently clamped to half its own height (2px), producing a flatter curve
   than the card's real 20px corner and making the bar look like it "floats"
   above the card with visible gaps at the corners. Masking avoids that
   mismatch entirely because the bar's box is never actually thin. */
.ob-why-card::before{content:'';position:absolute;inset:0;border-radius:26px;background:linear-gradient(90deg,var(--ob-primary),var(--ob-accent));-webkit-mask-image:linear-gradient(#000,#000);-webkit-mask-size:100% 4px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:top;mask-image:linear-gradient(#000,#000);mask-size:100% 4px;mask-repeat:no-repeat;mask-position:top}
.ob-why-card:nth-child(2)::before{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.ob-why-card:nth-child(3)::before{background:linear-gradient(90deg,#3b82f6,#8b5cf6)}
.ob-why-card:nth-child(4)::before{background:linear-gradient(90deg,#10b981,#06b6d4)}
.ob-why-card:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(0,0,0,.13)}
.ob-why-card__num{position:absolute;top:1rem;right:1.25rem;font-size:3.5rem;font-weight:900;color:var(--ob-gray-100);line-height:1;letter-spacing:-.06em;user-select:none;pointer-events:none}
.ob-why-card__icon-wrap{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--ob-primary-light) 0%,rgba(45,106,79,.12) 100%);display:flex;align-items:center;justify-content:center;color:var(--ob-primary);transition:transform var(--ob-t-lg),background var(--ob-t-lg);flex-shrink:0}
.ob-why-card:nth-child(2) .ob-why-card__icon-wrap{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#d97706}
.ob-why-card:nth-child(3) .ob-why-card__icon-wrap{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#2563eb}
.ob-why-card:nth-child(4) .ob-why-card__icon-wrap{background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#059669}
.ob-why-card__icon-wrap .ob-svg-icon svg{width:1.6rem;height:1.6rem}
.ob-why-card:hover .ob-why-card__icon-wrap{transform:scale(1.1) rotate(-6deg)}
.ob-why-card__title{font-size:1.1rem;font-weight:700;color:var(--ob-dark);line-height:1.3;margin:0}
.ob-why-card__text{font-size:.875rem;color:var(--ob-gray-500);line-height:1.75;margin:0}

/* ══ CTA BANNER ══ */
.ob-cta-banner{background:linear-gradient(135deg,var(--ob-primary-dark) 0%,var(--ob-primary) 60%,var(--ob-primary-mid) 100%);border-radius:var(--ob-r-xl);padding:4.5rem 3rem;text-align:center;position:relative;overflow:hidden}
.ob-cta-banner__deco{position:absolute;right:-1rem;top:-2rem;font-size:180px;opacity:.05;transform:rotate(-20deg);pointer-events:none;user-select:none}
.ob-cta-banner__h2{font-size:clamp(1.75rem,3vw,2.5rem);color:#fff;font-weight:800;letter-spacing:-.025em;margin:.625rem 0 1rem}
.ob-cta-banner__p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.7;max-width:540px;margin:0 auto 2.25rem}
.ob-cta-banner__btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
@media(max-width:640px){.ob-cta-banner{padding:3rem 1.5rem}}

/* ══ FOOTER ══
   Deep-navy gradient block (was a plain white footer) so the whole
   bottom of every page reads as a strong, branded colour panel rather
   than fading back into a light neutral background. */
.ob-footer{background:linear-gradient(165deg,#06212E 0%,#04283A 55%,#075C7A 100%);color:rgba(255,255,255,.72)}

/* CTA card — overlaps the top edge of the footer instead of running as a
   full-width flat strip above the columns. */
.ob-footer__cta-wrap{position:relative;margin-bottom:-3.5rem;z-index:2}
.ob-footer__cta-card{
  background:linear-gradient(115deg,var(--ob-primary-dark) 0%,var(--ob-primary) 55%,var(--ob-primary-mid) 100%);
  border-radius:var(--ob-r-xl);
  padding:2.5rem 3rem;
  display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
  position:relative;overflow:hidden;
  box-shadow:0 30px 60px -14px rgba(4,40,58,.45);
}
.ob-footer__cta-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 200% at 85% 20%,rgba(253,220,35,.2) 0%,transparent 70%);pointer-events:none}
.ob-footer__cta-copy{min-width:0;position:relative}
.ob-footer__cta-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ob-yellow);margin-bottom:.625rem}
.ob-footer__cta-title{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.4;margin:0;max-width:520px}
.ob-footer__cta-actions{display:flex;gap:.875rem;flex-wrap:wrap;flex-shrink:0;position:relative}
.ob-footer__cta-actions .ob-btn-outline svg{width:16px;height:16px;margin-right:.375rem;flex-shrink:0}
@media(max-width:768px){
  .ob-footer__cta-wrap{margin-bottom:-2.5rem}
  .ob-footer__cta-card{padding:2rem 1.75rem;flex-direction:column;align-items:flex-start;gap:1.5rem;border-radius:var(--ob-r-lg)}
  .ob-footer__cta-title{font-size:1.2rem;max-width:100%}
  .ob-footer__cta-actions{width:100%}
  .ob-footer__cta-actions .ob-btn{flex:1;justify-content:center;white-space:nowrap}
}
@media(max-width:400px){
  .ob-footer__cta-actions{flex-direction:column}
}

.ob-footer__main{padding:8rem 0 2.5rem;position:relative}
/* v2: brand | links-group (services+quicklinks) | highlighted contact card
   — three asymmetric zones instead of the old flat 4-equal-column grid. */
.ob-footer-grid--v2{display:grid;gap:2.5rem;grid-template-columns:1.4fr 1.6fr 1.3fr}
@media(max-width:1024px){.ob-footer-grid--v2{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ob-footer-grid--v2{grid-template-columns:1fr}}
.ob-footer__links-group{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:400px){.ob-footer__links-group{grid-template-columns:1fr}}
.ob-footer__contact-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--ob-r-lg);padding:1.5rem}
.ob-footer__contact-card h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ob-yellow);margin-bottom:1rem}
.ob-footer__contact-row{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:rgba(255,255,255,.75);margin-bottom:.75rem}
.ob-footer__contact-row a{color:rgba(255,255,255,.85)}
.ob-footer__contact-row a:hover{color:var(--ob-yellow)}
.ob-footer-social--outline .ob-footer-social__icon{border-radius:50%}
.ob-footer-grid{display:grid;gap:2.5rem;grid-template-columns:2.2fr 1fr 1fr 1fr}
@media(max-width:1024px){.ob-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ob-footer-grid{grid-template-columns:1fr}}
.ob-footer__brand p{font-size:.875rem;line-height:1.8;margin-top:.875rem;max-width:280px;color:rgba(255,255,255,.65)}
.ob-footer__col h4{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ob-yellow);margin-bottom:1.25rem}
.ob-footer__col ul{display:flex;flex-direction:column;gap:.625rem}
.ob-footer__col ul li a{font-size:.875rem;color:rgba(255,255,255,.72);transition:color var(--ob-t)}
.ob-footer__col ul li a:hover{color:var(--ob-yellow)}
.ob-footer__col ul li{font-size:.875rem;color:rgba(255,255,255,.72)}
.ob-footer-contact-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;color:rgba(255,255,255,.72);transition:color var(--ob-t)}
.ob-footer-contact-pill:hover{color:var(--ob-yellow)}
/* Footer social icons */
.ob-footer-social{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.25rem}
.ob-footer-social__icon{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;transition:background var(--ob-t),color var(--ob-t),transform var(--ob-t);flex-shrink:0;border:1px solid rgba(255,255,255,.16)}
.ob-footer-social__icon:hover{background:var(--ob-accent);color:#fff;border-color:transparent;transform:translateY(-2px) scale(1.06)}
.ob-footer-social__icon--instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.ob-footer-social__icon--facebook:hover{background:#1877f2}
.ob-footer-social__icon--youtube:hover{background:#ff0000}
.ob-footer-social__icon--whatsapp:hover{background:#25d366}
.ob-footer-social__icon--twitter:hover{background:#000}
.ob-footer-social__icon--linkedin:hover{background:#0077b5}
.ob-footer-social__icon--tiktok:hover{background:#010101}
.ob-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:1.5rem 0;font-size:.8rem;color:rgba(255,255,255,.55)}
.ob-footer__bottom-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.ob-footer__bottom-links{display:flex;align-items:center;gap:.625rem;flex-wrap:wrap}
.ob-footer__bottom-links a{color:rgba(255,255,255,.55);transition:color var(--ob-t)}
.ob-footer__bottom-links a:hover{color:var(--ob-yellow)}
.ob-footer__bottom-links span{opacity:.4}
@media(max-width:640px){.ob-footer__bottom-inner{flex-direction:column;align-items:flex-start;gap:.5rem}}

/* ══ INNER PAGE COMPONENTS ══ */
/* Service cards (listing pages) */
.ob-card{background:var(--ob-white);border-radius:var(--ob-r-lg);border:1px solid var(--ob-gray-200);transition:all var(--ob-t-lg)}
.ob-card:hover{box-shadow:var(--ob-sh-lg);transform:translateY(-4px);border-color:transparent}
.ob-card__image{position:relative;overflow:hidden;border-radius:var(--ob-r-lg) var(--ob-r-lg) 0 0;aspect-ratio:16/9;background:var(--ob-gray-100)}
.ob-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--ob-t-lg)}
.ob-card:hover .ob-card__image img{transform:scale(1.06)}
.ob-card__badge{position:absolute;top:.75rem;left:.75rem;background:var(--ob-primary);color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;padding:.28rem .7rem;border-radius:var(--ob-r-full)}
.ob-card__badge.accent{background:var(--ob-accent)}
.ob-card__body{padding:1.25rem 1.5rem 1.5rem}
.ob-card__title{font-size:1.05rem;font-weight:700;color:var(--ob-dark);margin-bottom:.5rem;line-height:1.3}
.ob-card__meta{display:flex;align-items:center;gap:1rem;font-size:.78rem;color:var(--ob-gray-500);margin-bottom:.875rem;flex-wrap:wrap}
.ob-card__desc{font-size:.875rem;color:var(--ob-gray-500);line-height:1.65;margin-bottom:1.125rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ob-card__footer{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--ob-gray-100)}
.ob-card__price{font-size:1.2rem;font-weight:800;color:var(--ob-primary)}
.ob-card__price-label{font-size:.72rem;color:var(--ob-gray-500)}
.ob-card__rating{font-size:.8rem;font-weight:600;color:var(--ob-accent-dark)}
/* Service detail */
.ob-service-hero{position:relative;height:55vh;min-height:380px;overflow:hidden;background:var(--ob-dark)}
.ob-service-hero__img{width:100%;height:100%;object-fit:cover;opacity:.65}
.ob-service-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,27,15,.92) 0%,rgba(13,27,15,.3) 60%,transparent 100%)}
.ob-service-hero__content{position:absolute;bottom:0;left:0;right:0;padding:2.5rem 0 2rem;color:#fff}
.ob-service-hero h1{color:#fff;margin-bottom:.75rem}
.ob-service-layout{display:grid;gap:2rem}
@media(min-width:1024px){.ob-service-layout{grid-template-columns:1fr 340px}}
.ob-service-tabs{display:flex;border-bottom:2px solid var(--ob-gray-200);margin-bottom:2rem;overflow-x:auto}
.ob-service-tab{padding:.75rem 1.25rem;font-size:.9rem;font-weight:600;color:var(--ob-gray-500);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all var(--ob-t);white-space:nowrap}
.ob-service-tab.active,.ob-service-tab:hover{color:var(--ob-primary);border-bottom-color:var(--ob-primary)}
.ob-tab-panel{display:none}.ob-tab-panel.active{display:block}
.ob-booking-card{background:var(--ob-white);border-radius:var(--ob-r-xl);box-shadow:var(--ob-sh-lg);border:1px solid var(--ob-gray-200);position:sticky;top:120px}
.ob-booking-card__header{background:var(--ob-primary-dark);padding:1.375rem 1.625rem;color:#fff;border-radius:var(--ob-r-xl) var(--ob-r-xl) 0 0}
.ob-booking-card__price{font-size:2.125rem;font-weight:800;letter-spacing:-.03em}
.ob-booking-card__body,.ob-booking-card__footer{padding:1.5rem}
.ob-highlights{list-style:none;display:grid;gap:.625rem}
.ob-highlights li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:var(--ob-primary-light);border-radius:var(--ob-r);font-size:.9rem}
.ob-highlights li::before{content:'✓';color:var(--ob-primary);font-weight:800;flex-shrink:0}
.ob-faq{border:1px solid var(--ob-gray-200);border-radius:var(--ob-r);overflow:hidden;margin-bottom:.5rem}
.ob-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:var(--ob-surface);border:none;cursor:pointer;font-family:var(--ob-font);font-size:.95rem;font-weight:600;color:var(--ob-dark);text-align:left}
.ob-faq__icon{flex-shrink:0;transition:transform var(--ob-t)}
.ob-faq.open .ob-faq__icon{transform:rotate(180deg)}
.ob-faq__a{padding:0 1.25rem;max-height:0;overflow:hidden;transition:all var(--ob-t-lg);font-size:.9rem;color:var(--ob-gray-500);line-height:1.7}
.ob-faq.open .ob-faq__a{padding:1rem 1.25rem;max-height:400px}
/* ══ SERVICE DETAIL ══ */
.ob-sd-hero{position:relative;height:60vh;min-height:420px;overflow:hidden;background:var(--ob-dark)}
.ob-sd-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.ob-sd-hero__img--default{position:absolute;inset:0;background:linear-gradient(160deg,var(--ob-primary-dark),var(--ob-dark))}
.ob-sd-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,27,15,.95) 0%,rgba(13,27,15,.4) 50%,transparent 100%)}
.ob-sd-hero__body{position:absolute;bottom:0;left:0;right:0;padding:2.5rem 0 2rem;color:#fff}
.ob-sd-hero .ob-container{position:relative;z-index:2}
.ob-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:rgba(255,255,255,.6);margin-bottom:.875rem;flex-wrap:wrap}
.ob-breadcrumb a{color:rgba(255,255,255,.6);transition:color var(--ob-t)}.ob-breadcrumb a:hover{color:#fff}
.ob-sd-hero__title{font-size:clamp(1.75rem,4vw,3rem);font-weight:800;color:#fff;letter-spacing:-.03em;margin-bottom:.875rem;text-shadow:0 2px 24px rgba(0,0,0,.3)}
.ob-sd-hero__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.ob-sd-tag{display:inline-flex;align-items:center;gap:.375rem;background:rgba(255,255,255,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.78rem;font-weight:600;padding:.3rem .75rem;border-radius:var(--ob-r-full)}

.ob-sd-wrap{padding:3rem 0 5rem}
.ob-sd-layout{display:grid;gap:2.5rem;align-items:start}
@media(min-width:1024px){.ob-sd-layout{grid-template-columns:1fr 340px}}

/* Tabs */
.ob-sd-tabs{display:flex;border-bottom:2px solid var(--ob-gray-200);margin-bottom:2rem;overflow-x:auto;gap:0}
.ob-sd-tab{padding:.75rem 1.375rem;font-size:.9rem;font-weight:600;color:var(--ob-gray-500);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all var(--ob-t);white-space:nowrap;font-family:var(--ob-font)}
.ob-sd-tab.active,.ob-sd-tab:hover{color:var(--ob-primary);border-bottom-color:var(--ob-primary)}
.ob-sd-panel{display:none}.ob-sd-panel.active{display:block;animation:ob-fade-up .25s ease}

.ob-sd-block{margin-bottom:2.5rem}
.ob-sd-block__title{font-size:1.1rem;font-weight:700;color:var(--ob-dark);margin-bottom:1rem;padding-bottom:.625rem;border-bottom:2px solid var(--ob-primary-light)}
.ob-sd-block__title--green{border-color:var(--ob-primary-light);color:var(--ob-primary-dark)}
.ob-sd-block__title--red{border-color:#fca5a5;color:var(--ob-danger)}

.ob-sd-highlights{list-style:none;display:grid;gap:.5rem}
.ob-sd-highlights li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;background:var(--ob-primary-light);border-radius:var(--ob-r);font-size:.9rem;color:var(--ob-dark);line-height:1.5}
.ob-sd-highlights li::before{content:'✓';color:var(--ob-primary);font-weight:800;flex-shrink:0;margin-top:.05rem}

.ob-sd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.ob-sd-gallery__item{display:block;border-radius:var(--ob-r);overflow:hidden;aspect-ratio:4/3;background:var(--ob-gray-100)}
.ob-sd-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--ob-t-lg)}
.ob-sd-gallery__item:hover img{transform:scale(1.06)}

.ob-sd-prose{font-size:.95rem;line-height:1.8;color:var(--ob-gray-700)}
.ob-sd-prose p{margin-bottom:1rem}
.ob-sd-prose h2,.ob-sd-prose h3{color:var(--ob-dark);font-weight:700;margin:1.5rem 0 .75rem}
.ob-sd-prose ul,.ob-sd-prose ol{margin:0 0 1rem 1.5rem}
.ob-sd-prose li{margin-bottom:.375rem}

.ob-sd-incl-grid{display:grid;gap:2rem}
@media(min-width:640px){.ob-sd-incl-grid{grid-template-columns:1fr 1fr}}
.ob-sd-list{list-style:none;display:grid;gap:.5rem}
.ob-sd-list li{display:flex;align-items:flex-start;gap:.625rem;font-size:.9rem;line-height:1.5;padding:.5rem 0;border-bottom:1px solid var(--ob-gray-100)}
.ob-sd-list--incl li::before{content:'✓';color:var(--ob-primary);font-weight:800;flex-shrink:0}
.ob-sd-list--excl li::before{content:'✗';color:var(--ob-danger);font-weight:800;flex-shrink:0}

.ob-sd-faqs{display:grid;gap:.5rem}
.ob-sd-faq{border:1px solid var(--ob-gray-200);border-radius:var(--ob-r);overflow:hidden}
.ob-sd-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:var(--ob-surface);border:none;cursor:pointer;font-family:var(--ob-font);font-size:.95rem;font-weight:600;color:var(--ob-dark);text-align:left}
.ob-sd-faq__icon{flex-shrink:0;transition:transform var(--ob-t);font-style:normal}
.ob-sd-faq.open .ob-sd-faq__icon{transform:rotate(180deg)}
.ob-sd-faq__a{padding:0 1.25rem;max-height:0;overflow:hidden;transition:all var(--ob-t-lg);font-size:.9rem;color:var(--ob-gray-500);line-height:1.75}
.ob-sd-faq.open .ob-sd-faq__a{padding:1rem 1.25rem;max-height:600px}

.ob-sd-reviews{display:grid;gap:1rem}
.ob-sd-review{background:var(--ob-surface);border-radius:var(--ob-r-lg);padding:1.25rem 1.5rem}
.ob-sd-review__head{display:flex;align-items:center;gap:.875rem;margin-bottom:.875rem}
.ob-sd-review__avatar{width:40px;height:40px;border-radius:50%;background:var(--ob-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0}
.ob-sd-review__name{font-weight:700;font-size:.9rem;color:var(--ob-dark)}
.ob-sd-review__stars{color:var(--ob-accent-dark);font-size:.875rem;margin-top:.2rem}
.ob-sd-review__text{font-size:.875rem;color:var(--ob-gray-500);line-height:1.7}

/* Booking card */
.ob-sd-booking{background:var(--ob-white);border-radius:var(--ob-r-xl);box-shadow:var(--ob-sh-lg);border:1px solid var(--ob-gray-200);position:sticky;top:120px}
.ob-sd-booking__top{background:linear-gradient(135deg,var(--ob-primary-dark) 0%,var(--ob-primary) 100%);padding:1.5rem 1.75rem;color:#fff;border-radius:var(--ob-r-xl) var(--ob-r-xl) 0 0}
.ob-sd-booking__price-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65);margin-bottom:.25rem}
.ob-sd-booking__price{font-size:2.25rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.ob-sd-booking__price-note{font-size:.78rem;color:rgba(255,255,255,.65);margin-top:.25rem}
.ob-sd-booking__body{padding:1.5rem}
.ob-sd-booking__features{list-style:none;display:grid;gap:.625rem}
.ob-sd-booking__features li{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--ob-gray-700)}
.ob-sd-booking__features li span:first-child{font-size:1.1rem;flex-shrink:0}

.ob-sd-contact-card{display:flex;align-items:center;gap:.875rem;background:var(--ob-primary-light);border-radius:var(--ob-r-lg);padding:1rem 1.25rem;margin-top:1rem}
.ob-sd-contact-card__icon{font-size:1.5rem;flex-shrink:0}
.ob-sd-contact-card>div{flex:1}

/* ══ SERVICES LISTING ══ */
.ob-page-hero{padding:4rem 0 3rem;color:#fff}
.ob-page-hero--primary{background:linear-gradient(135deg,var(--ob-primary-dark) 0%,var(--ob-primary) 100%)}
.ob-page-hero__h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:.625rem 0 .875rem;letter-spacing:-.03em}
.ob-page-hero__sub{font-size:1.05rem;color:rgba(255,255,255,.78);margin-bottom:2rem}
.ob-page-hero__search{display:flex;gap:.625rem;max-width:520px}
.ob-page-hero__search-input{flex:1;padding:.75rem 1.125rem;border-radius:var(--ob-r-full);border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;font-family:var(--ob-font);font-size:.9rem;outline:none}
.ob-page-hero__search-input::placeholder{color:rgba(255,255,255,.55)}
.ob-page-hero__search-input:focus{border-color:rgba(255,255,255,.7)}

/* top uses --ob-header-h, kept in sync with the header's real rendered
   height by the scroll listener in header.php. The header shrinks its
   padding once .scrolled is applied (22px -> 14px), so a hard-coded 105px
   here only matched the tall, unscrolled header — after scrolling past it,
   the header got shorter but this stayed pinned at 105px, opening up a
   gap between the two sticky bars. The px fallback (used before JS runs)
   matches the unscrolled header height. */
.ob-type-tabs{background:var(--ob-white);border-bottom:1px solid var(--ob-gray-200);position:sticky;top:var(--ob-header-h, 105px);z-index:100}
@media(max-width:700px){.ob-type-tabs{top:var(--ob-header-h, 71px)}}
.ob-type-tabs__inner{display:flex;overflow-x:auto;gap:0;-webkit-overflow-scrolling:touch}
.ob-type-tab{display:inline-flex;align-items:center;padding:.875rem 1.375rem;font-size:.875rem;font-weight:600;color:var(--ob-gray-500);border-bottom:3px solid transparent;white-space:nowrap;transition:all var(--ob-t);text-decoration:none;flex-shrink:0}
.ob-type-tab:hover,.ob-type-tab.active{color:var(--ob-primary);border-bottom-color:var(--ob-primary)}

.ob-services-listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:1024px){.ob-services-listing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ob-services-listing-grid{grid-template-columns:1fr}}
.ob-scard__img-link{display:block;text-decoration:none}
/* No featured spanning anywhere */
.ob-scard--featured{grid-column:span 1 !important}

/* ================================================================
   Performance, Mobile & Cross-Browser Additions — v3.1
   ================================================================ */

/* ── Generic grid utilities ── */
.ob-grid{display:grid;gap:2rem}
.ob-grid-2{grid-template-columns:repeat(2,1fr)}
.ob-grid-3{grid-template-columns:repeat(3,1fr)}
.ob-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.ob-grid-3{grid-template-columns:repeat(2,1fr)}.ob-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ob-grid-2,.ob-grid-3,.ob-grid-4{grid-template-columns:1fr}}

/* ── Lazy-load fade-in ── */
img[loading="lazy"]{opacity:0;transition:opacity .4s ease}
img[loading="lazy"].loaded{opacity:1}

/* ── Stats bar mobile ── */
@media(max-width:640px){
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
}

/* ── About page hero mobile ── */
@media(max-width:640px){
  .ob-grid-2[style*="gap:4rem"]{gap:2rem!important}
}

/* ── Safari flexbox fix ── */
.ob-header__inner{-webkit-box-align:center}
.ob-btn{-webkit-appearance:none}

/* ── iOS button / input resets ── */
input,textarea,select,button{-webkit-appearance:none;-moz-appearance:none;appearance:none}

/* ── Touch-friendly tap targets (min 44px) ── */
@media(max-width:768px){
  .ob-btn{min-height:44px;padding:.75rem 1.5rem}
  .ob-nav__menu>li>a{min-height:44px}
  .ob-mobile-menu li a{min-height:44px;display:flex;align-items:center}
}

/* ── Prevent horizontal overflow on mobile ──
   Handled by `#ob-main,.ob-footer{overflow-x:hidden}` in the reset rules
   near the top of this file. NOT applied to html/body — that broke the
   sticky header (see the note up there for why) — and NOT applied to
   `.ob-container` either, since setting only overflow-x to a non-visible
   value forces the browser to compute overflow-y as `auto` instead of
   `visible` on that same element, which was silently clipping box-shadows
   on content sized flush to a `.ob-container` box. */

/* ── Hero image performance ── */
.ob-hero img,.ob-slide img{
  content-visibility:auto;
  contain-intrinsic-size:auto 500px;
}

/* ── Focus-visible for keyboard navigation (a11y + cross-browser) ── */
:focus-visible{outline:3px solid var(--ob-accent);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* ── Print styles ── */
@media print{
  .ob-header,.ob-footer,.ob-mobile-nav,.ob-btn{display:none!important}
  body{font-size:12pt;color:#000}
  a{color:#000;text-decoration:underline}
}

/* ── Smooth scroll on Safari ── */
@supports (scroll-behavior:smooth){html{scroll-behavior:smooth}}

/* ── Reduce motion for accessibility ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ══ GUTENBERG / BLOCK EDITOR WRAPPERS ══
   Ensure travelpro sections always render full-width, even when WordPress
   wraps shortcode output in block-editor containers.               ══ */
.wp-block-shortcode,
.wp-block-group,
.entry-content,
.page-content,
.post-content{
  max-width:none!important;
  padding:0!important;
  margin:0!important;
}
/* Strip paragraph tags that wpautop may inject around the shortcode */
.wp-block-shortcode>p:empty,
.entry-content>p:empty{
  display:none;
}
/* Make sure sections inside Gutenberg wrappers are still full-viewport */
.wp-block-shortcode .ob-hero,
.entry-content .ob-hero,
.wp-block-shortcode .ob-trust-strip,
.entry-content .ob-trust-strip,
.wp-block-shortcode .ob-cta-banner,
.entry-content .ob-cta-banner{
  width:100%;
  margin-left:0;
  margin-right:0;
}

/* ══ CORPORATE PROFILE — compact strip, light Google-card style ══ */
.ob-corp-strip{padding:2.5rem 0}
.ob-corp-strip__card{
  display:flex;align-items:center;gap:1.75rem;
  background:var(--ob-white);
  border:1px solid var(--ob-gray-200);
  border-radius:24px;
  padding:1.75rem 2.25rem;
  box-shadow:0 18px 46px -18px rgba(13,27,15,.16),0 2px 8px rgba(13,27,15,.04);
  position:relative;overflow:hidden;
  transition:box-shadow var(--ob-t-lg),transform var(--ob-t-lg);
}
.ob-corp-strip__card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#4285F4 0%,#EA4335 25%,#FBBC05 50%,#34A853 75%,var(--ob-primary) 100%)}
.ob-corp-strip__card:hover{box-shadow:0 26px 60px -18px rgba(13,27,15,.2),0 4px 12px rgba(13,27,15,.06);transform:translateY(-3px)}
.ob-corp-strip__icon{
  flex-shrink:0;width:64px;height:64px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ob-primary-light);color:var(--ob-primary);
}
.ob-corp-strip__body{flex:1;min-width:0}
.ob-corp-strip__eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ob-accent-dark,var(--ob-accent));margin-bottom:.35rem}
.ob-corp-strip__title{font-size:1.3rem;font-weight:800;color:var(--ob-dark);letter-spacing:-.02em;line-height:1.25;margin:0 0 .5rem}
.ob-corp-strip__text{font-size:.9rem;color:var(--ob-gray-500);line-height:1.65;margin:0;max-width:560px}
.ob-corp-strip__divider{width:1px;align-self:stretch;background:var(--ob-gray-200);flex-shrink:0}
.ob-corp-strip__btn{flex-shrink:0;white-space:nowrap}
@media(max-width:820px){
  .ob-corp-strip__card{flex-direction:column;align-items:flex-start;text-align:left;padding:1.75rem}
  .ob-corp-strip__divider{display:none}
  .ob-corp-strip__btn{width:100%;justify-content:center}
}

/* ══ MODAL ══ */
.ob-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease}
.ob-modal-overlay.ob-modal-visible{opacity:1}
.ob-modal-box{background:#fff;border-radius:28px;padding:2.5rem 2rem 2rem;width:100%;max-width:440px;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.25);transform:translateY(20px);transition:transform .3s ease}
.ob-modal-overlay.ob-modal-visible .ob-modal-box{transform:translateY(0)}
.ob-modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:8px;border:0;background:#f3f4f6;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#6b7280;line-height:1;transition:background .2s}
.ob-modal-close:hover{background:#e5e7eb;color:#111}
.ob-modal-icon{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--ob-primary-light),rgba(45,106,79,.15));display:flex;align-items:center;justify-content:center;color:var(--ob-primary);margin:0 auto 1.25rem}
.ob-modal-title{font-size:1.375rem;font-weight:800;color:var(--ob-dark);text-align:center;margin:0 0 .5rem;letter-spacing:-.02em}
.ob-modal-sub{color:var(--ob-gray-500);text-align:center;font-size:.9rem;margin:0 0 1.5rem;line-height:1.6}

/* ================================================================
   TRAVELPRO V7 — Extended Styles (Profile, Auth, Home Redesign)
   ================================================================ */

/* ── SVG Icons ──
   display:inline-flex + line-height:0 keeps the icon's own box perfectly
   centered against adjacent text regardless of the SVG's internal
   baseline/descender, which is what caused icon+label rows (e.g. the
   clock icon next to "X days" on service/tour cards) to look misaligned. */
.ob-svg-icon{width:1em;height:1em;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:middle}
.ob-svg-icon svg{display:block;width:100%;height:100%}
.ob-svg-icon-sm{width:.8em;height:.8em}
.ob-svg-icon-lg{width:1.4em;height:1.4em}

/* ── Section eyebrow ── */
.ob-section-eyebrow{display:flex;align-items:center;gap:.5rem;justify-content:center;margin-bottom:.5rem}
.ob-section-eyebrow .ob-svg-icon{color:var(--ob-accent);width:1rem;height:1rem}
.ob-section-eyebrow .ob-section-label{margin-bottom:0}

/* ── Viewport reveal animations ─ only active when JS has confirmed it's ready ── */
.js-anim-ready .ob-reveal{opacity:0;transform:translateY(32px);transition:opacity .65s ease,transform .65s ease}
.js-anim-ready .ob-reveal.is-visible{opacity:1;transform:translateY(0)}
.js-anim-ready .ob-reveal-child{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;transition-delay:var(--delay,0ms)}
.js-anim-ready .ob-reveal.is-visible .ob-reveal-child{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.js-anim-ready .ob-reveal,.js-anim-ready .ob-reveal-child{opacity:1;transform:none;transition:none}}

/* ══ HERO — animated text (simple on-load fade/rise, no carousel involved) ══ */
.js-anim-ready .ob-hero-animate-title,.js-anim-ready .ob-hero-animate-sub,.js-anim-ready .ob-hero-animate-btns{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.ob-hero-animate-title.ob-slide-in{opacity:1;transform:translateY(0)}
.ob-hero-animate-sub.ob-slide-in{opacity:1;transform:translateY(0);transition-delay:.12s}
.ob-hero-animate-btns.ob-slide-in{opacity:1;transform:translateY(0);transition-delay:.24s}

/* ══ TRUST STRIP ══ */
.ob-trust-icon-wrap{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--ob-primary-light);color:var(--ob-primary);flex-shrink:0}
.ob-trust-icon-wrap .ob-svg-icon{width:1.3rem;height:1.3rem}
.ob-trust-item{display:flex;align-items:center;gap:1rem}

/* ══ SERVICE CARDS — improved ══ */
.ob-scard__meta-item{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--ob-gray-500)}
.ob-scard__meta-item .ob-svg-icon{width:.85rem;height:.85rem;color:var(--ob-primary)}
.ob-scard__rating{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;color:var(--ob-accent)}
.ob-scard__rating .ob-svg-icon{width:.85rem;height:.85rem}
.ob-scard__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--ob-primary-light);color:var(--ob-primary)}
.ob-scard__placeholder .ob-svg-icon{width:2.5rem;height:2.5rem}
.ob-scard__foot .ob-btn .ob-svg-icon{width:.9rem;height:.9rem;margin-left:.25rem}

/* ══ ABOUT SECTION ══ */
.ob-about-section{background:var(--ob-white)}
.ob-about-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
@media(max-width:900px){.ob-about-inner{grid-template-columns:1fr;gap:3rem}}
.ob-about-image-wrap{position:relative}
.ob-about-img{width:100%;border-radius:var(--ob-r-xl);object-fit:cover;aspect-ratio:4/3;box-shadow:var(--ob-sh-lg)}
.ob-about-img-placeholder{width:100%;aspect-ratio:4/3;border-radius:var(--ob-r-xl);background:var(--ob-primary-light);display:flex;align-items:center;justify-content:center}
.ob-about-img-placeholder__inner{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--ob-primary);opacity:.5}
.ob-about-img-placeholder__inner .ob-svg-icon{width:4rem;height:4rem}
.ob-about-img-placeholder__inner span{font-size:.875rem;font-weight:600}
.ob-about-image-wrap{overflow:visible}.ob-about-badge{position:absolute;bottom:1rem;right:1rem;display:flex;align-items:center;gap:.625rem;background:var(--ob-white);border-radius:var(--ob-r-full);padding:.625rem 1.25rem;box-shadow:var(--ob-sh-lg);font-size:.825rem;font-weight:700;color:var(--ob-primary)}

/* ══ GOOGLE REVIEWS SECTION ══ */
.ob-reviews-section{background:var(--ob-white)}
.ob-reviews-summary{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.25rem;justify-content:center;background:var(--ob-surface);border:1px solid var(--ob-gray-200);border-radius:var(--ob-r-xl);padding:1.75rem 2.25rem;margin-bottom:2.5rem}
.ob-reviews-summary__google{display:flex;align-items:center;gap:.625rem}
.ob-reviews-summary__brand{font-size:1.05rem;font-weight:700;color:var(--ob-gray-700);letter-spacing:-.01em}
.ob-reviews-summary__score{display:flex;align-items:center;gap:.625rem;padding-left:1.75rem;border-left:1px solid var(--ob-gray-200)}
@media(max-width:700px){.ob-reviews-summary__score{border-left:none;padding-left:0}}
.ob-reviews-summary__num{font-size:1.75rem;font-weight:800;color:var(--ob-dark);line-height:1}
.ob-reviews-summary__stars{display:flex;gap:.15rem;color:#FBBC05}
.ob-reviews-summary__stars .ob-svg-icon{width:18px;height:18px}
.ob-reviews-summary__count{font-size:.875rem;color:var(--ob-gray-500);font-weight:500}
.ob-reviews-summary__actions{display:flex;gap:.875rem;margin-left:auto;flex-wrap:wrap}
@media(max-width:700px){.ob-reviews-summary__actions{margin-left:0;width:100%}.ob-reviews-summary__actions .ob-btn{flex:1}}
.ob-reviews-summary__actions .ob-btn .ob-svg-icon{width:1rem;height:1rem}
.ob-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:960px){.ob-reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ob-reviews-grid{grid-template-columns:1fr}}
.ob-review-card{background:var(--ob-white);border:1px solid var(--ob-gray-200);border-radius:var(--ob-r-lg);padding:1.5rem;transition:all var(--ob-t-lg)}
.ob-review-card:hover{box-shadow:var(--ob-sh-lg);transform:translateY(-3px);border-color:transparent}
.ob-review-card__head{display:flex;align-items:center;gap:.75rem;margin-bottom:.875rem}
.ob-review-card__avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ob-primary);color:var(--ob-white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0}
.ob-review-card__who{flex:1;min-width:0}
.ob-review-card__name{font-size:.9rem;font-weight:700;color:var(--ob-gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-review-card__meta{font-size:.75rem;color:var(--ob-gray-500)}
.ob-review-card__stars{display:flex;align-items:center;gap:.1rem;color:#FBBC05;margin-bottom:.75rem}
.ob-review-card__stars .ob-svg-icon{width:15px;height:15px}
.ob-review-card__time{margin-left:.5rem;font-size:.78rem;color:var(--ob-gray-500);font-weight:500}
.ob-review-card__text{font-size:.875rem;line-height:1.7;color:var(--ob-gray-700);margin:0}
.ob-reviews-footer{text-align:center;margin-top:2.5rem}
.ob-reviews-footer__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--ob-primary);text-decoration:none}
.ob-reviews-footer__link:hover{text-decoration:underline}
.ob-reviews-footer__link .ob-svg-icon{width:1rem;height:1rem}
.ob-google-logo--sm{margin-left:auto;flex-shrink:0}
.ob-review-card__brandicon{margin-left:auto;flex-shrink:0;border-radius:50%;object-fit:contain}
.ob-about-badge .ob-svg-icon{color:var(--ob-accent);width:1.1rem;height:1.1rem}
@media(max-width:900px){.ob-about-badge{display:none}}
.ob-about-text{font-size:1.05rem;line-height:1.8;color:var(--ob-gray-700);margin:1.25rem 0 1.75rem}
.ob-about-stats{display:flex;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}
.ob-about-stat{display:flex;flex-direction:column;gap:.25rem}
.ob-about-stat__num{font-size:2rem;font-weight:800;color:var(--ob-primary);line-height:1;letter-spacing:-.03em}
.ob-about-stat__label{font-size:.8rem;font-weight:600;color:var(--ob-gray-500);text-transform:uppercase;letter-spacing:.06em}
.ob-about-btn{gap:.625rem}
.ob-about-btn .ob-svg-icon{width:.9rem;height:.9rem}
.ob-about-content .ob-section-eyebrow{justify-content:flex-start}
.ob-about-content .ob-section-header{text-align:left;margin:0 0 .5rem}
.ob-about-content .ob-h2{margin:.25rem 0 0}

/* ══ WHY CARDS — improved ══ */
/* ob-why-card__icon-wrap fully handled in grid block above */

/* ══ STEPS — improved bubbles ══ */
.ob-step__bubble{position:relative;width:56px;height:56px;background:var(--ob-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;font-weight:800;margin:0 auto 1.25rem;flex-shrink:0;z-index:1}
.ob-step__bubble-ring{position:absolute;inset:-6px;border-radius:50%;border:2px dashed var(--ob-primary);opacity:.3;animation:ob-ring-spin 8s linear infinite}
@keyframes ob-ring-spin{to{transform:rotate(360deg)}}
.ob-step__icon-wrap{width:44px;height:44px;border-radius:12px;background:var(--ob-accent-light);display:flex;align-items:center;justify-content:center;color:var(--ob-accent-dark);margin:0 auto 1rem}
.ob-step__icon-wrap .ob-svg-icon{width:1.2rem;height:1.2rem}

/* ══ CTA BANNER — improved ══ */
.ob-cta-banner{position:relative;overflow:hidden}
.ob-cta-banner__orb{position:absolute;border-radius:50%;opacity:.12;pointer-events:none}
.ob-cta-banner__orb--1{width:280px;height:280px;background:#fff;top:-100px;right:-80px}
.ob-cta-banner__orb--2{width:180px;height:180px;background:#fff;bottom:-60px;left:60px}
.ob-cta-banner__plane{position:absolute;right:10%;top:50%;transform:translateY(-50%);opacity:.07;color:#fff;font-size:0}
.ob-cta-banner__plane .ob-svg-icon{width:200px;height:200px}

/* ══ PROFILE PAGE ══ */
.ob-profile-page{min-height:60vh}
.ob-profile-cover{min-height:220px;background:linear-gradient(135deg,var(--ob-primary-dark) 0%,var(--ob-primary) 50%,var(--ob-primary-mid) 100%);background-size:cover;background-position:center;position:relative;overflow:hidden}
.ob-profile-cover::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.ob-profile-cover__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.35))}
.ob-profile-cover__inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding-top:2.5rem;padding-bottom:2.5rem;flex-wrap:wrap;gap:1rem}
.ob-profile-cover__greeting{display:flex;align-items:center;gap:1rem}
.ob-profile-greeting-icon{font-size:2.5rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.ob-profile-greeting-time{color:rgba(255,255,255,.8);font-size:.875rem;font-weight:500;margin:0 0 .25rem;letter-spacing:.05em;text-transform:uppercase}
.ob-profile-greeting-name{color:#fff;font-size:2rem;font-weight:800;margin:0;letter-spacing:-.03em;text-shadow:0 2px 8px rgba(0,0,0,.2)}
.ob-profile-cover__clock{text-align:right;color:#fff}
.ob-profile-clock{display:block;font-size:1.75rem;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.ob-profile-date{display:block;font-size:.8rem;opacity:.75;margin-top:.2rem}
@media(max-width:600px){.ob-profile-cover__clock{display:none}.ob-profile-greeting-name{font-size:1.5rem}}

/* Avatar row */
.ob-profile-avatar-row{display:flex;align-items:flex-end;gap:1.5rem;padding-top:.75rem;flex-wrap:wrap;border-bottom:1px solid var(--ob-gray-100);padding-bottom:1.5rem;margin-bottom:2rem}
.ob-profile-avatar-wrap{margin-top:-3.5rem;position:relative;z-index:2}
.ob-profile-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--ob-sh)}
.ob-profile-avatar-initials{width:96px;height:96px;border-radius:50%;border:4px solid #fff;box-shadow:var(--ob-sh);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:800;color:var(--ob-primary);background:var(--ob-primary-light);line-height:1}
.ob-photo-upload{position:relative;display:inline-block}
.ob-photo-upload__btn{position:absolute;bottom:2px;right:2px;width:28px;height:28px;border-radius:50%;background:var(--ob-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:background .2s}
.ob-photo-upload__btn:hover{background:var(--ob-primary-dark)}
.ob-profile-meta{flex:1;min-width:180px}
.ob-profile-meta__name{font-size:1.4rem;font-weight:700;margin:0 0 .25rem;color:var(--ob-dark)}
.ob-profile-meta__email{color:var(--ob-gray-500);font-size:.875rem;margin:0 0 .75rem}
.ob-profile-meta__badges{display:flex;gap:.5rem;flex-wrap:wrap}
.ob-profile-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.3rem .75rem;background:var(--ob-primary-light);color:var(--ob-primary);border-radius:var(--ob-r-full);font-size:.75rem;font-weight:700}
.ob-profile-badge--secondary{background:var(--ob-surface);color:var(--ob-gray-500)}
.ob-profile-meta__actions{margin-left:auto;align-self:center}
@media(max-width:700px){.ob-profile-meta__actions{margin-left:0}}

/* Profile cards */
.ob-profile-body{padding-bottom:4rem}
.ob-profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1.5rem;align-items:start}
@media(max-width:860px){.ob-profile-grid{grid-template-columns:1fr}}
.ob-profile-card{background:var(--ob-white);border:1px solid var(--ob-gray-100);border-radius:var(--ob-r-lg);box-shadow:var(--ob-sh)}
.ob-profile-card__head{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--ob-gray-100);background:var(--ob-surface);border-radius:var(--ob-r-lg) var(--ob-r-lg) 0 0}
.ob-profile-card__head .ob-svg-icon,.ob-profile-card__head svg{color:var(--ob-primary);flex-shrink:0}
.ob-profile-card__head h3{margin:0;font-size:1rem;font-weight:700;color:var(--ob-dark)}
.ob-profile-card__body{padding:1.5rem}
.ob-profile-card__foot{padding:1.25rem 1.5rem;border-top:1px solid var(--ob-gray-100);background:var(--ob-surface);border-radius:0 0 var(--ob-r-lg) var(--ob-r-lg)}
.ob-profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:540px){.ob-profile-fields{grid-template-columns:1fr}}

/* Password field */
.ob-password-field .ob-input-wrap{position:relative;display:flex}
.ob-password-field .ob-input{padding-right:3rem}
.ob-pwd-toggle{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ob-gray-500);padding:0;display:flex;align-items:center}
.ob-pwd-toggle:hover{color:var(--ob-primary)}
.ob-pwd-strength{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}
.ob-pwd-strength__bar{flex:1;height:5px;background:var(--ob-gray-200);border-radius:99px;overflow:hidden}
.ob-pwd-strength__fill{height:100%;border-radius:99px;transition:width .3s ease,background .3s ease}
.ob-pwd-strength__label{font-size:.75rem;font-weight:700;white-space:nowrap;min-width:3rem}
.ob-reg-pwd-strength{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}

/* ══ AUTH PAGES V2 ══ */
.ob-auth-page--v2{display:flex;min-height:100vh;align-items:stretch}
.ob-auth-left--v2{display:flex;flex-direction:column;width:420px;min-width:320px;flex-shrink:0;position:relative;overflow:hidden}
@media(max-width:900px){.ob-auth-left--v2{display:none}}
.ob-auth-left__bg{position:absolute;inset:0;background:linear-gradient(160deg,var(--ob-primary-dark) 0%,var(--ob-primary) 55%,var(--ob-primary-mid) 100%);z-index:0}
.ob-auth-left--register .ob-auth-left__bg{background:linear-gradient(160deg,#1B2A4A 0%,var(--ob-primary-dark) 40%,var(--ob-primary) 100%)}
.ob-auth-left__bg::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Crect x='0' y='0' width='40' height='40'/%3E%3Crect x='40' y='40' width='40' height='40'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.ob-auth-left__content{position:relative;z-index:1;display:flex;flex-direction:column;padding:2.5rem;height:100%;gap:0}
.ob-auth-brand{display:block;margin-bottom:3rem;opacity:.95}
.ob-auth-left__body{flex:1;display:flex;flex-direction:column;justify-content:center}
.ob-auth-left__title{color:#fff;font-size:2rem;font-weight:800;margin:0 0 .875rem;line-height:1.2;letter-spacing:-.03em}
.ob-auth-left__sub{color:rgba(255,255,255,.7);line-height:1.8;margin:0 0 2rem;font-size:.9rem}
.ob-auth-left__footer{color:rgba(255,255,255,.4);font-size:.75rem;margin-top:2rem}
.ob-auth-features{display:flex;flex-direction:column;gap:1rem}
.ob-auth-feature{display:flex;align-items:center;gap:.875rem}
.ob-auth-feature__icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.ob-auth-feature__title{color:#fff;font-weight:700;font-size:.875rem}
.ob-auth-feature__sub{color:rgba(255,255,255,.6);font-size:.75rem}
.ob-auth-perks{display:flex;flex-direction:column;gap:.75rem}
.ob-auth-perk{display:flex;align-items:flex-start;gap:.75rem;color:rgba(255,255,255,.85);font-size:.875rem;line-height:1.5}
.ob-auth-perk__check{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;margin-top:.1rem}

.ob-auth-right--v2{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--ob-surface)}
.ob-auth-box--v2{background:#fff;border-radius:var(--ob-r-xl);box-shadow:0 8px 40px rgba(0,0,0,.1);padding:2.5rem;width:100%;max-width:460px}
.ob-auth-box__header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
.ob-auth-box__icon{width:52px;height:52px;border-radius:14px;background:var(--ob-primary-light);display:flex;align-items:center;justify-content:center;color:var(--ob-primary);flex-shrink:0}
.ob-auth-box__title{font-size:1.5rem;font-weight:800;margin:0 0 .25rem;color:var(--ob-dark)}
.ob-auth-box__sub{color:var(--ob-gray-500);margin:0;font-size:.875rem}
.ob-auth-form{display:flex;flex-direction:column;gap:.875rem}
.ob-auth-field{display:flex;flex-direction:column;gap:0}
.ob-auth-label{font-size:.8rem;font-weight:700;color:var(--ob-gray-700);margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.05em}
.ob-auth-input-wrap{position:relative;display:flex;align-items:center}
.ob-auth-input-icon{position:absolute;left:.875rem;color:var(--ob-gray-500);display:flex;pointer-events:none}
.ob-auth-input{padding-left:2.75rem!important}
.ob-auth-eye{position:absolute;right:.75rem;background:none;border:none;cursor:pointer;color:var(--ob-gray-500);padding:0;display:flex;align-items:center}
.ob-auth-eye:hover{color:var(--ob-primary)}
.ob-auth-forgot{font-size:.8rem;color:var(--ob-primary);font-weight:600}
.ob-auth-forgot:hover{color:var(--ob-primary-dark)}
.ob-auth-remember{display:flex;align-items:center;gap:.625rem;font-size:.85rem;cursor:pointer;color:var(--ob-gray-700)}
.ob-auth-remember input{width:15px;height:15px;accent-color:var(--ob-primary)}
.ob-auth-submit{margin-top:.25rem;position:relative;overflow:hidden}
.ob-auth-submit::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-100%);transition:transform .5s ease}
.ob-auth-submit:hover::after{transform:translateX(100%)}
.ob-auth-terms{font-size:.75rem;color:var(--ob-gray-500);text-align:center;margin:.25rem 0 0}
.ob-auth-terms a{color:var(--ob-primary)}
.ob-auth-divider{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--ob-gray-500);font-size:.8rem}
.ob-auth-divider::before,.ob-auth-divider::after{content:'';flex:1;height:1px;background:var(--ob-gray-200)}
@media(max-width:600px){.ob-auth-box--v2{padding:1.75rem;border-radius:var(--ob-r-lg)}}

/* ══ INPUT WRAP (password reveal) ══ */
.ob-input-wrap{position:relative;display:flex;align-items:center}
.ob-input-wrap .ob-input{flex:1}


/* ================================================================
   BLOG — Hero, Category Filter, Cards, Pagination, CTA
   ================================================================ */

/* ── Blog hero banner (full-width with image or gradient) ── */
.ob-blog-hero-banner{position:relative;height:52vh;min-height:320px;max-height:520px;display:flex;align-items:center;overflow:hidden}
.ob-blog-hero-banner__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.03);transition:transform 8s ease}
.ob-blog-hero-banner--has-img:hover .ob-blog-hero-banner__bg{transform:scale(1)}
.ob-blog-hero-banner__bg--gradient{background:linear-gradient(135deg,#075C7A 0%,#00A1D0 40%,#00B6DC 70%,#075C7A 100%)}
.ob-blog-hero-banner__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.72) 0%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.15) 100%)}
.ob-blog-hero-banner--default .ob-blog-hero-banner__overlay{background:linear-gradient(to right,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 100%)}
.ob-blog-hero-banner__container{position:relative;z-index:2;width:100%}
.ob-blog-hero-banner__inner{max-width:640px}
.ob-blog-hero-banner__eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ob-accent);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);padding:.3rem .875rem;border-radius:var(--ob-r-full);margin-bottom:1.125rem}
.ob-blog-hero-banner__title{font-size:clamp(1.75rem,4.5vw,3rem);font-weight:800;line-height:1.12;color:#fff;letter-spacing:-.03em;margin:0 0 1rem;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.ob-blog-hero-banner__sub{font-size:1rem;color:rgba(255,255,255,.8);line-height:1.75;margin:0;max-width:520px;text-shadow:0 1px 8px rgba(0,0,0,.2)}
@media(max-width:768px){
  .ob-blog-hero-banner{height:44vh;min-height:260px}
  .ob-blog-hero-banner__title{font-size:clamp(1.4rem,7vw,2.2rem)}
  .ob-blog-hero-banner__sub{font-size:.9rem}
  .ob-blog-hero-banner__overlay{background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.7) 100%)}
}

/* Old simple hero (kept for backward compat) */
.ob-blog-hero{padding:4rem 0 2.5rem;background:var(--ob-white)}
.ob-blog-hero__inner{max-width:640px}

/* Category filter pills — sits flush under the hero */
.ob-blog-cats{padding:.875rem 0 0;border-bottom:1px solid var(--ob-gray-200);margin-bottom:2rem;background:var(--ob-white);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ob-blog-cats__inner{display:flex;gap:.5rem;flex-wrap:wrap;padding-bottom:.75rem}
.ob-blog-cat-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.35rem 1rem;font-size:.78rem;font-weight:600;border-radius:var(--ob-r-full);border:1.5px solid var(--ob-gray-200);color:var(--ob-gray-700);background:var(--ob-white);text-decoration:none;transition:all var(--ob-t);cursor:pointer}
.ob-blog-cat-btn:hover,.ob-blog-cat-btn.active{background:var(--ob-primary);border-color:var(--ob-primary);color:#fff!important}
.ob-blog-cat-count{background:var(--ob-gray-100);color:var(--ob-gray-500);border-radius:var(--ob-r-full);padding:.1rem .45rem;font-size:.7rem;font-weight:700}
.ob-blog-cat-btn.active .ob-blog-cat-count,.ob-blog-cat-btn:hover .ob-blog-cat-count{background:rgba(255,255,255,.25);color:#fff}

/* Blog meta row inside card */
.ob-blog-meta-row{display:flex;align-items:center;gap:.625rem;font-size:.78rem;color:var(--ob-gray-500);margin-bottom:.625rem}
.ob-blog-meta-row svg{flex-shrink:0;opacity:.7}

/* Dummy notice banner */
.ob-blog-dummy-notice{background:var(--ob-accent-light);border:1px solid var(--ob-accent);border-radius:var(--ob-r);padding:.875rem 1.25rem;margin-bottom:2rem;display:flex;align-items:flex-start;gap:.625rem}
.ob-blog-dummy-notice p{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--ob-accent-dark);margin:0;font-weight:500}
.ob-blog-placeholder-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ob-gray-400);padding:.25rem .75rem;border:1.5px dashed var(--ob-gray-300);border-radius:var(--ob-r-full)}

/* Dummy card subtle overlay */
.ob-scard--dummy{opacity:.85}
.ob-scard--dummy .ob-scard__img-link{cursor:default;pointer-events:none}

/* Pagination */
.ob-blog-pagination{display:flex;justify-content:center;gap:.5rem;margin-top:3rem;flex-wrap:wrap}
.ob-blog-page-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--ob-r-full);border:1.5px solid var(--ob-gray-200);font-size:.875rem;font-weight:600;color:var(--ob-gray-700);text-decoration:none;transition:all var(--ob-t)}
.ob-blog-page-btn:hover,.ob-blog-page-btn.active{background:var(--ob-primary);border-color:var(--ob-primary);color:#fff!important}

/* Blog CTA strip */
.ob-blog-cta-strip{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;background:var(--ob-white);border-radius:var(--ob-r-xl);padding:2.5rem 3rem;box-shadow:var(--ob-sh-lg);border:1px solid var(--ob-gray-200)}
.ob-blog-cta-strip__left{flex:1;min-width:220px}
.ob-blog-cta-strip__right{display:flex;gap:1rem;flex-wrap:wrap;flex-shrink:0}
@media(max-width:768px){
  .ob-blog-cta-strip{padding:1.75rem;flex-direction:column;align-items:flex-start}
  .ob-blog-cta-strip__right{width:100%}
  .ob-blog-cta-strip__right .ob-btn{flex:1;justify-content:center}
  .ob-blog-cats__inner{gap:.375rem}
  .ob-blog-cat-btn{font-size:.72rem;padding:.28rem .75rem}
}

/* ================================================================
   HERO — Mobile Optimisation
   ================================================================ */
@media(max-width:768px){
  .ob-hero{padding-top:2.25rem}
  .ob-hero__h1{font-size:clamp(1.5rem,6vw,2.1rem);margin-bottom:.75rem}
  .ob-hero__sub{font-size:.9rem;margin-bottom:1.25rem;line-height:1.55}
  .ob-hero__actions{gap:.625rem}
  .ob-hero__actions .ob-btn{flex:1;min-width:0;justify-content:center;font-size:.8rem;padding:.65rem 1rem}
  .ob-hero-badge{font-size:.65rem;padding:.3rem .875rem;margin-bottom:1.125rem!important}
  .ob-hero__visual{aspect-ratio:16/11}
}

@media(max-width:480px){
  .ob-hero__h1{font-size:clamp(1.3rem,7vw,1.8rem)}
  .ob-hero__sub{font-size:.82rem}
  .ob-hero__actions{flex-direction:column}
  .ob-hero__actions .ob-btn{width:100%}
}

/* Ensure hero animation elements are always visible
   (fallback if js-anim-ready is added but tpAnimateSlide doesn't fire) */
.ob-hero-animate-title:not(.js-anim-ready .ob-hero-animate-title),
.ob-hero-animate-sub:not(.js-anim-ready .ob-hero-animate-sub),
.ob-hero-animate-btns:not(.js-anim-ready .ob-hero-animate-btns){
  opacity:1!important;
  transform:none!important;
}
/* Also force visible on mobile regardless of animation state */
@media(max-width:768px){
  .ob-hero-animate-title,
  .ob-hero-animate-sub,
  .ob-hero-animate-btns{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* ================================================================
   SINGLE BLOG POST
   ================================================================ */

/* ── Hero ── */
.ob-post-hero{position:relative;height:70vh;min-height:480px;display:flex;align-items:flex-end;overflow:hidden}
.ob-post-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.03);transition:transform 8s ease}
.ob-post-hero__bg--default{background:linear-gradient(145deg,#075C7A 0%,#00A1D0 50%,#04283A 100%)}
.ob-post-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.15) 100%)}
.ob-post-hero__container{position:relative;z-index:2;padding-bottom:3.5rem;width:100%}
.ob-post-hero__content{max-width:820px}

/* Breadcrumb */
.ob-post-hero__breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:rgba(255,255,255,.65);margin-bottom:1rem;flex-wrap:wrap}
.ob-post-hero__breadcrumb a{color:rgba(255,255,255,.75);text-decoration:none;transition:color var(--ob-t)}
.ob-post-hero__breadcrumb a:hover{color:#fff}

/* Category badge */
.ob-post-hero__badge{display:inline-block;background:var(--ob-accent);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .875rem;border-radius:var(--ob-r-full);margin-bottom:1rem}

/* Title */
.ob-post-hero__title{font-size:clamp(1.75rem,4.5vw,3.25rem);font-weight:800;line-height:1.12;color:#fff;letter-spacing:-.03em;margin:0 0 1.25rem;text-shadow:0 2px 24px rgba(0,0,0,.3)}

/* Meta row */
.ob-post-hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.85rem;color:rgba(255,255,255,.75)}
.ob-post-hero__meta svg{flex-shrink:0;vertical-align:middle}
.ob-post-hero__meta-sep{opacity:.4}

/* Scroll indicator */
.ob-post-hero__scroll{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);animation:ob-bob 2s ease-in-out infinite;z-index:2}
@keyframes ob-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ── Post body layout ── */
.ob-post-wrap{padding:4rem 0}
.ob-post-layout{display:grid;grid-template-columns:1fr 320px;gap:3.5rem;align-items:start}

/* ── Article prose ── */
.ob-post-content{min-width:0}
.ob-post-content.ob-prose h2{font-size:clamp(1.3rem,3vw,1.75rem);font-weight:700;color:var(--ob-dark);margin:2.5rem 0 1rem;letter-spacing:-.02em}
.ob-post-content.ob-prose h3{font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:700;color:var(--ob-dark);margin:2rem 0 .75rem}
.ob-post-content.ob-prose p{margin-bottom:1.5rem;line-height:1.85;color:var(--ob-gray-700);font-size:1.05rem}
.ob-post-content.ob-prose ul,.ob-post-content.ob-prose ol{padding-left:1.5rem;margin-bottom:1.5rem}
.ob-post-content.ob-prose li{margin-bottom:.5rem;line-height:1.75;color:var(--ob-gray-700)}
.ob-post-content.ob-prose a{color:var(--ob-primary);text-decoration:underline;text-underline-offset:3px}
.ob-post-content.ob-prose a:hover{color:var(--ob-primary-dark)}
.ob-post-content.ob-prose img{max-width:100%;height:auto;border-radius:var(--ob-r-lg);margin:2rem 0}
.ob-post-content.ob-prose blockquote{border-left:4px solid var(--ob-primary);margin:2rem 0;padding:.75rem 1.5rem;background:var(--ob-primary-light);border-radius:0 var(--ob-r) var(--ob-r) 0;font-style:italic;color:var(--ob-primary-dark)}
.ob-post-content.ob-prose code{background:var(--ob-gray-100);padding:.15rem .4rem;border-radius:4px;font-size:.88em;font-family:monospace}
.ob-post-content.ob-prose pre{background:var(--ob-dark);color:#e5e5e5;padding:1.25rem 1.5rem;border-radius:var(--ob-r);overflow-x:auto;margin-bottom:1.5rem}

/* ── Tags ── */
.ob-post-tags{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:2.5rem 0;padding-top:2rem;border-top:1px solid var(--ob-gray-200)}
.ob-post-tags svg{flex-shrink:0;color:var(--ob-gray-500)}
.ob-post-tag{display:inline-block;background:var(--ob-gray-100);color:var(--ob-gray-700);font-size:.78rem;font-weight:600;padding:.28rem .875rem;border-radius:var(--ob-r-full);text-decoration:none;transition:all var(--ob-t);border:1.5px solid transparent}
.ob-post-tag:hover{background:var(--ob-primary-light);color:var(--ob-primary)!important;border-color:var(--ob-primary)}

/* ── Share ── */
.ob-post-share{display:flex;align-items:center;flex-wrap:wrap;gap:.625rem;margin:2rem 0}
.ob-post-share__label{font-size:.82rem;font-weight:700;color:var(--ob-gray-500);text-transform:uppercase;letter-spacing:.1em}
.ob-post-share__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;border-radius:var(--ob-r-full);font-size:.8rem;font-weight:600;text-decoration:none;transition:all var(--ob-t);border:1.5px solid transparent}
.ob-post-share__btn--fb{background:#1877f2;color:#fff!important}
.ob-post-share__btn--fb:hover{background:#0d65d9;color:#fff!important}
.ob-post-share__btn--wa{background:#25d366;color:#fff!important}
.ob-post-share__btn--wa:hover{background:#1db954;color:#fff!important}
.ob-post-share__btn--tw{background:#000;color:#fff!important}
.ob-post-share__btn--tw:hover{background:#333;color:#fff!important}

/* ── Author card ── */
.ob-post-author-card{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;background:var(--ob-surface);border-radius:var(--ob-r-lg);margin:2.5rem 0;border:1px solid var(--ob-gray-200)}
.ob-post-author-card__avatar{flex-shrink:0}
.ob-post-author-card__img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.ob-post-author-card__name{font-size:.95rem;font-weight:700;color:var(--ob-dark);margin-bottom:.25rem}
.ob-post-author-card__bio{font-size:.85rem;color:var(--ob-gray-500);line-height:1.6}

/* ── Post navigation ── */
.ob-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--ob-gray-200)}
.ob-post-nav__item{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:var(--ob-r-lg);border:1.5px solid var(--ob-gray-200);text-decoration:none;transition:all var(--ob-t);color:var(--ob-gray-700)}
.ob-post-nav__item:hover{border-color:var(--ob-primary);background:var(--ob-primary-light);color:var(--ob-primary)!important}
.ob-post-nav__item--next{text-align:right;flex-direction:row-reverse}
.ob-post-nav__label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ob-gray-500);margin-bottom:.25rem}
.ob-post-nav__title{font-size:.88rem;font-weight:600;color:var(--ob-dark);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ob-post-nav__item:hover .ob-post-nav__title{color:var(--ob-primary)}

/* ── Sidebar ── */
.ob-post-sidebar{position:sticky;top:120px;display:flex;flex-direction:column;gap:1.5rem}
.ob-post-sidebar__back{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--ob-primary);text-decoration:none;padding:.5rem 0;transition:gap var(--ob-t)}
.ob-post-sidebar__back:hover{gap:.75rem;color:var(--ob-primary-dark)!important}

/* Sidebar CTA card */
.ob-post-sidebar__cta{background:var(--ob-primary-dark);border-radius:var(--ob-r-lg);padding:1.5rem;color:#fff}
.ob-post-sidebar__cta-icon{width:48px;height:48px;background:rgba(255,255,255,.12);border-radius:var(--ob-r);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:#fff}
.ob-post-sidebar__cta-title{font-size:1.1rem;font-weight:700;color:#fff;margin:0 0 .5rem}
.ob-post-sidebar__cta-text{font-size:.85rem;color:rgba(255,255,255,.75);line-height:1.6;margin:0 0 1.25rem}
.ob-post-sidebar__cta .ob-btn-primary{background:var(--ob-accent);border-color:var(--ob-accent);color:var(--ob-dark)!important}
.ob-post-sidebar__cta .ob-btn-primary:hover{background:var(--ob-accent-dark);border-color:var(--ob-accent-dark)}
.ob-post-sidebar__cta .ob-btn-outline{border-color:rgba(255,255,255,.3);color:#fff!important}
.ob-post-sidebar__cta .ob-btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Sidebar recent posts */
.ob-post-sidebar__recent{background:var(--ob-white);border:1px solid var(--ob-gray-200);border-radius:var(--ob-r-lg);overflow:hidden}
.ob-post-sidebar__section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ob-accent);padding:1rem 1.25rem .625rem;border-bottom:1px solid var(--ob-gray-100);margin:0}
.ob-post-sidebar__recent-item{display:flex;gap:.875rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--ob-gray-100);text-decoration:none;transition:background var(--ob-t);align-items:center}
.ob-post-sidebar__recent-item:last-child{border-bottom:none}
.ob-post-sidebar__recent-item:hover{background:var(--ob-gray-100)}
.ob-post-sidebar__recent-img{width:56px;height:56px;border-radius:var(--ob-r);overflow:hidden;flex-shrink:0}
.ob-post-sidebar__recent-img img{width:100%;height:100%;object-fit:cover}
.ob-post-sidebar__recent-placeholder{width:100%;height:100%;background:var(--ob-primary-light);display:flex;align-items:center;justify-content:center;color:var(--ob-primary)}
.ob-post-sidebar__recent-body{min-width:0}
.ob-post-sidebar__recent-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ob-accent);margin-bottom:.2rem;display:block}
.ob-post-sidebar__recent-title{font-size:.82rem;font-weight:600;color:var(--ob-dark);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.2rem}
.ob-post-sidebar__recent-date{font-size:.72rem;color:var(--ob-gray-500)}

/* ── Mobile: single post ── */
@media(max-width:900px){
  .ob-post-layout{grid-template-columns:1fr}
  .ob-post-sidebar{position:static}
}
@media(max-width:768px){
  .ob-post-hero{height:55vh;min-height:320px;align-items:flex-end}
  .ob-post-hero__title{font-size:clamp(1.4rem,6vw,2.2rem)}
  .ob-post-hero__container{padding-bottom:2rem}
  .ob-post-hero__meta{font-size:.78rem;gap:.5rem}
  .ob-post-wrap{padding:2.5rem 0}
  .ob-post-nav{grid-template-columns:1fr}
  .ob-post-author-card{flex-direction:column;text-align:center}
}

/* ══════════════════════════════════════
   SPECIAL FARES MARQUEE
══════════════════════════════════════ */
.ob-fares-section{padding-top:4rem}
@media(max-width:768px){.ob-fares-section{padding-top:3rem}}

.ob-fares-marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ob-fares-marquee__track{display:flex;gap:1.35rem;width:max-content}
.ob-fares-marquee__group{display:flex;gap:1.35rem;flex-shrink:0}
.ob-fares-marquee.is-marquee .ob-fares-marquee__track{animation:ob-fares-scroll var(--ob-marquee-duration,30s) linear infinite}
.ob-fares-marquee.is-marquee:hover .ob-fares-marquee__track{animation-play-state:paused}
.ob-fares-marquee:not(.is-marquee) .ob-fares-marquee__track{justify-content:center;width:100%}
.ob-fares-marquee:not(.is-marquee) .ob-fares-marquee__group[aria-hidden="true"]{display:none}
@keyframes ob-fares-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ob-fares-marquee.is-marquee .ob-fares-marquee__track{animation:none}}

/* Boarding-pass style fare card: a colour-blocked header stub (airline
   identity) is visually torn from the fare details below it via a
   perforation line with punched-out circular notches, mimicking a real
   ticket stub. Card itself has no padding — .ob-fare-card__head and
   .ob-fare-card__body each own their own padding so the header can run
   full-bleed edge-to-edge behind the rounded top corners. */
.ob-fare-card{
  position:relative;
  min-width:270px;max-width:282px;
  background:var(--ob-white);
  border:1px solid var(--ob-gray-200);
  border-radius:26px;
  box-shadow:0 4px 18px rgba(13,27,15,.08);
  padding:0;
  display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .4s ease;
}
.ob-fare-card:hover{
  transform:translateY(-7px);
  box-shadow:0 24px 46px -14px rgba(13,27,15,.24);
  border-color:var(--ob-primary-light);
}

/* Header stub: gradient banner + logo badge + airline name */
.ob-fare-card__head{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:.65rem;
  padding:1rem 1.15rem;
  background:linear-gradient(135deg,var(--ob-primary) 0%,var(--ob-primary-dark) 100%);
  border-radius:25px 25px 0 0;
}
/* Soft decorative glow, top-right — echoes the same treatment used on
   the flight-finder card just above this section, so the two feel like
   one consistent visual family rather than two unrelated components. */
.ob-fare-card__head::after{
  content:'';position:absolute;top:-32px;right:-28px;width:96px;height:96px;
  border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none;
}
.ob-fare-card__logo{
  position:relative;z-index:1;flex-shrink:0;width:36px;height:36px;border-radius:10px;
  background:#fff;color:var(--ob-primary);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:4px;box-shadow:0 2px 6px rgba(0,0,0,.18);
}
/* object-fit:contain (not cover) shows the whole logo, undistorted and
   uncropped, shrunk to fit inside the small badge — airline logos are
   usually wide wordmarks, and "cover" was stretching/cropping them to
   fill a forced circle. A small rounded-square badge with a touch of
   padding suits an arbitrary-shaped logo far better than a hard circle. */
.ob-fare-card__logo-img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.ob-fare-card__airline{position:relative;z-index:1;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Perforation: dashed tear-line with two notches punched into the
   card's own side edges, coloured to match the page surface behind the
   card (not the card's own white body) so they read as cut-outs. */
.ob-fare-card__perf{position:relative;margin:0 1.15rem;border-top:1.5px dashed var(--ob-gray-200)}
.ob-fare-card__perf::before,.ob-fare-card__perf::after{
  content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--ob-surface);
}
.ob-fare-card__perf::before{left:calc(-1.15rem - 9px)}
.ob-fare-card__perf::after{right:calc(-1.15rem - 9px)}

.ob-fare-card__body{padding:1.05rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.9rem}

/* Route row: boarding-pass style with dashed line + rotated plane icon */
.ob-fare-card__route{display:flex;align-items:center;gap:.5rem}
.ob-fare-card__stop{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ob-fare-card__stop--to{align-items:flex-end;text-align:right}
.ob-fare-card__code{font-size:1.35rem;font-weight:800;color:var(--ob-dark);letter-spacing:-.02em;line-height:1}
.ob-fare-card__city{font-size:.68rem;font-weight:500;color:var(--ob-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.ob-fare-card__line{
  flex:1;position:relative;height:14px;min-width:24px;
  display:flex;align-items:center;justify-content:center;
  border-top:1.5px dashed var(--ob-gray-200);
}
.ob-fare-card__line-icon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ob-primary);background:var(--ob-white);
}

/* Date row */
.ob-fare-card__date{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--ob-gray-500)}
.ob-fare-card__date-icon{color:var(--ob-primary);flex-shrink:0}

/* Footer: price + WhatsApp CTA */
.ob-fare-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.85rem;border-top:1px dashed var(--ob-gray-200)}
.ob-fare-card__price{display:flex;flex-direction:column;gap:.1rem}
.ob-fare-card__price-amount{font-size:1.3rem;font-weight:800;color:var(--ob-accent-dark,var(--ob-accent));letter-spacing:-.02em;line-height:1.1}
.ob-fare-card__price-note{font-size:.66rem;font-weight:600;color:var(--ob-gray-500);text-transform:lowercase}
.ob-fare-card__buy{
  flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;justify-content:center;
  padding:.55rem 1.05rem;border-radius:var(--ob-r-full);
  background:linear-gradient(135deg,#25D366,#1DA851);color:#fff;font-weight:700;font-size:.78rem;
  text-decoration:none;box-shadow:0 4px 10px -2px rgba(37,211,102,.4);
  transition:background var(--ob-t),transform var(--ob-t),box-shadow var(--ob-t-lg);
}
.ob-fare-card__buy:hover{background:linear-gradient(135deg,#1DA851,#128C42);color:#fff;transform:translateY(-2px);box-shadow:0 10px 20px -4px rgba(37,211,102,.5)}
@media (prefers-reduced-motion: reduce){.ob-fare-card,.ob-fare-card__buy{transition:none}.ob-fare-card:hover,.ob-fare-card__buy:hover{transform:none}}

/* ══ JINGLE / MUSIC PLAYER STRIP ══
   Deliberately background-less section: it paints nothing of its own so
   it always shows whatever color/gradient is behind it in the page flow.
   Every active song (Theme Songs admin) renders as one compact card; all
   cards sit in a single horizontal strip. If there are more than fit the
   viewport it scrolls sideways rather than wrapping onto a second row. */
.ob-jingle-section{padding:1.5rem 0 3rem;background:transparent}
.ob-jingle-strip{
  display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap;
  gap:1rem;
  max-width:100%;
  overflow-x:auto;
  padding:.25rem;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.ob-jingle-strip::-webkit-scrollbar{height:6px}
.ob-jingle-strip::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:99px}

.ob-jingle{
  display:flex;align-items:center;gap:1rem;
  flex:0 0 auto;
  scroll-snap-align:start;
  min-width:260px;max-width:340px;
  padding:.85rem 1.35rem;
  border-radius:28px;
  background:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 28px -12px rgba(13,27,15,.16);
  user-select:none;
}
.ob-jingle__play{
  flex-shrink:0;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ob-primary) 0%,var(--ob-accent) 100%);
  color:#fff;box-shadow:0 6px 16px -4px rgba(45,106,79,.5);
  transition:transform var(--ob-t),box-shadow var(--ob-t);
}
.ob-jingle__play:hover{transform:scale(1.06);box-shadow:0 10px 22px -4px rgba(45,106,79,.6)}
.ob-jingle__play:active{transform:scale(.96)}
.ob-jingle__icon{width:20px;height:20px}
.ob-jingle__icon--play{margin-left:2px}
.ob-jingle__icon--pause{margin-left:0}

.ob-jingle__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.ob-jingle__text{display:flex;flex-direction:column;line-height:1.25}
.ob-jingle__title{font-size:.86rem;font-weight:800;color:var(--ob-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-jingle__subtitle{font-size:.72rem;font-weight:600;color:var(--ob-gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-jingle__credentials{font-size:.66rem;font-weight:500;font-style:italic;color:var(--ob-gray-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ob-jingle__row{display:flex;align-items:center;gap:.6rem}
.ob-jingle__bars{
  flex:1;display:flex;align-items:center;justify-content:center;gap:2.5px;
  height:26px;min-width:0;overflow:hidden;
}
.ob-jingle__bar{
  flex:1;max-width:3.5px;min-width:2px;height:100%;border-radius:3px;
  background:linear-gradient(180deg,var(--ob-accent) 0%,var(--ob-primary) 100%);
  transform:scaleY(.12);transform-origin:center;
  transition:transform .12s ease-out;
  opacity:.85;
}
.ob-jingle.is-playing .ob-jingle__bar{opacity:1}

.ob-jingle__time{
  flex-shrink:0;font-size:.72rem;font-weight:700;color:var(--ob-dark);
  min-width:2.4rem;text-align:right;font-variant-numeric:tabular-nums;
  opacity:.75;
}

@media(max-width:480px){
  .ob-jingle{min-width:220px;max-width:280px;padding:.7rem 1.1rem;gap:.85rem}
  .ob-jingle__play{width:44px;height:44px}
  .ob-jingle__bars{height:22px}
}
@media (prefers-reduced-motion: reduce){
  .ob-jingle__play,.ob-jingle__bar{transition:none}
}

/* ================================================================
   ONBOARD CONCEPT v5 — components ported 1:1 from the approved
   design concept (onboard-homepage-concept.html): bento services grid,
   editorial about split, numbered process strip, reviews layout, CTA
   band, footer wordmark, and a reusable page-intro pattern for every
   inner page (see PART C below). Class names match the reference
   exactly so the mockup's CSS applies with minimal translation.
   ================================================================ */

/* ---- BENTO SERVICES GRID ---- */
.services-head{display:grid;grid-template-columns:1fr 1fr;gap:3.75rem;align-items:end;margin-bottom:3.5rem}
@media(max-width:900px){.services-head{grid-template-columns:1fr}}
.services-head h2{font-family:var(--ob-font-display);font-weight:600;font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.01em}
.services-head p{color:var(--ob-ink-soft);font-size:.97rem;line-height:1.7}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:1.25rem}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}}
.bcard{position:relative;border-radius:var(--ob-r);overflow:hidden;background:var(--ob-paper-2);border:1px solid var(--ob-line);grid-column:span 2;grid-row:span 2;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;text-decoration:none;color:inherit;display:block}
.bcard:hover{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(11,36,54,.35)}
.bcard:hover img{transform:scale(1.06)}
.bcard.lg{grid-column:span 3;grid-row:span 4}
.bcard.md{grid-column:span 3;grid-row:span 3}
.bcard.sm{grid-column:span 2;grid-row:span 2}
@media(max-width:900px){.bcard.lg,.bcard.md,.bcard.sm{grid-column:span 2}}
.bcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .5s ease}
.bcard-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,28,.9) 0%,rgba(7,20,28,.28) 45%,rgba(7,20,28,.05) 65%)}
.bcard-body{position:absolute;left:0;right:0;bottom:0;padding:1.5rem}
.bcard-tag{display:inline-flex;font-size:.656rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ob-ink);background:var(--ob-gold);padding:.25rem .625rem;border-radius:20px;margin-bottom:.75rem}
.bcard-title{font-family:var(--ob-font-display);font-size:1.35rem;font-weight:600;color:#fff;letter-spacing:-.01em;margin-bottom:.375rem}
.bcard.lg .bcard-title{font-size:1.85rem}
.bcard-desc{font-size:.8125rem;color:rgba(255,255,255,.72);line-height:1.55;max-width:280px}
.bcard.sm .bcard-desc{display:none}
.bcard-arrow{position:absolute;top:1.125rem;right:1.125rem;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--ob-ink);font-size:1rem;transition:background .25s,transform .25s}
.bcard:hover .bcard-arrow{background:var(--ob-sunset);color:#fff;transform:rotate(45deg)}
.bcard.flat{background:var(--ob-ink);color:var(--ob-paper);display:flex;flex-direction:column;justify-content:space-between;padding:1.625rem}
.bcard.flat .flat-icon{width:34px;height:34px;border-radius:9px;background:rgba(240,169,58,.16);display:flex;align-items:center;justify-content:center;color:var(--ob-gold);font-size:1rem;margin-bottom:auto}
.bcard.flat .k{font-family:var(--ob-font-display);font-size:2.6rem;font-weight:600;color:var(--ob-gold);line-height:1;margin-top:.875rem}
.bcard.flat .d{font-size:.78rem;color:rgba(251,247,239,.62);margin-top:.5rem;line-height:1.55}

/* Fallback icon shown on service cards with no banner photo — sits in the
   upper portion of the card only, clear of the bottom text overlay
   (was dead-centered across the WHOLE card before, which crowded it
   right against the tag/title). */
.bcard-placeholder{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:2.75rem;background:var(--ob-paper-2);color:var(--ob-ink-soft)}

/* Uniform services grid — equal-size cards, replaces the old asymmetric
   lg/md/sm bento sizing. Card count varies with how many real services
   exist (no placeholder padding), so this uses auto-fill instead of a
   fixed column count. */
.bento--uniform{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));grid-auto-rows:320px}
.bento--uniform .bcard{grid-column:auto;grid-row:auto}
.bento--uniform .bcard-title{font-size:1.35rem}
.bento--uniform .bcard-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none}
@media(max-width:900px){.bento--uniform{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento--uniform{grid-template-columns:1fr;grid-auto-rows:260px}}

/* ══════════════════════════════════════════════════════════════════════
   HOMEPAGE SERVICES — standalone section rendered just below the hero
   from the new "Homepage Services" admin screen (wp_tp_home_services).
   Compact horizontal cards (thumbnail + text + icon actions) so the
   section stays short even with several services. Own class namespace,
   fully independent of the .bcard bento grid further down the page.
   ══════════════════════════════════════════════════════════════════════ */
.ob-hs-section{padding:4rem 0 4.5rem}
.ob-hs-head{text-align:center;max-width:640px;margin:0 auto 2.5rem}
.ob-hs-eyebrow{font-size:.78rem;font-weight:600;color:var(--ob-sunset-deep);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem}
.ob-hs-heading{font-family:var(--ob-font-display);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.65rem);line-height:1.12;letter-spacing:-.01em;color:var(--ob-ink)}

.ob-hs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
@media(max-width:700px){.ob-hs-grid{grid-template-columns:1fr}}

.ob-hs-card{background:var(--ob-paper);border:1px solid var(--ob-line);border-radius:var(--ob-r-lg);display:flex;align-items:center;gap:.875rem;padding:.75rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ob-hs-card:hover{transform:translateY(-3px);box-shadow:var(--ob-sh);border-color:transparent}

.ob-hs-card__thumb{width:52px;height:52px;flex:0 0 52px;border-radius:12px;object-fit:cover;display:block}
.ob-hs-card__thumb--placeholder{display:flex;align-items:center;justify-content:center;background:var(--ob-paper-2);color:var(--ob-ink-soft)}

.ob-hs-card__body{flex:1;min-width:0}
.ob-hs-card__title{font-family:var(--ob-font-display);font-size:.98rem;font-weight:600;letter-spacing:-.005em;color:var(--ob-ink);margin:0 0 .2rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-hs-card__title a{color:inherit;text-decoration:none}
.ob-hs-card:hover .ob-hs-card__title a{color:var(--ob-sunset-deep)}
.ob-hs-card__desc{font-size:.78rem;color:var(--ob-ink-soft);line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.ob-hs-card__actions{flex:0 0 auto;display:flex;align-items:center;gap:.4rem}
.ob-hs-card__icon-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ob-paper-2);color:var(--ob-ink);flex-shrink:0;transition:background .2s,color .2s,transform .2s}
.ob-hs-card__icon-btn:hover{background:var(--ob-sunset);color:#fff;transform:scale(1.08)}
.ob-hs-card__icon-btn--wa{background:#25D366;color:#fff}
.ob-hs-card__icon-btn--wa:hover{background:#1fb855}
.ob-hs-card__icon-btn--wa svg{width:15px;height:15px}

/* ---- ABOUT: editorial split, pull-quote led ---- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;align-items:stretch}
@media(max-width:900px){.about{grid-template-columns:1fr}}
.about-img{position:relative;overflow:hidden}
.about-img img{width:100%;height:100%;object-fit:cover;min-height:520px;filter:saturate(.8)}
.about-copy{background:var(--ob-paper-2);padding:5rem 4rem;display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){.about-copy{padding:3.125rem 1.75rem}}
.about-copy .num-tag{color:var(--ob-ocean-deep)}
.about-copy blockquote{font-family:var(--ob-font-display);font-style:italic;font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.4;color:var(--ob-ink);margin-bottom:1.75rem}
.about-copy p.d{color:var(--ob-ink-soft);font-size:.9375rem;line-height:1.75;margin-bottom:1.875rem;max-width:480px}
.about-sign{display:flex;align-items:center;gap:.875rem}
.about-sign .dot{width:44px;height:44px;border-radius:50%;background:var(--ob-sunset);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ob-font-display);font-size:.9375rem;flex-shrink:0}
.about-sign strong{display:block;font-weight:600;font-size:.875rem}
.about-sign small{display:block;color:var(--ob-ink-soft);font-size:.78rem;margin-top:.125rem}

/* ---- PROCESS: numbered horizontal strip, dark bg ---- */
/* .process/.reviews-section had NO vertical padding at all — content sat
   flush against the section edges with no breathing room, a real layout
   bug. Matched to the same rhythm as the other big editorial sections
   (.ob-section is 5rem/3.5rem). */
.process{background:var(--ob-ink);color:var(--ob-paper);padding:5rem 0}
@media(max-width:768px){.process{padding:3.5rem 0}}
.process-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:4.375rem;gap:2.5rem;flex-wrap:wrap}
.process-head h2{font-family:var(--ob-font-display);font-weight:600;font-size:clamp(2rem,3.4vw,2.8rem)}
.process-head p{color:rgba(251,247,239,.55);font-size:.906rem;max-width:280px;line-height:1.7}
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:900px){.process-row{grid-template-columns:1fr;gap:2.25rem}}
/* Each column only had right-side padding, so a column's copy sat flush
   against the divider on its left (no breathing room) while the same
   copy had a full 1.75rem of air on its right — the columns read as
   unevenly spaced even though the grid itself was even. Symmetric
   padding + zeroing the outer edges keeps the dividers centred between
   columns and the first/last column flush with the container edge. */
.p-step{padding:0 1.75rem;border-right:1px solid rgba(251,247,239,.14);position:relative}
.p-step:first-child{padding-left:0}
.p-step:last-child{border-right:none;padding-right:0}
@media(max-width:900px){.p-step{border-right:none;border-bottom:1px solid rgba(251,247,239,.14);padding:0 0 1.75rem}.p-step:first-child{padding-left:0}.p-step:last-child{border-bottom:none;padding-bottom:0}}
.p-step .idx{font-family:var(--ob-font-display);font-size:3.2rem;font-weight:300;color:rgba(251,247,239,.22);margin-bottom:1.125rem}
.p-step h4{font-size:1rem;font-weight:600;margin-bottom:.625rem;color:var(--ob-paper)}
.p-step p{font-size:.844rem;color:rgba(251,247,239,.58);line-height:1.65}

/* ---- REVIEWS: featured quote + compact list ---- */
.reviews-section{background:var(--ob-paper-2);padding:5rem 0}
@media(max-width:768px){.reviews-section{padding:3.5rem 0}}
.reviews-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:3.5rem;gap:1.875rem;flex-wrap:wrap}
.reviews-head h2{font-family:var(--ob-font-display);font-weight:600;font-size:clamp(2rem,3.4vw,2.6rem)}
/* ---- GOOGLE BUSINESS PROFILE CARD — replaces the old passive
   rating-pill (logo + number, nothing to click) with an actual card:
   business name + rating up top, three real actions below (profile /
   directions / write a review), each wired to the real Google listing
   via Homepage Builder → Google Reviews. ---- */
.gbp-card{background:var(--ob-white);border:1px solid var(--ob-line);border-radius:var(--ob-r);padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem;min-width:280px;box-shadow:var(--ob-sh)}
.gbp-card__top{display:flex;align-items:center;gap:.875rem}
.gbp-card__logo{flex-shrink:0}
.gbp-card__name{font-weight:700;font-size:.95rem;color:var(--ob-ink);margin-bottom:.25rem}
.gbp-card__rating{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.gbp-card__rating .num{font-weight:700;font-size:.9375rem;color:var(--ob-ink)}
.gbp-card__rating .stars{color:var(--ob-gold);font-size:.8125rem;letter-spacing:1px}
.gbp-card__rating .cnt{font-size:.78rem;color:var(--ob-ink-soft)}
.gbp-card__actions{display:flex;gap:.5rem;flex-wrap:wrap}
.gbp-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .875rem;border-radius:8px;font-size:.78rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:all var(--ob-t)}
.gbp-btn--ghost{background:transparent;border:1px solid var(--ob-line);color:var(--ob-ink)}
.gbp-btn--ghost:hover{background:var(--ob-paper-2);border-color:var(--ob-ink-soft)}
.gbp-btn--solid{background:var(--ob-sunset);border:1px solid var(--ob-sunset);color:#fff}
.gbp-btn--solid:hover{background:var(--ob-sunset-deep);border-color:var(--ob-sunset-deep)}
@media(max-width:480px){.gbp-card{width:100%}.gbp-card__actions{flex-direction:column}.gbp-btn{width:100%}}

/* ---- REVIEWS — infinite boarding-pass ticket marquee. Same track/group/
   duration-via-JS technique as .ob-fares-marquee (see setupMarquee() in
   frontend.js, keyed off [data-fares-marquee]), so both marquees pause on
   hover, respect prefers-reduced-motion, and only animate when content
   actually overflows the viewport. ---- */
.ob-reviews-marquee{overflow:hidden;position:relative;margin-top:2.75rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ob-reviews-marquee__track{display:flex;gap:1.35rem;width:max-content}
.ob-reviews-marquee__group{display:flex;gap:1.35rem;flex-shrink:0}
.ob-reviews-marquee.is-marquee .ob-reviews-marquee__track{animation:ob-fares-scroll var(--ob-marquee-duration,36s) linear infinite}
.ob-reviews-marquee.is-marquee:hover .ob-reviews-marquee__track{animation-play-state:paused}
.ob-reviews-marquee:not(.is-marquee) .ob-reviews-marquee__track{justify-content:center;width:100%}
.ob-reviews-marquee:not(.is-marquee) .ob-reviews-marquee__group[aria-hidden="true"]{display:none}
@media (prefers-reduced-motion: reduce){.ob-reviews-marquee.is-marquee .ob-reviews-marquee__track{animation:none}}

/* Review ticket card — same boarding-pass silhouette as .ob-fare-card:
   colour-blocked header stub, dashed perforation with punched notches,
   quote body, verified-traveller footer stub. */
.ob-review-ticket{flex:0 0 340px;width:340px;background:var(--ob-white);border-radius:var(--ob-r-xl);overflow:hidden;box-shadow:var(--ob-sh);border:1px solid var(--ob-line);display:flex;flex-direction:column;transition:transform var(--ob-t-lg),box-shadow var(--ob-t-lg)}
.ob-review-ticket:hover{transform:translateY(-4px);box-shadow:var(--ob-sh-lg)}
.ob-review-ticket__head{display:flex;align-items:center;gap:.75rem;padding:1.15rem 1.25rem;background:var(--ob-ocean-gradient);color:#fff}
.ob-review-ticket__avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);border:1.5px dashed rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-family:var(--ob-font-display);font-weight:600;font-size:.95rem;flex-shrink:0}
.ob-review-ticket__who{display:flex;flex-direction:column;min-width:0;flex:1}
.ob-review-ticket__name{font-size:.85rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-review-ticket__time{font-size:.7rem;color:rgba(255,255,255,.7)}
.ob-review-ticket__stars{color:var(--ob-gold);font-size:.78rem;letter-spacing:1px;flex-shrink:0}
.ob-review-ticket__perf{position:relative;height:0;border-top:1.5px dashed var(--ob-line);margin:0 1.25rem}
.ob-review-ticket__perf::before,.ob-review-ticket__perf::after{content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--ob-paper-2)}
.ob-review-ticket__perf::before{left:-1.25rem}
.ob-review-ticket__perf::after{right:-1.25rem}
.ob-review-ticket__body{padding:1.1rem 1.25rem 0;position:relative;flex:1}
.ob-review-ticket__qmark{position:absolute;top:.4rem;right:1rem;font-family:var(--ob-font-display);font-size:2.5rem;line-height:1;color:var(--ob-primary-light)}
.ob-review-ticket__text{font-size:.85rem;line-height:1.75;color:var(--ob-ink-soft);position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ob-review-ticket__foot{display:flex;align-items:center;gap:.5rem;padding:1rem 1.25rem 1.15rem;font-size:.72rem;font-weight:600;color:var(--ob-ink-soft)}
@media (prefers-reduced-motion: reduce){.ob-review-ticket{transition:none}.ob-review-ticket:hover{transform:none}}

/* ---- CTA BAND: centered, solid sunset background ---- */
/* Tighter than the big editorial sections (.ob-section is 5rem) — this is
   a punchy closing CTA strip, not a content section, so it shouldn't read
   as the same weight as About/Process/Reviews. */
.cta-band{position:relative;padding:4rem 0;overflow:hidden;background:var(--ob-sunset-deep)}
@media(max-width:768px){.cta-band{padding:3rem 0}}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.14),transparent 55%)}
.cta-inner{position:relative;text-align:center;max-width:620px;margin:0 auto}
.cta-band h2{font-family:var(--ob-font-display);font-style:normal;font-weight:600;color:#fff;font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:1.375rem}
.cta-band p{color:rgba(255,255,255,.82);font-size:.97rem;margin-bottom:2.25rem}
.cta-band .ob-btn{margin:0 auto}

/* ---- FOOTER: giant oversized wordmark ---- */
.foot-wordmark{font-family:var(--ob-font-display);font-style:normal;font-weight:600;font-size:clamp(3rem,10vw,8.5rem);line-height:.9;padding:3.75rem 0 2.5rem;color:var(--ob-paper);letter-spacing:-.03em;display:flex;align-items:center;gap:.25em;flex-wrap:wrap}
.foot-wordmark__icon{width:.62em;height:.62em;flex-shrink:0}
.ob-footer__main{padding-top:5.5rem}
.ob-footer-grid--v2{grid-template-columns:1.4fr .8fr .8fr .8fr}
@media(max-width:900px){.ob-footer-grid--v2{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ob-footer-grid--v2{grid-template-columns:1fr}}
.ob-footer__col h4{font-size:.75rem}
.ob-footer__col ul li a,.ob-footer__col ul li{font-size:.875rem}

/* ---- PAGE INTRO — reusable inner-page header pattern (replaces the old
   centered-pill+centered-h1+gradient-rectangle banner used on every inner
   page). Left-aligned, numbered tag + Fraunces heading on the warm paper
   background — matches the editorial voice of the rest of the site. ---- */
/* min-height + flex centering (rather than padding alone) keeps every
   inner-page hero the same height regardless of how much copy/controls a
   given page puts inside it (e.g. Services' search form vs. About's plain
   heading) — only the Home page hero is exempt from this. */
.page-intro{background:var(--ob-paper);padding:7.5rem 0 3.5rem;min-height:24rem;display:flex;align-items:center}
@media(max-width:768px){.page-intro{min-height:20rem}}
/* z-index:0 (not just position:relative) is required here: without a
   z-index value the box never establishes its own stacking context, so the
   ::before below (z-index:-1) escapes it and paints behind whatever
   ancestor DOES form one — usually far up the tree, behind opaque
   backgrounds — which hid the banner photo on every inner page. */
.page-intro.has-photo{position:relative;z-index:0;padding:9rem 0 4rem;color:#fff}
.page-intro.has-photo::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,20,28,.82) 0%,rgba(7,20,28,.55) 60%,rgba(7,20,28,.35) 100%),var(--ob-page-intro-img,none) center/cover;z-index:-1}
.page-intro.has-photo .num-tag{color:var(--ob-gold)}
.page-intro__inner{max-width:720px}
.page-intro .num-tag{margin-bottom:1rem}
.page-intro h1{font-family:var(--ob-font-display);font-weight:600;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:1rem}
.page-intro p{font-size:1.02rem;line-height:1.7;color:var(--ob-ink-soft);max-width:560px}
.page-intro.has-photo p{color:rgba(255,255,255,.82)}

/* ---- Contact page map — breaks out of .ob-container to run full viewport
   width, and sits directly under the section above it so there's no dead
   gap before the footer. ---- */
.ob-contact-map{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ob-contact-map iframe{width:100%;display:block}

/* ---- Generic editorial card system reused across inner pages (services
   list, blog list, dashboard, etc.) so forms/cards read consistently with
   the bento/reviews language instead of the old rounded-pill cards. ---- */
.ob-editorial-card{background:var(--ob-paper);border:1px solid var(--ob-line);border-radius:var(--ob-r);transition:transform var(--ob-t-lg),box-shadow var(--ob-t-lg)}
.ob-editorial-card:hover{transform:translateY(-4px);box-shadow:var(--ob-sh)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],textarea,select{
  font-family:var(--ob-font);border:1px solid var(--ob-line);border-radius:var(--ob-r-full);padding:.75rem 1rem;font-size:.9rem;color:var(--ob-ink);background:var(--ob-paper);transition:border-color .2s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ob-ocean)}

/* ---- Part C additions: remaining hardcoded old-palette hex swapped to
   the ONBOARD CONCEPT v5 vars on components inner pages still touched
   (blog post hero default background, service-detail badge system already
   fixed inline in their templates). Appended only, does not restructure
   any existing rule above. ---- */
.ob-post-hero__bg--default{background:linear-gradient(145deg,var(--ob-ocean-deep) 0%,var(--ob-ocean) 50%,var(--ob-ink) 100%)!important}

/* ---- Hero background crossfade (home.php) — supports stacking more
   than one admin-configured slide image behind the static hero panel
   with a plain opacity crossfade, no carousel library involved. When
   only one slide has an image this simply renders as a normal img. ---- */
.ob-hero-bg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.ob-hero-bg__img.is-active{opacity:1}

/* ================================================================
   BUG-FIX PASS — Part D: ~90 classes referenced in templates that had
   zero CSS definitions (form system, 404, auth base, dashboard, misc
   components). Built from the actual markup in each template, using
   the same design tokens as the rest of the file. Appended only.
   ================================================================ */

/* ---- Heading size between h3/h2 ---- */
.ob-h4{font-family:var(--ob-font-display);font-weight:600;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;color:var(--ob-ink)}

/* ---- Form system: field wrapper, label, input/textarea/select base ---- */
.ob-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.25rem}
.ob-label{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ob-ink-soft)}
.ob-label .required{color:var(--ob-sunset-deep);margin-left:.15rem}
.ob-input,.ob-textarea,.ob-select{
  width:100%;font-family:var(--ob-font);font-size:.95rem;color:var(--ob-ink);
  background:var(--ob-paper);border:1px solid var(--ob-line);border-radius:var(--ob-r);
  padding:.75rem 1rem;transition:border-color var(--ob-t),box-shadow var(--ob-t);
}
/* iOS Safari auto-zooms the whole page on focus for any text input under
   16px — every form on the site (apply, login, register, contact, support,
   appointments) uses .ob-input/.ob-textarea/.ob-select, so this one rule
   fixes the zoom-jump on every mobile form at once. Desktop keeps the
   slightly smaller .95rem design size. */
@media(max-width:768px){.ob-input,.ob-textarea,.ob-select{font-size:16px}}
.ob-input::placeholder,.ob-textarea::placeholder{color:var(--ob-ink-soft);opacity:.65}
.ob-input:focus,.ob-textarea:focus,.ob-select:focus{outline:none;border-color:var(--ob-ocean);box-shadow:0 0 0 3px rgba(0,144,197,.15)}
.ob-textarea{resize:vertical;min-height:110px;line-height:1.6}
.ob-select{
  appearance:none;-webkit-appearance:none;padding-right:2.5rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A5568' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:16px;
}
.ob-form-section{margin-bottom:1.75rem;padding-bottom:1.75rem;border-bottom:1px solid var(--ob-line)}
.ob-form-section:last-of-type{border-bottom:none;padding-bottom:0}
.ob-form-section-title{font-family:var(--ob-font-display);font-weight:600;font-size:1.05rem;color:var(--ob-ink);margin-bottom:1rem}
.ob-needs-validation .ob-input:invalid,.ob-needs-validation .ob-textarea:invalid,.ob-needs-validation .ob-select:invalid{border-color:var(--ob-sunset-deep)}
.ob-field.has-error .ob-input,.ob-field.has-error .ob-textarea,.ob-field.has-error .ob-select{border-color:var(--ob-sunset-deep);box-shadow:0 0 0 3px rgba(194,54,31,.12)}

/* ---- Alerts (inline message banners) ---- */
.ob-alert{padding:.9rem 1.1rem;border-radius:var(--ob-r);font-size:.875rem;font-weight:500;line-height:1.5;margin-bottom:1.25rem;border:1px solid transparent}
.ob-alert-success{background:rgba(46,125,79,.1);border-color:rgba(46,125,79,.3);color:#1E5A38}
.ob-alert-error{background:rgba(194,54,31,.08);border-color:rgba(194,54,31,.3);color:var(--ob-sunset-deep)}

/* ---- Status pill (dashboard application status) ---- */
.ob-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:.3rem .7rem;border-radius:var(--ob-r-full);background:var(--ob-paper-2);color:var(--ob-ink-soft);white-space:nowrap}
.ob-status-submitted,.ob-status-captured{background:rgba(0,144,197,.12);color:var(--ob-ocean-deep)}
.ob-status-processing,.ob-status-docs_needed{background:rgba(240,169,58,.18);color:#8A5A0F}
.ob-status-payment_pending{background:rgba(232,93,42,.12);color:var(--ob-sunset-deep)}
.ob-status-payment_received,.ob-status-approved,.ob-status-completed{background:rgba(46,125,79,.12);color:#1E5A38}
.ob-status-rejected{background:rgba(194,54,31,.12);color:var(--ob-sunset-deep)}

/* ---- Pagination (services/blog listings) ---- */
.ob-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.ob-pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .75rem;border-radius:var(--ob-r-full);border:1px solid var(--ob-line);color:var(--ob-ink);font-weight:600;font-size:.875rem;transition:all var(--ob-t)}
.ob-pagination a:hover{border-color:var(--ob-ocean);color:var(--ob-ocean-deep)}
.ob-pagination a.current{background:var(--ob-ink);border-color:var(--ob-ink);color:#fff}

/* ---- Blog prev/next post nav (base already styles __item; --prev needs
   no direction flip, just complete the selector so it's a defined rule) ---- */
.ob-post-nav__item--prev{text-align:left}

/* ---- Corp profile download trigger (button already gets .ob-btn look
   via combined classes; this just completes the selector map) ---- */
.ob-corp-trigger{cursor:pointer}

/* ---- Payment page coupon row ---- */
.ob-coupon-row{display:flex;gap:.6rem;flex-wrap:wrap}
.ob-coupon-row .ob-input{flex:1;min-width:180px}

/* ---- Dashboard referral widget dynamic values (layout is inline in
   dashboard.php; these just set the numeral voice) ---- */
.ob-referral-code{font-family:var(--ob-font-display)}
.ob-referral-url{font-family:var(--ob-font)}
.ob-referral-credit{font-family:var(--ob-font-display)}

/* ---- File upload (apply.php document fields) ---- */
.ob-file-upload{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  text-align:center;padding:1.5rem 1rem;border:1.5px dashed var(--ob-line);border-radius:var(--ob-r);
  background:var(--ob-paper-2);transition:border-color var(--ob-t),background var(--ob-t);
}
.ob-file-upload:hover{border-color:var(--ob-ocean);background:rgba(0,144,197,.06)}
.ob-file-upload__icon{font-size:1.5rem;line-height:1}
.ob-file-upload__text{font-size:.875rem;font-weight:600;color:var(--ob-ink)}
.ob-file-upload__sub{font-size:.72rem;color:var(--ob-ink-soft)}
.ob-file-preview{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;padding:.6rem .85rem;border:1px solid var(--ob-line);border-radius:var(--ob-r);background:var(--ob-paper)}
.ob-file-preview__name{font-size:.85rem;font-weight:600;color:var(--ob-ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-file-preview__size{flex-shrink:0}
.ob-file-preview__remove{flex-shrink:0;line-height:1}
.ob-file-preview__remove:hover{color:var(--ob-sunset-deep)}

/* ---- Photo upload preview (profile.php avatar) — sizing already comes
   from the combined .ob-profile-avatar class; this completes the selector ---- */
.ob-photo-upload__preview{display:block}

/* ================================================================
   404 PAGE — travelpro-theme/404.php already ships its own <style>
   block with editorial-adjacent rules, but it predates the approved
   palette (raw hex/var(--ob-accent) etc). These base rules give every
   .ob-404-* class a first-class definition in the shared stylesheet
   too, and the inline <style> in 404.php overrides colors to match.
   ================================================================ */
.ob-404-page{min-height:60vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:4rem 0;background:linear-gradient(160deg,var(--ob-ocean-deep) 0%,var(--ob-ink) 60%,#04141d 100%)}
.ob-404-bg{position:absolute;inset:0;pointer-events:none}
.ob-404-cloud{position:absolute;font-size:3rem;opacity:.18;animation:ob-404-float 8s ease-in-out infinite}
.ob-404-cloud--1{top:15%;left:8%;font-size:2.5rem}
.ob-404-cloud--2{top:25%;right:12%;font-size:4rem;animation-delay:2s}
.ob-404-cloud--3{bottom:30%;left:20%;animation-delay:4s}
.ob-404-plane{position:absolute;top:40%;left:-80px;font-size:2.5rem;opacity:.75;animation:ob-404-fly 12s linear infinite}
@keyframes ob-404-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes ob-404-fly{0%{left:-80px;top:40%}100%{left:110%;top:25%}}
.ob-404-content{text-align:center;color:#fff;max-width:600px;margin:0 auto;position:relative;z-index:2}
.ob-404-code{font-family:var(--ob-font-display);font-size:clamp(6rem,15vw,10rem);font-weight:600;line-height:1;color:rgba(255,255,255,.1);letter-spacing:-.03em;margin-bottom:-1rem;user-select:none}
.ob-404-icon{font-size:4rem;margin-bottom:1rem;animation:ob-404-float 4s ease-in-out infinite}
.ob-404-title{font-family:var(--ob-font-display);font-weight:600;font-size:clamp(1.75rem,4vw,2.75rem);color:#fff;margin-bottom:1rem;letter-spacing:-.02em}
.ob-404-sub{font-size:1.05rem;color:rgba(255,255,255,.72);line-height:1.75;margin-bottom:2.25rem;max-width:480px;margin-left:auto;margin-right:auto}
.ob-404-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2.5rem}
.ob-404-search{background:rgba(255,255,255,.08);border-radius:var(--ob-r-lg);padding:1.5rem;backdrop-filter:blur(8px)}
.ob-404-search .search-form{display:flex;gap:.5rem;justify-content:center}
.ob-404-search input[type=search]{padding:.625rem 1rem;border-radius:var(--ob-r-full);border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:.9rem;flex:1;max-width:280px;outline:none}
.ob-404-search input[type=search]::placeholder{color:rgba(255,255,255,.55)}
.ob-404-search input[type=submit]{padding:.625rem 1.25rem;background:var(--ob-sunset);color:#fff;border:none;border-radius:var(--ob-r-full);cursor:pointer;font-weight:600}
@media(max-width:640px){.ob-404-cloud,.ob-404-plane{display:none}}

/* ================================================================
   AUTH PAGES (login/register) — outer/base classes that the --v2
   modifier classes attach to. .ob-auth-page/--v2, .ob-auth-left/--v2,
   .ob-auth-right/--v2, .ob-auth-box/--v2 already had the --v2 layout
   rules (line ~1032 above); these base classes were never defined so
   the combined `class="ob-auth-page ob-auth-page--v2"` markup had no
   guaranteed match for the bare token. Kept intentionally minimal —
   the --v2 rules do the layout heavy-lifting already.
   ================================================================ */
.ob-auth-page{background:var(--ob-paper)}
.ob-auth-left{background:var(--ob-ocean-deep)}
.ob-auth-right{background:var(--ob-paper-2)}
.ob-auth-box{background:var(--ob-paper)}

/* ================================================================
   DASHBOARD (templates/frontend/dashboard.php) — the template ships
   its own <style> block with the full layout (sidebar+main, banner,
   stats, cards) already using the shared legacy-token aliases (which
   repoint to the new palette), so visually it already matches. These
   are the small number of classes referenced but not covered by that
   inline block, kept consistent with dashboard.php's own tokens.
   ================================================================ */
/* ── Outer wrap / banner ── */
.ob-db-outer{max-width:1100px;margin:2.5rem auto;border-radius:var(--ob-r-xl);overflow:hidden;box-shadow:var(--ob-sh-lg)}
.ob-db-banner{position:relative;height:240px;background:linear-gradient(135deg,var(--ob-ink) 0%,var(--ob-ocean-deep) 40%,var(--ob-ocean) 70%,var(--ob-ocean) 100%);overflow:hidden;flex-shrink:0}
.ob-db-banner__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35}
.ob-db-banner__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.45) 100%)}
.ob-db-banner__orb{position:absolute;border-radius:50%;opacity:.18}
.ob-db-banner__orb--1{width:300px;height:300px;background:var(--ob-sunset);top:-80px;right:-60px}
.ob-db-banner__orb--2{width:200px;height:200px;background:var(--ob-gold);bottom:-60px;left:10%}
.ob-db-banner__greeting{position:absolute;bottom:80px;left:2rem;color:#fff;z-index:2}
.ob-db-banner__greeting-line{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.78;margin-bottom:.25rem}
.ob-db-banner__greeting-name{font-family:var(--ob-font-display);font-size:1.75rem;font-weight:600;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.ob-db-banner__greeting-icon{font-size:1.6rem;vertical-align:middle;margin-left:.375rem}
.ob-db-banner__clock{position:absolute;top:1.25rem;right:1.5rem;color:#fff;z-index:2;text-align:right}
.ob-db-banner__time{font-family:var(--ob-font-display);font-size:1.4rem;font-weight:600;letter-spacing:.03em;line-height:1;font-variant-numeric:tabular-nums}
.ob-db-banner__date{font-size:.75rem;opacity:.78;margin-top:.2rem}

/* ── Avatar row ── */
.ob-db-avatar-row{position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:0 2rem;margin-top:-52px;z-index:3;flex-wrap:wrap;gap:.75rem;background:var(--ob-paper)}
.ob-db-avatar-wrap{position:relative;flex-shrink:0}
.ob-db-avatar{width:104px;height:104px;border-radius:50%;border:4px solid var(--ob-paper);object-fit:cover;box-shadow:0 4px 20px rgba(11,36,54,.18);background:var(--ob-paper-2);display:flex;align-items:center;justify-content:center;font-family:var(--ob-font-display);font-size:2.5rem;font-weight:600;color:var(--ob-ocean-deep)}
.ob-db-avatar-badges{display:flex;align-items:center;gap:.5rem;padding-bottom:1rem;flex-wrap:wrap}
.ob-db-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;padding:.3rem .75rem;border-radius:var(--ob-r-full);letter-spacing:.04em;white-space:nowrap}
.ob-db-badge--verified{background:rgba(46,125,79,.12);color:#1E5A38;border:1px solid rgba(46,125,79,.3)}
.ob-db-badge--member{background:rgba(0,144,197,.1);color:var(--ob-ocean-deep);border:1px solid rgba(0,144,197,.3)}
.ob-db-avatar-actions{display:flex;gap:.5rem;padding-bottom:1rem}
.ob-db-avatar-actions .ob-btn{white-space:nowrap}

/* ── Identity block ── */
.ob-db-identity{padding:1rem 2rem 1.5rem;border-bottom:1px solid var(--ob-line);background:var(--ob-paper)}
.ob-db-identity__name{font-family:var(--ob-font-display);font-size:1.35rem;font-weight:600;color:var(--ob-ink);margin-bottom:.2rem}
.ob-db-identity__email{font-size:.875rem;color:var(--ob-ink-soft)}

/* ── Stat cards row ── */
.ob-db-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.5rem 2rem;background:var(--ob-paper);border-bottom:1px solid var(--ob-line)}
@media(max-width:640px){.ob-db-stats{grid-template-columns:1fr 1fr;padding:1rem}}
.ob-db-stat{background:var(--ob-paper);border-radius:var(--ob-r);padding:1.25rem 1.5rem;border:1px solid var(--ob-line);box-shadow:0 2px 8px rgba(11,36,54,.04);text-align:center;transition:transform var(--ob-t),box-shadow var(--ob-t)}
.ob-db-stat:hover{transform:translateY(-2px);box-shadow:var(--ob-sh)}
.ob-db-stat__icon{font-size:1.5rem;margin-bottom:.5rem}
.ob-db-stat__val{font-family:var(--ob-font-display);font-size:2rem;font-weight:600;color:var(--ob-ocean-deep);line-height:1;margin-bottom:.2rem}
.ob-db-stat__label{font-size:.75rem;font-weight:600;color:var(--ob-ink-soft);text-transform:uppercase;letter-spacing:.06em}
.ob-db-stat__sub{font-size:.7rem;color:var(--ob-ink-soft);opacity:.75;margin-top:.15rem}

/* ── Layout wrapper: sidebar + main ── */
.ob-db-wrap{display:grid;grid-template-columns:280px 1fr;gap:0;min-height:600px;background:var(--ob-paper);border:1px solid var(--ob-line);border-top:none}
@media(max-width:900px){.ob-db-wrap{grid-template-columns:1fr}}
.ob-db-sidebar{background:var(--ob-paper-2);border-right:1px solid var(--ob-line);padding:1.5rem 0}
.ob-db-nav__item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;font-family:var(--ob-font);font-size:.875rem;font-weight:600;color:var(--ob-ink-soft);text-decoration:none;transition:all var(--ob-t);border-left:3px solid transparent}
.ob-db-nav__item:hover{background:rgba(0,144,197,.08);color:var(--ob-ocean-deep)}
.ob-db-nav__item.active{background:rgba(0,144,197,.1);color:var(--ob-ocean-deep);border-left-color:var(--ob-ocean)}
.ob-db-nav__divider{border:none;border-top:1px solid var(--ob-line);margin:.5rem 1.5rem}
.ob-db-nav__logout{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background:none;border:none;font-size:.875rem;font-weight:600;color:var(--ob-sunset-deep);cursor:pointer;font-family:inherit;width:100%;text-align:left;transition:background var(--ob-t);border-left:3px solid transparent}
.ob-db-nav__logout:hover{background:rgba(194,54,31,.08);border-left-color:var(--ob-sunset-deep)}

/* ── Main content ── */
.ob-db-main{padding:2rem;background:var(--ob-paper);min-height:400px}
@media(max-width:640px){.ob-db-main{padding:1rem}}
.ob-db-card{background:var(--ob-paper);border-radius:var(--ob-r-lg);border:1px solid var(--ob-line);box-shadow:0 2px 12px rgba(11,36,54,.04);overflow:hidden}
.ob-db-card__head{padding:1.25rem 1.5rem;border-bottom:1px solid var(--ob-line);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ob-db-card__title{font-family:var(--ob-font-display);font-size:1.05rem;font-weight:600;color:var(--ob-ink);margin:0}
.ob-db-empty{padding:3.5rem 1.5rem;text-align:center;color:var(--ob-ink-soft)}
.ob-db-empty__icon{font-size:3rem;margin-bottom:1rem}

@media(max-width:640px){
  .ob-404-code{font-size:5rem}
  .ob-file-upload{padding:1.1rem .75rem}
}

/* ================================================================
   About page v2 — travel-motif components (boarding pass / flight
   path / passport stamps). Distinct from the bento/process/marquee
   patterns used elsewhere on the site — reserved for About Us.
   ================================================================ */

/* ── Story: boarding-pass split card ── */
.ob-story{display:grid;grid-template-columns:1.55fr 1fr;background:var(--ob-white);border-radius:var(--ob-r-xl);overflow:hidden;box-shadow:var(--ob-sh-lg)}
.ob-story__main{padding:3rem;display:flex;flex-direction:column;justify-content:center}
.ob-story__eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.ob-story__eyebrow span{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ob-accent)}
.ob-story__eyebrow .line{flex:1;height:1px;background:var(--ob-line)}
.ob-story__stub{position:relative;background:var(--ob-ocean-gradient);color:#fff;padding:3rem 2.25rem;display:flex;flex-direction:column;justify-content:center;gap:1.35rem}
.ob-story__stub::before,.ob-story__stub::after{content:'';position:absolute;left:-13px;width:26px;height:26px;border-radius:50%;background:var(--ob-white);z-index:2}
.ob-story__stub::before{top:-13px}
.ob-story__stub::after{bottom:-13px}
.ob-story__perf{position:absolute;left:0;top:0;bottom:0;width:2px;background-image:linear-gradient(rgba(255,255,255,.4) 60%,transparent 0);background-size:2px 10px;background-repeat:repeat-y}
.ob-story__fact{position:relative}
.ob-story__fact-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.3rem}
.ob-story__fact-val{font-family:var(--ob-font-display);font-size:1.35rem;font-weight:600;line-height:1.2}
@media(max-width:820px){.ob-story{grid-template-columns:1fr}.ob-story__stub::before,.ob-story__stub::after{display:none}.ob-story__perf{display:none}}

/* ── Flight path: horizontal milestone timeline ── */
.ob-flightpath{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem 1rem;padding:2.5rem 0 0}
.ob-flightpath::before{content:'';position:absolute;top:22px;left:6%;right:6%;height:0;border-top:2px dashed var(--ob-line);z-index:0}
.ob-flightpath__stop{position:relative;z-index:1;flex:1 1 140px;text-align:center;min-width:140px}
.ob-flightpath__dot{width:14px;height:14px;border-radius:50%;background:var(--ob-white);border:3px solid var(--ob-sunset);margin:0 auto .9rem;box-shadow:0 0 0 4px var(--ob-paper)}
.ob-flightpath__stop.is-end .ob-flightpath__dot{background:var(--ob-sunset);display:flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:.75rem;border-width:0;color:#fff}
.ob-flightpath__year{font-family:var(--ob-font-display);font-weight:600;font-size:1.1rem;color:var(--ob-ink);margin-bottom:.35rem}
.ob-flightpath__label{font-size:.82rem;color:var(--ob-ink-soft);line-height:1.6;max-width:180px;margin:0 auto}

/* ── Services as boarding-pass ticket stubs ── */
.ob-svc-ticket{background:var(--ob-white);border:1px solid var(--ob-line);border-radius:var(--ob-r);overflow:hidden;box-shadow:var(--ob-sh);transition:transform var(--ob-t-lg),box-shadow var(--ob-t-lg)}
.ob-svc-ticket:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--ob-sh-lg)}
.ob-svc-ticket__top{display:flex;align-items:center;gap:1rem;padding:1.5rem 1.5rem 1.25rem}
.ob-svc-ticket__icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.ob-svc-ticket__route{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ob-ink-soft)}
.ob-svc-ticket__title{font-size:1.02rem;font-weight:700;color:var(--ob-dark);margin-top:.2rem}
.ob-svc-ticket__perf{position:relative;height:0;border-top:2px dashed var(--ob-line);margin:0 1.5rem}
.ob-svc-ticket__perf::before,.ob-svc-ticket__perf::after{content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--ob-paper)}
.ob-svc-ticket__perf::before{left:-1.5rem}
.ob-svc-ticket__perf::after{right:-1.5rem}
.ob-svc-ticket__bottom{padding:1.35rem 1.5rem 1.6rem}
.ob-svc-ticket__desc{font-size:.88rem;color:var(--ob-ink-soft);line-height:1.8}

/* ── Why-us: passport stamp grid ── */
.ob-stamp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.25rem 1.5rem}
.ob-stamp{position:relative;aspect-ratio:1;border-radius:50%;border:2px solid var(--ob-stamp-c,var(--ob-ocean-deep));color:var(--ob-stamp-c,var(--ob-ocean-deep));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;transform:rotate(var(--r,-3deg));transition:transform var(--ob-t-lg)}
.ob-stamp:hover{transform:rotate(0deg) scale(1.04)}
.ob-stamp::before{content:'';position:absolute;inset:7px;border-radius:50%;border:1px dashed var(--ob-stamp-c,var(--ob-ocean-deep));opacity:.55}
.ob-stamp__icon{font-size:1.4rem;margin-bottom:.5rem}
.ob-stamp__title{font-family:var(--ob-font-display);font-weight:600;font-size:.92rem;line-height:1.25;margin-bottom:.35rem}
.ob-stamp__desc{font-size:.72rem;line-height:1.55;opacity:.85}
@media(max-width:640px){.ob-stamp{padding:1.1rem}.ob-stamp__desc{display:none}}

/* ================================================================
   Services / Tours listing — boarding-pass motif (see about page).
   ================================================================ */

/* ── Type filter tabs → gate selector (auto-numbered via CSS counter) ── */
.ob-gate-tabs{counter-reset:ob-gate}
.ob-gate-tabs .ob-type-tab::before{counter-increment:ob-gate;content:"GATE " counter(ob-gate) " ";font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--ob-ink-soft);opacity:.55;margin-right:.4rem}
.ob-gate-tabs .ob-type-tab.active::before{color:var(--ob-sunset)}

/* ── Listing card: boarding-pass ticket ── */
.ob-lticket{display:flex;flex-direction:column;background:var(--ob-white);border:1px solid var(--ob-line);border-radius:var(--ob-r-xl);overflow:hidden;box-shadow:var(--ob-sh);transition:transform var(--ob-t-lg),box-shadow var(--ob-t-lg)}
.ob-lticket:hover{transform:translateY(-6px) rotate(-.35deg);box-shadow:var(--ob-sh-lg)}
.ob-lticket__img-link{display:block;text-decoration:none}
.ob-lticket__img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ob-paper-2)}
.ob-lticket__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ob-lticket:hover .ob-lticket__img img{transform:scale(1.06)}
.ob-lticket__placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.75rem;background:var(--ob-primary-light)}
.ob-lticket__type{position:absolute;top:.9rem;left:-.4rem;background:var(--ob-ink);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:0 4px 4px 0;transform:rotate(-3deg);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.ob-lticket__perf{position:relative;height:0;border-top:2px dashed var(--ob-line);margin:0 0}
.ob-lticket__perf::before,.ob-lticket__perf::after{content:'';position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--ob-paper-2)}
.ob-lticket__perf::before{left:-9px}
.ob-lticket__perf::after{right:-9px}
.ob-lticket__body{padding:1.375rem 1.5rem 1.5rem;display:flex;flex-direction:column;flex:1}
.ob-lticket__title{font-size:1.02rem;font-weight:700;color:var(--ob-dark);margin-bottom:.5rem;line-height:1.3}
.ob-lticket__title a{color:inherit}
.ob-lticket:hover .ob-lticket__title{color:var(--ob-ocean-deep)}
.ob-lticket__meta{display:flex;align-items:center;gap:1rem;font-size:.8rem;color:var(--ob-ink-soft);margin-bottom:.75rem;flex-wrap:wrap}
.ob-lticket__meta-item{display:inline-flex;align-items:center;gap:.3rem}
.ob-lticket__meta-item .ob-svg-icon{width:.85rem;height:.85rem;color:var(--ob-ocean-deep)}
.ob-lticket__rating{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:var(--ob-sunset-deep)}
.ob-lticket__rating .ob-svg-icon{width:.85rem;height:.85rem}
.ob-lticket__desc{font-size:.875rem;color:var(--ob-ink-soft);line-height:1.65;margin-bottom:1.1rem;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ob-lticket__foot{padding-top:.9rem;border-top:1px dashed var(--ob-line);margin-top:auto}
.ob-lticket__apply-btn{width:100%;justify-content:center}
@media(prefers-reduced-motion:reduce){.ob-lticket,.ob-lticket__img img,.ob-lticket__title{transition:none}.ob-lticket:hover{transform:none}}