/*
Theme Name: Osty Child
Template: osty
*/

/* Fixed-width header — align logo/pill with the page content column (hero uses the same) */
.main-header__layout {
    max-width: min(1280px, 90vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Permanent pill menu — the collapsed "Menu" state is the default, no inline links.
   The theme's GSAP sets inline styles; !important overrides them in both directions. */
#primary-menu-default > li.menu-item {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.main-header__inner .ms-ma-bg { transform: scale(1) !important; }
.main-header__inner .main-header__btn { width: auto !important; }
.main-header__inner .main-header__btn .action-menu {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Inner grid adds side padding that breaks alignment with the content column */
.main-header__inner { padding-left: 0 !important; padding-right: 0 !important; }

/* Pill colors per brand design: white pill, dark icons, dark-teal Menu button.
   Unscoped from ".move" so the pill persists whether or not the theme's scroll
   handler has toggled its class. */
.main-header--widgets::after {
    background-color: #ffffff !important;
    filter: none !important;
}
.header__search-icon svg path { stroke: #00a6a0 !important; }
.ms_theme_mode .toggle-label::before { background-color: #00a6a0 !important; }
/* Mode toggle: visible darker track, dot travels fully top (light) / bottom (dark) */
.ms_theme_mode .toggle-back {
    background-color: rgba(0, 0, 0, 0.09) !important;
    clip-path: inset(0 round 18px) !important;
}
.ms_theme_mode .toggle-switch { position: relative !important; }
.ms_theme_mode .toggle-label {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    left: 2px !important;
    top: 2px !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    transition: top 0.25s ease !important;
}
body[data-theme=dark] .ms_theme_mode .toggle-label { top: 18px !important; }
.ms_theme_mode .toggle-label::before {
    position: absolute !important;
    inset: 0 !important;
    width: 16px !important;
    height: 16px !important;
    transform: none !important;
}

/* Header always above page content (deck panels reach z-5, theme default is 3) */
#ms-header { z-index: 200 !important; }

/* No pre-hide nudge: theme transitions this margin between its menu states */
.main-header--widgets { margin-right: 0 !important; }

/* On-scroll mark logo removed — full logo just fades out when scrolled */
#ms-header .logo-mark { display: none !important; }

/* Footer: the Text & Hues logo ticker is removed entirely */
.ms-footer .ms-tt-wrap,
.ms-footer .ms-text-ticker {
    display: none !important;
}
/* Space out search icon and mode dot inside the pill */
.main-header--widgets .ms-hw-inner {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 20px !important;
}
.ms-ma-bg::after { background-color: #404040 !important; }
.action-menu .menu-text { color: #ffffff !important; }
.action-menu .menu-line { background-color: #ffffff !important; }
/* Overlay menu must be able to open even when the theme's "move" class is absent
   (theme only sets visibility under .move). Visible only while open, so the
   closed panel can't block clicks. */
.container-menu:has(.ms-menu-wrapper.open) { visibility: visible !important; }
.ms-menu-wrapper.open { visibility: visible !important; }
/* Overlay panel inherits the dark-teal Menu-button bg — links must be white */
.ms-menu-wrapper .ms-menu .ms-menu-container .menu-item a { color: #ffffff !important; }
.ms-menu-wrapper .ms-menu .ms-menu-container .menu-item a:hover { color: #9fe3de !important; }

/* In "move" state the theme assumes a light header and swaps to the dark logo —
   keep the white logo while the transparent teal hero is behind the header */
.ms-nb--white:not(.tah-scrolled) .main-header__inner .logo-light,
.ms-nb--white:not(.tah-scrolled) .main-header__inner.move .logo-light { opacity: 1 !important; }
.ms-nb--white:not(.tah-scrolled) .main-header__inner .logo-dark,
.ms-nb--white:not(.tah-scrolled) .main-header__inner.move .logo-dark { opacity: 0 !important; }
/* On scroll the mark takes over — hide both full logos regardless of theme state */
#ms-header.tah-scrolled .logo-light,
#ms-header.tah-scrolled .logo-dark { opacity: 0 !important; }

/* Logo scroll swap */
.main-header__inner .main-header__logo {
    overflow: visible !important;
    position: relative;
    min-width: max-content;
    max-width: max-content;
}
.logo-full {
    opacity: 1;
    transition: opacity 0.4s ease;
}
.logo-full img {
    height: 70px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
}
.logo-mark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.logo-mark img {
    height: 70px !important;
    width: auto !important;
    display: block;
}
#ms-header.tah-scrolled .logo-full {
    opacity: 0;
    pointer-events: none;
}
#ms-header.tah-scrolled .logo-mark {
    opacity: 1;
    pointer-events: auto;
}
.logo-light {
    position: absolute;
    top: 0;
    left: 0;
}

/* Back-to-top button — teal box, white dots always visible */
.back-to-top .ms-btt--inner {
    background-color: #00a6a0 !important;
    border-radius: 14px !important;
}
.back-to-top .ms-btt--inner svg {
    transform: rotate(-90deg) translateX(0) !important;
    transition: scale .3s ease !important;
}
.back-to-top .ms-btt--inner svg path {
    fill: #ffffff !important;
}
.back-to-top:hover .ms-btt--inner {
    background-color: #007d79 !important;
}

/* Button text white */
.ms-btn__text,
.ms-btn__icon,
.load-more-text,
.btn--primary .ms-btn__text,
.btn--primary .ms-btn__icon,
.f-btn-r,
.elementor-button,
.elementor-button span,
.elementor-button .elementor-button-text,
.btn .f-btn-r,
button.btn,
a.btn {
    color: #ffffff !important;
}
.ms-btn__icon svg path,
.ms-btn__icon svg rect,
.load-more-icon svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Kill all yellow — replace every instance of the default amber accent */
:root,
[data-theme="light"],
[data-theme="dark"] {
    --color-primary: #00a6a0 !important;
}

/* Catch any hardcoded amber/yellow HSL values left by the theme */
.ms-btn,
.ms-btn--primary,
.elementor-button,
a.ms-link,
.ms-tag,
.ms-badge,
.ms-highlight,
[style*="hsl(38"],
[style*="#F5C518"],
[style*="hsl(37"] {
    background-color: #00a6a0 !important;
    border-color: #00a6a0 !important;
    color: #ffffff !important;
}

/* Ticker SVG separator */
.ms-text-ticker .ms-ticker__separator,
.ms-text-ticker .ms-ticker__separator img {
    height: 130px !important;
    width: auto !important;
}

/* Social icons white */
.ms-footer .ms-social-icons a svg path,
.ms-footer .ms-social-icons a svg rect,
.ms-footer .ms-social-icons a svg polygon {
    fill: #ffffff !important;
}
.ms-footer .ms-social-icons a:hover svg path,
.ms-footer .ms-social-icons a:hover svg rect,
.ms-footer .ms-social-icons a:hover svg polygon {
    fill: #00a6a0 !important;
}


/* Mobile logo — smaller so menu button isn't pushed off-screen */
@media (max-width: 1024px) {
    .logo-full img,
    .logo-mark img {
        height: 38px !important;
    }
}


/* Case studies filter: left-aligned with the cards */
.portfolio_wrap .subnav {
    justify-content: flex-start !important;
}
.portfolio_wrap .subnav__container {
    display: flex !important;
    justify-content: flex-start !important;
}
.portfolio_wrap .filter-nav {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Case studies: uniform thumbnails, smaller titles, no category tags */
.portfolio_wrap figure {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.portfolio_wrap figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.portfolio_wrap .ms-p-content h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
}
.portfolio_wrap .ms-p-cat { display: none !important; }

/* Footer background 404040 */
.ms-footer .elementor-element-be898e6 { background-color: #404040 !important; }

/* Load More icon sized for the brand arrow (contents swapped in footer JS) */
.load-more-icon { width: 20px !important; height: 20px !important; }
.load-more-icon svg { animation: none !important; }


/* Mobile header: logo left, compact pill right, nothing cut off */
@media (max-width: 760px) {
    /* Match the hero/cards column (90vw) so the logo lines up with the headline */
    .main-header__layout {
        max-width: 90vw !important;
    }
    .main-header__inner {
        display: flex !important;
        grid-template-columns: none !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .main-header__nav { display: none !important; }
    .logo-full img, .logo-mark img { height: 42px !important; }
    /* Just the Menu button on mobile — no search, no dark-mode switch */
    .main-header--widgets .ms-hw-inner { display: none !important; }
    .action-menu { height: 38px !important; padding: 0 14px !important; font-size: 15px !important; }
}

/* ---- Motion loader: orbit-arc ampersand on the page-transition overlay ---- */
/* Charcoal ground matches the hero band in each theme (theme default is site bg) */
#loaded { background-color: #404040 !important; }
body[data-theme=dark] #loaded { background-color: #262626 !important; }

.mark-loader {
    --loader-size: 112px;
    --loader-speed: 1.6s;
    color: #00a7a1;              /* drives arc + glyph */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: var(--loader-size);
    height: var(--loader-size);
}

.mark-loader__arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: mark-loader-spin var(--loader-speed) linear infinite;
}

/* circumference of r=46 is ~289 — the dash gap must be >= that,
   or a second dash sneaks into view */
.mark-loader__arc circle {
    animation: mark-loader-arc var(--loader-speed) ease-in-out infinite;
}

.mark-loader__glyph {
    width: 59%;
    height: 59%;
    animation: mark-loader-breathe var(--loader-speed) ease-in-out infinite;
}

@keyframes mark-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes mark-loader-arc {
    0%   { stroke-dasharray: 10 290;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 150 290; stroke-dashoffset: -60; }
    100% { stroke-dasharray: 10 290;  stroke-dashoffset: -289; }
}

@keyframes mark-loader-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .mark-loader__arc { display: none; }
    .mark-loader__arc circle,
    .mark-loader__glyph { animation: none; }
}

/* ---- Portfolio footer button: the standard View Our Work CTA (markup swapped
   in footer JS), left aligned under the grid ---- */
.portfolio_wrap .btn-wrap {
    justify-content: flex-start !important;
    display: flex !important;
}

/* Back-to-top: brand chevron (stroke), not the theme dots (fill) */
.back-to-top .ms-btt--inner svg {
    width: 20px !important;
    height: 20px !important;
    transform: none !important;
}
.back-to-top .ms-btt--inner svg path {
    fill: none !important;
    stroke: #ffffff !important;
}

/* Portfolio filter order: All, Editorial, Digital, Branding
   (theme sorts terms alphabetically; flex order overrides visually) */
.portfolio_wrap .filter-nav__list { display: flex; }
.portfolio_wrap .filter-nav__item[data-filter=""] { order: 0; }
.portfolio_wrap .filter-nav__item[data-filter="editorial"] { order: 1; }
.portfolio_wrap .filter-nav__item[data-filter="digital"] { order: 2; }
.portfolio_wrap .filter-nav__item[data-filter="branding"] { order: 3; }
.portfolio_wrap .filter-nav__marker { order: 4; }

/* Page-transition overlay only exists on the home page (branded loader);
   inner pages load with no dark flash at all */
body:not(.home) #loaded { display: none !important; }

/* ---- Single post: band + straddling image + right title column ---- */
.th-post { background: #fff; position: relative; }
.th-post__band {
    position: absolute; top: 0; left: 0; right: 0;
    height: clamp(280px, 34vw, 480px);
    background: #404040;
}
body[data-theme=dark] .th-post__band { background: #262626; }
.th-post__wrap { width: min(1280px, 90vw); margin: 0 auto; position: relative; z-index: 1; }
.th-post__grid {
    display: grid;
    grid-template-columns: 1.3fr 0.85fr;
    gap: clamp(32px, 4.5vw, 80px);
    align-items: start;
    padding-top: clamp(90px, 10vw, 150px);
}
.th-post__hero { margin: 0; }
.th-post__hero img {
    width: 100% !important;
    height: auto !important;
    border-radius: 26px;
    display: block;
}
.th-post__side {
    padding-top: clamp(4px, 1vw, 16px);
    display: grid;
    /* row 1 spans the rest of the band: the group below always clears it */
    grid-template-rows: minmax(calc(clamp(280px, 34vw, 480px) - clamp(90px, 10vw, 150px) - 20px), auto) auto;
    align-items: start;
}
.th-post__sidebody { padding-top: 34px; }
.th-post__side .th-ins__type {
    position: static;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.th-post__side .th-ins__type svg { width: 26px; height: 26px; }
.th-post__title {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -.01em;
    font-size: clamp(28px, 2.9vw, 44px);
    line-height: 1.12;
    margin: 0 0 14px;
}
.th-post__meta { color: rgba(255, 255, 255, .65); font-size: 16px; margin: 14px 0 0; }
/* Free Templates panel */
.th-post__tpls { border-radius: 18px; overflow: hidden; background: #f0f0ee; }
.th-post__tpls-head {
    background: #1f9c98; color: #fff; font-weight: 600; font-size: 18px;
    padding: 16px 26px;
}
.th-post__tpls-list { padding: 10px 26px 18px; }
.th-post__tpl {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 0; text-decoration: none;
    border-bottom: 1px solid rgba(38,38,38,.18);
    color: #262626; font-size: 17px; line-height: 1.4;
    transition: color .2s ease;
}
.th-post__tpl:last-child { border-bottom: 0; }
.th-post__tpl:hover { color: #02605a; }
.th-post__tpl svg { width: 15px; height: 15px; stroke: #262626; flex: none; margin-top: 4px; }
.th-post__tpl:hover svg { stroke: #02605a; }
/* body copy under the image */
.th-post__content { padding: clamp(32px, 4vw, 56px) 0 clamp(64px, 7vw, 110px); }
.th-post__content p { font-size: 16.5px; line-height: 1.6; color: #262626; margin: 0 0 20px; }
.th-post__content h2, .th-post__content h3 {
    color: #262626; font-weight: 700; line-height: 1.25; margin: 40px 0 16px;
}
.th-post__content h2 { font-size: clamp(24px, 2.2vw, 32px); }
.th-post__content h3 { font-size: clamp(20px, 1.8vw, 25px); }
.th-post__content a { color: #02605a; text-decoration: underline; text-underline-offset: 3px; }
.th-post__content img { border-radius: 18px; height: auto !important; }
.th-post__content ul, .th-post__content ol { margin: 0 0 20px 22px; font-size: 16.5px; line-height: 1.6; color: #262626; }
.th-post__content li { margin-bottom: 8px; }
.th-post__content blockquote {
    border-left: 4px solid #1f9c98; margin: 32px 0; padding: 8px 0 8px 24px;
    color: #0a5c55; font-size: 18px; line-height: 1.55;
}
/* header logo must be the light variant over the charcoal band */
body.single-post #ms-header:not(.tah-scrolled) .main-header__inner .logo-light { opacity: 1 !important; }
body.single-post #ms-header:not(.tah-scrolled) .main-header__inner .logo-dark { opacity: 0 !important; }
@media (max-width: 880px) {
    .th-post__grid { grid-template-columns: 1fr; padding-top: 80px; gap: 0; }
    .th-post__band { height: 300px; }
    /* single column reads: media, title, body, continue-reading, then extras */
    .th-post__main, .th-post__side { display: contents; }
    .th-post__hero, .th-post__video { order: 1; }
    .th-post__bandtop { order: 2; padding-top: 20px; }
    .th-post__content { order: 3; padding-top: 12px; }
    .th-post__more { order: 4; }
    .th-post__sidebody { order: 5; padding-top: 0; }
    .th-post__title { color: #262626; }
    .th-post__side .th-ins__type { background: rgba(38,38,38,.85); margin-bottom: 14px; }
    .th-post__meta { color: rgba(38, 38, 38, .55); }
    .th-post__tpls { margin: 8px 0 0; }
}
body[data-theme=dark] .th-post { background: #1f1f1f; }
body[data-theme=dark] .th-post__content h2,
body[data-theme=dark] .th-post__content h3 { color: #f0f0f0; }
body[data-theme=dark] .th-post__content p,
body[data-theme=dark] .th-post__content ul,
body[data-theme=dark] .th-post__content ol { color: rgba(240,240,240,.85); }
body[data-theme=dark] .th-post__meta { color: rgba(240,240,240,.5); }
@media (max-width: 880px) {
    body[data-theme=dark] .th-post__title { color: #f0f0f0; }
}
body[data-theme=dark] .th-post__content a { color: #9fe3de; }
body[data-theme=dark] .th-post__tpls { background: #2b2b2b; }
body[data-theme=dark] .th-post__tpl { color: #f0f0f0; border-bottom-color: rgba(255,255,255,.12); }
body[data-theme=dark] .th-post__tpl svg { stroke: #f0f0f0; }

/* Single posts: header floats transparent over the charcoal band, like the
   homepage hero — the band owns the top of the page */
body.single-post #ms-header {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    background: transparent !important;
}
body.single-post #ms-header .main-header__layout,
body.single-post .main-header {
    background: transparent !important;
    background-color: transparent !important;
}
body.single-post .ms-main.th-post { padding-top: 0 !important; }
@media (max-width: 880px) {
    body.single-post .th-post__grid { padding-top: 130px; }
}

.th-post__tpls-empty {
    color: rgba(38,38,38,.6);
    font-size: 15.5px;
    line-height: 1.5;
    padding: 16px 0;
    margin: 0;
}
body[data-theme=dark] .th-post__tpls-empty { color: rgba(240,240,240,.55); }

/* Other Insights: homepage list style, sidebar-sized */
.th-post__others { margin-top: clamp(32px, 4vw, 48px); }
.th-post__others-title {
    color: #262626;
    font-weight: 700;
    font-size: clamp(20px, 1.9vw, 26px);
    letter-spacing: -.01em;
    margin: 0 0 18px;
}
.th-post__other {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(38,38,38,.14);
}
.th-post__other:last-child { border-bottom: 0; }
.th-post__other-thumb {
    position: relative;
    width: 130px; height: 86px;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0ee;
    display: block;
}
.th-post__other-thumb img {
    width: 100% !important; height: 100% !important;
    object-fit: cover; display: block;
}
.th-post__other-thumb .th-ins__type {
    position: absolute; top: 5px; right: 5px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(38,38,38,.82);
    display: flex; align-items: center; justify-content: center;
    margin: 0;
}
.th-post__other-thumb .th-ins__type svg { width: 13px; height: 13px; }
.th-post__other-title {
    display: block;
    color: #0a5c55;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.35;
    margin-bottom: 4px;
    transition: color .2s ease;
}
.th-post__other:hover .th-post__other-title { color: #02605a; }
.th-post__other-meta { color: rgba(38,38,38,.55); font-size: 13px; }
body[data-theme=dark] .th-post__others-title { color: #f0f0f0; }
body[data-theme=dark] .th-post__other { border-bottom-color: rgba(255,255,255,.12); }
body[data-theme=dark] .th-post__other-title { color: #9fe3de; }
body[data-theme=dark] .th-post__other-meta { color: rgba(240,240,240,.5); }

/* Vlog: YouTube player takes the featured-image slot */
.th-post__video {
    aspect-ratio: 16 / 9;
    border-radius: 26px;
    overflow: hidden;
    background: #000;
}
.th-post__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Long articles collapse with a fade; Continue Reading reveals the rest */
.th-post__content--clamp {
    max-height: 900px;
    overflow: hidden;
    position: relative;
}
.th-post__content--clamp::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 240px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 90%);
    pointer-events: none;
}
body[data-theme=dark] .th-post__content--clamp::after {
    background: linear-gradient(180deg, rgba(31,31,31,0) 0%, #1f1f1f 90%);
}
.th-post__more { display: none; padding: 0 0 clamp(64px, 7vw, 110px); }
/* prompt floats centered over the fade, media-house style */
.th-post__more.is-on {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.th-post__content--clamp + .th-post__more { margin-top: -110px; }
.th-post__morebtn {
    display: inline-flex; align-items: center;
    background: #fff; border: 0; border-radius: 16px; padding: 6px;
    cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.1);
    transition: transform .25s ease;
}
.th-post__morebtn:hover { transform: translateY(-2px); }
.th-post__morebtn-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px;
}
.th-post__morebtn-arrow svg { width: 21px; height: 21px; stroke: #404040; }
.th-post__morebtn-label {
    background: #404040; color: #fff; font-weight: 600; font-size: 16px;
    padding: 13px 24px; border-radius: 12px; transition: background .28s ease;
}
.th-post__morebtn:hover .th-post__morebtn-label { background: #2e2e2e; }

/* Post pages: the footer runway continues the post's white (the theme's body
   background is a gray that peeked through the band's headroom gap) */
body.single-post .ms-footer { position: relative; }
body.single-post .ms-footer::before {
    content: "";
    position: absolute;
    top: -102px; height: 102px;
    left: 0; right: 0;
    background: #ffffff;
}
body[data-theme=dark].single-post .ms-footer::before,
body[data-theme=dark] body.single-post .ms-footer::before { background: #1f1f1f; }
body.single-post[data-theme=dark] .ms-footer::before { background: #1f1f1f; }

/* ---- Case study Previous/Next: house pill style, no gray backdrop ---- */
.ms-spn--wrap, .ms-spn_stck_h {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
.ms-spn_stck_h { display: flex !important; gap: 14px; }
.ms-spn--next a, .ms-spn--prev a {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.08) !important;
    transition: transform .25s ease !important;
}
.ms-spn--next a:hover, .ms-spn--prev a:hover { transform: translateY(-2px); }
.ms-spn--text {
    background: #404040 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 13px 24px !important;
    border-radius: 12px !important;
    transition: background .28s ease !important;
}
.ms-spn--next a:hover .ms-spn--text, .ms-spn--prev a:hover .ms-spn--text { background: #2e2e2e !important; }
/* chevrons: left on the first (Previous), right on the second (Next) */
.ms-spn_stck_h > div:first-child a::before,
.ms-spn_stck_h > div:last-child a::after {
    content: "";
    width: 42px; height: 46px; flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px 21px;
}
.ms-spn_stck_h > div:first-child a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 L8 12 L15 19'/%3E%3C/svg%3E");
}
.ms-spn_stck_h > div:last-child a::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5 L16 12 L9 19'/%3E%3C/svg%3E");
}

/* kill the theme's dark offset-slab effect behind the prev/next pills */
.ms-spn--next, .ms-spn--prev {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}
.ms-spn--next::before, .ms-spn--next::after,
.ms-spn--prev::before, .ms-spn--prev::after,
.ms-spn_stck_h::before, .ms-spn_stck_h::after {
    display: none !important;
    content: none !important;
}
.ms-spn--wrap .ms-spn_stck_h .ms-spn--next,
.ms-spn--wrap .ms-spn_stck_h .ms-spn--prev {
    flex-grow: 0 !important;
    background-color: transparent !important;
}
.ms-spn--wrap .ms-spn_stck_h .ms-spn--next:hover,
.ms-spn--wrap .ms-spn_stck_h .ms-spn--prev:hover {
    background-color: transparent !important;
}
.ms-spn--wrap .ms-spn_stck_h {
    background-color: transparent !important;
    backdrop-filter: none !important;
    max-width: none !important;
    width: auto !important;
    justify-content: center;
}

/* Case studies: every section aligns to the header column, so the title and
   intro share the logo's left edge exactly */
.single-portfolios .e-con-boxed > .e-con-inner {
    max-width: min(1280px, 90vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Case-study subheading dividers — shared element ids across the case pages,
   so the IDB "official template" treatment applies uniformly */
.elementor-element-f7921bf h4,
.elementor-element-7d8a794 h4 {
    border-top: 1.5px solid rgba(38, 38, 38, .3) !important;
    padding-top: 14px !important;
}
.elementor-element-3cba3e3 h4 {
    border-top: 0 !important;
    padding-top: 0 !important;
}

/* Dark mode: spec-block text hard-codes charcoal in the widget CSS — flip to light */
body[data-theme=dark] .th-case__spec h4 {
    color: #f5f5f5;
    border-top-color: rgba(245, 245, 245, .3);
}
body[data-theme=dark] .elementor-element-f7921bf h4,
body[data-theme=dark] .elementor-element-7d8a794 h4 {
    border-top-color: rgba(245, 245, 245, .3) !important;
}
body[data-theme=dark] .th-case__type-name { color: #f5f5f5; }
body[data-theme=dark] .th-case__type-weights,
body[data-theme=dark] .th-case__hue-meta { color: rgba(245, 245, 245, .6); }
body[data-theme=dark] .th-case__type-sample { color: rgba(245, 245, 245, .75); }
body[data-theme=dark] .th-case__mini b { color: rgba(245, 245, 245, .55); }

/* Case-study hero: soft charcoal gradient fade over the image — a light
   scrim at the top, clear through the middle, grounding fade at the base */
body.single-portfolios .ms-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(38, 38, 38, .28) 0%,
        rgba(38, 38, 38, 0) 32%,
        rgba(38, 38, 38, 0) 58%,
        rgba(38, 38, 38, .42) 100%);
}

/* Case studies: smaller, quieter logo — client artwork owns the colour on these
   pages, so the wordmark steps back (charcoal badge via logo-full-mono.svg swap) */
body.single-portfolios .logo-full img,
body.single-portfolios .logo-mark img {
    height: 48px !important;
}

/* Case studies: fixed gap between logo and title (the templates' vw margins
   collapse on laptops and balloon on wide screens), charcoal heading type */
body.single-portfolios .elementor-element-d743569,
body.single-portfolios .elementor-element-d058fe3 {
    margin-top: 10px !important;
}
body.single-portfolios .elementor-widget-heading .elementor-heading-title,
body.single-portfolios .elementor-widget-text-editor h3,
body.single-portfolios .elementor-widget-text-editor h4 {
    color: #404040;
}
body[data-theme=dark].single-portfolios .elementor-widget-heading .elementor-heading-title,
body[data-theme=dark].single-portfolios .elementor-widget-text-editor h3,
body[data-theme=dark].single-portfolios .elementor-widget-text-editor h4 {
    color: #f5f5f5;
}

/* Case studies: Challenges / Objectives paragraphs read as dash-bullet lists
   (941d238/1e4ed38 = editorial cases, 548fbd1/f98cf78 = web template) */
body.single-portfolios .elementor-element-941d238 p,
body.single-portfolios .elementor-element-1e4ed38 p,
body.single-portfolios .elementor-element-548fbd1 p,
body.single-portfolios .elementor-element-f98cf78 p {
    position: relative;
    padding-left: 26px;
    margin: 0 0 10px !important;
}
body.single-portfolios .elementor-element-941d238 p::before,
body.single-portfolios .elementor-element-1e4ed38 p::before,
body.single-portfolios .elementor-element-548fbd1 p::before,
body.single-portfolios .elementor-element-f98cf78 p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: rgba(38, 38, 38, .55);
}
body[data-theme=dark].single-portfolios .elementor-element-941d238 p::before,
body[data-theme=dark].single-portfolios .elementor-element-1e4ed38 p::before,
body[data-theme=dark].single-portfolios .elementor-element-548fbd1 p::before,
body[data-theme=dark].single-portfolios .elementor-element-f98cf78 p::before {
    background: rgba(245, 245, 245, .6);
}

/* Case studies: the hero no longer bleeds full-viewport — it sits on the same
   fixed column as everything else (title, galleries, spec blocks), with a
   capped height so large screens don't stretch it into a wall */
body.single-portfolios .ms-hero {
    max-width: min(1280px, 90vw) !important;
    height: min(70vh, 660px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 18px;
    overflow: hidden;
}

/* Footer template and the homepage work section: boxed containers hug the
   header column like everything else (Elementor's boxed width exceeds small
   viewports and renders full-bleed there) */
.elementor-2314 .e-con-boxed > .e-con-inner,
.elementor-element-67704be > .e-con-inner {
    max-width: min(1280px, 90vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Article continuation: a reading control with its own breathing room. */
body.single-post .th-post__content--clamp::after{height:120px}
body.single-post .th-post__content--clamp + .th-post__more{margin-top:24px}
body.single-post .th-post__morebtn{gap:4px;background:#404040;color:#fff;border:0;border-radius:16px;padding:6px 12px 6px 8px;box-shadow:none;transition:background .2s ease}
body.single-post .th-post__morebtn:hover{transform:none;background:#262626}
body.single-post .th-post__morebtn-label{order:0;background:transparent!important;padding:12px 12px;font-size:16px;line-height:1.4;border-radius:0}
body.single-post .th-post__morebtn-arrow{order:1;width:28px;height:40px}
body.single-post .th-post__morebtn-arrow svg{width:17px;height:17px;stroke:#fff;stroke-width:2.2}
body.single-post .th-post__morebtn:focus-visible{outline:3px solid #0BA6A0;outline-offset:4px}