/* Osta SEO Page - the page design (v2).
   Scoped to .ospg so the theme's header and footer are never touched.
   Red #AA151B for every button and accent, black #101010 bands,
   off-white #F7F7F5, white; yellow #F1BF00 only as a small highlight.
   No :root, no CSS variables. */
.ospg,.ospg *,.ospg *::before,.ospg *::after{box-sizing:border-box}
.ospg{margin:0;background:#FFFFFF;color:#101010;font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
.ospg img{max-width:100%;display:block}
.ospg a{color:#AA151B}
.ospg h1,.ospg h2,.ospg h3{font-family:'Newsreader',Georgia,serif;font-weight:500;line-height:1.18;margin:0;color:#101010}
.ospg h2{font-size:clamp(28px,3.2vw,40px)}
.ospg h3{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;font-size:17px;line-height:1.35}
.ospg p{margin:0 0 14px;color:#4A4A4A}
.ospg p:last-child{margin-bottom:0}
.ospg :focus-visible{outline:3px solid #AA151B;outline-offset:3px}
.ospg .sp-wrap{width:min(1160px,90vw);margin:0 auto}
.ospg .sp-band{padding:88px 0}
.ospg .sp-band--soft{background:#F7F7F5}
.ospg .sp-band--black{background:#101010;color:#FFFFFF}
.ospg .sp-band--black h2,.ospg .sp-band--black h3{color:#FFFFFF}
.ospg .sp-band--black p{color:#C9C9C9}
.ospg .sp-lead{font-size:17px;max-width:62ch}
.ospg .sp-center{text-align:center}
.ospg .sp-center .sp-lead{margin:14px auto 0}
.ospg .sp-btn{display:inline-block;padding:14px 26px;border-radius:4px;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.ospg .sp-btn--red{background:#AA151B;color:#FFFFFF}
.ospg .sp-btn--red:hover{background:#8E1116}
.ospg .sp-btn--line{background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 2px #FFFFFF}
.ospg .sp-btn--line:hover{background:#FFFFFF;color:#101010}
/* image placeholder: swap each .sp-ph for an <img> with the same class */
.ospg .sp-ph{position:relative;background:#EAEAE6;border-radius:4px;overflow:hidden;margin:0}
.ospg .sp-ph img{width:100%;height:100%;object-fit:cover}
.ospg .sp-r-tall{aspect-ratio:4/5}
.ospg .sp-r-wide{aspect-ratio:4/3}
.ospg .sp-r-sq{aspect-ratio:1}
.ospg .sp-r-land{aspect-ratio:16/10}
/* ---------- hero ---------- */
.ospg .sp-hero{position:relative;min-height:380px;display:grid;place-items:center;text-align:center;background:#101010;color:#FFFFFF;overflow:hidden;padding:80px 0}
.ospg .sp-hero .sp-ph{position:absolute;inset:0;border-radius:0;background:#101010}
.ospg .sp-hero .sp-ph img{opacity:.4}
.ospg .sp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.6),rgba(16,16,16,.85))}
.ospg .sp-hero h1::after{content:"";display:block;width:64px;height:4px;background:#F1BF00;margin:18px auto 0}
.ospg .sp-hero .sp-wrap{position:relative;z-index:2}
.ospg .sp-hero h1{color:#FFFFFF;font-size:clamp(34px,5vw,58px);margin-bottom:26px}
/* ---------- breadcrumb ---------- */
.ospg .sp-crumb{background:#F7F7F5;font-size:13px;padding:18px 0 0}
.ospg .sp-crumb a{color:#101010;text-decoration:none;font-weight:600}
.ospg .sp-crumb span{color:#8A8A8A}
/* ---------- splits ---------- */
.ospg .sp-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ospg .sp-split--mid{align-items:center}
.ospg .sp-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.ospg .sp-split h2{margin-bottom:18px}
.ospg .sp-checks{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.ospg .sp-checks li{position:relative;padding-left:24px;font-size:15px;color:#101010}
.ospg .sp-checks li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:#AA151B}
.ospg .sp-subpoints h3{margin:22px 0 6px;color:#AA151B}
/* ---------- icon cards ---------- */
.ospg .sp-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.ospg .sp-card{background:#1C1C1C;border:1px solid #2E2E2E;border-radius:4px;padding:28px 28px 30px;text-align:left}
.ospg .sp-card:hover{border-color:#AA151B}
.ospg .sp-card svg{width:36px;height:36px;stroke:#E0343B;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.ospg .sp-card h3{margin-bottom:8px}
.ospg .sp-card p{font-size:15px}
/* ---------- picture cards ---------- */
.ospg .sp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;text-align:left}
.ospg .sp-tile{background:#FFFFFF;border:1px solid #E3E3DF;border-radius:4px;padding:14px 14px 22px}
.ospg .sp-tile h3{margin:16px 6px 6px;color:#AA151B}
.ospg .sp-tile p{margin:0 6px;font-size:14.5px}
/* ---------- process: a real sequence, so it is numbered ---------- */
.ospg .sp-steps{list-style:none;margin:0;padding:0;counter-reset:s}
.ospg .sp-steps li{counter-increment:s;display:grid;grid-template-columns:48px 1fr;gap:4px 12px;padding:18px 0;border-bottom:1px solid #E3E3DF}
.ospg .sp-steps li::before{content:counter(s,decimal-leading-zero);color:#AA151B;font-weight:600;font-size:14px;padding-top:2px}
.ospg .sp-steps b{font-weight:600}
.ospg .sp-steps p{grid-column:2;font-size:14.5px;margin:0}
.ospg .sp-process h2{margin-bottom:16px}
.ospg .sp-process .sp-btn{margin-top:22px}
/* ---------- FAQ ---------- */
.ospg .sp-faq{max-width:860px;margin:40px auto 0;text-align:left}
.ospg .sp-faq details{border-bottom:1px solid #DADAD6;padding:4px 0}
.ospg .sp-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-weight:600}
.ospg .sp-faq summary::-webkit-details-marker{display:none}
.ospg .sp-faq summary::after{content:"+";color:#AA151B;font-size:22px;line-height:1}
.ospg .sp-faq details[open] summary::after{content:"\2212"}
.ospg .sp-faq details p{padding:0 40px 16px 0;font-size:15px}
/* ---------- summary table ---------- */
.ospg .sp-facts{width:100%;border-collapse:collapse;font-size:15px}
.ospg .sp-facts th,.ospg .sp-facts td{text-align:left;padding:14px 12px;border-bottom:1px solid #DADAD6;vertical-align:top}
.ospg .sp-facts th{font-weight:600;width:44%}
.ospg .sp-facts th i{display:inline-block;width:10px;height:10px;border-radius:2px;background:#AA151B;margin-right:10px;vertical-align:1px}
.ospg .sp-facts tr:nth-child(even) th i{background:#101010}
.ospg .sp-facts td{color:#4A4A4A}
/* ---------- closing call to action ---------- */
.ospg .sp-cta{text-align:center}
.ospg .sp-cta h2{max-width:22ch;margin:0 auto 16px}
.ospg .sp-cta .sp-lead{margin:0 auto}
.ospg .sp-cta .sp-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.ospg .sp-cta a:not(.sp-btn){color:#FFFFFF}
.ospg .sp-cta a:not(.sp-btn):hover{color:#F1BF00}
/* ---------- small screens ---------- */
@media (max-width:860px){.ospg .sp-split,.ospg .sp-cards{grid-template-columns:1fr;gap:32px}
.ospg .sp-tiles{grid-template-columns:1fr 1fr}
.ospg .sp-band{padding:64px 0}
}
@media (max-width:560px){.ospg .sp-tiles,.ospg .sp-checks{grid-template-columns:1fr}
.ospg .sp-facts th{width:auto}
}
@media (prefers-reduced-motion:reduce){.ospg *{transition:none}
}
/* ---------- v2: hero video button ---------- */
.ospg .sp-hero .sp-play{display:inline-flex;align-items:center;gap:10px;margin-left:10px;padding:12px 20px;border-radius:4px;background:transparent;color:#FFFFFF;box-shadow:inset 0 0 0 2px #FFFFFF;font:600 15px/1 'Instrument Sans',system-ui,sans-serif;cursor:pointer;border:0}
.ospg .sp-hero .sp-play:hover{background:#FFFFFF;color:#101010}
.ospg .sp-hero .sp-play svg{width:14px;height:14px;fill:currentColor}
/* ---------- v2: YouTube, loaded only when played ---------- */
.ospg .sp-yt{position:relative;margin:0;aspect-ratio:16/9;background:#101010;border-radius:4px;overflow:hidden;cursor:pointer}
.ospg .sp-yt img.sp-yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.ospg .sp-yt button{position:absolute;inset:0;margin:auto;width:76px;height:54px;border-radius:12px;border:0;background:#AA151B;cursor:pointer;display:grid;place-items:center}
.ospg .sp-yt button:hover{background:#8E1116}
.ospg .sp-yt button svg{width:22px;height:22px;fill:#FFFFFF}
.ospg .sp-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ospg .sp-yt figcaption{position:absolute;left:14px;bottom:12px;color:#FFFFFF;font-size:13px;background:rgba(16,16,16,.7);padding:4px 10px;border-radius:3px}
.ospg .sp-stack{display:grid;gap:14px}
/* ---------- v2: long post text ---------- */
.ospg .sp-post h2{margin-bottom:18px}
.ospg .sp-post p{font-size:16px}
.ospg .sp-post p:first-of-type{font-size:17px;color:#2B2B2B}
/* ---------- v2: image with overlay text ---------- */
.ospg .sp-ovl{position:relative;min-height:520px;display:flex;align-items:center;background:#101010;color:#FFFFFF;overflow:hidden}
.ospg .sp-ovl > .sp-ph{position:absolute;inset:0;border-radius:0;background:#101010}
.ospg .sp-ovl > .sp-ph img{opacity:.55}
.ospg .sp-ovl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,16,16,.92) 0%,rgba(16,16,16,.7) 50%,rgba(16,16,16,.15) 100%)}
.ospg .sp-ovl .sp-wrap{position:relative;z-index:2;padding:88px 0}
.ospg .sp-ovl .sp-copy{max-width:560px}
.ospg .sp-ovl h2{color:#FFFFFF;margin-bottom:18px}
.ospg .sp-ovl p{color:#D6D6D6}
.ospg .sp-ovl .sp-btn{margin-top:14px}
/* ---------- v2: gallery ---------- */
.ospg .sp-gallery figure{margin:0}
.ospg .sp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.ospg .sp-gallery .sp-ph:first-child{grid-column:span 2;grid-row:span 2}
.ospg .sp-gallery figcaption{position:absolute;left:10px;bottom:10px;font-size:12.5px;color:#FFFFFF;background:rgba(16,16,16,.75);padding:3px 9px;border-radius:3px}
/* ---------- v2: rich text ---------- */
.ospg .sp-rich{max-width:760px;margin:0 auto}
.ospg .sp-rich h2{margin-bottom:18px}
.ospg .sp-rich h3{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:24px;margin:32px 0 10px}
.ospg .sp-rich p{font-size:16.5px;line-height:1.8}
.ospg .sp-rich ul{margin:0 0 16px;padding-left:22px;color:#4A4A4A}
.ospg .sp-rich li{margin-bottom:6px}
.ospg .sp-rich li::marker{color:#AA151B}
.ospg .sp-rich blockquote{margin:26px 0;padding:6px 0 6px 20px;border-left:4px solid #AA151B;font-family:'Newsreader',Georgia,serif;font-size:21px;line-height:1.5;color:#101010}
/* ---------- v2: full video section ---------- */
.ospg .sp-video-band .sp-yt{max-width:960px;margin:40px auto 0}
@media (max-width:860px){.ospg .sp-gallery{grid-template-columns:1fr 1fr}
.ospg .sp-ovl::after{background:rgba(16,16,16,.8)}
.ospg .sp-hero .sp-play{margin:12px 0 0}
}

/* no picture: the text takes the full width */
.ospg .sp-split.sp-no-media{grid-template-columns:1fr;max-width:820px}
.ospg .sp-steps h3{font-size:16px;margin:0}
.ospg .sp-tile h3,.ospg .sp-card h3{font-size:17px}
.ospg .sp-gallery .sp-ph figcaption{max-width:calc(100% - 20px)}

/* Stand clear of the theme: its own rules on main, section, h1 to h3 and
   p must not move this page. */
.ospg{display:block;width:100%;max-width:none;margin:0;padding:0;float:none}
.ospg section,.ospg nav,.ospg article,.ospg figure{margin:0;float:none}
.ospg h1,.ospg h2,.ospg h3{text-transform:none;letter-spacing:normal;padding:0}
.ospg h1::before,.ospg h2::before,.ospg h3::before{content:none}

/* =========================================================
   2.3.0  Hero background video, video frames, phones
   ========================================================= */

/* Banner: taller, picture under, background film over it, shade on top */
.ospg .sp-hero{min-height:clamp(440px,72vh,700px);padding:96px 0}
.ospg .sp-hero .sp-ph{z-index:0}
.ospg .sp-hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none;background:transparent}
.ospg .sp-hero-bg.is-playing{opacity:.55}
.ospg .sp-hero::after{z-index:1}
.ospg .sp-hero .sp-wrap{z-index:2}
.ospg .sp-hero .sp-wrap > *{max-width:860px;margin-inline:auto}
.ospg .sp-hero .sp-btn,.ospg .sp-hero .sp-play{vertical-align:middle}

/* Inline video frames: always 16:9, black, the film fits the frame */
.ospg .sp-yt{width:100%;max-width:100%;aspect-ratio:16/9;height:auto}
.ospg .sp-yt video,.ospg .sp-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.ospg .sp-yt img.sp-yt-thumb{object-fit:cover}
.ospg .sp-video-band .sp-yt{width:min(960px,100%)}

/* Pictures never overflow their frame, and a picture that fails to load
   never shows its alt text across the layout */
.ospg .sp-ph{width:100%;max-width:100%}
.ospg .sp-ph img{display:block;max-width:none;color:transparent;font-size:0}

/* The watch the video window */
.sp-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,10,10,.92)}
.sp-modal.is-open{display:flex}
.sp-modal-frame{position:relative;width:min(1100px,92vw,calc(86vh * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.sp-modal-frame iframe,.sp-modal-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.sp-modal-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:#AA151B;color:#FFFFFF;font:600 24px/44px system-ui,sans-serif;text-align:center;cursor:pointer;z-index:2}
.sp-modal-close:hover{background:#8E1116}
body.sp-modal-lock{overflow:hidden}

/* Tablets and phones */
@media (max-width:860px){
  .ospg .sp-hero{min-height:clamp(420px,78svh,600px);padding:72px 0 64px}
  .ospg .sp-hero h1{font-size:clamp(30px,8vw,42px);margin-bottom:22px}
  .ospg .sp-r-tall{aspect-ratio:4/3}
  .ospg .sp-split > .sp-ph{order:-1}
  .ospg .sp-stack{gap:12px}
  .ospg .sp-ovl{min-height:0}
  .ospg .sp-ovl .sp-wrap{padding:72px 0}
  .ospg .sp-gallery .sp-ph:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .ospg .sp-video-band .sp-yt{margin-top:28px}
  .sp-modal{padding:0}
  .sp-modal-frame{width:100vw;border-radius:0}
  .sp-modal-close{top:8px;right:8px;width:40px;height:40px;line-height:40px}
}
@media (max-width:560px){
  .ospg .sp-hero .sp-btn,.ospg .sp-hero .sp-play{display:flex;width:100%;max-width:300px;margin:10px auto 0;justify-content:center}
  .ospg .sp-pair{gap:10px}
  .ospg .sp-band{padding:56px 0}
  .ospg .sp-tile{padding:10px 10px 18px}
  .ospg .sp-gallery{gap:8px}
}
@media (orientation:landscape) and (max-height:500px){
  .sp-modal-frame{width:calc(92vh * 16 / 9);max-width:100vw}
  .sp-modal-close{top:8px;bottom:auto;right:8px}
}