/* ==========================================================================
   Oceanbeat Lisbon — design system
   Every value that matters is a token in :root. Change a token and the whole
   site follows. Elementor's Global Colours and Fonts are seeded from these on
   activation, so the admin can restyle from Site Settings instead of here.
   ========================================================================== */

:root{
  /* Palette — taken from the logo: its navy (#001848) and its red (#B40000). */
  --ob-midnight:#08183C;
  --ob-ink:#101F38;
  --ob-ink-soft:#5A6A80;
  --ob-ink-faint:#8994A6;
  --ob-ivory:#FAF7F2;
  --ob-ivory-warm:#F3EDE4;
  --ob-surface:#FFFFFF;
  --ob-panel:#EAECF2;
  --ob-accent:#C21118;
  --ob-accent-strong:#9E0E14;
  --ob-accent-on-dark:#E8524A;
  --ob-line:rgba(8,24,60,.14);
  --ob-line-soft:rgba(8,24,60,.08);
  --ob-line-card:#CBD3DC;
  --ob-line-light:rgba(250,247,242,.18);
  --ob-line-light-soft:rgba(250,247,242,.10);

  /* Type */
  --ob-font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ob-font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --ob-fs-micro:0.6875rem;
  --ob-fs-2xs:0.75rem;
  --ob-fs-sm:0.9375rem;
  --ob-fs-base:1.0625rem;
  --ob-fs-md:1.1875rem;
  --ob-fs-lg:1.375rem;
  --ob-fs-title:clamp(1.5rem,2.2vw,1.875rem);
  --ob-fs-heading:clamp(2rem,4vw,2.875rem);
  --ob-fs-display:clamp(2.25rem,4.6vw,3.25rem);
  --ob-fs-hero:clamp(2.75rem,6.4vw,4.75rem);

  --ob-lh-display:1.08;
  --ob-lh-snug:1.45;
  --ob-lh-normal:1.75;
  --ob-ls-label:0.22em;
  --ob-ls-button:0.18em;

  /* All-sans system. Both families are wide and set on a large x-height, so
     the body no longer needs a hairline weight to look elegant. Headings carry
     their presence at 500 instead: a sans at 400 goes limp at hero sizes where
     a serif would still have held the line. --ob-fw-display drives every piece
     of display type, so one value re-tunes all of it. */
  --ob-fw-light:400;
  --ob-fw-display:500;
  --ob-fw-medium:500;

  /* Space */
  --ob-space-1:0.25rem;
  --ob-space-2:0.5rem;
  --ob-space-3:0.75rem;
  --ob-space-4:1rem;
  --ob-space-5:1.5rem;
  --ob-space-6:2rem;
  --ob-space-7:3rem;
  --ob-space-8:4rem;
  --ob-space-9:6rem;
  --ob-section-y:clamp(5rem,9vw,8.5rem);

  /* Shape */
  --ob-radius-xs:8px;
  --ob-radius-sm:12px;
  --ob-radius-pill:999px;

  --ob-shadow-soft:0 30px 70px rgba(5,15,40,.10);
  --ob-shadow-lift:0 40px 90px rgba(5,15,40,.16);

  --ob-ease:cubic-bezier(.22,.61,.36,1);
  --ob-dur:400ms;
  --ob-dur-slow:900ms;

  /* Component-level defaults, overridable per widget from Elementor */
  --ob-card-media-h:242px;
  --ob-avatar-size:46px;
  --ob-avatar-overlap:0.13;
  --ob-header-h:108px;
}

/* --- Base ---------------------------------------------------------------- */
body{
  margin:0;
  background:var(--ob-ivory);
  color:var(--ob-ink);
  font-family:var(--ob-font-sans);
  font-size:var(--ob-fs-base);
  font-weight:var(--ob-fw-light);
  line-height:var(--ob-lh-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit;text-decoration:none;transition:color var(--ob-dur) var(--ob-ease)}

:focus-visible{outline:1px solid var(--ob-accent);outline-offset:4px}

::selection{background:var(--ob-accent);color:var(--ob-ivory)}

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

.screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.ob-skip-link:focus{
  position:fixed;top:12px;left:12px;
  width:auto;height:auto;clip:auto;
  z-index:2000;
  padding:var(--ob-space-3) var(--ob-space-5);
  background:var(--ob-midnight);color:var(--ob-ivory);
  border-radius:var(--ob-radius-xs);
}

/* --- Typography ---------------------------------------------------------- */
h1,h2,h3,h4,.ob-heading{
  margin:0;
  font-family:var(--ob-font-display);
  font-weight:var(--ob-fw-display);
  line-height:var(--ob-lh-display);
  letter-spacing:-.022em;
  text-wrap:balance;
}
.ob-heading em,h1 em,h2 em,h3 em{font-style:italic;font-weight:var(--ob-fw-display)}

p{margin:0}

.ob-eyebrow{
  display:block;
  color:var(--ob-accent);
  font-family:var(--ob-font-sans);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  line-height:1;
  text-transform:uppercase;
}

.ob-rule{
  width:56px;height:1px;
  border:0;margin:0;
  background:var(--ob-accent);
  opacity:.9;
}

.ob-lead{
  max-width:46ch;
  color:var(--ob-ink-soft);
  font-size:var(--ob-fs-md);
  line-height:var(--ob-lh-snug);
}

.ob-center{text-align:center;margin-inline:auto}

.ob-prose p{margin-bottom:var(--ob-space-5);color:var(--ob-ink-soft)}
.ob-prose p:last-child{margin-bottom:0}
.ob-prose h2,.ob-prose h3{margin:var(--ob-space-7) 0 var(--ob-space-4)}
.ob-prose a{color:var(--ob-accent);text-decoration:underline;text-underline-offset:3px}

/* --- Layout -------------------------------------------------------------- */
.ob-container{max-width:1200px;margin-inline:auto;padding-inline:var(--ob-space-6)}
.ob-container--narrow{max-width:820px}
.ob-section{padding-block:var(--ob-section-y)}
.ob-section--tight{padding-block:var(--ob-space-8)}

.ob-section-header{
  display:flex;
  flex-direction:column;
  gap:var(--ob-space-5);
  max-width:42rem;
}
.ob-section-header.is-center{align-items:center;text-align:center;margin-inline:auto}
.ob-section-header.is-left{align-items:flex-start;text-align:left}
.ob-section-header.is-on-dark{color:var(--ob-ivory)}
.ob-section-header.is-on-dark .ob-eyebrow,
.ob-section-header.is-on-dark .ob-rule{color:var(--ob-accent-on-dark);background-color:var(--ob-accent-on-dark)}
.ob-section-header.is-on-dark .ob-rule{background:var(--ob-accent-on-dark)}
.ob-section-header.is-on-dark .ob-lead{color:rgba(250,247,242,.8)}

/* --- Buttons ------------------------------------------------------------- */
.ob-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--ob-space-3);
  padding:1.125rem 2.375rem;
  border:1px solid transparent;
  border-radius:var(--ob-radius-xs);
  font-family:var(--ob-font-sans);
  font-size:var(--ob-fs-2xs);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-button);
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--ob-dur) var(--ob-ease),
             border-color var(--ob-dur) var(--ob-ease),
             color var(--ob-dur) var(--ob-ease);
}
.ob-btn--sm{padding:0.9375rem 1.75rem}

.ob-btn--solid{background:var(--ob-midnight);color:var(--ob-ivory)}
.ob-btn--solid:hover,.ob-btn--solid:focus-visible{background:var(--ob-accent);color:var(--ob-ivory)}

.ob-btn--accent{background:var(--ob-accent);color:var(--ob-ivory)}
.ob-btn--accent:hover,.ob-btn--accent:focus-visible{background:var(--ob-accent-strong);color:var(--ob-ivory)}

.ob-btn--line{border-color:var(--ob-line);color:var(--ob-ink)}
.ob-btn--line:hover{border-color:var(--ob-midnight);background:var(--ob-midnight);color:var(--ob-ivory)}

.ob-btn--line-light{border-color:var(--ob-line-light);color:var(--ob-ivory)}
.ob-btn--line-light:hover,.ob-btn--line-light:focus-visible{border-color:var(--ob-ivory);background:var(--ob-ivory);color:var(--ob-midnight)}

.ob-link-arrow{
  display:inline-flex;
  align-items:center;
  gap:var(--ob-space-3);
  color:var(--ob-ink);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
.ob-link-arrow::after{
  content:"";
  width:28px;height:1px;
  background:var(--ob-accent);
  transition:width var(--ob-dur) var(--ob-ease);
}
.ob-link-arrow:hover{color:var(--ob-accent-strong)}
.ob-link-arrow:hover::after{width:44px}

/* --- Header -------------------------------------------------------------- */
.ob-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--ob-ivory);
  border-bottom:1px solid transparent;
  transition:background-color var(--ob-dur) var(--ob-ease),
             border-color var(--ob-dur) var(--ob-ease);
}
.ob-header.is-scrolled{
  background:rgba(250,247,242,.94);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--ob-line-soft);
}

.ob-header-inner{
  display:flex;
  align-items:center;
  gap:var(--ob-space-5);
  max-width:1200px;
  min-height:var(--ob-header-h);
  margin-inline:auto;
  padding:var(--ob-space-3) var(--ob-space-6);
  transition:min-height var(--ob-dur) var(--ob-ease);
}
.ob-header.is-scrolled .ob-header-inner{min-height:88px}

.ob-brand img,
.ob-brand .custom-logo{
  width:auto;
  height:62px;
  object-fit:contain;
  transition:height var(--ob-dur) var(--ob-ease);
}
.ob-header.is-scrolled .ob-brand img{height:50px}
.ob-brand-text{
  font-family:var(--ob-font-display);
  font-size:var(--ob-fs-lg);
  letter-spacing:.02em;
}

.ob-burger{
  display:none;
  margin-left:auto;
  padding:var(--ob-space-2);
  border:1px solid var(--ob-line);
  border-radius:var(--ob-radius-xs);
  background:transparent;
  color:var(--ob-ink);
  cursor:pointer;
}
.ob-burger-close{display:none}
.ob-burger[aria-expanded="true"] .ob-burger-open{display:none}
.ob-burger[aria-expanded="true"] .ob-burger-close{display:block}

.ob-menu{
  display:flex;
  align-items:center;
  gap:var(--ob-space-4);
  margin-left:auto;
}

.ob-nav-list{
  display:flex;
  align-items:center;
  gap:var(--ob-space-2);
  margin:0;
  padding:0;
  list-style:none;
}

.ob-nav-item{position:relative;display:flex;align-items:center}

.ob-nav-link{
  position:relative;
  display:inline-block;
  padding:var(--ob-space-2) var(--ob-space-3);
  color:var(--ob-ink);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
/* One hairline for every top-level item, dropdown parents included. */
.ob-nav-item > .ob-nav-link::after{
  content:"";
  position:absolute;
  left:var(--ob-space-3);
  right:var(--ob-space-3);
  bottom:2px;
  height:1px;
  background:var(--ob-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--ob-dur) var(--ob-ease);
}
.ob-nav-item > .ob-nav-link:hover::after,
.ob-nav-item > .ob-nav-link:focus-visible::after,
.ob-nav-item.is-active > .ob-nav-link::after{transform:scaleX(1)}

.ob-nav-caret{
  display:inline-flex;
  align-items:center;
  padding:var(--ob-space-2) var(--ob-space-1);
  margin-left:calc(var(--ob-space-3) * -1);
  border:0;
  background:transparent;
  color:inherit;
  opacity:.55;
  cursor:pointer;
  transition:transform var(--ob-dur) var(--ob-ease);
}
.ob-nav-caret[aria-expanded="true"]{transform:rotate(180deg)}

.ob-submenu{
  position:absolute;
  top:100%;
  left:0;
  z-index:20;
  min-width:230px;
  margin:0;
  padding:var(--ob-space-3) 0;
  list-style:none;
  background:var(--ob-ivory);
  border:1px solid var(--ob-line-card);
  border-radius:var(--ob-radius-sm);
  box-shadow:var(--ob-shadow-soft);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--ob-dur) var(--ob-ease),
             transform var(--ob-dur) var(--ob-ease),
             visibility var(--ob-dur);
}
.ob-nav-item:hover > .ob-submenu,
.ob-nav-item:focus-within > .ob-submenu,
.ob-nav-item.is-open > .ob-submenu{opacity:1;visibility:visible;transform:translateY(0)}

.ob-submenu-link{
  display:block;
  padding:var(--ob-space-3) var(--ob-space-5);
  color:var(--ob-ink);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
  transition:background-color var(--ob-dur) var(--ob-ease),color var(--ob-dur) var(--ob-ease);
}
.ob-submenu-link:hover,.ob-submenu-item.is-active .ob-submenu-link{background:var(--ob-ivory-warm);color:var(--ob-accent)}

/* --- Language switcher --------------------------------------------------- */
.ob-lang{position:relative}

.ob-lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:var(--ob-space-2);
  padding:var(--ob-space-2) var(--ob-space-3);
  border:1px solid var(--ob-line);
  border-radius:var(--ob-radius-xs);
  background:transparent;
  color:var(--ob-ink);
  font-family:var(--ob-font-sans);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color var(--ob-dur) var(--ob-ease),color var(--ob-dur) var(--ob-ease);
}
.ob-lang-toggle:hover,.ob-lang-toggle[aria-expanded="true"]{border-color:var(--ob-midnight);color:var(--ob-accent)}
.ob-lang-toggle .ob-icon--globe{opacity:.65}
.ob-lang-current{letter-spacing:var(--ob-ls-label)}
.ob-lang-caret{display:inline-flex;opacity:.55;transition:transform var(--ob-dur) var(--ob-ease)}
.ob-lang-toggle[aria-expanded="true"] .ob-lang-caret{transform:rotate(180deg)}

.ob-lang-menu{
  position:absolute;
  top:calc(100% + var(--ob-space-3));
  right:0;
  z-index:20;
  min-width:190px;
  margin:0;
  padding:var(--ob-space-3) 0;
  list-style:none;
  background:var(--ob-ivory);
  border:1px solid var(--ob-line-card);
  border-radius:var(--ob-radius-sm);
  box-shadow:var(--ob-shadow-soft);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--ob-dur) var(--ob-ease),
             transform var(--ob-dur) var(--ob-ease),
             visibility var(--ob-dur);
}
.ob-lang.is-open .ob-lang-menu{opacity:1;visibility:visible;transform:translateY(0)}

.ob-lang-item{
  /*
   * width:100% is what makes the <button> variant (shown before a translation
   * plugin supplies real URLs) fill the panel. border-box keeps the horizontal
   * padding inside that width — without it the row computes 190px + 2x24px and
   * spills 48px past the dropdown's right edge.
   */
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ob-space-4);
  width:100%;
  padding:var(--ob-space-3) var(--ob-space-5);
  border:0;
  background:transparent;
  color:var(--ob-ink);
  font-family:var(--ob-font-sans);
  font-size:var(--ob-fs-sm);
  font-weight:var(--ob-fw-light);
  text-align:left;
  cursor:pointer;
  transition:background-color var(--ob-dur) var(--ob-ease),color var(--ob-dur) var(--ob-ease);
}
.ob-lang-item:hover{background:var(--ob-ivory-warm);color:var(--ob-accent)}
.ob-lang-item.is-active,.ob-lang-item.is-active .ob-lang-code{color:var(--ob-accent)}
.ob-lang-code{
  color:var(--ob-ink-faint);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
}

/* --- Hero ---------------------------------------------------------------- */
.ob-hero{
  position:relative;
  display:grid;
  place-items:center;
  min-height:92vh;
  padding:var(--ob-space-9) var(--ob-space-6);
  overflow:hidden;
  background:var(--ob-midnight);
}
.ob-hero-media{
  position:absolute;
  inset:0;
  background-size:cover;
  background-repeat:no-repeat;
}
.ob-hero--zoom .ob-hero-media{animation:ob-drift 24s var(--ob-ease) forwards}
@keyframes ob-drift{from{transform:scale(1)}to{transform:scale(1.09)}}

.ob-hero-overlay{
  position:absolute;
  inset:0;
  /* Two layers: a centred pool behind the copy, plus a top-and-tail gradient.
     Bright photos are brightest exactly where the headline sits. */
  background:
    radial-gradient(70% 52% at 50% 42%,rgba(5,15,40,.72) 0%,rgba(5,15,40,.34) 60%,rgba(5,15,40,0) 100%),
    linear-gradient(180deg,rgba(5,15,40,.66) 0%,rgba(5,15,40,.42) 45%,rgba(5,15,40,.82) 100%);
}

.ob-hero-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ob-space-6);
  max-width:60rem;
  text-align:center;
  color:var(--ob-ivory);
}
.ob-hero-copy .ob-eyebrow{color:var(--ob-accent-on-dark)}
.ob-hero-copy .ob-heading{
  font-size:var(--ob-fs-hero);
  text-shadow:0 2px 30px rgba(5,15,40,.5);
}
.ob-hero-copy .ob-lead{
  max-width:38ch;
  color:rgba(250,247,242,.88);
  text-shadow:0 1px 16px rgba(5,15,40,.6);
}
.ob-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ob-space-4)}

/* --- Interior page band -------------------------------------------------- */
.ob-page-hero{
  position:relative;
  display:grid;
  place-items:center;
  padding:calc(var(--ob-space-9) + var(--ob-space-4)) var(--ob-space-6) var(--ob-space-9);
  background:var(--ob-midnight);
  background-size:cover;
  background-position:center;
  color:var(--ob-ivory);
  text-align:center;
  overflow:hidden;
}
.ob-page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(80% 120% at 50% 0%,rgba(21,42,85,.85) 0%,rgba(8,24,60,0) 70%);
}
.ob-page-hero--photo::after{background:rgba(5,15,40,.7)}
.ob-page-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ob-space-5);
  max-width:46rem;
}
.ob-page-hero .ob-eyebrow,.ob-page-hero .ob-rule{color:var(--ob-accent-on-dark)}
.ob-page-hero .ob-rule{background:var(--ob-accent-on-dark)}
.ob-page-hero .ob-heading{font-size:var(--ob-fs-display)}
.ob-page-hero .ob-lead{color:rgba(250,247,242,.78);margin-inline:auto}

.ob-crumbs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--ob-space-2);
  color:rgba(250,247,242,.55);
  font-size:var(--ob-fs-micro);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
.ob-crumbs a:hover{color:var(--ob-ivory)}
.ob-crumbs [aria-current]{color:var(--ob-accent-on-dark)}

/* --- Experience card ----------------------------------------------------- */
.ob-card{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(150px,.85fr);
  grid-template-rows:auto 1fr;
  height:100%;
  overflow:hidden;
  background:var(--ob-surface);
  border:1px solid var(--ob-line-card);
  border-radius:var(--ob-radius-sm);
  transition:transform var(--ob-dur) var(--ob-ease),box-shadow var(--ob-dur) var(--ob-ease);
}
.ob-card--lift:hover{transform:translateY(-4px);box-shadow:var(--ob-shadow-lift)}
.ob-card--wide{grid-template-columns:minmax(0,2fr) minmax(150px,.85fr)}
.ob-card--wide .ob-card-body{grid-column:1 / -1}

.ob-card-media{
  grid-column:1;
  grid-row:1;
  overflow:hidden;
  height:var(--ob-card-media-h);
  background:var(--ob-ivory-warm);
}
.ob-card-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--ob-dur-slow) var(--ob-ease)}
.ob-card--lift:hover .ob-card-media img{transform:scale(1.05)}

.ob-card-strip{
  grid-column:2;
  grid-row:1;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:var(--ob-space-2);
  height:var(--ob-card-media-h);
  padding:var(--ob-space-2);
  min-height:0;
  background:var(--ob-surface);
}
.ob-card-strip img{
  width:100%;height:100%;min-height:0;
  object-fit:cover;
  border-radius:var(--ob-radius-xs);
  opacity:.94;
  transition:opacity var(--ob-dur) var(--ob-ease);
}
.ob-card--lift:hover .ob-card-strip img{opacity:1}

.ob-card-body{
  grid-column:1;
  grid-row:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--ob-space-3);
  padding:var(--ob-space-5);
  background:var(--ob-panel);
}
.ob-card-title{font-size:var(--ob-fs-title)}
.ob-card-body p{color:var(--ob-ink-soft);font-size:var(--ob-fs-sm);line-height:var(--ob-lh-snug)}
.ob-card-body .ob-btn{margin-top:auto}

/* The split is a panel-colour change, not a rule — there is no divider line. */
.ob-card-action{
  grid-column:2;
  grid-row:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--ob-space-2);
  padding:var(--ob-space-5) var(--ob-space-3);
  background:var(--ob-surface);
  text-align:center;
}
.ob-card-action .ob-eyebrow{color:var(--ob-ink-faint)}
.ob-card-amount{
  font-family:var(--ob-font-display);
  font-size:var(--ob-fs-heading);
  font-weight:var(--ob-fw-display);
  line-height:1;
  color:var(--ob-accent);
}
.ob-card-note{
  color:var(--ob-ink-soft);
  font-size:var(--ob-fs-micro);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
.ob-card-action--details i,.ob-card-action--details svg{
  font-size:22px;width:22px;height:22px;
  color:var(--ob-accent);fill:currentColor;
  transition:transform var(--ob-dur) var(--ob-ease);
}
.ob-card-action-title{
  color:var(--ob-ink);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
.ob-card-action--details:hover .ob-card-action-title{color:var(--ob-accent)}
.ob-card-action--details:hover i,.ob-card-action--details:hover svg{transform:translateY(-2px)}

/* --- Promo band ---------------------------------------------------------- */
.ob-promo{
  padding-block:var(--ob-section-y);
  padding-inline:var(--ob-space-6);
  background:var(--ob-midnight);
  color:var(--ob-ivory);
  text-align:center;
}
.ob-promo-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ob-space-5);
  max-width:46rem;
  margin-inline:auto;
}
.ob-promo .ob-eyebrow{color:var(--ob-accent-on-dark)}
.ob-promo .ob-rule{background:var(--ob-accent-on-dark)}
.ob-promo .ob-heading{font-size:var(--ob-fs-display)}
.ob-promo .ob-heading em{display:block}
.ob-promo .ob-lead{color:rgba(250,247,242,.8);margin-inline:auto}
.ob-promo .ob-btn{margin-top:var(--ob-space-3)}

/* --- Gallery ------------------------------------------------------------- */
.ob-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ob-space-3)}
.ob-gallery-figure{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--ob-radius-sm);
  background:var(--ob-ivory-warm);
}
.ob-gallery img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;transition:transform 1.2s var(--ob-ease)}
.ob-gallery--zoom .ob-gallery-figure:hover img{transform:scale(1.06)}
.ob-gallery-figure::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,15,40,0) 55%,rgba(5,15,40,.42) 100%);
  opacity:0;
  transition:opacity var(--ob-dur) var(--ob-ease);
  pointer-events:none;
}
.ob-gallery--zoom .ob-gallery-figure:hover::after{opacity:1}

/* --- Trust row ----------------------------------------------------------- */
.ob-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--ob-space-8);
  padding-block:var(--ob-space-7);
}
.ob-trust--ruled{border-top:1px solid var(--ob-line);border-bottom:1px solid var(--ob-line)}
.ob-trust-copy{display:flex;flex-direction:column;gap:var(--ob-space-3)}
.ob-trust-copy strong{
  font-family:var(--ob-font-display);
  font-size:var(--ob-fs-lg);
  font-weight:var(--ob-fw-display);
  line-height:1;
}
.ob-rating{display:flex;align-items:center;gap:var(--ob-space-3)}
.ob-stars{display:inline-flex;gap:3px;color:var(--ob-accent);line-height:1}
.ob-review-count{
  color:var(--ob-ink-soft);
  font-size:var(--ob-fs-micro);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
a.ob-review-count:hover{color:var(--ob-accent)}

.ob-avatars{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.ob-avatars li{display:flex}
.ob-avatars li + li{margin-left:calc(var(--ob-avatar-size) * var(--ob-avatar-overlap) * -1)}
.ob-avatars img{
  width:var(--ob-avatar-size);
  height:var(--ob-avatar-size);
  border:2px solid var(--ob-ivory);
  border-radius:var(--ob-radius-pill);
  object-fit:cover;
  background:var(--ob-ivory-warm);
}

/* --- Steps --------------------------------------------------------------- */
.ob-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ob-space-4)}
.ob-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ob-space-4);
  height:100%;
  padding:var(--ob-space-4);
  text-align:center;
  color:inherit;
}
.ob-steps--divided .ob-step{border-left:1px solid var(--ob-line)}
.ob-steps--divided > :first-child .ob-step,
.ob-steps--divided > .ob-step:first-child{border-left:0}
.ob-step-index{
  font-family:var(--ob-font-display);
  font-size:var(--ob-fs-lg);
  line-height:1;
  color:var(--ob-accent);
}
.ob-step-icon{
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  border:1px solid var(--ob-line);
  border-radius:var(--ob-radius-pill);
  color:var(--ob-midnight);
  transition:border-color var(--ob-dur) var(--ob-ease),color var(--ob-dur) var(--ob-ease);
}
.ob-step-icon i,.ob-step-icon svg{font-size:22px;width:22px;height:22px;fill:currentColor}
.ob-step:hover .ob-step-icon{border-color:var(--ob-accent);color:var(--ob-accent)}
.ob-step h3{font-size:var(--ob-fs-lg);font-weight:var(--ob-fw-display)}
.ob-step p{max-width:22ch;color:var(--ob-ink-soft);font-size:var(--ob-fs-sm);line-height:var(--ob-lh-snug)}

/* --- Feature cards ------------------------------------------------------- */
.ob-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ob-space-5)}
.ob-feature{
  display:flex;
  flex-direction:column;
  gap:var(--ob-space-3);
  height:100%;
  padding:var(--ob-space-6);
  background:var(--ob-surface);
  border:1px solid var(--ob-line-card);
  border-radius:var(--ob-radius-sm);
}
.ob-feature-icon i,.ob-feature-icon svg{font-size:22px;width:22px;height:22px;color:var(--ob-accent);fill:currentColor}
.ob-feature h3{font-size:var(--ob-fs-lg);font-weight:var(--ob-fw-display)}
.ob-feature p{color:var(--ob-ink-soft);font-size:var(--ob-fs-sm);line-height:var(--ob-lh-snug)}

/* --- Credentials --------------------------------------------------------- */
.ob-credentials{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--ob-space-5);
  text-align:center;
}
.ob-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ob-space-7)}
.ob-badges img{width:auto;height:68px}
.ob-partner-note{
  color:var(--ob-ink-faint);
  font-size:var(--ob-fs-micro);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
  line-height:var(--ob-lh-snug);
}

/* --- Blog ---------------------------------------------------------------- */
.ob-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ob-space-6)}
.ob-post-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  background:var(--ob-surface);
  border:1px solid var(--ob-line-card);
  border-radius:var(--ob-radius-sm);
  transition:transform var(--ob-dur) var(--ob-ease),box-shadow var(--ob-dur) var(--ob-ease);
}
.ob-post-card:hover{transform:translateY(-4px);box-shadow:var(--ob-shadow-lift)}
.ob-post-media{display:block;overflow:hidden;aspect-ratio:16 / 10;background:var(--ob-ivory-warm)}
.ob-post-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--ob-dur-slow) var(--ob-ease)}
.ob-post-card:hover .ob-post-media img{transform:scale(1.05)}
.ob-post-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--ob-space-3);
  flex:1;
  padding:var(--ob-space-6);
}
.ob-post-body h3{font-size:var(--ob-fs-lg);font-weight:var(--ob-fw-display)}
.ob-post-body p{color:var(--ob-ink-soft);font-size:var(--ob-fs-sm);line-height:var(--ob-lh-snug)}
.ob-post-body .ob-link-arrow{margin-top:auto;padding-top:var(--ob-space-3)}

.ob-figure{margin:0;border-radius:var(--ob-radius-sm);overflow:hidden}

.navigation.pagination{margin-top:var(--ob-space-8);text-align:center}
.navigation.pagination .page-numbers{
  display:inline-block;
  padding:var(--ob-space-2) var(--ob-space-4);
  color:var(--ob-ink-soft);
  font-size:var(--ob-fs-micro);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
.navigation.pagination .current{color:var(--ob-accent)}

/* --- Contact ------------------------------------------------------------- */
.ob-contact-details{display:flex;flex-direction:column}
.ob-contact-row{
  display:flex;
  gap:var(--ob-space-4);
  padding-block:var(--ob-space-5);
  border-bottom:1px solid var(--ob-line-soft);
}
.ob-contact-row:first-child{padding-top:0}
.ob-contact-row:last-child{border-bottom:0}
.ob-contact-icon i,.ob-contact-icon svg{
  font-size:22px;width:22px;height:22px;
  color:var(--ob-accent);fill:currentColor;
}
.ob-contact-row h3{
  font-family:var(--ob-font-sans);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
  color:var(--ob-ink-faint);
}
.ob-contact-row p{margin-top:var(--ob-space-2);color:var(--ob-ink);font-size:var(--ob-fs-sm)}
.ob-contact-row a:hover{color:var(--ob-accent)}

.ob-form-card{
  padding:var(--ob-space-7);
  background:var(--ob-surface);
  border:1px solid var(--ob-line-card);
  border-radius:var(--ob-radius-sm);
}
.ob-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ob-space-5)}
.ob-field{display:flex;flex-direction:column;gap:var(--ob-space-2);margin:0}
.ob-field--full{grid-column:1 / -1}
.ob-field--half{grid-column:span 2}
.ob-field--quarter{grid-column:span 1}
.ob-field label{
  color:var(--ob-ink-faint);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
.ob-field input,.ob-field select,.ob-field textarea{
  width:100%;
  padding:var(--ob-space-3) 0;
  border:0;
  border-bottom:1px solid var(--ob-line);
  border-radius:0;
  background:transparent;
  color:var(--ob-ink);
  font-family:var(--ob-font-sans);
  font-size:var(--ob-fs-base);
  font-weight:var(--ob-fw-light);
  outline:none;
  transition:border-color var(--ob-dur) var(--ob-ease);
}
.ob-field textarea{resize:vertical;min-height:120px}
.ob-field input:focus,.ob-field select:focus,.ob-field textarea:focus{border-bottom-color:var(--ob-accent)}
.ob-form-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--ob-space-5)}
.ob-form-note{color:var(--ob-ink-faint);font-size:var(--ob-fs-micro);line-height:var(--ob-lh-snug)}
.ob-form-error{
  margin-bottom:var(--ob-space-5);
  padding:var(--ob-space-4);
  border-radius:var(--ob-radius-xs);
  background:rgba(194,17,24,.08);
  color:var(--ob-accent-strong);
  font-size:var(--ob-fs-sm);
}
.ob-form-sent{
  display:flex;
  align-items:center;
  gap:var(--ob-space-3);
  padding:var(--ob-space-6);
  background:var(--ob-surface);
  border:1px solid var(--ob-line-card);
  border-radius:var(--ob-radius-sm);
  font-size:var(--ob-fs-sm);
}
.ob-form-sent .ob-icon{color:var(--ob-accent);flex:none}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.ob-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Footer -------------------------------------------------------------- */
.ob-footer{
  padding-top:var(--ob-space-9);
  padding-bottom:var(--ob-space-6);
  background:var(--ob-midnight);
  color:rgba(250,247,242,.72);
  font-size:var(--ob-fs-sm);
}
.ob-footer-inner{max-width:1200px;margin-inline:auto;padding-inline:var(--ob-space-6)}
.ob-footer-grid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:var(--ob-space-8)}
.ob-footer h2{
  margin-bottom:var(--ob-space-5);
  color:var(--ob-accent-on-dark);
  font-family:var(--ob-font-sans);
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
}
.ob-footer a:hover{color:var(--ob-ivory)}
.ob-footer-links{margin:0;padding:0;list-style:none}
.ob-footer-links li{margin-bottom:var(--ob-space-4)}

.ob-social{display:flex;flex-wrap:wrap;gap:var(--ob-space-3);margin:0;padding:0;list-style:none}
.ob-social a{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid var(--ob-line-light);
  border-radius:var(--ob-radius-pill);
  color:var(--ob-ivory);
  transition:border-color var(--ob-dur) var(--ob-ease),
             background-color var(--ob-dur) var(--ob-ease),
             color var(--ob-dur) var(--ob-ease);
}
.ob-social a:hover{border-color:var(--ob-accent);background:var(--ob-accent);color:var(--ob-ivory)}

.ob-newsletter{display:flex;align-items:flex-end;gap:var(--ob-space-4);max-width:360px}
.ob-newsletter input{
  min-width:0;flex:1;
  padding:var(--ob-space-3) 0;
  border:0;
  border-bottom:1px solid var(--ob-line-light);
  background:transparent;
  color:var(--ob-ivory);
  font-family:inherit;
  font-size:var(--ob-fs-sm);
  font-weight:var(--ob-fw-light);
  outline:none;
  transition:border-color var(--ob-dur) var(--ob-ease);
}
.ob-newsletter input::placeholder{color:rgba(250,247,242,.45)}
.ob-newsletter input:focus{border-bottom-color:var(--ob-accent-on-dark)}
.ob-newsletter button{
  padding:var(--ob-space-3) 0;
  border:0;
  border-bottom:1px solid var(--ob-accent-on-dark);
  background:transparent;
  color:var(--ob-accent-on-dark);
  font-family:inherit;
  font-size:var(--ob-fs-micro);
  font-weight:var(--ob-fw-medium);
  letter-spacing:var(--ob-ls-label);
  text-transform:uppercase;
  cursor:pointer;
}
.ob-newsletter button:hover{color:var(--ob-ivory)}
.ob-newsletter-thanks{
  display:flex;
  align-items:center;
  gap:var(--ob-space-3);
  color:var(--ob-accent-on-dark);
}

.ob-footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--ob-space-3);
  margin-top:var(--ob-space-8);
  padding-top:var(--ob-space-5);
  border-top:1px solid var(--ob-line-light-soft);
  color:rgba(250,247,242,.45);
  font-size:var(--ob-fs-micro);
  letter-spacing:.06em;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .ob-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:991px){
  .ob-burger{display:block}

  .ob-menu{
    position:absolute;
    left:0;right:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:var(--ob-space-3);
    margin:0;
    padding:var(--ob-space-5) var(--ob-space-6) var(--ob-space-6);
    background:var(--ob-ivory);
    border-bottom:1px solid var(--ob-line-soft);
    display:none;
  }
  .ob-menu.is-open{display:flex}

  .ob-header-inner{position:relative;flex-wrap:wrap;min-height:80px}
  .ob-header.is-scrolled .ob-header-inner{min-height:76px}
  .ob-brand img,.ob-header.is-scrolled .ob-brand img{height:48px}

  .ob-nav-list{flex-direction:column;align-items:stretch;gap:0}
  .ob-nav-item{flex-wrap:wrap;justify-content:space-between}
  .ob-nav-link{padding:var(--ob-space-3) 0;font-size:var(--ob-fs-2xs)}
  .ob-nav-item > .ob-nav-link::after{display:none}
  .ob-nav-caret{margin-left:0}

  .ob-submenu{
    position:static;
    width:100%;
    min-width:0;
    padding:0 0 var(--ob-space-2);
    border:0;
    background:transparent;
    box-shadow:none;
    opacity:1;
    visibility:hidden;
    height:0;
    overflow:hidden;
    transform:none;
  }
  .ob-nav-item.is-open > .ob-submenu{visibility:visible;height:auto}
  .ob-nav-item:hover > .ob-submenu:not(.is-open){visibility:hidden;height:0}
  .ob-submenu-link{padding:var(--ob-space-3) 0 var(--ob-space-3) var(--ob-space-4)}

  .ob-lang{width:100%}
  .ob-lang-toggle{width:100%;justify-content:space-between}
  .ob-lang-menu{position:static;width:100%;opacity:1;visibility:hidden;height:0;padding:0;border:0;background:transparent;box-shadow:none;transform:none;overflow:hidden}
  .ob-lang.is-open .ob-lang-menu{visibility:visible;height:auto;padding-block:var(--ob-space-2)}
  .ob-lang-item{padding-inline:0}

  .ob-header-cta{width:100%}
}

@media (max-width:767px){
  .ob-container,.ob-header-inner,.ob-footer-inner{padding-inline:var(--ob-space-5)}
  .ob-hero{min-height:88vh;padding-inline:var(--ob-space-5)}
  .ob-hero-actions{flex-direction:column;align-self:stretch}
  .ob-hero-actions .ob-btn{width:100%}

  .ob-card{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  .ob-card-media,.ob-card-strip,.ob-card-body,.ob-card-action{grid-column:1}
  .ob-card-media{grid-row:1;height:auto;aspect-ratio:16 / 10}
  .ob-card-strip{grid-row:2;grid-template-rows:none;grid-template-columns:1fr 1fr;height:112px;padding:var(--ob-space-2) var(--ob-space-2) 0}
  .ob-card-body{grid-row:3}
  .ob-card-action{grid-row:4;flex-direction:row;justify-content:space-between;padding:var(--ob-space-4) var(--ob-space-5);text-align:left}

  .ob-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ob-space-2)}
  .ob-post-grid{grid-template-columns:1fr}
  .ob-features{grid-template-columns:1fr}
  .ob-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-steps--divided .ob-step{border-left:0}

  .ob-trust{flex-direction:column;gap:var(--ob-space-5);text-align:center}
  .ob-trust-copy{align-items:center}
  .ob-rating{justify-content:center}

  .ob-form-card{padding:var(--ob-space-5)}
  .ob-form-grid{grid-template-columns:1fr}
  .ob-field--half,.ob-field--quarter{grid-column:1 / -1}

  .ob-footer-grid{grid-template-columns:1fr;gap:var(--ob-space-7)}
  .ob-newsletter{max-width:none}
  .ob-badges{gap:var(--ob-space-5)}
  .ob-badges img{height:54px}
}
