/*
Theme Name: SIOGEN
Theme URI: https://siogen.com
Description: Apple-style parallax presentation theme for SIOGEN — the manufacturing operations & back-office platform. Persistent header, responsive across desktop / tablet / phone, built to showcase the software with long scrolling sections.
Version: 1.7.6
Requires at least: 5.8
Requires PHP: 7.4
Author: SIOGEN
License: GPL-2.0-or-later
Text Domain: siogen
*/

/* ============================================================
   Tokens
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f8fb;
  --bg-softer:#eef2f8;
  --ink:#0e1116;
  --ink-2:#39424e;
  --muted:#6b7585;
  --line:#e6eaf0;
  --accent:#2f6bff;
  --accent-2:#13c2c2;
  --accent-ink:#ffffff;
  --shadow:0 18px 50px -20px rgba(16,28,52,.28);
  --shadow-sm:0 8px 24px -12px rgba(16,28,52,.22);
  --radius:18px;
  --radius-sm:12px;
  --container:1180px;
  --header-h:72px;
  --shot-pad:clamp(14px,2.2vh,30px);   /* uniform top & bottom gap around full pictures */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
          "Apple Color Emoji","Segoe UI Emoji", sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.02em;margin:0 0 .4em;font-weight:800;color:var(--ink)}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.2rem,2.4vw,1.6rem)}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--ink-2);line-height:1.55}
.muted{color:var(--muted)}
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1rem;
}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.4rem;border-radius:999px;font-weight:600;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 24px -10px rgba(33,125,71,.5)}
.btn-primary:hover{box-shadow:0 16px 30px -10px rgba(33,125,71,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--bg-soft)}
.btn-lg{padding:1rem 1.7rem;font-size:1.05rem}

/* ============================================================
   Header (persistent / sticky)
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(16,28,52,.4);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;font-weight:800;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink)}
.brand-mark span{color:var(--accent)}
.brand img{max-height:38px;width:auto}
.site-nav{display:flex;align-items:center;gap:1.1rem;height:var(--header-h)}
.nav-menu{display:flex;align-items:center;gap:clamp(.7rem,1.5vw,1.5rem);list-style:none;margin:0;padding:0;height:100%}
.nav-menu a{color:var(--ink-2);font-weight:500;font-size:.95rem;transition:color .15s ease}
.nav-menu a:hover{color:var(--ink)}
.nav-cta{margin-left:.3rem;flex:0 0 auto}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:42px;height:42px;border:0;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{position:fixed;top:var(--header-h);left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:1.2rem 24px 1.6rem;z-index:99;box-shadow:var(--shadow-sm)}
.mobile-nav ul{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.2rem}
.mobile-nav a{display:block;padding:.7rem .2rem;color:var(--ink);font-weight:600;font-size:1.1rem;border-bottom:1px solid var(--line)}
.mobile-nav .btn{width:100%;justify-content:center;margin-top:.6rem}

/* ============================================================
   Sections
   ============================================================ */
main{display:block}
.section{position:relative;padding:clamp(72px,11vw,150px) 0}
.section--soft{background:var(--bg-soft)}
.section--ink{background:var(--ink);color:#fff}
.section--ink h2,.section--ink h3{color:#fff}
.section-head{max-width:760px;margin:0 auto clamp(40px,6vw,72px);text-align:center}
.section-head.left{text-align:left;margin-left:0}
.full-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;padding-top:calc(var(--header-h) + clamp(56px,9vw,120px));padding-bottom:clamp(72px,10vw,140px);overflow:hidden}
.hero__bg{position:absolute;inset:-10% -10% 0 -10%;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55}
.blob--1{width:520px;height:520px;background:radial-gradient(circle at 30% 30%, #d3ecdd, transparent 70%);top:-120px;left:-80px}
.blob--2{width:480px;height:480px;background:radial-gradient(circle at 60% 40%, #dcf5e4, transparent 70%);top:40px;right:-120px}
.blob--3{width:420px;height:420px;background:radial-gradient(circle at 50% 50%, #eef7f1, transparent 70%);bottom:-180px;left:40%}
.hero__inner{position:relative;z-index:1;text-align:center;max-width:880px;margin:0 auto}
.hero h1{margin-bottom:.5em}
.hero .lead{max-width:680px;margin:0 auto 2rem}
.hero__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.hero__note{margin-top:1.2rem;font-size:.9rem;color:var(--muted)}


/* ============================================================
   Trust strip
   ============================================================ */
.trust{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trust__row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,64px);flex-wrap:wrap;opacity:.65}
.trust__row b{font-weight:800;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink-2)}

/* ============================================================
   Modules grid
   ============================================================ */
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.module{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.module:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.module .ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(33,125,71,.12),rgba(43,156,89,.16));color:var(--accent);margin-bottom:16px}
.module .ico svg{width:24px;height:24px}
.module h3{font-size:1.15rem;margin-bottom:.3em}
.module p{font-size:.95rem;color:var(--muted);margin:0}

/* ============================================================
   Feature rows (alternating, parallax visuals)
   ============================================================ */
.feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,80px)}
.feature + .feature{margin-top:clamp(72px,10vw,140px)}
.feature--rev .feature__media{order:2}
.feature--rev .feature__text{order:1}
.feature__text h2{margin-bottom:.5em}
.feature__list{list-style:none;margin:1.2rem 0 0;padding:0}
.feature__list li{position:relative;padding-left:30px;margin-bottom:.7rem;color:var(--ink-2)}
.feature__list li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;background:rgba(33,125,71,.16)}
.feature__list li::after{content:"";position:absolute;left:5px;top:calc(.45em + 4px);width:7px;height:4px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.feature__media{position:relative}
.panel{
  position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,#fff,#f3f6fc);box-shadow:var(--shadow);aspect-ratio:4/3;
}
.panel--ink{background:linear-gradient(160deg,#11151c,#1c2533);border-color:#222c3b}
.panel__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform}
.panel .chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);padding:12px 14px;font-weight:600;font-size:.85rem;color:var(--ink)}
.panel .chip small{display:block;color:var(--muted);font-weight:500;font-size:.74rem;margin-top:2px}
.panel .chip i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent-2);margin-right:6px;vertical-align:middle}
.chip--a{top:16%;left:10%}
.chip--b{top:44%;right:8%}
.chip--c{bottom:14%;left:18%}
.orbit{width:62%;aspect-ratio:1;border-radius:50%;border:2px dashed rgba(33,125,71,.38);position:relative}
.orbit::before{content:"";position:absolute;inset:18%;border-radius:50%;border:2px dashed rgba(19,194,204,.4)}
.node{position:absolute;width:54px;height:54px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;color:var(--accent)}
.node--c{top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.node--1{top:-10px;left:50%;transform:translateX(-50%)}
.node--2{bottom:-10px;left:18%}
.node--3{bottom:-10px;right:18%}

/* ============================================================
   Stats band
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.stat b{display:block;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.03em;background:linear-gradient(120deg,#a7e6c3,#7ddfa9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{color:#aeb9c9;font-size:.95rem}

/* ============================================================
   Steps
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:24px;right:26px;font-weight:800;font-size:2.4rem;color:var(--bg-softer);letter-spacing:-.04em}
.step h3{margin-bottom:.4em}
.step p{color:var(--muted);margin:0}

/* ============================================================
   CTA band
   ============================================================ */
.cta{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(130deg,#1d6f40,#2fae66);color:#fff;text-align:center;padding:clamp(48px,7vw,88px) 28px}
.cta h2{color:#fff;margin-bottom:.4em}
.cta p{color:rgba(255,255,255,.9);max-width:560px;margin:0 auto 1.8rem}
.cta .btn-primary{background:#fff;color:var(--accent)}
.cta .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.cta .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:#1c1c1e;color:#c7c7cc;padding:72px 0 36px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.site-footer h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:#a1a1a6;font-size:.95rem}
.site-footer a:hover{color:#fff}
.footer-brand .brand-mark{color:#fff;font-size:1.4rem;font-weight:800}
.footer-brand p{color:#8e8e93;max-width:30ch;margin-top:.8rem}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #2c2c2e;margin-top:48px;padding-top:24px;font-size:.85rem;color:#8e8e93}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* Blog / generic pages */
.page-wrap{padding:calc(var(--header-h) + 60px) 0 80px}
.entry{max-width:760px;margin:0 auto}
.entry h1{margin-bottom:.3em}
.entry img{border-radius:var(--radius);margin:1.4rem 0}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .modules{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .feature--rev .feature__media{order:0}
  .feature--rev .feature__text{order:0}
  .stats{grid-template-columns:repeat(2,1fr);gap:32px}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .site-nav .nav-menu,.site-nav .nav-cta{display:none}
  .nav-toggle{display:flex}
}
@media (max-width:560px){
  .modules{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  [data-parallax]{transform:none !important}
}

/* ============================================================
   APPLE PRESENTATION LAYER (v0.2)
   Pinned scroll scenes, frosted chrome, display typography.
   Everything below overrides the base theme by cascade order.
   ============================================================ */

:root{
  --bg-soft:#f5f5f7;
  --bg-softer:#fbfbfd;
  --ink:#1d1d1f;
  --ink-2:#424245;
  --muted:#6e6e73;
  --line:#e8e8ed;
  --accent:#217d47;   /* SIOGEN ERP brand green (0.13,0.49,0.28) */
  --accent-2:#2b9c59;
  --radius:22px;
  --radius-sm:14px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.30);
  --shadow-sm:0 12px 32px -16px rgba(0,0,0,.22);
}

html{scroll-behavior:auto}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── Display typography ── */
h1{font-size:clamp(2.9rem,7vw,5.6rem);line-height:1.04;letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.028em;font-weight:700}
.lead{font-size:clamp(1.12rem,1.7vw,1.45rem);line-height:1.5;color:var(--ink-2)}
.eyebrow{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* ── Pill buttons ── */
.btn{border-radius:999px;font-weight:600}
.btn-primary{background:var(--accent);box-shadow:none}
.btn-primary:hover{background:var(--accent-2);box-shadow:0 10px 26px -12px rgba(33,125,71,.55);transform:none}
.btn-ghost{border:1px solid transparent;color:var(--accent);background:transparent}
.btn-ghost:hover{background:rgba(33,125,71,.10);border-color:transparent}
.btn-lg{padding:1.02rem 1.9rem}

/* ── Frosted header ── */
.site-header{background:rgba(251,251,253,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;box-shadow:none}
.site-header.scrolled{background:rgba(251,251,253,.85);border-bottom:1px solid var(--line);box-shadow:none}

/* ── Cards & panels: quieter, deeper ── */
.module,.step{border-radius:var(--radius);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1)}
.module:hover,.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.panel{border-radius:26px;box-shadow:var(--shadow)}
.panel--ink{background:#000}
.chip{border-radius:14px;box-shadow:var(--shadow-sm)}

/* ── Dark bands: SIOGEN charcoal (matches the footer), mega numbers ── */
.section--ink{background:#1c1c1e}
.stats--mega{gap:36px}
.stats--mega .stat b{
  font-size:clamp(3rem,7vw,5.4rem);font-weight:700;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff 30%,#86868b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stats--mega .stat span{color:#86868b;font-size:1.02rem}

/* ── Trust strip: quiet Apple caps ── */
.trust__row b{color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}

/* ── Closing CTA ── */
.cta h2{font-size:clamp(2.4rem,5.2vw,4rem)}

/* ============================================================
   Scroll scenes — desktop + motion-friendly only. Phones and
   prefers-reduced-motion get the plain responsive flow.
   ============================================================ */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference){

  /* ── HERO: pinned stage; headline settles, screenshot docks into place ── */
  .hero[data-scene]{height:185vh;padding:0}
  .hero__sticky{
    position:sticky;top:0;min-height:100vh;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding-top:calc(var(--header-h) + 2vh);
  }
  .hero__sticky .hero__bg{position:absolute}
  .hero[data-scene] .hero__inner{
    transform:translateY(calc(var(--p,0) * -4vh));
  }
  .hero[data-scene] h1{
    transform:scale(calc(1 - min(var(--p,0) * 1.4, 1) * .06));
    transform-origin:center top;
  }
  .hero[data-scene] .eyebrow,
  .hero[data-scene] .hero__note{
    opacity:calc(1 - min(var(--p,0) * 1.8, 1) * .85);
  }
  /* The hero screenshot: starts low + small, docks at full size as you scroll. */
  .hero[data-scene] .shot--hero{
    transform:
      translateY(calc((1 - min(var(--p,0) * 1.6, 1)) * 9vh))
      scale(calc(.93 + min(var(--p,0) * 1.6, 1) * .07));
    transform-origin:center top;
    will-change:transform;
  }

  /* ── STATEMENT: pinned chapter — words arrive as you travel ── */
  .section--statement{height:170vh;padding:0}
  .section--statement .section-head{
    position:sticky;top:0;min-height:100vh;max-width:1000px;
    display:flex;flex-direction:column;justify-content:center;
    text-align:center;margin:0 auto;
  }
  .section--statement h2{
    font-size:clamp(2.6rem,5.8vw,4.6rem);letter-spacing:-.033em;
    background:linear-gradient(180deg,var(--ink) 40%,#6e6e73);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  /* Scene-driven entrance replaces the IO reveal inside this chapter. */
  .section--statement .reveal{transition:none}
  .section--statement .eyebrow{
    opacity:calc(min(var(--p,0) * 3, 1));
    transform:translateY(calc((1 - min(var(--p,0) * 3, 1)) * 24px));
  }
  .section--statement h2{
    opacity:calc(min(max(var(--p,0) * 3 - .35, 0), 1));
    transform:translateY(calc((1 - min(max(var(--p,0) * 3 - .35, 0), 1)) * 34px));
  }
  .section--statement .lead{
    opacity:calc(min(max(var(--p,0) * 3 - .8, 0), 1));
    transform:translateY(calc((1 - min(max(var(--p,0) * 3 - .8, 0), 1)) * 30px));
  }

  /* Feature media panels drift subtly against their text column. */
  .feature__media .panel{transition:transform .2s linear}
}

/* ── Tablet & phone: scenes off, generous stacked flow ── */
@media (max-width: 899px){
  .hero__sticky{position:static;min-height:0;display:block;padding-top:0}
  .hero[data-scene]{height:auto;padding-top:calc(var(--header-h) + clamp(48px,9vw,96px));padding-bottom:clamp(56px,10vw,110px)}
  .section--statement{height:auto}
  .stats--mega{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero__sticky{position:static}
  .hero[data-scene],.section--statement{height:auto}
}

/* ============================================================
   Logged-in fix: the WP admin bar (32px / 46px mobile) sits on
   top of the viewport — push the fixed site header and every
   pinned scene below it so nothing hides under the toolbar.
   ============================================================ */
body.admin-bar .site-header{top:32px}
body.admin-bar .hero__sticky,
body.admin-bar .section--statement .section-head{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
  body.admin-bar .hero__sticky,
  body.admin-bar .section--statement .section-head{top:46px}
}

/* ============================================================
   v0.4 — Screenshot frames + block-pattern layer
   ============================================================ */

/* ── Framed screenshots (real app images) ── */
.shot{
  position:relative;max-width:1040px;margin:2.6rem auto 0;
  background:transparent;border:none;box-shadow:none;border-radius:0;overflow:visible;
}
.shot img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.18))}
/* Legacy class from older content: now identical to a plain shot. */
.shot--browser{padding-top:0}
.shot--browser::before,.shot--browser::after{content:none}
.feature__media .shot{margin:0;max-width:none}

/* ── Block-built pages (.siogen-blocks wraps the_content) ── */
.siogen-blocks{overflow-x:clip}
.siogen-blocks > .section,.siogen-blocks > .hero{margin:0}
.siogen-blocks .section{padding:clamp(64px,9vw,130px) 0}
.siogen-blocks .section--statement,.siogen-blocks .hero{padding:0}
.siogen-blocks .container{max-width:var(--container);margin:0 auto;padding:0 24px}
.siogen-blocks .section-head{text-align:center;max-width:840px;margin:0 auto clamp(30px,5vw,56px)}
.siogen-blocks h1.wp-block-heading{font-size:clamp(2.9rem,7vw,5.6rem)}
.siogen-blocks .hero .wp-block-buttons{justify-content:center}

/* Core buttons → theme pills */
.siogen-blocks .wp-block-button__link{
  border-radius:999px;font-weight:600;padding:1.02rem 1.9rem;
  background:var(--accent);color:#fff;transition:background .25s,box-shadow .25s;
}
.siogen-blocks .wp-block-button__link:hover{background:var(--accent-2)}
.siogen-blocks .siogen-btn-ghost .wp-block-button__link{
  background:transparent;color:var(--accent);border:none;
}
.siogen-blocks .siogen-btn-ghost .wp-block-button__link:hover{background:rgba(0,0,0,.05)}

/* Cards grid: works with ANY number of duplicated .module groups */
.siogen-blocks .modules{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;
}
.siogen-blocks .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px;text-align:center}
.stat-b{
  font-size:clamp(3rem,7vw,5.4rem);font-weight:700;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,#fff 30%,#86868b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin:0 0 .2em;
}
.section--ink p{color:#86868b}
.section--ink .eyebrow{color:var(--accent-2)}
.siogen-statement-dark h2{background:linear-gradient(180deg,#fff 40%,#86868b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Feature split as a block (columns-free: two stacked groups on mobile) */
.siogen-blocks .feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin:clamp(40px,7vw,96px) 0}
.siogen-blocks .feature--rev .feature__text{order:2}
.siogen-blocks .feature--rev .feature__media{order:1}
.siogen-blocks .feature__list{list-style:none;padding:0}

/* ── Pinned scenes from patterns (.siogen-scene mirrors [data-scene]) ── */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference){
  .hero.siogen-scene{height:185vh;padding:0}
  .hero.siogen-scene .hero__sticky{
    position:sticky;top:0;min-height:100vh;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding-top:calc(var(--header-h) + 2vh);
  }
  .hero.siogen-scene .hero__inner{transform:translateY(calc(var(--p,0) * -4vh))}
  .hero.siogen-scene h1{transform:scale(calc(1 - min(var(--p,0) * 1.4, 1) * .06));transform-origin:center top}
  .hero.siogen-scene .shot{
    transform:translateY(calc((1 - min(var(--p,0) * 1.6, 1)) * 9vh))
              scale(calc(.93 + min(var(--p,0) * 1.6, 1) * .07));
    transform-origin:center top;will-change:transform;
  }
  .section--statement.siogen-scene{height:170vh;padding:0}
}
@media (max-width: 899px){
  .hero.siogen-scene{height:auto}
  .section--statement.siogen-scene{height:auto}
  .siogen-blocks .feature{grid-template-columns:1fr}
  .siogen-blocks .feature--rev .feature__text{order:1}
  .siogen-blocks .feature--rev .feature__media{order:2}
}
@media (prefers-reduced-motion: reduce){
  .hero.siogen-scene,.section--statement.siogen-scene{height:auto}
  .hero.siogen-scene .hero__sticky{position:static}
}

/* ============================================================
   v0.5 — Pictures only. Full-width frames + slight scroll drift.
   ============================================================ */

/* Hero screenshot: escapes the text column, near full-bleed. */
.shot--hero{
  width:min(1380px,94vw);
  margin:clamp(28px,4vh,48px) auto 0;
}
/* Full-bleed variation for showcase sections / patterns. */
.shot--full{max-width:none;width:min(1500px,96vw);margin-left:auto;margin-right:auto}

/* Empty slot: quiet, obviously replaceable — never a fake UI. */
.shot__empty{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(220px,32vw,460px);padding:24px;
  color:var(--muted);font-size:.92rem;
  background:
    linear-gradient(135deg,var(--bg-soft) 25%,transparent 25%,transparent 50%,var(--bg-soft) 50%,var(--bg-soft) 75%,transparent 75%,transparent) 0 0/28px 28px,
    var(--bg-softer);
}

/* Slight drift everywhere a picture sits (JS adds data-parallax 0.06 to
   any .shot outside the hero; the hero shot is scene-driven instead). */
.shot{will-change:transform}

/* Keep the drift subtle on small screens: frames go edge-to-edge. */
@media (max-width:899px){
  .shot--hero,.shot--full{width:100%}
}

/* ============================================================
   v0.6 — Stacked feature chapters (text above, screenshot below)
   ============================================================ */
.feature--stack{
  display:block !important;
  margin:clamp(56px,9vw,120px) 0;
}
.feature--stack .feature__text{
  max-width:780px;margin:0 auto clamp(24px,4vw,44px);text-align:center;
}
.feature--stack .feature__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  list-style:none;padding:0;margin:1.2rem 0 0;
}
.feature--stack .feature__list li{padding-left:24px;position:relative;text-align:left}

.feature--stack .feature__media .shot{width:100%;max-width:none;margin:0}
/* Dark chapter variation */
.section--ink .feature__text h2{color:#fff}
.section--ink .feature__list li{color:#c7c7cc}
.section--ink .lead{color:#a1a1a6}

/* .siogen-blocks: same stacking inside pattern-built pages */
.siogen-blocks .feature--stack{display:block;grid-template-columns:none}
@media (max-width:899px){
  .feature--stack .feature__media{width:100%}
}

/* ============================================================
   v0.6.2 — FINAL LAYOUT LAW: text above, picture below, always.
   Pictures run truly full width (100vw, no cap), centered with
   margin math so parallax transforms never fight the centering.
   ============================================================ */

/* No picture ever has a max width again. */
.shot{max-width:none}

/* Full-bleed helper: escapes any container, parallax-safe. */
.shot--hero,
.shot--full,
.feature .feature__media,
.siogen-blocks .feature .feature__media{
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.shot--hero{margin-top:clamp(28px,4vh,48px)}
.feature .feature__media .shot{width:100%;max-width:none;margin:0}
.shot img{width:100%}

/* EVERY feature stacks — old markup (side-by-side grid) included. */
.feature,
.feature--rev,
.siogen-blocks .feature{
  display:block !important;
  grid-template-columns:none !important;
  margin:clamp(56px,9vw,120px) 0;
}
.feature .feature__text{
  max-width:820px;margin:0 auto clamp(24px,4vw,44px);text-align:center;
}
.feature .feature__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  list-style:none;padding:0;margin:1.2rem 0 0;
}
.feature .feature__list li{padding-left:24px;position:relative;text-align:left}

/* Hero stage: column flex — copy block first, screenshot beneath. */
.hero__sticky{display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero__sticky .hero__bg{position:absolute}
@media (max-width:899px){
  .hero__sticky{display:block}
}

/* ============================================================
   v0.7 — Pages as first-class canvases + real-menu polish
   ============================================================ */
/* A page whose first section isn't a pinned hero still clears the
   fixed header gracefully. */
.siogen-blocks > .section:first-child,
.siogen-blocks > .trust:first-child{
  padding-top:calc(var(--header-h) + clamp(40px,6vw,84px));
}
/* Current page in the nav */
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a{color:var(--accent);font-weight:600}

/* ============================================================
   v0.7.1 — No dead travel + segment snapping.
   The pinned 185vh/170vh scenes are retired: every segment now
   occupies its natural height (hero ≥ one viewport), so nothing
   leaves blank runway before the next section. The --p engine
   still runs and rests at 1, so all scene styles settle at their
   final state. Scroll-snap glides the page from segment to
   segment (proximity, so tall chapters stay freely scrollable).
   ============================================================ */

/* ── Un-pin the scenes (all variants, all breakpoints) ── */
.hero[data-scene],
.hero.siogen-scene{height:auto !important;min-height:100vh;padding:0}
.hero__sticky,
.hero.siogen-scene .hero__sticky{
  position:relative !important;top:auto !important;min-height:100vh;
  overflow:visible;
  padding-top:calc(var(--header-h) + 5vh);padding-bottom:7vh;
}
.section--statement,
.section--statement.siogen-scene{height:auto !important;padding:clamp(88px,14vw,180px) 0}
.section--statement .section-head{position:static !important;min-height:0;display:block}

/* Scene transforms rest at their final state (no mid-travel offsets). */
.hero[data-scene] .hero__inner,
.hero.siogen-scene .hero__inner{transform:none !important}
.hero[data-scene] h1,
.hero.siogen-scene h1{transform:none !important}
.hero[data-scene] .eyebrow,
.hero[data-scene] .hero__note{opacity:1 !important}
.hero[data-scene] .shot--hero,
.hero.siogen-scene .shot{transform:none !important}

/* Statement copy: entrance handled by the reveal system again. */
.section--statement .eyebrow,
.section--statement h2,
.section--statement .lead{opacity:1 !important;transform:none !important;transition:opacity .6s ease,transform .6s ease}

/* ── Segment snapping (desktop; long sections stay scrollable) ── */
@media (min-width: 900px){
  /* Snapping is JS-driven (main.js) — CSS proximity snap was too timid
     with smooth scrolling + a fixed header. Margins still align anchors. */
  main > section,
  main > .hero,
  .siogen-blocks > .wp-block-group,
  .siogen-blocks > section{
    scroll-snap-align:start;
    scroll-margin-top:var(--header-h);
  }
  body.admin-bar main > section,
  body.admin-bar main > .hero,
  body.admin-bar .siogen-blocks > .wp-block-group,
  body.admin-bar .siogen-blocks > section{
    scroll-margin-top:calc(var(--header-h) + 32px);
  }
}


/* ============================================================
   v0.8 — Image-background text bands (.imgband) — three looks:
   centered statement · text left · frosted glass card. The photo
   fills the band (object-fit cover), drifts at 0.12 parallax, and
   sits under a scrim so text always stays readable. Responsive.
   ============================================================ */
.imgband{
  position:relative;overflow:hidden;min-height:76vh;
  display:flex;align-items:center;
  padding:clamp(72px,10vw,150px) 0;
}
.imgband__bg{
  position:absolute;left:0;right:0;top:-14%;bottom:-14%;
  margin:0;z-index:0;will-change:transform;
}
.imgband__bg img{width:100%;height:100%;object-fit:cover;display:block;filter:none}
.imgband::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.30) 45%,rgba(0,0,0,.55));
}
.imgband__content{position:relative;z-index:2;width:100%;color:#fff}
.imgband__content .eyebrow{color:#9be8b8}
.imgband__content h1,.imgband__content h2,.imgband__content h3{color:#fff}
.imgband__content .lead,.imgband__content p{color:rgba(255,255,255,.86)}
.imgband__content .wp-block-buttons{margin-top:1.4rem}

/* Look 1 — centered statement over the photo */
.imgband--center .imgband__content{max-width:860px;margin:0 auto;text-align:center;padding:0 24px}
.imgband--center h2{font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:-.03em}

/* Look 2 — text block left, photo breathing on the right */
.imgband--left::after{background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.38) 46%,rgba(0,0,0,.06) 78%)}
.imgband--left .imgband__content{max-width:var(--container);margin:0 auto;padding:0 24px}
.imgband--left .imgband__inner{max-width:560px;text-align:left}

/* Look 3 — frosted glass card floating on the photo */
.imgband--card::after{background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.30))}
.imgband--card .imgband__content{max-width:var(--container);margin:0 auto;padding:0 24px}
.imgband--card .imgband__inner{
  max-width:560px;padding:clamp(28px,4vw,44px);
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);border-radius:26px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.5);
}

@media (max-width:899px){
  .imgband{min-height:64vh}
  .imgband--left .imgband__inner,.imgband--card .imgband__inner{max-width:none}
}

/* ── Posts: article prose sits in a reading column, sections run full ── */
.post-hero{padding-bottom:clamp(24px,4vw,44px)}
.post-hero .post-meta{color:var(--muted);font-size:.9rem;margin-top:.8rem}
.siogen-blocks > p,
.siogen-blocks > h2:not(.wp-block-heading),
.siogen-blocks > h3,
.siogen-blocks > ul:not(.feature__list),
.siogen-blocks > ol,
.siogen-blocks > blockquote,
.siogen-blocks > figure.wp-block-image:not(.imgband__bg):not(.alignwide):not(.alignfull){
  max-width:760px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;
}
.siogen-blocks > figure.wp-block-image img{border-radius:14px}

/* ============================================================
   v1.0 — Block pages reach FULL feature parity with the home:
   editor alignments, hero blobs replaced by clean bands, trust
   row from plain paragraphs, identical text widths everywhere.
   ============================================================ */

/* Editor alignments: any image/group can go wide or truly full. */
.siogen-blocks .alignwide{width:min(1380px,94vw);max-width:none;margin-left:calc(50% - min(690px,47vw));margin-right:calc(50% - min(690px,47vw))}
.siogen-blocks .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.siogen-blocks .alignwide img,.siogen-blocks .alignfull img{width:100%;border-radius:0}

/* Any bare screenshot dropped on a block page runs full width too. */
.siogen-blocks > figure.wp-block-image.shot,
.siogen-blocks .shot{width:100%}

/* Trust row built from paragraph blocks (Homepage Builder output). */
.trust__row p{margin:0;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.trust__row{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,64px);flex-wrap:wrap}

/* Text widths on block pages == home page widths. */
.siogen-blocks .section-head{max-width:840px}
.siogen-blocks .feature__text{max-width:820px}
.siogen-blocks > p,
.siogen-blocks > h3,
.siogen-blocks > ul:not(.feature__list),
.siogen-blocks > ol,
.siogen-blocks > blockquote{max-width:820px}

/* Hero built from blocks: same stage as the shipped hero. */
.siogen-blocks .hero{background:
  radial-gradient(900px 480px at 18% 8%, #d3ecdd66, transparent 70%),
  radial-gradient(820px 460px at 85% 14%, #dcf5e466, transparent 70%),
  var(--bg);
}

/* ============================================================
   v1.0.1 — Auto-dressed pages: hero-grade title band + designed
   prose. This is what plain pages (e.g. Sample Page) get now.
   ============================================================ */
.page-hero{
  padding-top:calc(var(--header-h) + clamp(64px,9vw,120px)) !important;
  padding-bottom:clamp(28px,4vw,52px);
  background:
    radial-gradient(900px 480px at 18% 0%, #d3ecdd55, transparent 70%),
    radial-gradient(820px 460px at 85% 10%, #dcf5e455, transparent 70%),
    var(--bg);
}
.page-hero h1{margin:0}
.page-hero .eyebrow{display:block;margin-bottom:14px}

/* Designed prose column — homepage-grade typography & imagery. */
.entry-prose{max-width:820px}
.entry-prose p{font-size:1.08rem;line-height:1.72;color:var(--ink-2);margin:0 0 1.35em}
.entry-prose p:first-child{font-size:clamp(1.12rem,1.6vw,1.3rem);color:var(--ink)}
.entry-prose h2{margin:2.2em 0 .6em;font-size:clamp(1.7rem,3vw,2.4rem)}
.entry-prose h3{margin:1.8em 0 .5em}
.entry-prose ul,.entry-prose ol{margin:0 0 1.35em;padding-left:1.2em;color:var(--ink-2);line-height:1.7}
.entry-prose blockquote{margin:2em 0;padding:18px 26px;border-left:3px solid var(--accent);background:var(--bg-soft);border-radius:0 14px 14px 0}
.entry-prose a{color:var(--accent);text-decoration:none}
.entry-prose a:hover{text-decoration:underline}
/* Images inside prose behave like screenshots: full column, framed. */
.entry-prose figure,.entry-prose .wp-block-image{margin:2.2em 0}
.entry-prose img{
  width:100%;height:auto;border-radius:18px;display:block;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.16));
}
/* Wide/full alignments still break out of the column. */
.entry-prose .alignwide{width:min(1380px,94vw);max-width:none;margin-left:calc(50% - min(690px,47vw))}
.entry-prose .alignfull{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}

/* ============================================================
   v1.0.2 — LAYOUT LOCKDOWN for block-built pages + wide prose
   imagery. When a page is edited, Gutenberg quietly re-saves
   groups with its own layout engine (flow/constrained classes +
   generated child rules) — which turned the Modules grid and the
   Stats band into vertical lists. These rules are immune to it.
   ============================================================ */

/* Modules: always a responsive card grid, whatever WP injects. */
.modules{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
  gap:18px !important;
}
.modules > *{max-width:none !important;margin:0 !important}

/* Stats band (black bg, huge white numbers): always a row grid. */
.stats{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important;
  gap:36px !important;text-align:center;
}
.stats > *{max-width:none !important;margin:0 !important}

/* Steps trio + trust row: same protection. */
.steps{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:18px !important;
}
.steps > *{max-width:none !important;margin:0 !important}
.trust__row{
  display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(24px,5vw,64px) !important;
}
.trust__row > *{margin:0 !important;max-width:none !important}

/* Buttons rows keep centering even after an editor re-save. */
.hero .wp-block-buttons,.cta .wp-block-buttons{justify-content:center}

@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr) !important}
}

/* ── Prose imagery: 50% wider than the text column ──
   Text column is 820px → images get 1230px, centered breakout,
   clamped to 92vw so phones/tablets stay clean. Wide/full
   alignments (1380px / 100vw) still override this. */
.entry-prose figure.wp-block-image:not(.alignwide):not(.alignfull),
.entry-prose > .wp-block-gallery{
  width:min(1230px,92vw);
  max-width:none;
  margin-left:calc(50% - min(615px,46vw));
  margin-right:calc(50% - min(615px,46vw));
}
@media (max-width:899px){
  .entry-prose figure.wp-block-image:not(.alignwide):not(.alignfull){
    width:100%;margin-left:0;margin-right:0;
  }
}

/* ============================================================
   v1.2.1 — Dropdown navigation. The fallback menu shows EVERY
   page (first five inline, the rest under "More ▾"); assigned
   menus support one submenu level. Frosted panel, keyboard
   friendly (opens on :focus-within), mobile lists indent.
   ============================================================ */
.nav-menu li{position:relative}
.nav-menu li.menu-item-has-children > a::after{
  content:"";display:inline-block;margin-left:6px;
  width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;
}
.nav-menu .sub-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:220px;padding:8px;margin:0;list-style:none;
  background:rgba(251,251,253,.92);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -24px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;
  z-index:400;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* Hover bridge so the panel doesn't close crossing the gap. */
.nav-menu .sub-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-menu .sub-menu li{display:block}
.nav-menu .sub-menu a{
  display:block;padding:9px 12px;border-radius:9px;white-space:nowrap;
  font-size:.92rem;color:var(--ink);
}
.nav-menu .sub-menu a:hover{background:rgba(0,0,0,.05);color:var(--accent)}
.nav-menu .sub-menu .current-menu-item > a{color:var(--accent);font-weight:600}

/* Mobile: submenus flow inline, indented. */
.mobile-nav .sub-menu{
  position:static;transform:none;opacity:1;visibility:visible;
  background:transparent;border:none;box-shadow:none;padding:0 0 0 16px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.mobile-nav li.menu-item-has-children > a::after{content:none}

/* ============================================================
   v1.3 — Screenshot galleries: several pictures in one frame.
   One image visible at a time; scroll gestures swap them (JS),
   dots are always clickable (touch fallback). Crossfade.
   ============================================================ */
.shot--gallery{position:relative}
.shot--gallery img{transition:opacity .45s ease}
.shot--gallery img:not(.on){
  position:absolute;left:0;top:0;width:100%;height:auto;
  opacity:0;pointer-events:none;
}
.shot--gallery img.on{position:relative;opacity:1}
/* Pattern variant: images arrive wrapped in figures — flatten them. */
.shot--gallery figure.wp-block-image{margin:0}
.shot--gallery figure.wp-block-image:has(img:not(.on)){position:absolute;left:0;top:0;width:100%}
.shot-dots{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-30px;
  display:flex;gap:9px;z-index:5;
}
.shot--gallery{margin-bottom:38px}   /* room for the dots */
.shot-dots button{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(110,110,115,.35);transition:background .25s,transform .25s;
}
.shot-dots button:hover{transform:scale(1.25)}
.shot-dots button.on{background:var(--accent)}
.section--ink .shot-dots button{background:rgba(255,255,255,.3)}
.section--ink .shot-dots button.on{background:var(--accent-2)}

/* ============================================================
   v1.3.2 — Gallery stage refinement (best-practice carousel):
   a FIXED-ratio stage (set from the first image, capped to the
   viewport) with all pictures layered inside via object-fit:
   contain. The frame never resizes on swap → no page reflow, no
   drifting snap positions, and every picture fits entirely.
   Softer, more natural crossfade with a whisper of scale.
   ============================================================ */
.shot--gallery{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;                     /* JS refines from image 1 */
  max-height:calc(100vh - var(--header-h) - 2 * var(--shot-pad));
  margin-bottom:2.2rem;
}
.shot--gallery img,
.shot--gallery img.on,
.shot--gallery img:not(.on){
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;
  opacity:0;pointer-events:none;
  transform:scale(1.012);
  transition:opacity .5s ease,transform .65s cubic-bezier(.2,.7,.2,1);
  filter:none;                             /* stage owns the shadow */
}
.shot--gallery img.on{opacity:1;transform:scale(1);pointer-events:auto}
.shot--gallery figure.wp-block-image,
.shot--gallery figure.wp-block-image:has(img:not(.on)){
  position:static;margin:0;width:auto;
}
.shot--gallery figure.wp-block-image img{position:absolute}

/* Dots live ON the stage now (the stage clips overflow): a quiet
   frosted pill, readable on light and dark screenshots alike. */
.shot--gallery .shot-dots{
  bottom:14px;top:auto;
  background:rgba(20,20,22,.34);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  padding:7px 11px;border-radius:999px;
}
.shot--gallery .shot-dots button{background:rgba(255,255,255,.5)}
.shot--gallery .shot-dots button.on{background:#fff}

/* ============================================================
   v1.4.1 — FIT-WHOLE-PICTURE sizing. Every screenshot renders as
   large as possible while staying FULLY visible: full width when
   its height fits under the header, otherwise the width shrinks
   until the whole image fits vertically. (Image-background bands
   are exempt — they crop by design.)
   ============================================================ */
:root{--shot-maxh:calc(100vh - var(--header-h) - 2 * var(--shot-pad))}

/* Single-image frames: the img sizes itself against BOTH axes. */
.shot:not(.shot--gallery) img{
  display:block;width:auto;height:auto;
  max-width:100%;
  max-height:var(--shot-maxh);
  margin-left:auto;margin-right:auto;
}
/* Prose images: same rule, keep the reading-column breakout caps. */
.entry-prose img{
  width:auto;height:auto;max-width:100%;
  max-height:var(--shot-maxh);
  margin-left:auto;margin-right:auto;
}
/* Gallery stages get their width from JS (aspect × available height);
   this is the no-JS fallback. */
.shot--gallery{width:100%;margin-left:auto;margin-right:auto}
/* Image-background bands keep covering their band. */
.imgband__bg img{width:100%;height:100%;max-height:none;object-fit:cover}

/* ============================================================
   v1.5 — MEGA MENU. Up to 10 top entries; each entry that has
   children opens a full-width, Apple-style dropdown. Built from
   the assigned "primary" menu (Appearance → Menus). Plain links
   for childless entries. Desktop = fixed-width panel under the
   header; mobile = tap-to-expand accordion.
   ============================================================ */

/* Top-level rows fill the header height so hover flows straight
   into the panel with no dead gap. */
.site-nav .nav-menu > li{display:flex;align-items:center;height:100%;position:relative}
.site-nav .nav-menu > li.has-mega{position:relative}   /* dropdown anchors under the item */
.nav-top{display:flex;align-items:center;height:100%;white-space:nowrap;color:var(--ink-2);font-weight:500;font-size:.95rem}
.nav-top:hover{color:var(--ink)}
.nav-menu > li.is-current > .nav-top{color:var(--ink);font-weight:600}

/* Caret on entries that have a dropdown. */
.nav-caret{
  display:inline-block;margin-left:6px;width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .22s ease,opacity .2s ease;
}
.has-mega:hover .nav-caret,
.has-mega:focus-within .nav-caret,
.has-mega.open .nav-caret{transform:rotate(225deg) translateY(2px);opacity:.85}

/* Compact dropdown card anchored directly under the menu item. */
.mega{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:230px;max-width:min(92vw,560px);padding:8px;
  background:rgba(251,251,253,.98);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:400;
}
/* Hover bridge across the header/panel seam. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.open > .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.mega-inner{max-width:none;margin:0;padding:0}
/* 3-level menus: titled columns sit side by side inside the card. */
.mega--cols{display:flex;flex-wrap:wrap;gap:18px;padding:6px 8px}
.mega--grid{display:block}
.mega-col{min-width:150px}

/* Column heading (from a 3rd-level parent). */
.mega-col-title{
  display:block;margin:2px 0 8px;padding:0 10px;font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.mega-col-title:hover{color:var(--accent)}

.mega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mega-list a{display:block;padding:8px 12px;border-radius:9px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.mega-list a:hover{background:rgba(0,0,0,.05)}
.mega-list a:hover .mega-label{color:var(--accent)}
.mega-label{display:block;font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.mega-desc{display:block;margin-top:1px;font-size:.82rem;font-weight:400;color:var(--muted);white-space:normal}
.mega-list a.is-current .mega-label{color:var(--accent)}

/* Lead column (childless items): a touch of emphasis, not oversized. */
.mega-list--lead .mega-label{font-size:1.02rem;font-weight:600}

/* Simple 2-level menu: a single vertical dropdown list. */
.mega-list--grid{display:flex;flex-direction:column;gap:1px}
.mega-list--grid .mega-label{font-size:.95rem;font-weight:500;letter-spacing:-.01em}

/* ── Mobile accordion (inside .mobile-nav) ── */
.m-menu{list-style:none;margin:0 0 1rem;padding:0}
.m-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line)}
.m-row > a{flex:1 1 auto;display:block;padding:.75rem .2rem;color:var(--ink);font-weight:600;font-size:1.12rem}
.m-expand{
  flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;
}
.m-expand::before,.m-expand::after{
  content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;background:var(--ink);border-radius:2px;
  transform:translate(-50%,-50%);transition:opacity .2s ease,transform .2s ease;
}
.m-expand::after{transform:translate(-50%,-50%) rotate(90deg)}
.m-expand[aria-expanded="true"]::after{opacity:0}
.m-sub{display:flex;flex-direction:column;padding:.2rem 0 .7rem 14px}
.m-sub > a{padding:.55rem .2rem;color:var(--ink-2);font-weight:500;font-size:1.02rem;border-bottom:1px solid var(--line)}
.m-group-title{display:block;padding:.7rem .2rem .15rem;font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}

/* Panels never animate for reduced-motion users. */
@media (prefers-reduced-motion: reduce){
  .mega{transition:none}
  .nav-caret,.m-expand::before,.m-expand::after{transition:none}
}

/* ============================================================
   v1.6 — Early-access signup: popup modal, form, inline block.
   ============================================================ */
.siogen-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.siogen-modal[hidden]{display:none}
.siogen-modal.is-open{display:flex}
.siogen-modal:target{display:flex}          /* no-JS: the #anchor reveals it */
.siogen-modal__backdrop{
  position:absolute;inset:0;display:block;cursor:pointer;
  background:rgba(10,14,22,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.siogen-modal__card{
  position:relative;z-index:1;width:min(480px,100%);text-align:center;
  background:#fff;border-radius:20px;padding:clamp(28px,4vw,44px);
  box-shadow:0 40px 90px -30px rgba(10,20,40,.5);
  animation:siogen-pop .28s cubic-bezier(.2,.7,.2,1);
}
@keyframes siogen-pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.siogen-modal__x{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:rgba(0,0,0,.05);transition:background .18s ease;
}
.siogen-modal__x:hover{background:rgba(0,0,0,.1)}
.siogen-modal__x::before,.siogen-modal__x::after{
  content:"";position:absolute;width:15px;height:2px;background:var(--ink-2);border-radius:2px;
}
.siogen-modal__x::before{transform:rotate(45deg)}
.siogen-modal__x::after{transform:rotate(-45deg)}

.siogen-sub-badge{
  display:inline-block;margin-bottom:12px;padding:4px 11px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:rgba(33,125,71,.12);
}
.siogen-modal__card h2{font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.02em;margin:0 0 .5rem}
.siogen-sub-lead{color:var(--muted);margin:0 auto 1.4rem;max-width:42ch}

.siogen-sub-row{display:flex;gap:8px}
.siogen-sub-email{
  flex:1 1 auto;min-width:0;padding:.85rem 1rem;font-size:1rem;font-family:inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;
}
.siogen-sub-email::placeholder{color:var(--muted)}
.siogen-sub-email:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(33,125,71,.18)}
.siogen-sub-submit{flex:0 0 auto;white-space:nowrap}
.siogen-sub-submit[disabled]{opacity:.6;cursor:progress}

/* Screen-reader-only honeypot (bots fill it; humans never see it). */
.siogen-sub-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

.siogen-sub-msg{margin:.9rem 0 0;font-size:.95rem;font-weight:500}
.siogen-sub-msg.is-ok{color:var(--accent)}
.siogen-sub-msg.is-error{color:#c0362c}
.siogen-sub-note{margin:1rem 0 0;font-size:.8rem;color:var(--muted)}
.siogen-sub-form.is-done .siogen-sub-row{display:none}   /* collapse inputs after success */

/* Inline block via [siogen_signup] */
.siogen-sub-inline{
  max-width:540px;margin:2.4rem auto;text-align:center;
  padding:clamp(26px,4vw,44px);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:20px;
}
.siogen-sub-inline h3{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.02em;margin:0 0 .4rem}

@media (max-width:520px){
  .siogen-sub-row{flex-direction:column}
  .siogen-sub-submit{width:100%;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .siogen-modal__card{animation:none}
  .siogen-modal__x,.siogen-sub-email{transition:none}
}

/* ============================================================
   v1.7 — New page modules: FAQ accordion + pull quote.
   (Cards, stats, steps, logos and image bands reuse existing
   section styles.)
   ============================================================ */
.siogen-faq{max-width:820px;margin:0 auto}
.siogen-faq__item{border-bottom:1px solid var(--line)}
.siogen-faq__item > summary{
  cursor:pointer;list-style:none;position:relative;
  padding:20px 44px 20px 4px;font-weight:600;font-size:1.12rem;color:var(--ink);
}
.siogen-faq__item > summary::-webkit-details-marker{display:none}
.siogen-faq__item > summary::after{
  content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease;
}
.siogen-faq__item[open] > summary::after{transform:rotate(225deg)}
.siogen-faq__a{padding:0 4px 20px;color:var(--ink-2);line-height:1.7;max-width:72ch}

.siogen-quote{max-width:860px;margin:0 auto;text-align:center}
.siogen-quote blockquote{
  margin:0;font-weight:500;letter-spacing:-.02em;color:var(--ink);
  font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.35;
}
.siogen-quote blockquote::before{content:"\201C"}
.siogen-quote blockquote::after{content:"\201D"}
.siogen-quote figcaption{margin-top:1.1rem;color:var(--muted);font-size:.98rem;font-weight:500}