/* Zenn One section styles. Tokens come from theme.json (--wp--preset--color--*). Loaded on the site and in the editor. */

/* ---------- header ---------- */
.zo-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .zo-header { top: 32px; }
.zo-logo img { display: block; }
.zo-nav .wp-block-navigation-item__content { padding: 0.2rem 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.zo-nav .wp-block-navigation-item__content:hover,
.zo-nav .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--wp--preset--color--mint); }
.zo-nav .wp-block-navigation__submenu-container { background: var(--wp--preset--color--ink) !important; border: 0 !important; padding: .5rem 0; min-width: 210px !important; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.zo-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .45rem 1.1rem; border: 0; }
.zo-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--mint) !important; }
/* Phone menu (the navigation overlay): one left-aligned list, sub-pages indented under a guide line, no dropdown boxes */
.zo-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem 1.5rem 2.5rem !important; background: var(--wp--preset--color--ink) !important; }
.zo-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding-top: 3.25rem !important; }
.zo-nav .is-menu-open .wp-block-navigation__container,
.zo-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; width: 100%; }
.zo-nav .is-menu-open .wp-block-navigation__container { gap: 1.15rem !important; }
.zo-nav .is-menu-open .wp-block-navigation-item__content { font-size: 1.3rem; font-weight: 600; padding: .1rem 0 !important; }
.zo-nav .is-menu-open .wp-block-navigation__submenu-container { background: none !important; box-shadow: none !important; min-width: 0 !important; width: auto !important; padding: .2rem 0 0 1rem !important; margin: .45rem 0 0 .15rem !important; border-left: 1px solid rgba(255,255,255,.14) !important; gap: .05rem !important; }
.zo-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.02rem; font-weight: 400; opacity: .8; padding: .35rem 0 !important; }
.zo-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { opacity: 1; }
.zo-btn-mint .wp-block-button__link { padding: 13px 20px; font-weight: 700; font-size: 14px; }
.zo-header { min-height: 86px; display: flex; align-items: center; }
.zo-header > * { width: 100%; }
.zo-btn-mint .wp-block-button__link:hover { background: #fff !important; }

/* ---------- highlights: <mark> in headings gets the mint block, .zo-gold/.zo-rotate the gold text ---------- */
:where(h1,h2,h3,p) mark {
  color: inherit; padding: 0 3px;
  background: linear-gradient(to right, var(--wp--preset--color--neon), var(--wp--preset--color--neon)) no-repeat 0 70% / 100% 80%;
  transition: background-size .9s cubic-bezier(.15, .75, .4, 1);
}
.zo-hl-ready { background-size: 0% 80% !important; }
.zo-hl-ready.is-in { background-size: 100% 80% !important; }
.has-white-color mark:not(.zo-rotate):not(.zo-gold) { color: var(--wp--preset--color--night); }
mark.zo-gold, mark.zo-rotate { background: none !important; color: var(--wp--preset--color--gold) !important; padding: 0; }
mark.zo-rotate { display: inline-block; transition: opacity .45s ease; }
.zo-rotate-words { display: none; }
.editor-styles-wrapper .zo-rotate-words { display: block; opacity: .6; font-size: .8rem; border: 1px dashed currentColor; padding: .3rem .6rem; }
.editor-styles-wrapper .zo-rotate-words::before { content: "Rotating words (hidden on the site): "; font-weight: 700; }

/* ---------- layout rules: one section rhythm, one content width ----------
   Every full-width section carries .zo-section: same top/bottom padding everywhere, content 1244px (theme.json contentSize)
   with the same side gutter as the header and footer. Title, intro and content keep the same spacing in every section. */
:root { --zo-section-y: clamp(4.5rem, 8vw, 7.5rem); --zo-title-gap: .6rem; --zo-content-gap: 3.75rem; }
.zo-section { padding-top: var(--zo-section-y); padding-bottom: var(--zo-section-y); }
.zo-section > .wp-block-heading:first-child { margin-top: 0; }
.zo-section > .wp-block-heading + p { margin-top: var(--zo-title-gap) !important; }
.zo-section > .wp-block-heading + :not(p):not(.wp-block-heading),
.zo-section > .wp-block-heading + p + * { margin-top: var(--zo-content-gap) !important; }
.zo-section > .wp-block-heading + p + .zo-cards { margin-top: calc(var(--zo-content-gap) - 40px) !important; }   /* slider keeps 40px of room for the hover glow */
.zo-section > .wp-block-heading + .wp-block-html > *:first-child, .zo-section .wp-block-html > .zna-wrap { margin-top: 0; padding-top: 0; }
.zo-section.wp-block-cover { min-height: 0; }
.wp-block-cover.zo-section .wp-block-cover__inner-container > .wp-block-heading:first-child { margin-top: 0; }
.zo-why .is-style-zo-timeline { margin-top: 2.6rem !important; }
.zo-why .wp-block-image, .zo-why figure { margin-top: 0 !important; margin-bottom: 0 !important; }
.zo-why .wp-block-columns { margin-block: 0; }
.zo-footer { padding-top: calc(var(--zo-section-y) * .8) !important; padding-bottom: calc(var(--zo-section-y) * .8) !important; }

/* ---------- full-width sections sit flush against each other ---------- */
.zo-content > .alignfull, .zo-content > .alignfull + * { margin-block-start: 0 !important; }
.zo-main + * , .zo-content + * { margin-block-start: 0 !important; }
footer.wp-block-template-part, div.wp-block-template-part { margin-block-start: 0 !important; }

/* ---------- free audit widget (custom HTML, classes zna-*) inside the theme ---------- */
.zna-sub, .zna-note { text-align: center; }
.zna-scan-bar-wrap { background: transparent !important; border-color: transparent !important; padding-inline: 0 !important; }

/* ---------- hero ---------- */
.zo-hero h1 { color: #fff; letter-spacing: -.01em; }
.zo-hero p { color: #fff; }

/* ---------- section intro ---------- */
.zo-intro { max-width: 1244px; margin-inline: auto; }
.zo-intro p { color: var(--wp--preset--color--body); }

/* ---------- cards (services): Salient "color box hover" recipe ---------- */
/* slider like Salient's: 4 cards per view on desktop, drag / swipe / shift-scroll for the rest */
.zo-cards {
  display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
  grid-auto-columns: calc((100% - 60px) / 4); gap: 20px !important;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  --zo-bleed: 70px; --zo-col: min(100%, var(--wp--style--global--content-size));
  padding: 40px var(--zo-bleed) 110px !important; scroll-padding-inline: var(--zo-bleed); cursor: grab;
  width: calc(var(--zo-col) + 2 * var(--zo-bleed)); max-width: none !important;
  margin: 20px 0 -110px calc((100% - var(--zo-col)) / 2 - var(--zo-bleed)) !important;
}
.zo-cards::-webkit-scrollbar { display: none; }
.zo-cards.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.zo-cards.is-dragging a { pointer-events: none; }
.zo-cards, .zo-cards * { -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .zo-cards { cursor: grab; } }
/* Drag indicator (Salient "touch" style): ring with arrows either side, follows the mouse over sliders */
.zo-drag-ind { position: fixed; left: -26px; top: -26px; width: 52px; height: 52px; z-index: 400; pointer-events: none; mix-blend-mode: difference; will-change: transform; }
.zo-drag-ind::before { content: ""; position: absolute; inset: 0; border: 2px solid #fff; border-radius: 50%; transform: scale(.2); opacity: 0; transition: transform .45s ease, opacity .3s ease; }
.zo-drag-ind i { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: solid #fff; border-width: 0 0 2px 2px; opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.zo-drag-ind .zo-drag-l { left: -18px; transform: translateX(17px) rotate(45deg); }
.zo-drag-ind .zo-drag-r { right: -18px; transform: translateX(-17px) rotate(-135deg); }
.zo-drag-ind.is-on::before { transform: scale(1); opacity: 1; }
.zo-drag-ind.is-on i { opacity: 1; transition: transform .45s ease, opacity .3s ease; }
.zo-drag-ind.is-on .zo-drag-l { transform: translateX(0) rotate(45deg); }
.zo-drag-ind.is-on .zo-drag-r { transform: translateX(0) rotate(-135deg); }
.zo-drag-ind.is-on.is-down::before { transform: scale(.8); transition: transform .25s ease-out, opacity .3s ease; }
.zo-post-grid .wp-block-post-template > li[hidden] { display: none !important; }
.zo-cards > * { scroll-snap-align: start; }
.zo-cards-nav { display: flex; justify-content: center; gap: 10px; margin-top: 26px; margin-bottom: 0; position: relative; z-index: 3; }
.zo-cards-nav button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: #d0d0d0; cursor: pointer; transition: background .3s, transform .3s; }
.zo-cards-nav button.is-on { background: var(--wp--preset--color--forest); transform: scale(1.25); }
@media (max-width: 1100px) { .zo-cards { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 1400px) { .zo-cards { --zo-bleed: 20px; } }
@media (max-width: 640px) { .zo-cards { grid-auto-columns: 84%; --zo-bleed: 15px; } }
.editor-styles-wrapper .zo-cards { overflow-x: visible; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; padding: 0 !important; margin: 0 !important; }
.zo-card {
  --zo-ease: cubic-bezier(.25, 1, .2, 1);
  position: relative; isolation: isolate; min-height: 364px; display: flex; flex-direction: column; justify-content: center;
  padding: 32px 47px !important; text-align: center; border: 1px solid #e8e8e8; border-radius: 3px; overflow: hidden;
  background-color: #fff; background-size: cover !important; background-position: center !important;
  transition: box-shadow .45s var(--zo-ease), border-color .45s var(--zo-ease);
}
.zo-card::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: #fff; z-index: -1; transition: background-color .45s var(--zo-ease); }
.zo-card .zo-icon { height: 58px; margin: 0 0 20px; display: flex; align-items: center; justify-content: center; }
.zo-card .zo-icon svg { width: 52px; height: 52px; stroke: var(--wp--preset--color--forest); transition: stroke .45s var(--zo-ease); }
.zo-card h3 { font-size: 22px !important; line-height: 34px; font-weight: 600; color: #444; margin: 0 0 8px !important; transition: color .45s var(--zo-ease); }
.zo-card h3 a { color: inherit; text-decoration: none; }
.zo-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* whole card is the link */
.zo-card p { font-size: 14px; line-height: 23.8px; color: #444; opacity: .75; margin: 0 !important; transition: color .45s var(--zo-ease), opacity .45s; }
.zo-card:hover, .zo-card:focus-within { border-color: rgba(30, 95, 76, .85); box-shadow: 0 30px 90px rgba(30, 95, 76, .42); }
.zo-card:hover::before, .zo-card:focus-within::before { background-color: rgba(30, 95, 76, .85); }
.zo-card:hover h3, .zo-card:hover p, .zo-card:focus-within h3, .zo-card:focus-within p { color: #fff !important; opacity: 1; }
.zo-card:hover .zo-icon svg, .zo-card:focus-within .zo-icon svg { stroke: #fff; }
.zo-post-card { text-align: left; padding: 0 0 1.4rem !important; min-height: 0; display: block; }
.zo-post-card > *:not(.wp-block-post-featured-image) { padding-inline: 1.3rem; }
.zo-post-card:hover::before { background-color: #fff; }
.zo-post-card:hover h3, .zo-post-card:hover p { color: inherit !important; }
.zo-services .zo-intro { margin-top: 7px; }

/* card grid (no slider): borderless on tinted sections, photo + green on hover like the slider cards */
.zo-card-grid { gap: 20px !important; }
.zo-card-grid .zo-card { min-height: 400px; }
.has-background .zo-card-grid .zo-card, .zo-card-grid .zo-card { border-color: transparent; }
.zo-card-grid .zo-card { background-size: 0 0 !important; }   /* photo only on hover */
.zo-card-grid .zo-card:hover, .zo-card-grid .zo-card:focus-within { background-size: cover !important; }
.has-background .zo-card-grid .zo-card::before { background-color: transparent; }
.has-background .zo-card-grid .zo-card { background-color: transparent !important; }
.has-background .zo-card-grid .zo-card:hover::before { background-color: rgba(30, 95, 76, .85); }

/* ---------- numbered timeline (list style) ---------- */
.is-style-zo-timeline { list-style: none; counter-reset: zo-step; margin: 0; padding: 0 0 0 3.6rem !important; border-left: 2px solid rgba(255,255,255,.3); }
.is-style-zo-timeline li { counter-increment: zo-step; position: relative; margin-bottom: 2.6rem; line-height: 1.6; }
.is-style-zo-timeline li:last-child { margin-bottom: 0; }
.is-style-zo-timeline li::before {
  content: counter(zo-step); position: absolute; left: -2.3rem; top: 0; width: 26px; height: 26px; border: 2px solid currentColor;
  border-radius: 50%; font-size: .85rem; line-height: 22px; text-align: center;
}
.is-style-zo-timeline li strong { display: block; font-size: 1.05rem; margin-bottom: .5rem; }

/* ---------- credentials card (custom HTML) ---------- */
.zo-section > .zenn-creds-wrap-light, .zo-section .zenn-creds-wrap-light, .zo-section .zenn-creds-wrap { max-width: var(--wp--style--global--content-size) !important; margin-left: auto !important; margin-right: auto !important; }

/* ---------- why section ---------- */
.zo-why .wp-block-column:last-child > * { max-width: 470px; }
.zo-why .is-style-zo-timeline { font-size: 15px; }
.zo-why .is-style-zo-timeline li { margin-bottom: 3rem; }
.zo-why .is-style-zo-timeline li:last-child { margin-bottom: 0; }
.zo-why .is-style-zo-timeline li strong { font-size: 16px; margin-bottom: .6rem; }

/* ---------- CTA band ---------- */
.zo-cta h2 { color: #fff; font-weight: 600; }
.zo-cta .wp-block-button__link::after { content: "\2192"; margin-left: .9rem; font-size: 1.1em; }


/* ================= inner-page sections (converted from Salient) ================= */
/* text on image sections is white */
/* (only the theme's own blocks: custom HTML widgets keep their own colors) */
.wp-block-cover :is(.wp-block-cover__inner-container, .wp-block-column, .wp-block-group) > :is(h1,h2,h3,h4,h5,h6,p):not(.has-text-color) { color: #fff; }
.has-white-color :is(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container) > :is(h1,h2,h3,h4,h5,h6):not(.has-text-color),
.has-white-color > :is(h1,h2,h3,h4,h5,h6):not(.has-text-color) { color: #fff; }

/* page hero: Salient's full-width title row */
.zo-page-hero { min-height: 700px; }
.zo-page-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 600; line-height: 1.12; max-width: 900px; margin-inline: auto; }
.zo-page-hero p { max-width: 1100px; margin-inline: auto !important; }
.zo-page-hero .wp-block-buttons { margin-top: 3.4rem !important; }

/* lead paragraph under a section title (Salient's grey h5 intros) */
.zo-lead { font-size: 16px; line-height: 26px; color: #a3a3a3; }
.has-white-color .zo-lead, .wp-block-cover .zo-lead { color: rgba(255,255,255,.72); }
.zo-section > .wp-block-heading:first-child { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.zo-narrow { max-width: 820px !important; margin-inline: auto !important; }
.zo-section .zo-narrow + * { margin-top: var(--zo-content-gap) !important; }
.zo-narrow > .wp-block-heading { font-size: clamp(1.75rem, 3vw, 2.25rem); }

/* buttons: jumbo + arrow like nectar buttons */
.zo-btn-large .wp-block-button__link { padding: 1.25rem 3.1rem; font-size: 18px; }
.zo-btn-arrow .wp-block-button__link::after { content: "\2192"; margin-left: .9rem; display: inline-block; transition: transform .3s; }
.zo-btn-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button__link { transition: background-color .25s, transform .25s, box-shadow .25s; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.18); }

/* icon features: icon, small title, grey text, centered */
.zo-features { gap: 2.5rem !important; text-align: center; }
.zo-features .zo-icon svg, .zo-section > .wp-block-html .zo-icon svg { width: 60px; height: 60px; color: var(--wp--preset--color--forest); }
.zo-features .wp-block-heading { font-size: 16px !important; font-weight: 600; color: #333; margin: 1rem 0 .7rem; }
.zo-features p { color: #a3a3a3; font-size: 14px; line-height: 26px; }
.zo-icon { display: flex; justify-content: center; }
/* soft icon circles (Salient soft-bg icons) */
.zo-icon-soft { --c: var(--wp--preset--color--forest); width: 84px; height: 84px; border-radius: 50%; align-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); }
.zo-icon-soft svg { width: 38px !important; height: 38px !important; color: var(--c) !important; }
.zo-c-rose { --c: var(--wp--preset--color--rose); } .zo-c-gold { --c: #d4a73a; } .zo-c-ink { --c: #1e2124; } .zo-c-forest { --c: var(--wp--preset--color--forest); }
.zo-features-left { text-align: left; }
.zo-features-left .zo-icon { justify-content: center; }
.zo-features-left .wp-block-heading { font-size: 18px !important; margin-top: 1.1rem; }
.zo-features-left p { color: #676767; }
.zo-icon svg { width: 52px; height: 52px; }

/* photo tiles: hover lifts, green rises from the bottom, description fades in (Salient hover_desc) */
.zo-tiles { gap: 20px !important; }
.zo-tile { --zo-ease: cubic-bezier(.05,.2,.1,1); padding: 32px !important; overflow: hidden; align-items: flex-end; transition: transform .65s var(--zo-ease), box-shadow .65s var(--zo-ease); }
.zo-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); z-index: 1; transition: opacity .5s; pointer-events: none; }
.zo-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,95,76,.95), rgba(30,95,76,.35) 60%, rgba(30,95,76,0)); z-index: 1; opacity: 0; transition: opacity .5s var(--zo-ease); pointer-events: none; }
.zo-tile .wp-block-cover__image-background { transition: transform 1.4s var(--zo-ease); }
.zo-tile .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }
.zo-tile .zo-icon { justify-content: flex-start; margin-bottom: 1rem; }
.zo-tile .zo-icon svg { width: 50px; height: 50px; color: #fff; }
.zo-tile h3 { font-size: clamp(1.6rem, 2.4vw, 2.125rem) !important; line-height: 1.3; font-weight: 600; margin: 0 !important; }
.zo-tile .zo-tile-desc { max-height: 0; opacity: 0; transform: translateY(20px); margin: 0 !important; font-size: 14px; line-height: 21px; max-width: 200px;
  transition: max-height .5s var(--zo-ease), opacity .3s, transform .5s var(--zo-ease), margin .5s; }
.zo-tile:hover, .zo-tile:focus-within { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,.22); }
.zo-tile:hover::before, .zo-tile:focus-within::before { opacity: 1; }
.zo-tile:hover .wp-block-cover__image-background { transform: scale(1.06); }
.zo-tile:hover .zo-tile-desc, .zo-tile:focus-within .zo-tile-desc { max-height: 120px; opacity: 1; transform: none; margin-top: .9rem !important; }
.editor-styles-wrapper .zo-tile .zo-tile-desc { max-height: none; opacity: .85; transform: none; }

/* colored panels (Salient columns with a background) */
.zo-panel { padding: 55px 55px 40px !important; overflow: hidden; }
.zo-panel :is(h1,h2,h3,h4,h5,h6,p,li) { color: inherit !important; }
.zo-panel .wp-block-heading { font-size: 26px !important; font-weight: 600; margin: 0 0 .6rem; }
.zo-panel p { font-size: 15px; line-height: 24px; }
.zo-panel .wp-block-image { margin: 2.2rem 0 0; }
.wp-block-columns:has(> .zo-panel) { gap: 20px !important; }

/* cascading images (Salient): portrait over an offset photo, with green accent blocks */
.zo-cascade { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / .95; margin: 0 auto !important; }
.zo-cascade .wp-block-image { position: absolute; margin: 0 !important; }
.zo-cascade .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zo-cascade .zo-cascade-back { width: 68%; aspect-ratio: 4 / 3; right: 0; bottom: 0; }
.zo-cascade .zo-cascade-front { width: 68%; aspect-ratio: 1; left: 0; top: 0; z-index: 2; }   /* no shadow: it darkened the photo behind */
.zo-cascade::before, .zo-cascade::after { content: ""; position: absolute; background: var(--wp--preset--color--emerald); z-index: 1; }
.zo-cascade::before { width: 17%; aspect-ratio: 1.3; left: 68%; top: 32.5%; }   /* sits on the back photo's top edge */
.zo-cascade::after { width: 10%; aspect-ratio: 1.2; left: 22%; top: 71.6%; z-index: 1; }   /* just under the headshot, touching the back photo */
.zo-kicker { display: table; position: relative; overflow: hidden; background: var(--wp--preset--color--forest); color: #fff !important; font-size: 14px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; padding: .5em .7em; margin-bottom: 1.4rem !important; }
/* Salient "color strip reveal": a mint strip wipes across, then the tag shows (JS adds the classes) */
.zo-kicker.zo-strip-ready { background: transparent; -webkit-text-fill-color: transparent; }
.zo-kicker.zo-strip-ready::after { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--mint); transform: scaleX(0); transform-origin: left; }
.zo-kicker.zo-strip-ready.is-in { animation: zo-strip-show 0s .45s forwards; }
.zo-kicker.zo-strip-ready.is-in::after { animation: zo-strip .9s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes zo-strip { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes zo-strip-show { to { background: var(--wp--preset--color--forest); -webkit-text-fill-color: #fff; } }

/* image bands (CTA rows with a photo) */
.zo-band h2 { font-size: clamp(2.2rem, 4.5vw, 3.25rem) !important; font-weight: 600; }
.zo-band p { font-size: 18px; color: rgba(255,255,255,.7) !important; }
.zo-band .wp-block-buttons { margin-top: 2.5rem !important; }

/* FAQ: Salient "minimal shadow" toggles */
.zo-faq { max-width: var(--wp--style--global--content-size); margin-inline: auto !important; }
.zo-faq .wp-block-details { border-bottom: 1px solid #ececec; border-radius: 10px; margin: 0 !important; padding: 0 40px; transition: box-shadow .4s, background-color .4s, padding .4s; }
.zo-faq .wp-block-details summary { list-style: none; cursor: pointer; position: relative; padding: 2rem 3.5rem 2rem 0; font-size: 14px; color: #222; font-weight: 400; }
.zo-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.zo-faq .wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 1.5px solid #888; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; color: #888; transition: all .3s; }
.zo-faq .wp-block-details[open] { background: #fff; box-shadow: 0 25px 60px rgba(0,0,0,.1); border-bottom-color: transparent; }
.zo-faq .wp-block-details[open] summary::after { content: "\2212"; border-color: #111; color: #111; }
.zo-faq .wp-block-details > :not(summary) { padding-bottom: 2rem; margin: 0; font-size: 1rem; color: #676767; }

/* blog / portfolio grid: Salient's "browser window" cards + category filter */
.zo-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2.4rem; margin: 0 0 3.2rem; padding: 0; list-style: none; }
.zo-filter button { background: none; border: 0; padding: .2rem 0; font: inherit; font-size: 14px; color: inherit; opacity: .85; cursor: pointer; border-bottom: 2px solid transparent; transition: opacity .2s, border-color .2s; }
.zo-filter button:hover { opacity: 1; }
.zo-filter button.is-on { opacity: 1; border-bottom-color: var(--wp--preset--color--mint); }
.zo-post-grid .wp-block-post-template { gap: 50px !important; }
.zo-post-grid .wp-block-post-template > li { display: flex; }
.zo-post-grid .zo-post-card { width: 100%; }
.zo-post-card { position: relative; background: #fff; border-radius: 8px; overflow: hidden; padding: 26px 0 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .45s cubic-bezier(.25,1,.2,1), box-shadow .45s; }
.has-white-color .zo-post-card { background: #1e2124; box-shadow: none; }
.zo-post-card::before { content: ""; position: absolute; top: 10px; left: 12px; width: 26px; height: 6px;
  background: radial-gradient(circle, #888 2.5px, transparent 3px) 0 0 / 9px 6px repeat-x; opacity: .7; }
.zo-post-card .wp-block-post-featured-image { margin: 0 !important; overflow: hidden; border-radius: 6px 6px 0 0; }
.zo-post-card .wp-block-post-featured-image img { transition: transform .9s cubic-bezier(.05,.2,.1,1); }
.zo-post-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(0,0,0,.25); }
.zo-post-card:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.zo-post-card .zo-post-cats { margin: 2.8rem 1.8rem 0 !important; font-size: 13px; }
.zo-post-card .zo-post-cats a { color: inherit; text-decoration: none; margin: 0 .3rem; }
.zo-post-card .zo-post-cats .wp-block-post-terms__separator { display: none; }
.zo-post-card .wp-block-post-title { font-size: 18px !important; line-height: 25px; font-weight: 600; margin: .8rem 2.2rem 2.8rem !important; }
.zo-post-card .wp-block-post-title a { color: #222; text-decoration: none; }
.has-white-color .zo-post-card .wp-block-post-title a { color: #fff; }
.zo-post-card.is-hidden { display: none; }

/* ---------- footer ---------- */
.zo-footer-links { list-style: none; padding: 0; margin: 0; font-size: .85rem; font-weight: 600; }
.zo-footer-links li { margin: .25rem 0; }
.zo-footer a { text-decoration: none; }
.zo-social .wp-block-social-link { transition: transform .2s; }
.zo-social .wp-block-social-link:hover { transform: scale(1.1); }

/* ---------- blog post: image hero, category pills, Raleway title ---------- */
.zo-post-hero { margin-top: 0 !important; }
.zo-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.zo-pills .wp-block-post-terms__separator { display: none; }
.zo-pills a { color: #fff !important; text-decoration: none; font-size: 14px; font-weight: 600; border: 2px solid rgba(255,255,255,.75); border-radius: 3px; padding: 3px 11px; transition: background .25s, color .25s; }
.zo-pills a:hover { background: #fff; color: var(--wp--preset--color--forest) !important; }
.zo-post-title { font-family: var(--wp--preset--font-family--raleway) !important; font-weight: 400 !important; font-size: clamp(2.2rem, 4vw, 3rem) !important; line-height: 1.2 !important; letter-spacing: -.01em; margin-top: 1.4rem !important; color: #fff !important; }
.zo-article h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); margin: 2.4rem 0 .6rem; }
.zo-article h3 { font-size: 1.4rem; margin: 2rem 0 .5rem; }
.zo-article p { margin: 0 0 1.4rem; }
.zo-article .wp-block-post-navigation-link a { color: var(--wp--preset--color--forest); text-decoration: none; font-weight: 600; }

/* ---------- long-form text (legal pages, posts) ---------- */
.zo-prose p, .zo-prose li { color: #4b5563; }
.zo-prose h2 { font-size: 1.6rem; margin-top: 2.4rem; }
.zo-eyebrow a { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; text-decoration: none; }

/* ---------- reveal on scroll ---------- */
.zo-reveal-ready { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.zo-reveal-ready.is-in { opacity: 1; transform: none; }

/* ---------- pages still built with WPBakery (app / game pages) ---------- */
.zo-legacy-builder .zo-content > * { max-width: none !important; }
.zo-legacy-builder .zo-content { padding-left: 0; padding-right: 0; }

/* ---------- small screens ---------- */
@media (max-width: 781px) {
  .admin-bar .zo-header { top: 46px; }
  .is-style-zo-timeline { padding-left: 3rem !important; }
  .wp-block-column .wp-block-image.aligncenter img { max-width: 210px !important; }
  .zo-card { padding: 2.4rem 1.5rem !important; }
}

/* long links / emails never push the page sideways */
.zo-content :is(p, li, a, h1, h2, h3) { overflow-wrap: break-word; }
.zo-section > :not(.wp-block-heading):not(p) + .zo-filter { margin-top: var(--zo-content-gap) !important; }
/* Long-form documents (privacy, terms): one left-aligned reading column, normal text rhythm */
.zo-prose { text-align: left; }
.zo-prose > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.zo-prose > * + * { margin-top: 1.1rem !important; }
.zo-prose > h1 + p { margin-top: .4rem !important; }
.zo-prose > * + h2, .zo-prose > * + h3 { margin-top: 2.6rem !important; }
.zo-prose > h2 + *, .zo-prose > h3 + * { margin-top: .6rem !important; }
.zo-prose ul, .zo-prose ol { padding-left: 1.6rem; }
.zo-prose li + li { margin-top: .35rem; }