/* ============================================================
   romi.css — Romi Gubes / Care Unfiltered page
   Page slug: romi
   Block Editor companion stylesheet

   Sections:
     1.  Fonts & token additions
     2.  Page layout fix
     3.  Shared page utilities (duplicated from future.css/product.css
         — migrate to main.css when adopted site-wide)
     4.  Hero
     5.  Press strip
     6.  Stats
     7.  Thinking / Articles
     8.  Events
     9.  Story
    10.  Nasdaq Feature
    11.  Subscribe
    12.  Animation initial states
    13.  Responsive
    14.  Reduced motion
============================================================ */

/* ── 1. Fonts & token additions ────────────────────────────
   Tokens not yet in main.css; mirrors product.css :root block.
   Migrate when adopted across ≥3 pages.
─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&display=swap');
/* TODO: Move to wp_enqueue_style() in assets.php (render-blocking). */

:root {
    --ff-script:             'Caveat', cursive;

    --radius-card:           20px;
    --radius-card-md:        12px;
    --radius-card-sm:        10px;
    --radius-pill:           9999px;

    --ease-out:              cubic-bezier(0.215, 0.610, 0.355, 1.000);
    --ease-spring:           cubic-bezier(0.34,  1.56,  0.64,  1.000);

    --shdw-md-light:         0 10px 25px var(--shadow-color, #00000012), 0 6px 20px var(--shadow-color, #00000012);
    --shdw-md:               0 10px 25px var(--shadow-color, #00000024), 0 6px 20px var(--shadow-color, #00000024);
    --shdw-xl:               0 30px 80px var(--shadow-color, #00000024), 0 20px 70px var(--shadow-color, #0000001f);

    --grad-text-highlight:   radial-gradient(ellipse at 50% 140%, var(--c-teal-500) 0%, var(--c-blue-500) 70%, var(--c-blue-700) 80%);
    --grad-text-highlight2:  radial-gradient(ellipse at 50% 140%, var(--c-blue-700) 0%, var(--c-blue-500) 30%, var(--c-teal-500) 80%);
    --grad-dark:             linear-gradient(150deg, #001729 0%, #002B4D 60%, #004275 100%);
    --grad1:                 linear-gradient(101deg, rgba(0,201,224,1) 0%, rgba(0,108,192,1) 100%);

    --c-gray-25:             #f5f5f7;

    /* Page-specific */
    --romi-press-border:     rgba(0,0,0,0.07);
    --grad-article-visual:   linear-gradient(160deg, var(--c-blue-25) 0%, var(--c-teal-50) 100%);
}

/* ── 2. Page layout fix ────────────────────────────────────
   Salient sets body { overflow: hidden } which breaks
   position: sticky. Add the real page ID once created.
─────────────────────────────────────────────────────────── */
body.page-id-5053 { overflow: visible; } 
/* Scope tightly to the romi page and the speaks section */

/* ── Video Player Overrides ───────────────────────────────────────── */
.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container { transform: translateY(-12.963%); /*<-- this is a fix for the re-adjustment flicker of mobile videos in the video popup overlay. Not set with !important to ensure that horiztonal videos are able to set their own transform dynamically  */ }
.gcontainer { display: grid; place-items: center; }
.gcontainer #glightbox-slider { max-height: 98%; }
@media (min-width: 769px) {
  .goverlay { background: #001729; opacity: .9; }
  }
.glightbox-mobile .goverlay { background: #001729; opacity: .9; }
.plyr__controls [data-plyr="pip"] { display: none !important; /* Hides the PIP option in player */ }
.glightbox-container :is(.gslide-video,.gslide-local) { margin: 0 auto;}
@media (min-width: 480px) {
#glightbox-body.glightbox-container.is-landscape :is(.gslide-video,.gslide-local) { max-width: 80% !important; }
}

/* Portrait lightbox — constrain height so it doesn't overflow viewport 
#glightbox-body.is-portrait .gslide-media {
  max-width: px or %; 
}

/* Landscape lightbox — full-width treatment 
#glightbox-body.is-landscape .gslide-media {
  max-width: px or %;
}*/

/* ── 3. Shared page utilities ──────────────────────────────
   Duplicated from future.css / product.css.
   Migrate to main.css when adopted site-wide.
─────────────────────────────────────────────────────────── */
.eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: var(--fw-sb); letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-blue-500); margin-bottom: var(--s-sm); width: fit-content; line-height: 1.2;
  border-radius: var(--radius-pill); padding: .5em 1em .4em !important; }
p.intro { font-size: var(--fs-xl); line-height: 1.55; color: var(--c-gray-400); padding: 0; }
.grad-text { background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Stats — reused from future.css (migrate to main.css) */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-md); max-width: 880px; margin-inline: auto; }
.stat-card { padding: var(--s-md) var(--s-base); border-radius: var(--radius-card); background: var(--c-lightest); display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-number { font-family: 'Poppins', sans-serif; font-size: var(--fs-4xl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; display: block; background: var(--grad-text-highlight2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding: 0; margin-bottom: .75rem; }
.stat-label { font-size: var(--fs-sm); color: var(--c-gray-400); font-weight: var(--fw-sb); line-height: 1.4; max-width: 20ch; text-wrap: balance; display: block; padding: 0; }

/* ── 4. Hero ─────────────────────────────────────────────── */
.romi-hero { padding: 0; overflow: hidden; margin-top: 0 !important; }
/* Full-viewport split — columns run edge to edge, no constrained cap */
.romi-hero .wp-block-columns { margin: 0 auto; max-width: 1300px; gap: var(--s-xl); flex-wrap: nowrap; padding: var(--s-2xl) 0; }
.romi-hero .wp-block-column .eyebrow { display: inline-block; font-size: var(--fs-xs); }
.romi-hero .wp-block-column:nth-of-type(2) img { border-radius: var(--radius-card); }

/* Left column */
.romi-hero__content { display: flex; flex-direction: column; justify-content: center; gap: var(--s-md); position: relative; z-index: 1; }

/* Script series label */
.romi-overline { font-family: var(--ff-script); font-size: var(--fs-2xl); font-weight: 400; display: block; margin: 0 0 .5ch 0; line-height: 1.2; padding: 0; letter-spacing: -0.015em; }
.romi-hero__content .romi-overline  {margin: 0 0 -1ch 0; color: var(--c-blue-400); }
/* h1 */
.romi-hero__headline { font-family: 'Poppins', sans-serif; font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; color: var(--c-gray-600); margin: 0; text-wrap: balance; }
.romi-hero__headline em { font-style: normal; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Sub paragraph */
.romi-hero__sub { font-size: var(--fs-xl); line-height: 1.6; color: var(--c-gray-400); max-width: 44ch; padding: 0; margin: 0; text-wrap: balance; }

/* Identity block */
.romi-identity { padding: var(--s-sm) 0 !important; border-top: 1px solid var(--c-gray-50); border-bottom: 1px solid var(--c-gray-50); }
.romi-identity .wp-block-group { gap: 0 !important; }
.romi-identity__name { padding: 0; margin: 0; font-size: var(--fs-lg); line-height: 1.2; color: var(--c-gray-600); }
.romi-identity__name strong { font-weight: var(--fw-sb); }
.romi-identity__role { padding: 0; margin: 0; font-size: var(--fs-base); color: var(--c-gray-400); }
.romi-identity__tag { padding: 0 0 0 var(--s-md); margin: 0; font-size: var(--fs-xs); color: var(--c-gray-400); line-height: 1.5; border-left: 1px solid var(--c-gray-100); }

/* Right column — cover block fills the column */
.romi-hero__visual { padding: 0 !important; }

/* ── 5. Press strip ──────────────────────────────────────── */
/* Note: .romi-press logos are text placeholders.
   Replace <p> elements with wp:image blocks (SVG logos)
   for production. The CSS will still apply. */

.romi-press__logos { gap: 1rem;  align-items: center !important;}
.romi-press__logo { padding-right: 1rem; border-right: 1px solid var(--romi-press-border); height: 100%; align-content: center;}
.romi-press__logo img { vertical-align: middle; }
.romi-press__logo:last-child { border-right: none; padding-right: 0; margin-right: 0; }

/* ── 6. Stats ────────────────────────────────────────────── */
.romi-stats__header { margin-top: var(--s-lg);margin-bottom: var(--s-lg); text-align: center;}
.romi-stats__heading { font-family: 'Poppins', sans-serif; font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--c-gray-600); margin: var(--s-xs) 0 0; text-wrap: balance; }
.romi-stats__heading em { font-style: normal; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; }
/* Override future.css 2-col to 3-col for this page's 3 stats */
.romi-story .stats-grid { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
.romi-story .stat-card { border: 0.5px solid var(--c-gray-100); }
.stat-sub { font-family: var(--ff-script); font-size: var(--fs-xl); margin-top: 0.2em; display: block; padding: 0; letter-spacing: -0.015em; }

/* ── 7. Thinking / Articles ──────────────────────────────── */
.romi-thinking { padding: var(--s-3xl) var(--s-lg); background: #fff; }
.romi-thinking__header { margin-bottom: var(--s-xl); }
.romi-thinking__header .wp-block-group { gap: 0 !important; }
.romi-thinking h2 { font-family: 'Poppins', sans-serif; font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
/* "View all writing →" inline text link */
.romi-section-link { margin: 0; padding: 0; }
.romi-section-link a { font-size: var(--fs-sm); color: var(--c-link); text-decoration: none; font-weight: var(--fw-sb); letter-spacing: 0.02em; border-bottom: 1px solid rgba(0,145,255,0.3); transition: border-color 200ms ease; padding-bottom: 1px; }
.romi-section-link a:hover { border-color: var(--c-link); }

/* Featured article card */
.romi-article-featured { border: 0.5px solid var(--c-gray-50); border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--s-md); box-shadow: var(--shdw-md-light); transition: box-shadow 0.3s var(--ease-out); max-width: 1300px; }
.romi-article-featured:hover { box-shadow: var(--shdw-md); }
.romi-article-featured .wp-block-columns { gap: 0 !important; margin: 0; }
.romi-article-featured .wp-block-column { flex-basis: 50% !important; min-width: 0; }
/* Content column */
.romi-article-featured__content { padding: var(--s-xl) var(--s-lg); display: flex; flex-direction: column; gap: var(--s-sm); }
.romi-article-featured__content h3 { font-family: 'Poppins', sans-serif; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; color: var(--c-gray-600); margin: 0; text-wrap: balance; }
.romi-article-featured__content :is(ul,li) { list-style: none; padding: 0; margin: 0; }
.romi-article-featured__content :is(li.wp-block-post) { display: flex; flex-direction: column; gap: var(--s-xs);  }
.romi-article-featured__content .wp-block-post-excerpt__more-link { position: relative; padding: 0; margin: 0;}
.romi-article-featured__content .wp-block-post-excerpt__more-link a { position: absolute; inset: 0; }
/* Visual column — gradient background with decorative quote mark */
.romi-article-featured__visual { background: var(--grad-mesh); padding: var(--s-xl) var(--s-lg); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.romi-article-featured__visual::before { content: ''; display: block; width: 32px; height: 27px; background-image: url('https://sensistg.wpenginepowered.com/wp-content/uploads/2024/06/icon_quotemark.svg');
  background-size: contain; background-repeat: no-repeat; margin-bottom: var(--s-xs); position: relative; border: none; filter: var(--ftr-blue-500); }
.romi-article-featured__visual .romi-pullquote { border-left: none !important; padding-left: 0 !important; text-align: left; position: relative; z-index: 1; }
/* Publication tag pill */
.romi-article-pub { display: inline-flex; align-items: center; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--fw-sb); color: var(--c-blue-500); background: var(--c-blue-50); padding: 0.35em 1em; border-radius: var(--radius-pill); width: fit-content; margin: 0; }
/* Pull quote — base (overridden per context above) */
.romi-pullquote { font-size: var(--fs-2xl); line-height: 1.45; color: var(--c-gray-600); font-style: italic; padding-left: var(--s-md); margin: 0; text-wrap: balance; }
/* Article excerpt */
.romi-article-excerpt { font-size: var(--fs-md); line-height: 1.65; color: var(--c-gray-400); flex: 1; padding: 0; margin: 0; }
/* Article meta row */
.romi-article-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-sm); border-top: 1px solid var(--c-gray-50); padding-top: var(--s-sm); margin-top: auto; }
.romi-article-meta .wp-block-group { gap: 0 !important; }
.romi-article-meta p { font-size: var(--fs-xs); color: var(--c-gray-300); padding: 0; margin: 0; }
/* "Read the piece →" button — inherits Kadence global fill radius */
.romi-article-featured .wp-block-buttons .wp-block-button a.wp-block-button__link, :is(.romi-article-featured, .romi-posts-grid li) .kb-button { background: none; color: var(--c-blue-400); border: none; padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-sb); font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3em; transition: gap 0.2s; border-radius: 0;  position: static; }
:is(.romi-article-featured, .romi-posts-grid li) .kb-button:hover { background: none; color: var(--c-blue-500); text-decoration: underline; }
:is(.romi-article-featured, .romi-posts-grid li) a.kb-button::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card-md); z-index: 1; }
.romi-article-featured .wp-block-buttons .wp-block-button a.wp-block-button__link:hover { gap: 0.6em; }

/* Small article cards grid
   Note: this grid uses wp:group (not ul/li).
   Add role="list" to .romi-articles-grid and role="listitem"
   to each .romi-article-sm if converting to a wp:html wrapper. */
.romi-articles-grid, .romi-posts-grid ul.wp-block-post-template { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); max-width: 1300px; margin-bottom: var(--s-lg); }
.romi-posts-grid ul.wp-block-post-template { margin: 0 auto var(--s-md); }
.romi-article-sm, .romi-posts-grid li { border: 0.5px solid var(--c-gray-50); border-radius: var(--radius-card-md); padding: var(--s-md); position: relative; isolation: isolate; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease-out);  background: var(--c-lightest); display: flex; flex-direction: column; gap: var(--s-xs); }
:is(.romi-article-sm, .romi-posts-grid li):hover { border-color: var(--c-blue-100); box-shadow: var(--shdw-md-light); transform: translateY(-2px); }
:is(.romi-article-sm, .romi-posts-grid li) .romi-article-pub { color: var(--c-blue-500); background: var(--c-blue-50); }
:is(.romi-article-sm, .romi-posts-grid li) h3 { font-family: 'Poppins', sans-serif; font-size: var(--fs-xl); letter-spacing: -0.02em; line-height: 1.3; color: var(--c-gray-600); margin: 0; font-weight: 600; text-wrap: balance; }
:is(.romi-article-sm, .romi-posts-grid li) :is(.romi-article-excerpt, .wp-block-post-excerpt__excerpt) { font-size: var(--fs-sm); }
/* Article card footer */
.romi-article-sm__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); margin-top: auto; padding-top: var(--s-sm); border-top: 1px solid var(--c-gray-50); width: 100%; }
.romi-article-sm__date { font-size: var(--fs-xs); color: var(--c-gray-300); padding: 0; margin: 0; }
/* Stretched link — whole card is the tap target */
.romi-article-sm .wp-block-buttons { position: static; }
.romi-article-sm .wp-block-buttons .wp-block-button a.wp-block-button__link { font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--c-blue-400); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3em; transition: gap 0.2s; padding: 0; background: none; border: none; border-radius: 0; position: static; }
.romi-article-sm .wp-block-buttons .wp-block-button a.wp-block-button__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card-md); z-index: 1; }
.romi-article-sm:hover .wp-block-buttons .wp-block-button a.wp-block-button__link { gap: 0.6em; }
.romi-article-sm .wp-block-buttons .wp-block-button a.wp-block-button__link:focus-visible::after { outline: 3px solid var(--c-blue-400); outline-offset: 3px; }

/* ── 8. Events ───────────────────────────────────────────── */
.romi-events { padding: var(--s-3xl) var(--s-lg); background: var(--c-gray-25); }
.romi-events .romi-overline { margin-bottom: var(--s-xs); }
.romi-events h2 { font-family: 'Poppins', sans-serif; font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--c-gray-600); margin: var(--s-xs) 0 var(--s-xl); text-wrap: balance; }
/* Note: .romi-events-grid uses wp:group (not ul/li).
   Add role="list" / role="listitem" via wp:html wrapper if required. */
.romi-events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md); }
.romi-event-card { background: var(--c-lightest); border: 0.5px solid var(--c-gray-50); border-radius: var(--radius-card-md); padding: var(--s-md); transition: border-color 0.25s, transform 0.25s var(--ease-out); display: flex; flex-direction: column; gap: var(--s-xs); }
.romi-event-card:hover { border-color: var(--c-blue-100); transform: translateY(-2px); }
.romi-event-type { display: flex; align-items: center; gap: 0.6em; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gray-300); padding: 0; margin: 0; }
.romi-event-type::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--grad1); flex-shrink: 0; }
.romi-event-card h3 { font-family: 'Poppins', sans-serif; font-size: var(--fs-lg); font-weight: var(--fw-sb); color: var(--c-gray-600); margin: 0; line-height: 1.3; text-wrap: balance; }
.romi-event-detail { font-size: var(--fs-sm); color: var(--c-gray-400); padding: 0; margin: 0; }

/* ── 8c. Video card — Kadence Video Popup variant ──────────── */
.video-cards-grid { display: grid; grid-template-rows: repeat(2, 1fr) 1.25fr; gap: var(--s-md); max-width: 1300px; }
.video-cards-grid .video-card:nth-child(1) { grid-area: 1 / 1 / 3 / 5; }
.video-cards-grid .video-card:nth-child(2) { grid-area: 1 / 5 / 2 / 7; }
.video-cards-grid .video-card:nth-child(3) { grid-area: 2 / 5 / 3 / 7; }
.video-cards-grid .video-card:nth-child(4) { grid-area: 3 / 1 / 4 / 4; }
.video-cards-grid .video-card:nth-child(5) { grid-area: 3 / 4 / 4 / 7; }
@media (min-width: 768px) {
   .video-cards-grid { grid-template-columns: repeat(6, 1fr) !important; }
}

/* ─── Card container ──────────────────────────────────────── */
.video-card { position: relative; overflow: hidden; border-radius: var(--radius-card); background: var(--c-gray-700); /* Flex column lets the text siblings stack naturally at the bottom.
     Height is driven by the parent column/grid (bento layout). */ display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; cursor: pointer; transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out); height: 100%; min-height: 18rem;}
.video-card:hover { transform: translateY(-5px) scale(1.006); box-shadow: 0 28px 70px rgba(0,8,25,.42), 0 8px 28px rgba(0,8,25,.26); }
/* ─── Kadence Video Popup: background layer ───────────────── */
/* Pull the entire Kadence block out of flex flow; pin it to
   fill the card. The card's flex context then only sees the
   text siblings, which stack at the bottom. */
.video-card .wp-block-kadence-videopopup { position: absolute !important; inset: 0 !important; z-index: 0; }
.video-card .kadence-video-popup-wrap { height: 100% !important; border-radius: 0 !important; /* card handles the border-radius */ }
/* Kill Kadence's padding-bottom aspect-ratio trick entirely.
   The card height is set by the parent — we just fill it. */
.video-card .kadence-video-intrinsic { position: absolute !important; inset: 0 !important; height: 100% !important; padding-bottom: 0 !important; padding-top: 0 !important; overflow: hidden; }
/* Poster image: cover-fill the card */
.video-card .kadence-video-poster { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; /* !important overrides Smush's opacity transition.
     Only the transform transition is applied here.
     If Smush causes a visible flash on load, also add loading="eager"
     to the poster image in the Kadence block's media settings. */ transition: transform 700ms cubic-bezier(0.2, 1, 0.22, 1) !important; }
.video-card:hover .kadence-video-poster { transform: scale(1.06); }
/* ─── Gradient overlay ────────────────────────────────────── */
/* Kadence's .kadence-video-overlay is a flat coloured div.
   Replace it entirely with a bottom-up gradient for legible text. */
.video-card .kadence-video-overlay { position: absolute !important; inset: 0 !important; z-index: 1; background: linear-gradient( to top, rgba(0, 8, 24, 0.97) 0%, rgba(0, 8, 24, 0.62) 30%, rgba(0, 8, 24, 0.20) 60%, rgba(0, 8, 24, 0.04) 100% ) !important; opacity: 1 !important; pointer-events: none; transition: opacity 360ms ease; }
.video-card:hover .kadence-video-overlay { opacity: .88 !important; }
/* ─── Source label (top-right, via ::before) ──────────────── */
/* Requires source--vimeo or source--youtube on .video-card.
   z-index 5 keeps it above the popup link (z: 4). */
.video-card:is(.source--vimeo, .source--youtube)::before { position: absolute; top: .85rem; right: .85rem; z-index: 5; font-size: .5625rem; font-weight: var(--fw-b); letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: .28em .72em; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.12); pointer-events: none; user-select: none; line-height: 1; }
.video-card.source--vimeo::before { content: 'Vimeo'; color: #2dd9ea; }
.video-card.source--youtube::before { content: 'YouTube'; color: rgba(255,110,110,.9); }
/* ─── Kadence popup link ──────────────────────────────────── */
.video-card .kadence-video-popup-link { position: absolute !important; inset: 0 !important; z-index: 4 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: var(--radius-card); }
.video-card .kadence-video-popup-link:focus-visible { outline: 3px solid var(--c-blue-400); outline-offset: 3px; }
/* ─── Play button (kb-svg-icon-wrap) ──────────────────────── */
.video-card .kb-svg-icon-wrap { /* Reset any Kadence translate-centering; flex parent handles it */ position: relative !important; transform: none !important; /* Sizing */ display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; width: 50px !important; height: 50px !important; /* Appearance */ border-radius: 50% !important; background: rgba(255,255,255,.14) !important; border: 1.5px solid rgba(255,255,255,.3) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; color: white !important; transition: transform 320ms var(--ease-spring), background 300ms ease, border-color 300ms ease, box-shadow 300ms ease !important; }
.video-card.video-card--featured .kb-svg-icon-wrap { width: 64px !important; height: 64px !important; }
.video-card:hover .kb-svg-icon-wrap { transform: scale(1.16) !important; background: var(--c-blue-400) !important; border-color: transparent !important; box-shadow: 0 0 0 9px rgba(0,145,255,.22) !important; }
/* SVG play icon — override Kadence's kt-video-svg-icon-size-auto */
.video-card .kb-svg-icon-wrap svg { width: 18px !important; height: 18px !important; margin-left: 2px; /* optical centering: play triangle leans right */ }
.video-card.video-card--featured .kb-svg-icon-wrap svg { width: 24px !important; height: 24px !important; }
/* ─── Text body (in flex flow, pinned to bottom) ─────────── */
.video-card .vb-badge,
.video-card > h3,
.video-card .vb-desc { position: relative; z-index: 2; pointer-events: none; margin: 0; }

/* ── Badge pill ────── */
.video-card .vb-badge,
.video-card > p:first-of-type:not(.vb-desc) { align-self: flex-start; margin: 0 0 .5rem 1.2rem !important; padding: .5em .75em; font-size: calc(var(--fs-xs) * .85); font-weight: var(--fw-b); letter-spacing: .07em; text-transform: uppercase; border-radius: var(--radius-pill); line-height: 1; /* Default: teal — override via modifier class on .video-card */ background: rgba(255, 255, 255, 0.18); color: #fff; z-index: 9; }
/* Badge colour variants */
.video-card.badge--purple :is(.vb-badge, p:first-of-type:not(.vb-desc)) { background: rgba(108,92,231,.18); color: #b3a4f7; border-color: rgba(108,92,231,.3); }
.video-card.badge--blue :is(.vb-badge, p:first-of-type:not(.vb-desc)) { background: rgba(0,145,255,.18); color: #80c8ff; border-color: rgba(0,145,255,.3); }
/* ── h3 title ────── */
/* Element + class selector (0,1,1) matches Salient's section h3 rule.
   font-family !important guards against Caveat bleed from the shared
   section:is(...) h3 rule if this card ever lands inside one of those
   sections. */
.video-card > h3 { color: #fff; font-size: var(--fs-lg); font-weight: var(--fw-sb); line-height: 1.3; letter-spacing: -.015em; font-family: 'Poppins', sans-serif !important; padding: 0 1.2rem; margin-bottom: .35rem; margin-inline: 0 !important; text-wrap: balance; }
.video-card.video-card--featured > h3 { font-size: var(--fs-3xl); letter-spacing: -.028em;  margin-bottom: .55rem; margin-inline: 0 !important; }
/* ── Description ────── */
.video-card .vb-desc,
.video-card > p:nth-of-type(2):not(.vb-badge) { color: rgba(255,255,255,.85); font-size: var(--fs-sm); line-height: 1.48; padding: 0 1.2rem 1.2rem; z-index: 9; margin-inline: 0 !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.video-card.video-card--featured :is(.vb-desc, p:nth-of-type(2):not(.vb-badge)) { font-size: var(--fs-base); color: rgba(255,255,255,.7); max-width: 52ch; z-index: 9; }
/* ─── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .video-card,
  .video-card .kadence-video-poster,
  .video-card .kadence-video-overlay,
  .video-card .kb-svg-icon-wrap { transition: none !important; }
    .video-card:hover { transform: none; box-shadow: none; }
    .video-card:hover .kadence-video-poster { transform: none; }
    .video-card:hover .kb-svg-icon-wrap { transform: none !important; box-shadow: none !important; }
}

/* ── 9. Story ────────────────────────────────────────────── */
/* Section — soft blue gradient at the top differentiates from
   the adjacent Events (gray) and Nasdaq (dark) sections. */
.romi-story { padding: var(--s-3xl) var(--s-lg); background: linear-gradient(180deg, var(--c-blue-25) 0%, #fff 45%); position: relative; }

.romi-story :is(.wp-block-columns,.romi-story__body,.wp-block-group.is-layout-grid) { max-width: 1000px; }
.romi-story :is(.wp-block-group.is-layout-grid) { gap: var(--s-md); }
.romi-story :is(.wp-block-columns) { gap: var(--s-lg); margin-bottom: var(--s-lg); }
/* Oversized decorative opening mark */
.romi-story .wp-block-quote::before {content: ''; display: block; width: 32px; height: 27px; background-image: url('https://sensistg.wpenginepowered.com/wp-content/uploads/2024/06/icon_quotemark.svg');
  background-size: contain; background-repeat: no-repeat; margin-bottom: var(--s-xs); position: relative; border: none; filter: var(--ftr-blue-500);}
.romi-story .wp-block-quote { margin: 0; padding: 0; }
.romi-story .wp-block-quote p { font-size: clamp(1.45rem, 3.2vw, 2.2rem); line-height: 1.32; color: var(--c-gray-600); font-style: italic; font-weight: var(--fw-sb); padding: 0; position: relative; /* sit above ::before */ z-index: 1; }
.romi-story .wp-block-quote cite { display: none; }

/* Overline — a little extra bottom clearance before the body */
.romi-story .romi-overline { display: block; margin-bottom: var(--s-sm); font-size: var(--fs-2xl); color: var(--c-blue-500); }
/* Body text */
.romi-story__body { margin-bottom: var(--s-md); }
.romi-story__body p { font-size: var(--fs-lg); line-height: 1.75; color: var(--c-gray-400); padding: 0; margin-bottom: var(--s-base); }
.romi-story__body p:last-child { margin-bottom: 0; }
/* ── Photo ───────────────────────────────────────────────── */
.romi-story__photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 5; max-width: 300px;  }
/* Real image fills the container */
.romi-story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* ── Story cards ──────────────────────────────────────────── */
.romi-story__cards { display: flex; flex-direction: column; gap: var(--s-sm); counter-reset: story-card; }
.romi-story-card { background: var(--c-lightest); border-radius: var(--radius-card-md); /* extra left padding makes room for the accent bar */ padding: var(--s-md); border: 1px solid var(--c-blue-500); box-shadow: var(--shdw-xs); position: relative; overflow: hidden; transition: transform 0.25s var(--ease-out), box-shadow 0.25s; counter-increment: story-card; }

.romi-story-card p { font-size: var(--fs-base); line-height: 1.5; color: var(--c-gray-400); padding: 0; margin: 0; text-wrap: balance; }
.romi-story-card p.romi-story-card__label { font-family: var(--ff-script); font-size: calc(var(--fs-xl) * 1.2); letter-spacing: -0.01em; color: var(--c-blue-500); margin: 0 0 var(--s-sm); padding: 0; line-height: 1.05; }

/* ── 10. Nasdaq Feature ──────────────────────────────────── */
/* Full-bleed split — no constrained max-width, columns run to viewport edges */
.romi-connect { padding: 0; overflow: hidden; background: linear-gradient(0deg, var(--c-blue-50) 0%, var(--c-blue-25) 100%); }
.romi-connect .wp-block-columns { margin: 0 auto; max-width: 1300px; gap: var(--s-xl); flex-wrap: nowrap; padding: var(--s-2xl) var(--s-lg);}

.romi-connect .wp-block-column .eyebrow { display: inline-block; font-size: var(--fs-xs); }
.romi-connect .wp-block-column:nth-of-type(1) img { border-radius: var(--radius-card); }

.romi-connect :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link { padding: .1rem .75rem !important;}
.romi-connect :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram { background: linear-gradient(135deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);}
.romi-connect .wp-block-social-link:hover { transform: scale(1.035); }

/* Right */
.romi-connect__content h2 { font-family: 'Poppins', sans-serif; font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--s-sm); position: relative; z-index: 1; text-wrap: balance; }
.romi-connect__content p:not(.romi-overline):not(.romi-connect__badge) { font-size: var(--fs-lg); line-height: 1.7; position: relative; z-index: 1; padding: 0; margin-bottom: var(--s-md); max-width: 42ch; }
.romi-connect__content p.romi-overline { margin: 0 0 .5ch 0; }
.romi-connect__badge { display: inline-flex; align-items: center; gap: 0.5em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0.5px solid rgba(0,0,0,0.2); border-radius: var(--radius-pill); padding: 0.5em 1.2em; font-size: var(--fs-xs); letter-spacing: 0.04em; width: fit-content; position: relative; z-index: 1; margin: 0; }
.romi-connect__badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue-400); flex-shrink: 0; }

/* ── 10. Subscribe ───────────────────────────────────────── */
.romi-subscribe { padding: var(--s-3xl) var(--s-lg); text-align: center; border-top: 1px solid var(--c-gray-50); }
.romi-subscribe .romi-overline { display: block; text-align: center; }
.romi-subscribe h2 { font-family: 'Poppins', sans-serif; font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--c-gray-600); margin: var(--s-xs) auto var(--s-sm); text-wrap: balance; max-width: 28ch; }
.romi-subscribe h2 em { font-style: normal; background: var(--grad-text-highlight); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.romi-subscribe p.intro { max-width: 36ch; margin: 0 auto var(--s-xl); }
/* Social buttons — rendered via wp:html */
.romi-social-btns { display: flex; align-items: center; justify-content: center; gap: var(--s-md); flex-wrap: wrap; }
.romi-social-btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85em 1.8em; border-radius: var(--radius-pill); font-family: 'Poppins', sans-serif; font-size: var(--fs-sm); font-weight: var(--fw-sb); text-decoration: none; transition: transform 0.2s var(--ease-out), opacity 0.2s; white-space: nowrap; }
.romi-social-btn:hover { transform: translateY(-2px); opacity: 0.88; }
.romi-social-btn--linkedin { background: #0A66C2; color: #fff; }
.romi-social-btn--instagram { background: linear-gradient(135deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: #fff; }

/* ── 12. Animation initial states ────────────────────────── */
/* Pre-hide before s3_animate.js resolves on scroll.
   Prevents FOUC between first paint and script execution.
   Duplicated from future.css — migrate to main.css. */
[data-animate="fade-up"]    { opacity: 0; transform: translateY(30px); }
[data-animate="mask-reveal"] { clip-path: inset(0 100% 0 0 round var(--radius-card)); }
[data-animate="grow-in"]    { transform: scale(0); }

/* ── 13. Responsive ──────────────────────────────────────── */

/* ─── 1024px — Tablet landscape ──────────────────────────── */
@media (max-width: 1024px) {
    /* Featured article */
    .romi-article-featured .wp-block-columns { flex-direction: column; }
    .romi-article-featured .wp-block-column { flex-basis: 100% !important; }
    .romi-article-featured__visual { min-height: 220px; }

    /* Connect / Nasdaq */
    .romi-connect .wp-block-columns { flex-direction: column; min-height: auto; }
    .romi-connect .wp-block-column { flex-basis: 100% !important; }
    .romi-connect .wp-block-column:first-child .wp-block-image img { min-height: 0; max-height: 440px; }

    /* Stats — 3 stats sit in a row up to tablet, then break */
    .romi-story .stats-grid { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }

    /* Video bento — collapse to a simple 2-col grid */
    .video-cards-grid {
        grid-template-rows: unset !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .video-cards-grid .video-card:nth-child(1) { grid-area: unset; }
    .video-cards-grid .video-card:nth-child(2) { grid-area: unset; }
    .video-cards-grid .video-card:nth-child(3) { grid-area: unset; }
    .video-cards-grid .video-card:nth-child(4) { grid-area: unset; }
    .video-cards-grid .video-card:nth-child(5) { grid-area: unset; }
    /* Featured card spans both columns at top */
    .video-cards-grid .video-card:nth-child(1) { grid-column: 1 / -1; min-height: 22rem; }
    .video-cards-grid .video-card:not(:first-child) { min-height: 16rem; }
}

/* ─── 768px — Tablet portrait ────────────────────────────── */
@media (max-width: 768px) {
.romi-overline { font-size: var(--fs-3xl); }
    /* Hero — stack columns, allow wrapping */
    .romi-hero .wp-block-columns {
        flex-direction: column;
        flex-wrap: wrap !important; /* override root nowrap */
        min-height: auto;
        padding: var(--s-xl) var(--s-md);
        gap: var(--s-md);
    }
    .romi-hero .wp-block-column { flex-basis: 100% !important; }
    /* Content column padding — remove double-padding since columns wrapper now has it */
    .romi-hero__content { padding: 0; gap: var(--s-sm); }
    /* Hero image — cap height so portrait photo doesn't dominate */
    .romi-hero__visual .wp-block-image img {
        max-height: 420px;
        width: 100%;
        object-fit: cover;
        object-position: top center;
        border-radius: var(--radius-card);
    }
    .romi-hero .wp-block-column .eyebrow { display: block; }
   .romi-press__logos { display: flex !important; flex-wrap: wrap; justify-content: center; }
   .romi-press__logos img { max-height: 1.5rem; width: auto; }

    /* Story section */
    .romi-story .wp-block-columns { flex-direction: column; }
    .romi-story .wp-block-column { flex-basis: 100% !important; }
    .romi-story .wp-block-quote { text-align: left; padding-bottom: var(--s-xl); margin-bottom: var(--s-xl); }
    .romi-story .wp-block-quote::before { left: 0; transform: none; }
    .romi-story .romi-overline { font-size: var(--fs-3xl); }
    /* Photo: landscape aspect when stacked */
    .romi-story__photo { max-width: 100%; aspect-ratio: 1 / 1; }

    /* Story body — ensure readable line width with padding */
    .romi-story__body { padding-inline: 0; }

    /* Stats — 2-col at tablet portrait (3 is too tight) */
    .romi-story .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-sub { font-size: calc(var(--fs-2xl) * 1.25); }
    /* Fix orphaned selector bug: target .romi-story not .romi-stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Articles grid */
    .romi-article-featured__content, .romi-article-sm, .romi-posts-grid li { padding: var(--s-lg); }
    .romi-posts-grid ul.wp-block-post-template { grid-template-columns: 1fr !important; }

    /* Connect section */
    .romi-connect .wp-block-columns {
        flex-direction: column;
        padding: var(--s-xl) var(--s-md);
        gap: var(--s-md);
    }

    /* Video grid — single column at tablet portrait */
    .video-cards-grid {
        grid-template-columns: 1fr !important;
    }
    .video-cards-grid .video-card:nth-child(1) { grid-column: unset; min-height: 22rem; }
    .video-cards-grid .video-card:not(:first-child) { min-height: 15rem; }
}

/* ─── 600px — Mobile ──────────────────────────────────────── */
@media (max-width: 600px) {
    /* Hero headline — tighten further */
    .romi-hero__headline { font-size: clamp(2rem, 9vw, 2.8rem); }

    /* Section padding — tighten horizontal on narrow screens */
    .romi-story,
    .romi-events,
    .romi-thinking { padding-inline: var(--s-md); }

    /* Story quote size */
    .romi-story .wp-block-quote p { font-size: clamp(1.2rem, 5.5vw, 1.5rem); }

    /* Stats — 1-col on mobile (fixes the selector bug from above) */
    .romi-story .stats-grid,
    .stats-grid { grid-template-columns: 1fr !important; }

    /* Articles grids */
    .romi-articles-grid { grid-template-columns: 1fr; }
    .romi-posts-grid ul.wp-block-post-template { grid-template-columns: 1fr !important; }

    /* Press logos — stack vertically */
    .romi-press__logo {
        border-right: none;
        border-bottom: 1px solid var(--romi-press-border);
        padding: 0.5em 0;
        margin-right: 0;
    }
    .romi-press__logo:last-child { border-bottom: none; }

    /* Social buttons */
    .romi-social-btns { flex-direction: column; }

    /* Subscribe section */
    .romi-subscribe { padding: var(--s-xl) var(--s-md); }

    /* Connect section */
    .romi-connect .wp-block-columns { padding-inline: var(--s-md); }

    /* Story cards — full width */
    .romi-story-card { padding: var(--s-base); }

    /* Video cards */
    .video-cards-grid .video-card { min-height: 14rem !important; }
    .video-cards-grid .video-card:nth-child(1) { min-height: 18rem !important; }
}

/* ============================================================
   Sections:
     1. Body overflow fix (Salient workaround for sticky)
     2. In-page navigation
     3. Target section scroll-margin
     4. Responsive
     5. Reduced motion
============================================================ */

/* ── 2. In-page navigation ───────────────────────────────────────────
   Targets the <ul id="inpage-nav" class="wp-block-list"> block.
──────────────────────────────────────────────────────────────────── */
#inpage-nav { /* Reset WordPress list defaults */ list-style: none; margin-left: 0; padding: 4px; /* inset padding creates the pill effect around the active-item pill */ /* Flex row of items */ display: flex; align-items: center; column-gap: .25em; /* Pill shape + sizing */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Firefox */ -webkit-overflow-scrolling: touch; }
#inpage-nav::-webkit-scrollbar { display: none; /* Hide scrollbar — WebKit */}
#inpage-nav li { flex: 0 0 auto; position: relative; list-style: none; }
#inpage-nav li a { display: block; padding: 0.55em 1.1em; font-size: var(--fs-sm); font-weight: var(--fw-sb); color: var(--c-gray-400); text-decoration: none; white-space: nowrap; border-radius: 9999px; line-height: 1.4; transition: color 0.2s ease, background-color 0.2s ease; }
/* Hover state */
#inpage-nav li a:hover { color: var(--c-primary); background-color: var(--c-blue-25); }
/* Active state — set by s3_inpage-nav.js via .is-active on the <li> */
#inpage-nav li.is-active a { color: var(--c-primary); background-color: var(--c-blue-50); }
/* Focus-visible: accessible keyboard ring that respects the pill shape */
#inpage-nav li a:focus-visible { outline: 2px solid var(--c-blue-400); outline-offset: 2px; }
/* ── 3. Target section scroll-margin ─────────────────────────────────
   Provides correct scroll-position for:
     - Native hash link navigation (browser default, screen readers)
     - Keyboard focus on in-page anchors
     - CSS :target state
   The JS click handler uses its own offset calculation for smooth scroll,
   so this rule is only a fallback — but it's important for accessibility.
   60px is a conservative estimate of the sticky nav bar's rendered height.
──────────────────────────────────────────────────────────────────── */
:is(#story, #mission, #speaking, #thinking, #connect) { scroll-margin-top: calc(var(--computed-nav-top, 120px) + 60px); }


.inpage-nav-wrapper { background: var(--c-lightest); border-radius: 9999px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.06); width: fit-content; max-width: min(840px, calc(100% - 2 * var(--s-md))); margin-inline: auto;  position: sticky; top: var(--computed-nav-top, 120px); z-index: 100; /* Clips nav-item content at the rounded ends without creating a scroll container (overflow: hidden would interfere with sticky) */ overflow: clip; }
.inpage-nav-wrapper::before,
.inpage-nav-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3rem; pointer-events: none; z-index: 1; /* above #inpage-nav (z-index: auto) within wrapper */ opacity: 0; transition: opacity 0.2s ease; }
.inpage-nav-wrapper::before { left: 0; background: linear-gradient( to right, #fff 25%, rgba(255, 255, 255, 0) ); }
.inpage-nav-wrapper::after { right: 0; background: linear-gradient( to left, #fff 25%, rgba(255, 255, 255, 0) ); }
/* Activated by JS data-attributes */
.inpage-nav-wrapper[data-fade-left]::before { opacity: 1; }
.inpage-nav-wrapper[data-fade-right]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .inpage-nav-wrapper::before,
    .inpage-nav-wrapper::after { transition: none; }
}

/* ── 4. Responsive ───────────────────────────────────────────────────*/
@media (max-width: 600px) {
    /* Full padded width on small screens so all items are reachable
       via horizontal scroll. */
    #inpage-nav { max-width: 100%; /* Scroll-fade hints at pill ends */ -webkit-mask-image: linear-gradient( to right, transparent, black 1.75rem, black calc(100% - 1.75rem), transparent ); mask-image: linear-gradient( to right, transparent, black 1.75rem, black calc(100% - 1.75rem), transparent ); }
    /* Tighten item padding so more items are visible before scrolling */
    #inpage-nav li a { padding: 0.55em 0.8em; font-size: var(--fs-xs); }
}
/* ── 5. Reduced motion ───────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    #inpage-nav li a { transition: none; }
}