/*
Theme Name: Solvenix Tech
Theme URI: https://solvenixtech.com/
Author: Solvenix Tech
Author URI: https://solvenixtech.com/
Description: Dark, GSAP-powered agency theme. Creates its pages on activation and hands every section to Elementor as a widget. Lead The Next.
Version: 1.8.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: solvenix
Tags: agency, portfolio, dark, one-column, two-columns, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, blog, translation-ready

Solvenix Tech is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ------------------------------------------------------------------
   01. DESIGN TOKENS (brand · dark theme · light theme)
   02. BASE / RESET · LENIS
   03. WORDPRESS CORE CLASSES
   04. UTILITIES (gradient text, orbs, eyebrow, pills, glass card, social)
   05. BUTTONS
   06. PRELOADER & PAGE TRANSITION
   07. CUSTOM CURSOR · SCROLL PROGRESS · BACK TO TOP
   08. LOGO · THEME TOGGLE
   09. HEADER: TOP BAR · BOTTOM GLASS DOCK · MOBILE TAB BAR (header.php)
   10. OVERLAY MENU (mobile / tablet)
   11. FILTER STATE
   12. HOME: HERO
   13. HOME: TECH STACK RIBBONS (GSAP marquee)
   14. SECTION BASE
   15. HOME: STATEMENT (scroll-lit words)
   16. SERVICES (bento cards + mini mockups)
   17. HOME: STICKY CASE STUDIES (stacking cards)
   18. HOME: THE SOLVENIX ENGINE (core · wires · particles)
   19. PORTFOLIO MASONRY
   20. CEO MESSAGE
   21. FEATURE CARDS · COUNTERS
   22. PRICING
   23. TEAM (pinned horizontal scroll)
   24. BLOG CARDS (the loop)
   25. CALL TO ACTION + LEAD FORM
   26. FOOTER (footer.php · widget areas)
   27. PAGE HERO · BREADCRUMB
   28. SERVICES PAGE (page-services.php)
   29. CASE STUDY (single-portfolio.php)
   30. BLOG ARCHIVE · SIDEBAR · PAGINATION
   31. SINGLE POST · TYPOGRAPHY · COMMENTS
   32. CONTACT PAGE · FORMS
   33. ABOUT PAGE (story · values · timeline · team · drawer · logos)
   34. CAREER PAGE (perks · culture · roles · apply modal)
   35. PORTFOLIO ARCHIVE (grid / list · Flip · hover preview)
   36. EMPLOYEE PROFILE (single-team.php)
   37. SINGLE POST LAYOUT FIX
   38. LIGHTBOX
   39. ANIMATION HELPERS & KEYFRAMES
   40. RESPONSIVE
   41. REDUCED MOTION
   42. WORDPRESS CORE · THEME-ONLY COMPONENTS
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS (brand · dark theme · light theme)
   ========================================================================== */
:root {
    /* Brand (identical in both themes) */
    --st-orange: #FF6600;
    --st-orange-light: #FF8A3D;
    --st-orange-deep: #D94E00;
    --st-orange-rgb: 255, 102, 0;
    --st-white: #FFFFFF;
    --st-black: #111111;
    --st-success: #22C55E;

    --st-grad: linear-gradient(135deg, #FF6600 0%, #FF8A3D 100%);
    --st-grad-text: linear-gradient(100deg, #FF6600 0%, #FFB27A 50%, #FF6600 100%);

    /* Typography */
    --st-font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --st-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --st-font-script: 'Caveat', 'Brush Script MT', cursive;

    /* Layout */
    --st-radius-sm: 12px;
    --st-radius: 20px;
    --st-radius-lg: 28px;
    --st-radius-xl: 36px;
    --st-section-y: 130px;
    --st-header-h: 90px;

    /* Motion */
    --st-ease: cubic-bezier(.22, 1, .36, 1);
    --st-ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Dark theme (default) ---------- */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --st-bg: #0D0E12;
    --st-bg-2: #12141D;
    --st-bg-3: #1E202B;
    --st-bg-4: #272A37;
    --st-bg-rgb: 13, 14, 18;

    --st-heading: #FFFFFF;
    --st-text: #A0A5B5;
    --st-text-strong: rgba(255, 255, 255, .86);

    --st-surface: rgba(255, 255, 255, .035);
    --st-surface-2: rgba(255, 255, 255, .06);
    --st-surface-solid: #151722;
    --st-glass: rgba(18, 20, 29, .74);
    --st-glass-strong: rgba(18, 20, 29, .9);

    --st-border: rgba(255, 255, 255, .08);
    --st-border-strong: rgba(255, 255, 255, .16);
    --st-grid-line: rgba(255, 255, 255, .045);

    --st-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65);
    --st-shadow-sm: 0 12px 30px -12px rgba(0, 0, 0, .6);

    --st-mark-star: #0D0E12;
    --st-outline: rgba(255, 255, 255, .9);
    --st-ribbon-dark: #1E202B;
    --st-orb-opacity: 1;
    --st-noise-opacity: .06;

    /* Orange as TEXT, and orange as a FILL behind white text. On dark both
       are the brand colour; light mode deepens them so they stay readable
       (see the light block below). */
    --st-orange-ink: var(--st-orange);
    --st-orange-fill: var(--st-orange);
    --st-success-ink: var(--st-success);
    --st-orange-light-ink: var(--st-orange-light);
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
    color-scheme: light;

    --st-bg: #F8F9FA;
    --st-bg-2: #FFFFFF;
    --st-bg-3: #EEF0F4;
    --st-bg-4: #E2E5EB;
    --st-bg-rgb: 248, 249, 250;

    --st-heading: #111111;
    /* Body copy sat at 5.95:1 and read washed out next to the headings.
       7.6:1 is comfortably above AA without going to flat black. */
    --st-text: #4A5064;
    --st-text-strong: #1A1D26;

    /* Cards were near-white on a near-white page, so they read as nothing at
       all. Solid white against the #F8F9FA page, with the firmer borders and
       shadows below, gives them an edge again. */
    --st-surface: #FFFFFF;
    --st-surface-2: rgba(17, 17, 17, .07);
    --st-surface-solid: #FFFFFF;
    --st-glass: rgba(255, 255, 255, .86);
    --st-glass-strong: rgba(255, 255, 255, .95);

    /* Roughly doubled: at .08 a border is invisible on a light background,
       which is what made panels and dividers look like they were missing. */
    --st-border: rgba(17, 17, 17, .15);
    --st-border-strong: rgba(17, 17, 17, .28);
    --st-grid-line: rgba(17, 17, 17, .09);

    --st-shadow: 0 30px 60px -28px rgba(17, 24, 39, .30);
    --st-shadow-sm: 0 12px 30px -14px rgba(17, 24, 39, .26);

    /* #FF6600 as text on a light background is only 2.79:1 — below AA and
       the main reason light mode felt washed out. #C04500 reaches 4.87:1
       and still reads as the brand orange. Fills keep more punch because
       they only carry white text. */
    --st-orange-ink: #B84200;
    --st-orange-fill: #C94A00;

    /* The bright success green (#22C55E) is only 1.96:1 as text on a light
       background, and the light orange 2.22:1. These are the readable
       versions; the bright originals stay for dots, bars and fills. */
    --st-success-ink: #0F7034;
    --st-orange-light-ink: #B84200;
}

/* ---------- Per-section colour scheme ----------
   Any container carrying data-st-scheme keeps that palette whatever the
   page is set to. Custom properties inherit, so one attribute re-themes
   everything inside it. The Elementor Style tab writes this attribute, so
   a section that only reads well one way can be pinned while the rest of
   the page follows the site toggle. */
[data-st-scheme="dark"] {
    color-scheme: dark;

    --st-bg: #0D0E12;
    --st-bg-2: #12141D;
    --st-bg-3: #1E202B;
    --st-bg-4: #272A37;
    --st-bg-rgb: 13, 14, 18;

    --st-heading: #FFFFFF;
    --st-text: #A0A5B5;
    --st-text-strong: rgba(255, 255, 255, .86);

    --st-surface: rgba(255, 255, 255, .035);
    --st-surface-2: rgba(255, 255, 255, .06);
    --st-surface-solid: #151722;
    --st-glass: rgba(18, 20, 29, .74);
    --st-glass-strong: rgba(18, 20, 29, .9);

    --st-border: rgba(255, 255, 255, .08);
    --st-border-strong: rgba(255, 255, 255, .16);
    --st-grid-line: rgba(255, 255, 255, .045);

    --st-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65);
    --st-shadow-sm: 0 12px 30px -12px rgba(0, 0, 0, .6);

    --st-mark-star: #0D0E12;
    --st-outline: rgba(255, 255, 255, .9);
    --st-ribbon-dark: #1E202B;
    --st-orb-opacity: 1;
    --st-noise-opacity: .06;

    --st-orange-ink: var(--st-orange);
    --st-orange-fill: var(--st-orange);
    --st-success-ink: var(--st-success);
    --st-orange-light-ink: var(--st-orange-light);

    background-color: var(--st-bg);
}

[data-st-scheme="light"] {
    color-scheme: light;

    --st-bg: #F8F9FA;
    --st-bg-2: #FFFFFF;
    --st-bg-3: #EEF0F4;
    --st-bg-4: #E2E5EB;
    --st-bg-rgb: 248, 249, 250;

    --st-heading: #111111;
    --st-text: #4A5064;
    --st-text-strong: #1A1D26;

    --st-surface: #FFFFFF;
    --st-surface-2: rgba(17, 17, 17, .07);
    --st-surface-solid: #FFFFFF;
    --st-glass: rgba(255, 255, 255, .86);
    --st-glass-strong: rgba(255, 255, 255, .95);

    --st-border: rgba(17, 17, 17, .15);
    --st-border-strong: rgba(17, 17, 17, .28);
    --st-grid-line: rgba(17, 17, 17, .09);

    --st-shadow: 0 30px 60px -28px rgba(17, 24, 39, .30);
    --st-shadow-sm: 0 12px 30px -14px rgba(17, 24, 39, .26);

    --st-mark-star: #FFFFFF;
    --st-outline: rgba(17, 17, 17, .72);
    --st-ribbon-dark: #1E202B;
    --st-orb-opacity: .5;
    --st-noise-opacity: .03;

    --st-orange-ink: #B84200;
    --st-orange-fill: #C94A00;
    --st-success-ink: #0F7034;
    --st-orange-light-ink: #B84200;

    background-color: var(--st-bg);
}

/* A forced scheme paints its own background, so the section inside it
   must not paint one on top. */
[data-st-scheme] > .st-section,
[data-st-scheme] > section { background-color: transparent; }

/* Some pieces stay dark in BOTH themes — the overlay menu, the preloader,
   and anything printed over a photo or a dark scrim. The deepened orange
   above would be too dark against those, so inside them the token goes back
   to the bright brand colour. Custom properties inherit, so setting it on
   the component root is enough for everything inside it. */
[data-theme="light"] .st-menu,
[data-theme="light"] .st-loader,
[data-theme="light"] .st-project__overlay,
[data-theme="light"] .st-pf__link,
[data-theme="light"] .st-pf-feature,
[data-theme="light"] .st-case__hero,
[data-theme="light"] .st-case-card__media,
[data-theme="light"] .st-mock--code,
[data-theme="light"] .st-emini--deploy {
    --st-orange-ink: var(--st-orange);
    --st-text: rgba(255, 255, 255, .78);
    --st-heading: #FFFFFF;

    --st-mark-star: #FFFFFF;
    --st-outline: #111111;
    --st-ribbon-dark: #111111;
    --st-orb-opacity: .55;
    --st-noise-opacity: 0;
}


/* ==========================================================================
   02. BASE / RESET · LENIS
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 30px; }

body {
    margin: 0;
    font-family: var(--st-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--st-text);
    background-color: var(--st-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* `hidden` turns the element into a scroll container, which silently
       cancels every position:sticky on the page — that is what stops the
       case-study stack sticking on a live site. `clip` blocks the same
       sideways scrolling WITHOUT creating one, so sticky survives. The
       `hidden` line stays first as the fallback for browsers too old for
       clip (Safari < 16). */
    overflow-x: hidden;
    overflow-x: clip;
    transition: background-color .5s ease, color .5s ease;
}

/* Must match on the root too: if html is anything other than visible/clip,
   body's overflow stops propagating to the viewport and body becomes the
   scroll container — sticky dies again. Plugins and page-builder settings
   love to set html{overflow-x:hidden}; solvenixFixRootOverflow() in main.js
   converts that back to clip at runtime. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

body.is-loading { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--st-font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--st-heading);
}

p, figure, blockquote { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--st-orange-ink); }

button { font: inherit; color: inherit; }

::selection { background: var(--st-orange); color: var(--st-white); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--st-bg); }
::-webkit-scrollbar-thumb { background: var(--st-bg-4); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--st-orange); }

:focus-visible { outline: 2px solid var(--st-orange); outline-offset: 3px; border-radius: 6px; }

.container { max-width: 1260px; }

/* Theme switch — circular reveal via View Transitions API */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }


/* Lenis smooth scroll (required rules) */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ==========================================================================
   03. WORDPRESS CORE CLASSES
   ========================================================================== */
/* Accessibility */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
    word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link:focus {
    top: 16px;
    left: 16px;
    z-index: 100000;
    width: auto;
    height: auto;
    padding: 12px 20px;
    clip: auto !important;
    clip-path: none;
    color: var(--st-white);
    background: var(--st-orange);
    border-radius: 10px;
    font-weight: 600;
}

/* Alignment */
.alignleft   { float: left; margin: .4em 1.6em 1em 0; }
.alignright  { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }
.alignwide   { margin-left: -6%; margin-right: -6%; max-width: 112%; }
.alignfull   { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }

/* Captions & galleries */
.wp-caption { max-width: 100%; margin-bottom: 1.5em; }
.wp-caption-text,
.wp-element-caption { margin-top: 12px; font-size: 14px; text-align: center; color: var(--st-text); }
.gallery { display: grid; gap: 16px; }
.gallery-item { margin: 0; }
.sticky, .bypostauthor { display: block; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

/* Generic WP form elements */
.required { color: var(--st-orange-ink); }


/* ==========================================================================
   04. UTILITIES (gradient text, orbs, eyebrow, pills, glass card, social)
   ========================================================================== */
.st-gradient-text {
    background: var(--st-grad-text);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: stGradientShift 6s linear infinite;
}

.st-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: var(--st-orb-opacity);
    pointer-events: none;
    z-index: 0;
}

.st-noise {
    position: absolute;
    inset: 0;
    opacity: var(--st-noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Section eyebrow — "{ 01 } Service engine" */
.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--st-font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--st-heading);
}

.st-eyebrow b { font-weight: 600; letter-spacing: .04em; color: var(--st-orange-ink); }

.st-eyebrow::after {
    content: "";
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, var(--st-orange), transparent);
}

.st-eyebrow--center::before {
    content: "";
    width: 46px;
    height: 1px;
    background: linear-gradient(-90deg, var(--st-orange), transparent);
}

/* Pill link */
.st-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--st-text-strong);
    background: var(--st-surface);
    border: 1px solid var(--st-border-strong);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .4s ease, color .4s ease, box-shadow .4s ease;
}

.st-pill__badge {
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-white);
    background: var(--st-orange);
    border-radius: 50px;
}

.st-pill i { font-size: 12px; transition: transform .4s var(--st-ease); }
.st-pill:hover { color: var(--st-heading); border-color: rgba(var(--st-orange-rgb), .5); box-shadow: 0 0 30px rgba(var(--st-orange-rgb), .2); }
.st-pill:hover i { transform: translateX(4px); }

/* Base glass card with cursor spotlight */
.st-card {
    --mx: 50%;
    --my: 50%;
    position: relative;
    background: linear-gradient(160deg, var(--st-surface-2) 0%, var(--st-surface) 100%);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    isolation: isolate;
    transition: transform .55s var(--st-ease), border-color .55s var(--st-ease), box-shadow .55s var(--st-ease), background-color .5s ease;
}

.st-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(460px circle at var(--mx) var(--my), rgba(var(--st-orange-rgb), .13), transparent 45%);
    opacity: 0;
    transition: opacity .5s ease;
}

.st-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--st-orange), transparent);
    opacity: 0;
    transition: opacity .5s ease;
}

.st-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--st-orange-rgb), .5);
    box-shadow: 0 0 0 1px rgba(var(--st-orange-rgb), .15), 0 30px 60px -25px rgba(var(--st-orange-rgb), .45);
}

.st-card:hover::before,
.st-card:hover::after { opacity: 1; }

/* Stars */
.st-stars { display: flex; gap: 3px; font-size: 12px; color: var(--st-orange-ink); }

/* Social icons */
.st-social { display: flex; flex-wrap: wrap; gap: 10px; }

.st-social a {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--st-heading);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    transition: all .4s var(--st-ease);
}

/* Hover is a WHITE glyph on an ORANGE tile.
   The colour is set on the <i> as well as the <a>: the footer and the
   overlay menu each carry a blanket "a:hover" rule of equal specificity
   that lands later in this file, so they used to win — painting the glyph
   orange on an orange tile, where it disappeared. Colouring the icon
   element itself sits one level deeper than either, so the tile always
   reads. */
.st-social a:hover,
.st-social a:focus-visible {
    color: #fff;
    background: var(--st-orange);
    border-color: var(--st-orange);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -8px rgba(var(--st-orange-rgb), .8);
}

.st-social a > i,
.st-social a > svg { transition: color .4s var(--st-ease); }

.st-social a:hover > i,
.st-social a:focus-visible > i,
.st-social a:hover > svg,
.st-social a:focus-visible > svg { color: #fff; fill: #fff; }

.st-social--sm a { width: 38px; height: 38px; font-size: 13px; border-radius: 50%; }


/* ==========================================================================
   05. BUTTONS
   ========================================================================== */
.st-btn {
    --btn-bg: transparent;
    --btn-color: var(--st-heading);
    --btn-border: transparent;
    --btn-fill: var(--st-orange-deep);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 30px;
    font-family: var(--st-font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--btn-color);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 50px;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition: transform .45s var(--st-ease), box-shadow .45s var(--st-ease), color .45s var(--st-ease), border-color .45s var(--st-ease);
}

/* Fill layer (slides up on hover) */
.st-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-fill);
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform .5s var(--st-ease);
}

/* Shine sweep */
.st-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s var(--st-ease);
    pointer-events: none;
}

.st-btn i { font-size: 13px; transition: transform .45s var(--st-ease); }

.st-btn:hover { color: var(--btn-color); transform: translateY(-3px); }
.st-btn:hover::before { transform: translateY(0); }
.st-btn:hover::after { transform: translateX(120%); }
.st-btn:hover i.fa-arrow-right { transform: translateX(4px); }
.st-btn:active { transform: translateY(-1px); }
.st-btn[disabled] { opacity: .7; pointer-events: none; }

.st-btn--lg { padding: 18px 34px; font-size: 16px; }

.st-btn--primary {
    --btn-bg: var(--st-orange-fill);
    --btn-color: var(--st-white);
    box-shadow: 0 12px 30px -10px rgba(var(--st-orange-rgb), .75);
}

.st-btn--primary:hover { box-shadow: 0 20px 40px -12px rgba(var(--st-orange-rgb), .9); }

.st-btn--outline {
    --btn-color: var(--st-heading);
    --btn-border: var(--st-border-strong);
    --btn-fill: var(--st-heading);
    background: var(--st-surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.st-btn--outline:hover { --btn-color: var(--st-bg); border-color: var(--st-heading); }

.st-btn--white {
    --btn-bg: var(--st-white);
    --btn-color: var(--st-orange);
    --btn-fill: var(--st-black);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .45);
}

.st-btn--white:hover { --btn-color: var(--st-white); }

.st-btn--ghost-white {
    --btn-color: var(--st-white);
    --btn-border: rgba(255, 255, 255, .5);
    --btn-fill: rgba(255, 255, 255, .16);
}

.st-btn--ghost-white i.fa-whatsapp { font-size: 18px; }

/* Link with arrow */
.st-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--st-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-heading);
}

.st-link i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 12px;
    border: 1px solid var(--st-border-strong);
    border-radius: 50%;
    transform: rotate(-45deg);
    transition: all .45s var(--st-ease);
}

.st-card:hover .st-link i,
.st-link:hover i { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); transform: rotate(0); }


/* ==========================================================================
   06. PRELOADER & PAGE TRANSITION
   ========================================================================== */
.st-loader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    color: var(--st-white);
    pointer-events: all;
    /* Safety net: hide automatically if JavaScript never runs */
    animation: stHideLoader .6s ease 5s forwards;
}

.st-loader.is-done { display: none; }

.st-loader__cols { position: absolute; inset: 0; display: flex; }

.st-loader__cols span {
    flex: 1;
    height: 100%;
    background: #0D0E12;
    border-right: 1px solid rgba(255, 255, 255, .035);
}

.st-loader__cols span:last-child { border-right: 0; }

.st-loader__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.st-loader__mark { width: 76px; height: 76px; overflow: visible; }
.st-loader__body, .st-loader__px { fill: var(--st-orange); }
.st-loader__star { fill: #0D0E12; }
.st-loader__body, .st-loader__star, .st-loader__px { transform-box: fill-box; transform-origin: center; }

.st-loader__word {
    display: flex;
    gap: .28em;
    font-family: var(--st-font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.st-loader__brand { display: inline-block; overflow: hidden; padding-bottom: .06em; }
.st-loader__brand--accent { color: var(--st-orange-ink); }
.st-lc { display: inline-block; }

.st-loader__tag {
    padding-left: .6em;
    font-family: var(--st-font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .6em;
    text-transform: uppercase;
    color: var(--st-orange-ink);
}

.st-loader__meta {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 36px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.st-loader__count { min-width: 56px; font-family: var(--st-font-display); font-size: 16px; letter-spacing: 0; color: var(--st-white); }
.st-loader__line { flex: 1; height: 1px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.st-loader__line i { display: block; height: 100%; background: var(--st-grad); transform: scaleX(0); transform-origin: left; }

body.is-loading { overflow: hidden; }


/* ==========================================================================
   07. CUSTOM CURSOR · SCROLL PROGRESS · BACK TO TOP
   ========================================================================== */
/* Custom cursor */
.st-cursor,
.st-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .3s ease;
}

.has-cursor .st-cursor,
.has-cursor .st-cursor-dot { opacity: 1; }

.st-cursor {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--st-orange-rgb), .6);
    transition: opacity .3s ease, width .4s var(--st-ease), height .4s var(--st-ease), margin .4s var(--st-ease), background-color .4s ease, border-color .4s ease;
}

.st-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--st-orange); }
.st-cursor, .st-cursor-dot { transform: translate3d(-200px, -200px, 0); }

.st-cursor__label {
    font-family: var(--st-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--st-white);
    opacity: 0;
    transform: scale(.5);
    transition: all .35s var(--st-ease);
}

.st-cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(var(--st-orange-rgb), .1); }

.st-cursor.is-view {
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    background: var(--st-orange);
    border-color: var(--st-orange);
}

.st-cursor.is-view .st-cursor__label { opacity: 1; transform: scale(1); }
.st-cursor.is-view + .st-cursor-dot { opacity: 0; }

/* Back to top with progress ring */
.st-back-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 990;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--st-heading);
    background: var(--st-glass-strong);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--st-shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .45s var(--st-ease);
}

.st-back-top svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.st-back-top circle {
    fill: none;
    stroke: var(--st-orange);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 138.2;
    stroke-dashoffset: var(--progress-offset, 138.2);
}

.st-back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.st-back-top:hover { color: var(--st-white); background: var(--st-orange); }


/* Scroll progress bar */
.st-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: 2px;
    pointer-events: none;
}

.st-progress span {
    display: block;
    height: 100%;
    background: var(--st-grad);
    box-shadow: 0 0 10px var(--st-orange);
    transform: scaleX(0);
    transform-origin: left;
}


/* ==========================================================================
   08. LOGO · THEME TOGGLE
   ========================================================================== */
.st-logo { display: inline-flex; align-items: center; gap: 12px; }
.st-logo:hover { color: inherit; }

.st-logo__mark { width: 42px; height: 42px; flex-shrink: 0; overflow: visible; transition: transform .6s var(--st-ease); }
.st-logo:hover .st-logo__mark { transform: rotate(-8deg) scale(1.05); }

.st-logo__text { display: flex; flex-direction: column; line-height: 1; }

.st-logo__name {
    font-family: var(--st-font-display);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--st-heading);
}

.st-logo__name em { font-style: normal; color: var(--st-orange-ink); }

.st-logo__tag {
    margin-top: 5px;
    font-family: var(--st-font-display);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .52em;
    text-transform: uppercase;
    color: var(--st-orange-ink);
}

.st-theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 16px;
    color: var(--st-heading);
    background: var(--st-surface);
    border: 1px solid var(--st-border-strong);
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    transition: all .4s var(--st-ease);
}

.st-theme-toggle i { grid-area: 1 / 1; transition: transform .6s var(--st-ease), opacity .4s ease; }
.st-theme-toggle:hover { color: var(--st-orange-ink); border-color: var(--st-orange); transform: rotate(15deg); }

[data-theme="dark"] .st-theme-toggle__moon,
[data-theme="light"] .st-theme-toggle__sun { opacity: 0; transform: translateY(120%) rotate(90deg); }


/* ==========================================================================
   09. HEADER: TOP BAR · BOTTOM GLASS DOCK · MOBILE TAB BAR (header.php)
   ========================================================================== */
/* ---------- Top bar (brand + theme toggle, scrolls away) ---------- */
.st-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 24px 0;
    background: var(--st-header-bg, transparent);
    color: var(--st-header-text, inherit);
}

.st-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.st-topbar__right { display: flex; align-items: center; gap: 14px; }

.st-status {
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text-strong);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.st-topbar__mail { align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--st-text-strong); }
.st-topbar__mail i { color: var(--st-orange-ink); }

/* ---------- Floating bottom dock (desktop) ---------- */
.st-dock {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 1000;
    padding: 1px;
    border-radius: 999px;
    transform: translate(-50%, 170%);
    transition: transform .9s var(--st-ease);
}

.st-dock.is-ready { transform: translate(-50%, 0); }

/* Rotating orange border */
.st-dock__border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: var(--st-border-strong);
    pointer-events: none;
}

.st-dock__border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1400px;
    height: 1400px;
    margin: -700px 0 0 -700px; /* centred with margins so the rotation stays in place */
    background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--st-orange-rgb), .95) 80%, #FFB27A 90%, transparent 100%);
    animation: stSpin 5s linear infinite;
}

/* Glass body — lighter at the top of the page, frosted once scrolled */
.st-dock__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 7px;
    background: var(--st-dock-bg, rgba(var(--st-bg-rgb), .45));
    border-radius: inherit;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: background-color .5s ease, backdrop-filter .5s ease, box-shadow .5s ease;
}

.st-dock.is-scrolled .st-dock__inner {
    background: var(--st-glass-strong);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--st-orange-rgb), .08), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* Brand */
.st-dock__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 16px 5px 5px;
    margin-right: 4px;
    background: var(--st-surface-2);
    border-radius: 50px;
    transition: background-color .3s ease;
}

.st-dock__brand svg { width: 36px; height: 36px; overflow: visible; transition: transform .6s var(--st-ease); }
.st-dock__brand:hover svg { transform: rotate(-12deg) scale(1.06); }

.st-dock__brand-text {
    font-family: var(--st-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--st-heading);
}

.st-dock__brand-text em { font-style: normal; color: var(--st-orange-ink); }

/* Links */
.st-dock__menu { display: flex; align-items: center; gap: 1px; }
.st-dock__menu > li { position: relative; }

.st-dock__menu > li > a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    font-family: var(--st-font-display);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--st-text-strong);
    border-radius: 50px;
    transition: color .4s var(--st-ease);
}

.st-dock__menu > li > a:hover { color: var(--st-heading); }
.st-dock__menu > li > a.is-lit,
.st-dock__menu > .current-menu-item > a.is-lit { color: var(--st-bg); }

/* Glowing active dot */
.st-dock__menu > li > a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--st-orange);
    box-shadow: 0 0 8px var(--st-orange);
    transform: scale(0);
    transition: transform .4s var(--st-ease);
}

.st-dock__menu > .current-menu-item > a::before { transform: scale(1); }

/* Sliding pill (positioned by main.js) */
.st-dock__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: var(--st-heading);
    border-radius: 50px;
    opacity: 0;
    pointer-events: none;
    transition: transform .55s var(--st-ease), width .55s var(--st-ease), height .55s var(--st-ease), opacity .3s ease;
}

/* Dropdown opens UPWARD from the dock */
.st-dock .menu-item-has-children > a::after {
    content: "\f077";
    font-family: "Font Awesome 6 Free";
    font-size: 9px;
    font-weight: 900;
    transition: transform .4s var(--st-ease);
}

.st-dock .menu-item-has-children:hover > a::after,
.st-dock .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }

.st-dock .sub-menu {
    position: absolute;
    bottom: calc(100% + 22px);
    left: 50%;
    width: 330px;
    padding: 10px;
    background: var(--st-surface-solid);
    border: 1px solid var(--st-border-strong);
    border-radius: 22px;
    box-shadow: var(--st-shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -10px) scale(.97);
    transform-origin: bottom center;
    transition: opacity .35s ease, transform .45s var(--st-ease), visibility .35s;
}

.st-dock .sub-menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: -24px; height: 24px; } /* hover bridge */

.st-dock .menu-item-has-children:hover > .sub-menu,
.st-dock .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }

.st-dock .sub-menu a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; transition: background-color .3s ease; }

.st-dock .sub-menu a > i {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border-radius: 12px;
    transition: all .4s var(--st-ease);
}

.st-dock .sub-menu b { display: block; font-family: var(--st-font-display); font-size: 15px; font-weight: 600; color: var(--st-heading); }
.st-dock .sub-menu small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--st-text); }
.st-dock .sub-menu a:hover { background: var(--st-surface-2); }
.st-dock .sub-menu a:hover > i { color: var(--st-white); background: var(--st-orange); transform: rotate(-8deg); }

/* Glowing CTA */
.st-dock__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 4px 0 10px;
    padding: 6px 20px 6px 6px;
    font-family: var(--st-font-display);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--st-white);
    background: var(--st-orange);
    border-radius: 50px;
    overflow: hidden;
    isolation: isolate;
    animation: stDockGlow 3s ease-in-out infinite;
    transition: transform .45s var(--st-ease), background-color .4s ease;
}

.st-dock__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s var(--st-ease);
}

.st-dock__cta-ico {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--st-orange-ink);
    background: var(--st-white);
    border-radius: 50%;
    transition: transform .5s var(--st-ease);
}

.st-dock__cta:hover { color: var(--st-white); background: var(--st-orange-deep); transform: translateY(-2px); }
.st-dock__cta:hover::after { transform: translateX(120%); }
.st-dock__cta:hover .st-dock__cta-ico { transform: rotate(-45deg); }

.st-theme-toggle--dock { width: 42px; height: 42px; margin-left: 2px; background: var(--st-surface-2); border-color: transparent; }

/* ---------- Mobile tab bar ---------- */
.st-tabbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1001;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 8px 6px;
    background: var(--st-glass-strong);
    border: 1px solid var(--st-border-strong);
    border-radius: 24px;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .5);
}

.st-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--st-text);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .3s ease;
}

.st-tabbar__item i { font-size: 18px; transition: transform .4s var(--st-ease); }
.st-tabbar__item.is-active,
.st-tabbar__item[aria-expanded="true"] { color: var(--st-orange-ink); }
.st-tabbar__item.is-active i { transform: translateY(-2px); }

.st-burger__close,
.st-burger[aria-expanded="true"] .st-burger__open { display: none; }
.st-burger[aria-expanded="true"] .st-burger__close { display: block; }

.st-tabbar__fab {
    justify-self: center;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-top: -34px;
    font-size: 22px;
    color: var(--st-white);
    background: var(--st-grad);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--st-bg), 0 12px 28px -6px rgba(var(--st-orange-rgb), .9);
    transition: transform .4s var(--st-ease);
}

.st-tabbar__fab:hover,
.st-tabbar__fab:focus { color: var(--st-white); transform: rotate(90deg); }

.menu-open .st-tabbar { background: rgba(18, 20, 29, .95); border-color: rgba(255, 255, 255, .12); }
.menu-open .st-tabbar__fab { box-shadow: 0 0 0 6px #0D0E12, 0 12px 28px -6px rgba(var(--st-orange-rgb), .9); }

@keyframes stDockGlow {
    0%, 100% { box-shadow: 0 0 16px rgba(var(--st-orange-rgb), .45); }
    50%      { box-shadow: 0 0 32px rgba(var(--st-orange-rgb), .85); }
}


/* ==========================================================================
   10. OVERLAY MENU (mobile / tablet)
   ========================================================================== */
.st-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    pointer-events: none;
    color: var(--st-white);
}

.st-menu.is-open { visibility: visible; pointer-events: auto; }

.st-menu__bg { position: absolute; inset: 0; display: flex; }

.st-menu__bg span {
    flex: 1;
    background: #0D0E12;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .7s var(--st-ease-io);
}

.st-menu__bg span:nth-child(2) { transition-delay: .06s; background: #101219; }
.st-menu__bg span:nth-child(3) { transition-delay: .12s; background: #12141D; }
.st-menu.is-open .st-menu__bg span { transform: scaleY(1); }
.st-menu:not(.is-open) .st-menu__bg span { transition-delay: .25s; }

.st-menu__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* The menu used to centre its contents in a box that could not
       scroll, so on a phone — where the list is tallest and the screen
       shortest — whatever did not fit was simply unreachable. It now
       scrolls, and only centres when there is room to. */
    justify-content: safe center;
    gap: clamp(20px, 3vh, 40px);
    padding-top: clamp(70px, 11vh, 90px);
    /* The floating tab bar sits over the bottom of this panel, so the last
       thing in the menu has to clear it rather than hide behind it: the
       bar's own height plus the space it floats above the edge. */
    padding-bottom: calc(clamp(60px, 9vh, 86px) + 76px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* overflow:hidden on the row is what makes the items rise into place, but
   it also clips a focus ring — so only clip while the reveal is running. */
.st-menu__list > li { overflow: hidden; }
.st-menu.is-open .st-menu__list > li { overflow: visible; transition: overflow 0s linear .9s; }

/* The label and its chevron share a row. */
.st-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.st-menu__list a {
    display: flex;
    align-items: baseline;
    gap: clamp(10px, 2vw, 18px);
    padding: 4px 0;
    font-family: var(--st-font-display);
    /* 8vw put a seven-item menu well past the bottom of a phone. This
       tops out at the same size on a large screen but stays readable
       rather than enormous on a small one. */
    font-size: clamp(1.55rem, 5.4vw, 4.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--st-white);
    transform: translateY(110%);
    transition: transform .8s var(--st-ease), color .3s ease;
}

.st-menu__list em {
    font-size: clamp(11px, 2.6vw, 14px);
    font-style: normal;
    font-weight: 500;
    color: var(--st-orange-ink);
}

.st-menu__list a:hover { color: var(--st-orange-ink); }

/* ---------- The chevron ---------- */

.st-menu__toggle {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    font-size: 13px;
    color: var(--st-white);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: transform .45s var(--st-ease), background-color .3s ease, border-color .3s ease, opacity .4s ease;
}

.st-menu.is-open .st-menu__toggle { opacity: 1; transition-delay: .5s; }

.st-menu__toggle:hover,
.st-menu__toggle:focus-visible {
    background: var(--st-orange);
    border-color: var(--st-orange);
    color: #fff;
}

.st-menu__toggle[aria-expanded="true"] {
    transform: rotate(180deg);
    background: var(--st-orange);
    border-color: var(--st-orange);
    color: #fff;
}

.st-menu.is-open .st-menu__list a { transform: translateY(0); }
.st-menu.is-open .st-menu__list li:nth-child(1) a { transition-delay: .35s; }
.st-menu.is-open .st-menu__list li:nth-child(2) a { transition-delay: .4s; }
.st-menu.is-open .st-menu__list li:nth-child(3) a { transition-delay: .45s; }
.st-menu.is-open .st-menu__list li:nth-child(4) a { transition-delay: .5s; }
.st-menu.is-open .st-menu__list li:nth-child(5) a { transition-delay: .55s; }
.st-menu.is-open .st-menu__list li:nth-child(6) a { transition-delay: .6s; }

.st-menu__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    opacity: 0;
    transition: opacity .5s ease;
}

.st-menu.is-open .st-menu__aside { opacity: 1; transition-delay: .6s; }
.st-menu__block small { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-menu__block a { display: block; font-family: var(--st-font-display); font-size: 20px; color: var(--st-white); }
.st-menu .st-social a { color: var(--st-white); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }

.st-menu .st-social a:hover,
.st-menu .st-social a:focus-visible {
    color: #fff;
    background: var(--st-orange);
    border-color: var(--st-orange);
}

/* Icon beside a top-level item in the overlay menu. */
.st-menu__ico {
    color: var(--st-orange-ink);
    font-size: .52em;
    margin-right: .38em;
    vertical-align: baseline;
}


/* ==========================================================================
   11. FILTER STATE
   ========================================================================== */
/* Items removed by a filter (portfolio, team, roles) */
[data-category].is-hidden { display: none !important; }


/* ==========================================================================
   12. HOME: HERO
   ========================================================================== */
.st-hero {
    position: relative;
    padding: 146px 0 90px;
    background:
        radial-gradient(90% 60% at 30% 0%, rgba(var(--st-orange-rgb), .13) 0%, transparent 60%),
        linear-gradient(180deg, var(--st-bg) 0%, var(--st-bg-2) 100%);
    overflow: hidden;
}

.st-hero__bg { position: absolute; inset: 0; pointer-events: none; }

.st-orb--1 { top: -180px; left: -160px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(var(--st-orange-rgb), .55), transparent 70%); animation: stOrbDrift 14s ease-in-out infinite; }
.st-orb--2 { top: 38%; right: -220px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(var(--st-orange-rgb), .4), transparent 70%); animation: stOrbDrift 18s ease-in-out infinite reverse; }
.st-orb--3 { top: 12%; left: 55%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255, 178, 122, .3), transparent 70%); animation: stOrbDrift 11s ease-in-out infinite; }

.st-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--st-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--st-grid-line) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 20%, transparent 75%);
}

.st-hero__spotlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 30%), rgba(var(--st-orange-rgb), .09), transparent 60%);
}

.st-hero__top {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 34px;
}

.st-hero__meta { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--st-text-strong); }
.st-hero__meta i { font-size: 12px; color: var(--st-orange-ink); }

.st-status__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--st-success); }
.st-status__dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--st-success); border-radius: 50%; animation: stPing 1.8s var(--st-ease) infinite; }

.st-hero__title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: clamp(2.8rem, 6.6vw, 7rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -0.05em;
}

.st-hero__line { display: block; overflow: hidden; padding-bottom: .07em; }
.st-hero__line-in { display: inline-block; }
.st-hero__line--indent { padding-left: 1.3em; }
.st-hero__line--right { text-align: right; }

/* Image capsule inside the headline */
.st-capsule {
    position: relative;
    top: -.06em;
    display: inline-block;
    width: 1.9em;
    height: .78em;
    margin-left: .1em;
    vertical-align: middle;
    overflow: hidden;
    border: 2px solid rgba(var(--st-orange-rgb), .55);
    border-radius: 1em;
    box-shadow: 0 10px 40px -10px rgba(var(--st-orange-rgb), .6);
}

.st-capsule img { width: 100%; height: 100%; object-fit: cover; }

/* Sentence rotator.

   Every phrase sits in the same grid cell; the active one is at rest and
   the others are parked a line above or below. Overflow is clipped by the
   hero line, not here, so descenders are never cut off.

   The width is set in JS to the phrase showing and transitions with it —
   without that the rotator is permanently as wide as its longest phrase,
   which leaves a hole after every short one. */
.st-rotator {
    position: relative;
    display: inline-grid;
    vertical-align: bottom;
    white-space: nowrap;
}

.st-rotator.is-live { transition: width .8s var(--st-ease); }

.st-rotator__word {
    grid-area: 1 / 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--st-outline);
    transform: translateY(105%);
    opacity: 0;
    white-space: nowrap;
    transition: transform .8s var(--st-ease), opacity .6s ease;
}

.st-rotator__word.is-active { transform: translateY(0); opacity: 1; }
.st-rotator__word.is-leaving { transform: translateY(-105%); opacity: 0; }

/* The opening half of the sentence is solid — only the highlighted noun
   carries the hollow outline treatment. */
.st-rotator--solid .st-rotator__word {
    color: var(--st-heading);
    -webkit-text-stroke: 0;
}

@media (prefers-reduced-motion: reduce) {
    .st-rotator.is-live { transition: none; }
    .st-rotator__word { transition-duration: .01ms; }
}

/* Rotating badge */
.st-hero__badge {
    position: absolute;
    top: calc(12px + 1.55 * min(6.6vw, 7rem)); /* aligned with headline line 2 */
    right: 16%;
    z-index: 3;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    color: var(--st-heading);
    background: var(--st-glass);
    border: 1px solid var(--st-border-strong);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.st-hero__badge svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: stSpin 14s linear infinite; }
.st-hero__badge text { font-family: var(--st-font-display); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; fill: var(--st-heading); }

.st-hero__badge > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--st-white);
    background: var(--st-orange);
    border-radius: 50%;
    transition: transform .5s var(--st-ease);
}

.st-hero__badge:hover > i { transform: translateY(4px); }

.st-hero__bottom { position: relative; z-index: 2; margin-top: 40px; }
.st-hero__sub { max-width: 500px; font-size: 17.5px; line-height: 1.75; }
.st-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.st-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 22px; border-top: 1px solid var(--st-border-strong); }
.st-hero__stats li { padding-right: 20px; }
.st-hero__stats li + li { padding-left: 24px; border-left: 1px solid var(--st-border); }
.st-hero__stats strong { display: block; font-family: var(--st-font-display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--st-heading); }
.st-hero__stats small { display: block; margin-top: 8px; font-size: 13.5px; }

.st-hero__trust { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.st-hero__trust small { font-size: 13px; }

.st-avatars { display: flex; }
.st-avatars img { width: 40px; height: 40px; margin-left: -12px; object-fit: cover; border: 2px solid var(--st-bg); border-radius: 50%; }
.st-avatars img:first-child { margin-left: 0; }

/* Showcase (scrubbed by GSAP) */
.st-showcase { position: relative; z-index: 2; margin-top: 90px; perspective: 1600px; }

.st-showcase__frame {
    position: relative;
    background: var(--st-surface-solid);
    border: 1px solid var(--st-border-strong);
    border-radius: 24px;
    overflow: hidden;
    transform-origin: 50% 0;
    box-shadow: 0 0 0 8px var(--st-surface), 0 40px 120px -30px rgba(var(--st-orange-rgb), .5), var(--st-shadow);
    will-change: transform;
}

.st-showcase__bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: var(--st-bg-3); border-bottom: 1px solid var(--st-border); }
.st-showcase__bar span { width: 11px; height: 11px; border-radius: 50%; }
.st-showcase__bar span:nth-child(1) { background: #FF5F57; }
.st-showcase__bar span:nth-child(2) { background: #FEBC2E; }
.st-showcase__bar span:nth-child(3) { background: #28C840; }
.st-showcase__bar em { margin: 0 auto; padding: 5px 18px; font-size: 12px; font-style: normal; color: var(--st-text); background: var(--st-surface-2); border-radius: 8px; }
.st-showcase__bar em i { margin-right: 6px; font-size: 10px; color: var(--st-success-ink); }

.st-showcase__media { aspect-ratio: 16 / 8.2; overflow: hidden; }
.st-showcase__media img { width: 100%; height: 100%; object-fit: cover; }

.st-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    background: var(--st-glass-strong);
    border: 1px solid var(--st-border-strong);
    border-radius: 18px;
    box-shadow: var(--st-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.st-chip strong { display: block; font-family: var(--st-font-display); font-size: 16px; line-height: 1.2; color: var(--st-heading); }
.st-chip small { font-size: 12px; }
.st-chip__ico { width: 42px; height: 42px; display: grid; place-items: center; color: var(--st-white); background: var(--st-grad); border-radius: 12px; }
.st-chip__ico--green { background: linear-gradient(135deg, #16A34A, #22C55E); }
.st-chip--a { top: 18%; left: -40px; }
.st-chip--b { top: 6%; right: -30px; }
.st-chip--c { bottom: 14%; right: -24px; }

.st-ring { --p: 75; width: 44px; height: 44px; display: grid; place-items: center; background: conic-gradient(var(--st-orange) calc(var(--p) * 1%), var(--st-bg-4) 0); border-radius: 50%; }
.st-ring b { width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--st-font-display); font-size: 13px; color: var(--st-heading); background: var(--st-surface-solid); border-radius: 50%; }


/* ==========================================================================
   13. HOME: TECH STACK RIBBONS (GSAP marquee)
   ========================================================================== */
.st-ribbons {
    position: relative;
    z-index: 3;
    padding: 70px 0;
    overflow: hidden;
    background: var(--st-bg-2);
}

.st-ribbon {
    position: relative;
    width: 110%;
    margin-left: -5%;
    padding: 20px 0;
    overflow: hidden;
}

.st-ribbon--orange {
    background: var(--st-grad);
    transform: rotate(-2.5deg);
    box-shadow: 0 20px 50px -20px rgba(var(--st-orange-rgb), .7);
    z-index: 2;
}

.st-ribbon--dark {
    margin-top: -18px;
    background: var(--st-ribbon-dark);
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transform: rotate(2deg);
}

.st-ribbon__track { display: flex; width: max-content; will-change: transform; }
.st-ribbon:hover .st-ribbon__track { animation-play-state: paused; }

.st-ribbon__list { display: flex; flex-shrink: 0; }

.st-ribbon__list li {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 30px;
    font-family: var(--st-font-display);
    font-size: clamp(1.4rem, 2.8vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: default;
    transition: color .35s ease, -webkit-text-stroke-color .35s ease, transform .35s var(--st-ease);
}

.st-ribbon__list li i { font-size: .7em; transition: transform .5s var(--st-ease); }

.st-ribbon__list li::after {
    content: "\2726";
    margin-left: 30px;
    font-size: .55em;
    -webkit-text-stroke: 0;
}

.st-ribbon--orange li { color: var(--st-white); }
.st-ribbon--orange li::after { color: rgba(0, 0, 0, .35); }
.st-ribbon--orange li:hover { color: var(--st-black); }

.st-ribbon--dark li { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); }
.st-ribbon--dark li i { color: rgba(255, 255, 255, .55); -webkit-text-stroke: 0; }
.st-ribbon--dark li::after { color: var(--st-orange-ink); }
.st-ribbon--dark li:hover { color: var(--st-white); -webkit-text-stroke-color: var(--st-white); }
.st-ribbon--dark li:hover i { color: var(--st-orange-ink); }
.st-ribbon__list li:hover i { transform: rotate(-12deg) scale(1.15); }


/* ==========================================================================
   14. SECTION BASE
   ========================================================================== */
.st-section { position: relative; padding: var(--st-section-y) 0; overflow: hidden; }
.st-section__head { margin-bottom: 54px; }

.st-section__title {
    font-size: clamp(2.2rem, 4.4vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}

.st-section__lead { max-width: 560px; font-size: 17px; }
.st-section__title + .st-section__lead { margin-top: 20px; }


/* ==========================================================================
   15. HOME: STATEMENT (scroll-lit words)
   ========================================================================== */
.st-statement { background: var(--st-bg); }

.st-statement__text {
    max-width: 1180px;
    font-family: var(--st-font-display);
    font-size: clamp(1.8rem, 3.9vw, 3.7rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--st-heading);
}

.st-statement__text em { font-style: normal; color: var(--st-orange-ink); }
.st-em { font-style: normal; }
.st-statement__text .st-em { color: var(--st-orange-ink); }
.st-sw { display: inline; }

.st-statement__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 30px 60px;
    margin-top: 70px;
    padding-top: 34px;
    border-top: 1px solid var(--st-border);
}

.st-statement__fact strong { display: block; font-family: var(--st-font-display); font-size: 44px; font-weight: 700; line-height: 1; color: var(--st-heading); }
.st-statement__fact small { display: block; margin-top: 8px; font-size: 14px; }
.st-statement__foot .st-link { margin-left: auto; }


/* ==========================================================================
   16. SERVICES (bento cards + mini mockups)
   ========================================================================== */
.st-services { background: var(--st-bg); }

.st-orb--section { top: 15%; right: -240px; width: 540px; height: 540px; background: radial-gradient(circle, rgba(var(--st-orange-rgb), .16), transparent 70%); }

.st-service { height: 100%; display: flex; flex-direction: column; padding: 34px; }

.st-service__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }

.st-step {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--st-text-strong);
    background: rgba(var(--st-orange-rgb), .08);
    border: 1px solid rgba(var(--st-orange-rgb), .22);
    border-radius: 50px;
}

.st-service__icon {
    position: relative;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    font-size: 24px;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border: 1px solid rgba(var(--st-orange-rgb), .25);
    border-radius: 18px;
    overflow: hidden;
    transition: all .55s var(--st-ease);
}

/* Icon shine + wobble on hover */
.st-service__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s var(--st-ease);
}

.st-service:hover .st-service__icon {
    color: var(--st-white);
    background: var(--st-orange);
    border-color: var(--st-orange);
    box-shadow: 0 14px 32px -8px rgba(var(--st-orange-rgb), .85);
    transform: rotate(-10deg) scale(1.06);
}

.st-service:hover .st-service__icon::after { transform: translateX(120%); }
.st-service:hover .st-service__icon i { animation: stWobble .7s var(--st-ease); }

.st-service__title { margin-bottom: 12px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.st-service__text { max-width: 480px; font-size: 15.5px; }
.st-service .st-link { margin-top: auto; }

/* Mini mockups */
.st-mock {
    margin: 26px 0 30px;
    padding: 18px;
    background: var(--st-surface-2);
    border: 1px solid var(--st-border);
    border-radius: 18px;
}

.st-mock--platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.st-mock--platforms > span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text-strong);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    transition: all .4s var(--st-ease);
}

.st-mock--platforms > span i { width: 16px; color: var(--st-orange-ink); text-align: center; }
.st-service:hover .st-mock--platforms > span { border-color: rgba(var(--st-orange-rgb), .25); }
.st-mock--platforms > span:hover { color: var(--st-heading); transform: translateY(-3px); }

.st-mock__perf {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 13px;
}

.st-mock__perf strong { font-family: var(--st-font-display); color: var(--st-success-ink); }

.st-mock b {
    position: relative;
    flex: 1;
    height: 6px;
    background: var(--st-bg-4);
    border-radius: 6px;
    overflow: hidden;
}

.st-mock b i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--st-grad);
    border-radius: inherit;
    transition: width 1.4s var(--st-ease) .3s;
}

.is-visible .st-mock b i { width: var(--w); }

.st-mock--ads { display: grid; gap: 12px; }

.st-mock__row {
    display: grid;
    grid-template-columns: 18px 86px 1fr 38px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--st-text-strong);
}

.st-mock__row > i { color: var(--st-orange-ink); }
.st-mock__row em { font-family: var(--st-font-display); font-style: normal; font-weight: 700; color: var(--st-success-ink); text-align: right; }

.st-mock--creative { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }

.st-mock__swatches { display: flex; gap: 8px; }

.st-mock__swatches span {
    width: 38px;
    height: 38px;
    border: 1px solid var(--st-border-strong);
    border-radius: 10px;
    transition: transform .5s var(--st-ease);
}

.st-mock__swatches span:nth-child(1) { background: #FF6600; }
.st-mock__swatches span:nth-child(2) { background: #0D0E12; }
.st-mock__swatches span:nth-child(3) { background: #FFFFFF; }
.st-mock__swatches span:nth-child(4) { background: #A0A5B5; }
.st-service:hover .st-mock__swatches span:nth-child(odd) { transform: translateY(-5px) rotate(-6deg); }
.st-service:hover .st-mock__swatches span:nth-child(even) { transform: translateY(4px) rotate(6deg); }

.st-mock__type { font-family: var(--st-font-display); font-size: 38px; font-weight: 800; line-height: 1; color: var(--st-heading); }

.st-mock__video {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.st-mock__video > i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: var(--st-white);
    background: var(--st-orange);
    border-radius: 50%;
}

.st-mock__video b i { width: 35%; }
.st-service:hover .st-mock__video b i { width: 100%; transition-duration: 3s; }

.st-mock--code { padding: 0; background: #0B0C10; border-color: rgba(255, 255, 255, .08); overflow: hidden; }

.st-mock--code pre {
    margin: 0;
    padding: 18px 20px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13.5px;
    line-height: 1.75;
    color: #D6D9E3;
    white-space: pre;
    overflow-x: auto;
}

.c-k { color: #FF8A3D; }
.c-v { color: #7DD3FC; }
.c-f { color: #FDE68A; }
.c-s { color: #86EFAC; }
.c-c { color: #6B7280; font-style: italic; }


/* ==========================================================================
   17. HOME: STICKY CASE STUDIES (stacking cards)
   ========================================================================== */
.st-cases { background: var(--st-bg-2); overflow: visible; }
.st-cases .st-section__head { max-width: 100%; }
.st-cases .st-section__lead { margin-top: 18px; }

.st-cases__stack { position: relative; }

/* Sticky dies inside any clipped ancestor. On a published Elementor page the
   stack sits in the builder's own wrappers, so un-clip the chain around it.
   :has() covers modern browsers; unclipSticky() in main.js covers the rest
   and anything a plugin adds that we cannot name here. */
.elementor-widget-container:has(.st-cases__stack),
.elementor-widget:has(.st-cases__stack),
.elementor-column:has(.st-cases__stack),
.elementor-column-wrap:has(.st-cases__stack),
.elementor-widget-wrap:has(.st-cases__stack),
.elementor-section:has(.st-cases__stack),
.elementor-container:has(.st-cases__stack),
.e-con:has(.st-cases__stack),
.e-con-inner:has(.st-cases__stack),
.entry-content:has(.st-cases__stack),
.st-unclipped {
    overflow: visible !important;
}

/* Each card sticks a little lower than the one before, so the stack peeks */
.st-cases__item {
    position: sticky;
    top: calc(60px + var(--i, 0) * 18px);
    padding-bottom: 30px;
}

.st-case-card {
    position: relative;
    /* Opaque so stacked cards never show through each other */
    background: linear-gradient(150deg, var(--st-bg-3) 0%, var(--st-surface-solid) 60%);
    border: 1px solid var(--st-border-strong);
    border-radius: var(--st-radius-xl);
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
    transform-origin: center top;
    will-change: transform;
}

.st-case-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--st-bg);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.st-case-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--st-orange), transparent);
    opacity: 0;
    transition: opacity .5s ease;
}

.st-case-card:hover::before { opacity: 1; }

.st-case-card__link {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    min-height: 460px;
    color: inherit;
}

.st-case-card__link:hover { color: inherit; }

/* Media */
.st-case-card__media { position: relative; grid-column: 2; margin: 0; overflow: hidden; }
.st-case-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--st-ease); }
.st-case-card__link:hover .st-case-card__media img { transform: scale(1.06); }

.st-case-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 14, 18, .55), transparent 45%);
    pointer-events: none;
}

.st-case-card__chips { position: absolute; left: 22px; right: 22px; top: 22px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.st-case-card__chip {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--st-white);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.st-case-card__tag { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

.st-case-card__go {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: var(--st-white);
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: rotate(-45deg);
    transition: all .5s var(--st-ease);
}

.st-case-card__link:hover .st-case-card__go { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); transform: rotate(0); }

/* Body */
.st-case-card__body { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px; }

.st-case-card__index { display: inline-flex; align-items: center; gap: 12px; font-family: var(--st-font-display); font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-case-card__index i { width: 34px; height: 1px; background: currentColor; }

.st-case-card__title { margin: 16px 0 14px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -0.035em; }
.st-case-card__text { max-width: 480px; font-size: 16px; }

.st-case-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; padding: 26px 0; border-top: 1px solid var(--st-border); border-bottom: 1px solid var(--st-border); }
.st-case-card__metrics strong { display: block; font-family: var(--st-font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--st-orange-ink); }
.st-case-card__metrics small { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.st-case-card__cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--st-font-display); font-size: 15px; font-weight: 600; color: var(--st-heading); transition: color .3s ease; }
.st-case-card__cta i { font-size: 12px; color: var(--st-orange-ink); transition: transform .4s var(--st-ease); }
.st-case-card__link:hover .st-case-card__cta { color: var(--st-orange-ink); }
.st-case-card__link:hover .st-case-card__cta i { transform: translateX(5px); }


/* ==========================================================================
   18. HOME: THE SOLVENIX ENGINE (core · wires · particles)
   ========================================================================== */
.st-engine-sec { background: var(--st-bg); }
.st-orb--engine { top: 50%; left: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px; background: radial-gradient(circle, rgba(var(--st-orange-rgb), .16), transparent 65%); }

.st-engine { position: relative; }

/* SVG wires (paths are generated by main.js from real card positions) */
.st-engine__wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.st-wire { fill: none; stroke: var(--st-border-strong); stroke-width: 1.5; stroke-linecap: round; }
.st-wire__glow { fill: none; stroke: var(--st-orange); stroke-width: 1.8; stroke-linecap: round; opacity: .55; filter: drop-shadow(0 0 4px rgba(var(--st-orange-rgb), .8)); transition: opacity .4s ease, stroke-width .4s ease; }
.st-wire__glow.is-hot { opacity: 1; stroke-width: 2.6; }
.st-wire__dot { fill: var(--st-bg); stroke: var(--st-orange); stroke-width: 2; }
.st-wire__particle { fill: #FFD2B3; filter: drop-shadow(0 0 5px var(--st-orange)) drop-shadow(0 0 12px rgba(var(--st-orange-rgb), .7)); }

.st-engine__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 22px;
    font-family: var(--st-font-display);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--st-orange-ink);
}

.st-engine__label--out { margin: 22px 0 0; }
.st-engine__label i { font-size: 11px; }

.st-engine__row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Cards */
.st-engine__card { display: flex; flex-direction: column; padding: 28px 26px 24px; border-radius: 28px; }
.st-engine__card:hover { border-color: rgba(var(--st-orange-rgb), .6); }
.st-engine__card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

.st-engine__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    order: -1;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border: 1px solid rgba(var(--st-orange-rgb), .25);
    border-radius: 14px;
    transition: all .5s var(--st-ease);
}

.st-engine__card:hover .st-engine__icon { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); transform: rotate(-10deg) scale(1.06); box-shadow: 0 12px 26px -8px rgba(var(--st-orange-rgb), .85); }

.st-engine__num {
    position: absolute;
    top: 16px;
    right: 22px;
    font-family: var(--st-font-display);
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--st-border-strong);
    transition: -webkit-text-stroke-color .5s ease;
}

.st-engine__card:hover .st-engine__num { -webkit-text-stroke-color: var(--st-orange); }
.st-engine__title { margin-bottom: 8px; font-size: 21px; }
.st-engine__text { font-size: 14.5px; line-height: 1.6; }
.st-engine__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.st-engine__tags li { padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--st-text-strong); background: var(--st-surface-2); border: 1px solid var(--st-border); border-radius: 50px; }

/* Mini interfaces inside the cards */
.st-emini { margin: 18px 0 0; padding: 14px; font-size: 12.5px; background: var(--st-surface-2); border: 1px solid var(--st-border); border-radius: 16px; }
.st-emini em { font-style: normal; }

.st-emini__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--st-text-strong); border-bottom: 1px dashed var(--st-border); }
.st-emini__row:last-child { border-bottom: 0; padding-bottom: 0; }
.st-emini__row:first-child { padding-top: 0; }
.st-emini__row > i { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; font-size: 9px; color: var(--st-white); background: var(--st-orange); border-radius: 50%; }
.st-emini__row em { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--st-success-ink); }
.st-emini__row:not(.is-done) em { color: var(--st-orange-ink); }
.st-emini__spin { width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--st-orange); border-right-color: transparent; border-radius: 50%; animation: stSpin 1s linear infinite; }

.st-emini__swatches { display: flex; align-items: center; gap: 8px; }
.st-emini__swatches span { width: 30px; height: 30px; border: 1px solid var(--st-border-strong); border-radius: 9px; transition: transform .5s var(--st-ease); }
.st-emini__swatches span:nth-child(1) { background: #FF6600; }
.st-emini__swatches span:nth-child(2) { background: #0D0E12; }
.st-emini__swatches span:nth-child(3) { background: #FFFFFF; }
.st-emini__swatches span:nth-child(4) { background: #A0A5B5; }
.st-emini__swatches b { margin-left: auto; font-family: var(--st-font-display); font-size: 26px; font-weight: 800; line-height: 1; color: var(--st-heading); }
.st-engine__card:hover .st-emini__swatches span:nth-child(odd) { transform: translateY(-4px) rotate(-6deg); }
.st-engine__card:hover .st-emini__swatches span:nth-child(even) { transform: translateY(3px) rotate(6deg); }

.st-emini__wire { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.st-emini__wire span { position: relative; height: 12px; overflow: hidden; background: var(--st-border-strong); border-radius: 4px; }
.st-emini__wire .w1 { grid-column: 1 / -1; background: rgba(var(--st-orange-rgb), .45); }
.st-emini__wire .w2, .st-emini__wire .w3 { height: 30px; }
.st-emini__wire .w4 { grid-column: 1 / -1; height: 8px; width: 60%; }
.st-emini__wire span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); transform: translateX(-100%); animation: stShimmer 2.4s ease-in-out infinite; }

.st-emini--deploy code { display: block; padding: 9px 12px; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: 12px; color: #D6D9E3; background: #0B0C10; border-radius: 10px; }
.st-emini__bar { height: 6px; margin-top: 12px; overflow: hidden; background: var(--st-bg-4); border-radius: 6px; }
.st-emini__bar i { display: block; width: 0; height: 100%; background: var(--st-grad); border-radius: inherit; transition: width 1.6s var(--st-ease) .3s; }
.is-visible .st-emini__bar i { width: var(--w); }
.st-emini__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12px; }
.st-emini__foot > span i { margin-right: 8px; color: var(--st-orange-ink); }
.st-emini__foot em { font-weight: 600; color: var(--st-success-ink); }
.st-emini__foot em .fa-circle { font-size: 7px; vertical-align: middle; animation: stBlink 1.2s steps(1) infinite; }
.st-emini--chart .st-emini__foot em { color: var(--st-orange-ink); }

.st-emini__nodes { display: flex; align-items: center; gap: 6px; }
.st-emini__nodes span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.st-emini__nodes span i { width: 34px; height: 34px; display: grid; place-items: center; font-size: 13px; color: var(--st-orange-ink); background: rgba(var(--st-orange-rgb), .1); border: 1px solid rgba(var(--st-orange-rgb), .25); border-radius: 10px; }
.st-emini__nodes small { font-size: 10.5px; color: var(--st-text); }
.st-emini__nodes b { flex: 1; height: 2px; margin-bottom: 18px; background: linear-gradient(90deg, var(--st-orange) 0 40%, var(--st-border-strong) 40% 100%); background-size: 22px 2px; border-radius: 2px; animation: stFlowLine 1s linear infinite; }

.st-emini__chart { display: flex; align-items: flex-end; gap: 6px; height: 70px; padding-bottom: 4px; border-bottom: 1px dashed var(--st-border-strong); }
.st-emini__chart span { flex: 1; height: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05)); border-radius: 5px 5px 2px 2px; transition: height 1.2s var(--st-ease); }
[data-theme="light"] .st-emini__chart span { background: linear-gradient(180deg, rgba(17, 17, 17, .18), rgba(17, 17, 17, .05)); }
.st-emini__chart span:nth-child(2) { transition-delay: .06s; }
.st-emini__chart span:nth-child(3) { transition-delay: .12s; }
.st-emini__chart span:nth-child(4) { transition-delay: .18s; }
.st-emini__chart span:nth-child(5) { transition-delay: .24s; }
.st-emini__chart span:nth-child(6) { transition-delay: .3s; }
.st-emini__chart span:nth-child(7) { transition-delay: .36s; }
.st-emini__chart .is-peak { background: var(--st-grad) !important; box-shadow: 0 0 18px rgba(var(--st-orange-rgb), .6); }
.is-visible .st-emini__chart span { height: var(--h); }

/* Centre: core + side chips */
.st-engine__center { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 120px; height: 330px; }

.st-engine__chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--st-glass-strong);
    border: 1px solid var(--st-border-strong);
    border-radius: 18px;
    box-shadow: var(--st-shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.st-engine__chip strong { font-family: var(--st-font-display); font-size: 34px; font-weight: 800; line-height: 1; color: var(--st-orange-ink); }
.st-engine__chip small { font-size: 12.5px; line-height: 1.3; color: var(--st-text-strong); }

.st-engine__core { position: relative; width: 220px; height: 220px; flex-shrink: 0; display: grid; place-items: center; }
.st-engine__ring, .st-engine__wave { position: absolute; border-radius: 50%; pointer-events: none; }
.st-engine__ring--outer { inset: 0; border: 1px solid var(--st-border-strong); background: radial-gradient(circle, rgba(var(--st-orange-rgb), .12), transparent 70%); }
.st-engine__ring--dash { inset: 16px; border: 1.5px dashed rgba(var(--st-orange-rgb), .5); animation: stSpin 22s linear infinite; }
.st-engine__wave { inset: 50px; border: 1.5px solid var(--st-orange); opacity: 0; animation: stEngineWave 3.2s ease-out infinite; }
.st-engine__wave + .st-engine__wave { animation-delay: 1.6s; }

.st-engine__orbit { position: absolute; inset: 0; width: 100%; height: 100%; animation: stSpin 30s linear infinite reverse; }
.st-engine__orbit text { font-family: var(--st-font-display); font-size: 9.5px; font-weight: 600; letter-spacing: .26em; fill: var(--st-text-strong); }

.st-engine__hub {
    position: relative;
    z-index: 2;
    width: 124px;
    height: 124px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .14), transparent 45%),
        linear-gradient(145deg, #1E202B 0%, #12141D 55%, #0D0E12 100%);
    border: 1px solid rgba(var(--st-orange-rgb), .5);
    border-radius: 50%;
    box-shadow: 0 0 0 10px rgba(var(--st-orange-rgb), .07), 0 0 50px rgba(var(--st-orange-rgb), .45), 0 0 120px rgba(var(--st-orange-rgb), .2), inset 0 0 30px rgba(var(--st-orange-rgb), .18);
    transition: box-shadow .5s ease;
}

.st-engine__hub .st-engine__mark { --st-mark-star: #0D0E12; width: 62px; height: 62px; overflow: visible; filter: drop-shadow(0 6px 18px rgba(var(--st-orange-rgb), .6)); }
.st-engine__core.is-hot .st-engine__hub { box-shadow: 0 0 0 14px rgba(var(--st-orange-rgb), .12), 0 0 80px rgba(var(--st-orange-rgb), .75), 0 0 160px rgba(var(--st-orange-rgb), .35), inset 0 0 40px rgba(var(--st-orange-rgb), .3); }
.st-engine__core.is-hot .st-engine__ring--dash { animation-duration: 6s; }

@keyframes stEngineWave {
    0%   { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.1); opacity: 0; }
}

@keyframes stShimmer { 60%, 100% { transform: translateX(100%); } }
@keyframes stFlowLine { to { background-position: 22px 0; } }
@keyframes stBlink { 50% { opacity: 0; } }

/* Engine — tablet & mobile: vertical flow, wires replaced by a glowing spine */
@media (max-width: 1199.98px) {
    .st-engine__row { gap: 20px; }
    .st-engine__card { padding: 24px 20px 20px; }
    .st-engine__center { gap: 70px; }
}

@media (max-width: 991.98px) {
    .st-engine__wires { display: none; }
    .st-engine__row { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .st-engine__center { flex-wrap: wrap; gap: 20px; height: auto; padding: 60px 0; }
    .st-engine__center::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        z-index: -1;
        width: 2px;
        margin-left: -1px;
        background: linear-gradient(180deg, transparent, var(--st-orange) 20%, var(--st-orange) 80%, transparent);
        box-shadow: 0 0 12px var(--st-orange);
        opacity: .6;
    }
    .st-engine__chip { order: 2; }
    .st-engine__core { order: 1; flex-basis: 100%; max-width: 220px; margin: 0 auto; }
}

@media (max-width: 575.98px) {
    .st-engine__core { width: 190px; height: 190px; max-width: 190px; }
    .st-engine__hub { width: 106px; height: 106px; }
    .st-engine__hub .st-engine__mark { width: 52px; height: 52px; }
    .st-engine__chip { padding: 10px 14px; }
    .st-engine__chip strong { font-size: 26px; }
}


/* ==========================================================================
   19. PORTFOLIO MASONRY
   ========================================================================== */
.st-work { background: var(--st-bg-2); }

.st-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 50px;
}

.st-filter__btn {
    padding: 10px 20px;
    font-family: var(--st-font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--st-text);
    background: transparent;
    border: 0;
    border-radius: 50px;
    transition: all .4s var(--st-ease);
}

.st-filter__btn:hover { color: var(--st-heading); }
.st-filter__btn.is-active { color: var(--st-white); background: var(--st-orange-fill); box-shadow: 0 8px 22px -8px rgba(var(--st-orange-rgb), .85); }

/* A real grid, not CSS columns. Columns reflow every remaining card into a
   different place the moment one is hidden, which is what made the grid jump
   and collapse while filtering, and it gave the cards their ragged, uneven
   look. A grid keeps every card in its own cell, so filtering only removes
   cells and the rows stay aligned. */
.st-masonry {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    /* Keeps the section from collapsing to nothing mid-filter, even before
       the JS height animation takes over. */
    min-height: 320px;
}

.st-project {
    margin-bottom: 0;
    transition: opacity .4s ease, scale .4s var(--st-ease);
}

/* Card sizes, from the project's "Card size in the grid" setting. A wide card
   is two columns across, so its image ratio is doubled to keep its height
   identical to its neighbours and the row perfectly level. */
.st-project--wide { grid-column: span 2; }
.st-project--tall { grid-row: span 2; }

.st-project.is-hiding { opacity: 0; scale: .94; }
.st-project.is-hidden { display: none; }

.st-project__link {
    position: relative;
    display: block;
    border-radius: var(--st-radius-lg);
    overflow: hidden;
    isolation: isolate;
    background: var(--st-bg-3);
    box-shadow: var(--st-shadow-sm);
}

.st-project__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }

/* Two columns wide → twice the width, so double the ratio to land on the
   same height as a one-column card. */
.st-project--wide .st-project__media { aspect-ratio: 8 / 3; }

/* Two rows tall → let the card fill both rows instead of fixing a ratio,
   so it ends exactly level with the two cards beside it. */
.st-project--tall .st-project__link { height: 100%; }
.st-project--tall .st-project__media { aspect-ratio: auto; height: 100%; min-height: 100%; }

.st-project__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: filter .6s ease;
}

.st-project__media { transition: transform 1.1s var(--st-ease); }

.st-project__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Scales down with the card so the content never outgrows a small cell. */
    padding: clamp(16px, 1.8vw, 28px);
    color: rgba(255, 255, 255, .8);
    background: linear-gradient(180deg, rgba(13, 14, 18, 0) 25%, rgba(13, 14, 18, .6) 60%, rgba(13, 14, 18, .95) 100%);
    opacity: 0;
    transition: opacity .6s var(--st-ease);
    overflow: hidden;
}

/* The metrics are the first thing to drop if a card is too short for
   everything — the title and the button matter more. */
.st-project--short .st-project__metrics { display: none; }

/* Orange frame that draws in on hover */
.st-project__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--st-orange);
    border-radius: inherit;
    opacity: 0;
    transform: scale(1.04);
    transition: all .6s var(--st-ease);
    pointer-events: none;
}

.st-project__overlay > * { transform: translateY(24px); opacity: 0; transition: transform .6s var(--st-ease), opacity .6s ease; }
.st-project__overlay > :nth-child(2) { transition-delay: .05s; }
.st-project__overlay > :nth-child(3) { transition-delay: .1s; }
.st-project__overlay > :nth-child(4) { transition-delay: .15s; }

.st-project__cat {
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--st-white);
    background: rgba(var(--st-orange-rgb), .9);
    border-radius: 50px;
}

/* Long project names used to run over the metrics and the button. Cap the
   title at two lines and scale it with the card so it stays readable in a
   one-column card and in a wide one. */
.st-project__title {
    margin-bottom: 12px;
    font-size: clamp(1.05rem, 1.5vw, 1.5rem);
    line-height: 1.25;
    color: var(--st-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.st-project__metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.st-project__metrics li {
    padding: 5px 12px;
    font-size: 13px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.st-project__metrics b { color: var(--st-white); }

.st-project__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-family: var(--st-font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--st-black);
    background: var(--st-white);
    border-radius: 50px;
    transition: background-color .3s ease, color .3s ease;
}

.st-project__btn i { font-size: 12px; transition: transform .4s var(--st-ease); }
.st-project__link:hover .st-project__btn { color: var(--st-white); background: var(--st-orange); }
.st-project__link:hover .st-project__btn i { transform: translateX(4px); }

.st-project__link:hover .st-project__media { transform: scale(1.05); }
.st-project__link:hover .st-project__media img { filter: saturate(1.1); }
.st-project__link:hover .st-project__overlay,
.st-project__link:focus-visible .st-project__overlay { opacity: 1; }
.st-project__link:hover .st-project__overlay > *,
.st-project__link:focus-visible .st-project__overlay > * { transform: translateY(0); opacity: 1; }
.st-project__link:hover::after { opacity: 1; transform: scale(1); }

/* Touch devices: always show the title */
@media (hover: none) {
    .st-project__overlay { opacity: 1; background: linear-gradient(180deg, transparent 45%, rgba(13, 14, 18, .92) 100%); }
    .st-project__overlay > * { transform: none; opacity: 1; }
    .st-project__metrics { display: none; }
}


/* ==========================================================================
   20. CEO MESSAGE
   ========================================================================== */
.st-ceo { background: var(--st-bg); }

.st-ceo__card {
    position: relative;
    background:
        radial-gradient(70% 90% at 100% 100%, rgba(var(--st-orange-rgb), .2), transparent 60%),
        linear-gradient(160deg, var(--st-surface-2), var(--st-surface));
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-xl);
    box-shadow: var(--st-shadow);
    overflow: hidden;
}

.st-ceo__visual { position: relative; height: 100%; padding: 48px 20px 48px 48px; }

.st-ceo__frame {
    position: relative;
    height: 100%;
    min-height: 480px;
}

.st-ceo__img {
    position: relative;
    height: 100%;
    min-height: 480px;
    border-radius: 26px;
    overflow: hidden;
}

/* Offset orange frame */
.st-ceo__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--st-orange);
    border-radius: 26px;
    transform: translate(16px, 16px);
    transition: transform .8s var(--st-ease);
}

.st-ceo__frame img {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    object-position: center top;
    border-radius: 26px;
    filter: grayscale(.15) contrast(1.05);
    transition: filter .8s ease;
}

.st-ceo__card:hover .st-ceo__frame::before { transform: translate(8px, 8px); }
.st-ceo__card:hover .st-ceo__frame img { filter: none; }

.st-ceo__corner {
    position: absolute;
    width: 42px;
    height: 42px;
    border: 3px solid var(--st-white);
    pointer-events: none;
}

.st-ceo__corner--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.st-ceo__corner--br { right: 16px; bottom: 16px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }

/* Rotating circular badge */
.st-badge-circle {
    position: absolute;
    top: 22px;
    right: -10px;
    z-index: 3;
    width: 124px;
    height: 124px;
    display: grid;
    place-items: center;
    background: var(--st-glass-strong);
    border: 1px solid var(--st-border-strong);
    border-radius: 50%;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--st-shadow-sm);
}

.st-badge-circle > svg:first-child {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    animation: stSpin 16s linear infinite;
}

.st-badge-circle text {
    font-family: var(--st-font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2em;
    fill: var(--st-heading);
}

.st-badge-circle__mark { width: 40px; height: 40px; }

.st-ceo__exp {
    position: absolute;
    left: 24px;
    bottom: 70px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--st-grad);
    border-radius: 18px;
    box-shadow: 0 20px 40px -12px rgba(var(--st-orange-rgb), .7);
    animation: stFloat 6s ease-in-out infinite;
}

.st-ceo__exp strong { font-family: var(--st-font-display); font-size: 38px; line-height: 1; color: var(--st-white); }
.st-ceo__exp small { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, .92); }

.st-ceo__content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 60px 60px 60px 40px; }

.st-ceo__quote-ico { margin-bottom: 18px; font-size: 44px; color: var(--st-orange-ink); opacity: .9; }

.st-ceo__quote h2 {
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.st-ceo__text { margin-top: 24px; font-size: 16.5px; max-width: 620px; }

.st-ceo__sign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--st-border);
}

.st-ceo__signature {
    font-family: var(--st-font-script);
    font-size: 42px;
    line-height: 1;
    color: var(--st-orange-ink);
    transform: rotate(-4deg);
}

.st-ceo__person { flex: 1; display: flex; flex-direction: column; }
.st-ceo__person strong { font-family: var(--st-font-display); font-size: 19px; color: var(--st-heading); }
.st-ceo__person span { font-size: 14px; }


/* ==========================================================================
   21. FEATURE CARDS · COUNTERS
   ========================================================================== */
.st-feature { height: 100%; padding: 24px; border-radius: var(--st-radius); }

.st-feature__ico {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border-radius: 14px;
    transition: all .5s var(--st-ease);
}

.st-feature:hover .st-feature__ico { color: var(--st-white); background: var(--st-orange); transform: rotate(-10deg) scale(1.08); }
.st-feature h3 { margin-bottom: 6px; font-size: 18px; }
.st-feature p { font-size: 14.5px; line-height: 1.6; }


/* Counters */
.st-counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 80px;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-xl);
    overflow: hidden;
}

.st-counter-item {
    position: relative;
    padding: 40px 26px;
    text-align: center;
    border-right: 1px solid var(--st-border);
    transition: background-color .4s ease;
}

.st-counter-item:last-child { border-right: 0; }
.st-counter-item:hover { background: rgba(var(--st-orange-rgb), .06); }

.st-counter-item > i {
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border-radius: 50%;
    transition: transform .6s var(--st-ease);
}

.st-counter-item:hover > i { transform: rotateY(180deg); }

.st-counter-item strong {
    display: block;
    font-family: var(--st-font-display);
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--st-heading);
}

.st-counter-item sup { top: -.9em; font-size: .45em; color: var(--st-orange-ink); }
.st-counter-item small { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; letter-spacing: .04em; }


/* ==========================================================================
   22. PRICING
   ========================================================================== */
.st-pricing { background: var(--st-bg); }

.st-orb--pricing { top: 30%; left: 50%; width: 700px; height: 500px; margin-left: -350px; background: radial-gradient(circle, rgba(var(--st-orange-rgb), .18), transparent 70%); }

.st-billing { display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; }

.st-billing__label { font-family: var(--st-font-display); font-weight: 500; color: var(--st-text); transition: color .3s ease; }
.st-billing__label.is-active { color: var(--st-heading); }

.st-billing__label em {
    margin-left: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: var(--st-success-ink);
    background: rgba(34, 197, 94, .12);
    border-radius: 50px;
}

.st-billing__switch {
    position: relative;
    width: 60px;
    height: 32px;
    padding: 0;
    background: var(--st-bg-4);
    border: 1px solid var(--st-border-strong);
    border-radius: 32px;
    cursor: pointer;
}

.st-billing__switch span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: var(--st-orange);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(var(--st-orange-rgb), .6);
    transition: transform .45s var(--st-ease);
}

.st-billing__switch[aria-checked="true"] span { transform: translateX(28px); }

.st-pricing__row { padding-top: 10px; }

.st-plan { padding: 40px 34px; }

.st-plan__ico {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border-radius: 16px;
}

.st-plan__name { font-size: 24px; }
.st-plan__desc { margin-top: 8px; font-size: 14.5px; min-height: 46px; }

.st-plan__price {
    display: flex;
    align-items: flex-start;
    margin: 26px 0;
    padding: 22px 0;
    font-family: var(--st-font-display);
    color: var(--st-heading);
    border-top: 1px solid var(--st-border);
    border-bottom: 1px solid var(--st-border);
}

.st-plan__price sup { top: 0; margin-top: 8px; font-size: 24px; font-weight: 600; }
.st-plan__price .st-price { display: inline-block; font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; transition: opacity .25s ease, transform .25s ease; }
.st-plan__price .st-price.is-switching { opacity: 0; transform: translateY(-10px); }
.st-plan__price small { align-self: flex-end; margin: 0 0 6px 6px; font-family: var(--st-font-body); font-size: 14px; color: var(--st-text); }

.st-plan__list { margin-top: 30px; }

.st-plan__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--st-text-strong);
}

.st-plan__list li i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .12);
    border-radius: 50%;
}

.st-plan__list li.is-off { color: var(--st-text); opacity: .6; text-decoration: line-through; }
.st-plan__list li.is-off i { color: var(--st-text); background: var(--st-surface-2); }

/* Featured plan */
.st-plan--featured {
    z-index: 2;
    overflow: visible;
    background: linear-gradient(170deg, rgba(var(--st-orange-rgb), .14), var(--st-surface-solid) 45%);
    border-color: rgba(var(--st-orange-rgb), .6);
    box-shadow: 0 0 0 1px rgba(var(--st-orange-rgb), .25), 0 40px 90px -30px rgba(var(--st-orange-rgb), .6);
    transform: scale(1.06);
}

.st-plan--featured:hover { transform: scale(1.06) translateY(-8px); }

.st-plan__border {
    position: absolute;
    inset: -1px;
    z-index: -2;
    padding: 1px;
    border-radius: inherit;
    overflow: hidden;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.st-plan__border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    margin: -450px 0 0 -450px;
    background: conic-gradient(from 0deg, transparent 0 60%, var(--st-orange) 80%, #FFD1B0 90%, transparent 100%);
    animation: stSpin 4s linear infinite;
}

.st-plan__badge {
    position: absolute;
    top: -16px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    font-family: var(--st-font-display);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--st-white);
    background: var(--st-grad);
    border-radius: 50px;
    transform: translateX(-50%);
    box-shadow: 0 10px 24px -6px rgba(var(--st-orange-rgb), .9);
}

.st-plan--featured .st-plan__ico { color: var(--st-white); background: var(--st-orange); }

/* Bonus strip */
.st-bonus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 60px;
    padding: 22px 30px;
    background: var(--st-surface);
    border: 1px dashed rgba(var(--st-orange-rgb), .45);
    border-radius: var(--st-radius);
}

.st-bonus__title { font-family: var(--st-font-display); font-weight: 600; color: var(--st-heading); }
.st-bonus__title i { margin-right: 8px; color: var(--st-orange-ink); }
.st-bonus__list { display: flex; flex-wrap: wrap; gap: 10px; }

.st-bonus__list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--st-text-strong);
    background: var(--st-surface-2);
    border-radius: 50px;
}

.st-bonus__list i { color: var(--st-orange-ink); }


/* ==========================================================================
   23. TEAM (pinned horizontal scroll)
   ========================================================================== */
.st-team { position: relative; background: var(--st-bg-2); overflow: hidden; }
.st-team__pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 100px; }

.st-team__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: 54px;
}

.st-team__meta { max-width: 380px; }
.st-team__progress { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.st-team__count { font-family: var(--st-font-display); font-size: 14px; color: var(--st-text); }
.st-team__count b { font-size: 22px; font-weight: 700; color: var(--st-heading); }
.st-team__bar { flex: 1; height: 2px; background: var(--st-border-strong); overflow: hidden; border-radius: 2px; }
.st-team__bar i { display: block; height: 100%; background: var(--st-grad); transform: scaleX(.14); transform-origin: left; }

.st-team__viewport { padding-left: max(24px, calc((100vw - 1236px) / 2)); }
.st-team__track { display: flex; align-items: flex-start; gap: 24px; width: max-content; padding-right: 8vw; will-change: transform; }

.st-member {
    position: relative;
    flex: 0 0 auto;
    width: clamp(270px, 24vw, 340px);
    aspect-ratio: 3 / 4.1;
    margin: 0;
    color: var(--st-white);
    background: var(--st-bg-3);
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
}

.st-member:nth-child(even) { margin-top: 56px; }

.st-member::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color .5s ease;
}

.st-member::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(13, 14, 18, 0) 40%, rgba(13, 14, 18, .88) 100%);
    pointer-events: none;
}

.st-member__media { position: absolute; inset: 0; margin: 0; }

.st-member__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    transform: scale(1.04);
    transition: filter .7s ease, transform 1.2s var(--st-ease);
}

.st-member:hover .st-member__media img { filter: grayscale(0); transform: scale(1.12); }
.st-member:hover::before { border-color: rgba(var(--st-orange-rgb), .8); }

.st-member__index {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    padding: 6px 12px;
    font-family: var(--st-font-display);
    font-size: 13px;
    font-weight: 600;
    background: rgba(13, 14, 18, .45);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.st-member__social { position: absolute; top: 18px; right: 18px; z-index: 4; display: flex; flex-direction: column; gap: 8px; }

.st-member__social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--st-white);
    background: rgba(13, 14, 18, .5);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .4s ease, transform .5s var(--st-ease), background-color .3s ease;
}

.st-member__social li:nth-child(2) a { transition-delay: .06s; }
.st-member__social li:nth-child(3) a { transition-delay: .12s; }
.st-member:hover .st-member__social a,
.st-member:focus-within .st-member__social a { opacity: 1; transform: none; }
.st-member__social a:hover { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }

.st-member__info { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; }
.st-member__name { font-size: 25px; color: var(--st-white); }
.st-member__role { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--st-orange-light-ink); }

.st-member__bio {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .8);
    opacity: 0;
    transition: max-height .6s var(--st-ease), opacity .5s ease, margin .5s var(--st-ease);
}

.st-member:hover .st-member__bio { max-height: 90px; margin-top: 10px; opacity: 1; }

/* Hiring card */
.st-member--hiring {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
    padding: 30px;
    background:
        radial-gradient(90% 80% at 100% 0%, rgba(255, 170, 110, .45), transparent 60%),
        linear-gradient(150deg, #7A2600, #FF6600);
}

.st-member--hiring::after { display: none; }
.st-member--hiring:hover { color: var(--st-white); }

.st-member__hiring-ico {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: auto;
    font-size: 26px;
    border: 1px dashed rgba(255, 255, 255, .6);
    border-radius: 50%;
    transition: transform .6s var(--st-ease);
}

.st-member--hiring:hover .st-member__hiring-ico { transform: rotate(90deg); }
.st-member__hiring-title { font-family: var(--st-font-display); font-size: 30px; font-weight: 700; line-height: 1.1; }
.st-member__hiring-text { font-size: 15px; color: rgba(255, 255, 255, .88); }
.st-member--hiring .st-link { color: var(--st-white); }
.st-member--hiring .st-link i { border-color: rgba(255, 255, 255, .6); }

/* Pinned slider (≥ 992px): keep a clear gap above the floating bottom dock.
   The cards are sized from the viewport height so the whole pinned block
   (head + cards + bottom gap) fits on screen and never slides under the dock. */
@media (min-width: 992px) {
    .st-team {
        --st-team-pad-top: clamp(64px, 11vh, 120px);
        --st-team-head-gap: clamp(28px, 5vh, 54px);
        --st-team-stagger: clamp(24px, 5vh, 56px);
        --st-team-dock-space: 150px; /* dock offset + dock height + breathing room */
    }
    .st-team__pin { padding: var(--st-team-pad-top) 0 var(--st-team-dock-space); }
    .st-team__head { margin-bottom: var(--st-team-head-gap); }
    .st-member {
        width: clamp(190px, min(24vw, calc((100vh - var(--st-team-pad-top) - var(--st-team-head-gap) - var(--st-team-stagger) - var(--st-team-dock-space) - 130px) * 0.7317)), 340px);
    }
    .st-member:nth-child(even) { margin-top: var(--st-team-stagger); }
}


/* ==========================================================================
   24. BLOG CARDS (the loop)
   ========================================================================== */
.st-blog { background: var(--st-bg); }

.st-post {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--st-surface-2), var(--st-surface));
    border: 1px solid var(--st-border);
    border-radius: 24px;
    overflow: hidden;
    transition: border-color .5s var(--st-ease), box-shadow .5s var(--st-ease);
}

.st-post:hover { border-color: rgba(var(--st-orange-rgb), .45); box-shadow: 0 30px 60px -30px rgba(var(--st-orange-rgb), .45); }

.st-post .post-thumbnail { position: relative; display: block; aspect-ratio: 16 / 10.5; overflow: hidden; }
.st-post .post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.st-post .post-thumbnail img:not([data-parallax-img]) { transition: transform 1s var(--st-ease); }
.st-post:hover .post-thumbnail img:not([data-parallax-img]) { transform: scale(1.07); }

.st-post__body { flex: 1; display: flex; flex-direction: column; padding: 26px 26px 24px; }

.cat-links a {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border: 1px solid rgba(var(--st-orange-rgb), .25);
    border-radius: 50px;
}

.cat-links a:hover { color: var(--st-white); background: var(--st-orange); }

.st-post .entry-title { margin: 14px 0 10px; font-size: 21px; line-height: 1.3; }

.st-post .entry-title a {
    color: var(--st-heading);
    background: linear-gradient(var(--st-orange), var(--st-orange)) left bottom / 0 1px no-repeat;
    transition: background-size .5s var(--st-ease), color .3s ease;
}

.st-post .entry-title a:hover { color: var(--st-orange-ink); background-size: 100% 1px; }
.st-post .entry-summary p { font-size: 15px; }

.st-post .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 13.5px;
    border-top: 1px solid var(--st-border);
}

.st-post .entry-summary { margin-bottom: 18px; }
.posted-on i { margin-right: 4px; color: var(--st-orange-ink); }

.more-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--st-font-display); font-size: 14px; font-weight: 600; color: var(--st-heading); }
.more-link i { font-size: 12px; color: var(--st-orange-ink); transition: transform .4s var(--st-ease); }
.more-link:hover i { transform: translateX(4px); }

/* Featured / sticky post */
.st-post--featured { height: auto; display: grid; grid-template-columns: 1.1fr 1fr; }
.st-post--featured .post-thumbnail { aspect-ratio: auto; min-height: 380px; }
.st-post--featured .post-thumbnail img { position: absolute; inset: 0; }
.st-post--featured .st-post__body { padding: 36px; }
.st-post--featured .entry-title { font-size: 28px; }

.st-post__flag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--st-white);
    background: var(--st-orange);
    border-radius: 50px;
}

.byline { display: inline-flex; align-items: center; gap: 10px; }
.byline .avatar { width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }
.st-read-time { color: var(--st-text); }


/* ==========================================================================
   25. CALL TO ACTION + LEAD FORM
   ========================================================================== */
.st-cta-wrap { padding: 0 0 var(--st-section-y); background: var(--st-bg); }

.st-cta {
    position: relative;
    padding: 80px 70px;
    color: rgba(255, 255, 255, .9);
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(255, 170, 110, .6) 0%, transparent 55%),
        linear-gradient(120deg, #6E2200 0%, #C24400 42%, #FF6600 100%);
    border-radius: 40px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 40px 90px -30px rgba(var(--st-orange-rgb), .6);
}

.st-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px);
}

.st-cta__ring { position: absolute; z-index: -1; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; }
.st-cta__ring--1 { top: -160px; right: -90px; width: 400px; height: 400px; border-style: dashed; animation: stSpin 40s linear infinite; }
.st-cta__ring--2 { bottom: -220px; left: 30%; width: 440px; height: 440px; }

.st-cta__star { position: absolute; z-index: -1; right: 6%; bottom: -70px; width: 280px; fill: rgba(255, 255, 255, .08); animation: stSpin 30s linear infinite; }

.st-cta__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-white);
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50px;
}

.st-cta__title { font-size: clamp(2.3rem, 4.8vw, 4.3rem); font-weight: 800; letter-spacing: -0.04em; color: var(--st-white); }
.st-cta__text { max-width: 560px; margin-top: 16px; font-size: 17px; }

.st-cta__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.st-cta__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--st-white); }
.st-cta__trust i { font-size: 13px; opacity: .85; }

.st-cta__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }


.st-lead {
    display: grid;
    gap: 12px;
    padding: 22px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 24px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.st-lead__field { position: relative; }
.st-lead__field > i { position: absolute; top: 50%; left: 18px; z-index: 1; color: rgba(255, 255, 255, .85); transform: translateY(-50%); pointer-events: none; }

.st-lead input,
.st-lead select {
    width: 100%;
    height: 56px;
    padding: 0 18px 0 48px;
    font-size: 15px;
    color: var(--st-white);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    outline: 0;
    transition: border-color .3s ease, background-color .3s ease;
}

.st-lead select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}

.st-lead select option { color: #111; }
.st-lead input::placeholder { color: rgba(255, 255, 255, .78); }
.st-lead input:focus,
.st-lead select:focus { background-color: rgba(255, 255, 255, .2); border-color: var(--st-white); }
.st-lead .has-error input,
.st-lead .has-error select { border-color: var(--st-white); border-style: dashed; }
.st-lead__msg { min-height: 20px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--st-white); }


/* ==========================================================================
   26. FOOTER (footer.php · widget areas)
   ========================================================================== */
.st-footer {
    position: relative;
    padding: 100px 0 130px;
    background: var(--st-footer-bg, var(--st-bg-2));
    border-top: 1px solid var(--st-footer-border, var(--st-border));
    border-radius: 48px 48px 0 0;
    overflow: hidden;
}

.st-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 60%;
    height: 1px;
    margin-left: -30%;
    background: linear-gradient(90deg, transparent, var(--st-orange), transparent);
}

.st-footer .widget p { margin: 20px 0 24px; font-size: 15px; max-width: 380px; }

.st-footer .widget-title {
    position: relative;
    margin-bottom: 24px;
    padding-bottom: 14px;
    font-size: 19px;
}

.st-footer .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--st-orange);
    border-radius: 2px;
}

.st-footer .widget-title + p { margin-top: 0; }

.st-footer .widget_nav_menu li + li { margin-top: 12px; }

.st-footer .widget_nav_menu a { display: inline-flex; align-items: center; font-size: 15px; transition: all .4s var(--st-ease); }

.st-footer .widget_nav_menu a::before {
    content: "";
    width: 0;
    height: 1px;
    background: var(--st-orange);
    transition: all .4s var(--st-ease);
}

.st-footer .widget_nav_menu a:hover { color: var(--st-heading); }
.st-footer .widget_nav_menu a:hover::before { width: 14px; margin-right: 8px; }

.st-newsletter {
    display: flex;
    padding: 6px;
    background: var(--st-bg);
    border: 1px solid var(--st-border-strong);
    border-radius: 50px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.st-newsletter:focus-within { border-color: var(--st-orange); box-shadow: 0 0 0 4px rgba(var(--st-orange-rgb), .12); }
.st-newsletter.has-error { border-color: #EF4444; }

.st-newsletter input {
    flex: 1;
    min-width: 0;
    padding: 0 18px;
    font-size: 15px;
    color: var(--st-heading);
    background: transparent;
    border: 0;
    outline: 0;
}

.st-newsletter input::placeholder { color: var(--st-text); opacity: .8; }
.st-newsletter .st-btn { padding: 13px 22px; font-size: 14px; }

.st-footer .st-newsletter__msg { min-height: 22px; margin: 10px 0 8px; font-size: 13px; }
.st-newsletter__msg.is-success { color: var(--st-success-ink); }
.st-newsletter__msg.is-error { color: #EF4444; }

.st-footer__contact li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.st-footer__contact li + li { margin-top: 8px; }
.st-footer__contact i { width: 16px; color: var(--st-orange-ink); }

.st-footer__word {
    margin-top: 80px;
    font-family: var(--st-font-display);
    font-size: clamp(2.6rem, 10.5vw, 9.6rem);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -0.045em;
    text-align: center;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px var(--st-border-strong);
    background: linear-gradient(180deg, rgba(var(--st-orange-rgb), .25), transparent 85%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
}

.st-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
    padding-top: 26px;
    font-size: 14px;
    border-top: 1px solid var(--st-border);
}

.st-footer__bottom .menu { display: flex; gap: 26px; }


/* Footer wordmark: the gradient must sit on the letter spans too, because
   main.js splits the text for the rise-up animation. */
.st-footer__word,
.st-footer__word span {
    color: transparent;
    -webkit-text-stroke: 1px var(--st-border-strong);
    background-image: linear-gradient(180deg, rgba(var(--st-orange-rgb), .55) 0%, rgba(var(--st-orange-rgb), .18) 55%, transparent 92%);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] .st-footer__word,
[data-theme="light"] .st-footer__word span { background-image: linear-gradient(180deg, rgba(var(--st-orange-rgb), .75) 0%, rgba(var(--st-orange-rgb), .25) 55%, transparent 92%); }

/* Warm gradient wash across the bottom of the footer */
.st-footer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -220px;
    z-index: 0;
    width: min(1100px, 130%);
    height: 420px;
    margin-left: min(-550px, -65%);
    background: radial-gradient(ellipse at center, rgba(var(--st-orange-rgb), .30) 0%, rgba(var(--st-orange-rgb), .12) 40%, transparent 72%);
    filter: blur(50px);
    pointer-events: none;
}

.st-footer > .container { position: relative; z-index: 1; }


/* ==========================================================================
   27. PAGE HERO · BREADCRUMB
   ========================================================================== */
.st-page-hero {
    position: relative;
    padding: 190px 0 90px;
    background:
        radial-gradient(90% 70% at 20% 0%, rgba(var(--st-orange-rgb), .13) 0%, transparent 60%),
        linear-gradient(180deg, var(--st-bg) 0%, var(--st-bg-2) 100%);
    border-bottom: 1px solid var(--st-border);
    overflow: hidden;
}

.st-page-hero--compact { padding-bottom: 70px; }

.st-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.st-breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--st-orange-ink); }
.st-breadcrumb a { color: var(--st-text); }
.st-breadcrumb a:hover { color: var(--st-orange-ink); }
.st-breadcrumb [aria-current] { color: var(--st-heading); }

.st-page-hero__title {
    max-width: 1100px;
    margin-bottom: 32px;
    font-size: clamp(2.6rem, 6vw, 5.8rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.st-page-hero__lead { max-width: 560px; font-size: 18px; }

.st-page-hero__jump { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.st-page-hero__jump a,
.st-cats a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-heading);
    background: var(--st-glass);
    border: 1px solid var(--st-border-strong);
    border-radius: 50px;
    transition: all .4s var(--st-ease);
}

.st-page-hero__jump i { color: var(--st-orange-ink); }
.st-page-hero__jump a:hover,
.st-cats a:hover,
.st-cats a.is-active { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }
.st-page-hero__jump a:hover i { color: var(--st-white); }
.st-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }

.st-inline-link { color: var(--st-orange-ink); text-decoration: underline; text-underline-offset: 4px; }


/* ==========================================================================
   28. SERVICES PAGE (page-services.php)
   ========================================================================== */
.st-srv__nav {
    position: sticky;
    top: 40px;
    padding: 26px;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 24px;
}

.st-srv__nav-title { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-srv__nav ul { margin-bottom: 22px; }

.st-srv__nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    font-family: var(--st-font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--st-text);
    border-bottom: 1px solid var(--st-border);
    transition: color .3s ease, padding .4s var(--st-ease);
}

.st-srv__nav li a em { font-size: 12px; font-style: normal; color: var(--st-orange-ink); }
.st-srv__nav li a:hover,
.st-srv__nav li a.is-active { padding-left: 8px; color: var(--st-heading); }

.st-srv__block { padding-bottom: 90px; margin-bottom: 90px; border-bottom: 1px solid var(--st-border); scroll-margin-top: 40px; }
.st-srv__block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.st-srv__head { display: grid; grid-template-columns: auto 1fr; gap: 32px; margin-bottom: 40px; }

.st-srv__num {
    font-family: var(--st-font-display);
    font-size: clamp(4rem, 8vw, 7.5rem);
    font-weight: 800;
    line-height: .82;
    color: transparent;
    -webkit-text-stroke: 1px var(--st-border-strong);
}

.st-srv__title { margin: 22px 0 14px; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -0.03em; }
.st-srv__intro { max-width: 640px; font-size: 17px; }

.st-srv__deliver { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.st-srv__deliver li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--st-text-strong);
    background: var(--st-surface-2);
    border-radius: 50px;
}

.st-srv__deliver i { font-size: 12px; color: var(--st-orange-ink); }

/* Process */
.st-process { background: var(--st-bg-2); }

.st-process__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-process__line { position: absolute; top: 32px; left: 10%; right: 10%; height: 2px; background: var(--st-border-strong); }
.st-process__line i { display: block; height: 100%; background: var(--st-grad); transform: scaleX(0); transform-origin: left; }
html:not(.has-gsap) .st-process__line i { transform: none; }

.st-process__step { position: relative; text-align: center; }

.st-process__dot {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    font-family: var(--st-font-display);
    font-weight: 700;
    color: var(--st-heading);
    background: var(--st-surface-solid);
    border: 2px solid var(--st-orange);
    border-radius: 50%;
    box-shadow: 0 0 0 8px var(--st-bg-2), 0 10px 30px -8px rgba(var(--st-orange-rgb), .6);
    transition: all .5s var(--st-ease);
}

.st-process__step:hover .st-process__dot { color: var(--st-white); background: var(--st-orange); transform: scale(1.08); }
.st-process__step h3 { margin: 22px 0 8px; font-size: 20px; }
.st-process__step p { font-size: 14.5px; }

/* Accordion (native <details>) */
.st-accordion__item { border-bottom: 1px solid var(--st-border); }
.st-accordion__item:first-child { border-top: 1px solid var(--st-border); }

.st-accordion__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    font-family: var(--st-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--st-heading);
    list-style: none;
    cursor: pointer;
}

.st-accordion__item summary::-webkit-details-marker { display: none; }

.st-accordion__item summary i {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    border: 1px solid var(--st-border-strong);
    border-radius: 50%;
    transition: all .45s var(--st-ease);
}

.st-accordion__item[open] summary i { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); transform: rotate(45deg); }
.st-accordion__body { padding: 0 60px 24px 0; overflow: hidden; }


/* ==========================================================================
   29. CASE STUDY (single-portfolio.php)
   ========================================================================== */
.st-case__hero {
    position: relative;
    height: 100vh;
    min-height: 640px;
    display: flex;
    align-items: flex-end;
    color: var(--st-white);
    overflow: hidden;
}

.st-case__hero-media { position: absolute; inset: 0; margin: 0; }
.st-case__hero-media img { width: 100%; height: 100%; object-fit: cover; }

.st-case__hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 14, 18, .55) 0%, rgba(13, 14, 18, .2) 35%, rgba(13, 14, 18, .95) 100%);
}

.st-case__hero-content { position: relative; z-index: 2; padding-bottom: 90px; }
.st-case__hero .st-breadcrumb a,
.st-case__hero .st-breadcrumb [aria-current] { color: rgba(255, 255, 255, .85); }

.st-case__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.st-case__tags li {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.st-case__title {
    max-width: 1100px;
    font-size: clamp(2.4rem, 5.6vw, 5.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--st-white);
}

.st-case__scroll {
    position: absolute;
    right: 40px;
    bottom: 90px;
    z-index: 2;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    color: var(--st-white);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    animation: stBounce 2.2s ease-in-out infinite;
}

.st-case__scroll:hover { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }

.st-case__lead {
    font-family: var(--st-font-display);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 500;
    line-height: 1.45;
    color: var(--st-heading);
}

.st-case__meta { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 0; border-top: 1px solid var(--st-border); }
.st-case__meta div { padding: 18px 0; border-bottom: 1px solid var(--st-border); }
.st-case__meta dt { margin-bottom: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-case__meta dd { margin: 0; font-family: var(--st-font-display); font-size: 17px; font-weight: 500; color: var(--st-heading); }

.st-case__results { padding-bottom: 20px; }
.st-case__results .st-counters { margin-top: 0; }

.st-case__row { display: grid; grid-template-columns: 320px 1fr; gap: 60px; padding: 60px 0; border-top: 1px solid var(--st-border); }
.st-case__label { position: sticky; top: 40px; align-self: start; font-size: 32px; font-weight: 700; }
.st-case__label em { display: block; margin-bottom: 8px; font-size: 14px; font-style: normal; color: var(--st-orange-ink); }
.st-case__text p,
.st-case__text li { font-size: 17px; }

.st-case__gallery { padding-bottom: 20px; }

.st-gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 28px;
    background: var(--st-bg-3);
}

.st-gallery__item--tall { aspect-ratio: 9 / 11; }
.st-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

.st-gallery__item::after {
    content: "\f00e";
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--st-white);
    background: var(--st-orange);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.6);
    transition: all .45s var(--st-ease);
}

.st-gallery__item:hover::after { opacity: 1; transform: scale(1); }

.st-quote { max-width: 980px; margin: 0 auto; text-align: center; }
.st-quote > i { font-size: 48px; color: var(--st-orange-ink); }
.st-quote blockquote p { margin: 22px 0 32px; font-family: var(--st-font-display); font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 600; line-height: 1.3; color: var(--st-heading); }
.st-quote figcaption { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.st-quote figcaption img { width: 56px; height: 56px; object-fit: cover; border: 2px solid var(--st-orange); border-radius: 50%; }
.st-quote figcaption strong { display: block; font-family: var(--st-font-display); color: var(--st-heading); }

.st-next-project__link {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 62vh;
    min-height: 420px;
    overflow: hidden;
    color: var(--st-white);
}

.st-next-project__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) brightness(.45); transition: filter .8s ease; }
.st-next-project__link:hover { color: var(--st-white); }
.st-next-project__link:hover img { filter: grayscale(0) brightness(.6); }
.st-next-project__content { position: relative; z-index: 1; padding-bottom: 70px; }
.st-next-project__content small { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--st-orange-light-ink); }
.st-next-project__content strong { display: flex; align-items: center; gap: .3em; font-family: var(--st-font-display); font-size: clamp(2.4rem, 6vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.st-next-project__content strong i { font-size: .5em; transition: transform .6s var(--st-ease); }
.st-next-project__link:hover strong i { transform: translateX(16px) rotate(-45deg); }


/* ==========================================================================
   30. BLOG ARCHIVE · SIDEBAR · PAGINATION
   ========================================================================== */
.st-search {
    position: relative;
    display: flex;
    padding: 6px;
    background: var(--st-surface);
    border: 1px solid var(--st-border-strong);
    border-radius: 50px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.st-search:focus-within { border-color: var(--st-orange); box-shadow: 0 0 0 4px rgba(var(--st-orange-rgb), .12); }
.st-search .search-field { flex: 1; min-width: 0; height: 48px; padding: 0 18px; font-size: 15px; color: var(--st-heading); background: transparent; border: 0; outline: 0; }
.st-search .search-field::placeholder { color: var(--st-text); }
.st-search .search-submit { width: 48px; height: 48px; flex-shrink: 0; color: var(--st-white); background: var(--st-orange); border: 0; border-radius: 50%; transition: transform .4s var(--st-ease); }
.st-search .search-submit:hover { transform: rotate(-12deg) scale(1.05); }

.st-sidebar .widget {
    position: relative;
    margin-bottom: 24px;
    padding: 28px;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 24px;
    overflow: hidden;
}

.widget-title { position: relative; margin-bottom: 22px; padding-bottom: 14px; font-size: 19px; }
.widget-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--st-orange); border-radius: 2px; }

.widget_categories li { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--st-border-strong); }
.widget_categories li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget_categories a { color: var(--st-text-strong); }
.widget_categories a:hover { color: var(--st-orange-ink); }
.widget_categories li span { min-width: 34px; padding: 2px 8px; font-size: 12px; text-align: center; background: var(--st-surface-2); border-radius: 50px; }

.widget_recent_entries li { display: grid; grid-template-columns: 72px 1fr; column-gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--st-border); }
.widget_recent_entries li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget_recent_entries a { display: contents; }
.widget_recent_entries img { grid-row: span 2; width: 72px; height: 72px; object-fit: cover; border-radius: 14px; }
.widget_recent_entries a span { font-family: var(--st-font-display); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--st-heading); transition: color .3s ease; }
.widget_recent_entries a:hover span { color: var(--st-orange-ink); }
.widget_recent_entries .post-date { font-size: 12.5px; }

.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }

.tagcloud a,
.tags-links a {
    padding: 6px 14px;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--st-text-strong);
    background: var(--st-surface-2);
    border: 1px solid var(--st-border);
    border-radius: 50px;
    transition: all .35s ease;
}

.tagcloud a:hover,
.tags-links a:hover { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }

.st-sidebar .st-widget-cta { color: rgba(255, 255, 255, .9); background: linear-gradient(145deg, #7A2600, #FF6600); border: 0; }
.st-widget-cta .widget-title { color: var(--st-white); }
.st-widget-cta .widget-title::after { background: var(--st-white); }
.st-widget-cta p { margin-bottom: 20px; }
.st-widget-cta__mark { position: absolute; right: -24px; bottom: -24px; width: 140px; height: 140px; opacity: .15; }

/* Pagination */
.pagination { margin-top: 50px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }

.page-numbers {
    min-width: 50px;
    height: 50px;
    display: inline-grid;
    place-items: center;
    padding: 0 14px;
    font-family: var(--st-font-display);
    font-weight: 600;
    color: var(--st-heading);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 14px;
    transition: all .35s ease;
}

a.page-numbers:hover { color: var(--st-orange-ink); border-color: var(--st-orange); }
.page-numbers.current { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }
.page-numbers.dots { background: none; border: 0; }


/* ==========================================================================
   31. SINGLE POST · TYPOGRAPHY · COMMENTS
   ========================================================================== */
.st-single__header { position: relative; padding: 180px 0 60px; overflow: hidden; text-align: center; }
.st-single__header .st-breadcrumb ol { justify-content: center; }
.st-single__header .cat-links { display: inline-block; margin-bottom: 20px; }

.st-single__title {
    max-width: 1000px;
    margin: 0 auto 30px;
    font-size: clamp(2.2rem, 4.8vw, 4.4rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.st-single__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; font-size: 14.5px; }
.st-single__meta .byline { text-align: left; }
.st-single__meta .avatar { width: 44px; height: 44px; }
.st-single__meta .byline a { font-weight: 600; color: var(--st-heading); }
.st-single__meta .byline small { display: block; font-size: 12.5px; }
.st-single__meta i { margin-right: 4px; color: var(--st-orange-ink); }

.st-single__thumb { position: relative; aspect-ratio: 2 / 1; margin: 0 0 70px; overflow: hidden; border-radius: 32px; }
.st-single__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Long-form typography (the_content) */
.entry-content { font-size: 18px; line-height: 1.85; color: var(--st-text-strong); }
.entry-content > * { margin-bottom: 1.4em; }
.entry-content h2 { margin: 2em 0 .7em; font-size: clamp(1.6rem, 2.4vw, 2.2rem); scroll-margin-top: 40px; }
.entry-content h3 { margin: 1.7em 0 .6em; font-size: 1.4rem; scroll-margin-top: 40px; }
.entry-content h2:first-child { margin-top: 0; }
.entry-content a:not(.st-btn) { color: var(--st-orange-ink); text-decoration: underline; text-underline-offset: 4px; }
.entry-content strong { color: var(--st-heading); }
.entry-content ul,
.entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content li::marker { color: var(--st-orange-ink); font-weight: 700; }
.entry-content .has-large-font-size { font-size: 22px; line-height: 1.6; color: var(--st-heading); }

.entry-content blockquote,
.wp-block-quote {
    margin: 2.2em 0;
    padding: 30px 34px;
    background: var(--st-surface);
    border-left: 4px solid var(--st-orange);
    border-radius: 0 22px 22px 0;
}

.wp-block-quote p { margin: 0 0 12px; font-family: var(--st-font-display); font-size: 24px; font-weight: 500; line-height: 1.45; color: var(--st-heading); }
.wp-block-quote cite { font-size: 14px; font-style: normal; font-weight: 600; color: var(--st-orange-ink); }

.wp-block-image { margin: 2.2em 0; }
.wp-block-image img { width: 100%; border-radius: 22px; }

.entry-content code { padding: 3px 8px; font-size: .86em; color: var(--st-orange-light-ink); background: var(--st-surface-2); border-radius: 6px; }

.wp-block-code {
    margin: 2em 0;
    padding: 22px 24px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #D6D9E3;
    background: #0B0C10;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    overflow-x: auto;
}

.wp-block-code code { padding: 0; color: inherit; background: none; }

.wp-block-table { margin: 2em 0; overflow-x: auto; border: 1px solid var(--st-border); border-radius: 18px; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.wp-block-table th,
.wp-block-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--st-border); }
.wp-block-table thead th { font-family: var(--st-font-display); color: var(--st-heading); background: var(--st-surface-2); }
.wp-block-table tbody tr:last-child td { border-bottom: 0; }

.st-single__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 50px 0 40px;
    padding: 26px 0;
    border-top: 1px solid var(--st-border);
    border-bottom: 1px solid var(--st-border);
}

.tags-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tags-links > i { margin-right: 4px; color: var(--st-orange-ink); }

.st-share { display: flex; align-items: center; gap: 8px; }
.st-share span { margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--st-heading); }

.st-share a,
.st-share button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 14px;
    color: var(--st-heading);
    background: var(--st-surface);
    border: 1px solid var(--st-border-strong);
    border-radius: 50%;
    transition: all .35s ease;
}

.st-share a:hover,
.st-share button:hover,
.st-share button.is-copied { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }

.st-author { display: flex; gap: 24px; margin-bottom: 40px; padding: 32px; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 28px; }
.st-author .avatar { width: 88px; height: 88px; flex-shrink: 0; object-fit: cover; border: 2px solid var(--st-orange); border-radius: 50%; }
.st-author .author-title { margin-bottom: 8px; font-size: 22px; }
.st-author .author-bio { margin-bottom: 14px; font-size: 15.5px; }

.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.post-navigation .nav-links a {
    display: block;
    height: 100%;
    padding: 24px;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 22px;
    transition: border-color .4s ease, transform .5s var(--st-ease);
}

.post-navigation .nav-links a:hover { border-color: rgba(var(--st-orange-rgb), .6); transform: translateY(-4px); }
.post-navigation .nav-next { text-align: right; }
.post-navigation .meta-nav { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--st-orange-ink); }
.post-navigation .post-title { display: block; margin-top: 8px; font-family: var(--st-font-display); font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--st-heading); }

/* Comments */
.comments-area { margin-top: 70px; }
.comments-title { margin-bottom: 30px; font-size: 28px; }
.comment-list,
.comment-list .children { margin: 0; padding: 0; list-style: none; }
.comment-list .children { margin-top: 16px; padding-left: 60px; }

.comment-body { margin-bottom: 16px; padding: 24px; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 22px; }
.bypostauthor > .comment-body { border-color: rgba(var(--st-orange-rgb), .35); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.comment-author { display: flex; align-items: center; gap: 12px; }
.comment-author .avatar { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.comment-author .fn { font-family: var(--st-font-display); font-size: 16px; color: var(--st-heading); }
.st-author-badge { padding: 2px 10px; font-size: 11.5px; font-weight: 600; color: var(--st-white); background: var(--st-orange); border-radius: 50px; }
.comment-metadata a { font-size: 13px; color: var(--st-text); }
.comment-content p { margin: 14px 0; font-size: 15.5px; color: var(--st-text-strong); }
.comment-reply-link { font-size: 13.5px; font-weight: 600; color: var(--st-orange-ink); }

.comment-respond { margin-top: 50px; padding: 36px; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 28px; }
.comment-reply-title { margin-bottom: 6px; font-size: 26px; }
.comment-notes { margin-bottom: 22px; font-size: 14px; }
.comment-form p { margin: 0 0 16px; }

.st-sidebar--sticky { position: sticky; top: 40px; }

.st-toc ol { margin: 0; padding: 0; list-style: none; }

.st-toc a {
    display: block;
    padding: 9px 0 9px 16px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--st-text);
    border-left: 2px solid var(--st-border);
    transition: all .35s ease;
}

.st-toc a:hover,
.st-toc a.is-active { color: var(--st-heading); border-left-color: var(--st-orange); }

.st-related { background: var(--st-bg-2); }
.st-related__title { margin-bottom: 40px; }


/* ==========================================================================
   32. CONTACT PAGE · FORMS
   ========================================================================== */
.st-contact__cards { display: grid; gap: 14px; }

.st-contact__card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 20px; color: inherit; }
.st-contact__card:hover { color: inherit; }
.st-contact__card .st-feature__ico { margin: 0; flex-shrink: 0; }
.st-contact__card small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-contact__card strong { display: block; font-family: var(--st-font-display); font-size: 17px; font-weight: 600; color: var(--st-heading); }
.st-contact__go { margin-left: auto; color: var(--st-orange-ink); transition: transform .4s var(--st-ease); }
.st-contact__card:hover .st-contact__go { transform: translateX(5px); }

.st-contact__map { height: 300px; margin: 24px 0; overflow: hidden; border: 1px solid var(--st-border); border-radius: 24px; }
.st-contact__map iframe { width: 100%; height: 100%; border: 0; }
[data-theme="dark"] .st-contact__map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95); }

.st-form-card {
    position: relative;
    padding: 44px;
    background: linear-gradient(160deg, var(--st-surface-2), var(--st-surface));
    border: 1px solid var(--st-border-strong);
    border-radius: 32px;
    box-shadow: var(--st-shadow);
    overflow: hidden;
    isolation: isolate;
}

.st-form-card__glow { position: absolute; top: -140px; right: -140px; z-index: -1; width: 360px; height: 360px; background: radial-gradient(circle, rgba(var(--st-orange-rgb), .3), transparent 70%); filter: blur(40px); }
.st-form-card__title { font-size: 32px; font-weight: 700; }
.st-form-card__sub { margin: 6px 0 28px; font-size: 14px; }

/* Form fields (shared: contact + comments) */
.st-field label,
.st-field legend {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--st-heading);
}

.st-field input[type="text"],
.st-field input[type="email"],
.st-field input[type="tel"],
.st-field textarea,
.st-field select {
    width: 100%;
    padding: 15px 18px;
    font-size: 15.5px;
    color: var(--st-heading);
    background: var(--st-bg);
    border: 1px solid var(--st-border-strong);
    border-radius: 14px;
    outline: 0;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.st-field textarea { resize: vertical; min-height: 140px; }
.st-field input::placeholder,
.st-field textarea::placeholder { color: var(--st-text); opacity: .7; }
.st-field input:focus,
.st-field textarea:focus,
.st-field select:focus { border-color: var(--st-orange); box-shadow: 0 0 0 4px rgba(var(--st-orange-rgb), .12); }
.st-field.has-error input,
.st-field.has-error textarea { border-color: #EF4444; }
.st-field.has-error legend { color: #EF4444; }
.st-field__error { display: block; margin-top: 6px; font-size: 13px; color: #EF4444; }

/* Chip checkboxes / radios */
.st-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.st-chips label { position: relative; width: auto; margin: 0; cursor: pointer; }
.st-chips input { position: absolute; opacity: 0; pointer-events: none; }

.st-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--st-text-strong);
    background: var(--st-surface);
    border: 1px solid var(--st-border-strong);
    border-radius: 50px;
    transition: all .35s var(--st-ease);
}

.st-chips span i { font-size: 12px; color: var(--st-orange-ink); transition: color .3s ease; }
.st-chips label:hover span { border-color: rgba(var(--st-orange-rgb), .6); }
.st-chips input:checked + span { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); box-shadow: 0 8px 22px -8px rgba(var(--st-orange-rgb), .8); }
.st-chips input:checked + span i { color: var(--st-white); }
.st-chips input:focus-visible + span { outline: 2px solid var(--st-orange); outline-offset: 3px; }

.st-check label { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; }
.st-check input { position: absolute; opacity: 0; pointer-events: none; }
.st-check__box { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; color: transparent; border: 1px solid var(--st-border-strong); border-radius: 7px; transition: all .3s ease; }
.st-check input:checked + .st-check__box { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }
.st-check input:focus-visible + .st-check__box { outline: 2px solid var(--st-orange); outline-offset: 3px; }

.st-form__note { font-size: 13px; }
.st-form__note i { margin-right: 4px; color: var(--st-orange-ink); }
.st-form__msg { min-height: 22px; margin: 16px 0 0; font-size: 14px; }
.st-form__msg.is-error { color: #EF4444; }

.st-form__success { padding: 50px 10px; text-align: center; }
.st-form__success-ico { width: 84px; height: 84px; display: grid; place-items: center; margin: 0 auto 24px; font-size: 32px; color: var(--st-white); background: var(--st-grad); border-radius: 50%; box-shadow: 0 20px 40px -12px rgba(var(--st-orange-rgb), .8); }
.st-form__success h3 { margin-bottom: 10px; font-size: 28px; }


/* ==========================================================================
   33. ABOUT PAGE (story · values · timeline · team · drawer · logos)
   ========================================================================== */
.st-story__visual { position: relative; padding: 0 70px 70px 0; }
.st-story__img { margin: 0; overflow: hidden; border-radius: 28px; background: var(--st-bg-3); }
.st-story__img img { width: 100%; height: 100%; object-fit: cover; }
.st-story__img--main { aspect-ratio: 9 / 10; }

.st-story__img--sub {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    aspect-ratio: 1;
    border: 6px solid var(--st-bg);
    box-shadow: var(--st-shadow);
}

.st-story__badge {
    position: absolute;
    top: 34px;
    left: -18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    color: var(--st-white);
    background: var(--st-grad);
    border-radius: 18px;
    box-shadow: 0 20px 40px -12px rgba(var(--st-orange-rgb), .7);
    animation: stFloat 6s ease-in-out infinite;
}

.st-story__badge strong { font-family: var(--st-font-display); font-size: 38px; line-height: 1; }
.st-story__badge small { font-size: 12.5px; line-height: 1.3; opacity: .92; }

.st-story__text { margin-top: 22px; }
.st-story__text p { margin-bottom: 14px; font-size: 17px; }
.st-story__list { margin-top: 20px; }

.st-story__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-weight: 500;
    color: var(--st-heading);
    border-bottom: 1px solid var(--st-border);
}

.st-story__list i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: var(--st-white);
    background: var(--st-orange);
    border-radius: 50%;
}

.st-values { background: var(--st-bg-2); }
.st-values .st-section__lead strong { color: var(--st-heading); }
.st-value { height: 100%; padding: 30px 28px; }
.st-value h3 { margin-bottom: 8px; font-size: 20px; }
.st-value p { font-size: 15px; }

.st-value__num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--st-font-display);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--st-border-strong);
    transition: -webkit-text-stroke-color .4s ease;
}

.st-value:hover .st-value__num { -webkit-text-stroke-color: var(--st-orange); }

/* Timeline */
.st-timeline { position: relative; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.st-timeline__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--st-border-strong); }
.st-timeline__line i { display: block; width: 100%; height: 100%; background: var(--st-grad); transform: scaleY(0); transform-origin: top; }
html:not(.has-gsap) .st-timeline__line i { transform: none; }

.st-timeline__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 90px; align-items: center; padding: 24px 0; }

.st-timeline__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: var(--st-bg);
    border: 3px solid var(--st-orange);
    border-radius: 50%;
    box-shadow: 0 0 0 6px var(--st-bg), 0 0 18px rgba(var(--st-orange-rgb), .7);
}

.st-timeline__year {
    font-family: var(--st-font-display);
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    font-weight: 800;
    line-height: 1;
    text-align: right;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--st-orange);
}

.st-timeline__card { padding: 26px 28px; border-radius: 22px; }
.st-timeline__card h3 { margin-bottom: 6px; font-size: 20px; }
.st-timeline__card p { font-size: 15px; }
.st-timeline__item:nth-child(odd) .st-timeline__year { grid-column: 2; grid-row: 1; text-align: left; }
.st-timeline__item:nth-child(odd) .st-timeline__card { grid-column: 1; grid-row: 1; }

/* Team grid + cards */
.st-people { background: var(--st-bg-2); }
.st-people__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.st-person__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 3.8;
    padding: 0;
    color: var(--st-white);
    text-align: left;
    background: var(--st-bg-3);
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
}

.st-person__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(13, 14, 18, 0) 45%, rgba(13, 14, 18, .9) 100%);
    pointer-events: none;
}

.st-person__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color .4s ease;
}

.st-person__media { position: absolute; inset: 0; }
.st-person__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.9); transition: filter .6s ease, transform 1s var(--st-ease); }
.st-person__card:hover .st-person__media img,
.st-person__card:focus-visible .st-person__media img { filter: none; transform: scale(1.08); }
.st-person__card:hover::before { border-color: rgba(var(--st-orange-rgb), .8); }

.st-person__info { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.st-person__name { display: block; font-family: var(--st-font-display); font-size: 20px; line-height: 1.2; }
.st-person__role { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--st-orange-light-ink); }

.st-person__plus {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: rgba(13, 14, 18, .5);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all .45s var(--st-ease);
}

.st-person__card:hover .st-person__plus { background: var(--st-orange); border-color: var(--st-orange); transform: rotate(90deg); }

.st-person--hiring .st-person__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    padding: 26px;
    background: radial-gradient(90% 80% at 100% 0%, rgba(255, 170, 110, .45), transparent 60%), linear-gradient(150deg, #7A2600, #FF6600);
}

.st-person--hiring .st-person__card::after { display: none; }
.st-person--hiring .st-member__hiring-title { font-size: 26px; }
.st-person--hiring .st-link { color: var(--st-white); }
.st-person--hiring .st-link i { border-color: rgba(255, 255, 255, .6); }
.st-person--hiring .st-person__card:hover .st-member__hiring-ico { transform: rotate(90deg); }

/* Profile drawer */
.st-drawer { position: fixed; inset: 0; z-index: 2100; }
.st-drawer[hidden] { display: none; }
.st-drawer__overlay { position: absolute; inset: 0; background: rgba(8, 9, 12, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.st-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--st-bg-2);
    border-left: 1px solid var(--st-border-strong);
    box-shadow: -30px 0 80px -20px rgba(0, 0, 0, .6);
}

.st-drawer__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--st-white);
    background: rgba(13, 14, 18, .6);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all .35s ease;
}

.st-drawer__close:hover { background: var(--st-orange); border-color: var(--st-orange); transform: rotate(90deg); }
.st-drawer__media { flex-shrink: 0; aspect-ratio: 4 / 3.6; margin: 0; overflow: hidden; }
.st-drawer__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.st-drawer__body { padding: 32px 38px 48px; }
.st-drawer__role { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-drawer__name { margin: 6px 0 18px; font-size: 34px; font-weight: 700; }
.st-drawer__content p { font-size: 16.5px; }
.st-person__skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; }
.st-person__skills li { padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--st-text-strong); background: var(--st-surface-2); border: 1px solid var(--st-border); border-radius: 50px; }

/* Client logos */
.st-logos { padding: 70px 0; background: var(--st-bg); border-top: 1px solid var(--st-border); border-bottom: 1px solid var(--st-border); overflow: hidden; }
.st-logos__title { margin-bottom: 30px; font-size: 13px; font-weight: 600; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.st-logos__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.st-logos .st-ribbon__track { display: flex; width: max-content; }
.st-logos__list { display: flex; flex-shrink: 0; }

.st-logos__list li {
    padding: 0 44px;
    font-family: var(--st-font-display);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--st-text);
    opacity: .55;
    transition: opacity .3s ease, color .3s ease;
}

.st-logos__list li b { font-weight: 800; color: var(--st-orange-ink); }
.st-logos__list li:hover { color: var(--st-heading); opacity: 1; }


/* ==========================================================================
   34. CAREER PAGE (perks · culture · roles · apply modal)
   ========================================================================== */
.st-perk { padding: 24px; }
.st-perk h3 { font-size: 17px; }

.st-culture { background: var(--st-bg-2); }
.st-culture__grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 560px; }
.st-culture__img { margin: 0; overflow: hidden; border-radius: 24px; background: var(--st-bg-3); }
.st-culture__img img { width: 100%; height: 100%; object-fit: cover; }
.st-culture__img--a { grid-row: span 2; }

.st-culture__quote { margin-top: 30px; padding: 26px; background: var(--st-surface); border-left: 3px solid var(--st-orange); border-radius: 0 20px 20px 0; }
.st-culture__quote blockquote { margin: 0 0 16px; font-family: var(--st-font-display); font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--st-heading); }
.st-culture__quote figcaption { display: flex; align-items: center; gap: 12px; }
.st-culture__quote img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.st-culture__quote strong { display: block; font-family: var(--st-font-display); color: var(--st-heading); }
.st-culture__quote small { font-size: 13px; }

/* Roles */
.st-filter__btn sup { top: -.6em; margin-left: 3px; font-size: 10px; opacity: .75; }
.st-roles__list { border-top: 1px solid var(--st-border); }
.st-role { border-bottom: 1px solid var(--st-border); transition: background-color .4s ease; }
.st-role[open] { background: var(--st-surface); }

.st-role summary {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1.6fr auto;
    align-items: center;
    gap: 24px;
    padding: 28px 22px;
    list-style: none;
    cursor: pointer;
    isolation: isolate;
}

.st-role summary::-webkit-details-marker { display: none; }

.st-role summary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(var(--st-orange-rgb), .1), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--st-ease);
}

.st-role summary:hover::before { transform: scaleX(1); }
.st-role__title strong { display: block; font-family: var(--st-font-display); font-size: 22px; font-weight: 600; color: var(--st-heading); transition: color .3s ease; }
.st-role summary:hover .st-role__title strong { color: var(--st-orange-ink); }
.st-role__title small { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-role__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.st-role__meta i { margin-right: 6px; color: var(--st-orange-ink); }

.st-role__toggle {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--st-heading);
    border: 1px solid var(--st-border-strong);
    border-radius: 50%;
    transition: all .45s var(--st-ease);
}

.st-role[open] .st-role__toggle { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); transform: rotate(45deg); }
.st-role__body { padding: 4px 22px 32px; }
.st-role__body h3 { margin-bottom: 12px; font-size: 17px; }
.st-role__body ul { padding-left: 1.1em; font-size: 15px; }
.st-role__body li { margin-bottom: 6px; }
.st-role__body li::marker { color: var(--st-orange-ink); }
.st-role__body .st-btn { margin-top: 24px; }

.st-process__list--4 { grid-template-columns: repeat(4, 1fr); }
.st-process__list--4 .st-process__line { left: 12.5%; right: 12.5%; }

/* Application modal */
.st-modal { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 20px; }
.st-modal[hidden] { display: none; }
.st-modal__overlay { position: absolute; inset: 0; background: rgba(8, 9, 12, .75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.st-modal__panel {
    position: relative;
    width: min(660px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 40px;
    background: var(--st-bg-2);
    border: 1px solid var(--st-border-strong);
    border-radius: 28px;
    box-shadow: var(--st-shadow);
}

.st-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--st-heading);
    background: var(--st-surface-2);
    border: 0;
    border-radius: 50%;
    transition: all .35s ease;
}

.st-modal__close:hover { color: var(--st-white); background: var(--st-orange); transform: rotate(90deg); }
.st-modal__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-modal__title { margin: 6px 0 24px; font-size: 30px; font-weight: 700; }

.st-field .st-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 20px;
    font-weight: 400;
    color: var(--st-text);
    background: var(--st-bg);
    border: 1.5px dashed var(--st-border-strong);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .3s ease, background-color .3s ease;
}

.st-drop > i { font-size: 26px; color: var(--st-orange-ink); }
.st-drop__text { font-size: 14px; }
.st-drop__text strong { color: var(--st-heading); }
.st-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.st-field .st-drop:hover,
.st-field .st-drop.is-drag { border-color: var(--st-orange); background: rgba(var(--st-orange-rgb), .05); }
.st-field .st-drop.has-file { border-style: solid; border-color: var(--st-orange); }
.st-field.has-error .st-drop { border-color: #EF4444; }


/* ==========================================================================
   35. PORTFOLIO ARCHIVE (grid / list · Flip · hover preview)
   ========================================================================== */
.st-pf-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 40px; }
.st-pf-hero__title { margin-bottom: 24px; }
.st-pf-hero__count { display: flex; align-items: center; gap: 14px; padding-bottom: 40px; }
.st-pf-hero__count strong { font-family: var(--st-font-display); font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--st-heading); }
.st-pf-hero__count small { font-size: 14px; line-height: 1.3; }

.st-pf-featured { padding-bottom: 0; }

.st-pf-feature {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 560px;
    color: var(--st-white);
    border-radius: 36px;
    overflow: hidden;
    isolation: isolate;
}

.st-pf-feature:hover { color: var(--st-white); }
.st-pf-feature__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.st-pf-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.st-pf-feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13, 14, 18, .92) 0%, rgba(13, 14, 18, .55) 50%, rgba(13, 14, 18, .1) 100%); }
.st-pf-feature__content { max-width: 640px; padding: 50px; }
.st-pf-feature__flag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 14px; font-size: 13px; font-weight: 600; background: var(--st-orange); border-radius: 50px; }
.st-pf-feature__title { margin-bottom: 26px; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 700; color: var(--st-white); }
.st-pf-feature__stats { display: flex; flex-wrap: wrap; gap: 34px; margin-bottom: 30px; }
.st-pf-feature__stats strong { display: block; font-family: var(--st-font-display); font-size: 34px; line-height: 1; }
.st-pf-feature__stats small { font-size: 13px; opacity: .75; }

.st-pf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 34px; padding-bottom: 24px; border-bottom: 1px solid var(--st-border); }
.st-pf-bar__right { display: flex; align-items: center; gap: 18px; }
.st-pf-bar__count { font-size: 14px; }
.st-pf-bar__count b { color: var(--st-heading); }

.st-view-toggle { display: flex; gap: 4px; padding: 4px; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 50px; }
.st-view-toggle button { width: 42px; height: 42px; padding: 0; color: var(--st-text); background: transparent; border: 0; border-radius: 50%; transition: all .35s ease; }
.st-view-toggle button:hover { color: var(--st-heading); }
.st-view-toggle button.is-active { color: var(--st-white); background: var(--st-orange); box-shadow: 0 8px 20px -8px rgba(var(--st-orange-rgb), .8); }

.st-pf__link { position: relative; display: block; color: inherit; }
.st-pf__link:hover { color: inherit; }

/* Grid layout */
.st-pf-grid.is-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; grid-auto-flow: dense; gap: 22px; }
.is-grid .st-pf--wide { grid-column: span 2; }
.is-grid .st-pf--tall { grid-row: span 2; }
.is-grid .st-pf__link { height: 100%; color: var(--st-white); background: var(--st-bg-3); border-radius: 26px; overflow: hidden; isolation: isolate; }
.is-grid .st-pf__link::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13, 14, 18, 0) 40%, rgba(13, 14, 18, .9) 100%); pointer-events: none; }
.is-grid .st-pf__media { position: absolute; inset: 0; margin: 0; }
.is-grid .st-pf__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--st-ease); }
.is-grid .st-pf__link:hover .st-pf__media img { transform: scale(1.07); }

.is-grid .st-pf__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "cats arrow" "title arrow" "metric arrow";
    row-gap: 4px;
    padding: 24px;
}

.is-grid .st-pf__index,
.is-grid .st-pf__year { display: none; }
.is-grid .st-pf__cats { grid-area: cats; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--st-orange-light-ink); }
.is-grid .st-pf__title { grid-area: title; font-size: 22px; color: var(--st-white); }
.is-grid .st-pf__metric { grid-area: metric; font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.is-grid .st-pf__metric b { color: var(--st-white); }

.st-pf__arrow {
    grid-area: arrow;
    align-self: end;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--st-black);
    background: var(--st-white);
    border-radius: 50%;
    transform: rotate(-45deg);
    transition: all .5s var(--st-ease);
}

.st-pf__link:hover .st-pf__arrow { color: var(--st-white); background: var(--st-orange); transform: rotate(0); }

/* List layout */
.st-pf-grid.is-list { display: flex; flex-direction: column; border-top: 1px solid var(--st-border); }
.is-list .st-pf__link { border-bottom: 1px solid var(--st-border); }
.is-list .st-pf__media { display: none; }

.is-list .st-pf__content {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1.7fr 1fr 70px 150px 46px;
    align-items: center;
    gap: 20px;
    padding: 28px 12px;
    isolation: isolate;
}

.is-list .st-pf__content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(var(--st-orange-rgb), .1), transparent 80%);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .5s var(--st-ease);
}

.is-list .st-pf__link:hover .st-pf__content::before { transform: scaleY(1); }
.is-list .st-pf__index { font-family: var(--st-font-display); font-size: 14px; font-weight: 600; color: var(--st-orange-ink); }
.is-list .st-pf__title { font-size: clamp(1.4rem, 2.6vw, 2.3rem); font-weight: 700; color: var(--st-heading); transition: transform .5s var(--st-ease), color .3s ease; }
.is-list .st-pf__link:hover .st-pf__title { color: var(--st-orange-ink); transform: translateX(14px); }
.is-list .st-pf__cats,
.is-list .st-pf__year,
.is-list .st-pf__metric { font-size: 14px; }
.is-list .st-pf__metric b { color: var(--st-heading); }
.is-list .st-pf__arrow { color: var(--st-heading); background: transparent; border: 1px solid var(--st-border-strong); }

/* Floating preview (list view) */
.st-pf-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 340px;
    aspect-ratio: 4 / 3;
    margin: -128px 0 0 -170px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
}

.st-pf-preview img { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   36. EMPLOYEE PROFILE (single-team.php)
   ========================================================================== */
.st-emp__hero { position: relative; padding: 170px 0 90px; overflow: hidden; background: radial-gradient(90% 70% at 20% 0%, rgba(var(--st-orange-rgb), .13) 0%, transparent 60%), linear-gradient(180deg, var(--st-bg) 0%, var(--st-bg-2) 100%); }

.st-emp__visual { position: relative; padding: 0 34px 34px 0; }

.st-emp__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 4.6;
    overflow: hidden;
    background: var(--st-bg-3);
    border-radius: 30px;
}

.st-emp__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1.2s var(--st-ease); }
.st-emp__visual:hover .st-emp__photo img { transform: scale(1.04); }

/* Offset orange frame behind the photo */
.st-emp__visual::before {
    content: "";
    position: absolute;
    inset: 34px 0 0 34px;
    border: 2px solid var(--st-orange);
    border-radius: 30px;
    transition: inset .8s var(--st-ease);
}

.st-emp__visual:hover::before { inset: 20px 14px 14px 20px; }

.st-emp__visual .st-badge-circle { top: -18px; right: -6px; width: 118px; height: 118px; }

.st-emp__status {
    position: absolute;
    left: -14px;
    bottom: 52px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--st-glass-strong);
    border: 1px solid var(--st-border-strong);
    border-radius: 16px;
    box-shadow: var(--st-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: stFloat 6s ease-in-out infinite;
}

.st-emp__status strong { display: block; font-family: var(--st-font-display); font-size: 15px; color: var(--st-heading); }
.st-emp__status small { font-size: 12px; }

.st-emp__role {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    font-family: var(--st-font-display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border: 1px solid rgba(var(--st-orange-rgb), .3);
    border-radius: 50px;
}

.st-emp__name { margin: 22px 0 14px; font-size: clamp(2.6rem, 5.6vw, 4.8rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }

.st-emp__tagline { max-width: 540px; font-family: var(--st-font-display); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.4; color: var(--st-heading); }
.st-emp__bio { margin-top: 20px; max-width: 580px; }
.st-emp__bio p { font-size: 16.5px; line-height: 1.8; }

.st-emp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.st-emp__actions .fa-whatsapp { font-size: 17px; }
.st-emp__social { margin-top: 26px; }

.st-emp__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 70px;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-xl);
    overflow: hidden;
}

.st-emp__stats li { padding: 30px 26px; text-align: center; border-right: 1px solid var(--st-border); transition: background-color .4s ease; }
.st-emp__stats li:last-child { border-right: 0; }
.st-emp__stats li:hover { background: rgba(var(--st-orange-rgb), .06); }
.st-emp__stats strong { display: block; font-family: var(--st-font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--st-heading); }
.st-emp__stats strong .st-counter { color: inherit; }
.st-emp__stats small { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; }

/* Contact cards */
.st-infocard { height: 100%; display: flex; flex-direction: column; padding: 34px; }
.st-infocard__head { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--st-border); }
.st-infocard__avatar { width: 64px; height: 64px; flex-shrink: 0; overflow: hidden; border: 2px solid var(--st-orange); border-radius: 50%; }
.st-infocard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-infocard__avatar--brand { display: grid; place-items: center; background: rgba(var(--st-orange-rgb), .1); }
.st-infocard__avatar--brand svg { width: 36px; height: 36px; overflow: visible; }
.st-infocard__title { font-size: 21px; }
.st-infocard__head p { margin-top: 3px; font-size: 14px; }

.st-infocard__list { flex: 1; }
.st-infocard__list li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px dashed var(--st-border); }
.st-infocard__list li:last-child { border-bottom: 0; }

.st-infocard__ico {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .1);
    border: 1px solid rgba(var(--st-orange-rgb), .22);
    border-radius: 14px;
    transition: all .4s var(--st-ease);
}

.st-infocard__list li:hover .st-infocard__ico { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); transform: rotate(-8deg); }
.st-infocard__meta { flex: 1; min-width: 0; }
.st-infocard__meta small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--st-orange-ink); }
.st-infocard__meta a,
.st-infocard__meta > span { display: block; font-family: var(--st-font-display); font-size: 16.5px; font-weight: 600; color: var(--st-heading); word-break: break-word; }
.st-infocard__meta a:hover { color: var(--st-orange-ink); }

.st-copy {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 13px;
    color: var(--st-text);
    background: transparent;
    border: 1px solid var(--st-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all .35s ease;
}

.st-copy:hover,
.st-copy.is-copied { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }
.st-infocard__note { margin-top: 22px; font-size: 13.5px; }
.st-infocard__note i { margin-right: 8px; color: var(--st-orange-ink); }
.st-infocard--company { background: linear-gradient(160deg, rgba(var(--st-orange-rgb), .12), var(--st-surface) 55%); }
.st-infocard__glow { position: absolute; top: -120px; right: -120px; z-index: -1; width: 300px; height: 300px; background: radial-gradient(circle, rgba(var(--st-orange-rgb), .3), transparent 70%); filter: blur(40px); }
.st-infocard--company .st-btn { margin-top: 26px; }

/* Toolkit tags */
.st-emp__expertise { background: var(--st-bg-2); }
.st-emp__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.st-emp__tags li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    font-family: var(--st-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--st-heading);
    background: var(--st-surface);
    border: 1px solid var(--st-border-strong);
    border-radius: 50px;
    transition: all .4s var(--st-ease);
}

.st-emp__tags li i { color: var(--st-orange-ink); transition: color .3s ease; }
.st-emp__tags li:hover { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); transform: translateY(-4px); box-shadow: 0 14px 30px -10px rgba(var(--st-orange-rgb), .75); }
.st-emp__tags li:hover i { color: var(--st-white); }

.st-emp__nav { padding-bottom: var(--st-section-y); }
.st-emp__nav-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 34px; border-top: 1px solid var(--st-border); }
.st-emp__nav .st-link i { transform: none; }
.st-emp__nav .st-link:hover i { color: var(--st-white); background: var(--st-orange); border-color: var(--st-orange); }

/* Team card → profile link */
.st-person { position: relative; }
.st-person .st-person__plus { position: absolute; top: 16px; right: 16px; z-index: 4; padding: 0; border: 1px solid rgba(255, 255, 255, .2); cursor: pointer; }
.st-person__card { display: block; }
.st-member__link { position: absolute; inset: 0; z-index: 3; }
.st-drawer__cta { margin-top: 28px; }


/* ==========================================================================
   37. SINGLE POST LAYOUT FIX
   ========================================================================== */
/* Bootstrap pulls a `.row.g-5` 24px wider on each side than a plain
   `.container` pads (12px), so this one — the only g-5 row that is not
   inside a clipping `.st-section` — needs the matching padding. */
.st-single > .container { padding-left: 24px; padding-right: 24px; }


/* ==========================================================================
   38. LIGHTBOX
   ========================================================================== */
.st-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 40px;
    background: rgba(8, 9, 12, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: stFadeIn .4s ease;
}

.st-lightbox[hidden] { display: none; }
.st-lightbox img { max-width: min(1400px, 92vw); max-height: 86vh; object-fit: contain; border-radius: 18px; animation: stZoomIn .5s var(--st-ease); }

.st-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--st-white);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    transition: all .35s ease;
}

.st-lightbox__close:hover { background: var(--st-orange); border-color: var(--st-orange); transform: rotate(90deg); }


/* ==========================================================================
   39. ANIMATION HELPERS & KEYFRAMES
   ========================================================================== */
/* Split-text word masks (created by main.js) */
.st-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.st-w__in { display: inline-block; }

/* Ribbons: CSS fallback loop, replaced by GSAP when available */
.st-ribbon__track { animation: stMarquee 36s linear infinite; }
.st-ribbon--dark .st-ribbon__track { animation-direction: reverse; animation-duration: 42s; }
.has-gsap .st-ribbon__track { animation: none; }

@keyframes stGradientShift { to { background-position: 200% center; } }
@keyframes stSpin { to { rotate: 360deg; } }
@keyframes stMarquee { to { transform: translateX(-50%); } }
@keyframes stHideLoader { to { opacity: 0; visibility: hidden; } }
@keyframes stFadeIn { from { opacity: 0; } }
@keyframes stZoomIn { from { opacity: 0; transform: scale(.92); } }

@keyframes stPing {
    0%   { transform: scale(.8); opacity: 1; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes stFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@keyframes stBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

@keyframes stOrbDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, 30px) scale(1.08); }
    66%      { transform: translate(-30px, 20px) scale(.95); }
}

@keyframes stGlow {
    0%, 100% { box-shadow: 0 0 18px rgba(var(--st-orange-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
    50%      { box-shadow: 0 0 34px rgba(var(--st-orange-rgb), .65), inset 0 1px 0 rgba(255, 255, 255, .25); }
}

@keyframes stWobble {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(14deg) scale(1.1); }
    60%      { transform: rotate(-8deg); }
}


/* ==========================================================================
   40. RESPONSIVE
   ========================================================================== */
/* ---------- ≤ 1399px ---------- */
@media (max-width: 1399.98px) {
    .st-dock__menu > li > a { padding: 11px 12px; font-size: 14px; }
    .st-chip--a { left: -16px; }
    .st-chip--b, .st-chip--c { right: -16px; }
}

/* ---------- ≤ 1199px — burger menu ---------- */
@media (max-width: 1199.98px) {
    :root { --st-section-y: 110px; }

    .st-dock__brand-text { display: none; }
    .st-dock__brand { padding: 5px; }
    .st-dock__menu > li > a { padding: 10px 10px; font-size: 13.5px; }
    .st-dock__cta { margin-left: 6px; padding-right: 16px; font-size: 13.5px; }
    .st-hero__badge { display: none; }

    .st-service { padding: 30px 26px; }
    .st-mock--platforms { grid-template-columns: repeat(2, 1fr); }
    .st-ceo__content { padding: 50px 40px 50px 30px; }
    .st-plan { padding: 36px 26px; }
    .st-cta { padding: 64px 50px; }
    .st-post--featured { grid-template-columns: 1fr; }
    .st-post--featured .post-thumbnail { min-height: 300px; }
}

/* ---------- ≤ 991px — tablet ---------- */
@media (max-width: 991.98px) {
    :root { --st-section-y: 90px; }

    .st-dock { display: none; }
    .st-tabbar { display: grid; }
    .st-back-top { bottom: calc(100px + env(safe-area-inset-bottom)); right: 18px; width: 48px; height: 48px; }
    .st-footer { padding-bottom: 120px; }

    .st-hero { padding: 140px 0 70px; }
    .st-hero__line--indent { padding-left: .6em; }
    .st-hero__stats { margin-top: 10px; }
    .st-showcase { margin-top: 60px; }
    .st-chip--a { left: 10px; top: -30px; }
    .st-chip--b { display: none; }
    .st-chip--c { right: 10px; bottom: -30px; }

    .st-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* A wide card would fill the whole row at two columns; keep it one. */
    .st-project--wide { grid-column: span 1; }
    .st-project--wide .st-project__media { aspect-ratio: 4 / 3; }

    .st-ceo__visual { padding: 36px 36px 0; }
    .st-ceo__frame, .st-ceo__img, .st-ceo__frame img { min-height: 420px; }
    .st-badge-circle { right: 16px; }
    .st-ceo__content { padding: 50px 36px; }

    .st-counters { grid-template-columns: repeat(2, 1fr); }
    .st-counter-item:nth-child(2) { border-right: 0; }
    .st-counter-item:nth-child(-n+2) { border-bottom: 1px solid var(--st-border); }

    .st-plan--featured,
    .st-plan--featured:hover { transform: none; }
    .st-plan--featured:hover { transform: translateY(-8px); }
    .st-pricing__row { max-width: 520px; margin-inline: auto; }
    .st-pricing__row > div + div { margin-top: 12px; }
    .st-plan__desc { min-height: 0; }

    /* Team: native swipe carousel instead of pinned scroll */
    .st-team__pin { min-height: 0; padding: 90px 0; }
    .st-team__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
    .st-team__viewport::-webkit-scrollbar { display: none; }
    .st-team__track { padding-right: 24px; }
    .st-member { scroll-snap-align: start; width: 280px; }
    .st-member:nth-child(even) { margin-top: 0; }
    .st-member__social a { opacity: 1; transform: none; }
    .st-member__bio { max-height: 90px; margin-top: 10px; opacity: 1; }
    .st-member__media img { filter: none; }

    .st-cta { padding: 60px 36px; text-align: center; }
    .st-cta__text { margin-inline: auto; }
    .st-cta__trust { justify-content: center; }

    .st-page-hero { padding: 150px 0 70px; }
    .st-page-hero__jump { justify-content: flex-start; }

    .st-process__list { grid-template-columns: 1fr; gap: 0; }
    .st-process__line { top: 0; bottom: 0; left: 31px; right: auto; width: 2px; height: auto; }
    .st-process__line i { width: 100%; height: 100%; transform-origin: top; }
    .st-process__step { display: grid; grid-template-columns: 64px 1fr; column-gap: 24px; padding-bottom: 34px; text-align: left; }
    .st-process__dot { grid-row: span 2; }
    .st-process__step h3 { margin: 8px 0 6px; }

    .st-case__row { grid-template-columns: 1fr; gap: 20px; padding: 44px 0; }
    .st-case__label { position: static; }
    .st-case__scroll { display: none; }

    .st-sidebar--sticky { position: static; }
    .st-single__header { padding-top: 150px; }
    .st-form-card { padding: 34px 26px; }

    .st-footer { border-radius: 36px 36px 0 0; }
}

/* ---------- ≤ 767px ---------- */
@media (max-width: 767.98px) {
    :root { --st-section-y: 80px; }

    .st-hero__meta { display: none; }
    .st-hero__line--indent { padding-left: 0; }
    .st-hero__line--right { text-align: left; }
    .st-hero__sub { font-size: 16px; }
    .st-hero__stats strong { font-size: 32px; }
    .st-hero__stats li + li { padding-left: 14px; }
    .st-rotator__word { -webkit-text-stroke-width: 1.5px; }

    .st-showcase__bar em { display: none; }
    .st-chip { padding: 8px 12px 8px 8px; gap: 8px; border-radius: 14px; }
    .st-chip__ico, .st-ring { width: 34px; height: 34px; font-size: 13px; }
    .st-ring b { width: 26px; height: 26px; font-size: 11px; }
    .st-chip strong { font-size: 13px; }
    .st-chip small { font-size: 10.5px; }

    .st-ribbons { padding: 50px 0; }
    .st-ribbon { padding: 14px 0; }

    .st-statement__foot { gap: 24px 36px; margin-top: 44px; }
    .st-statement__fact strong { font-size: 34px; }
    .st-statement__foot .st-link { margin-left: 0; }

    .st-section__head .st-filter { width: 100%; justify-content: center; border-radius: var(--st-radius); }

    .st-bonus { flex-direction: column; align-items: flex-start; }
    .st-srv__head { grid-template-columns: 1fr; gap: 10px; }
    .st-case__meta { grid-template-columns: 1fr; }
    .st-case__hero-content { padding-bottom: 60px; }
    .post-navigation .nav-links { grid-template-columns: 1fr; }
    .post-navigation .nav-next { text-align: left; }
    .comment-list .children { padding-left: 20px; }
    .st-author { flex-direction: column; }
    .st-accordion__body { padding-right: 0; }

    .st-footer__bottom { flex-direction: column; text-align: center; }
    .st-footer__word { margin-top: 60px; }
    .st-loader__meta { left: 20px; right: 20px; }
    .st-loader__hint { display: none; }
}

/* ---------- ≤ 575px ---------- */
@media (max-width: 575.98px) {
    .st-logo__mark { width: 36px; height: 36px; }
    .st-logo__name { font-size: 20px; }
    .st-logo__tag { font-size: 7.5px; letter-spacing: .45em; }
    .st-theme-toggle { width: 44px; height: 44px; }
    .st-topbar { padding: 18px 0; }

    .st-hero { padding-top: 120px; }
    .st-hero__actions .st-btn { width: 100%; }
    .st-hero__stats small { font-size: 12px; }
    .st-showcase__frame { border-radius: 14px; }

    .st-service { padding: 26px 20px; }
    .st-mock { padding: 14px; }
    .st-mock__row { grid-template-columns: 16px 74px 1fr 32px; gap: 8px; font-size: 12px; }
    .st-mock--code pre { font-size: 11.5px; padding: 14px; }

    .st-masonry { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    /* Single column: every card is the same simple shape. */
    .st-project--wide, .st-project--tall { grid-column: span 1; grid-row: span 1; }
    .st-project--wide .st-project__media,
    .st-project--tall .st-project__media { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
    .st-project--tall .st-project__link { height: auto; }

    .st-ceo__visual { padding: 24px 24px 0; }
    .st-ceo__frame, .st-ceo__img, .st-ceo__frame img { min-height: 360px; }
    .st-badge-circle { width: 96px; height: 96px; top: 8px; right: 6px; }
    .st-badge-circle text { font-size: 10px; }
    .st-badge-circle__mark { width: 30px; height: 30px; }
    .st-ceo__exp { left: 8px; bottom: 40px; padding: 12px 16px; }
    .st-ceo__exp strong { font-size: 30px; }
    .st-ceo__content { padding: 40px 24px; }
    .st-ceo__signature { font-size: 36px; }

    .st-counter-item { padding: 30px 12px; }
    .st-member { width: 250px; }

    .st-cta { padding: 48px 22px; border-radius: 28px; }
    .st-lead { padding: 16px; }

    .st-newsletter { flex-direction: column; gap: 6px; border-radius: 18px; }
    .st-newsletter input { padding: 12px 14px; }
    .st-newsletter .st-btn { width: 100%; }

    .st-single__thumb { border-radius: 20px; aspect-ratio: 4 / 3; }
    .entry-content { font-size: 16.5px; }
    .wp-block-quote { padding: 22px; }
    .wp-block-quote p { font-size: 20px; }
    .comment-respond { padding: 24px 20px; }
    .st-lightbox { padding: 16px; }
}

/* ---------- New pages ---------- */
@media (max-width: 1199.98px) {
    .st-people__grid { grid-template-columns: repeat(3, 1fr); }
    .is-list .st-pf__content { grid-template-columns: 50px 1.6fr 1fr 120px 46px; }
    .is-list .st-pf__year { display: none; }
}

@media (max-width: 991.98px) {
    .st-story__visual { max-width: 560px; margin: 0 auto; }
    .st-timeline__line { left: 20px; }
    .st-timeline__item { grid-template-columns: 1fr; row-gap: 12px; padding: 20px 0 20px 56px; }
    .st-timeline__item::before { top: 44px; left: 20px; }
    .st-timeline__year,
    .st-timeline__item:nth-child(odd) .st-timeline__year { grid-column: 1; grid-row: 1; text-align: left; font-size: 40px; }
    .st-timeline__item:nth-child(odd) .st-timeline__card { grid-column: 1; grid-row: 2; }
    .st-people__grid { grid-template-columns: repeat(2, 1fr); }
    .st-culture__grid { height: 460px; }
    .st-role summary { grid-template-columns: 1fr auto; }
    .st-role__meta { grid-column: 1; grid-row: 2; }
    .st-role__toggle { grid-column: 2; grid-row: 1 / span 2; }
    .st-process__list--4 { grid-template-columns: 1fr; }
    .st-pf-grid.is-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
    .st-pf-preview { display: none; }
    .st-pf-feature { min-height: 480px; }
    .st-pf-feature__content { padding: 34px; }
}

@media (max-width: 767.98px) {
    .st-pf-bar__right { width: 100%; justify-content: space-between; }
    .is-list .st-pf__content { grid-template-columns: 34px 1fr 40px; gap: 12px; padding: 22px 6px; }
    .is-list .st-pf__cats,
    .is-list .st-pf__metric { display: none; }
    .is-list .st-pf__arrow { width: 40px; height: 40px; }
    .st-pf-hero__count { padding-bottom: 20px; }
    .st-pf-hero__count strong { font-size: 48px; }
}

@media (max-width: 575.98px) {
    .st-story__visual { padding: 0 30px 50px 0; }
    .st-story__badge { left: 0; top: 16px; padding: 12px 16px; }
    .st-story__badge strong { font-size: 30px; }
    .st-people__grid { gap: 12px; }
    .st-person__info { left: 14px; right: 14px; bottom: 12px; }
    .st-person__name { font-size: 16px; }
    .st-person__role { font-size: 12px; }
    .st-person__plus { width: 32px; height: 32px; top: 10px; right: 10px; }
    .st-culture__grid { height: 380px; gap: 10px; }
    .st-modal__panel { padding: 30px 20px; border-radius: 22px; }
    .st-drawer__body { padding: 26px 22px 40px; }
    .st-pf-grid.is-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
    .is-grid .st-pf--wide { grid-column: auto; }
    .is-grid .st-pf--tall { grid-row: auto; }
    .st-pf-feature__stats { gap: 20px; }
    .st-pf-feature__stats strong { font-size: 26px; }
}

/* ---------- Case studies · employee profile ---------- */
@media (max-width: 1199.98px) {
    .st-case-card__body { padding: 36px; }
    .st-case-card__link { min-height: 420px; }
    .st-emp__stats li { padding: 26px 16px; }
}

@media (max-width: 991.98px) {
    /* Stacking off — plain cards read better on short viewports */
    .st-cases__item { position: relative; top: auto; padding-bottom: 0; }
    .st-cases__item + .st-cases__item { margin-top: 24px; }
    .st-case-card__link { grid-template-columns: 1fr; min-height: 0; }
    .st-case-card__media { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; }
    .st-case-card__media::after { background: linear-gradient(180deg, rgba(13, 14, 18, .45), transparent 55%); }
    .st-case-card__body { grid-column: 1; grid-row: 2; padding: 32px; }
    .st-case-card__go { width: 46px; height: 46px; }

    .st-emp__hero { padding: 150px 0 70px; }
    .st-emp__visual { max-width: 460px; margin: 0 auto; }
    .st-emp__intro { text-align: center; }
    .st-emp__tagline, .st-emp__bio { margin-inline: auto; }
    .st-emp__actions, .st-emp__social { justify-content: center; }
    .st-emp__stats { grid-template-columns: repeat(2, 1fr); }
    .st-emp__stats li:nth-child(2) { border-right: 0; }
    .st-emp__stats li:nth-child(-n+2) { border-bottom: 1px solid var(--st-border); }
    .st-infocard { padding: 28px; }
}

@media (max-width: 767.98px) {
    .st-case-card__metrics { gap: 10px; margin: 24px 0; padding: 20px 0; }
    .st-case-card__metrics small { font-size: 10.5px; letter-spacing: .04em; }
    .st-case-card__chips { left: 16px; right: 16px; top: 16px; }
    .st-case-card__chip { padding: 6px 12px; font-size: 11px; }
    .st-emp__tags li { padding: 10px 16px; font-size: 13.5px; }
}

@media (max-width: 575.98px) {
    .st-case-card { border-radius: 24px; }
    .st-case-card__body { padding: 24px 20px; }
    .st-case-card__title { font-size: 1.6rem; }
    .st-case-card__text { font-size: 15px; }
    .st-case-card__metrics { grid-template-columns: 1fr; gap: 14px; text-align: left; }
    .st-case-card__metrics > div { display: flex; align-items: baseline; gap: 10px; }
    .st-case-card__metrics small { margin-top: 0; }

    .st-emp__visual { padding: 0 20px 20px 0; }
    .st-emp__visual::before { inset: 20px 0 0 20px; }
    .st-emp__visual .st-badge-circle { width: 92px; height: 92px; top: -10px; right: 0; }
    .st-emp__status { left: 0; bottom: 30px; padding: 10px 14px; }
    .st-emp__name { font-size: 2.3rem; }
    .st-emp__actions .st-btn { width: 100%; }
    .st-emp__stats { grid-template-columns: 1fr; }
    .st-emp__stats li { border-right: 0; border-bottom: 1px solid var(--st-border); }
    .st-emp__stats li:last-child { border-bottom: 0; }
    .st-infocard { padding: 22px 18px; }
    .st-infocard__list li { gap: 10px; }
    .st-infocard__ico { width: 38px; height: 38px; font-size: 13px; }
    .st-infocard__meta a, .st-infocard__meta > span { font-size: 15px; }
}


/* ==========================================================================
   41. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .st-ribbon__track { animation: none; }
}



/* ==========================================================================
   42. WORDPRESS CORE · THEME-ONLY COMPONENTS
   Everything WordPress can output that the static build never produced:
   block alignments, captions, galleries, the admin bar, widget output,
   the 404 page, empty states and Elementor pages.
   ========================================================================== */

/* ---------- Accessibility & admin bar ---------- */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background: var(--st-bg-2);
    border-radius: var(--st-radius-sm);
    box-shadow: 0 0 0 2px var(--st-orange);
    clip: auto !important;
    clip-path: none;
    color: var(--st-heading);
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: auto;
    left: 16px;
    line-height: 1;
    padding: 14px 22px;
    text-decoration: none;
    top: 16px;
    width: auto;
    z-index: 100000;
}

body.admin-bar .st-topbar { padding-top: 32px; }

@media (max-width: 782px) {
    body.admin-bar .st-topbar { padding-top: 46px; }
}

/* ---------- Block alignment & media ---------- */
.st-rich .alignleft,
.entry-content .alignleft {
    float: left;
    margin: .4em 1.8em 1.2em 0;
    max-width: 50%;
}

.st-rich .alignright,
.entry-content .alignright {
    float: right;
    margin: .4em 0 1.2em 1.8em;
    max-width: 50%;
}

.st-rich .aligncenter,
.entry-content .aligncenter {
    display: block;
    margin-inline: auto;
}

.entry-content .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: auto;
}

.entry-content > .alignwide { margin-inline: -6%; }

.entry-content img,
.st-rich img { height: auto; max-width: 100%; }

.wp-caption,
.wp-block-image figure { margin-bottom: 1.8rem; }

.wp-caption-text,
.wp-element-caption,
.wp-block-image figcaption {
    color: var(--st-text);
    font-size: .88rem;
    margin-top: .8rem;
    text-align: center;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: var(--st-radius-sm); }

.wp-block-button__link,
.wp-element-button {
    background: var(--st-orange);
    border: 0;
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 14px 30px;
    text-decoration: none;
    transition: transform .4s var(--st-ease), box-shadow .4s var(--st-ease);
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    box-shadow: 0 16px 36px -14px rgba(var(--st-orange-rgb), .7);
    color: #fff;
    transform: translateY(-2px);
}

.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid var(--st-border-strong);
    color: var(--st-heading);
}

.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--st-border);
    margin: 3rem auto;
}

.wp-block-pullquote,
.wp-block-quote {
    border-left: 3px solid var(--st-orange);
    margin: 2.4rem 0;
    padding: .4rem 0 .4rem 1.6rem;
}

.wp-block-embed iframe,
.entry-content iframe { border-radius: var(--st-radius-sm); max-width: 100%; }

.wp-block-table table { width: 100%; }

.sticky .st-post__flag { display: inline-flex; }

.post-password-form input[type="password"] {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    color: var(--st-heading);
    padding: 12px 16px;
}

/* ---------- Page links (paged posts) ---------- */
.page-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2.4rem;
}

.page-links a,
.page-links > span:not(.screen-reader-text) {
    align-items: center;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    color: var(--st-heading);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    min-width: 38px;
    text-decoration: none;
}

.page-links a:hover { border-color: var(--st-orange); color: var(--st-orange-ink); }

/* ---------- Widget output from core widgets ---------- */
.st-sidebar .widget ul,
.st-footer .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.st-sidebar .widget ul ul { margin-top: .5rem; padding-left: 1rem; }

.st-sidebar .widget select,
.st-footer .widget select {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    color: var(--st-heading);
    max-width: 100%;
    padding: 12px 14px;
    width: 100%;
}

.st-sidebar .wp-block-group__inner-container > h2,
.st-sidebar .wp-block-heading { color: var(--st-heading); }

.wp-calendar-table { width: 100%; }

.wp-calendar-table caption,
.wp-calendar-nav { color: var(--st-text); font-size: .85rem; }

/* ---------- Empty states ---------- */
.st-empty {
    background: var(--st-surface);
    border: 1px dashed var(--st-border-strong);
    border-radius: var(--st-radius);
    color: var(--st-text);
    margin: 0;
    padding: 2.4rem;
    text-align: center;
}

.st-empty-card {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    padding: clamp(2rem, 5vw, 3.6rem);
    text-align: center;
}

.st-empty-card__mark {
    height: 54px;
    margin-bottom: 1.4rem;
    width: 54px;
}

.st-empty-card .page-title {
    color: var(--st-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: .8rem;
}

.st-empty-card .page-content { color: var(--st-text); }

.st-empty-card .st-search { margin: 1.6rem auto 0; max-width: 420px; }

/* ---------- 404 ---------- */
.st-404 { text-align: center; }

.st-404__code {
    -webkit-background-clip: text;
    background: linear-gradient(135deg, var(--st-heading) 0%, var(--st-orange) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(6rem, 22vw, 15rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: .85;
    margin: 0 0 1rem;
}

.st-404__search { margin-top: 2.4rem; max-width: 460px; }

/* ---------- Free content block on the front page ---------- */
.st-free-content .st-rich { margin-inline: auto; max-width: 820px; }

/* ---------- Rich text ---------- */
.st-rich > *:first-child { margin-top: 0; }
.st-rich > *:last-child { margin-bottom: 0; }

.st-rich h2,
.st-rich h3,
.st-rich h4 { color: var(--st-heading); margin-top: 2.4rem; }

.st-rich p,
.st-rich li { color: var(--st-text); }

.st-rich a { color: var(--st-orange-ink); }

/* ---------- Elementor pages ---------- */
.st-page--elementor > .entry-content { padding-block: 0; }

body.elementor-page .site-main { padding-top: 0; }

.elementor-widget-container .st-section { padding-block: 0; }

/* Elementor's own container should not fight the theme's dark background. */
.elementor-section,
.elementor-container { max-width: 100%; }

/* ---------- Form plugin shortcodes inside the CTA ---------- */
.st-lead--shortcode input[type="text"],
.st-lead--shortcode input[type="email"],
.st-lead--shortcode input[type="tel"],
.st-lead--shortcode textarea,
.st-lead--shortcode select {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--st-radius-sm);
    color: #fff;
    padding: 14px 16px;
    width: 100%;
}

.st-lead--shortcode input[type="submit"],
.st-lead--shortcode button[type="submit"] {
    background: #fff;
    border: 0;
    border-radius: 999px;
    color: #111;
    font-weight: 700;
    margin-top: 10px;
    padding: 15px 28px;
    width: 100%;
}

/* ---------- Busy buttons ---------- */
.st-btn.is-busy,
button.is-busy { cursor: progress; opacity: .7; }

/* ---------- Extra pieces introduced by the WordPress templates ---------- */

/* Role meta shown in the single-role hero. */
.st-role__meta--hero {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
}

.st-role__meta--hero li {
    align-items: center;
    color: var(--st-text);
    display: inline-flex;
    font-size: .92rem;
    gap: 8px;
}

.st-role__meta--hero i { color: var(--st-orange-ink); }

/* Deliverable list stacked in one column. */
.st-srv__deliver--stack {
    display: block;
}

.st-srv__deliver--stack li { display: flex; margin-bottom: .55rem; }

/* Lead paragraph inside the application modal. */
.st-modal__text {
    color: var(--st-text);
    margin: -.4rem 0 1.4rem;
}

/* Button widget wrapper (Elementor). */
.st-btn-wrap { display: block; }

/* Form plugin shortcode inside the contact card. */
.st-form--shortcode input[type="text"],
.st-form--shortcode input[type="email"],
.st-form--shortcode input[type="tel"],
.st-form--shortcode input[type="url"],
.st-form--shortcode textarea,
.st-form--shortcode select {
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    color: var(--st-heading);
    padding: 14px 16px;
    width: 100%;
}

.st-form--shortcode input[type="submit"],
.st-form--shortcode button[type="submit"] {
    background: var(--st-orange);
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    margin-top: 12px;
    padding: 15px 30px;
}


/* ---------- Header & footer colours from the Customizer ---------- */

.st-header .st-topbar__mail,
.st-header .st-status { color: var(--st-header-text, inherit); }

.st-dock__menu > li > a { color: var(--st-dock-text, inherit); }

.st-dock__cta {
    background: var(--st-dock-cta-bg, var(--st-orange));
    color: var(--st-dock-cta-text, #fff);
}

.st-footer,
.st-footer p,
.st-footer li,
.st-footer .st-footer__about p { color: var(--st-footer-text, inherit); }

.st-footer h2,
.st-footer .widget-title,
.st-footer strong { color: var(--st-footer-heading, inherit); }

/* :not(.st-social a) keeps the social tiles out of the blanket footer link
   hover — they have their own white-on-orange treatment above. */
.st-footer a:not(.st-social a):hover,
.st-footer .menu-item a:hover { color: var(--st-footer-link-hover, var(--st-orange)); }

/* ---------- An uploaded logo ----------

   Both versions ship in the markup and CSS shows one. Swapping the src
   on a theme change would re-fetch the file and flash an empty box at
   the top of the page every single time the visitor toggles. */
.st-logo--image { display: inline-flex; align-items: center; }

.st-logo__image {
    max-width: var(--st-logo-width, 190px);
    max-height: 56px;
    width: auto;
    height: auto;
    display: block;
}

.st-logo__image--light { display: none; }

[data-theme="light"] .st-logo__image--dark { display: none; }
[data-theme="light"] .st-logo__image--light { display: block; }

/* The dock is small, so its logo is capped tighter than the top bar's. */
.st-dock__brand .st-logo__image { max-height: 30px; max-width: 132px; }
.st-footer .st-logo__image { max-height: 48px; }

@media (max-width: 575.98px) {
    .st-logo__image { max-height: 40px; max-width: min(var(--st-logo-width, 190px), 52vw); }
}

/* ---------- Overlay menu: collapsible sub-items ----------

   These were chips, rendered all the time. On a phone that meant the
   Services list sat permanently open under Services, pushing the rest of
   the menu off the bottom of the screen and looking broken. They are now
   a list that opens behind the parent's chevron, closed until asked for
   (the markup carries `hidden`, so with JavaScript off they stay out of
   the way rather than stacking up).
   ------------------------------------------------------------------- */

.st-menu__sub {
    display: grid;
    gap: 2px;
    list-style: none;
    margin: 6px 0 14px;
    padding: 0 0 0 clamp(30px, 7vw, 62px);
}

.st-menu__sub[hidden] { display: none; }

.st-menu__sub .menu-item { margin: 0; overflow: visible; }

/* .st-menu__list a is a descendant selector, so these have to undo the
   big headline treatment it applies — including its slide-in transform. */
.st-menu__sub a,
.st-menu.is-open .st-menu__sub a {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 2px 12px;
    padding: 9px 12px;
    transform: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: rgba(255, 255, 255, .84);
    font-family: var(--st-font-body);
    font-size: clamp(13px, 3.3vw, 15px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color .3s var(--st-ease), color .3s var(--st-ease), border-color .3s var(--st-ease);
}

.st-menu__sub a > i {
    grid-row: 1 / span 2;
    color: var(--st-orange-ink);
    font-size: 13px;
    text-align: center;
}

.st-menu__sub a > small {
    grid-column: 2;
    font-size: clamp(11px, 2.8vw, 12px);
    color: rgba(255, 255, 255, .52);
}

.st-menu__sub a:hover,
.st-menu__sub a:focus-visible {
    background: rgba(var(--st-orange-rgb), .14);
    border-color: rgba(var(--st-orange-rgb), .4);
    color: #fff;
}

.st-menu__sub a:hover > i,
.st-menu__sub a:focus-visible > i { color: var(--st-orange); }

/* Opening and closing is animated by JS on the element's own height, so
   there is nothing to declare here beyond the clip it needs. */
.st-menu__sub.is-animating { overflow: hidden; }

@media (max-width: 575.98px) {
    .st-menu__sub { padding-left: 26px; }
    .st-menu__sub a { padding: 8px 10px; }
}

/* On a short screen the menu is a list to scroll, not a poster. */
@media (max-height: 700px) and (max-width: 991.98px) {
    .st-menu__inner { justify-content: flex-start; gap: 16px; }
    .st-menu__list a { font-size: clamp(1.35rem, 4.6vw, 2rem); }
    .st-menu__toggle { width: 36px; height: 36px; }
}

}

/* ==========================================================================
   40. TEAM PAGE — THE HAND (team.html hero)

   A small team is not a crowd, so this does the opposite of a scrolling
   wall: every member is on screen at once, dealt out like a hand of cards.
   No loop, no duplicated markup — what you see is the whole team, which is
   the point.

   Tilts and offsets are irregular on purpose (see --r / --y on each card):
   a symmetrical fan looks arranged, a slight wave looks dealt.
   ========================================================================== */

.st-hand {
    position: relative;
    /* clip, never hidden — hidden would break position:sticky elsewhere */
    overflow-x: clip;
    padding: 64px 0 76px;
    background: var(--st-bg);
    isolation: isolate;
}

.st-hand__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.st-hand__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--st-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--st-grid-line) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at 50% 48%, #000 12%, transparent 68%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 12%, transparent 68%);
}

/* The single light. JS slides it to whichever card has attention, so the
   page never has more than one focal point. */
.st-hand__spot {
    position: absolute;
    /* Rests centred and dim behind the whole hand; JS gives it a pixel
       position and full strength once a card is open, so the light always
       belongs to whatever has attention. */
    left: 50%;
    top: 50%;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--st-orange-rgb), .34), transparent 62%);
    filter: blur(20px);
    opacity: calc(var(--st-orb-opacity, 1) * .45);
    transition: opacity .5s ease;
}

.st-hand.is-live .st-hand__spot { opacity: var(--st-orb-opacity, 1); }

/* ---------- The stage ---------- */

.st-hand__stage { position: relative; z-index: 1; }

/* ---------- The row ---------- */

.st-hand__row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0 clamp(16px, 4vw, 48px);
    list-style: none;
}

/* ---------- One card ----------

   The card is a PORTRAIT at rest, not a sliver that opens into one. Its
   width is derived from its height so the picture is always framed the
   way a portrait wants to be framed, whatever the viewport is doing:
   --ratio is the 3:4 the pictures are cropped to.

   --overlap is how far each card tucks under the one before it. The
   default suits six or so; initHand() measures the row and tightens it
   when there are more, so a bigger team narrows the fan instead of
   running off the side of the page. */

.st-hand {
    --h: clamp(260px, 31vw, 420px);
    --ratio: .75;
    --overlap: clamp(26px, 3.4vw, 58px);
}

.st-hand__card {
    --w: calc(var(--h) * var(--ratio));

    position: relative;
    flex: 0 0 var(--w);
    height: var(--h);
    margin: 0;
    /* Overlap, so it reads as a held hand rather than a row of tiles. */
    margin-inline-start: calc(-1 * var(--overlap));
    border-radius: clamp(14px, 1.4vw, 20px);
    transition:
        flex-basis .62s var(--st-ease),
        margin .62s var(--st-ease),
        filter .5s ease,
        opacity .5s ease;
}

.st-hand__card:first-child { margin-inline-start: 0; }

.st-hand__link {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background: var(--st-bg-3);
    border: 1px solid var(--st-border);
    /* Depth comes from the card's own shadow, not a uniform drop on all. */
    box-shadow: 0 24px 54px -26px rgba(0, 0, 0, .85);
    transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
    transition: border-color .45s ease, box-shadow .55s var(--st-ease), transform .62s var(--st-ease);
}

/* The picture fills the card from the start. It used to be cropped to a
   sliver at rest and only became a face on hover, which read as broken
   rather than as an effect — the card is now the right shape for the
   picture, so there is nothing to reveal. Hover only highlights. */
.st-hand__link img {
    width: 100%;
    height: 100%;
    display: block;
    /* --fit and --focus come from the widget. cover fills the card from a
       picture of any shape; --focus decides which part survives the trim,
       and a single card can override it with its own object-position. */
    object-fit: var(--fit, cover);
    object-position: var(--focus, 50% 20%);
    /* A touch under full size, so the slow drift on hover has somewhere to
       go without ever showing an edge. */
    transform: scale(1.035);
    filter: grayscale(.28) brightness(.94) contrast(1.03);
    transition: filter .7s ease, transform 1.1s var(--st-ease);
}

/* Fitting the whole picture leaves bars; make them part of the card
   rather than a mistake. */
.st-hand [style*="contain"] .st-hand__link,
.st-hand__link img[style*="contain"] { background: var(--st-bg-4); }

.st-hand__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(13, 14, 18, .72));
    opacity: .62;
    transition: opacity .5s ease;
}

/* ---------- Name plate ---------- */

.st-hand__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px clamp(12px, 1.2vw, 18px);
    /* Present but quiet at rest; the open card brings it forward. */
    opacity: .82;
    transform: translateY(6px);
    transition: opacity .45s ease, transform .5s var(--st-ease);
}

.st-hand__name {
    font-family: var(--st-font-display);
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    opacity: .92;
    transform: translateY(5px);
    transition: transform .55s var(--st-ease), opacity .4s ease;
}

.st-hand__role {
    font-size: clamp(10px, .8vw, 12px);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    opacity: .7;
    transform: translateY(7px);
    transition: transform .55s var(--st-ease), opacity .4s ease;
}

/* A hairline that draws itself under the name. */
.st-hand__rule {
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 8px;
    background: var(--st-orange);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--st-ease);
}

/* The sheen. Parked off the left edge until the card opens. */
.st-hand__sheen {
    position: absolute;
    top: -20%;
    left: -60%;
    z-index: 1;
    width: 42%;
    height: 140%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .17), transparent);
    transform: translateX(0) skewX(-18deg);
}

/* ---------- Highlighted card ---------- */

.st-hand__card.is-open { z-index: 4; }

/* Straightens out of the hand and lifts, and its neighbours give it a
   little room. The picture was already whole, so this is a highlight
   rather than a reveal. */
.st-hand__card.is-open .st-hand__link {
    transform: rotate(0deg) translateY(calc(var(--y, 0px) - 20px)) scale(1.045);
    border-color: rgba(var(--st-orange-rgb), .55);
    box-shadow: 0 36px 72px -24px rgba(var(--st-orange-rgb), .5);
}

.st-hand__card.is-open .st-hand__link img {
    filter: grayscale(0) brightness(1.04) contrast(1.02);
    /* Drifts up as it grows, so the eye travels to the face rather than
       the picture simply getting bigger. */
    transform: scale(1.1) translateY(-1.6%);
}

.st-hand__card.is-open .st-hand__link::after { opacity: .42; }

.st-hand__card.is-open .st-hand__caption { opacity: 1; transform: translateY(0); }

/* The name arrives first and the role follows it — two beats rather than
   one block of text appearing. */
.st-hand__card.is-open .st-hand__name { transform: translateY(0); opacity: 1; }
.st-hand__card.is-open .st-hand__role { transform: translateY(0); opacity: 1; transition-delay: .09s; }
.st-hand__card.is-open .st-hand__rule { transform: scaleX(1); }

/* A single pass of light across the card as it opens. */
.st-hand__card.is-open .st-hand__sheen {
    opacity: 1;
    transform: translateX(190%) skewX(-18deg);
    transition: transform 1.05s var(--st-ease), opacity .3s ease;
}

/* Everything that is not the highlighted card steps back. */
.st-hand__row.has-open .st-hand__card:not(.is-open) {
    filter: brightness(.74);
    opacity: .84;
}

.st-hand__link:focus-visible { outline: 2px solid var(--st-orange); outline-offset: 4px; }

/* ==========================================================================
   STYLE 2 — SLIDER

   The same cards on a rail. Scroll-snap does the moving, so a drag, a
   trackpad swipe, the arrows and the dots all end up in the same place,
   and it still works with JavaScript off.
   ========================================================================== */

.st-hand--slider { --h: clamp(300px, 34vw, 440px); }

.st-hand--slider .st-hand__stage { padding: 0 clamp(16px, 5vw, 76px); }

.st-hand--slider .st-hand__row {
    justify-content: flex-start;
    gap: clamp(14px, 1.6vw, 26px);
    padding: 10px 2px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.st-hand--slider .st-hand__row::-webkit-scrollbar { display: none; }

.st-hand--slider .st-hand__card {
    margin-inline-start: 0;
    /* start, not center: at rest the first card sits at the left edge, which
       is where the eye starts reading. Centre-snap leaves card one half out
       of frame and the second one looking like the beginning. */
    scroll-snap-align: start;
}

/* The fan's tilt belongs to the fan. On a rail the cards sit square. */
.st-hand--slider .st-hand__link { transform: none; }

.st-hand--slider .st-hand__card.is-open .st-hand__link {
    transform: translateY(-10px) scale(1.03);
}

/* ---------- Arrows ---------- */

.st-hand__nav {
    position: absolute;
    top: calc(50% - 14px);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    font-size: 15px;
    color: var(--st-heading);
    /* One step lighter than the section it sits on in either palette, so
       the control reads as a control rather than a dent in the background. */
    background: var(--st-bg-3);
    border: 1px solid var(--st-border-strong);
    border-radius: 50%;
    box-shadow: var(--st-shadow-sm);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, opacity .3s ease;
}

.st-hand__nav--prev { left: clamp(2px, 1vw, 18px); }
.st-hand__nav--next { right: clamp(2px, 1vw, 18px); }

.st-hand__nav:hover,
.st-hand__nav:focus-visible {
    color: #fff;
    background: var(--st-orange);
    border-color: var(--st-orange);
}

.st-hand__nav:hover > i,
.st-hand__nav:focus-visible > i { color: #fff; }

/* At either end there is nowhere to go; say so rather than doing nothing. */
.st-hand__nav[disabled] { opacity: .3; cursor: default; }
.st-hand__nav[disabled]:hover {
    color: var(--st-heading);
    background: var(--st-bg-3);
    border-color: var(--st-border-strong);
}

/* ---------- Dots ---------- */

.st-hand__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 22px;
}

.st-hand__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: var(--st-border-strong);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: width .35s var(--st-ease), background-color .35s ease;
}

.st-hand__dot.is-active { width: 26px; background: var(--st-orange); border-radius: 999px; }
.st-hand__dot:focus-visible { outline: 2px solid var(--st-orange); outline-offset: 3px; }

/* ---------- Light theme ---------- */

[data-theme="light"] .st-hand__link {
    border-color: rgba(17, 17, 17, .12);
    box-shadow: 0 22px 46px -26px rgba(17, 24, 39, .42);
}

[data-theme="light"] .st-hand__link img { filter: grayscale(.45) brightness(1.02); }

[data-theme="light"] .st-hand__link::after {
    background: linear-gradient(180deg, transparent 55%, rgba(17, 17, 17, .3));
    opacity: .55;
}

[data-theme="light"] .st-hand__spot {
    background: radial-gradient(circle, rgba(var(--st-orange-rgb), .3), transparent 60%);
}

[data-theme="light"] .st-hand__card.is-open .st-hand__link img { filter: grayscale(0) brightness(1); }

/* ---------- Narrow screens ----------
   Below the point where six cards can share a row, the hand becomes a
   swipeable rail. Same cards, same markup — only the container changes. */

@media (max-width: 767.98px) {
    .st-hand { padding: 44px 0 52px; }

    .st-hand__row,
    .st-hand--slider .st-hand__row {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding: 6px clamp(16px, 8vw, 40px) 18px;
        scrollbar-width: none;
    }

    .st-hand__row::-webkit-scrollbar { display: none; }

    .st-hand__card {
        --w: 62vw;
        flex-basis: var(--w);
        /* Derived from the chosen shape rather than fixed, so a square or
           landscape card is square or landscape on a phone too. */
        height: calc(62vw / var(--ratio, .75));
        max-height: 460px;
        margin-inline-start: 0;
        scroll-snap-align: center;
    }

    /* Touch has no hover, so the highlight follows whatever is centred in
       the rail (set by JS on scroll). */
    .st-hand__card .st-hand__link { transform: none; }
    .st-hand__card.is-open .st-hand__link { transform: translateY(-8px) scale(1.02); }
    .st-hand__row.has-open .st-hand__card:not(.is-open) { filter: brightness(.7); opacity: .76; }

    /* Arrows are for pointers; a thumb has the rail itself. */
    .st-hand__nav { display: none; }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .st-hand { --overlap: clamp(16px, 2.6vw, 34px); }
}

@media (prefers-reduced-motion: reduce) {
    .st-hand__card,
    .st-hand__link,
    .st-hand__caption,
    .st-hand__link img { transition-duration: .01ms; }

    .st-hand--slider .st-hand__row { scroll-behavior: auto; }
}



/* A pointer drag on the slider must not leave text selected behind it. */
.st-hand__row.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.st-hand__row.is-dragging img { pointer-events: none; }
.st-hand--slider .st-hand__row:focus-visible { outline: 2px solid var(--st-orange); outline-offset: 6px; border-radius: 18px; }

/* ==========================================================================
   OPEN ROLES — THE APPLICATION WINDOW

   A role carries its own dates, so the list has to show three states at a
   glance: taking applications, closing shortly, and shut. Shut roles stay
   on the page rather than vanishing — someone who followed a link to a
   role deserves to be told what happened to it, not given a 404.
   ========================================================================== */

.st-role__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 999px;
}

.st-role__status i { font-size: 11px; }

/* Open, with time to spare. */
.st-role__status--open {
    color: var(--st-success-ink);
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .3);
}

/* A week or less — the one that should catch the eye. */
.st-role__status--urgent {
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .13);
    border-color: rgba(var(--st-orange-rgb), .38);
}

.st-role__status--soon {
    color: var(--st-text-strong);
    background: var(--st-surface-2);
    border-color: var(--st-border-strong);
}

.st-role__status--closed {
    color: var(--st-text);
    background: var(--st-surface-2);
    border-color: var(--st-border-strong);
}

/* ---------- A role that is no longer taking applications ----------

   Dimmed, not hidden, and only the parts that imply "you can have this"
   are dimmed — the title stays legible so the row is still readable. */

.st-role.is-closed .st-role__title strong,
.st-role.is-closed .st-role__meta > span:not(.st-role__status) { opacity: .62; }

.st-role.is-closed summary::before { display: none; }

.st-role.is-closed .st-role__title strong::after {
    content: "";
    display: inline-block;
    width: 100%;
    max-width: 0;
    height: 1px;
    margin-left: 8px;
    vertical-align: middle;
    background: currentColor;
    opacity: .4;
}

/* The button keeps its shape so the row does not jump when a deadline
   passes; it just stops looking like an invitation. */
.st-btn.is-closed {
    color: var(--st-text);
    background: var(--st-surface-2);
    border-color: var(--st-border-strong);
    box-shadow: none;
    cursor: pointer;
}

.st-btn.is-closed:hover,
.st-btn.is-closed:focus-visible {
    color: var(--st-heading);
    background: var(--st-surface);
    border-color: var(--st-orange);
    box-shadow: none;
    transform: none;
}

.st-btn.is-closed > i { font-size: .85em; opacity: .7; }

.st-role__meta-status { margin-left: auto; }

/* ---------- The dialog ---------- */

.st-modal__panel--sm { max-width: 520px; text-align: center; }

.st-closed__ico {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    font-size: 24px;
    color: var(--st-orange-ink);
    background: rgba(var(--st-orange-rgb), .12);
    border: 1px solid rgba(var(--st-orange-rgb), .3);
    border-radius: 50%;
}

.st-modal--notice .st-modal__title { margin-bottom: 14px; }
.st-modal--notice .st-modal__text { margin-bottom: 18px; }

.st-closed__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 26px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
    color: var(--st-text);
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: 14px;
}

.st-closed__note i { margin-top: 3px; color: var(--st-orange-ink); }

.st-closed__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.st-closed__actions .st-btn { flex: 1 1 auto; justify-content: center; min-width: 190px; }

@media (max-width: 575.98px) {
    .st-modal__panel--sm { text-align: left; }
    .st-closed__ico { margin-left: 0; }
    .st-closed__actions .st-btn { min-width: 100%; }
    .st-role__status { font-size: 11px; padding: 3px 9px; }
}