/**
 * SiteDiv — v2 Enhancement Layer (rebuild)
 * Enqueued after the compiled Tailwind base.
 */

:root {
    --sd-header-h: 80px;
}

/* ═══════════════════════════════════════════════════════════
   CONTAINER WIDTH PARITY
   Bring Tailwind's .max-w-container in line with .fp-container
   so the homepage and the rest of the site have a single, shared
   reading width (1320px). This wins because the file is enqueued
   after the compiled Tailwind base.
   ═══════════════════════════════════════════════════════════ */
.max-w-container {
    max-width: 1320px !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO TRUST-LINE DOTS — show on phone only
   The two green status dots ("Senior practitioners…", "Replies
   within 24h…") are visual noise on desktop where the brand-grey
   pipe separator already does the job. Mobile gets the dots
   because the line wraps and the pipe is hidden.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .sd-hero-trust-dot { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION — branded, accessible, properly spaced
   Wraps any block tagged `.sd-pagination`. The default WP
   `paginate_links()` markup is a flat list of <a> + <span> with
   class `page-numbers` (and `current` on the active page). We
   restyle that markup directly so we don't need to wrap each item.
   ═══════════════════════════════════════════════════════════ */
.sd-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.sd-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 9999px;
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    text-decoration: none;
    line-height: 1;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.sd-pagination a.page-numbers:hover {
    color: #E5383B;
    border-color: #E5383B;
    background: #FFF5F5;
    transform: translateY(-1px);
}
.sd-pagination .page-numbers.current {
    color: #FFFFFF;
    background: #0F1115;
    border-color: #0F1115;
}
.sd-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: #94A3B8;
    min-width: auto;
    padding: 0 6px;
}
.sd-pagination .page-numbers.prev,
.sd-pagination .page-numbers.next {
    padding: 0 18px;
    color: #0F1115;
    font-weight: 700;
}
.sd-pagination .page-numbers.prev:hover,
.sd-pagination .page-numbers.next:hover {
    color: #E5383B;
}
@media (max-width: 480px) {
    .sd-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; font-size: 0.84rem; }
    .sd-pagination .page-numbers.prev,
    .sd-pagination .page-numbers.next { padding: 0 14px; }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL .fp-* UTILITY CLASSES
   These were originally inline in front-page.php. Moved here so
   every page that uses them (FAQ template-part, team page,
   privacy/terms, service detail page) renders correctly with a
   constrained 1320px container.
   ═══════════════════════════════════════════════════════════ */
.fp-container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.fp-section { padding: 88px 0; }
@media (min-width: 1024px) { .fp-section { padding: 128px 0; } }

.fp-bg-white { background: #FFFFFF; }
.fp-bg-cream { background: #FAFAF7; }
.fp-bg-gray  { background: #F4F4F1; }
.fp-bg-dark  { background: #0F1115; color: #E2E8F0; }

/* Asterisk watermark — matches the brand asterisk on the logo */
.fp-asterisk-bg { position: relative; overflow: hidden; }
.fp-asterisk-bg::before {
    content: "*";
    position: absolute;
    top: 50%;
    right: -6%;
    transform: translateY(-52%);
    font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(18rem, 42vw, 44rem);
    line-height: 1;
    color: #E5383B;
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.fp-asterisk-bg > * { position: relative; z-index: 1; }
@media (max-width: 768px) {
    .fp-asterisk-bg::before { right: -20%; opacity: 0.05; }
}

/* Numeric section index — small all-caps eyebrow */
.fp-index {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: #64748B;
}
.fp-index-num { color: #E5383B; font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-index-line { width: 36px; height: 1px; background: #CBD5E1; }
.fp-bg-dark .fp-index { color: #94A3B8; }
.fp-bg-dark .fp-index-line { background: rgba(255, 255, 255, 0.18); }

/* Display heading */
.fp-h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
    color: #0F1115;
}
.fp-bg-dark .fp-h2 { color: #FFFFFF; }
.fp-h2 .accent { color: #E5383B; font-style: italic; font-weight: 600; letter-spacing: -0.04em; }

.fp-sub {
    font-size: 1.08rem;
    line-height: 1.65;
    color: #475569;
    max-width: 620px;
}
.fp-bg-dark .fp-sub { color: #94A3B8; }

/* Buttons inside fp-section get consistent sizing */
.fp-section .btn-magnetic {
    padding: 14px 28px;
    border-radius: 9999px;
    font-family: 'Sora', sans-serif;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* Make the whole site default to white */
html, body { background: #ffffff; }

/* ═══════════════════════════════════════════════════════════
   LOADING SPLASH — inline HTML + CSS, fades out on window.load.
   SEO-safe: the actual page content is always in the HTML; the
   splash is purely decorative and set aria-hidden="true".
   ═══════════════════════════════════════════════════════════ */
.sd-splash {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #FAFAF7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.55s;
    pointer-events: auto;
}
.sd-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.sd-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.sd-splash-mark {
    font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 5.6vw, 3.6rem);
    letter-spacing: -0.031em;
    line-height: 1;
    color: #0F1115;
}
.sd-splash-mark .dot-red {
    color: #E5383B;
    font-size: 0.571em;
    vertical-align: 0.536em;
    margin-left: 0.04em;
    font-weight: 900;
    letter-spacing: 0;
    display: inline-block;
    animation: sdSplashDot 1.2s ease-in-out infinite;
}
@keyframes sdSplashPop {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sdSplashDot {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-6px) scale(1.15); }
}
.sd-splash-bar {
    width: 180px;
    height: 2px;
    background: rgba(15,17,21,0.08);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.sd-splash-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: #E5383B;
    animation: sdSplashSlide 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes sdSplashSlide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(350%); }
}

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
* { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; transition: background 0.2s; }
*::-webkit-scrollbar-thumb:hover { background: #E5383B; }
html { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════════════════════
   MAGNETIC BUTTON — water-wave ripple from cursor
   On enter: ripple grows from cursor position
   During move: ripple center tracks cursor
   On leave: ripple collapses at the exit point (same wave motion)
   ═══════════════════════════════════════════════════════════ */
.btn-magnetic {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    outline: none;
    background: transparent !important;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    --ripple-x: 50%;
    --ripple-y: 50%;
    --ripple-size: 0px;
    transition: color 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn-magnetic:focus { outline: none; }
.btn-magnetic:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.btn-magnetic:focus-visible {
    outline: 2px solid #E5383B;
    outline-offset: 3px;
}
/* Base surface (below content + ripple) */
.btn-magnetic::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -2;
    transition: background 0.25s;
}
/* Ripple surface (between base bg and content) */
.btn-magnetic::after {
    content: "";
    position: absolute;
    top: var(--ripple-y);
    left: var(--ripple-x);
    width: var(--ripple-size);
    height: var(--ripple-size);
    border-radius: 50%;
    background: #E5383B;
    transform: translate(-50%, -50%);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    pointer-events: none;
    will-change: width, height;
}
.btn-magnetic.is-rippling {
    --ripple-size: 640px;
}

/* Colour variants (base background + contrast text) */
.btn-mag-ink::before   { background: #0F1115; }
.btn-mag-ink           { color: #FAFAF7; }
.btn-mag-ink:hover     { color: #fff; }

.btn-mag-light         { color: #0F1115; border: 1px solid #E4E1DA; }
.btn-mag-light::before { background: #ffffff; }
.btn-mag-light:hover   { color: #fff; border-color: #E5383B; }

.btn-mag-red::before   { background: #E5383B; }
.btn-mag-red          { color: #fff; }
/* On hover, ripple is a darker burgundy red AND we add a white-glow ring
   so the button stays clearly outlined against light AND dark backgrounds.
   No more merging with the dark footer. */
.btn-mag-red::after    { background: #B12B2D; }
.btn-mag-red:hover     {
    color: #fff;
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.65),
        0 14px 32px -8px rgba(229, 56, 59, 0.55);
}

.btn-mag-ghost         { color: #0F1115; border: 1px solid rgba(15,17,21,0.12); }
.btn-mag-ghost::before { background: transparent; }
.btn-mag-ghost:hover   { color: #fff; border-color: #E5383B; }

/* ═══════════════════════════════════════════════════════════
   FIXED ACTION COLUMN
   ═══════════════════════════════════════════════════════════ */
.sd-fixed-actions {
    position: fixed;
    right: clamp(0.875rem, 2.5vw, 1.75rem);
    bottom: clamp(0.875rem, 2.5vw, 1.75rem);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.sd-fixed-actions > * { pointer-events: auto; }

.sd-scroll-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0F1115;
    color: #FAFAF7;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.92);
    transition: opacity 0.35s, transform 0.35s, background 0.2s;
}
.sd-scroll-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.sd-scroll-top:hover { background: #E5383B; }
.sd-scroll-top:active { transform: scale(0.94); }
.sd-scroll-top .sd-scroll-ring {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
.sd-scroll-top .ring-track    { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 2; }
.sd-scroll-top .ring-progress { fill: none; stroke: #E5383B; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 163.36; stroke-dashoffset: 163.36; transition: stroke-dashoffset 0.1s linear; }
.sd-scroll-top:hover .ring-progress { stroke: #fff; }
.sd-scroll-top .sd-scroll-arrow { position: relative; z-index: 1; width: 18px; height: 18px; transition: transform 0.25s; }
.sd-scroll-top:hover .sd-scroll-arrow { transform: translateY(-3px); }
.sd-scroll-top:active .sd-scroll-arrow { animation: sdArrowLaunch 0.5s; }
@keyframes sdArrowLaunch {
    0%   { transform: translateY(-3px); opacity: 1; }
    45%  { transform: translateY(-30px); opacity: 0; }
    46%  { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.sd-wa-launcher {
    position: relative;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 28px -8px rgba(37,211,102,0.55);
    transition: transform 0.2s, box-shadow 0.2s;
}
.sd-wa-launcher:hover  { transform: scale(1.08); box-shadow: 0 12px 32px -6px rgba(37,211,102,0.7); }
.sd-wa-launcher:active { transform: scale(0.96); }
.sd-wa-launcher svg    { width: 26px; height: 26px; }
.sd-wa-launcher::before {
    content: ""; position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid #25D366;
    opacity: 0.35;
    animation: sdWaPing 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}
@keyframes sdWaPing {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   WHATSAPP CHAT WIDGET
   ═══════════════════════════════════════════════════════════ */
.sd-wa-widget {
    position: fixed;
    right: clamp(0.875rem, 2.5vw, 1.75rem);
    bottom: clamp(5.5rem, 8vw, 7.5rem);
    width: min(360px, calc(100vw - 2rem));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px -16px rgba(15,17,21,0.25);
    overflow: hidden;
    z-index: 70;
    transform-origin: bottom right;
    transform: scale(0.9) translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.sd-wa-widget.is-open { transform: none; opacity: 1; pointer-events: auto; }
.sd-wa-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
    color: #fff;
}
.sd-wa-header-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
    padding: 6px;
}
.sd-wa-header-avatar img { max-width: 100%; max-height: 100%; }
.sd-wa-header-info { flex: 1; min-width: 0; }
.sd-wa-header-name { font-weight: 700; font-size: 0.96rem; line-height: 1.2; }
.sd-wa-header-status { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; opacity: 0.9; margin-top: 2px; }
.sd-wa-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #44ff88; box-shadow: 0 0 6px rgba(68,255,136,0.6); flex-shrink: 0; }
.sd-wa-header-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.sd-wa-header-close:hover { background: rgba(255,255,255,0.3); }
.sd-wa-header-close svg   { width: 14px; height: 14px; }
.sd-wa-body {
    padding: 22px 18px 14px;
    background: #ECE5DD url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.04'/></svg>");
    min-height: 100px;
}
.sd-wa-bubble { background: #fff; border-radius: 12px 12px 12px 2px; padding: 11px 14px; font-size: 0.9rem; line-height: 1.45; color: #0F1115; box-shadow: 0 1px 1px rgba(0,0,0,0.06); max-width: 280px; margin-bottom: 8px; }
.sd-wa-bubble strong { font-weight: 600; }
.sd-wa-bubble-time   { font-size: 0.66rem; color: #94A3B8; text-align: right; margin-top: 4px; }
.sd-wa-form { padding: 12px 14px 16px; background: #F0F0F0; }
.sd-wa-form textarea { width: 100%; border: 1px solid #E4E1DA; border-radius: 22px; padding: 10px 16px; font-size: 0.9rem; font-family: inherit; line-height: 1.45; color: #0F1115; background: #fff; resize: none; min-height: 44px; max-height: 120px; outline: none; transition: border-color 0.2s; }
.sd-wa-form textarea:focus { border-color: #25D366; }
.sd-wa-send { margin-top: 10px; width: 100%; padding: 11px 16px; background: #25D366; color: #fff; border: none; border-radius: 22px; font-weight: 600; font-size: 0.92rem; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s, transform 0.15s; }
.sd-wa-send:hover  { background: #128C7E; }
.sd-wa-send:active { transform: scale(0.98); }
.sd-wa-send svg    { width: 16px; height: 16px; }
.sd-wa-quickbtns   { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sd-wa-quickbtn    { border: 1px solid #DCE3DC; background: #fff; color: #128C7E; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-family: inherit; cursor: pointer; transition: all 0.18s; }
.sd-wa-quickbtn:hover { background: #25D366; color: #fff; border-color: #25D366; }
.sd-wa-overlay { position: fixed; inset: 0; background: rgba(15,17,21,0.35); opacity: 0; pointer-events: none; z-index: 65; transition: opacity 0.25s; backdrop-filter: blur(2px); }
.sd-wa-overlay.is-active { opacity: 1; pointer-events: auto; }

@media (max-width: 480px) {
    .sd-wa-widget { right: 8px; left: 8px; bottom: 80px; width: auto; }
}

/* ═══════════════════════════════════════════════════════════
   HEADER — SIMPLIFIED DROPDOWNS
   Single-column panel, wider gaps, no descriptions (cleaner).
   Keep the icons for scannability.
   ═══════════════════════════════════════════════════════════ */
.sd-nav-dropdown { position: relative; }
.sd-nav-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sd-nav-caret { width: 10px; height: 10px; transition: transform 0.25s; opacity: 0.55; }
.sd-nav-dropdown:hover .sd-nav-caret,
.sd-nav-dropdown:focus-within .sd-nav-caret { transform: rotate(180deg); opacity: 1; }

.sd-dropdown-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 240px;
    padding: 8px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(15,17,21,0.06);
    box-shadow: 0 20px 40px -16px rgba(15,17,21,0.15), 0 2px 6px rgba(15,17,21,0.04);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Disappearance is delayed 220ms so the cursor can cross the gap
       between the menu item and the dropdown without losing focus. */
    transition: opacity 0.22s 0.22s, transform 0.22s 0.22s, visibility 0s linear 0.44s;
    z-index: 60;
}
/* Hit-buffer — invisible padding above the dropdown so the cursor can
   bridge from the trigger into the panel without leaving any hover area. */
.sd-dropdown-panel::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}
.sd-nav-dropdown:hover .sd-dropdown-panel,
.sd-nav-dropdown:focus-within .sd-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}
.sd-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background 0.18s;
    text-decoration: none;
    color: #0F1115;
    font-size: 0.93rem;
    font-weight: 500;
    white-space: nowrap;
}
.sd-dropdown-item:hover { background: #FAFAF7; color: #E5383B; }
.sd-dropdown-item .icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(229,56,59,0.08);
    color: #E5383B;
    transition: background 0.18s, transform 0.18s;
}
.sd-dropdown-item:hover .icon { background: #E5383B; color: #fff; transform: rotate(-8deg); }
.sd-dropdown-item .icon svg { width: 14px; height: 14px; stroke-width: 1.8; }

/* ═══════════════════════════════════════════════════════════
   HERO — ANIMATED MULTI-COLOUR GRADIENT BG
   4 soft radial blobs + slow gradient shift
   ═══════════════════════════════════════════════════════════ */
.sd-hero-gradient {
    position: relative;
    background:
        radial-gradient(1000px 600px at var(--grad-x1, 15%) var(--grad-y1, 20%), rgba(229,56,59,0.14), transparent 60%),
        radial-gradient(800px 700px at var(--grad-x2, 85%) var(--grad-y2, 10%), rgba(251,146,60,0.12), transparent 55%),
        radial-gradient(900px 500px at var(--grad-x3, 70%) var(--grad-y3, 90%), rgba(14,165,233,0.10), transparent 55%),
        radial-gradient(700px 500px at var(--grad-x4, 20%) var(--grad-y4, 80%), rgba(168,85,247,0.07), transparent 50%),
        #ffffff;
    animation: sdHeroGrad 22s ease-in-out infinite alternate;
    overflow: hidden;
}
@keyframes sdHeroGrad {
    0%   { --grad-x1: 15%; --grad-y1: 20%; --grad-x2: 85%; --grad-y2: 10%; --grad-x3: 70%; --grad-y3: 90%; --grad-x4: 20%; --grad-y4: 80%; }
    50%  { --grad-x1: 35%; --grad-y1: 35%; --grad-x2: 65%; --grad-y2: 25%; --grad-x3: 50%; --grad-y3: 75%; --grad-x4: 40%; --grad-y4: 60%; }
    100% { --grad-x1: 25%; --grad-y1: 10%; --grad-x2: 75%; --grad-y2: 30%; --grad-x3: 80%; --grad-y3: 70%; --grad-x4: 10%; --grad-y4: 90%; }
}
/* Fallback for browsers that can't animate custom properties */
@supports not (animation-name: sdHeroGrad) {
    .sd-hero-gradient { animation: none; }
}

/* Hero grid overlay (subtle) */
.sd-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(15,17,21,0.022) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,17,21,0.022) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 60% at center, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 40%, transparent 100%);
}

/* Hero word stagger */
[data-word-anim] .sd-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    animation: sdWordUp 0.65s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
@keyframes sdWordUp { to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════
   PARALLAX
   ═══════════════════════════════════════════════════════════ */
.sd-parallax { will-change: transform; }

/* ═══════════════════════════════════════════════════════════
   HOVER UTILITIES
   ═══════════════════════════════════════════════════════════ */
.sd-hover-zoom       { overflow: hidden; }
.sd-hover-zoom img   { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.sd-hover-zoom:hover img { transform: scale(1.06); }

.sd-link-arrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; color: #0F1115;
    border-bottom: 1.5px solid #0F1115;
    padding-bottom: 2px;
    transition: color 0.25s, border-color 0.25s, gap 0.25s;
    background: transparent;
    border-top: 0; border-left: 0; border-right: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
}
.sd-link-arrow:hover { color: #E5383B; border-color: #E5383B; gap: 10px; }

.sd-card-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 40px -20px rgba(15,17,21,0.18);
}

/* ═══════════════════════════════════════════════════════════
   WORK FILTERS
   ═══════════════════════════════════════════════════════════ */
.sd-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.sd-filter-btn { padding: 10px 18px; border-radius: 999px; border: 1px solid #E4E1DA; background: #fff; color: #0F1115; font-size: 0.88rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.sd-filter-btn:hover { border-color: #0F1115; }
.sd-filter-btn.is-active { background: #0F1115; color: #FAFAF7; border-color: #0F1115; }
.sd-filter-btn .count { margin-left: 6px; font-size: 0.78rem; opacity: 0.6; }
.sd-subfilter-bar { display: none; gap: 8px; margin-bottom: 28px; padding-top: 4px; flex-wrap: wrap; align-items: center; }
.sd-subfilter-bar.is-visible { display: flex; }
.sd-subfilter-bar .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: #64748B; margin-right: 6px; }
.sd-subfilter-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: #5A5F6A; font-size: 0.82rem; cursor: pointer; font-family: inherit; transition: all 0.2s; }
.sd-subfilter-btn:hover { color: #0F1115; }
.sd-subfilter-btn.is-active { color: #E5383B; background: rgba(229,56,59,0.08); }
.sd-work-card { transition: opacity 0.4s, transform 0.4s; }
.sd-work-card.is-hidden { opacity: 0; transform: scale(0.96); pointer-events: none; position: absolute; visibility: hidden; }

/* ═══════════════════════════════════════════════════════════
   SERVICE ICONS
   ═══════════════════════════════════════════════════════════ */
.sd-service-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(229,56,59,0.06);
    color: #E5383B;
    transition: background 0.25s, color 0.25s, transform 0.25s;
}
.sd-service-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.group:hover .sd-service-icon { background: #E5383B; color: #fff; transform: rotate(-8deg) scale(1.08); }

/* ═══════════════════════════════════════════════════════════
   IMAGE FRAMES
   ═══════════════════════════════════════════════════════════ */
.sd-image-frame {
    position: relative; overflow: hidden;
    border-radius: 16px;
    background: radial-gradient(circle at 30% 20%, rgba(229,56,59,0.08), transparent 60%),
                linear-gradient(135deg, #FAFAF7 0%, #EEEAE1 100%);
    border: 1px solid rgba(15,17,21,0.06);
    display: flex; align-items: center; justify-content: center;
}
.sd-image-frame:not(:has(img))::before {
    content: "*";
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 900; font-size: 12rem;
    color: rgba(229,56,59,0.14);
    line-height: 1;
    user-select: none;
}
.sd-image-frame > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════
   BACKGROUND VARIANTS (now mostly white)
   ═══════════════════════════════════════════════════════════ */
.sd-bg-white    { background: #ffffff; }
.sd-bg-warm     { background: #FAFAF7; }
.sd-bg-soft-red { background: linear-gradient(180deg, #ffffff 0%, #FDF4F4 100%); }
.sd-bg-dotted   { background-color: #ffffff; background-image: radial-gradient(rgba(15,17,21,0.05) 1px, transparent 1px); background-size: 28px 28px; }
.sd-bg-ink {
    background: radial-gradient(800px 400px at 0% 0%, rgba(229,56,59,0.18), transparent 60%),
                linear-gradient(135deg, #0F1115 0%, #1E232A 100%);
}

/* Section divider — visual separator (not a full bg change) */
.sd-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(15,17,21,0.1) 30%, rgba(15,17,21,0.1) 70%, transparent 100%);
    margin: 0 auto;
    max-width: 800px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .sd-wa-launcher::before { animation: none !important; }
    [data-word-anim] .sd-word { opacity: 1; transform: none; }
    .sd-hero-gradient { animation: none; }
    .sd-marquee-track { animation: none !important; }
    .sd-hero-grad-anim { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   HERO V3 — Large drifting colour-blob aurora on white bg
   Inspired by abstract "mesh gradient" hero references.
   Three big soft blobs (purple, blue, magenta) move slowly
   across the canvas, heavily blurred so they read as light.
   ═══════════════════════════════════════════════════════════ */
.sd-hero-v3 {
    position: relative;
    background: #ffffff;
    isolation: isolate;
}

/* Blob layer — three large absolute-positioned circles
   with heavy blur, drifting on independent cycles */
.sd-hero-grad-anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.sd-hero-grad-anim::before,
.sd-hero-grad-anim::after,
.sd-hero-grad-anim > .sd-blob-3 {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    will-change: transform;
}

/* Purple blob — drifts slowly diagonally */
.sd-hero-grad-anim::before {
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(149, 76, 233, 0.65) 0%, rgba(149, 76, 233, 0.40) 35%, rgba(149, 76, 233, 0.15) 60%, transparent 75%);
    top: 8%;
    right: -10%;
    animation: sdBlobA 22s ease-in-out infinite alternate;
}

/* Bright blue blob — drifts on a longer, looser cycle */
.sd-hero-grad-anim::after {
    width: 52%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(45, 130, 255, 0.62) 0%, rgba(45, 130, 255, 0.35) 35%, rgba(45, 130, 255, 0.12) 60%, transparent 75%);
    bottom: -12%;
    right: 22%;
    animation: sdBlobB 28s ease-in-out infinite alternate;
}

/* Magenta/pink blob */
.sd-blob-3 {
    width: 46%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(232, 65, 165, 0.55) 0%, rgba(232, 65, 165, 0.32) 35%, rgba(232, 65, 165, 0.10) 60%, transparent 75%);
    top: 32%;
    right: 28%;
    animation: sdBlobC 26s ease-in-out infinite alternate;
}

@keyframes sdBlobA {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-8%, 12%) scale(1.08); }
    100% { transform: translate(-15%, -5%) scale(0.95); }
}
@keyframes sdBlobB {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(10%, -15%) scale(1.1); }
    100% { transform: translate(-5%, 5%) scale(0.92); }
}
@keyframes sdBlobC {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-12%, -8%) scale(1.05); }
    100% { transform: translate(8%, 10%) scale(1.12); }
}

/* Hero content sits above the blob layer */
.sd-hero-v3 > .max-w-container,
.sd-hero-v3 > div:not(.sd-hero-grad-anim):not(.sd-grain) { position: relative; z-index: 2; }

/* Grain texture stays on top of blobs but below content for the
   "atmospheric light" feeling */
.sd-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: multiply;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='grainy'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0.5 0'/></filter><rect width='400' height='400' filter='url(%23grainy)' opacity='0.55'/></svg>");
}

/* Mobile: keep blobs but reduce intensity to save GPU */
@media (max-width: 640px) {
    .sd-hero-grad-anim::before,
    .sd-hero-grad-anim::after,
    .sd-hero-grad-anim > .sd-blob-3 {
        filter: blur(60px);
        opacity: 0.7;
    }
}

/* Reduced motion: stop the drift but keep the colour wash */
@media (prefers-reduced-motion: reduce) {
    .sd-hero-grad-anim::before,
    .sd-hero-grad-anim::after,
    .sd-hero-grad-anim > .sd-blob-3 {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   HEADER REFINEMENTS — scroll-state shadow + nav link polish
   ═══════════════════════════════════════════════════════════ */
.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 6px 24px -10px rgba(15, 17, 21, 0.08);
    border-bottom-color: rgba(15, 17, 21, 0.06) !important;
}

/* Nav links: tighter horizontal rhythm, refined active/hover states */
.nav-desktop > a,
.nav-desktop .sd-nav-dropdown > a {
    position: relative;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #475569;
    transition: color 0.2s, background 0.2s;
}
.nav-desktop > a:hover,
.nav-desktop .sd-nav-dropdown:hover > a,
.nav-desktop .sd-nav-dropdown:focus-within > a { color: #0F1115; }

/* Active page indicator — small underline dot */
.nav-desktop > a.is-active,
.nav-desktop .sd-nav-dropdown > a.is-active {
    color: #0F1115;
    font-weight: 600;
}
.nav-desktop > a.is-active::after,
.nav-desktop .sd-nav-dropdown > a.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #E5383B;
}

/* Header logo: tighter vertical centering + slight scale on hover */
.sd-header-logo {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-header-logo:hover { transform: scale(1.02); }

/* Header CTA — ensure it stays visually balanced with the smaller logo */
.site-header .btn-magnetic {
    font-size: 0.86rem !important;
    padding: 9px 18px !important;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE CARDS — premium icon-card grid
   ═══════════════════════════════════════════════════════════ */
.sd-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: 18px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s;
    text-decoration: none;
    overflow: hidden;
}
.sd-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 56, 59, 0.25);
    box-shadow: 0 24px 50px -20px rgba(15, 17, 21, 0.15);
}

/* Featured (dark) variant */
.sd-service-card-featured {
    background: linear-gradient(135deg, #1A1F2A 0%, #0F1115 100%);
    border-color: transparent;
    color: #fff;
    padding: 36px 32px;
    box-shadow: 0 30px 60px -25px rgba(15, 17, 21, 0.4);
}
.sd-service-card-featured:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 36px 70px -20px rgba(15, 17, 21, 0.5),
                0 0 0 1px rgba(229, 56, 59, 0.3);
}
.sd-service-card-featured::before {
    content: "";
    position: absolute;
    top: -40%; right: -20%;
    width: 70%; height: 80%;
    background: radial-gradient(circle, rgba(229, 56, 59, 0.18) 0%, transparent 65%);
    pointer-events: none;
    border-radius: 50%;
    filter: blur(40px);
}

.sd-service-icon-md {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(229, 56, 59, 0.08);
    color: #E5383B;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s, background 0.3s;
}
.sd-service-icon-md svg { width: 24px; height: 24px; stroke-width: 1.6; }
.group:hover .sd-service-icon-md { background: #E5383B; color: #fff; transform: rotate(-6deg) scale(1.05); }

.sd-service-icon-lg {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: rgba(229, 56, 59, 0.18);
    color: #FF8A8C;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s;
}
.sd-service-icon-lg svg { width: 30px; height: 30px; stroke-width: 1.6; }
.group:hover .sd-service-icon-lg { transform: rotate(-6deg) scale(1.05); }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO CARDS — metric badge + hover overlay
   ═══════════════════════════════════════════════════════════ */
.sd-portfolio-card { display: block; text-decoration: none; }
.sd-portfolio-img {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 18px;
    overflow: hidden;
    background: #f1f5f9;
    box-shadow: 0 18px 40px -22px rgba(15, 17, 21, 0.18);
    transition: box-shadow 0.4s, transform 0.4s;
}
.sd-portfolio-card:hover .sd-portfolio-img {
    transform: translateY(-3px);
    box-shadow: 0 28px 60px -22px rgba(15, 17, 21, 0.28);
}
.sd-portfolio-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-portfolio-card:hover .sd-portfolio-img img { transform: scale(1.06); }

.sd-portfolio-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,17,21,0) 50%, rgba(15,17,21,0.55) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.35s;
}
.sd-portfolio-card:hover .sd-portfolio-overlay { opacity: 1; }
.sd-portfolio-overlay > span {
    transform: translateY(8px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.35);
}
.sd-portfolio-card:hover .sd-portfolio-overlay > span { transform: translateY(0); }

/* Floating metric badge */
.sd-portfolio-metric {
    position: absolute;
    top: 16px; left: 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 24px -10px rgba(15, 17, 21, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   PROCESS TIMELINE — horizontal step layout
   ═══════════════════════════════════════════════════════════ */
.sd-process-timeline { position: relative; }

.sd-process-line {
    position: absolute;
    top: 56px;     /* aligns with vertical centre of icon circle */
    left: 8%; right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(229, 56, 59, 0.25) 12%, rgba(229, 56, 59, 0.25) 88%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 1023px) { .sd-process-line { display: none; } }

.sd-process-step {
    position: relative;
    background: #fff;
    padding: 28px 24px;
    border-radius: 16px;
    border: 1px solid rgba(15, 17, 21, 0.06);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s,
                border-color 0.25s;
    z-index: 1;
}
.sd-process-step:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 56, 59, 0.25);
    box-shadow: 0 22px 44px -22px rgba(15, 17, 21, 0.18);
}

.sd-process-num {
    position: absolute;
    top: 18px; right: 18px;
    color: rgba(15, 17, 21, 0.08);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.6rem;
    letter-spacing: -0.04em;
    line-height: 1;
}
.sd-process-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(229, 56, 59, 0.08);
    color: #E5383B;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    transition: transform 0.3s, background 0.3s;
}
.sd-process-icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.sd-process-step:hover .sd-process-icon {
    background: #E5383B;
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}

/* ═══════════════════════════════════════════════════════════
   FINAL CTA — high-contrast dark band
   ═══════════════════════════════════════════════════════════ */
.sd-final-cta {
    position: relative;
    background:
        radial-gradient(800px 500px at 18% 30%, rgba(229, 56, 59, 0.22), transparent 60%),
        radial-gradient(700px 500px at 82% 70%, rgba(168, 85, 247, 0.18), transparent 65%),
        linear-gradient(135deg, #0F1115 0%, #1A1F2A 100%);
    overflow: hidden;
}
.sd-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 0.4 0'/></filter><rect width='400' height='400' filter='url(%23g)' opacity='0.5'/></svg>");
    opacity: 0.05;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.sd-final-cta::after {
    content: "*";
    position: absolute;
    top: -3rem;
    right: -2rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: rgba(229, 56, 59, 0.06);
    font-size: clamp(14rem, 22vw, 28rem);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}


.sd-hero-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 620px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 70px -25px rgba(15,17,21,0.25);
    background: #1a1a1a;
}
.sd-hero-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-hero-card:hover .sd-hero-card-img { transform: scale(1.03); }

/* Dark gradient overlay for text legibility — top-left + bottom areas */
.sd-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(15,17,21,0.65) 0%, rgba(15,17,21,0.15) 45%, transparent 65%),
        linear-gradient(0deg,  rgba(15,17,21,0.55) 0%, transparent 35%);
    z-index: 1;
    pointer-events: none;
}

.sd-hero-card-overlay-tl {
    position: absolute;
    top: clamp(1.5rem, 4vw, 3rem);
    left: clamp(1.5rem, 4vw, 3rem);
    right: clamp(1.5rem, 4vw, 3rem);
    z-index: 2;
    max-width: 720px;
}

.sd-hero-card-overlay-bl {
    position: absolute;
    left: clamp(1.5rem, 4vw, 3rem);
    bottom: clamp(1.5rem, 4vw, 2.5rem);
    z-index: 2;
    right: clamp(1.5rem, 4vw, 3rem);
    max-width: 600px;
}

/* Floating product/case card bottom-right */
.sd-hero-card-product {
    position: absolute;
    bottom: clamp(1.5rem, 4vw, 2.5rem);
    right: clamp(1.5rem, 4vw, 3rem);
    z-index: 3;
    background: rgba(15,17,21,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: clamp(260px, 28vw, 320px);
    box-shadow: 0 14px 30px -8px rgba(0,0,0,0.3);
}
.sd-hero-card-product-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: #2a2a2a;
}
.sd-hero-card-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile adjustments — stack copy below image card */
@media (max-width: 767px) {
    .sd-hero-card { aspect-ratio: 4/5; max-height: none; }
    .sd-hero-card-overlay-tl { top: 1.5rem; left: 1.5rem; right: 1.5rem; }
    .sd-hero-card-overlay-bl { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
    .sd-hero-card-product { display: none; }   /* hide on mobile to keep card clean */
}

/* ═══════════════════════════════════════════════════════════
   LEGACY: old tile composition (kept for backwards compat,
   no longer used on homepage but available as a utility class)
   ═══════════════════════════════════════════════════════════ */

.sd-hero-tiles {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    aspect-ratio: 1 / 1.1;
}

/* Main photo — single element clipped by an SVG mask URL.
   Mask path is authored in the element's native pixel space (620×682 reference)
   with a 16px gap between card edges and notch edges, and 24px concave inner corners.
   preserveAspectRatio='none' stretches the mask uniformly since the element aspect
   matches the viewBox aspect. */
.sd-tile-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(15, 17, 21, 0.18);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 682' preserveAspectRatio='none'><path fill='black' d='M 362.4 0 L 592 0 A 28 28 0 0 1 620 28 L 620 437.4 A 24 24 0 0 1 596 461.4 L 355.2 461.4 A 24 24 0 0 0 331.2 485.4 L 331.2 658 A 24 24 0 0 1 307.2 682 L 28 682 A 28 28 0 0 1 0 654 L 0 258.24 A 24 24 0 0 1 24 234.24 L 314.4 234.24 A 24 24 0 0 0 338.4 210.24 L 338.4 24 A 24 24 0 0 1 362.4 0 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 682' preserveAspectRatio='none'><path fill='black' d='M 362.4 0 L 592 0 A 28 28 0 0 1 620 28 L 620 437.4 A 24 24 0 0 1 596 461.4 L 355.2 461.4 A 24 24 0 0 0 331.2 485.4 L 331.2 658 A 24 24 0 0 1 307.2 682 L 28 682 A 28 28 0 0 1 0 654 L 0 258.24 A 24 24 0 0 1 24 234.24 L 314.4 234.24 A 24 24 0 0 0 338.4 210.24 L 338.4 24 A 24 24 0 0 1 362.4 0 Z'/></svg>");
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
.sd-tile-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-tile-photo:hover img { transform: scale(1.04); }

/* Stat cards — simple rounded rectangles positioned in the notches */
.sd-tile-stat-light,
.sd-tile-stat-dark {
    position: absolute;
    z-index: 2;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 24px 22px;
}

.sd-tile-stat-light {
    top: 0; left: 0;
    width: 52%;
    height: 32%;
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 18px 40px -18px rgba(15, 17, 21, 0.18);
}

.sd-tile-stat-dark {
    bottom: 0; right: 0;
    width: 44%;
    height: 30%;
    background: #0F1115;
    color: #FAFAF7;
    border-radius: 26px;
    box-shadow: 0 18px 40px -18px rgba(15, 17, 21, 0.35);
}

/* Card content */
.sd-tile-number {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    letter-spacing: -0.045em;
    line-height: 1;
    font-weight: 800;
    color: #0F1115;
    margin-bottom: 10px;
}
.sd-tile-stat-dark .sd-tile-number { color: #FAFAF7; }
.sd-tile-label {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #64748B;
}
.sd-tile-stat-dark .sd-tile-label { color: rgba(250, 250, 247, 0.65); }
.sd-tile-bar {
    margin-top: 12px;
    height: 3px;
    background: rgba(15, 17, 21, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.sd-tile-bar span {
    display: block; height: 100%;
    background: #E5383B;
    animation: sdStatFill 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: left;
    transform: scaleX(0);
}
@keyframes sdStatFill { to { transform: scaleX(1); } }

/* Mobile — stack */
@media (max-width: 640px) {
    .sd-hero-tiles { aspect-ratio: auto; }
    .sd-tile-photo {
        position: relative;
        aspect-ratio: 4/3;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .sd-tile-stat-light,
    .sd-tile-stat-dark {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 100%;
        height: auto;
        border-radius: 22px;
        margin-top: 12px;
    }
}

/* Pulse keyframe for the "Now booking" dot (fallback if Tailwind animate-pulse not loaded) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ═══════════════════════════════════════════════════════════
   MARQUEE — black horizontal scrolling capabilities bar
   ═══════════════════════════════════════════════════════════ */
.sd-marquee {
    background: #0F1115;
    color: #FAFAF7;
    overflow: hidden;
    padding: 18px 0;
    position: relative;
    user-select: none;
}
.sd-marquee::before, .sd-marquee::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.sd-marquee::before { left: 0;  background: linear-gradient(90deg, #0F1115 0%, transparent 100%); }
.sd-marquee::after  { right: 0; background: linear-gradient(270deg, #0F1115 0%, transparent 100%); }
.sd-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    white-space: nowrap;
    animation: sdMarquee 40s linear infinite;
    will-change: transform;
}
@keyframes sdMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.sd-marquee-item {
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.25s;
}
.sd-marquee-item:hover { color: #E5383B; }
.sd-marquee-dot {
    color: #E5383B;
    font-size: 1rem;
    opacity: 0.8;
}

/* Pause on hover for accessibility */
.sd-marquee:hover .sd-marquee-track { animation-play-state: paused; }


/* ═══════════════════════════════════════════════════════════════════════
   v2.1 — SOFT AURORA BACKGROUND SYSTEM
   The same blue→lavender→pink wash as the homepage hero, dialled WAY back
   so it works as a section/page bg without overpowering content.

   Use as:
     <section class="sd-bg-softgrad">…</section>
   Adds soft fixed-position blobs behind the section. The section itself
   keeps `position: relative` + `overflow: hidden` so blobs are clipped.

   Variants:
     .sd-bg-softgrad-sky    — cooler / bluer (about-page-friendly)
     .sd-bg-softgrad-warm   — pinker (pricing/contact-page-friendly)
   ═══════════════════════════════════════════════════════════════════════ */

.sd-bg-softgrad,
.sd-bg-softgrad-sky,
.sd-bg-softgrad-warm {
    position: relative;
    background-color: #ffffff;
    isolation: isolate;
    overflow: hidden;
}

/* The default — balanced blue/lavender/pink, suitable for any section */
.sd-bg-softgrad::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 45% at 12% 18%, rgba(140, 180, 255, 0.32), transparent 60%),
        radial-gradient(ellipse 55% 50% at 92% 8%,  rgba(195, 165, 245, 0.28), transparent 60%),
        radial-gradient(ellipse 70% 55% at 80% 92%, rgba(245, 180, 220, 0.30), transparent 65%),
        radial-gradient(ellipse 45% 40% at 28% 88%, rgba(165, 175, 240, 0.22), transparent 60%);
    filter: blur(40px);
}

/* Sky variant — bluer, calmer */
.sd-bg-softgrad-sky::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 65% 50% at 10% 15%, rgba(125, 175, 255, 0.32), transparent 60%),
        radial-gradient(ellipse 50% 45% at 88% 22%, rgba(170, 200, 250, 0.24), transparent 60%),
        radial-gradient(ellipse 60% 50% at 75% 88%, rgba(195, 180, 240, 0.22), transparent 65%);
    filter: blur(45px);
}

/* Warm variant — pinker, friendlier */
.sd-bg-softgrad-warm::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 18% 18%, rgba(205, 195, 250, 0.28), transparent 60%),
        radial-gradient(ellipse 55% 45% at 85% 12%, rgba(245, 195, 225, 0.30), transparent 60%),
        radial-gradient(ellipse 65% 55% at 78% 88%, rgba(250, 200, 215, 0.32), transparent 65%);
    filter: blur(40px);
}

/* Make sure section content sits above the blob layer */
.sd-bg-softgrad > *,
.sd-bg-softgrad-sky > *,
.sd-bg-softgrad-warm > * {
    position: relative;
    z-index: 1;
}

/* Slow gentle drift on the bg — opt-in via wrapper class */
.sd-bg-softgrad-anim::before {
    animation: sdSoftDrift 32s ease-in-out infinite alternate;
}
@keyframes sdSoftDrift {
    0%   { transform: translate(0, 0)        scale(1); }
    50%  { transform: translate(-3%, 2%)     scale(1.04); }
    100% { transform: translate(2%, -3%)     scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
    .sd-bg-softgrad-anim::before { animation: none !important; }
}

/* Mobile: thicker blur tax is GPU-heavy — soften it */
@media (max-width: 640px) {
    .sd-bg-softgrad::before,
    .sd-bg-softgrad-sky::before,
    .sd-bg-softgrad-warm::before {
        filter: blur(50px);
        opacity: 0.92;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.1 — HERO TILE MOBILE / TABLET FIX
   The legacy sd-hero-tiles SVG mask only stacked properly below 640px,
   leaving the tablet zone (641–1023px) broken. Below: the photo stays
   responsive and the tiles re-flow into a clean stacked layout.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet zone — drop the SVG mask, keep tiles in a flexible grid */
@media (max-width: 1023px) {
    .sd-hero-tiles {
        aspect-ratio: auto;
        max-width: 100%;
        margin: 32px auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 14px;
    }
    .sd-tile-photo {
        position: relative;
        inset: auto;
        grid-column: 1 / -1;
        grid-row: 1;
        aspect-ratio: 16/10;
        border-radius: 24px;
        -webkit-mask-image: none;
                mask-image: none;
        box-shadow: 0 24px 50px -22px rgba(15, 17, 21, 0.22);
    }
    .sd-tile-stat-light,
    .sd-tile-stat-dark {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 100%;
        height: auto;
        min-height: 140px;
        border-radius: 22px;
        margin: 0;
        padding: 20px 22px 18px;
    }
    .sd-tile-stat-light { grid-column: 1; grid-row: 2; }
    .sd-tile-stat-dark  { grid-column: 2; grid-row: 2; }
}

/* Phone zone — single column stack */
@media (max-width: 640px) {
    .sd-hero-tiles {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 24px;
    }
    .sd-tile-photo {
        aspect-ratio: 4/3;
        border-radius: 22px;
    }
    .sd-tile-stat-light,
    .sd-tile-stat-dark {
        grid-column: 1;
        min-height: 120px;
        padding: 18px 20px 16px;
    }
    .sd-tile-stat-light { grid-row: 2; }
    .sd-tile-stat-dark  { grid-row: 3; }
    .sd-tile-number { font-size: 1.9rem; }
    .sd-tile-label  { font-size: 0.8rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.1 — WORK SHOWCASE: DUAL-GRID (Websites wide / Apps portrait)
   Two distinct visual treatments inside the same filter UI.
   ═══════════════════════════════════════════════════════════════════════ */

/* Wrapper — switches grid layout based on which type tab is active */
.sd-work-showcase { position: relative; }

.sd-work-grid {
    display: grid;
    gap: 28px;
    transition: opacity 0.25s ease;
}

/* Wide grid (websites) — explicit 3-column at desktop, 2 at tablet, 1 on mobile.
   We use auto-fit with a sensible min so 1-2 cards center-align nicely without
   stretching to absurd widths. */
.sd-work-grid[data-grid="websites"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 1024px) {
    .sd-work-grid[data-grid="websites"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
}
@media (max-width: 640px) {
    .sd-work-grid[data-grid="websites"] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Portrait grid (apps) — phone-screen feeling, tighter columns */
.sd-work-grid[data-grid="apps"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
}
@media (max-width: 1024px) {
    .sd-work-grid[data-grid="apps"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .sd-work-grid[data-grid="apps"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
}

/* Mixed grid (All / SEO) — uses the same 3-column layout as websites for consistency */
.sd-work-grid[data-grid="all"],
.sd-work-grid[data-grid="seo"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
@media (max-width: 1024px) {
    .sd-work-grid[data-grid="all"],
    .sd-work-grid[data-grid="seo"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
}
@media (max-width: 640px) {
    .sd-work-grid[data-grid="all"],
    .sd-work-grid[data-grid="seo"] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ── Card base (shared) ── */
/* The card is now a div wrapper containing an inner <a> link + a <details>
   element. The link gets the hover lift; the details panel stays put. */
.sd-showcase-card {
    display: block;
    color: inherit;
    position: relative;
}
.sd-showcase-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-showcase-link:hover { transform: translateY(-6px); }

/* ── WEBSITE CARD — laptop-mockup framing ── */
.sd-showcase-website .sd-showcase-frame {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f3f8 0%, #e6e9f1 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 24px 50px -20px rgba(15, 17, 21, 0.22),
        0 8px 18px -10px rgba(15, 17, 21, 0.10);
    transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-showcase-website .sd-showcase-link:hover .sd-showcase-frame {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 38px 70px -22px rgba(15, 17, 21, 0.32),
        0 12px 24px -12px rgba(15, 17, 21, 0.14);
}

/* Browser-bar chrome (small status dots) */
.sd-showcase-website .sd-showcase-frame::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 24px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(15, 17, 21, 0.06);
    z-index: 2;
}
.sd-showcase-website .sd-showcase-frame::after {
    content: "";
    position: absolute;
    top: 9px; left: 14px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow:
        12px 0 0 #febc2e,
        24px 0 0 #28c840;
    z-index: 3;
}
.sd-showcase-website .sd-showcase-img {
    position: absolute;
    inset: 24px 0 0 0;
    width: 100%;
    height: calc(100% - 24px);
    object-fit: cover;
    object-position: top center;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-showcase-website .sd-showcase-link:hover .sd-showcase-img { transform: translateY(-8%); }

/* ── APP CARD — phone-mockup framing ── */
.sd-showcase-app .sd-showcase-frame {
    position: relative;
    aspect-ratio: 9/18;
    max-width: 280px;
    margin: 0 auto;
    border-radius: 32px;
    overflow: hidden;
    padding: 8px;
    background:
        linear-gradient(180deg, #1a1d24 0%, #0f1115 100%);
    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, 0.08) inset,
        0 24px 50px -20px rgba(15, 17, 21, 0.30),
        0 10px 20px -10px rgba(15, 17, 21, 0.18);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-showcase-app .sd-showcase-link:hover .sd-showcase-frame {
    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, 0.10) inset,
        0 38px 70px -22px rgba(15, 17, 21, 0.42),
        0 14px 26px -12px rgba(15, 17, 21, 0.22);
}
/* Phone screen */
.sd-showcase-app .sd-showcase-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
}
/* Notch */
.sd-showcase-app .sd-showcase-screen::before {
    content: "";
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 16px;
    border-radius: 10px;
    background: #0f1115;
    z-index: 3;
}
.sd-showcase-app .sd-showcase-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sd-showcase-app .sd-showcase-link:hover .sd-showcase-img { transform: translateY(-8%); }

/* Empty state for cards without thumbnails */
.sd-showcase-frame:not(:has(.sd-showcase-img))::after,
.sd-showcase-screen:not(:has(.sd-showcase-img))::after {
    z-index: 1;
}
.sd-showcase-website .sd-showcase-frame:not(:has(img)) {
    background:
        radial-gradient(circle at 30% 20%, rgba(229, 56, 59, 0.10), transparent 60%),
        linear-gradient(135deg, #FAFAF7 0%, #EEEAE1 100%);
}

/* Card meta (title / category / metric) */
.sd-showcase-meta { margin-top: 18px; padding: 0 4px; }
.sd-showcase-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    margin-bottom: 8px;
}
.sd-showcase-tag .dot { color: #E5383B; margin: 0 6px; }
.sd-showcase-title {
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #0F1115;
    margin: 0;
    transition: color 0.3s;
}
.sd-showcase-link:hover .sd-showcase-title { color: #E5383B; }
.sd-showcase-app .sd-showcase-title { font-size: 1.05rem; text-align: center; }
.sd-showcase-app .sd-showcase-tag   { display: block; text-align: center; }

.sd-showcase-metric {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.78rem;
    color: #0F1115;
    border: 1px solid rgba(15, 17, 21, 0.12);
    border-radius: 999px;
    padding: 4px 11px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
}
.sd-showcase-app .sd-showcase-metric { display: none; }

/* Hidden state (used by filter JS) */
.sd-showcase-card.is-hidden {
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.1 — TYPE TAB BAR (Website / App / All) — primary filter for showcase
   Bigger, bolder than the secondary chip filters. Pill-style.
   ═══════════════════════════════════════════════════════════════════════ */

.sd-type-tabs {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: 999px;
    padding: 5px;
    gap: 2px;
    backdrop-filter: blur(10px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 12px 30px -16px rgba(15, 17, 21, 0.12);
}
.sd-type-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #5A5F6A;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.sd-type-tab:hover { color: #0F1115; }
.sd-type-tab .count {
    font-size: 0.74rem;
    font-weight: 500;
    opacity: 0.65;
    padding: 2px 7px;
    background: rgba(15, 17, 21, 0.05);
    border-radius: 999px;
    transition: all 0.25s;
}
.sd-type-tab.is-active {
    background: #0F1115;
    color: #ffffff;
    box-shadow: 0 8px 20px -8px rgba(15, 17, 21, 0.4);
}
.sd-type-tab.is-active .count {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}

/* Type tab icons */
.sd-type-tab svg {
    width: 16px; height: 16px;
    stroke-width: 1.8;
}

@media (max-width: 480px) {
    .sd-type-tabs { width: 100%; justify-content: stretch; }
    .sd-type-tab { flex: 1; justify-content: center; padding: 10px 12px; font-size: 0.85rem; }
    .sd-type-tab .count { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.1 — REFINED SECONDARY CHIP FILTERS (sub-categories)
   Sits below the type-tab bar. Updated to play nicely with the soft bg.
   ═══════════════════════════════════════════════════════════════════════ */

.sd-chip-bar {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 22px 0 36px;
    animation: sdChipBarIn 0.4s ease;
}
.sd-chip-bar.is-visible { display: flex; }
@keyframes sdChipBarIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sd-chip-bar .label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #64748B;
    margin-right: 4px;
    font-weight: 600;
}
.sd-chip {
    appearance: none;
    border: 1px solid rgba(15, 17, 21, 0.10);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    color: #475569;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    padding: 7px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sd-chip:hover {
    border-color: rgba(15, 17, 21, 0.25);
    color: #0F1115;
}
.sd-chip.is-active {
    background: #E5383B;
    color: #fff;
    border-color: #E5383B;
    box-shadow: 0 4px 12px -4px rgba(229, 56, 59, 0.5);
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.1 — SINGLE-WORK GALLERY ADJUSTMENTS (handles wide vs portrait)
   ═══════════════════════════════════════════════════════════════════════ */

.sd-work-cover {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f3f8 0%, #e6e9f1 100%);
    box-shadow: 0 30px 60px -25px rgba(15, 17, 21, 0.22);
}
.sd-work-cover[data-type="website"] { aspect-ratio: 16/9; }
.sd-work-cover[data-type="app"] {
    aspect-ratio: 9/16;
    max-width: 360px;
    margin: 0 auto;
    border-radius: 38px;
    padding: 10px;
    background: linear-gradient(180deg, #1a1d24 0%, #0f1115 100%);
}
.sd-work-cover[data-type="app"] > img {
    border-radius: 28px;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
}
.sd-work-cover[data-type="website"] > img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
}

.sd-work-gallery-grid {
    display: grid;
    gap: 24px;
    margin-top: 32px;
}
.sd-work-gallery-grid[data-type="website"] {
    grid-template-columns: 1fr;
}
.sd-work-gallery-grid[data-type="app"] {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.sd-work-gallery-grid[data-type="website"] img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 18px 40px -22px rgba(15, 17, 21, 0.18);
}
.sd-work-gallery-grid[data-type="app"] .sd-work-gallery-phone {
    aspect-ratio: 9/18;
    border-radius: 28px;
    overflow: hidden;
    padding: 6px;
    background: linear-gradient(180deg, #1a1d24 0%, #0f1115 100%);
    box-shadow: 0 18px 40px -22px rgba(15, 17, 21, 0.30);
}
.sd-work-gallery-grid[data-type="app"] .sd-work-gallery-phone img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 22px;
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.2 — SHOWCASE DETAILS ACCORDION (per-card "Technical details")
   Expands inline below the card image/meta to show services, timeline,
   industry, type, plus app-specific (platform/version/downloads) or
   website-specific (live URL) fields.
   ═══════════════════════════════════════════════════════════════════════ */

.sd-showcase-details {
    margin-top: 14px;
    padding: 0 4px;
}
.sd-showcase-app .sd-showcase-details {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.sd-showcase-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(15, 17, 21, 0.10);
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.2s ease;
    user-select: none;
}
.sd-showcase-details > summary::-webkit-details-marker { display: none; }
.sd-showcase-details > summary::marker { content: ""; }
.sd-showcase-details > summary:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 17, 21, 0.22);
    color: #0F1115;
}
.sd-showcase-chevron {
    transition: transform 0.25s ease;
}
.sd-showcase-details[open] > summary {
    background: #0F1115;
    border-color: #0F1115;
    color: #ffffff;
}
.sd-showcase-details[open] > summary .sd-showcase-chevron {
    transform: rotate(180deg);
}

.sd-showcase-details-list {
    margin: 14px 0 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    animation: sdDetailsIn 0.3s ease;
}
@keyframes sdDetailsIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sd-showcase-details-list > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    font-size: 0.86rem;
    line-height: 1.5;
}
.sd-showcase-details-list dt {
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding-top: 2px;
}
.sd-showcase-details-list dd {
    color: #0F1115;
    font-weight: 500;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.2 — TYPE TAB DISABLED STATE
   When a category has 0 entries we keep the tab visible (so the UI is
   predictable across pages) but dim it and disable interaction.
   ═══════════════════════════════════════════════════════════════════════ */

.sd-type-tab.is-empty,
.sd-type-tab[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}
.sd-type-tab.is-empty:hover {
    color: #5A5F6A;
    background: transparent;
}
.sd-type-tab.is-empty .count {
    background: rgba(15, 17, 21, 0.04);
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.2 — SHOWCASE EMPTY STATE
   Hidden by default; JS toggles [hidden] when current filter has 0 matches
   ═══════════════════════════════════════════════════════════════════════ */

.sd-showcase-empty[hidden] { display: none; }
.sd-showcase-empty {
    display: block;
    margin-top: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.2 — WHATSAPP "OPEN CHATBOX" BUTTON (reusable inline CTA)
   Use anywhere we want a clear chat CTA. Pairs well next to a primary CTA.
   ═══════════════════════════════════════════════════════════════════════ */

.sd-wa-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    background: #25D366;
    color: #ffffff;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.sd-wa-cta:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px rgba(18, 140, 126, 0.55);
}
.sd-wa-cta:active { transform: translateY(0); }
.sd-wa-cta svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Outline variant for use on dark backgrounds */
.sd-wa-cta-outline {
    background: transparent;
    color: #25D366;
    border: 1.5px solid rgba(37, 211, 102, 0.6);
    box-shadow: none;
}
.sd-wa-cta-outline:hover {
    background: #25D366;
    color: #ffffff;
    border-color: #25D366;
    box-shadow: 0 14px 28px -10px rgba(37, 211, 102, 0.4);
}

/* Ghost variant — minimal text style for inline use */
.sd-wa-cta-ghost {
    background: transparent;
    color: #128C7E;
    box-shadow: none;
    padding: 10px 16px;
    font-size: 0.88rem;
}
.sd-wa-cta-ghost:hover {
    background: rgba(37, 211, 102, 0.08);
    color: #128C7E;
    transform: none;
    box-shadow: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.2 — FOOTER ↔ CTA TRANSITION FIX
   Soft hand-off so the dark footer doesn't visually merge with the CTA.
   When the preceding section uses .sd-bg-softgrad-* the footer's top-edge
   accent stripe (already in markup) will read clearly thanks to the
   light → dark contrast.
   ═══════════════════════════════════════════════════════════════════════ */

/* Decorative top edge on the dark footer — slightly thicker accent */
footer.sd-bg-ink > div[aria-hidden="true"]:first-child {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(229, 56, 59, 0.4) 25%,
        rgba(229, 56, 59, 0.55) 50%,
        rgba(229, 56, 59, 0.4) 75%,
        transparent 100%);
    opacity: 0.7;
}

/* Light "CTA" wrapper — drops into the soft-grad colour palette so the
   transition into the dark footer reads as intentional contrast. */
.sd-cta-light {
    position: relative;
}
.sd-cta-light .sd-cta-card {
    position: relative;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: 28px;
    padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 64px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 30px 60px -25px rgba(15, 17, 21, 0.18);
}



/* ═══════════════════════════════════════════════════════════════════════
   v2.3 — ABOUT SECTION: clip-path image + playful values pills
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LEFT: 3 value cards in a 2-up + 1-wide-down grid ──────────────── */
.sd-value-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 16px;
    height: 100%;
    min-height: 100%;
}
.sd-value-cards .sd-vcard-wide {
    grid-column: 1 / -1;
}

/* Single card */
.sd-vcard {
    position: relative;
    padding: 24px 22px 22px;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.sd-vcard:hover {
    transform: translateY(-4px) rotate(-0.6deg);
    z-index: 2;
}
.sd-vcard:nth-child(2):hover { transform: translateY(-4px) rotate(0.6deg); }

.sd-vcard-num {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: 0.6;
}
.sd-vcard-icon {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.sd-vcard-icon svg {
    width: 20px; height: 20px;
    stroke-width: 1.6;
}
.sd-vcard-title {
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: clamp(1.05rem, 1.4vw, 1.22rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 8px;
}
.sd-vcard-body {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

/* Variant: light card (white surface, dark text) — the only variant now.
   All three cards share this look so the section feels calm next to the
   playful pills box. Accent treatment lives in the small details only. */
.sd-vcard-light {
    background: #ffffff;
    border: 1px solid rgba(15, 17, 21, 0.06);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 14px 32px -16px rgba(15, 17, 21, 0.10),
        0 4px 12px -6px rgba(15, 17, 21, 0.06);
    color: #0F1115;
}
.sd-vcard-light:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 28px 50px -22px rgba(15, 17, 21, 0.18),
        0 8px 18px -8px rgba(15, 17, 21, 0.10);
}
.sd-vcard-light .sd-vcard-num   { color: #E5383B; opacity: 1; }
.sd-vcard-light .sd-vcard-icon  { background: rgba(229, 56, 59, 0.10); color: #E5383B; }
.sd-vcard-light .sd-vcard-body  { color: #475569; }

/* Wide card — same white surface, but inline (icon + content side-by-side). */
.sd-vcard-wide {
    flex-direction: row;
    align-items: stretch;
    gap: 18px;
    padding: 22px 24px;
}
.sd-vcard-wide .sd-vcard-num   { margin-bottom: 0; align-self: center; flex-shrink: 0; min-width: 28px; }
.sd-vcard-wide .sd-vcard-icon  { margin-bottom: 0; align-self: center; flex-shrink: 0; }
.sd-vcard-wide .sd-vcard-content { flex: 1; min-width: 0; }
.sd-vcard-wide .sd-vcard-body  { margin-top: 4px; }

/* Decorative top accent bar on each card */
.sd-vcard::before {
    content: "";
    position: absolute;
    top: 0; left: 18px; right: 18px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #E5383B, transparent);
    transition: opacity 0.4s, transform 0.4s;
    transform: scaleX(0.4);
    transform-origin: left center;
}
.sd-vcard:hover::before  { transform: scaleX(1); opacity: 1; }

/* Mobile — stack the 3 cards vertically, full width each */
@media (max-width: 1023px) {
    .sd-value-cards {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        max-width: 560px;
        margin: 0 auto;
    }
    .sd-value-cards .sd-vcard-wide { grid-column: 1; }
    .sd-vcard-wide { flex-direction: column; gap: 14px; padding: 24px 22px; }
    .sd-vcard-wide .sd-vcard-num,
    .sd-vcard-wide .sd-vcard-icon { align-self: flex-start; }
}


/* ── Replay button on the values box ───────────────────────────────── */
.sd-values-replay {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 5;
    appearance: none;
    border: 1px solid rgba(15, 17, 21, 0.10);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    color: #0F1115;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 7px 13px 7px 11px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.sd-values-replay:hover {
    background: #0F1115;
    color: #ffffff;
    border-color: #0F1115;
    transform: rotate(-6deg) scale(1.06);
}
.sd-values-replay:active {
    transform: rotate(-12deg) scale(0.96);
}
.sd-values-replay svg { color: #E5383B; transition: color 0.2s; }
.sd-values-replay:hover svg { color: #FBBF24; }



/* ── RIGHT: animated values box with draggable physics pills ───────── */
.sd-values-box {
    position: relative;
    width: 100%;
    aspect-ratio: 5/4; /* wider than tall — keeps the LEFT cards from stretching too tall */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 26px 50px -22px rgba(15, 17, 21, 0.18);
    isolation: isolate;
    min-height: 360px;
}

@media (max-width: 1023px) {
    .sd-values-box { aspect-ratio: 6/5; max-width: 560px; margin: 0 auto; min-height: 380px; }
}

/* Animated background — same aurora wash, contained inside the box */
.sd-values-bg {
    position: absolute;
    inset: -8%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 18% 18%, rgba(140, 180, 255, 0.45), transparent 60%),
        radial-gradient(ellipse 55% 50% at 88% 22%, rgba(195, 165, 245, 0.42), transparent 60%),
        radial-gradient(ellipse 65% 55% at 78% 88%, rgba(245, 180, 220, 0.46), transparent 65%),
        radial-gradient(ellipse 45% 40% at 22% 88%, rgba(165, 175, 240, 0.32), transparent 60%);
    filter: blur(28px);
    animation: sdValuesBgDrift 18s ease-in-out infinite alternate;
}
@keyframes sdValuesBgDrift {
    0%   { transform: translate(0, 0)        scale(1); }
    50%  { transform: translate(-3%, 4%)     scale(1.06); }
    100% { transform: translate(3%, -2%)     scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
    .sd-values-bg { animation: none; }
}

/* "Drag the values" hint label — top right corner */
.sd-values-label {
    position: absolute;
    top: 14px; right: 16px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 17, 21, 0.08);
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 11px 6px 13px;
    border-radius: 999px;
    pointer-events: none;
    backdrop-filter: blur(6px);
}
.sd-values-label svg { color: #E5383B; }

/* The stage where pills live and physics runs */
.sd-values-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none; /* let pills handle their own pointer events */
}

/* ── Pills (the physics objects) ─────────────────────────────────── */
.sd-pill {
    position: absolute;
    top: 0; left: 0;
    appearance: none;
    border: 0;
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    padding: 13px 22px;
    border-radius: 999px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    pointer-events: auto;
    white-space: nowrap;
    line-height: 1;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: box-shadow 0.25s ease;
    /* When dragged, the JS adds .is-dragging */
}
.sd-pill:active,
.sd-pill.is-dragging {
    cursor: grabbing;
    z-index: 100;
    box-shadow: 0 18px 32px -10px rgba(15, 17, 21, 0.30),
                0 4px 10px -4px rgba(15, 17, 21, 0.18) !important;
}
/* No hover scale — pills should only respond to actual drag, never to mouse hover.
   (The previous .sd-pill:hover { scale: 1.04 } made the pill visually pop on
   hover, which looked like the pill was moving on its own.) */

/* Pill colour variants — picked off the design palette */
.sd-pill-a {
    background: #0F1115;
    color: #ffffff;
    box-shadow: 0 8px 18px -8px rgba(15, 17, 21, 0.40),
                0 2px 6px -2px rgba(15, 17, 21, 0.20);
}
.sd-pill-b {
    background: #ffffff;
    color: #0F1115;
    border: 1px solid rgba(15, 17, 21, 0.08);
    box-shadow: 0 8px 18px -8px rgba(15, 17, 21, 0.16),
                0 2px 6px -2px rgba(15, 17, 21, 0.08);
}
.sd-pill-c {
    background: #E5383B;
    color: #ffffff;
    box-shadow: 0 8px 18px -8px rgba(229, 56, 59, 0.45),
                0 2px 6px -2px rgba(229, 56, 59, 0.20);
}
.sd-pill-d {
    background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
    color: #713f12;
    box-shadow: 0 8px 18px -8px rgba(202, 138, 4, 0.30),
                0 2px 6px -2px rgba(202, 138, 4, 0.12);
}

/* Initial state — pills start above the box, JS triggers physics drop on enter */
.sd-pill {
    opacity: 0;
}
.sd-pills-ready .sd-pill {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   v2.3 — LOGO: STATIC (no scale) + asterisk colour-cycle on hover
   ═══════════════════════════════════════════════════════════════════════ */

/* Override the previous scale-on-hover */
.sd-header-logo,
.sd-header-logo:hover {
    transform: none;
    transition: none;
}

/* The asterisk colour cycle is driven by JS (see initLogoColorCycle in
   main.js). The CSS just provides the CSS variable hook. */
.sd-header-logo img {
    /* No CSS hover effect; JS handles the asterisk recolour */
    transition: filter 0.15s ease;
}
.sd-header-logo:hover img {
    /* Subtle glow while cycling */
    filter: drop-shadow(0 2px 8px rgba(229, 56, 59, 0.18));
}

/* ── Navigation: "FREE" / "NEW" badge tags (added 2026-04) ── */
.sd-nav-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 2px 8px;
    border-radius: 9999px;
    background: #E5383B;
    color: #FFFFFF;
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px -2px rgba(229, 56, 59, 0.4);
}
.sd-nav-tag-mobile {
    transform: none;
    font-size: 0.66rem;
    padding: 3px 9px;
}

.sd-dropdown-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.sd-dropdown-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(229, 56, 59, 0.10);
    color: #E5383B;
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(229, 56, 59, 0.18);
    flex-shrink: 0;
}
.sd-dropdown-badge-mobile { padding: 3px 8px; font-size: 0.62rem; }

/* ── Mobile-only CTA in header ──
   Refined: ink-pill with a tiny pulsing red dot (matches the brand's
   "quiet" tone — same visual weight as the desktop btn-mag-ink, just
   compact for the smaller header). Replaces the earlier solid-red pill
   that competed with the wordmark. */
.header-cta-mobile {
    background: #0F1115;
    color: #FFFFFF;
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid #0F1115;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
    text-decoration: none;
}
.header-cta-mobile:hover,
.header-cta-mobile:focus-visible {
    background: #E5383B;
    border-color: #E5383B;
    color: #FFFFFF;
    transform: translateY(-1px);
}
.header-cta-mobile-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #E5383B;
    flex-shrink: 0;
    position: relative;
}
.header-cta-mobile-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    background: rgba(229, 56, 59, 0.4);
    animation: sdHeaderCtaPulse 2s ease-in-out infinite;
    pointer-events: none;
}
.header-cta-mobile:hover .header-cta-mobile-dot,
.header-cta-mobile:focus-visible .header-cta-mobile-dot { background: #FFFFFF; }
.header-cta-mobile:hover .header-cta-mobile-dot::after,
.header-cta-mobile:focus-visible .header-cta-mobile-dot::after { background: rgba(255, 255, 255, 0.4); }
@keyframes sdHeaderCtaPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 380px) {
    /* Tighten on smallest phones so it doesn't crowd the hamburger */
    .header-cta-mobile { padding: 0.4rem 0.7rem; font-size: 0.74rem; gap: 0.4rem; }
}
@media (max-width: 320px) {
    .header-cta-mobile { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .header-cta-mobile-dot::after { animation: none; }
}

/* ── Tool-single hero: dotted-arc pattern (matches homepage signature) ── */
.sd-tool-hero { position: relative; }
.sd-tool-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Dot matrix pattern — distinct from the homepage signature. Tools are
       modular utilities, the dots feel right. */
    background-image:
        radial-gradient(circle at center, #0F1115 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    background-position: 0 0;
    opacity: 0.10;
    animation: sdToolHeroDrift 24s ease-in-out infinite alternate;
}
@keyframes sdToolHeroDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-1.2%, -0.6%) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .sd-tool-hero-pattern { animation: none; } }

/* ════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW GUARDS
   Prevents the page from scrolling left/right on narrow viewports.

   IMPORTANT: We deliberately do NOT use `overflow-x: hidden` on
   html/body here, because that silently breaks `position: sticky`
   on descendants — including the site header. Instead we:

   1) Clip overflow at the section/header/footer level
   2) Ensure no individual element exceeds 100vw via max-width
   3) Use word-break + media constraints to keep content in bounds

   This achieves the same mobile-overflow protection while leaving
   the document's overflow context unrestricted, so sticky works.
   ════════════════════════════════════════════════════════════════ */

/* 1) Clip overflow at major layout containers — NOT on html/body */
header.site-header,
main,
footer,
section,
.sd-hero-v3 {
    max-width: 100vw;
    overflow-x: clip; /* Modern browsers — preserves sticky on descendants */
}

/* Older Safari (< 16) doesn't support overflow:clip. Fall back to hidden
   on the same elements — but NOT on html/body, so sticky still works. */
@supports not (overflow: clip) {
    header.site-header,
    main,
    footer,
    section,
    .sd-hero-v3 {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    /* Constrain pre/code/table — common overflow culprits in post-content */
    .post-content pre,
    .post-content code,
    .page-content pre,
    .page-content code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
    }
    .post-content table,
    .page-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Long URLs / unbreakable strings inside content shouldn't widen the page */
    .post-content a,
    .page-content a,
    .post-content p,
    .page-content p {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Images & embeds */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    /* Tame the giant asterisk watermarks on mobile */
    .sd-hero-v3::after {
        font-size: clamp(12rem, 50vw, 22rem) !important;
        left: -10% !important;
    }
    .svc-hero-asterisk {
        font-size: clamp(12rem, 50vw, 22rem) !important;
    }

    /* Tables in pricing / pages should never overflow */
    table {
        max-width: 100%;
    }
}

/* 3) Specific known offenders */

/* Testimonial track on mobile */
@media (max-width: 640px) {
    .testimonial-carousel {
        max-width: 100vw;
        overflow: hidden;
    }
    .testimonial-slide {
        min-width: calc(100vw - 56px) !important;
        max-width: calc(100vw - 56px) !important;
    }
}

/* 4) Capability marquee on mobile */
.fp-marquee, .sd-marquee, [class*="marquee"] {
    max-width: 100vw;
    overflow: hidden;
}

/* 5) Hero orbs SVG — clip on mobile */
@media (max-width: 640px) {
    .sd-hero-orbs {
        overflow: hidden !important;
    }
}

/* 6) Footer columns can stack-overflow on tiny phones */
@media (max-width: 480px) {
    .sd-footer-col-list a,
    .sd-footer-col-list button {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* 7) Wide form inputs */
input, textarea, select {
    max-width: 100%;
    box-sizing: border-box;
}

/* 8) Chat widget */
.sd-chat-widget {
    box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════════
   STICKY HEADER — explicit rule overriding any earlier static rule
   ════════════════════════════════════════════════════════════════ */
header.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* ════════════════════════════════════════════════════════════════
   STICKY HEADER FIX
   The compiled Tailwind theme.css contains `body { overflow-x: hidden }`
   which silently breaks `position: sticky` on the header.

   Override body to use `overflow: clip` (modern, doesn't break sticky)
   with a fallback for older Safari that resets just overflow-x to visible
   while keeping our section-level clipping doing the actual mobile-overflow
   protection.
   ════════════════════════════════════════════════════════════════ */
body {
    overflow-x: clip !important;
}
@supports not (overflow: clip) {
    /* Safari < 16 — let body overflow horizontally so sticky works.
       Section-level overflow:hidden (set above) handles mobile bleed. */
    body { overflow-x: visible !important; }
}

/* ════════════════════════════════════════════════════════════════
   BARE-HERO PATTERN OVERLAYS
   For pages that don't use title-hero.php (articles index, single post,
   etc.) — drop a `.sd-bare-hero` class on the section and add a
   `.sd-bare-hero-pattern` div as the first child.
   ════════════════════════════════════════════════════════════════ */
.sd-bare-hero { position: relative; overflow: hidden; }
.sd-bare-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Dots — articles index */
.sd-bare-hero--pat-dots .sd-bare-hero-pattern {
    background-image: radial-gradient(circle at center, rgba(15,17,21,0.16) 1.2px, transparent 1.5px);
    background-size: 28px 28px;
    background-repeat: repeat;
}

/* Minimalist rules — single posts */
.sd-bare-hero--pat-rules .sd-bare-hero-pattern {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' preserveAspectRatio='none'><g fill='none' stroke='%230F1115' stroke-width='0.6' opacity='0.10'><line x1='0' y1='100' x2='1600' y2='100'/><line x1='0' y1='200' x2='1600' y2='200'/><line x1='0' y1='300' x2='1600' y2='300'/><line x1='0' y1='400' x2='1600' y2='400'/><line x1='0' y1='500' x2='1600' y2='500'/><line x1='0' y1='600' x2='1600' y2='600'/><line x1='0' y1='700' x2='1600' y2='700'/></g></svg>");
}

/* On mobile, scale background pattern more vertically so lines show clearly */
@media (max-width: 768px) {
    .sd-bare-hero-pattern,
    .sd-th-section::before,
    .svc-hero-pattern,
    .sd-tool-hero-pattern {
        opacity: 0.85;  /* slightly less prominent on small screens */
    }
}