/* ==========================================================
   OSTA SEO landing pages
   Loaded only on the Osta landing template.

   The layout is the Benjima SEO page: hero banner, sticky split
   columns, parallax band, pinned horizontal carousel, masonry
   gallery, sticky FAQ. The colour is yours.

   Navy carries the structure: every dark surface, every solid
   button, the tables, the rules. Orange carries the actions and
   nothing else, which is what keeps it reading as a signal. White
   and near black do the rest.

   Palette
     navy #1A2B4A . navy-2 #22365C . navy-3 #14223C . ink #111318
     orange #F47920 . orange-dk #D96810 . orange-lt #FF9A4D
     bg #F7F7F6 . surface #FFFFFF . surface-2 #EFF1F4 . line #E2E5EA
     muted #5E6B7E . on-dark #C7D0DC . on-dark-muted #93A1B4

   Every value is a variable, so one edit at the top moves the
   whole page. Names are prefixed --o- so they cannot collide with
   anything the theme declares.
   ========================================================== */

.oseo{
	/* brand */
	--o-navy:#1A2B4A;
	--o-navy-2:#22365C;
	--o-navy-3:#14223C;
	--o-ink:#111318;
	--o-orange:#F47920;
	--o-orange-dk:#D96810;
	--o-orange-lt:#FF9A4D;

	/* neutrals */
	--o-bg:#F7F7F6;
	--o-surface:#FFFFFF;
	--o-surface-2:#EFF1F4;
	--o-line:#E2E5EA;
	--o-muted:#5E6B7E;

	/* on dark */
	--o-on-dark:#C7D0DC;
	--o-on-dark-muted:#93A1B4;
	--o-on-dark-line:rgba(255,255,255,.14);

	/* type */
	--o-display:'Archivo',system-ui,sans-serif;
	--o-body:'Inter',system-ui,sans-serif;
	--o-mono:'IBM Plex Mono',ui-monospace,monospace;

	/* shape and motion */
	--o-r:24px;
	--o-r-lg:34px;
	--o-pill:999px;
	--o-ease:cubic-bezier(.22,1,.36,1);

	/* the sticky offset. Raise it if your header is taller. */
	--o-top:110px;
}

/* ==========================================================
   1. BASE
   ========================================================== */
.oseo,.oseo *{box-sizing:border-box}
.oseo{background:var(--o-bg);color:var(--o-ink);font-family:var(--o-body);font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip}
.oseo img{max-width:100%;display:block;height:auto}
.oseo a{color:inherit;text-decoration:none}
.oseo h1,.oseo h2,.oseo h3,.oseo h4{font-family:var(--o-display);font-weight:800;letter-spacing:-.035em;margin:0;line-height:1.06;color:var(--o-ink)}
.oseo p{margin:0}
.oseo button{font-family:inherit}
.oseo ::selection{background:var(--o-orange);color:#fff}
.oseo :focus-visible{outline:3px solid var(--o-orange);outline-offset:3px;border-radius:4px}

.oseo .wrap-o{width:min(1280px,92vw);margin-inline:auto}
.oseo .narrow-o{width:min(880px,92vw);margin-inline:auto}
.oseo .sec-o{padding:clamp(70px,8.5vw,132px) 0}
.oseo .tint-o{background:var(--o-surface-2)}

.oseo .ic-o{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the eyebrow is a mono pill */
.oseo .eyebrow-o{display:inline-flex;align-items:center;gap:9px;font-family:var(--o-mono);
	font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--o-navy);
	background:rgba(244,121,32,.16);border-radius:var(--o-pill);padding:7px 16px;margin-bottom:18px}

.oseo .h-xl-o{font-family:var(--o-display);font-weight:900;letter-spacing:-.048em;line-height:.98;font-size:clamp(38px,6.2vw,80px)}
.oseo .h-lg-o{font-family:var(--o-display);font-weight:800;line-height:1.06;font-size:clamp(28px,3.9vw,52px);letter-spacing:-.04em}
.oseo .h-md-o{font-family:var(--o-display);font-weight:800;line-height:1.06;font-size:clamp(21px,2.5vw,32px);letter-spacing:-.03em}
.oseo .lead-o{color:var(--o-muted);font-weight:300;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.82}
.oseo .head-o{max-width:62ch}
.oseo .head-o.center-o{margin-inline:auto;text-align:center}

/* ---------- buttons ---------- */
.oseo .btn-o{display:inline-flex;align-items:center;gap:11px;border:0;cursor:pointer;border-radius:var(--o-pill);padding:16px 30px;
	font-family:var(--o-display);font-weight:700;font-size:14px;transition:.4s var(--o-ease);white-space:nowrap}
.oseo .btn-o .ic-o{width:14px;height:14px;transition:transform .3s var(--o-ease)}
.oseo .btn-o:hover .ic-o{transform:translateX(4px)}

/* orange is the call to action, and only that */
.oseo .btn--cta-o{background:var(--o-orange);color:#fff}
.oseo .btn--cta-o:hover{background:var(--o-orange-dk);transform:translateY(-3px);box-shadow:0 20px 44px -20px rgba(244,121,32,.8)}
.oseo .btn--navy-o{background:var(--o-navy);color:#fff}
.oseo .btn--navy-o:hover{transform:translateY(-3px);box-shadow:0 26px 60px -32px rgba(26,43,74,.7)}
.oseo .btn--line-o{background:transparent;border:2px solid rgba(255,255,255,.42);color:#fff}
.oseo .btn--line-o:hover{background:#fff;border-color:#fff;color:var(--o-navy)}
.oseo .btn--outline-o{background:transparent;border:2px solid rgba(26,43,74,.2);color:var(--o-navy)}
.oseo .btn--outline-o:hover{background:var(--o-navy);border-color:var(--o-navy);color:#fff}
.oseo .btn-row-o{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.oseo .btn-row-o.center-o{justify-content:center}

/* visible by default. The reveal only arms itself once the script has run,
   so a JS error can never leave the page blank. */
.oseo .rv-o{opacity:1;transform:none}
.oseo.js-o .rv-o{opacity:0;transform:translateY(26px);transition:opacity .85s var(--o-ease),transform .85s var(--o-ease)}
.oseo.js-o .rv-o.in-o{opacity:1;transform:none}

/* fixed chrome sits outside .oseo, so it carries its own colours */
.progress-o{position:fixed;top:0;left:0;height:3px;width:0;z-index:900;border-radius:0 999px 999px 0;
	background:linear-gradient(90deg,#1A2B4A 0%,#F47920 60%,#FF9A4D 100%)}
.totop-o{position:fixed;right:22px;bottom:22px;z-index:840;width:48px;height:48px;border-radius:999px;border:0;
	background:#F47920;color:#fff;cursor:pointer;display:grid;place-items:center;
	opacity:0;visibility:hidden;transform:translateY(12px);transition:.4s cubic-bezier(.22,1,.36,1);box-shadow:0 16px 34px -16px rgba(17,19,24,.6)}
.totop-o svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.totop-o.on-o{opacity:1;visibility:visible;transform:none}
.totop-o:hover{transform:translateY(-4px)}

/* ==========================================================
   2. HERO
   ========================================================== */
.oseo .hero-o{position:relative;min-height:min(92svh,860px);display:grid;place-items:center;text-align:center;overflow:hidden;
	background:var(--o-navy-3);color:#fff;padding:clamp(24px,14vw,40px) 0 clamp(30px,7vw,50px)}
.oseo .hero-o h1,.oseo .hero-o h2{color:#fff}
.oseo .hero-o .eyebrow-o{color:var(--o-orange-lt);background:rgba(244,121,32,.18)}
.oseo .hero-bg-o{position:absolute;inset:0;z-index:0;will-change:transform}
.oseo .hero-bg-o img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:grayscale(.25) contrast(1.05)}
.oseo .hero-veil-o{position:absolute;inset:0;z-index:1;
	background:
		radial-gradient(1000px 620px at 50% 100%,rgba(26,43,74,.72),transparent 66%),
		radial-gradient(900px 600px at 50% 2%,rgba(17,19,24,.66),transparent 62%),
		linear-gradient(180deg,rgba(20,34,60,.94) 0%,rgba(20,34,60,.58) 44%,rgba(17,19,24,.96) 100%)}
.oseo .hero-grid-o{position:absolute;inset:0;z-index:2;opacity:.12;
	background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
	background-size:88px 88px;-webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000,transparent 74%);mask-image:radial-gradient(ellipse at 50% 42%,#000,transparent 74%)}
.oseo .hero-inner-o{position:relative;z-index:5;width:100%;padding-top:clamp(40px,5vw,72px)}
.oseo .crumb-o{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
	font-family:var(--o-mono);font-size:11.5px;letter-spacing:.1em;color:var(--o-on-dark-muted);margin-bottom:30px}
.oseo .crumb-o a:hover{color:var(--o-orange-lt)}
.oseo .crumb-o .ic-o{width:9px;height:9px;opacity:.5}
.oseo .crumb-o span[aria-current]{color:#fff}
.oseo .hero-o h1{max-width:16ch;margin-inline:auto}
.oseo .hero-o h1 .ln-o{display:block;overflow:hidden}
.oseo .hero-o h1 .ln-o>span{display:block}
.oseo.js-o .hero-o h1 .ln-o>span{transform:translateY(108%);animation:riseO 1s var(--o-ease) forwards}
@keyframes riseO{to{transform:translateY(0)}}
.oseo .hero-deck-o{margin:28px auto 0;max-width:58ch;color:var(--o-on-dark);font-weight:300;font-size:clamp(16px,1.3vw,19px);line-height:1.8}
.oseo .scroll-hint-o{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:6;color:var(--o-on-dark-muted);
	font-family:var(--o-mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:12px}
.oseo .scroll-hint-o i{width:2px;height:52px;background:linear-gradient(180deg,var(--o-orange),transparent);animation:hintO 2s infinite}
@keyframes hintO{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ==========================================================
   3. SPLIT
   ========================================================== */
.oseo .split-o{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5.5vw,88px);align-items:center}
.oseo .split-o.rev-o .split-media-o{order:-1}
.oseo .split-media-o{position:relative;margin:0;overflow:hidden;background:var(--o-surface-2)}
.oseo .split-media-o img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.3s var(--o-ease)}
.oseo .split-media-o:hover img{transform:scale(1.05)}

/* Sticky media, desktop only. Three things have to hold: no ancestor may
   use overflow hidden (this file uses overflow-x clip, which does not
   create a scroll container), the grid must not stretch the item, and the
   picture has to be shorter than the viewport. If sticky ever stops
   working, check html and body in the theme header first. */
@media (min-width:861px){
	.oseo .split-o{align-items:start}
	.oseo .split-media-o{position:sticky;top:var(--o-top);align-self:start}
	.oseo .split-media-o img{max-height:min(76vh,720px)}
}

.oseo .split-tag-o{position:absolute;left:24px;bottom:24px;background:rgba(20,34,60,.86);backdrop-filter:blur(14px);
	border:1px solid var(--o-on-dark-line);color:#fff;border-radius:18px;padding:16px 22px}
.oseo .split-tag-o b{display:block;font-family:var(--o-display);font-weight:900;font-size:26px;color:var(--o-orange-lt);line-height:1}
.oseo .split-tag-o span{font-family:var(--o-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--o-on-dark)}

/* the spec list, drawn as ticks */
.oseo .checks-o{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:14px}
.oseo .checks-o li{position:relative;padding-left:34px;font-size:15px;line-height:1.7;color:var(--o-muted);font-weight:300}
.oseo .checks-o li::before{
	content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:999px;
	background-color:rgba(244,121,32,.14);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F47920' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:center;background-size:11px 11px}
.oseo .checks-o strong{color:var(--o-ink);font-weight:600}

/* ==========================================================
   4. RICH TEXT AND TABLES
   ========================================================== */
.oseo .rich-o{text-align:center}
.oseo .rich-o .lead-o{margin-inline:auto}
.oseo .rule-o{display:block;width:56px;height:10px;border-radius:999px;margin:0 auto 26px;
	background:linear-gradient(180deg,var(--o-navy) 0 25%,var(--o-orange) 25% 75%,var(--o-navy) 75% 100%)}

.oseo .body-o > * + *{margin-top:18px}
.oseo .body-o h3{font-family:var(--o-display);font-size:22px;margin-top:32px;color:var(--o-ink)}
.oseo .body-o ul{margin:18px 0 0;padding-left:22px;color:var(--o-muted);display:grid;gap:10px;text-align:left}
.oseo .body-o li{line-height:1.75}
.oseo .body-o li::marker{color:var(--o-orange)}
.oseo .body-o strong{color:var(--o-ink)}

.oseo .tbl-o{overflow-x:auto;margin-top:clamp(36px,4vw,52px);border:1px solid var(--o-line);border-radius:var(--o-r);background:var(--o-surface);text-align:left}
.oseo .tbl-o table{width:100%;border-collapse:collapse;min-width:620px}
.oseo .tbl-o th,.oseo .tbl-o td{text-align:left;padding:17px 22px;border-bottom:1px solid var(--o-line);font-size:14.5px}
.oseo .tbl-o th{font-family:var(--o-mono);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--o-navy)}
.oseo .tbl-o td{color:var(--o-muted);font-weight:300}
.oseo .tbl-o td:first-child{font-weight:600;color:var(--o-ink)}
.oseo .tbl-o tr:last-child td{border-bottom:0}
.oseo .tbl-o tbody tr{transition:.3s}
.oseo .tbl-o tbody tr:hover{background:rgba(244,121,32,.07)}

/* ==========================================================
   5. IMAGE BAND, parallax with a card on top
   ========================================================== */
.oseo .band-o{position:relative;min-height:min(78vh,660px);display:grid;place-items:center;overflow:hidden;background:var(--o-navy-3);color:#fff;isolation:isolate}
.oseo .band-bg-o{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.oseo .band-bg-o img{width:100%;height:100%;object-fit:cover;filter:brightness(.45) saturate(1.02)}
.oseo .band-o::after{content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(20,34,60,.76) 0%,rgba(20,34,60,.5) 50%,rgba(17,19,24,.9) 100%),
		radial-gradient(900px 500px at 80% 100%,rgba(244,121,32,.28),transparent 62%)}
.oseo .band-card-o{text-align:center;padding:clamp(32px,4vw,58px);margin:40px auto;max-width:70ch}
.oseo .band-card-o h2{color:#fff}
.oseo .band-card-o .eyebrow-o{color:var(--o-orange-lt);background:rgba(244,121,32,.18)}
.oseo .band-card-o .body-o{margin-top:20px;color:var(--o-on-dark);font-weight:300;font-size:clamp(15px,1.2vw,17px);line-height:1.82}
.oseo .band-card-o .body-o strong{color:#fff}

/* ==========================================================
   6. PINNED HORIZONTAL CAROUSEL
   ========================================================== */
.oseo .pin-o{position:relative;background:var(--o-navy);color:#fff}
.oseo .pin-stage-o{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
	overflow:hidden;padding:clamp(96px,10vw,132px) 0 clamp(50px,6vw,80px);background:var(--o-navy)}
.oseo .pin-head-o{width:min(1280px,92vw);margin:0 auto clamp(26px,3.2vw,42px);display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}
.oseo .pin-head-o .h-lg-o{max-width:16ch;color:#fff}
.oseo .pin-head-o .eyebrow-o{color:var(--o-orange-lt);background:rgba(244,121,32,.18)}
.oseo .pin-head-o .lead-o{color:var(--o-on-dark);max-width:46ch}
.oseo .pin-count-o{font-family:var(--o-mono);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--o-on-dark-muted)}
.oseo .pin-count-o b{color:var(--o-orange-lt)}
.oseo .pin-track-o{display:flex;gap:20px;padding-inline:max(4vw,calc((100vw - 1280px)/2));will-change:transform}
.oseo .pcard-o{position:relative;flex:0 0 clamp(250px,23vw,320px);border-radius:var(--o-r);overflow:hidden;height:min(52vh,430px);
	display:flex;align-items:flex-end;isolation:isolate;box-shadow:0 20px 44px -26px rgba(0,0,0,.7);transition:transform .5s var(--o-ease)}
.oseo .pcard-o img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--o-ease)}
.oseo .pcard-o::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,34,60,.06) 16%,rgba(17,19,24,.94) 94%);transition:.5s}
.oseo .pcard-o:hover img{transform:scale(1.07)}
.oseo .pcard-o:hover::after{background:linear-gradient(180deg,rgba(20,34,60,.28) 0%,rgba(244,121,32,.55) 96%)}
.oseo .pcard-o .ph-o{position:absolute;inset:0;z-index:-2}
.oseo .pnum-o{position:absolute;top:22px;left:24px;z-index:3;font-family:var(--o-mono);font-weight:600;font-size:11.5px;letter-spacing:.18em;color:var(--o-orange-lt)}
.oseo .pbody-o{padding:26px;width:100%}
.oseo .pbody-o > span{font-family:var(--o-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--o-orange-lt);font-weight:500}
.oseo .pbody-o h3{font-size:22px;margin-top:9px;font-weight:800;color:#fff}
.oseo .pbody-o p{margin-top:10px;font-size:13.5px;color:var(--o-on-dark);font-weight:300;line-height:1.66}
.oseo .plink-o{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--o-display);font-weight:700;font-size:12.5px;color:#fff}
.oseo .plink-o span{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:var(--o-orange);color:#fff;transition:.4s var(--o-ease)}
.oseo .plink-o .ic-o{width:12px;height:12px}
.oseo .pcard-o:hover .plink-o span{transform:translateX(6px)}
.oseo .pbar-o{width:min(1280px,92vw);margin:clamp(26px,3.2vw,42px) auto 0;height:3px;background:rgba(255,255,255,.16);border-radius:999px;overflow:hidden}
.oseo .pbar-o i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--o-orange),var(--o-orange-lt));border-radius:999px}

/* native fallback: mobile and reduced motion */
.oseo .pin-o.native-o{height:auto !important}
.oseo .pin-o.native-o .pin-stage-o{position:static;height:auto;padding:clamp(70px,9vw,110px) 0}
.oseo .pin-o.native-o .pin-track-o{overflow-x:auto;scroll-snap-type:x mandatory;transform:none !important;padding-bottom:18px;scrollbar-width:none}
.oseo .pin-o.native-o .pin-track-o::-webkit-scrollbar{display:none}
.oseo .pin-o.native-o .pcard-o{scroll-snap-align:start;height:420px}

/* ==========================================================
   7. CARDS
   ========================================================== */
.oseo .cards-o{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.oseo .card-o{position:relative;border-radius:26px;background:var(--o-surface);border:1px solid var(--o-line);overflow:hidden;
	display:flex;flex-direction:column;transition:transform .5s var(--o-ease),border-color .5s,box-shadow .5s}
.oseo .card-o::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;z-index:3;background:var(--o-orange);transition:width .6s var(--o-ease)}
.oseo .card-o:hover{transform:translateY(-9px);border-color:rgba(244,121,32,.45);box-shadow:0 36px 66px -38px rgba(17,19,24,.4)}
.oseo .card-o:hover::after{width:100%}
.oseo .card-num-o{position:absolute;top:24px;right:26px;z-index:3;font-family:var(--o-mono);font-weight:600;font-size:11.5px;letter-spacing:.16em;color:var(--o-orange)}
.oseo .card-media-o{position:relative;margin:0;overflow:hidden;background:var(--o-surface-2)}
.oseo .card-media-o img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--o-ease)}
.oseo .card-o:hover .card-media-o img{transform:scale(1.06)}
.oseo .card-media-o::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(17,19,24,.55))}
.oseo .has-media-o .card-num-o{color:#fff;text-shadow:0 1px 10px rgba(17,19,24,.7)}
.oseo .card-ico-o{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
	background:rgba(244,121,32,.14);color:var(--o-navy);transition:.5s var(--o-ease)}
.oseo .card-ic-o{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.oseo .card-o:hover .card-ico-o{transform:rotate(-8deg) scale(1.06);background:var(--o-orange);color:#fff}
.oseo .card-body-o{padding:30px 28px 32px}
.oseo .has-media-o .card-body-o{padding:24px 28px 30px}
.oseo .card-o h3{font-size:18px;font-weight:700}
.oseo .card-o p{margin-top:10px;font-size:14.5px;color:var(--o-muted);font-weight:300;line-height:1.68}

/* ==========================================================
   8. IMAGE OVERLAY, full bleed
   ========================================================== */
.oseo .ovl-o{position:relative;overflow:hidden;background:var(--o-navy-3);color:#fff}
.oseo .ovl-media-o{position:absolute;inset:0;z-index:0}
.oseo .ovl-media-o img{width:100%;height:100%;object-fit:cover;opacity:.5}
.oseo .ovl-media-o::after{content:"";position:absolute;inset:0;
	background:linear-gradient(90deg,rgba(20,34,60,.97) 0%,rgba(20,34,60,.84) 46%,rgba(20,34,60,.28) 100%),
		linear-gradient(250deg,rgba(244,121,32,.3) 0%,rgba(244,121,32,0) 58%)}
.oseo .ovl-inner-o{position:relative;z-index:2;padding:clamp(76px,9vw,140px) 0}
.oseo .ovl-copy-o{max-width:64ch}
.oseo .ovl-copy-o h2{color:#fff}
.oseo .ovl-copy-o .eyebrow-o{color:var(--o-orange-lt);background:rgba(244,121,32,.18)}
.oseo .ovl-copy-o .lead-o{margin-top:22px;color:var(--o-on-dark)}

/* ==========================================================
   9. STANDALONE IMAGE
   ========================================================== */
.oseo .fig-o{width:min(1100px,92vw);margin-inline:auto}
.oseo .fig-frame-o{margin:0;border-radius:var(--o-r-lg);overflow:hidden;background:var(--o-surface-2);cursor:zoom-in;border:0;padding:0;display:block;width:100%}
.oseo .fig-frame-o img{width:100%;max-height:min(72vh,700px);object-fit:cover;transition:transform 1.1s var(--o-ease)}
.oseo .fig-frame-o:hover img{transform:scale(1.03)}
.oseo .fig-cap-o{margin-top:16px;text-align:center;font-size:14px;color:var(--o-muted)}

/* ==========================================================
   10. GALLERY
   ========================================================== */
.oseo .masonry-o{columns:4;column-gap:18px}
.oseo .tile-o{break-inside:avoid;margin:0 0 18px;position:relative;border-radius:22px;overflow:hidden;cursor:zoom-in;
	padding:0;border:0;background:var(--o-surface-2);width:100%;display:block}
.oseo .tile-o img{width:100%;transition:transform .9s var(--o-ease)}
.oseo .tile-o:hover img{transform:scale(1.08)}
.oseo .tile-cap-o{position:absolute;inset:auto 0 0 0;padding:18px;color:#fff;text-align:left;
	background:linear-gradient(180deg,transparent,rgba(17,19,24,.92));
	opacity:0;transform:translateY(12px);transition:.45s var(--o-ease);font-family:var(--o-display);font-size:13.5px;font-weight:700}
.oseo .tile-o:hover .tile-cap-o{opacity:1;transform:none}

.lb-o{position:fixed;inset:0;z-index:1200;background:rgba(17,19,24,.96);backdrop-filter:blur(12px);display:grid;place-items:center;
	opacity:0;visibility:hidden;transition:.4s}
.lb-o.on-o{opacity:1;visibility:visible}
.lb-o img{max-width:88vw;max-height:80vh;border-radius:22px;box-shadow:0 50px 110px -50px rgba(0,0,0,.8);display:block;width:auto;height:auto}
.lb-btn-o{position:absolute;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);color:#fff;
	width:52px;height:52px;border-radius:999px;cursor:pointer;display:grid;place-items:center;transition:.3s}
.lb-btn-o svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb-btn-o:hover{background:#F47920;color:#fff;border-color:#F47920}
.lb-close-o{top:26px;right:26px}
.lb-prev-o{left:3%;top:50%;transform:translateY(-50%)}
.lb-next-o{right:3%;top:50%;transform:translateY(-50%)}
.lb-count-o{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#93A1B4;
	font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.18em}

/* ==========================================================
   11. FAQ
   ========================================================== */
.oseo .faq-split-o{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(38px,6vw,88px);align-items:start}
.oseo .faq-aside-o{position:sticky;top:var(--o-top)}
.oseo .fq-o{background:var(--o-surface);border:1px solid var(--o-line);border-radius:20px;overflow:hidden;margin-bottom:12px;transition:border-color .3s}
.oseo .fq-o.open-o{border-color:rgba(244,121,32,.55)}
.oseo .fq-q-o{width:100%;background:none;border:0;cursor:pointer;text-align:left;color:var(--o-ink);display:flex;align-items:center;
	justify-content:space-between;gap:24px;padding:22px 24px;font-family:var(--o-display);font-weight:700;
	font-size:clamp(15.5px,1.4vw,18px);line-height:1.4;letter-spacing:-.015em}
.oseo .fq-mark-o{flex:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--o-line);display:grid;place-items:center;
	color:var(--o-orange);transition:.42s var(--o-ease)}
.oseo .fq-mark-o .ic-o{width:13px;height:13px}
.oseo .fq-o.open-o .fq-mark-o{transform:rotate(45deg);background:var(--o-orange);color:#fff;border-color:var(--o-orange)}
.oseo .fq-a-o{max-height:0;overflow:hidden;transition:max-height .5s var(--o-ease)}
.oseo .fq-a-o p{padding:0 56px 24px 24px;max-width:70ch;font-size:15.5px;line-height:1.82;color:var(--o-muted);font-weight:300}

/* ==========================================================
   12. CTA
   ========================================================== */
.oseo .cta-o{position:relative;overflow:hidden;background:var(--o-navy);color:#fff;text-align:center;padding:clamp(78px,9vw,140px) 0}
.oseo .cta-o::after{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(760px 460px at 50% 0%,rgba(244,121,32,.3),transparent 64%),
		radial-gradient(700px 480px at 88% 100%,rgba(255,154,77,.14),transparent 62%)}
.oseo .cta-inner-o{position:relative;z-index:2}
.oseo .cta-o .eyebrow-o{color:var(--o-orange-lt);background:rgba(244,121,32,.18)}
.oseo .cta-o .h-lg-o{margin-inline:auto;color:#fff;max-width:18ch}
.oseo .cta-o p,.oseo .cta-body-o p{margin:24px auto 0;max-width:58ch;color:var(--o-on-dark);font-weight:300;font-size:clamp(15px,1.25vw,17.5px);line-height:1.8}
.oseo .cta-body-o h3{display:none}

/* ==========================================================
   13. PLACEHOLDERS
   ========================================================== */
.oseo .ph-o{display:grid;place-items:center;background:linear-gradient(150deg,var(--o-navy-3),var(--o-navy-2));width:100%;height:100%}
.oseo .ph-o svg{width:22%;max-width:90px;fill:none;stroke:rgba(255,255,255,.3);stroke-width:4}
.oseo .split-media-o .ph-o{aspect-ratio:4/5}

/* ==========================================================
   14. RESPONSIVE
   ========================================================== */
@media (max-width:1180px){
	.oseo .masonry-o{columns:3}
	.oseo .cards-o{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1040px){
	.oseo .faq-split-o{grid-template-columns:1fr}
	.oseo .faq-aside-o{position:static}
}
@media (max-width:860px){
	.oseo .split-o{grid-template-columns:1fr}
	.oseo .split-o.rev-o .split-media-o{order:0}
	.oseo .split-media-o img{aspect-ratio:4/3}
	.oseo .ovl-media-o::after{background:linear-gradient(180deg,rgba(20,34,60,.94),rgba(17,19,24,.86))}
	.oseo .scroll-hint-o{display:none}
	.oseo .pin-track-o{padding-inline:4vw}
	.oseo .cards-o{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
	.oseo .masonry-o{columns:2}

	/* A phone is a narrow column, so a picture that looks generous on a
	   desktop arrives as a letterbox. Give them all more height. */
	.oseo .split-media-o img{aspect-ratio:auto;height:min(78vw,420px)}
	.oseo .hero-o{min-height:min(86svh,720px)}
	.oseo .band-o{min-height:min(70vh,560px)}
	.oseo .card-media-o img{aspect-ratio:auto;height:min(62vw,300px)}
	.oseo .pcard-o{height:min(64vh,520px)}
	.oseo .fig-frame-o img{max-height:none;height:min(78vw,420px)}
	.oseo .hero-o{min-height:auto}
	.lb-btn-o{width:44px;height:44px}
	.oseo .pcard-o{flex-basis:78vw}
	.oseo .fq-q-o{padding:20px}
	.oseo .fq-a-o p{padding:0 20px 20px}
	.oseo .cards-o{grid-template-columns:1fr}
}
@media (max-width:420px){
	.oseo .masonry-o{columns:1}
}
@media (prefers-reduced-motion:reduce){
	.oseo.js-o .rv-o{opacity:1;transform:none;transition:none}
	.oseo.js-o .hero-o h1 .ln-o>span{transform:none;animation:none}
	.oseo .scroll-hint-o i{animation:none}
}
@media print{
	.progress-o,.totop-o,.oseo .cta-o{display:none}
	.oseo .fq-a-o{max-height:none}
	.oseo .split-media-o{position:static}
}