/* ==========================================================================
   Swap Design - Replica stylesheet
   Stack: Bootstrap 5, vanilla CSS3, GSAP (ScrollTrigger) driven reveals.
   Palette mirrors the original: deep navy + orange accent.
   ========================================================================== */

:root {
    --navy-dark: #04050a;
    --navy: #04050a;
    --navy-mid: #0e111f;
    --accent: #ff3e3e;
    --secondary: #ff763e;
    --accent-soft: rgba(255, 62, 62, 0.14);
    --pink: #ff763e;
    --purple: var(--accent);
    --blue: var(--secondary);
    --white: #f8fafc;
    --off-white: #e2e8f0;
    --muted: #94a3b8;
    --success: #10b981;
    --whatsapp: #22c15e;
    --glass-bg: rgba(14, 17, 31, .75);
    --glass-border: rgba(255, 255, 255, .10);
    --gradient-primary: linear-gradient(135deg, #ff3e3e 0%, #ff763e 100%);
    --gradient-dark: linear-gradient(180deg, #04050a 0%, #04050a 100%);
    --gradient-glass: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Montserrat', 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --radius: 14px;
    --nav-height: 84px;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
.sd-honeypot { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.sd-honeypot input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--navy-dark);
    color: var(--off-white);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--secondary); }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--white);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container { max-width: 1366px; }

/* Section helpers */
.sd-section { padding: 6.5rem 0; position: relative; }
.sd-section--gradient {
    background: var(--gradient-dark);
}
.sd-kicker {
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: .5rem;
}
.sd-h2 {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    margin-bottom: .75rem;
}
.sd-lead { color: var(--muted); font-size: 16px; max-width: 720px; }

/* Shared content-box paragraph rhythm */
.sd-tilt-body p,
.sd-why-item p,
.sd-industry-card p,
.sd-faq-accordion .accordion-body,
.sd-port-item-body p,
.sd-success-card > p,
.sd-review-text,
.sd-newsletter p,
.sd-value-card p,
.sd-service-card p,
.sd-feature p,
.sd-office p,
.sd-blog-body p,
.sd-blog-article p {
    font-size: 14.5px;
    line-height: 1.6;
}

/* Gradient text */
.sd-gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --------------------------------------------------------------------------
   2. Header
   -------------------------------------------------------------------------- */
.sd-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    background: transparent;
    transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
    padding: 1.1rem 0;
}
.sd-header--scrolled {
    background: var(--gradient-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    padding: .3rem 0;
}
.sd-header--hidden { transform: translateY(-110%); }
.sd-header .navbar-collapse { align-items: center; }
.sd-header-cta {
    flex: 0 0 auto;
    margin-left: 2rem;
    padding-left: .25rem;
    white-space: nowrap;
}
.sd-header-cta i { font-size: .9em; }

.sd-logo-img { height: 42px; width: auto; transition: height .35s ease; }
.sd-header--scrolled .sd-logo-img { height: 34px; }

.sd-nav-wrap { position: relative; }

.sd-header .navbar-nav { gap: .4rem; }

.sd-header .nav-link {
    color: var(--off-white);
    font-weight: 500;
    font-size: 16px;
    padding: .55rem 1rem !important;
    border-radius: 8px;
    position: relative;
}
.sd-header .nav-link:hover,
.sd-header .nav-link.active {
    color: var(--white);
    background: var(--accent-soft);
}
.sd-header .nav-link.active::after {
    content: '';
    position: absolute;
    left: 50%; bottom: .15rem;
    transform: translateX(-50%);
    width: 22px; height: 3px;
    border-radius: 3px;
    background: var(--accent);
}

.sd-dropdown {
    background: var(--glass-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: .6rem .4rem;
    min-width: 250px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.sd-dropdown .dropdown-item {
    color: var(--off-white);
    font-size: 15px;
    padding: .55rem .9rem;
    border-radius: 8px;
    white-space: normal;
}
.sd-dropdown .dropdown-item:hover {
    background: var(--accent);
    color: var(--white);
}

.sd-mega-menu {
    left: 50%;
    width: min(780px, calc(100vw - 32px));
    padding: 1.15rem;
    transform: translateX(-50%);
}
.sd-mega-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .1rem .2rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sd-mega-kicker {
    display: block;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: .35rem;
}
.sd-mega-head strong {
    display: block;
    max-width: 400px;
    color: var(--white);
    font-size: 15px;
    line-height: 1.4;
}
.sd-mega-view-all,
.sd-mega-foot a {
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.sd-mega-view-all:hover,
.sd-mega-foot a:hover { color: var(--secondary); }
.sd-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    padding: 1rem 0;
}
.sd-mega-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-height: 86px;
    padding: .75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--off-white);
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.sd-mega-item:hover,
.sd-mega-item:focus-visible {
    color: var(--white);
    background: rgba(255, 62, 62, .1);
    border-color: rgba(255, 62, 62, .34);
    transform: translateY(-2px);
}
.sd-mega-item--featured {
    background: rgba(255, 62, 62, .08);
    border-color: rgba(255, 62, 62, .25);
}
.sd-mega-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 14px;
}
.sd-mega-item strong {
    display: block;
    color: var(--white);
    font-size: 13.5px;
    line-height: 1.3;
    margin-top: .1rem;
}
.sd-mega-item small {
    display: block;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: .25rem;
}
.sd-mega-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem .2rem 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: var(--muted);
    font-size: 12.5px;
}

.navbar-toggler { border-color: rgba(255,255,255,.35); }

/* Services link and mega-menu toggle are separate controls */
.sd-services-nav-main { display: inline-flex; align-items: center; }
.sd-services-nav-link { padding-right: .35rem !important; }
.sd-services-toggle { display: inline-grid; place-items: center; width: 28px; height: 34px; padding: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; transition: color .2s ease, background .2s ease, transform .2s ease; }
.sd-services-toggle:hover, .sd-services-toggle:focus-visible { color: var(--white); background: rgba(255, 118, 62, .12); outline: none; }
.sd-services-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.sd-services-toggle i { transition: transform .2s ease; font-size: 10px; }
@media (max-width: 991.98px) {
    .sd-services-nav-main { width: 100%; justify-content: space-between; }
    .sd-services-nav-link { flex: 1; }
    .sd-services-toggle { flex: 0 0 38px; width: 38px; height: 42px; }
    .sd-services-nav .dropdown-menu { width: 100%; }
    .sd-services-nav .dropdown-menu.show,
    .sd-services-nav.sd-services-nav--open .dropdown-menu { display: block; visibility: visible; opacity: 1; }
    .sd-services-nav .sd-mega-view-all { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; }
    .sd-services-nav .sd-mega-head { flex-wrap: wrap; gap: .5rem; }
    .sd-services-nav .sd-mega-grid { max-height: 48vh; overflow-y: auto; }
}


/* Open the Services dropdown on hover (desktop) */
@media (min-width: 992px) {
    .sd-header .nav-item.dropdown > .nav-link { cursor: pointer; }
    .sd-header .nav-item.dropdown:hover .dropdown-menu,
    .sd-header .nav-item.dropdown:focus-within .dropdown-menu { display: block; }
    .sd-header .dropdown-menu { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
.sd-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
    overflow: hidden;
    padding: calc(var(--nav-height) + 2.5rem) 0 3rem;
}
.sd-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 32%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 80% at 50% 32%, #000 25%, transparent 75%);
    opacity: .7;
    pointer-events: none;
    z-index: 1;
}
.sd-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    opacity: .55;
    will-change: transform;
}
.sd-aurora--1 {
    top: -10%; left: -6%;
    width: 58vw; height: 58vw;
    background: radial-gradient(circle, rgba(255, 62, 62, .5) 0%, rgba(255, 62, 62, 0) 70%);
}
.sd-aurora--2 {
    bottom: -24%; right: -10%;
    width: 54vw; height: 54vw;
    background: radial-gradient(circle, rgba(255, 118, 62, .42) 0%, rgba(255, 118, 62, 0) 70%);
}
.sd-aurora--3 {
    top: 6%; right: 20%;
    width: 40vw; height: 40vw;
    background: radial-gradient(circle, rgba(255, 62, 62, .34) 0%, rgba(255, 118, 62, 0) 70%);
}

.sd-hero .container { position: relative; z-index: 2; }

.sd-hero h1 {
    font-size: clamp(30px, 4.4vw, 45px);
    font-weight: 700;
    color: var(--white);
    line-height: 1.22;
    margin-bottom: 1.2rem;
}

.sd-hero p.lead { color: var(--muted); font-size: 16px; max-width: 560px; }
.sd-hero-lead { max-width: 590px; margin-bottom: .75rem; }
.sd-hero-proof {
    max-width: 560px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
}

.sd-hero-actions {
    margin-top: 1.4rem;
}
.sd-hero-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    max-width: 620px;
    margin-top: 1.9rem;
}
.sd-hero-trust-item {
    min-width: 0;
    padding: .75rem .8rem;
    border-left: 1px solid rgba(255, 255, 255, .18);
}
.sd-hero-trust-item strong {
    display: block;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.1;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sd-hero-trust-item span {
    display: block;
    margin-top: .28rem;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}

.sd-hero-media {
    position: relative;
    text-align: center;
}
.sd-hero-media img {
    border-radius: 0 0 0 var(--radius);
    max-height: 560px;
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .5));
}

/* --------------------------------------------------------------------------
   4. Buttons - all buttons use the animated CSS gradient border
   -------------------------------------------------------------------------- */
.sd-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font);
    font-size: 17px;
    font-weight: 500;
    padding: .75rem 1.8rem;
    border-radius: 8px;
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box,
                linear-gradient(90deg, var(--accent), var(--secondary), var(--accent)) border-box;
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, 0 0;
    color: var(--white);
    animation: sd-border-flow 4s linear infinite;
}
.sd-btn:hover {
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(255, 62, 62, .35);
}
/* Primary CTA - bright orange fill, keeps the animated gradient border */
.sd-btn-accent {
    background: linear-gradient(var(--accent), var(--secondary)) padding-box,
                linear-gradient(90deg, var(--accent), var(--secondary), var(--accent)) border-box;
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, 0 0;
    color: var(--white);
}
.sd-btn-accent:hover {
    color: var(--white);
    box-shadow: 0 14px 36px rgba(255, 62, 62, .55);
}
.sd-btn-bob {
    animation: sd-border-flow 4s linear infinite, sd-bob 3s ease-in-out infinite;
}
@keyframes sd-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes sd-border-flow {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, 300% 0; }
}
.sd-btn--sm { padding: .5rem 1.2rem; font-size: 15px; }

/* --------------------------------------------------------------------------
   5. About (home)
   -------------------------------------------------------------------------- */
.sd-about-media { position: relative; padding: 1.4rem 1.4rem 2.2rem; }
.sd-about-frame {
    position: relative;
    border-radius: var(--radius);
    padding: 10px;
    background: var(--gradient-primary);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.sd-about-frame::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: calc(var(--radius) - 6px);
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 62, 62, .16), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(255, 118, 62, .14), transparent 45%),
        linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    z-index: 0;
}
.sd-about-frame img {
    position: relative;
    z-index: 1;
    border-radius: calc(var(--radius) - 8px);
    display: block;
    width: 100%;
    object-fit: cover;
}
/* Floating 8+ years experience badge */
.sd-about-exp {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1.2rem;
    border-radius: var(--radius);
    background: rgba(12, 16, 47, .92);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    z-index: 2;
    will-change: transform;
}
.sd-about-exp-num {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sd-about-exp-label { color: var(--off-white); font-size: 13px; font-weight: 600; line-height: 1.35; }
/* Rotating circular text badge */
.sd-about-circle {
    position: absolute;
    top: 0;
    right: 0;
    width: 116px;
    height: 116px;
    z-index: 2;
    will-change: transform;
}
.sd-about-circle-svg {
    width: 100%;
    height: 100%;
    animation: sd-spin 14s linear infinite;
}
.sd-about-circle-text {
    font-size: 9.2px;
    font-weight: 700;
    letter-spacing: 1.2px;
    fill: var(--off-white);
    text-transform: uppercase;
}
.sd-about-circle-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 20px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }
/* Floating skill chips */
.sd-about-chips {
    position: absolute;
    top: 34%;
    right: -8px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    z-index: 2;
}
.sd-about-chips li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .85rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--off-white);
    background: rgba(12, 16, 47, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
    will-change: transform;
}
.sd-about-chips i { color: var(--accent); }
/* Decorative gradient orbs behind the media */
.sd-about-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.sd-about-orb--a {
    top: 12%;
    left: -8%;
    width: 42vw;
    height: 42vw;
    max-width: 520px;
    max-height: 520px;
    background: radial-gradient(circle, rgba(255, 62, 62, .32) 0%, rgba(255, 62, 62, 0) 70%);
}
.sd-about-orb--b {
    bottom: -12%;
    right: -8%;
    width: 40vw;
    height: 40vw;
    max-width: 500px;
    max-height: 500px;
    background: radial-gradient(circle, rgba(255, 118, 62, .28) 0%, rgba(255, 118, 62, 0) 70%);
}
.sd-about .container { position: relative; z-index: 1; }
.sd-about h3 { color: var(--white); margin-bottom: 1.1rem; }
.sd-about p { color: var(--muted); margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   6. Services (3D parallax hover cards)
   -------------------------------------------------------------------------- */
.sd-services-intro {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2rem;
    margin-bottom: 3rem;
}
.sd-services-badge h4 { color: var(--white); font-weight: 700; }
.sd-services-badge p { color: var(--accent); margin: 0; font-weight: 500; }

.sd-tilt {
    perspective: 1100px;
    height: 350px;
    margin-bottom: 1.6rem;
    border-radius: var(--radius);
    outline: none;
    cursor: pointer;
}
.sd-tilt-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    transition: border-color .4s ease, box-shadow .4s ease;
    will-change: transform;
    transform-style: preserve-3d;
}
.sd-tilt:hover .sd-tilt-inner,
.sd-tilt:focus-visible .sd-tilt-inner {
    border-color: rgba(255, 62, 62, .45);
    box-shadow: 0 32px 70px rgba(0, 0, 0, .55);
}
/* Large parallax watermark behind the content */
.sd-tilt-bg {
    position: absolute;
    inset: -6%;
    display: grid;
    place-items: center;
    color: rgba(255, 62, 62, .08);
    font-size: 150px;
    will-change: transform;
    pointer-events: none;
}
.sd-tilt-bg i { transform: rotate(-12deg); filter: drop-shadow(0 10px 30px rgba(255, 62, 62, .35)); }
/* Mouse-follow glare */
.sd-tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 35%, transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.sd-tilt:hover .sd-tilt-glare,
.sd-tilt:focus-visible .sd-tilt-glare { opacity: 1; }
/* Floating content layer */
.sd-tilt-body {
    position: relative;
    z-index: 2;
    padding: 2.2rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    will-change: transform;
}
.sd-tilt-icon {
    width: 68px; height: 68px;
    display: grid;
    place-items: center;
    font-size: 28px;
    color: var(--white);
    background: var(--gradient-primary);
    border-radius: 18px;
    margin-bottom: 1.2rem;
    box-shadow: 0 14px 30px rgba(255, 62, 62, .4);
}
.sd-tilt-body h5 { font-size: 20px; font-weight: 700; margin-bottom: .6rem; }
.sd-tilt-body p { color: var(--muted); font-size: 14.5px; margin-bottom: 1.1rem; }
.sd-tilt-body a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--accent);
    font-weight: 600;
    border-bottom: 2px solid rgba(255, 62, 62, .35);
    padding-bottom: 2px;
    transition: gap .3s ease, color .3s ease;
}
.sd-tilt-body a:hover { color: var(--secondary); gap: .75rem; }

/* --------------------------------------------------------------------------
   7. Why clients, industries, and FAQ
   -------------------------------------------------------------------------- */
.sd-why-clients {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.sd-why-clients .container { position: relative; z-index: 2; }
.sd-why-clients .sd-hero-grid,
.sd-why-clients .sd-aurora { z-index: 1; }
.sd-why-grid,
.sd-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 3.5rem;
    align-items: start;
}
.sd-why-copy > p:not(.sd-kicker),
.sd-faq-grid > div:first-child > p:not(.sd-kicker) { color: var(--muted); }
.sd-why-list { display: grid; gap: 1rem; }
.sd-why-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy-dark) 100%);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sd-why-item:hover,
.sd-why-item:focus-within {
    transform: translateY(-3px);
    border-color: rgba(255, 62, 62, .42);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .25);
}
.sd-why-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 17px;
}
.sd-why-item h3 { font-size: 17px; font-weight: 700; margin: .1rem 0 .35rem; }
.sd-why-item p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }

.sd-industries-intro {
    max-width: 820px;
    margin: 0 auto 2.4rem;
    text-align: center;
}
.sd-industry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}
.sd-industry-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    min-height: 126px;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    color: var(--off-white);
    background: linear-gradient(160deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .02) 100%);
    transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.sd-industry-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--accent);
    background: var(--accent-soft);
}
.sd-industry-card h3 { font-size: 16px; font-weight: 700; margin: .1rem 0 .35rem; }
.sd-industry-card p { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0; }
.sd-industry-card:hover,
.sd-industry-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(255, 62, 62, .55);
    background: linear-gradient(160deg, rgba(255, 62, 62, .12) 0%, rgba(255, 255, 255, .035) 100%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}

.sd-faq { background: var(--navy); }
.sd-faq-accordion { display: grid; gap: .75rem; }
.sd-faq-accordion .accordion-item {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy-dark) 100%);
}
.sd-faq-accordion .accordion-button {
    background: transparent;
    color: var(--white);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
}
.sd-faq-accordion .accordion-button:not(.collapsed) {
    color: var(--accent);
    background: rgba(255, 62, 62, .06);
}
.sd-faq-accordion .accordion-button::after {
    filter: brightness(0) invert(1);
}
.sd-faq-accordion .accordion-button:not(.collapsed)::after {
    filter: none;
}
.sd-faq-accordion .accordion-body {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   8. Portfolio (home) minimal grid + 3D tilt cards
   -------------------------------------------------------------------------- */
.sd-port-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem 1.8rem;
}
.sd-port-item {
    display: block;
    color: inherit;
    text-decoration: none;
}
.sd-tilt--port {
    height: auto;
    margin-bottom: 0;
}
.sd-tilt--port .sd-tilt-inner {
    height: auto;
    background: linear-gradient(160deg, rgba(14, 17, 31, .92) 0%, rgba(7, 9, 19, .98) 100%);
}
.sd-tilt--port .sd-tilt-bg { font-size: 110px; color: rgba(255, 62, 62, .07); }
.sd-tilt--port .sd-tilt-bg i { transform: rotate(-12deg) scale(1.15); }
.sd-port-item-media {
    margin: 0;
    overflow: hidden;
}
.sd-tilt--port .sd-port-item-media { border-radius: 0; }
.sd-port-item-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.sd-port-item:hover .sd-port-item-media img { transform: scale(1.09) translateY(-2px); }
.sd-port-item-body { padding: 1.3rem 1.4rem 1.5rem; position: relative; z-index: 2; }
.sd-port-item-body h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: .25rem;
    transition: color .3s ease;
}
.sd-port-item:hover h3 { color: var(--accent); }
.sd-port-item-body p {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Success story + how it works
   -------------------------------------------------------------------------- */
.sd-success-scene {
    position: relative;
    min-height: 480px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.sd-success-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    pointer-events: none;
}
.sd-success-orb--a {
    top: 4%; left: 2%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255, 62, 62, .24) 0%, rgba(255, 62, 62, 0) 70%);
    animation: sd-float-orb 9s ease-in-out infinite;
}
.sd-success-orb--b {
    bottom: 2%; right: 0;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255, 118, 62, .22) 0%, rgba(255, 118, 62, 0) 70%);
    animation: sd-float-orb 11s ease-in-out infinite reverse;
}
@keyframes sd-float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(18px, -22px) scale(1.08); }
}

.sd-success-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    padding: 2.4rem 2.2rem;
    border-radius: 22px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(170deg, rgba(14, 17, 31, .92) 0%, rgba(7, 9, 19, .96) 100%) padding-box,
                linear-gradient(140deg, rgba(255, 62, 62, .6), rgba(255, 118, 62, .28), rgba(255, 118, 62, .55)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.sd-success-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% -10%, rgba(255, 62, 62, .14), transparent 55%);
    pointer-events: none;
}
.sd-success-icon {
    width: 64px; height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 1.1rem;
    font-size: 26px;
    color: var(--white);
    background: var(--gradient-primary);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(255, 62, 62, .45);
}
.sd-success-card h3 { font-size: 21px; font-weight: 800; margin-bottom: .5rem; }
.sd-success-card > p { color: var(--muted); font-size: 14.5px; margin-bottom: 1.6rem; }

.sd-success-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.sd-success-stat {
    padding: 1rem .6rem;
    border-radius: 14px;
    background: var(--gradient-glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sd-success-num {
    display: block;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sd-success-label {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: .2rem;
}
.sd-success-globe {
    position: absolute;
    right: -34px; bottom: -34px;
    width: 130px; height: 130px;
    display: grid;
    place-items: center;
    font-size: 52px;
    color: rgba(255, 118, 62, .12);
    border-radius: 50%;
    pointer-events: none;
}

.sd-success-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--white);
    background: var(--gradient-glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .4);
}
.sd-success-chip i { color: var(--accent); }
.sd-success-chip--1 { top: 10%; right: 4%; }
.sd-success-chip--2 { bottom: 12%; left: 2%; }

/* How it work - glass pill list */
.sd-work-list {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: grid;
    gap: .8rem;
}
.sd-work-list li {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1.1rem;
    border-radius: 999px;
    color: var(--off-white);
    font-weight: 600;
    background: var(--gradient-glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 340px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
}
.sd-work-list-icon {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(255, 62, 62, .4);
}

/* How it work - 3D card scene */
.sd-work-3d-wrap {
    position: relative;
    perspective: 1400px;
    padding: 1rem 0;
}
.sd-work-3d {
    position: relative;
    height: 500px;
    transform-style: preserve-3d;
    will-change: transform;
}
.sd-work-3d::before {
    content: '';
    position: absolute;
    inset: 6% 10%;
    background:
        radial-gradient(circle at 28% 28%, rgba(255, 62, 62, .35) 0%, transparent 55%),
        radial-gradient(circle at 74% 72%, rgba(255, 118, 62, .3) 0%, transparent 55%);
    filter: blur(60px);
    z-index: 0;
}
.sd-work-3d-card {
    position: absolute;
    width: 250px;
    padding: 1.7rem 1.4rem 1.5rem;
    border-radius: 20px;
    text-align: center;
    z-index: 1;
    will-change: transform;
    transform-style: preserve-3d;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(160deg, #0e111f 0%, #04050a 100%) padding-box,
                linear-gradient(135deg, rgba(255, 62, 62, .85), rgba(255, 118, 62, .4), rgba(255, 118, 62, .6)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 26px 55px rgba(0, 0, 0, .5);
}
.sd-work-3d-card--1 {
    left: 2%;
    top: 4%;
    transform: rotateY(-18deg) rotateX(3deg) translateZ(30px);
}
.sd-work-3d-card--2 {
    left: 50%;
    top: 50%;
    margin-left: -125px;
    margin-top: -125px;
    transform: rotateY(2deg) rotateX(4deg) translateZ(80px);
}
.sd-work-3d-card--3 {
    right: 2%;
    bottom: 4%;
    transform: rotateY(18deg) rotateX(-3deg) translateZ(30px);
}
.sd-work-3d-num {
    font-family: var(--font-display);
    font-size: 54px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, rgba(255, 62, 62, .95), rgba(255, 118, 62, .55));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sd-work-3d-icon {
    width: 64px; height: 64px;
    display: grid;
    place-items: center;
    margin: .95rem auto;
    border-radius: 16px;
    font-size: 26px;
    color: var(--white);
    background: var(--gradient-primary);
    box-shadow: 0 12px 26px rgba(255, 62, 62, .4);
}
.sd-work-3d-card h4 { font-size: 17px; font-weight: 700; margin: 0; }

/* --------------------------------------------------------------------------
   9. Reviews
   -------------------------------------------------------------------------- */
.sd-reviews { overflow: hidden; position: relative; }
.sd-reviews-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.sd-reviews-orb--a {
    top: 8%; left: -10%;
    width: 44vw; height: 44vw;
    max-width: 560px; max-height: 560px;
    background: radial-gradient(circle, rgba(255, 62, 62, .22) 0%, rgba(255, 62, 62, 0) 70%);
}
.sd-reviews-orb--b {
    bottom: -10%; right: -8%;
    width: 40vw; height: 40vw;
    max-width: 520px; max-height: 520px;
    background: radial-gradient(circle, rgba(255, 118, 62, .2) 0%, rgba(255, 118, 62, 0) 70%);
}
.sd-reviews .container { position: relative; z-index: 1; }

.sd-rating-summary {
    display: flex;
    justify-content: center;
    margin-bottom: 2.6rem;
}
.sd-rating-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: .9rem 1.6rem;
    border-radius: 999px;
    background: var(--gradient-glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.sd-rating-google { font-size: 26px; color: var(--accent); }
.sd-rating-score { display: flex; align-items: center; gap: .6rem; }
.sd-rating-score strong {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: var(--white);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sd-rating-stars { color: var(--secondary); font-size: 14px; letter-spacing: 2px; }
.sd-rating-note { color: var(--muted); font-size: 13.5px; }

.sd-review-slider { overflow: hidden; padding: 1rem .25rem; }
.sd-review-track {
    display: flex;
    gap: 1.5rem;
    transition: transform .7s cubic-bezier(.4, .2, .2, 1);
    will-change: transform;
}
.sd-review-card {
    position: relative;
    flex: 0 0 100%;
    border-radius: 18px;
    padding: 1.9rem;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(14, 17, 31, .9), rgba(7, 9, 19, .95)) padding-box,
                linear-gradient(135deg, rgba(255, 62, 62, .55), rgba(255, 118, 62, .25), rgba(255, 118, 62, .45)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .4);
}
@media (min-width: 768px) { .sd-review-card { flex-basis: calc(50% - .75rem); } }
@media (min-width: 1100px) { .sd-review-card { flex-basis: calc(33.333% - 1rem); } }

.sd-review-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 0%, rgba(255, 62, 62, .12), transparent 42%);
    pointer-events: none;
}
.sd-review-quote {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    font-size: 62px;
    line-height: 1;
    color: rgba(255, 62, 62, .14);
    pointer-events: none;
}
.sd-review-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sd-review-stars { color: var(--secondary); font-size: 15px; letter-spacing: 2px; }
.sd-review-badge {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--gradient-glass);
    border: 1px solid var(--glass-border);
    color: var(--accent);
    font-size: 15px;
}
.sd-review-text {
    position: relative;
    z-index: 1;
    color: var(--off-white);
    font-size: 15px;
    line-height: 1.7;
    margin: 1rem 0;
}
.sd-review-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .8rem;
}
.sd-review-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--white);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(255, 62, 62, .4);
}
.sd-review-name { font-weight: 700; color: var(--white); font-size: 15px; }
.sd-review-date { color: var(--muted); font-size: 12.5px; }
.sd-review-date i { color: var(--success); margin-right: .3rem; }

.sd-slider-nav { display: flex; gap: .8rem; justify-content: center; margin-top: 2.4rem; }
.sd-slider-nav button {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box,
                linear-gradient(90deg, var(--accent), var(--secondary), var(--accent)) border-box;
    color: var(--white);
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease;
}
.sd-slider-nav button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(255, 62, 62, .4);
}

/* --------------------------------------------------------------------------
   10. Newsletter CTA
   -------------------------------------------------------------------------- */
.sd-newsletter-wrap { padding-top: 1rem; }
.sd-newsletter {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 1px solid rgba(255, 118, 62, .38);
    border-radius: calc(var(--radius) + 6px);
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 62, 62, .2), transparent 30%),
        linear-gradient(135deg, rgba(20, 18, 34, .98), rgba(7, 9, 19, .98));
    box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
}
.sd-newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .28;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 118, 62, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .12) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(ellipse at 12% 50%, #000 8%, transparent 68%);
    -webkit-mask-image: radial-gradient(ellipse at 12% 50%, #000 8%, transparent 68%);
}
.sd-newsletter::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -20%;
    right: -5%;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255, 118, 62, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255, 118, 62, .035), 0 0 0 44px rgba(255, 118, 62, .025);
    pointer-events: none;
}
.sd-newsletter-orb { position: absolute; z-index: -1; display: block; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.sd-newsletter-orb--one { top: 12%; right: 29%; width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 24px 8px rgba(255, 62, 62, .42); }
.sd-newsletter-orb--two { right: 8%; bottom: 16%; width: 5px; height: 5px; background: var(--secondary); box-shadow: 0 0 20px 7px rgba(255, 118, 62, .38); }
.sd-newsletter-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.sd-newsletter-copy { max-width: 630px; }
.sd-newsletter-eyebrow,
.sd-newsletter-form-label { display: inline-flex; align-items: center; gap: .55rem; color: var(--secondary); font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sd-newsletter-eyebrow i { font-size: 13px; }
.sd-newsletter h2 { max-width: 580px; margin: .8rem 0 1rem; color: var(--white); font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.sd-newsletter h2 span { color: var(--secondary); }
.sd-newsletter-copy > p { max-width: 540px; margin-bottom: 1.45rem; color: rgba(248, 250, 252, .72); font-size: 15px; line-height: 1.75; }
.sd-newsletter-points { display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; color: rgba(248, 250, 252, .8); font-size: 12px; font-weight: 700; }
.sd-newsletter-points span { display: inline-flex; align-items: center; gap: .45rem; }
.sd-newsletter-points i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255, 118, 62, .5); border-radius: 50%; color: var(--secondary); font-size: 9px; }
.sd-newsletter-form-card { position: relative; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid rgba(255, 118, 62, .3); border-radius: 18px; background: rgba(4, 5, 10, .72); box-shadow: 0 16px 42px rgba(0, 0, 0, .22); }
.sd-newsletter-form-card::before { content: ''; position: absolute; top: -1px; right: 16%; left: 16%; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--accent), var(--secondary), transparent); }
.sd-newsletter-form-copy { margin: .55rem 0 1.1rem; color: var(--muted); font-size: 13px; line-height: 1.6; }
.sd-newsletter form { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.sd-newsletter-input-wrap { position: relative; }
.sd-newsletter-input-wrap > i { position: absolute; top: 50%; left: 1rem; z-index: 2; color: var(--secondary); transform: translateY(-50%); pointer-events: none; }
.sd-newsletter .form-control { min-height: 50px; padding: .8rem 1rem .8rem 2.7rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; background: rgba(14, 17, 31, .92); color: var(--white); box-shadow: none; }
.sd-newsletter .form-control::placeholder { color: rgba(148, 163, 184, .72); }
.sd-newsletter .form-control:focus { border-color: var(--secondary); background: rgba(14, 17, 31, .98); box-shadow: 0 0 0 3px rgba(255, 118, 62, .12); }
.sd-newsletter .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 50px; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(var(--navy-dark), var(--navy-dark)) padding-box, linear-gradient(90deg, var(--accent), var(--secondary)) border-box; color: var(--white); font-weight: 800; }
.sd-newsletter .sd-btn i { color: var(--secondary); transition: transform .25s ease; }
.sd-newsletter .sd-btn:hover { background: linear-gradient(var(--navy), var(--navy)) padding-box, linear-gradient(90deg, var(--secondary), var(--accent)) border-box; color: var(--white); }
.sd-newsletter .sd-btn:hover i { transform: translateX(4px); }
.sd-newsletter .sd-btn:disabled { opacity: .65; cursor: wait; }
.sd-newsletter-note { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 0; color: rgba(148, 163, 184, .78); font-size: 11px; line-height: 1.5; }
.sd-newsletter-note i { color: var(--secondary); }
.sd-newsletter .sd-form-msg { display: block; min-height: 20px; margin-top: .65rem; font-size: 12px; font-weight: 700; }
.sd-newsletter .sd-form-msg.is-success { color: #ffd0be; }
.sd-newsletter .sd-form-msg.is-error { color: #ffaaa0; }
@media (max-width: 767.98px) {
    .sd-newsletter-grid { grid-template-columns: 1fr; gap: 2rem; }
    .sd-newsletter-copy { max-width: none; }
    .sd-newsletter h2 { max-width: 490px; }
    .sd-newsletter::after { right: -28%; width: 280px; height: 280px; }
}

/* --------------------------------------------------------------------------
   11. Inner page hero
   -------------------------------------------------------------------------- */
.sd-page-hero {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 62, 62, .14), transparent 32%),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
    padding: calc(var(--nav-height) + 4.5rem) 0 5rem;
    overflow: hidden;
}
.sd-page-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: -4;
    background-image: url('../img/home/pattern.png');
    background-position: center;
    background-size: cover;
    opacity: .18;
    pointer-events: none;
}
.sd-page-hero-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .42;
    background-image: linear-gradient(rgba(255, 118, 62, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .1) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, #000 10%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 78%);
    transform: perspective(700px) rotateX(58deg) scale(1.35) translateY(26%);
    transform-origin: center bottom;
}
.sd-page-hero-content { position: relative; z-index: 2; }
.sd-page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .85rem;
    color: var(--secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}
.sd-page-hero-eyebrow::before,
.sd-page-hero-eyebrow::after { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--secondary)); }
.sd-page-hero-eyebrow::after { transform: rotate(180deg); }
.sd-page-hero-title { position: relative; font-size: clamp(38px, 5.2vw, 62px); font-weight: 800; letter-spacing: -.04em; text-shadow: 0 12px 38px rgba(0, 0, 0, .32); }
.sd-page-hero-title::after { content: ''; display: block; width: 54px; height: 3px; margin: 1rem auto 0; border-radius: 99px; background: var(--gradient-primary); box-shadow: 0 0 22px rgba(255, 62, 62, .55); }
.sd-page-hero-orb { position: absolute; z-index: -2; width: 260px; height: 260px; border-radius: 50%; filter: blur(72px); opacity: .24; pointer-events: none; will-change: transform; }
.sd-page-hero-orb--one { top: -150px; left: 10%; background: var(--accent); }
.sd-page-hero-orb--two { right: 8%; bottom: -170px; width: 320px; height: 320px; background: var(--secondary); }
.sd-page-hero-scan { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--secondary), transparent); opacity: .72; box-shadow: 0 0 24px rgba(255, 62, 62, .48); pointer-events: none; }
.sd-page-hero-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sd-page-hero-particles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 12px rgba(255, 118, 62, .7); opacity: .7; will-change: transform, opacity; }
.sd-page-hero-particles i:nth-child(1) { top: 24%; left: 13%; }
.sd-page-hero-particles i:nth-child(2) { top: 30%; right: 18%; width: 3px; height: 3px; background: var(--accent); }
.sd-page-hero-particles i:nth-child(3) { top: 68%; left: 22%; width: 3px; height: 3px; }
.sd-page-hero-particles i:nth-child(4) { top: 74%; right: 12%; }
.sd-page-hero-particles i:nth-child(5) { top: 44%; left: 8%; width: 2px; height: 2px; }
.sd-page-hero-particles i:nth-child(6) { top: 18%; right: 34%; width: 2px; height: 2px; background: var(--accent); }
.sd-page-hero-particles i:nth-child(7) { top: 82%; left: 42%; width: 2px; height: 2px; }
.sd-page-hero-particles i:nth-child(8) { top: 58%; right: 6%; width: 3px; height: 3px; }
.sd-page-hero-beams { position: absolute; inset: -20%; z-index: -2; overflow: hidden; pointer-events: none; opacity: .35; }
.sd-page-hero-beams i { position: absolute; top: -20%; width: 1px; height: 145%; background: linear-gradient(180deg, transparent, var(--accent), transparent); transform: rotate(28deg); filter: blur(.2px); box-shadow: 0 0 14px rgba(255, 62, 62, .5); will-change: transform, opacity; }
.sd-page-hero-beams i:first-child { left: 32%; }
.sd-page-hero-beams i:last-child { left: 68%; background: linear-gradient(180deg, transparent, var(--secondary), transparent); box-shadow: 0 0 14px rgba(255, 118, 62, .45); }
.sd-page-hero-data { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .58; }
.sd-page-hero-data-node { position: absolute; width: 7px; height: 7px; border: 1px solid var(--secondary); border-radius: 50%; background: var(--navy); box-shadow: 0 0 14px rgba(255, 118, 62, .7); will-change: transform, opacity; }
.sd-page-hero-data-node--one { top: 36%; left: 22%; }
.sd-page-hero-data-node--two { top: 54%; right: 24%; border-color: var(--accent); }
.sd-page-hero-data-node--three { top: 70%; left: 34%; width: 5px; height: 5px; }
.sd-page-hero-data-line { position: absolute; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(255, 118, 62, .65), transparent); opacity: .55; }
.sd-page-hero-data-line--one { top: 38%; left: 22%; width: 120px; transform: rotate(18deg); }
.sd-page-hero-data-line--two { top: 56%; right: 24%; width: 150px; transform: rotate(154deg); background: linear-gradient(90deg, rgba(255, 62, 62, .6), transparent); }
.sd-page-hero-subtitle {
    max-width: 720px;
    margin: .85rem auto 0;
    color: var(--muted);
    font-size: 15px;
    letter-spacing: .04em;
}
.sd-breadcrumb { margin-top: 1rem; }
.sd-breadcrumb .breadcrumb-item,
.sd-breadcrumb .breadcrumb-item a { color: var(--muted); font-size: 15px; }
.sd-breadcrumb .breadcrumb-item.active { color: var(--accent); }
.sd-breadcrumb .breadcrumb-item a:hover { color: var(--accent); }
.sd-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }

/* --------------------------------------------------------------------------
   12. About page
   -------------------------------------------------------------------------- */
.sd-about-block-wrap { overflow: hidden; }
.sd-about-block { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 2; }
.sd-about-bg-code {
    position: absolute;
    top: 16%;
    left: 2%;
    z-index: 0;
    display: grid;
    gap: .35rem;
    max-width: 360px;
    color: rgba(255, 118, 62, .42);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .02em;
    opacity: .56;
    transform: rotate(-7deg);
    pointer-events: none;
    user-select: none;
}
.sd-about-bg-code span { white-space: nowrap; }
.sd-about-bg-code b { color: var(--accent); font-weight: 700; }
.sd-about-bg-code em { color: var(--secondary); font-style: normal; }
.sd-about-code-indent { padding-left: 1.5rem; color: rgba(248, 250, 252, .28); }
.sd-about-bg-ui {
    position: absolute;
    right: 2%;
    bottom: 10%;
    z-index: 1;
    width: min(230px, 22vw);
    min-height: 142px;
    padding: .7rem;
    border: 1px solid rgba(255, 118, 62, .2);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(14, 17, 31, .72), rgba(7, 9, 19, .38));
    box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
    opacity: .48;
    transform: rotate(7deg);
    pointer-events: none;
    user-select: none;
}
.sd-about-bg-ui-top { display: flex; align-items: center; gap: .25rem; color: rgba(226, 232, 240, .45); font-family: var(--font-mono); font-size: 8px; }
.sd-about-bg-ui-top i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.sd-about-bg-ui-top i:nth-child(2) { background: var(--secondary); }
.sd-about-bg-ui-top i:nth-child(3) { background: rgba(255, 255, 255, .35); }
.sd-about-bg-ui-top b { margin-left: .25rem; font-weight: 500; }
.sd-about-bg-ui-title,
.sd-about-bg-ui-line { display: block; height: 6px; margin-top: 1rem; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 62, 62, .7), rgba(255, 118, 62, .55)); }
.sd-about-bg-ui-line { width: 58%; height: 4px; margin-top: .45rem; background: rgba(148, 163, 184, .32); }
.sd-about-bg-ui-line--wide { width: 78%; }
.sd-about-bg-ui-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: 1.1rem; }
.sd-about-bg-ui-blocks i { display: block; height: 40px; border: 1px solid rgba(255, 118, 62, .2); border-radius: 6px; background: rgba(255, 62, 62, .08); }
.sd-about-bg-orb { position: absolute; z-index: 0; width: 170px; height: 170px; border-radius: 50%; filter: blur(42px); opacity: .18; pointer-events: none; }
.sd-about-bg-orb--one { top: -70px; right: 32%; background: var(--accent); }
.sd-about-bg-orb--two { right: 10%; bottom: -90px; width: 220px; height: 220px; background: var(--secondary); }
.sd-about-block-wrap .sd-h2,
.sd-who .sd-h2 { color: var(--white); }
.sd-about-block-wrap .sd-lead,
.sd-who .sd-lead,
.sd-about-block-wrap p,
.sd-who p { color: var(--muted); }
.sd-about-block-wrap img {
    border: 1px solid rgba(255, 118, 62, .35);
    box-shadow: 0 24px 60px rgba(255, 62, 62, .22) !important;
}
.sd-who .sd-value-card {
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border-color: rgba(255, 118, 62, .18);
}
.sd-who .sd-value-card i { color: var(--accent); }
.sd-value-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2rem; }
.sd-value-card {
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
    padding: 1.8rem;
}
.sd-value-card i { color: var(--accent); font-size: 26px; margin-bottom: .8rem; }
.sd-value-card h6 { font-weight: 600; font-size: 17px; }
.sd-value-card p { color: var(--muted); font-size: 14px; margin: 0; }

.sd-achievements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2rem; }
.sd-achievements::before { content: 'A few numbers from the work I’ve done and the way I work.'; grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; line-height: 1.6; text-align: center; margin-bottom: .2rem; }
.sd-achieve {
    min-height: 162px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border: 1px solid rgba(255, 118, 62, .14);
    border-radius: var(--radius);
    padding: 2rem 1rem;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sd-achieve:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 118, 62, .48);
    box-shadow: 0 18px 36px rgba(255, 62, 62, .14);
}
.sd-achieve-count {
    margin-bottom: .55rem;
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sd-achieve span { color: var(--muted); font-size: 13px; line-height: 1.35; }

.sd-partners {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.6rem;
    align-items: center;
    margin-top: 2rem;
}
.sd-partners img {
    width: 100%;
    opacity: .55;
    filter: grayscale(1);
    transition: all .35s ease;
}
.sd-partners img:hover { opacity: 1; filter: none; }
.sd-partners-intro { max-width: 760px; margin: 0 auto 2.2rem; }
.sd-partners-intro .sd-lead { max-width: 680px; }
.sd-partner-card {
    min-height: 112px;
    display: grid;
    place-items: center;
    padding: 1.15rem 1.4rem;
    border: 1px solid rgba(255, 118, 62, .16);
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.sd-partner-card:hover,
.sd-partner-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(255, 118, 62, .55);
    background: linear-gradient(160deg, rgba(255, 62, 62, .1) 0%, var(--navy) 100%);
    box-shadow: 0 16px 34px rgba(255, 62, 62, .16);
}
.sd-partner-card img {
    width: 100%;
    max-width: 170px;
    max-height: 54px;
    object-fit: contain;
    opacity: .68;
    filter: grayscale(1) brightness(1.25);
}
.sd-partner-card:hover img,
.sd-partner-card:focus-within img {
    opacity: 1;
    filter: grayscale(0) brightness(1);
}

/* --------------------------------------------------------------------------
   13. Services page
   -------------------------------------------------------------------------- */
.sd-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.sd-about-service-groups { display: grid; gap: 2.8rem; }
.sd-about-service-group { position: relative; }
.sd-about-service-group-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; }
.sd-about-service-group-head .sd-kicker { margin: 0 0 .18rem; font-size: 11px; letter-spacing: 2px; }
.sd-about-service-group-head h3 { margin: 0; font-size: clamp(21px, 2vw, 26px); }
.sd-about-service-group-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    border: 1px solid rgba(255, 118, 62, .32);
    border-radius: 14px;
    color: var(--accent);
    background: var(--accent-soft);
}
.sd-about-service-group.is-featured { padding: 1.5rem; border: 1px solid rgba(255, 118, 62, .22); border-radius: 20px; background: linear-gradient(145deg, rgba(255, 62, 62, .08), rgba(14, 17, 31, .8)); }
.sd-about-service-group.is-featured .sd-about-service-group-head { margin-bottom: 1.4rem; }
.sd-about-service-group.is-featured .sd-service-card:first-child { border-color: rgba(255, 118, 62, .4); }

.sd-service-card {
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
    padding: 2.2rem;
    transition: transform .35s ease, border-color .35s ease;
}
.sd-service-card:hover { transform: translateY(-8px); border-color: var(--accent); }
.sd-service-card i {
    font-size: 30px;
    color: var(--accent);
    background: var(--accent-soft);
    width: 64px; height: 64px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    margin-bottom: 1.2rem;
}
.sd-service-card h5 { font-size: 20px; font-weight: 600; }
.sd-service-card p { color: var(--muted); font-size: 14.5px; }
.sd-service-card .sd-btn { margin-top: .6rem; }

.sd-approach {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 4rem;
    align-items: center;
}

/* --------------------------------------------------------------------------
   14. Service detail page
   -------------------------------------------------------------------------- */
.sd-detail-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.sd-detail-hero img { border-radius: var(--radius); box-shadow: 0 22px 60px rgba(0,0,0,.45); }
.sd-feature-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.6rem; margin-top: 2rem; }
.sd-feature {
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
    padding: 1.8rem;
}
.sd-feature i { color: var(--accent); font-size: 26px; margin-bottom: .8rem; }
.sd-feature h6 { font-weight: 600; }
.sd-feature p { color: var(--muted); font-size: 14px; margin: 0; }

/* --------------------------------------------------------------------------
   15. Contact page
   -------------------------------------------------------------------------- */
.sd-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-bottom: 3rem; }
.sd-office {
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
}
.sd-office i {
    width: 60px; height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 22px;
    margin: 0 auto 1rem;
}
.sd-office h5 { font-weight: 600; }
.sd-office p { color: var(--muted); margin-bottom: .35rem; font-size: 14.5px; }
.sd-office a { color: var(--muted); }
.sd-office a:hover { color: var(--accent); }

.sd-contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }

.sd-contact-form {
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    padding: 2.4rem;
}
.sd-contact-form .form-control,
.sd-modal .form-control,
.wws-popup .form-control {
    background: #101531;
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--white);
    border-radius: 8px;
    padding: .8rem 1rem;
}
.sd-contact-form .form-control::placeholder,
.sd-modal .form-control::placeholder,
.wws-popup .form-control::placeholder { color: var(--muted); }
.sd-contact-form .form-control:focus,
.sd-modal .form-control:focus,
.wws-popup .form-control:focus {
    background: #151a38;
    border-color: var(--accent);
    color: var(--white);
    box-shadow: 0 0 0 .2rem var(--accent-soft);
}

/* Contact Services dropdown — brand palette */
.sd-contact-form .form-select {
    appearance: none;
    min-height: 42px;
    padding: .58rem 2.5rem .58rem .75rem;
    border: 1px solid rgba(255, 118, 62, .34);
    border-radius: 8px;
    color: var(--white);
    background-color: #04050a;
    background-image: linear-gradient(45deg, transparent 50%, #ff763e 50%), linear-gradient(135deg, #ff763e 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    font-size: 13.5px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sd-contact-form .form-select:hover { border-color: rgba(255, 173, 141, .72); background-color: #0a0b12; }
.sd-contact-form .form-select:focus {
    border-color: #ff3e3e;
    outline: 0;
    color: var(--white);
    background-color: #0a0b12;
    box-shadow: 0 0 0 .2rem rgba(255, 62, 62, .18), 0 0 18px rgba(255, 118, 62, .12);
}
.sd-contact-form .form-select:invalid { color: var(--muted); }
.sd-contact-form .form-select option { color: #fff; background: #04050a; }
.sd-contact-form .form-select option:checked { color: #fff; background: #45151a; }

/* Accessible custom menu for browsers that ignore option:hover styling */
.sd-brand-select { position: relative; }
.sd-brand-select-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sd-brand-select-toggle {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .58rem .75rem;
    border: 1px solid rgba(255, 118, 62, .34);
    border-radius: 8px;
    color: var(--muted);
    background: #04050a;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.sd-brand-select-toggle i { color: #ff763e; font-size: .72rem; transition: transform .2s ease; }
.sd-brand-select.is-open .sd-brand-select-toggle,
.sd-brand-select-toggle:focus-visible { border-color: #ff3e3e; outline: 0; color: #fff; background: #0a0b12; box-shadow: 0 0 0 .2rem rgba(255, 62, 62, .18), 0 0 18px rgba(255, 118, 62, .12); }
.sd-brand-select.is-open .sd-brand-select-toggle i { transform: rotate(180deg); }
.sd-brand-select.has-value .sd-brand-select-toggle { color: #fff; }
.sd-brand-select-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    display: none;
    max-height: 250px;
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid rgba(255, 118, 62, .45);
    border-radius: 10px;
    background: #04050a;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 20px rgba(255, 62, 62, .12);
}
.sd-brand-select.is-open .sd-brand-select-menu { display: grid; gap: .12rem; }
.sd-brand-select-option {
    width: 100%;
    padding: .62rem .7rem;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, .78);
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, padding-left .15s ease;
}
.sd-brand-select-option:hover,
.sd-brand-select-option:focus-visible,
.sd-brand-select-option.is-active { padding-left: .9rem; color: #fff; background: linear-gradient(90deg, rgba(255, 62, 62, .28), rgba(255, 118, 62, .14)); outline: 0; }
.sd-brand-select-option[aria-selected="true"] { color: #fff; background: rgba(255, 118, 62, .16); }

.sd-contact-form .form-check-input { background-color: #101531; border-color: rgba(255,255,255,.3); }
.sd-contact-form .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

.sd-why-choose { color: var(--muted); }
.sd-why-choose li { margin-bottom: 1.1rem; display: flex; gap: .8rem; }
.sd-why-choose li i { color: var(--accent); margin-top: .3rem; }

.sd-map { border-radius: var(--radius); overflow: hidden; line-height: 0; }
.sd-map iframe { width: 100%; height: 360px; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }

/* --------------------------------------------------------------------------
   16. Blog cards
   -------------------------------------------------------------------------- */
.sd-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.sd-blog-card {
    background: linear-gradient(160deg, var(--navy-mid) 0%, var(--navy) 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sd-blog-card:hover { transform: translateY(-8px); border-color: var(--accent); }
.sd-blog-thumb { overflow: hidden; }
.sd-blog-thumb img { width: 100%; height: 210px; object-fit: cover; transition: transform .6s ease; }
.sd-blog-card:hover .sd-blog-thumb img { transform: scale(1.08); }
.sd-blog-body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.sd-blog-cat {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: .3rem .7rem;
    border-radius: 30px;
    align-self: flex-start;
    margin-bottom: .8rem;
}
.sd-blog-body h5 { font-size: 18px; font-weight: 600; margin-bottom: .6rem; }
.sd-blog-body h5 a { color: var(--white); }
.sd-blog-body h5 a:hover { color: var(--accent); }
.sd-blog-body p { color: var(--muted); font-size: 14px; flex: 1; }
.sd-blog-meta { color: var(--muted); font-size: 12.5px; margin-top: 1rem; }
.sd-blog-meta i { color: var(--accent); margin-right: .3rem; }

.sd-blog-article .sd-blog-cover { border-radius: var(--radius); margin: 2rem 0; }
.sd-blog-article h1 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: .8rem; }
.sd-blog-article .sd-blog-meta { font-size: 14px; margin-bottom: 1.5rem; }
.sd-blog-article p { color: var(--muted); margin-bottom: 1.2rem; }
.sd-blog-article h3 { font-size: 22px; margin: 1.6rem 0 .8rem; }
.sd-blog-article ul { color: var(--muted); margin-bottom: 1.2rem; padding-left: 1.2rem; }
.sd-blog-article li { margin-bottom: .5rem; }

.sd-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; }
.sd-pagination .page-link {
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color: var(--white);
    border-radius: 8px !important;
    padding: .5rem 1rem;
}
.sd-pagination .page-item.active .page-link { background: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.sd-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 4.5rem;
}
.sd-footer::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 12% 8%, rgba(255, 62, 62, .18), transparent 34%), radial-gradient(ellipse at 88% 18%, rgba(255, 118, 62, .13), transparent 32%), linear-gradient(125deg, transparent 0%, rgba(255, 255, 255, .025) 46%, transparent 47%, transparent 100%);
}
.sd-footer::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: -180px;
    right: 8%;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 118, 62, .18), transparent 66%);
    filter: blur(18px);
}
.sd-footer > * { position: relative; z-index: 1; }
.sd-footer-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 1.3rem;
    position: relative;
    padding-bottom: .6rem;
}
.sd-footer-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 36px; height: 3px;
    border-radius: 3px;
    background: var(--accent);
}
.sd-footer-about { color: var(--muted); font-size: 14.5px; }

.sd-socials { display: flex; flex-wrap: wrap; gap: .65rem; }
.sd-socials a {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 118, 62, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    color: var(--off-white);
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sd-socials a:hover, .sd-socials a:focus-visible { background: linear-gradient(135deg, var(--brand-red), var(--accent)); border-color: var(--accent-soft); color: var(--white); transform: translateY(-3px); }

.sd-footer-links { list-style: none; padding: 0; margin: 0; }
.sd-footer-links li { margin-bottom: .35rem; }
.sd-footer-links a { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .32rem .45rem; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 400; transition: background-color .2s ease, color .2s ease, padding-left .2s ease; }
.sd-footer-links a:hover, .sd-footer-links a:focus-visible { padding-left: .7rem; background: rgba(255, 62, 62, .075); color: var(--white); }
.sd-footer-link-label { display: inline-flex; align-items: center; min-width: 0; gap: .55rem; }
.sd-footer-link-label i { width: 16px; flex: 0 0 16px; color: var(--accent); font-size: 12px; text-align: center; }
.sd-footer-link-label span { overflow-wrap: anywhere; }
.sd-footer-link-arrow { flex: 0 0 auto; color: rgba(255, 173, 141, .62); font-size: 10px; transition: transform .2s ease, color .2s ease; }
.sd-footer-links a:hover .sd-footer-link-arrow, .sd-footer-links a:focus-visible .sd-footer-link-arrow { color: var(--accent); transform: translate(2px, -2px); }

.sd-footer-contact { list-style: none; padding: 0; margin: 0; }
.sd-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 1rem;
}
.sd-footer-contact a { color: var(--muted); }
.sd-footer-contact a:hover { color: var(--accent); }
.sd-footer-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 15px;
}

.sd-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 3.5rem;
    padding: 1.2rem 0;
    text-align: center;
}
.sd-footer-bottom p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sd-footer-contact li { min-width: 0; }
.sd-footer-contact a { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   18. WhatsApp widget
   -------------------------------------------------------------------------- */
.wws-widget { position: fixed; right: 22px; bottom: 22px; z-index: 2000; }

.wws-button {
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--whatsapp);
    color: var(--white);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    padding: .85rem 1.4rem;
    border-radius: 50px;
    box-shadow: 0 12px 34px rgba(34, 193, 94, .45);
    transition: transform .3s ease;
}
.wws-button:hover { transform: scale(1.06); }
.wws-button .fa-whatsapp { font-size: 24px; }
.wws-button-close { display: none; }

.wws-widget.is-open .wws-button-open { display: none; }
.wws-widget.is-open .wws-button-close { display: inline-block; font-size: 18px; }
.wws-widget.is-open .wws-button { border-radius: 50%; padding: .95rem 1.05rem; }

.wws-popup {
    position: absolute;
    right: 0; bottom: 78px;
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #fff;
    color: #222;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: translateY(24px) scale(.95);
    transform-origin: bottom right;
    visibility: hidden;
    transition: all .45s cubic-bezier(.4, .2, .2, 1);
}
.wws-widget.is-open .wws-popup { opacity: 1; transform: none; visibility: visible; }

.wws-popup-header {
    display: flex;
    gap: .8rem;
    align-items: center;
    padding: 1.1rem;
    background: linear-gradient(135deg, var(--whatsapp), #14803f);
    color: #fff;
}
.wws-header-text { flex: 1; min-width: 0; }
.wws-header-text strong { display: block; font-size: 15px; }
.wws-header-text span { font-size: 12px; opacity: .92; }
.wws-close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 18px; }

.wws-popup-body { padding: 1.1rem; }
.wws-popup-body label { font-size: 13px; font-weight: 600; margin-bottom: .3rem; }
.wws-popup-body .form-control { margin-bottom: .8rem; }
.wws-gdpr { margin: .4rem 0 .9rem; }
.wws-gdpr a { color: var(--whatsapp); }
.wws-send {
    width: 100%;
    background: var(--whatsapp);
    border: 0;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    padding: .75rem;
}
.wws-send:hover { background: #189b4a; color: #fff; }
.wws-success { text-align: center; padding: 1.4rem 0; color: #1f7a3d; }
.wws-success i { font-size: 44px; display: block; margin-bottom: .6rem; }

/* --------------------------------------------------------------------------
   19. Modal (enquiry) - hero-style background
   -------------------------------------------------------------------------- */
.sd-modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%) padding-box,
                linear-gradient(135deg, var(--accent), var(--pink), var(--purple), var(--accent)) border-box;
    color: var(--off-white);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.sd-modal-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 120% 100% at 50% 0%, #000 30%, transparent 75%);
    pointer-events: none;
}
.sd-modal-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
.sd-modal-aurora--a {
    top: -18%; right: -10%;
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(255, 62, 62, .38) 0%, rgba(255, 62, 62, 0) 70%);
}
.sd-modal-aurora--b {
    bottom: -25%; left: -10%;
    width: 55%; height: 55%;
    background: radial-gradient(circle, rgba(255, 118, 62, .32) 0%, rgba(255, 118, 62, 0) 70%);
}

.sd-modal-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.1rem 1.3rem .85rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sd-modal-head-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 16px;
    color: var(--white);
    background: var(--gradient-primary);
    box-shadow: 0 12px 28px rgba(255, 62, 62, .4);
}
.sd-modal-head-text { flex: 1 1 auto; min-width: 0; }
.sd-modal-head .modal-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}
.sd-modal-head-sub {
    color: var(--muted);
    font-size: 13px;
    margin: .1rem 0 0;
}
.sd-modal-head .btn-close {
    flex: 0 0 auto;
    filter: invert(1);
    margin-top: 0;
    opacity: .8;
    transition: opacity .25s ease, transform .25s ease;
}
.sd-modal-head .btn-close:hover { opacity: 1; transform: rotate(90deg); }

.sd-modal .modal-body {
    position: relative;
    padding: 1rem 1.3rem 1.3rem;
}
.sd-modal .form-label { font-size: 13px; font-weight: 600; margin-bottom: .35rem; }
.sd-modal .form-control,
.sd-modal .input-group-text {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--off-white);
    padding: .52rem .8rem;
    font-size: 14px;
}
.sd-modal .form-control::placeholder { color: rgba(185, 189, 207, .55); }
.sd-modal .form-control:focus {
    background: rgba(255, 255, 255, .07);
    border-color: var(--accent);
    box-shadow: 0 0 0 .18rem var(--accent-soft);
    color: var(--white);
}
.sd-modal .input-group-text {
    color: var(--accent);
    border-right: 0;
    border-radius: 10px 0 0 10px;
}
.sd-modal .input-group .form-control { border-left: 0; border-radius: 0 10px 10px 0; }

/* Service selection chips */
.sd-chip {
    width: 100%;
    border: 1.5px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    padding: .42rem .6rem;
    transition: all .25s ease;
    overflow: hidden;
}
.sd-chip:hover { border-color: var(--accent); color: var(--white); }
.sd-modal .btn-check:checked + .sd-chip {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--white);
    box-shadow: 0 8px 20px rgba(255, 62, 62, .35);
}

.sd-form-msg { font-size: 14px; }
.sd-form-msg.is-success { color: var(--success); }
.sd-form-msg.is-error { color: #f87171; }

/* --------------------------------------------------------------------------
   20. Code cursor + low-opacity code trail
   -------------------------------------------------------------------------- */
body.sd-code-cursor-enabled,
body.sd-code-cursor-enabled a,
body.sd-code-cursor-enabled button,
body.sd-code-cursor-enabled [role="button"] { cursor: none; }

.sd-cursor,
.sd-code-trail {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
}

.sd-cursor {
    z-index: 10000;
    width: 18px;
    height: 18px;
    border: 1px solid var(--accent);
    border-radius: 5px;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
    box-shadow: 0 0 18px rgba(255, 62, 62, .35);
}

.sd-cursor::before {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--accent-light);
    content: ">_";
    font: 700 8px/1 "JetBrains Mono", monospace;
    letter-spacing: -1px;
    transform: translate(-50%, -50%);
}

.sd-code-cursor-enabled .sd-cursor.is-active { opacity: 1; }
.sd-cursor.is-grow { width: 28px; height: 28px; border-color: var(--accent-light); background: rgba(255, 118, 62, .1); }

.sd-code-trail {
    z-index: 9999;
    color: var(--accent-light);
    font: 700 10px/1 "JetBrains Mono", "Courier New", monospace;
    letter-spacing: .02em;
    opacity: 0;
    text-shadow: 0 0 12px rgba(255, 62, 62, .6);
    transform: translate(-50%, -50%);
    transition: opacity .25s ease, color .25s ease;
}

.sd-code-cursor-enabled .sd-code-trail.is-active { opacity: .18; }
.sd-code-trail--0 { color: var(--accent); font-size: 12px; }
.sd-code-trail--1 { color: var(--accent-light); }
.sd-code-trail--2 { color: var(--accent-soft); }
.sd-code-trail--3 { color: var(--accent-light); font-size: 9px; }
.sd-code-trail--4 { color: var(--accent); font-size: 9px; }
.sd-code-trail--5 { color: var(--accent-soft); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
    body.sd-code-cursor-enabled,
    body.sd-code-cursor-enabled a,
    body.sd-code-cursor-enabled button,
    body.sd-code-cursor-enabled [role="button"] { cursor: auto; }
    .sd-cursor,
    .sd-code-trail { display: none; }
}

/* --------------------------------------------------------------------------
   21. GSAP / reveal animation states
   -------------------------------------------------------------------------- */
[data-sd-anim] { opacity: 1; transform: none; }
.sd-motion-ready [data-sd-anim] { opacity: 0; will-change: transform, opacity; }
.sd-motion-ready [data-sd-anim="fadeInUp"] { transform: translateY(48px); }
.sd-motion-ready [data-sd-anim="fadeInDown"] { transform: translateY(-48px); }
.sd-motion-ready [data-sd-anim="fadeInRight"] { transform: translateX(48px); }
.sd-motion-ready [data-sd-anim="fadeInLeft"] { transform: translateX(-48px); }
.sd-motion-ready [data-sd-anim="zoomIn"] { transform: scale(.8); }
/* The homepage hero H1 is the LCP element and must never be hidden by global reveals. */
.sd-motion-ready .sd-hero .sd-hero-title-outline {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    will-change: auto;
}
[data-sd-anim].sd-animated { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22. Hero polish
   -------------------------------------------------------------------------- */
/* Ambient aurora blobs are GSAP-driven (.sd-aurora above) */

.sd-hero h1 { text-wrap: balance; }

.sd-hero-sub {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.sd-hero-sub::before {
    content: '';
    width: 34px; height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

/* Phone glow + levitation-ready */
.sd-hero-media img { position: relative; z-index: 1; }
.sd-hero-media::after {
    content: '';
    position: absolute;
    inset: 14% 10% -4%;
    background: radial-gradient(ellipse at center, rgba(255, 62, 62, .38) 0%, rgba(255, 62, 62, 0) 70%);
    filter: blur(16px);
    z-index: 0;
    animation: sd-media-glow 6s ease-in-out infinite;
}
@keyframes sd-media-glow {
    0%, 100% { opacity: .75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.07); }
}

/* Button shine sweep */
.sd-btn { position: relative; overflow: hidden; }
.sd-btn i { transition: transform .3s ease; }
.sd-btn:hover i { transform: translateX(4px); }
.sd-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -85%;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
}
.sd-btn:hover::after { left: 135%; }

/* Scroll-down cue */
.sd-scroll-cue {
    position: absolute;
    bottom: 1.8rem; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 42px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
    z-index: 3;
    transition: border-color .3s ease;
}
.sd-scroll-cue:hover { border-color: var(--accent); }
.sd-scroll-cue-dot {
    width: 4px; height: 8px;
    border-radius: 4px;
    background: var(--accent);
    animation: sd-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes sd-scroll-dot {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
/* Partner section responsive layout */
@media (max-width: 991.98px) {
    .sd-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (max-width: 575.98px) {
    .sd-partners-intro { margin-bottom: 1.6rem; }
    .sd-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .sd-partner-card { min-height: 92px; padding: .85rem .7rem; }
    .sd-partner-card img { max-width: 132px; max-height: 42px; }
}

/* Final shared typography scale for content boxes */
.sd-tilt-body p,
.sd-why-item p,
.sd-industry-card p,
.sd-faq-accordion .accordion-body,
.sd-port-item-body p,
.sd-success-card > p,
.sd-review-text,
.sd-newsletter p,
.sd-value-card p,
.sd-service-card p,
.sd-feature p,
.sd-office p,
.sd-blog-body p,
.sd-blog-article p {
    font-size: 14.5px;
    line-height: 1.6;
}
.sd-hero p.lead,
.sd-hero-proof { font-size: 16px; }

@media (max-width: 991.98px) {
    .sd-header .navbar-collapse {
        background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
        border-radius: var(--radius);
        padding: 1rem;
        margin-top: .8rem;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    }
    .sd-mega-menu {
        position: static;
        width: 100%;
        max-width: none;
        padding: .75rem 0 0;
        transform: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .sd-mega-head { align-items: flex-start; padding-inline: 0; }
    .sd-mega-head strong { font-size: 13px; }
    .sd-mega-view-all { display: none; }
    .sd-mega-grid { grid-template-columns: 1fr 1fr; padding: .75rem 0; }
    .sd-mega-item { min-height: 0; padding: .65rem; }
    .sd-mega-foot { padding-inline: 0; }
    .sd-services-intro,
    .sd-about-block,
    .sd-approach,
    .sd-detail-hero,
    .sd-contact-wrap,
    .sd-why-grid,
    .sd-faq-grid { grid-template-columns: 1fr; gap: 2rem; }
    .sd-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-port-grid { grid-template-columns: repeat(2, 1fr); }
    .sd-services-grid,
    .sd-feature-grid,
    .sd-offices { grid-template-columns: 1fr 1fr; }
    .sd-blog-grid { grid-template-columns: 1fr 1fr; }
    .sd-achievements { grid-template-columns: repeat(2, 1fr); }
    .sd-partners { grid-template-columns: repeat(3, 1fr); }
    .sd-hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + 3rem);
        padding-bottom: 4.5rem;
    }
    .sd-hero .row { --bs-gutter-y: 2rem; }
    .sd-hero-actions { margin-top: 1.35rem; }
    .sd-header .navbar-collapse { align-items: stretch; }
    .sd-header-cta {
        width: 100%;
        justify-content: center;
        margin: .75rem 0 0;
        padding-left: 0;
    }
    .sd-about-media { max-width: 480px; margin-inline: auto; }
    .sd-about-chips { right: 0; }
    .sd-about-circle { right: 0; }
    .sd-work-3d {
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        transform: none !important;
    }
    .sd-work-3d::before { display: none; }
    .sd-work-3d-card {
        position: static;
        width: 100%;
        margin: 0 !important;
        transform: none !important;
        padding: 1.4rem 1rem;
    }
    .sd-work-3d-num { font-size: 42px; }
    .sd-work-3d-icon { width: 54px; height: 54px; font-size: 22px; }
    .sd-success-scene { min-height: 440px; }
    .sd-success-chip--1 { right: 0; }
    .sd-success-chip--2 { left: 0; }
}

@media (max-width: 767.98px) {
    .sd-footer { padding-top: 3.75rem; }
    .sd-footer .row { --bs-gutter-y: 2.35rem; }
    .sd-footer-title { margin-bottom: 1rem; }
    .sd-footer-bottom { margin-top: 2.75rem; }
    .sd-hero h1 { font-size: clamp(30px, 8vw, 40px); }
    .sd-hero p.lead { font-size: 16px; }
    .sd-hero-proof { font-size: 16px; }
}

@media (max-width: 575.98px) {
    .sd-footer { padding-top: 3.15rem; }
    .sd-footer .container { padding-inline: 1.25rem; }
    .sd-footer .row { --bs-gutter-y: 2rem; }
    .sd-footer-logo img { max-width: 165px; height: auto; }
    .sd-footer-about { max-width: 34rem; font-size: 14px; line-height: 1.65; }
    .sd-socials { gap: .6rem; }
    .sd-socials a { width: 40px; height: 40px; }
    .sd-footer-links li { margin-bottom: .55rem; }
    .sd-footer-links a { font-size: 14px; }
    .sd-footer-contact li { gap: .7rem; margin-bottom: .8rem; font-size: 14px; }
    .sd-footer-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
    .sd-footer-bottom { margin-top: 2.2rem; padding: 1rem 0; }
    .sd-footer-bottom p { font-size: 12px; }
    .sd-section { padding: 4.5rem 0; }
    .sd-hero h1 { text-align: center; }
    .sd-hero-sub { justify-content: center; text-align: center; }
    .sd-hero-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    .sd-hero-trust-item { padding: .65rem .7rem; }
    .sd-hero p.lead,
    .sd-hero-proof { text-align: center; margin-left: auto; margin-right: auto; }
    .sd-hero .sd-hero-actions {
        margin-top: 1.25rem;
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
        align-items: stretch;
    }
    .sd-hero .sd-hero-actions .sd-btn {
        width: 100%;
        justify-content: center;
    }
    .sd-services-grid,
    .sd-feature-grid,
    .sd-offices,
    .sd-blog-grid { grid-template-columns: 1fr; }
    .sd-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .sd-industry-card { min-height: 0; padding: .9rem; gap: .65rem; }
    .sd-industry-icon { width: 36px; height: 36px; font-size: 14px; }
    .sd-industry-card h3 { font-size: 14px; }
    .sd-industry-card p { font-size: 14.5px; line-height: 1.6; }
    .sd-port-grid { grid-template-columns: 1fr; }
    .sd-value-cards { grid-template-columns: 1fr; }
    .sd-newsletter { padding: 2rem 1.2rem; }
    .sd-scroll-cue { display: none; }
    .sd-achievements { grid-template-columns: 1fr 1fr; }
    .sd-achievements .sd-achieve-count { font-size: 34px; }
    .sd-partners { grid-template-columns: repeat(2, 1fr); }
    .sd-cursor,
    .sd-code-trail { display: none; }
    .sd-about-media { padding: 1.1rem 1.1rem 2rem; }
    .sd-about-exp { padding: .7rem .9rem; }
    .sd-about-exp-num { font-size: 30px; }
    .sd-about-circle { width: 92px; height: 92px; }
    .sd-about-circle-text { font-size: 8.4px; }
    .sd-about-chips { top: auto; bottom: 4.4rem; right: 0; gap: .4rem; }
    .sd-about-chips li { padding: .34rem .7rem; font-size: 12px; }
    .sd-modal .modal-dialog { margin: .5rem; }
    .sd-modal-head { padding: .9rem 1rem .7rem; gap: .7rem; }
    .sd-modal-head-icon { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
    .sd-modal-head .modal-title { font-size: 17px; }
    .sd-modal-head-sub { font-size: 12px; }
    .sd-modal .modal-body { padding: .85rem 1rem 1rem; }
    .sd-work-3d { grid-template-columns: 1fr; }
    .sd-work-list { max-width: 100%; }
    .sd-success-scene { min-height: 470px; }
    .sd-success-card { padding: 2rem 1.4rem; }
    .sd-success-num { font-size: 26px; }
    .sd-success-chip { padding: .55rem .85rem; font-size: 12px; }
    .sd-success-chip--1 { top: 2%; }
    .sd-success-chip--2 { bottom: 6%; }
}

/* About Me My Goal — faint grid and rotating brand seal */
.sd-about-goal { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--navy-dark), var(--navy-mid)); }
.sd-about-goal::before { content: ''; position: absolute; inset: 0; opacity: .34; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .11) 1px, transparent 1px); background-size: 52px 52px; transform: perspective(700px) rotateX(58deg) scale(1.35) translateY(21%); transform-origin: center bottom; mask-image: linear-gradient(to top, #000 8%, transparent 82%); -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 82%); }
.sd-about-goal::after { content: ''; position: absolute; inset: 0; opacity: .45; pointer-events: none; background: radial-gradient(circle at 78% 50%, rgba(255, 62, 62, .16), transparent 25%), radial-gradient(circle at 28% 80%, rgba(255, 118, 62, .1), transparent 28%); }
.sd-about-goal .container { position: relative; z-index: 2; }
.sd-about-goal-grid { position: absolute; z-index: 1; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(circle at 78% 50%, #000, transparent 45%); -webkit-mask-image: radial-gradient(circle at 78% 50%, #000, transparent 45%); }
.sd-about-goal-glow { position: absolute; z-index: 1; width: 230px; height: 230px; border-radius: 50%; filter: blur(75px); opacity: .13; pointer-events: none; }
.sd-about-goal-glow--one { top: 8%; right: 7%; background: var(--accent); }
.sd-about-goal-glow--two { right: 34%; bottom: -28%; width: 180px; height: 180px; background: var(--secondary); opacity: .1; }
.sd-about-goal-seal { position: absolute; z-index: 3; top: 50%; right: clamp(3%, 8vw, 10%); display: grid; place-items: center; width: clamp(180px, 22vw, 250px); height: clamp(180px, 22vw, 250px); transform: translateY(-50%); pointer-events: none; }
.sd-about-goal-seal-ring { position: relative; display: block; width: 220px; height: 220px; border: 0; color: var(--secondary); background: transparent; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 1.15px; text-transform: uppercase; animation: sdGoalSealRotate 28s linear infinite; }
.sd-about-goal-name { position: absolute; top: 50%; left: 50%; display: block; width: max-content; color: var(--secondary); white-space: nowrap; text-shadow: 0 0 14px rgba(255, 118, 62, .38); transform: translate(-50%, -50%) translateY(-92px); animation: sdGoalNameCounter 28s linear infinite; }
.sd-about-goal-seal-core { display: none; }
@keyframes sdGoalNameCounter { from { transform: translate(-50%, -50%) translateY(-92px) rotate(0deg); } to { transform: translate(-50%, -50%) translateY(-92px) rotate(-360deg); } }
@keyframes sdGoalSealRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 991.98px) { .sd-about-goal-seal { right: 3%; width: 190px; height: 190px; opacity: .72; } }
@media (max-width: 767.98px) { .sd-about-goal-seal { top: auto; right: -18px; bottom: -24px; width: 155px; height: 155px; opacity: .55; transform: none; } .sd-about-goal-seal-core { width: 70px; height: 70px; } .sd-about-goal-seal-core b { font-size: 21px; } .sd-about-goal::before { background-size: 42px 42px; transform: perspective(600px) rotateX(56deg) scale(1.5) translateY(26%); } }

/* About Me My Goal — clean three-column layout */
.sd-about-goal-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(190px, .7fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.sd-about-goal-heading { min-width: 0; }
.sd-about-goal-heading .sd-h2 { max-width: 330px; margin-bottom: 0; }
.sd-about-goal-copy { min-width: 0; padding: 1.4rem 1.5rem; border-left: 2px solid rgba(255, 118, 62, .62); border-radius: 0 16px 16px 0; background: rgba(14, 17, 31, .42); }
.sd-about-goal-copy p { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-about-goal-copy .sd-lead { color: var(--off-white); }
.sd-about-goal-seal-wrap { display: grid; place-items: center; min-height: 230px; }
.sd-about-goal-seal { position: relative; top: auto; right: auto; width: 220px; height: 220px; transform: none; opacity: 1; }
.sd-about-goal-seal-ring { width: 100%; height: 100%; }
    .sd-about-goal-name { transform: translate(-50%, -50%) translateY(-92px); }

@media (max-width: 991.98px) {
    .sd-about-goal-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2rem; }
    .sd-about-goal-seal-wrap { grid-column: 1 / -1; min-height: 175px; }
    .sd-about-goal-seal { width: 175px; height: 175px; }
    .sd-about-goal-name { transform: translate(-50%, -50%) translateY(-70px); }
}
@media (max-width: 767.98px) {
    .sd-about-goal-layout { grid-template-columns: 1fr; gap: 1.3rem; }
    .sd-about-goal-heading .sd-h2 { max-width: none; }
    .sd-about-goal-copy { padding: 1.15rem 1.1rem; border-left-width: 1px; border-radius: 0 12px 12px 0; }
    .sd-about-goal-seal-wrap { grid-column: auto; min-height: 155px; }
    .sd-about-goal-seal { width: 150px; height: 150px; }
    .sd-about-goal-name { transform: translate(-50%, -50%) translateY(-60px); font-size: 9px; letter-spacing: .8px; }
    .sd-about-goal-seal-core { width: 70px; height: 70px; }
    .sd-about-goal-seal-core b { font-size: 21px; }
}

/* About Me layered 3D visual */
.sd-about-3d-scene {
    position: relative;
    min-height: 490px;
    display: grid;
    place-items: center;
    isolation: isolate;
    perspective: 1100px;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 62, 62, .16), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(255, 118, 62, .17), transparent 36%),
        linear-gradient(145deg, rgba(14, 17, 31, .96), rgba(4, 5, 10, .98));
    border: 1px solid rgba(255, 118, 62, .24);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42), 0 0 60px rgba(255, 62, 62, .12);
}
.sd-about-3d-scene::before {
    content: '';
    position: absolute;
    inset: 12%;
    z-index: -1;
    border: 1px solid rgba(255, 118, 62, .18);
    border-radius: 50%;
    transform: rotateX(68deg) rotateZ(-14deg);
    box-shadow: 0 0 50px rgba(255, 62, 62, .14);
}
.sd-about-3d-grid {
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image: linear-gradient(rgba(255, 118, 62, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .14) 1px, transparent 1px);
    background-size: 42px 42px;
    transform: perspective(500px) rotateX(62deg) scale(1.45) translateY(24%);
    transform-origin: center bottom;
    mask-image: linear-gradient(to top, #000 10%, transparent 78%);
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 78%);
}
.sd-about-3d-ring {
    position: absolute;
    border: 1px solid rgba(255, 118, 62, .48);
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
}
.sd-about-3d-ring--one { width: 360px; height: 150px; transform: rotateX(68deg) rotateZ(-18deg) translateZ(40px); }
.sd-about-3d-ring--two { width: 300px; height: 120px; border-color: rgba(255, 62, 62, .42); transform: rotateX(68deg) rotateZ(34deg) translateZ(80px); }
.sd-about-3d-orb {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gradient-primary);
    box-shadow: 0 0 22px rgba(255, 62, 62, .8);
}
.sd-about-3d-orb--one { top: 22%; left: 18%; }
.sd-about-3d-orb--two { right: 17%; bottom: 22%; width: 12px; height: 12px; background: var(--secondary); box-shadow: 0 0 18px rgba(255, 118, 62, .8); }
.sd-about-3d-core {
    position: relative;
    z-index: 3;
    width: min(76%, 340px);
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(30, 35, 58, .92), rgba(7, 9, 19, .96));
    box-shadow: 18px 24px 0 rgba(0, 0, 0, .18), 0 26px 55px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: rotateX(7deg) rotateY(-10deg) rotateZ(-2deg) translateZ(70px);
    transform-style: preserve-3d;
    will-change: transform;
}
.sd-about-3d-core-top,
.sd-about-3d-core-bottom { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.sd-about-3d-brand { color: var(--white); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; font-weight: 700; }
.sd-about-3d-status { color: var(--muted); font-size: 10px; }
.sd-about-3d-status i { margin-right: .2rem; color: var(--secondary); font-size: 7px; }
.sd-about-3d-browser { margin: 1rem 0; overflow: hidden; border: 1px solid rgba(255, 118, 62, .22); border-radius: 11px; background: #080b16; }
.sd-about-3d-browser-bar { display: flex; gap: .3rem; padding: .55rem .65rem; background: rgba(255, 255, 255, .06); }
.sd-about-3d-browser-bar span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sd-about-3d-browser-bar span:nth-child(2) { background: var(--secondary); }
.sd-about-3d-browser-bar span:nth-child(3) { background: rgba(255, 255, 255, .45); }
.sd-about-3d-browser-body { min-height: 150px; padding: 1.15rem; background: radial-gradient(circle at 80% 10%, rgba(255, 118, 62, .2), transparent 34%), linear-gradient(145deg, #11172b, #04050a); }
.sd-about-3d-browser-title,
.sd-about-3d-browser-line { width: 46%; height: 8px; margin-bottom: .7rem; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--secondary)); opacity: .92; }
.sd-about-3d-browser-line { width: 58%; height: 5px; margin-bottom: .45rem; background: rgba(148, 163, 184, .35); }
.sd-about-3d-browser-line--wide { width: 72%; }
.sd-about-3d-browser-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin-top: 1.2rem; }
.sd-about-3d-browser-blocks span { height: 42px; border: 1px solid rgba(255, 118, 62, .24); border-radius: 7px; background: rgba(255, 62, 62, .1); }
.sd-about-3d-core-bottom { color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-about-3d-core-bottom i { color: var(--accent); margin-right: .2rem; }
.sd-about-3d-chip {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 118px;
    padding: .65rem .75rem;
    border: 1px solid rgba(255, 118, 62, .28);
    border-radius: 12px;
    color: var(--white);
    background: rgba(14, 17, 31, .88);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    will-change: transform;
}
.sd-about-3d-chip i { color: var(--secondary); font-size: 18px; }
.sd-about-3d-chip span { font-size: 11px; line-height: 1.2; font-weight: 700; }
.sd-about-3d-chip small { color: var(--muted); font-size: 9px; font-weight: 500; }
.sd-about-3d-chip--wordpress { top: 18%; left: 5%; }
.sd-about-3d-chip--design { top: 42%; right: 3%; }
.sd-about-3d-chip--speed { right: 10%; bottom: 14%; }
@media (max-width: 575.98px) {
    .sd-page-hero { padding-top: calc(var(--nav-height) + 3.6rem); padding-bottom: 4rem; }
    .sd-page-hero-particles i:nth-child(n+5), .sd-page-hero-data { opacity: .35; }
    .sd-page-hero-beams { opacity: .2; }
    .sd-page-hero-grid { background-size: 42px 42px; transform: perspective(500px) rotateX(58deg) scale(1.5) translateY(28%); }
    .sd-page-hero-eyebrow { font-size: 9px; letter-spacing: 1.5px; }
    .sd-page-hero-eyebrow::before, .sd-page-hero-eyebrow::after { width: 18px; }
    .sd-page-hero-orb { opacity: .16; }
    .sd-about-bg-code { left: -8%; top: 10%; font-size: 9px; opacity: .3; transform: rotate(-4deg) scale(.9); }
    .sd-about-bg-ui { right: -8%; bottom: 4%; width: 190px; opacity: .24; }
    .sd-about-bg-orb { opacity: .12; }
    .sd-page-hero-subtitle { padding: 0 .75rem; font-size: 13px; line-height: 1.5; }
    .sd-about-3d-scene { min-height: 390px; }
    .sd-about-3d-core { width: 78%; }
    .sd-about-3d-browser-body { min-height: 112px; padding: .8rem; }
    .sd-about-3d-browser-blocks span { height: 30px; }
    .sd-about-3d-chip { min-width: 100px; padding: .5rem .6rem; }
    .sd-about-3d-chip--wordpress { left: 2%; }
    .sd-about-3d-chip--design { right: 0; }
    .sd-about-3d-chip--speed { right: 4%; bottom: 9%; }
}

.sd-about-why {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 22%, rgba(255, 62, 62, .16), transparent 34%),
        radial-gradient(circle at 90% 80%, rgba(255, 118, 62, .12), transparent 30%),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.sd-about-why::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .3;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 20% 50%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 20% 50%, #000 0%, transparent 72%);
}
.sd-about-why .container { position: relative; z-index: 1; }
.sd-about-why-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--off-white);
    font-size: 13px;
    font-weight: 600;
}
.sd-about-why-note i { color: var(--secondary); }
.sd-about-cta-panel {
    position: relative;
    overflow: hidden;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
    border: 1px solid transparent;
    border-radius: 24px;
    background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box, var(--gradient-primary) border-box;
    box-shadow: 0 26px 70px rgba(255, 62, 62, .16);
}
.sd-about-cta-panel::before,
.sd-about-cta-panel::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(28px);
    opacity: .18;
}
.sd-about-cta-panel::before { top: -150px; left: -90px; background: var(--accent); }
.sd-about-cta-panel::after { right: -100px; bottom: -160px; background: var(--secondary); }
.sd-about-cta-panel .sd-about-cta { position: relative; z-index: 1; }
.sd-industry-card.is-featured {
    border-color: rgba(255, 118, 62, .42);
    background: linear-gradient(145deg, rgba(255, 62, 62, .1), var(--navy-mid));
}
.sd-industry-card.is-featured .sd-industry-icon { background: var(--gradient-primary); color: var(--white); }

.sd-about-cta {
    max-width: 820px;
    margin: 0 auto;
}
.sd-about-cta .sd-lead { max-width: 720px; }

/* Connected How I Work timeline */
.sd-process-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
}
.sd-process-line {
    position: absolute;
    top: 42px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--secondary));
    opacity: .5;
}
.sd-process-step {
    position: relative;
    z-index: 1;
    min-height: 250px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 118, 62, .14);
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--navy-mid), var(--navy));
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sd-process-step:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .45); box-shadow: 0 18px 36px rgba(255, 62, 62, .13); }
.sd-process-number { display: block; color: var(--secondary); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; margin-bottom: .7rem; }
.sd-process-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 1.1rem; border: 1px solid rgba(255, 118, 62, .42); border-radius: 50%; color: var(--white); background: var(--gradient-primary); box-shadow: 0 10px 24px rgba(255, 62, 62, .2); }
.sd-process-step h3 { margin-bottom: .6rem; font-size: 19px; }
.sd-process-step p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }


/* Selected Work & Partners carousel */
.sd-partner-carousel {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.sd-partner-viewport {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    border-radius: var(--radius);
}
.sd-partners[data-sd-partner-track] {
    display: flex;
    gap: 1rem;
    margin-top: 0;
    align-items: stretch;
    transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.sd-partner-slide {
    flex: 0 0 calc((100% - 4rem) / 5);
    min-width: 0;
}
.sd-partner-slide .sd-partner-card { height: 100%; }
.sd-partner-control {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 118, 62, .3);
    border-radius: 50%;
    color: var(--white);
    background: linear-gradient(135deg, rgba(255, 62, 62, .16), rgba(255, 118, 62, .12));
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.sd-partner-control:hover,
.sd-partner-control:focus-visible {
    transform: translateY(-2px);
    border-color: var(--secondary);
    background: var(--gradient-primary);
}
.sd-partner-control:focus-visible,
.sd-partner-dot:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}
.sd-partner-control:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.sd-partner-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.25rem;
}
.sd-partner-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(148, 163, 184, .4);
    transition: width .25s ease, border-radius .25s ease, background .25s ease;
}
.sd-partner-dot.is-active {
    width: 24px;
    border-radius: 6px;
    background: var(--gradient-primary);
}
@media (max-width: 991.98px) {
    .sd-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-process-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .sd-process-line { display: none; }
    .sd-partner-slide { flex-basis: calc((100% - 2rem) / 3); }
}
@media (max-width: 575.98px) {
    .sd-about-service-group.is-featured { padding: 1rem; }
    .sd-services-grid { grid-template-columns: 1fr; gap: 1rem; }
    .sd-process-timeline { grid-template-columns: 1fr; gap: .85rem; }
    .sd-process-step { min-height: 0; padding: 1rem; }
    .sd-about-service-group-head { margin-bottom: .9rem; }
    .sd-achievements::before { text-align: left; }
    .sd-partner-carousel { gap: .55rem; }
    .sd-partner-control { flex-basis: 36px; width: 36px; height: 36px; font-size: 12px; }
    .sd-partners[data-sd-partner-track] { gap: .7rem; }
    .sd-partner-slide { flex-basis: calc((100% - .7rem) / 2); }
}

/* Services intro shared by the homepage catalogue */
.sd-services-intro { position: relative; overflow: hidden; }
.sd-services-intro .container { position: relative; z-index: 1; }
/* Contact page — supplied content and brand treatment */
.sd-contact-intro { position: relative; overflow: hidden; }
.sd-contact-intro::after,
.sd-contact-why::after { content: ''; position: absolute; width: 330px; height: 330px; border-radius: 50%; filter: blur(70px); opacity: .14; pointer-events: none; background: var(--accent); }
.sd-contact-intro::after { right: -110px; top: -140px; }
.sd-contact-intro .container,
.sd-contact-why .container { position: relative; z-index: 1; }
.sd-contact-intent-card,
.sd-contact-direct-card,
.sd-contact-info-card,
.sd-contact-final {
    border: 1px solid rgba(255, 118, 62, .24);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 62, 62, .08), var(--navy-mid));
    box-shadow: 0 22px 52px rgba(0, 0, 0, .18);
}
.sd-contact-intent-card { padding: 1.5rem; }
.sd-contact-intent-item { display: flex; align-items: center; gap: .8rem; padding: .9rem 0; color: var(--off-white); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14.5px; }
.sd-contact-intent-item:last-child { border-bottom: 0; padding-bottom: 0; }
.sd-contact-intent-item i { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; color: var(--white); background: var(--gradient-primary); box-shadow: 0 8px 20px rgba(255, 62, 62, .18); }
.sd-contact-service-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; }
.sd-contact-service-item { min-height: 142px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 1.1rem; border: 1px solid rgba(255, 118, 62, .14); border-radius: 16px; background: linear-gradient(160deg, var(--navy-mid), var(--navy)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-contact-service-item:hover { transform: translateY(-4px); border-color: rgba(255, 118, 62, .42); box-shadow: 0 16px 28px rgba(255, 62, 62, .12); }
.sd-contact-service-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 1.2rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.sd-contact-service-item h3 { margin: 0; color: var(--off-white); font-size: 14px; line-height: 1.35; }
.sd-contact-why { position: relative; overflow: hidden; background: radial-gradient(circle at 12% 30%, rgba(255, 62, 62, .16), transparent 34%), radial-gradient(circle at 92% 80%, rgba(255, 118, 62, .12), transparent 30%), linear-gradient(180deg, var(--navy), var(--navy-dark)); }
.sd-contact-why::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 20% 50%, #000, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 20% 50%, #000, transparent 72%); }
.sd-contact-why::after { right: -110px; bottom: -160px; background: var(--secondary); }
.sd-contact-direct-card { padding: 1.5rem; }
.sd-contact-direct-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1rem; border-radius: 16px; color: var(--white); background: var(--gradient-primary); box-shadow: 0 12px 24px rgba(255, 62, 62, .2); }
.sd-contact-direct-card h3 { margin-bottom: .6rem; font-size: 20px; }
.sd-contact-direct-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.sd-contact-direct-proof { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; color: var(--off-white); font-size: 13px; }
.sd-contact-direct-proof i { color: var(--secondary); font-size: 12px; }
.sd-contact-problems { background: var(--navy-dark); }
.sd-contact-problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sd-contact-problem { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem .9rem; border: 1px solid rgba(255, 118, 62, .13); border-radius: 12px; color: var(--off-white); background: rgba(14, 17, 31, .64); font-size: 14px; line-height: 1.45; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.sd-contact-problem:hover { transform: translateX(4px); border-color: rgba(255, 118, 62, .38); background: rgba(255, 62, 62, .08); }
.sd-contact-problem i { color: var(--accent); margin-top: .12rem; }
.sd-contact-process { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.sd-contact-process-line { position: absolute; top: 42px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, var(--accent), var(--secondary)); opacity: .5; }
.sd-contact-process-step { position: relative; z-index: 1; min-height: 245px; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(160deg, var(--navy-mid), var(--navy)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-contact-process-step:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .44); box-shadow: 0 18px 34px rgba(255, 62, 62, .12); }
.sd-contact-process-number { display: block; color: var(--secondary); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; margin-bottom: .7rem; }
.sd-contact-process-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border: 1px solid rgba(255, 118, 62, .4); border-radius: 50%; color: var(--white); background: var(--gradient-primary); box-shadow: 0 10px 22px rgba(255, 62, 62, .18); }
.sd-contact-process-step h3 { margin-bottom: .55rem; font-size: 18px; }
.sd-contact-process-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-contact-main { background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-contact-info-card { margin-top: 1.4rem; padding: .6rem 1.2rem; }
.sd-contact-info-row { display: flex; align-items: center; gap: .8rem; padding: .9rem 0; color: var(--off-white); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sd-contact-info-row:last-child { border-bottom: 0; }
a.sd-contact-info-row:hover strong { color: var(--secondary); }
.sd-contact-info-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; color: var(--white); background: var(--gradient-primary); }
.sd-contact-info-row small { display: block; margin-bottom: .15rem; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.sd-contact-info-row strong { display: block; color: var(--off-white); font-size: 14px; font-weight: 600; transition: color .2s ease; }
.sd-contact-form { border: 1px solid rgba(255, 118, 62, .26); border-radius: 22px; background: linear-gradient(145deg, rgba(255, 62, 62, .07), var(--navy-mid)); box-shadow: 0 22px 52px rgba(0, 0, 0, .2); padding: 1.35rem; }
.sd-contact-form form { display: block; }
.sd-contact-form form .mb-3 { margin-bottom: .75rem !important; }
.sd-contact-form .form-label { margin-bottom: .3rem; font-size: 12px; }
.sd-contact-form .form-control { min-height: 42px; padding: .58rem .75rem; font-size: 13.5px; }
.sd-contact-form textarea.form-control { min-height: 82px; resize: vertical; }
.sd-contact-form h3 { margin: .3rem 0 .5rem; color: var(--white); font-size: 24px; }
.sd-contact-form-intro { margin-bottom: 1.4rem; color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 991.98px) {
    .sd-services-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-services-group.is-featured .sd-service-card--freelancer:first-child { grid-column: span 2; }
    .sd-services-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-services-process-line { display: none; }
    .sd-services-live-grid, .sd-services-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-contact-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-contact-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-contact-process-line { display: none; }
}
@media (max-width: 575.98px) {
    .sd-services-group { margin-top: 2.8rem; }
    .sd-services-group-heading { grid-template-columns: 1fr; gap: .8rem; }
    .sd-services-group-grid, .sd-services-process { grid-template-columns: 1fr; }
    .sd-services-group.is-featured .sd-service-card--freelancer:first-child { grid-column: auto; }
    .sd-services-process-step { min-height: 0; }
    .sd-services-wireframe { min-height: 260px; border-radius: 16px; }
    .sd-services-wireframe-body { grid-template-columns: 1fr 62px; }
    .sd-services-wireframe-flow { left: .5rem; right: .5rem; gap: .2rem; font-size: 8px; }
    .sd-services-wireframe-flow span { padding: .25rem .3rem; }
    .sd-services-live-grid, .sd-services-why-grid { grid-template-columns: 1fr; }
    .sd-services-visual { min-height: 220px; border-radius: 16px; }
    .sd-services-live-grid .sd-service-card { min-height: 0; }
    .sd-contact-service-grid, .sd-contact-problem-grid, .sd-contact-process { grid-template-columns: 1fr; }
    .sd-contact-service-item { min-height: 112px; }
    .sd-contact-process-step { min-height: 0; }
    .sd-contact-intent-card, .sd-contact-direct-card, .sd-contact-info-card, .sd-contact-form { border-radius: 16px; }
    .sd-contact-info-card { padding-left: .9rem; padding-right: .9rem; }
    .sd-contact-form { padding: 1rem; }
}

/* Services page — service card alignment pass */
.sd-services-group-grid { grid-auto-rows: 1fr; align-items: stretch; }
.sd-service-card--freelancer { height: 100%; min-height: 292px; padding: 1.25rem; }
.sd-service-card--freelancer .sd-service-card-icon { flex: 0 0 48px; }
.sd-service-card--freelancer h4 { min-height: 48px; display: flex; align-items: flex-start; margin-bottom: .7rem; }
.sd-service-card--freelancer p { min-height: 82px; margin-bottom: .75rem; }
.sd-service-card--freelancer .sd-text-link { margin-top: auto; align-self: flex-start; }
.sd-services-group--support .sd-services-group-grid,
.sd-services-group--brand .sd-services-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-services-group--support .sd-service-card--freelancer,
.sd-services-group--brand .sd-service-card--freelancer { min-height: 250px; }
.sd-services-group.is-featured .sd-service-card--freelancer:first-child { min-height: 292px; }

/* Services page — final responsive pass */
.sd-services-group-grid > *,
.sd-services-process > *,
.sd-services-decision-item,
.sd-services-wireframe,
.sd-services-visual { min-width: 0; }
.sd-services-visual-labels { position: absolute; z-index: 2; top: .8rem; left: .8rem; right: .8rem; display: flex; justify-content: space-between; gap: .45rem; pointer-events: none; }
.sd-services-visual-labels span { padding: .32rem .55rem; border: 1px solid rgba(255, 118, 62, .24); border-radius: 999px; color: var(--off-white); background: rgba(4, 5, 10, .58); font-family: var(--font-mono); font-size: 9px; letter-spacing: .7px; }
.sd-text-link { min-height: 44px; }
.sd-services-decision-item > span:nth-child(2) { min-width: 0; }
.sd-services-decision-item strong { overflow-wrap: anywhere; }
.sd-services-wireframe-flow { flex-wrap: wrap; }
@media (max-width: 991.98px) {
    .sd-services-group--support .sd-services-group-grid,
    .sd-services-group--brand .sd-services-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-services-group-grid { gap: .85rem; }
    .sd-service-card--freelancer { min-height: 250px; }
    .sd-services-process-step { min-height: 210px; }
    .sd-services-wireframe-body { grid-template-columns: minmax(0, 1fr) 72px; }
}
@media (max-width: 767.98px) {
    .sd-services-group-heading { grid-template-columns: 1fr; gap: .8rem; }
    .sd-services-group-label { width: fit-content; }
    .sd-services-group-heading h3 { font-size: clamp(20px, 5.5vw, 25px); }
    .sd-services-ux-points { gap: .5rem; }
    .sd-services-ux-points span { font-size: 11px; }
    .sd-services-wireframe { min-height: 280px; }
    .sd-services-wireframe-body { min-height: 220px; }
    .sd-services-decision-item { grid-template-columns: 40px minmax(0, 1fr) auto; }
}
@media (max-width: 575.98px) {
    .sd-services-group--support .sd-services-group-grid,
    .sd-services-group--brand .sd-services-group-grid { grid-template-columns: 1fr; }
    .sd-services-group-grid { gap: .75rem; }
    .sd-service-card--freelancer,
    .sd-services-group--support .sd-service-card--freelancer,
    .sd-services-group--brand .sd-service-card--freelancer { min-height: 0; padding: 1.15rem; }
    .sd-service-card--freelancer h4 { min-height: 0; }
    .sd-service-card--freelancer p { min-height: 0; }
    .sd-service-card--freelancer h4 { font-size: 17px; }
    .sd-services-visual { min-height: 205px; padding: .75rem; }
    .sd-services-visual-labels { top: .55rem; left: .55rem; right: .55rem; }
    .sd-services-visual-labels span { padding: .28rem .42rem; font-size: 8px; }
    .sd-services-wireframe { min-height: 250px; padding: .75rem; }
    .sd-services-wireframe-body { grid-template-columns: minmax(0, 1fr) 60px; gap: .5rem; min-height: 195px; }
    .sd-services-wireframe-desktop { min-height: 135px; padding: .7rem; }
    .sd-services-wireframe-mobile { min-height: 120px; padding: .55rem; }
    .sd-services-wireframe-flow { left: .35rem; right: .35rem; bottom: .15rem; gap: .18rem; font-size: 7px; }
    .sd-services-wireframe-flow span { padding: .22rem .28rem; }
    .sd-services-wireframe-flow b { width: 10px; }
    .sd-services-process-step { padding: 1rem; }
    .sd-services-decision-item { gap: .6rem; padding: .7rem; }
    .sd-services-decision-icon { width: 36px; height: 36px; }
    .sd-services-decision-item strong { font-size: 13px; }
    .sd-services-decision-item small { font-size: 10px; }
    .sd-services-final { border-radius: 16px; padding: 2rem 1.1rem; }
}

/* Services page v2 — clean UX Architect system */
.sd-services-v2 { overflow: hidden; }
.sd-services-v2-intro { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-services-v2-intro::before { content: ''; position: absolute; width: 430px; height: 430px; top: -230px; right: -120px; border-radius: 50%; background: var(--accent); filter: blur(105px); opacity: .1; pointer-events: none; }
.sd-services-v2-intro .container, .sd-services-v2-ux .container { position: relative; z-index: 1; }
.sd-services-v2-intro-grid, .sd-services-v2-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-services-v2-intro-copy p:not(.sd-kicker):not(.sd-lead), .sd-services-v2-split p:not(.sd-kicker):not(.sd-lead) { max-width: 660px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-services-v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.sd-services-v2-actions > span { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: 12px; }
.sd-services-v2-actions > span i { color: var(--secondary); }
.sd-services-v2-visual { position: relative; min-height: 390px; display: grid; place-items: center; isolation: isolate; perspective: 950px; overflow: hidden; border: 1px solid rgba(255, 118, 62, .25); border-radius: 24px; background: radial-gradient(circle at 50% 35%, rgba(255, 62, 62, .13), transparent 36%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 26px 60px rgba(0, 0, 0, .28); }
.sd-services-v2-visual-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255, 118, 62, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .12) 1px, transparent 1px); background-size: 38px 38px; transform: perspective(470px) rotateX(58deg) scale(1.35) translateY(24%); transform-origin: center bottom; mask-image: linear-gradient(to top, #000 10%, transparent 76%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 76%); }
.sd-services-v2-orbit { position: absolute; border: 1px solid rgba(255, 118, 62, .32); border-radius: 50%; transform-style: preserve-3d; pointer-events: none; }
.sd-services-v2-orbit--one { width: 380px; height: 150px; transform: rotateX(70deg) rotateZ(-14deg); }
.sd-services-v2-orbit--two { width: 285px; height: 115px; border-color: rgba(255, 62, 62, .34); transform: rotateX(70deg) rotateZ(32deg) translateZ(30px); }
.sd-services-v2-screen { position: relative; z-index: 2; width: min(72%, 330px); border: 1px solid rgba(255, 255, 255, .15); border-radius: 17px; background: linear-gradient(145deg, rgba(30, 35, 58, .95), rgba(7, 9, 19, .97)); box-shadow: 16px 22px 0 rgba(0, 0, 0, .16), 0 25px 55px rgba(0, 0, 0, .42); transform: rotateX(7deg) rotateY(-10deg) rotateZ(-2deg); transform-style: preserve-3d; }
.sd-services-v2-screen-bar { display: flex; align-items: center; gap: .3rem; padding: .65rem .75rem; border-bottom: 1px solid rgba(255, 255, 255, .07); color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-services-v2-screen-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sd-services-v2-screen-bar span:nth-child(2) { background: var(--secondary); }
.sd-services-v2-screen-bar span:nth-child(3) { background: rgba(255, 255, 255, .5); }
.sd-services-v2-screen-bar code { margin-left: .45rem; color: var(--muted); }
.sd-services-v2-screen-body { min-height: 225px; padding: 1.3rem; background: radial-gradient(circle at 80% 8%, rgba(255, 118, 62, .18), transparent 34%), linear-gradient(145deg, #11172b, #04050a); }
.sd-services-v2-screen-kicker { display: block; margin-bottom: 1.15rem; color: var(--secondary); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.2px; }
.sd-services-v2-screen strong { display: block; color: var(--white); font-size: 28px; line-height: 1.05; letter-spacing: -.7px; }
.sd-services-v2-screen strong em { color: var(--secondary); font-style: normal; }
.sd-services-v2-screen-lines { margin-top: 1.15rem; }
.sd-services-v2-screen-lines i { display: block; width: 72%; height: 5px; margin-bottom: .45rem; border-radius: 999px; background: rgba(148, 163, 184, .32); }
.sd-services-v2-screen-lines i:nth-child(2) { width: 55%; }
.sd-services-v2-screen-lines i:nth-child(3) { width: 42%; }
.sd-services-v2-screen-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.25rem; }
.sd-services-v2-screen-pills span { padding: .32rem .45rem; border: 1px solid rgba(255, 118, 62, .25); border-radius: 5px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-services-v2-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45rem; padding: .62rem .75rem; border: 1px solid rgba(255, 118, 62, .3); border-radius: 11px; color: var(--off-white); background: rgba(14, 17, 31, .88); box-shadow: 0 14px 26px rgba(0, 0, 0, .28); backdrop-filter: blur(9px); font-size: 11px; font-weight: 700; }
.sd-services-v2-float i { color: var(--secondary); }
.sd-services-v2-float--build { top: 17%; left: 4%; }
.sd-services-v2-float--improve { top: 41%; right: 3%; }
.sd-services-v2-float--support { right: 9%; bottom: 13%; }
.sd-services-v2-catalogue { background: var(--navy-dark); }
.sd-services-v2-section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.sd-services-v2-section-head > div { max-width: 720px; }
.sd-services-v2-section-head > p { max-width: 350px; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.sd-services-v2-section-head--center { align-items: center; }
.sd-services-v2-groups { display: grid; gap: 3rem; }
.sd-services-v2-group { padding-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.sd-services-v2-group:first-child { padding-top: 0; border-top: 0; }
.sd-services-v2-group-head { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.3rem; }
.sd-services-v2-group-label { width: fit-content; height: fit-content; padding: .42rem .72rem; border: 1px solid rgba(255, 118, 62, .4); border-radius: 999px; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
.sd-services-v2-group-head h3 { margin: 0 0 .45rem; color: var(--off-white); font-size: clamp(19px, 2.2vw, 27px); }
.sd-services-v2-group-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.sd-services-v2-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: stretch; }
.sd-services-v2-group--support .sd-services-v2-card-grid, .sd-services-v2-group--brand .sd-services-v2-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-services-v2-card { min-width: 0; min-height: 270px; height: 100%; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 16px; background: linear-gradient(160deg, var(--navy-mid), var(--navy)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-services-v2-card:hover { transform: translateY(-4px); border-color: rgba(255, 118, 62, .42); box-shadow: 0 18px 34px rgba(255, 62, 62, .12); }
.sd-services-v2-card-icon { display: grid; place-items: center; width: 47px; height: 47px; flex: 0 0 47px; margin-bottom: 1rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.sd-services-v2-card h4 { min-height: 45px; margin: 0 0 .65rem; color: var(--off-white); font-size: 17px; line-height: 1.3; }
.sd-services-v2-card p { min-height: 72px; flex: 1; margin: 0 0 .6rem; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-services-v2-link { min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; gap: .45rem; color: var(--secondary); font-size: 12px; font-weight: 700; text-decoration: none; }
.sd-services-v2-link:hover { color: var(--white); }
.sd-services-v2-ux { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy), var(--navy-dark)); }
.sd-services-v2-ux::before { content: ''; position: absolute; inset: 0; opacity: .18; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 80% 50%, #000, transparent 70%); -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 70%); }
.sd-services-v2-points { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.sd-services-v2-points span { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .65rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 999px; color: var(--off-white); background: rgba(255, 62, 62, .06); font-size: 11px; }
.sd-services-v2-points i { color: var(--secondary); }
.sd-services-v2-wireframe { position: relative; min-height: 320px; overflow: hidden; padding: 1rem; border: 1px solid rgba(255, 118, 62, .35); border-radius: 22px; background: linear-gradient(145deg, rgba(255, 62, 62, .09), var(--navy-mid)); box-shadow: 0 25px 60px rgba(0, 0, 0, .25); transform-style: preserve-3d; }
.sd-services-v2-wireframe-top { display: flex; align-items: center; gap: .32rem; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-services-v2-wireframe-top span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sd-services-v2-wireframe-top span:nth-child(2) { background: var(--secondary); }
.sd-services-v2-wireframe-top span:nth-child(3) { background: rgba(255, 255, 255, .55); }
.sd-services-v2-wireframe-top code { margin-left: .45rem; color: var(--muted); }
.sd-services-v2-wireframe-content { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: .8rem; align-items: center; min-height: 245px; }
.sd-services-v2-wireframe-desktop, .sd-services-v2-wireframe-mobile { position: relative; overflow: hidden; border: 1px solid rgba(255, 118, 62, .28); background: rgba(4, 5, 10, .5); }
.sd-services-v2-wireframe-desktop { min-height: 170px; padding: 1rem; border-radius: 12px; }
.sd-services-v2-wireframe-mobile { min-height: 150px; padding: .7rem; border-radius: 14px; }
.sd-services-v2-wireframe-desktop b, .sd-services-v2-wireframe-mobile b { display: block; height: 24px; margin-bottom: .8rem; border-radius: 5px; background: linear-gradient(90deg, rgba(255, 62, 62, .5), rgba(255, 118, 62, .12)); }
.sd-services-v2-wireframe-desktop i, .sd-services-v2-wireframe-mobile i { display: block; width: 72%; height: 7px; margin-bottom: .55rem; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.sd-services-v2-wireframe-desktop i:nth-of-type(2) { width: 88%; }
.sd-services-v2-wireframe-mobile i { width: 88%; }
.sd-services-v2-wireframe-mobile i:nth-of-type(2) { width: 62%; }
.sd-services-v2-wireframe-desktop em, .sd-services-v2-wireframe-mobile em { display: block; width: 44%; height: 24px; margin-top: 1rem; border-radius: 5px; background: var(--gradient-primary); }
.sd-services-v2-wireframe-flow { position: absolute; right: .9rem; bottom: .45rem; left: .9rem; display: flex; align-items: center; justify-content: center; gap: .4rem; color: var(--muted); font-family: var(--font-mono); font-size: 8px; }
.sd-services-v2-wireframe-flow span { padding: .28rem .4rem; border: 1px solid rgba(255, 118, 62, .24); border-radius: 5px; }
.sd-services-v2-wireframe-flow b { width: 15px; height: 1px; background: var(--secondary); }
.sd-services-v2-process { background: var(--navy-dark); }
.sd-services-v2-process-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.sd-services-v2-process-line { position: absolute; top: 42px; right: 12%; left: 12%; height: 1px; background: var(--gradient-primary); opacity: .5; transform-origin: left center; }
.sd-services-v2-process-step { position: relative; z-index: 1; min-height: 235px; padding: 1.2rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 16px; background: linear-gradient(160deg, var(--navy-mid), var(--navy)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-services-v2-process-step:hover { transform: translateY(-4px); border-color: rgba(255, 118, 62, .42); box-shadow: 0 18px 34px rgba(255, 62, 62, .12); }
.sd-services-v2-step-number { display: block; margin-bottom: .7rem; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; }
.sd-services-v2-step-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 50%; color: var(--white); background: var(--gradient-primary); box-shadow: 0 10px 22px rgba(255, 62, 62, .18); }
.sd-services-v2-process-step h3 { margin: 0 0 .55rem; color: var(--off-white); font-size: 18px; }
.sd-services-v2-process-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-services-v2-decision { background: var(--navy-dark); }
.sd-services-v2-decision-grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.sd-services-v2-decision-list { display: grid; gap: .6rem; }
.sd-services-v2-decision-item { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 62px; padding: .65rem .75rem; border: 1px solid rgba(255, 118, 62, .14); border-radius: 12px; color: var(--off-white); background: rgba(14, 17, 31, .7); text-decoration: none; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.sd-services-v2-decision-item:hover { transform: translateX(4px); border-color: rgba(255, 118, 62, .4); background: rgba(255, 62, 62, .08); }
.sd-services-v2-decision-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--white); background: var(--gradient-primary); }
.sd-services-v2-decision-item strong, .sd-services-v2-decision-item small { display: block; }
.sd-services-v2-decision-item strong { font-size: 13px; line-height: 1.35; }
.sd-services-v2-decision-item small { margin-top: .12rem; color: var(--secondary); font-size: 10px; }
.sd-services-v2-decision-item > i { color: var(--secondary); font-size: 11px; }
.sd-services-v2-cta { padding-top: 2rem; background: var(--navy-dark); }
.sd-services-v2-cta-panel { position: relative; max-width: 900px; margin: 0 auto; overflow: hidden; padding: clamp(2.2rem, 5vw, 4.5rem) clamp(1.1rem, 5vw, 3.5rem); border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box, var(--gradient-primary) border-box; box-shadow: 0 25px 60px rgba(255, 62, 62, .14); }
.sd-services-v2-cta-panel::before { content: ''; position: absolute; top: -150px; left: -100px; width: 270px; height: 270px; border-radius: 50%; background: var(--accent); filter: blur(70px); opacity: .12; pointer-events: none; }
.sd-services-v2-cta-panel > * { position: relative; z-index: 1; }
.sd-services-v2-cta-panel p:not(.sd-kicker) { max-width: 700px; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 991.98px) {
    .sd-services-v2-intro-grid, .sd-services-v2-split { gap: 2.5rem; }
    .sd-services-v2-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-services-v2-group--support .sd-services-v2-card-grid, .sd-services-v2-group--brand .sd-services-v2-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-services-v2-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-services-v2-process-line { display: none; }
    .sd-services-v2-decision-grid { gap: 2rem; }
}
@media (max-width: 767.98px) {
    .sd-services-v2-intro-grid, .sd-services-v2-split, .sd-services-v2-decision-grid { grid-template-columns: 1fr; }
    .sd-services-v2-section-head { display: block; margin-bottom: 2rem; }
    .sd-services-v2-section-head > p { margin-top: .8rem; }
    .sd-services-v2-group-head { grid-template-columns: 1fr; gap: .8rem; }
    .sd-services-v2-group-label { width: fit-content; }
    .sd-services-v2-visual { min-height: 350px; }
    .sd-services-v2-wireframe { min-height: 300px; }
}
@media (max-width: 575.98px) {
    .sd-services-v2-actions { align-items: stretch; flex-direction: column; }
    .sd-services-v2-actions .sd-btn { width: 100%; justify-content: center; }
    .sd-services-v2-visual { min-height: 285px; border-radius: 16px; }
    .sd-services-v2-screen { width: 76%; }
    .sd-services-v2-screen-body { min-height: 170px; padding: 1rem; }
    .sd-services-v2-screen strong { font-size: 23px; }
    .sd-services-v2-float { padding: .5rem .6rem; font-size: 10px; }
    .sd-services-v2-float--build { left: 2%; }
    .sd-services-v2-float--improve { right: 1%; }
    .sd-services-v2-float--support { right: 3%; bottom: 8%; }
    .sd-services-v2-card-grid, .sd-services-v2-group--support .sd-services-v2-card-grid, .sd-services-v2-group--brand .sd-services-v2-card-grid { grid-template-columns: 1fr; gap: .75rem; }
    .sd-services-v2-card { min-height: 0; padding: 1.1rem; }
    .sd-services-v2-card h4 { min-height: 0; }
    .sd-services-v2-card p { min-height: 0; }
    .sd-services-v2-process-grid { grid-template-columns: 1fr; }
    .sd-services-v2-process-step { min-height: 0; padding: 1rem; }
    .sd-services-v2-wireframe { min-height: 260px; padding: .75rem; border-radius: 16px; }
    .sd-services-v2-wireframe-content { grid-template-columns: minmax(0, 1fr) 62px; min-height: 195px; gap: .5rem; }
    .sd-services-v2-wireframe-desktop { min-height: 135px; padding: .7rem; }
    .sd-services-v2-wireframe-mobile { min-height: 120px; padding: .55rem; }
    .sd-services-v2-wireframe-flow { right: .35rem; left: .35rem; gap: .18rem; font-size: 7px; flex-wrap: wrap; }
    .sd-services-v2-wireframe-flow span { padding: .22rem .28rem; }
    .sd-services-v2-wireframe-flow b { width: 9px; }
    .sd-services-v2-decision-item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: .55rem; padding: .6rem; }
    .sd-services-v2-decision-icon { width: 35px; height: 35px; }
    .sd-services-v2-decision-item strong { font-size: 12px; }
    .sd-services-v2-decision-item small { font-size: 9px; }
    .sd-services-v2-cta-panel { border-radius: 16px; padding: 2rem 1rem; }
}

/* About Us What I Do — requested service rows */
.sd-about-service-groups { display: grid; gap: 2.25rem; }
.sd-about-service-group { min-width: 0; }
.sd-about-service-group--build .sd-services-grid,
.sd-about-service-group--improve .sd-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sd-about-service-row--support-brand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.sd-about-service-row--support-brand .sd-about-service-group { margin-top: 0; }
.sd-about-service-row--support-brand .sd-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sd-about-service-group .sd-service-card { height: 100%; min-height: 220px; display: flex; flex-direction: column; }
.sd-about-service-group .sd-service-card p { flex: 1; }
@media (max-width: 991.98px) {
    .sd-about-service-group--build .sd-services-grid,
    .sd-about-service-group--improve .sd-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-about-service-row--support-brand { grid-template-columns: 1fr; gap: 2rem; }
    .sd-about-service-row--support-brand .sd-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .sd-about-service-groups { gap: 1.6rem; }
    .sd-about-service-group--build .sd-services-grid,
    .sd-about-service-group--improve .sd-services-grid,
    .sd-about-service-row--support-brand .sd-services-grid { grid-template-columns: 1fr; }
    .sd-about-service-group .sd-service-card { min-height: 0; }
}

/* About Us What I Do — consistent outer group panels */
.sd-about-service-group { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; border: 1px solid rgba(255, 118, 62, .22); border-radius: 20px; background: linear-gradient(145deg, rgba(255, 62, 62, .055), rgba(14, 17, 31, .84)); }
.sd-about-service-group--build { border-color: rgba(255, 118, 62, .38); background: linear-gradient(145deg, rgba(255, 62, 62, .09), rgba(14, 17, 31, .88)); }
.sd-about-service-group--improve { background: linear-gradient(145deg, rgba(255, 118, 62, .065), rgba(14, 17, 31, .86)); }
.sd-about-service-group--support, .sd-about-service-group--brand { height: 100%; }
.sd-about-service-group-head { margin-bottom: 1.35rem; }
.sd-about-service-group-head h3 { color: var(--off-white); }
.sd-about-service-group .sd-services-grid { flex: 1; }
.sd-about-service-row--support-brand { align-items: stretch; }
@media (max-width: 575.98px) {
    .sd-about-service-group { padding: 1.05rem; border-radius: 16px; }
    .sd-about-service-group-head { margin-bottom: 1rem; }
}

/* Dedicated Graphic Design page */
.sd-graphic-page { overflow: hidden; }
.sd-graphic-intro { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-graphic-intro::before { content: ''; position: absolute; inset: 0; opacity: .18; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .12) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 75% 50%, #000, transparent 64%); -webkit-mask-image: radial-gradient(circle at 75% 50%, #000, transparent 64%); }
.sd-graphic-intro-grid, .sd-graphic-branding-grid, .sd-graphic-why-grid, .sd-graphic-faq-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-graphic-intro p:not(.sd-kicker):not(.sd-lead), .sd-graphic-branding p:not(.sd-kicker):not(.sd-lead), .sd-graphic-why p:not(.sd-kicker):not(.sd-lead) { max-width: 680px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-graphic-brand-board { position: relative; min-height: 390px; overflow: hidden; padding: 1rem; border: 1px solid rgba(255, 118, 62, .35); border-radius: 23px; background: radial-gradient(circle at 78% 22%, rgba(255, 118, 62, .2), transparent 30%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 25px 60px rgba(0, 0, 0, .3); transform: rotate(1deg); }
.sd-graphic-board-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 32px 32px; transform: perspective(500px) rotateX(58deg) scale(1.4) translateY(24%); transform-origin: center bottom; mask-image: linear-gradient(to top, #000 10%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 78%); }
.sd-graphic-board-top { position: relative; z-index: 1; display: flex; align-items: center; gap: .3rem; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-graphic-board-top span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sd-graphic-board-top span:nth-child(2) { background: var(--secondary); }
.sd-graphic-board-top span:nth-child(3) { background: rgba(255, 255, 255, .5); }
.sd-graphic-board-top code { margin-left: .45rem; }
.sd-graphic-board-content { position: relative; z-index: 1; min-height: 320px; padding: 3rem 2.2rem; }
.sd-graphic-board-kicker { display: block; margin-bottom: 1rem; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; }
.sd-graphic-board-content strong { display: block; color: var(--white); font-family: var(--font-display); font-size: clamp(34px, 5vw, 58px); line-height: .98; letter-spacing: -1.8px; }
.sd-graphic-board-content strong em { color: var(--secondary); font-style: normal; }
.sd-graphic-board-palette { display: flex; gap: .55rem; margin-top: 2rem; }
.sd-graphic-board-palette i { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); box-shadow: 0 9px 20px rgba(255, 62, 62, .25); }
.sd-graphic-board-palette i:nth-child(2) { background: var(--secondary); }
.sd-graphic-board-palette i:nth-child(3) { background: var(--navy-mid); border: 1px solid rgba(255, 255, 255, .2); }
.sd-graphic-board-palette i:nth-child(4) { background: var(--off-white); }
.sd-graphic-board-lines { margin-top: 1.6rem; }
.sd-graphic-board-lines i { display: block; width: 66%; height: 6px; margin-bottom: .45rem; border-radius: 999px; background: rgba(148, 163, 184, .34); }
.sd-graphic-board-lines i:nth-child(2) { width: 48%; }
.sd-graphic-board-lines i:nth-child(3) { width: 32%; }
.sd-graphic-board-tag { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; padding: .55rem .7rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 999px; color: var(--off-white); background: rgba(255, 62, 62, .08); font-size: 11px; }
.sd-graphic-board-tag i { color: var(--secondary); }
.sd-graphic-branding { background: var(--navy-dark); }
.sd-graphic-branding-mark { display: grid; place-items: center; width: 220px; height: 220px; justify-self: center; border: 1px solid rgba(255, 118, 62, .35); border-radius: 50%; background: radial-gradient(circle, rgba(255, 62, 62, .16), transparent 62%), var(--navy-mid); box-shadow: 0 0 0 12px rgba(255, 118, 62, .035), 0 22px 50px rgba(0, 0, 0, .25); transform: rotate(-8deg); }
.sd-graphic-branding-mark span { color: var(--secondary); font-family: var(--font-display); font-size: 74px; font-weight: 900; letter-spacing: -4px; }
.sd-graphic-branding-mark small { margin-top: -2.2rem; color: var(--muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.6px; line-height: 1.4; text-align: center; }
.sd-graphic-services { background: var(--navy); }
.sd-graphic-section-head { margin-bottom: 3rem; }
.sd-graphic-section-head > p:not(.sd-kicker):not(.sd-lead) { max-width: 650px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-graphic-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.sd-graphic-service-card { min-width: 0; min-height: 255px; display: flex; flex-direction: column; padding: 1.35rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-graphic-service-card:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .44); box-shadow: 0 18px 38px rgba(255, 62, 62, .12); }
.sd-graphic-service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border: 1px solid rgba(255, 118, 62, .25); border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.sd-graphic-service-card h3 { margin: 0 0 .6rem; color: var(--off-white); font-size: 18px; line-height: 1.3; }
.sd-graphic-service-card p { flex: 1; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-graphic-process { background: var(--navy-dark); }
.sd-graphic-section-head:not(.text-center) { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.sd-graphic-section-head:not(.text-center) > .sd-lead { max-width: 380px; margin: 0; }
.sd-graphic-process-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sd-graphic-process-grid::before { content: ''; position: absolute; top: 44px; right: 10%; left: 10%; height: 1px; background: var(--gradient-primary); opacity: .45; }
.sd-graphic-process-step { position: relative; z-index: 1; min-height: 240px; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 16px; background: linear-gradient(160deg, var(--navy-mid), var(--navy)); }
.sd-graphic-step-number { display: block; margin-bottom: .7rem; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; }
.sd-graphic-step-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 50%; color: var(--white); background: var(--gradient-primary); box-shadow: 0 10px 22px rgba(255, 62, 62, .18); }
.sd-graphic-process-step h3 { margin: 0 0 .6rem; color: var(--off-white); font-size: 17px; line-height: 1.3; }
.sd-graphic-process-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-graphic-why { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy), var(--navy-dark)); }
.sd-graphic-why::before { content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .1) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); }
.sd-graphic-checklist { display: grid; gap: .7rem; }
.sd-graphic-checklist > div { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .7rem .85rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 12px; color: var(--off-white); background: rgba(14, 17, 31, .72); font-size: 13px; }
.sd-graphic-checklist i { color: var(--secondary); }
.sd-graphic-audience { background: var(--navy); }
.sd-graphic-audience-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; max-width: 900px; margin: 0 auto; }
.sd-graphic-audience-list span { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .8rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 999px; color: var(--off-white); background: rgba(255, 62, 62, .06); font-size: 12px; }
.sd-graphic-audience-list i { color: var(--secondary); font-size: 10px; }
.sd-graphic-faq { background: var(--navy-dark); }
.sd-graphic-accordion .accordion-item { margin-bottom: .7rem; overflow: hidden; border: 1px solid rgba(255, 118, 62, .16); border-radius: 12px; background: var(--navy-mid); }
.sd-graphic-accordion .accordion-button { color: var(--off-white); background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; }
.sd-graphic-accordion .accordion-button:not(.collapsed) { color: var(--secondary); background: rgba(255, 62, 62, .07); }
.sd-graphic-accordion .accordion-button::after { filter: brightness(0) invert(1); }
.sd-graphic-accordion .accordion-body { color: var(--muted); font-size: 14px; line-height: 1.65; }
.sd-graphic-cta { padding-top: 2rem; background: var(--navy-dark); }
.sd-graphic-cta-panel { max-width: 920px; margin: 0 auto; padding: clamp(2.3rem, 5vw, 4.5rem) clamp(1.1rem, 5vw, 3.5rem); border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box, var(--gradient-primary) border-box; box-shadow: 0 25px 60px rgba(255, 62, 62, .14); }
.sd-graphic-cta-panel > p:not(.sd-kicker) { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 991.98px) {
    .sd-graphic-intro-grid, .sd-graphic-branding-grid, .sd-graphic-why-grid, .sd-graphic-faq-grid { gap: 2.5rem; }
    .sd-graphic-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-graphic-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-graphic-process-grid::before { display: none; }
}
@media (max-width: 767.98px) {
    .sd-graphic-intro-grid, .sd-graphic-branding-grid, .sd-graphic-why-grid, .sd-graphic-faq-grid { grid-template-columns: 1fr; }
    .sd-graphic-section-head:not(.text-center) { display: block; }
    .sd-graphic-section-head:not(.text-center) > .sd-lead { margin-top: .8rem; }
    .sd-graphic-branding-mark { width: 175px; height: 175px; }
    .sd-graphic-brand-board { min-height: 340px; }
}
@media (max-width: 575.98px) {
    .sd-graphic-intro .sd-btn, .sd-graphic-why .sd-btn, .sd-graphic-cta .sd-btn { width: 100%; justify-content: center; }
    .sd-graphic-brand-board { min-height: 285px; border-radius: 16px; }
    .sd-graphic-board-content { min-height: 220px; padding: 2.2rem 1.25rem; }
    .sd-graphic-board-content strong { font-size: 37px; }
    .sd-graphic-board-palette i { width: 31px; height: 31px; }
    .sd-graphic-service-grid, .sd-graphic-process-grid { grid-template-columns: 1fr; }
    .sd-graphic-service-card, .sd-graphic-process-step { min-height: 0; }
    .sd-graphic-audience-list { justify-content: flex-start; }
    .sd-graphic-cta-panel { border-radius: 16px; padding: 2rem 1rem; }
}

/* Graphic Design brand-support visual */
.sd-graphic-identity-board { position: relative; min-height: 310px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 118, 62, .28); border-radius: 22px; background: radial-gradient(circle at 22% 28%, rgba(255, 62, 62, .16), transparent 28%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 24px 56px rgba(0, 0, 0, .28); transform: rotate(-1deg); }
.sd-graphic-identity-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255, 118, 62, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .12) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 74%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 74%); }
.sd-graphic-identity-sheet { position: relative; z-index: 2; width: min(70%, 270px); min-height: 225px; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: #f5f1e8; box-shadow: 14px 18px 0 rgba(0, 0, 0, .18), 0 22px 40px rgba(0, 0, 0, .3); transform: rotate(4deg); }
.sd-graphic-identity-label { display: block; color: #7b5a52; font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-graphic-identity-sheet strong { display: block; margin-top: 1.1rem; color: #191623; font-family: Georgia, serif; font-size: 76px; font-weight: 400; line-height: .8; letter-spacing: -8px; }
.sd-graphic-identity-font { display: block; max-width: 180px; margin-top: 1.25rem; color: #493b4a; font-family: var(--font); font-size: 12px; line-height: 1.35; }
.sd-graphic-identity-swatches { display: flex; gap: .38rem; margin-top: 1.2rem; }
.sd-graphic-identity-swatches i { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); }
.sd-graphic-identity-swatches i:nth-child(2) { background: var(--secondary); }
.sd-graphic-identity-swatches i:nth-child(3) { background: #191623; }
.sd-graphic-identity-swatches i:nth-child(4) { background: #d9b9a9; }
.sd-graphic-identity-crop { position: absolute; z-index: 3; width: 18px; height: 18px; border-color: var(--secondary); }
.sd-graphic-identity-crop--tl { top: 13%; left: 15%; border-top: 1px solid; border-left: 1px solid; }
.sd-graphic-identity-crop--br { right: 15%; bottom: 13%; border-right: 1px solid; border-bottom: 1px solid; }
.sd-graphic-identity-tool { position: absolute; z-index: 4; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 118, 62, .3); border-radius: 11px; color: var(--white); background: rgba(14, 17, 31, .88); box-shadow: 0 12px 24px rgba(0, 0, 0, .28); font-family: var(--font-display); font-weight: 800; }
.sd-graphic-identity-tool i { color: var(--secondary); font-size: 15px; }
.sd-graphic-identity-tool--pen { top: 17%; right: 14%; transform: rotate(12deg); }
.sd-graphic-identity-tool--type { bottom: 18%; left: 13%; color: var(--secondary); font-size: 21px; transform: rotate(-10deg); }
.sd-graphic-identity-tool--node { right: 12%; bottom: 19%; transform: rotate(8deg); }
@media (max-width: 767.98px) { .sd-graphic-identity-board { min-height: 285px; border-radius: 16px; } .sd-graphic-identity-sheet { width: 68%; min-height: 205px; padding: 1rem; } .sd-graphic-identity-sheet strong { font-size: 64px; } }
@media (max-width: 575.98px) { .sd-graphic-identity-board { min-height: 255px; } .sd-graphic-identity-sheet { width: 70%; min-height: 185px; } .sd-graphic-identity-sheet strong { margin-top: .85rem; font-size: 55px; } .sd-graphic-identity-font { margin-top: .9rem; font-size: 10px; } .sd-graphic-identity-tool { width: 34px; height: 34px; } .sd-graphic-identity-crop--tl { left: 8%; } .sd-graphic-identity-crop--br { right: 8%; } }

/* Dedicated Logo & Branding Design page */
.sd-logo-page { overflow: hidden; }
.sd-logo-intro { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-logo-intro::before { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .11) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 78% 48%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 78% 48%, #000, transparent 65%); }
.sd-logo-intro-grid, .sd-logo-thinking-grid, .sd-logo-why-grid, .sd-logo-faq-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-logo-intro p:not(.sd-kicker):not(.sd-lead), .sd-logo-thinking p:not(.sd-kicker):not(.sd-lead), .sd-logo-why p:not(.sd-kicker):not(.sd-lead) { max-width: 690px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-logo-system-board { position: relative; min-height: 390px; overflow: hidden; padding: 1rem; border: 1px solid rgba(255, 118, 62, .35); border-radius: 23px; background: radial-gradient(circle at 75% 18%, rgba(255, 118, 62, .2), transparent 30%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 25px 60px rgba(0, 0, 0, .3); transform: rotate(1deg); }
.sd-logo-system-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 32px 32px; transform: perspective(500px) rotateX(58deg) scale(1.4) translateY(24%); transform-origin: center bottom; mask-image: linear-gradient(to top, #000 10%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 78%); }
.sd-logo-system-toolbar { position: relative; z-index: 2; display: flex; align-items: center; gap: .3rem; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-logo-system-toolbar span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sd-logo-system-toolbar span:nth-child(2) { background: var(--secondary); }
.sd-logo-system-toolbar span:nth-child(3) { background: rgba(255, 255, 255, .5); }
.sd-logo-system-toolbar code { margin-left: .45rem; color: var(--muted); }
.sd-logo-system-mark { position: absolute; z-index: 2; top: 22%; left: 25%; display: grid; place-items: center; width: 185px; height: 185px; border: 1px solid rgba(255, 118, 62, .4); border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(255, 118, 62, .2), transparent 47%), rgba(4, 5, 10, .46); box-shadow: 0 0 0 13px rgba(255, 118, 62, .045), 0 20px 40px rgba(0, 0, 0, .25); transform: rotate(-8deg); }
.sd-logo-system-mark strong { position: relative; z-index: 2; color: var(--secondary); font-family: Georgia, serif; font-size: 102px; font-weight: 400; line-height: .75; }
.sd-logo-system-mark small { position: absolute; bottom: 30px; color: var(--muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.4px; }
.sd-logo-mark-orbit { position: absolute; width: 230px; height: 84px; border: 1px solid rgba(255, 62, 62, .42); border-radius: 50%; transform: rotate(42deg); }
.sd-logo-system-meta { position: absolute; z-index: 3; right: 10%; bottom: 15%; display: grid; grid-template-columns: repeat(4, 25px); gap: .45rem; align-items: center; padding: .7rem .75rem; border: 1px solid rgba(255, 118, 62, .27); border-radius: 10px; background: rgba(14, 17, 31, .86); box-shadow: 0 15px 28px rgba(0, 0, 0, .3); }
.sd-logo-system-meta span { grid-column: 1 / -1; color: var(--muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-logo-system-meta i { width: 22px; height: 22px; border-radius: 5px; background: var(--accent); }
.sd-logo-system-meta i:nth-of-type(2) { background: var(--secondary); }
.sd-logo-system-meta i:nth-of-type(3) { background: var(--off-white); }
.sd-logo-system-meta i:nth-of-type(4) { background: var(--navy); border: 1px solid rgba(255, 255, 255, .2); }
.sd-logo-system-type { position: absolute; z-index: 3; top: 22%; right: 9%; display: grid; gap: .1rem; color: var(--muted); font-family: var(--font-mono); font-size: 9px; transform: rotate(8deg); }
.sd-logo-system-type span { color: var(--off-white); font-family: Georgia, serif; font-size: 30px; line-height: 1; }
.sd-logo-system-type em { color: var(--secondary); font-style: normal; font-size: 8px; }
.sd-logo-thinking { background: var(--navy-dark); }
.sd-logo-construction { position: relative; min-height: 340px; overflow: hidden; border: 1px solid rgba(255, 118, 62, .31); border-radius: 22px; background: radial-gradient(circle at 50% 46%, rgba(255, 62, 62, .12), transparent 37%), linear-gradient(145deg, var(--navy-mid), var(--navy)); box-shadow: 0 24px 54px rgba(0, 0, 0, .28); }
.sd-logo-construction-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 30px 30px; }
.sd-logo-guide { position: absolute; z-index: 1; border: 1px dashed rgba(255, 118, 62, .38); border-radius: 50%; }
.sd-logo-guide--one { top: 13%; left: 16%; width: 68%; height: 66%; }
.sd-logo-guide--two { top: 23%; left: 28%; width: 44%; height: 44%; border-color: rgba(255, 62, 62, .32); }
.sd-logo-construction-shape { position: absolute; z-index: 2; top: 20%; left: 36%; width: 28%; height: 47%; border: 8px solid var(--secondary); border-top-color: transparent; border-radius: 50% 50% 12% 50%; transform: rotate(28deg); box-shadow: 0 0 0 8px rgba(255, 118, 62, .06); }
.sd-logo-construction-shape span { position: absolute; width: 11px; height: 11px; border: 2px solid var(--off-white); border-radius: 50%; background: var(--accent); }
.sd-logo-construction-shape span:first-child { top: -15px; left: 30%; }
.sd-logo-construction-shape span:last-child { right: -16px; bottom: 21%; }
.sd-logo-node { position: absolute; z-index: 3; width: 9px; height: 9px; border: 2px solid var(--off-white); border-radius: 50%; background: var(--accent); }
.sd-logo-node--one { top: 24%; left: 35%; }
.sd-logo-node--two { top: 67%; left: 58%; background: var(--secondary); }
.sd-logo-node--three { top: 44%; right: 23%; }
.sd-logo-construction-caption { position: absolute; z-index: 4; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; display: grid; gap: .35rem; padding: .7rem .8rem; border-left: 2px solid var(--secondary); background: rgba(4, 5, 10, .62); }
.sd-logo-construction-caption code { color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-logo-construction-caption strong { color: var(--off-white); font-size: 13px; line-height: 1.35; }
.sd-logo-principles { display: grid; gap: .65rem; margin-top: 1.35rem; }
.sd-logo-principles > div { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: .65rem .75rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 11px; color: var(--muted); background: rgba(14, 17, 31, .72); font-size: 13px; }
.sd-logo-principles i { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: var(--secondary); background: var(--accent-soft); }
.sd-logo-principles strong { color: var(--off-white); }
.sd-logo-services { background: var(--navy); }
.sd-logo-section-head { margin-bottom: 3rem; }
.sd-logo-section-head:not(.text-center) { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.sd-logo-section-head:not(.text-center) > .sd-lead { max-width: 380px; margin: 0; }
.sd-logo-section-head > p:not(.sd-kicker):not(.sd-lead) { max-width: 680px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-logo-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.sd-logo-service-card { min-width: 0; min-height: 245px; display: flex; flex-direction: column; padding: 1.35rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-logo-service-card:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .44); box-shadow: 0 18px 38px rgba(255, 62, 62, .12); }
.sd-logo-service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border: 1px solid rgba(255, 118, 62, .25); border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.sd-logo-service-card h3, .sd-logo-application-card h3, .sd-logo-process-step h3 { margin: 0 0 .6rem; color: var(--off-white); font-size: 18px; line-height: 1.3; }
.sd-logo-service-card p, .sd-logo-application-card p, .sd-logo-process-step p { flex: 1; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-logo-applications { background: var(--navy-dark); }
.sd-logo-application-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.sd-logo-application-card { position: relative; min-height: 260px; overflow: hidden; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(155deg, rgba(255, 62, 62, .08), var(--navy-mid)); transition: transform .3s ease, border-color .3s ease; }
.sd-logo-application-card:hover { transform: translateY(-4px); border-color: rgba(255, 118, 62, .43); }
.sd-logo-application-card > span { color: var(--secondary); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; }
.sd-logo-application-card h3 { margin-top: 3rem; }
.sd-logo-application-card > i { position: absolute; right: 1rem; bottom: 1rem; color: rgba(255, 118, 62, .18); font-size: 64px; transform: rotate(-12deg); }
.sd-logo-application-card--2 { background: linear-gradient(155deg, rgba(255, 118, 62, .09), var(--navy-mid)); }
.sd-logo-application-card--3 { background: linear-gradient(155deg, rgba(255, 62, 62, .09), var(--navy-mid)); }
.sd-logo-application-card--4 { background: linear-gradient(155deg, rgba(255, 118, 62, .12), var(--navy-mid)); }
.sd-logo-process { background: var(--navy); }
.sd-logo-process-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sd-logo-process-grid::before { content: ''; position: absolute; top: 44px; right: 10%; left: 10%; height: 1px; background: var(--gradient-primary); opacity: .45; }
.sd-logo-process-step { position: relative; z-index: 1; min-height: 245px; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 16px; background: linear-gradient(160deg, var(--navy-mid), var(--navy-dark)); }
.sd-logo-step-number { display: block; margin-bottom: .7rem; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; }
.sd-logo-step-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 50%; color: var(--white); background: var(--gradient-primary); box-shadow: 0 10px 22px rgba(255, 62, 62, .18); }
.sd-logo-why { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-logo-why::before { content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .1) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); }
.sd-logo-checklist { display: grid; gap: .7rem; }
.sd-logo-checklist > div { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .7rem .85rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 12px; color: var(--off-white); background: rgba(14, 17, 31, .72); font-size: 13px; }
.sd-logo-checklist i { color: var(--secondary); }
.sd-logo-audience { background: var(--navy-dark); }
.sd-logo-audience-inner { max-width: 920px; margin: 0 auto; }
.sd-logo-audience-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.8rem; }
.sd-logo-audience-tags span { display: inline-flex; padding: .65rem .8rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 999px; color: var(--off-white); background: rgba(255, 62, 62, .06); font-size: 12px; }
.sd-logo-faq { background: var(--navy); }
.sd-logo-accordion .accordion-item { margin-bottom: .7rem; overflow: hidden; border: 1px solid rgba(255, 118, 62, .16); border-radius: 12px; background: var(--navy-mid); }
.sd-logo-accordion .accordion-button { color: var(--off-white); background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; }
.sd-logo-accordion .accordion-button:not(.collapsed) { color: var(--secondary); background: rgba(255, 62, 62, .07); }
.sd-logo-accordion .accordion-button::after { filter: brightness(0) invert(1); }
.sd-logo-accordion .accordion-body { color: var(--muted); font-size: 14px; line-height: 1.65; }
.sd-logo-cta { padding-top: 2rem; background: var(--navy); }
.sd-logo-cta-panel { max-width: 920px; margin: 0 auto; padding: clamp(2.3rem, 5vw, 4.5rem) clamp(1.1rem, 5vw, 3.5rem); border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box, var(--gradient-primary) border-box; box-shadow: 0 25px 60px rgba(255, 62, 62, .14); }
.sd-logo-cta-panel > p:not(.sd-kicker) { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 991.98px) {
    .sd-logo-intro-grid, .sd-logo-thinking-grid, .sd-logo-why-grid, .sd-logo-faq-grid { gap: 2.5rem; }
    .sd-logo-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-logo-application-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-logo-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-logo-process-grid::before { display: none; }
}
@media (max-width: 767.98px) {
    .sd-logo-intro-grid, .sd-logo-thinking-grid, .sd-logo-why-grid, .sd-logo-faq-grid { grid-template-columns: 1fr; }
    .sd-logo-section-head:not(.text-center) { display: block; }
    .sd-logo-section-head:not(.text-center) > .sd-lead { margin-top: .8rem; }
    .sd-logo-system-board { min-height: 345px; }
    .sd-logo-construction { min-height: 300px; }
}
@media (max-width: 575.98px) {
    .sd-logo-intro .sd-btn, .sd-logo-why .sd-btn, .sd-logo-cta .sd-btn { width: 100%; justify-content: center; }
    .sd-logo-system-board { min-height: 280px; border-radius: 16px; }
    .sd-logo-system-mark { left: 18%; width: 155px; height: 155px; }
    .sd-logo-system-mark strong { font-size: 84px; }
    .sd-logo-system-mark small { bottom: 24px; font-size: 7px; }
    .sd-logo-mark-orbit { width: 190px; height: 70px; }
    .sd-logo-system-type { right: 6%; }
    .sd-logo-system-type span { font-size: 24px; }
    .sd-logo-system-meta { right: 6%; bottom: 10%; padding: .55rem; }
    .sd-logo-thinking-grid { gap: 1.8rem; }
    .sd-logo-construction { min-height: 265px; border-radius: 16px; }
    .sd-logo-construction-caption { right: .8rem; bottom: .8rem; left: .8rem; }
    .sd-logo-service-grid, .sd-logo-application-grid, .sd-logo-process-grid { grid-template-columns: 1fr; gap: .75rem; }
    .sd-logo-service-card, .sd-logo-application-card, .sd-logo-process-step { min-height: 0; }
    .sd-logo-application-card h3 { margin-top: 2rem; }
    .sd-logo-cta-panel { border-radius: 16px; padding: 2rem 1rem; }
}

/* Logo & Branding responsive hardening */
.sd-logo-intro-grid > *, .sd-logo-thinking-grid > *, .sd-logo-why-grid > *, .sd-logo-faq-grid > *, .sd-logo-service-card, .sd-logo-application-card, .sd-logo-process-step { min-width: 0; }
.sd-logo-system-board, .sd-logo-construction { width: 100%; max-width: 100%; }
.sd-logo-system-toolbar code, .sd-logo-system-type em, .sd-logo-construction-caption strong { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .sd-logo-system-toolbar { max-width: 100%; overflow: hidden; }
    .sd-logo-system-toolbar code { min-width: 0; max-width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
    .sd-logo-section-head { margin-bottom: 2rem; }
    .sd-logo-section-head .sd-h2 { font-size: clamp(26px, 8vw, 34px); }
    .sd-logo-application-card > i { font-size: 52px; }
}

/* Dedicated Digital Marketing page */
.sd-digital-page { overflow: hidden; }
.sd-digital-intro { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-digital-intro::before { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .11) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 78% 48%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 78% 48%, #000, transparent 65%); }
.sd-digital-intro-grid, .sd-digital-outcomes-grid, .sd-digital-why-grid, .sd-digital-faq-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-digital-intro p:not(.sd-kicker):not(.sd-lead), .sd-digital-outcomes p:not(.sd-kicker):not(.sd-lead), .sd-digital-why p:not(.sd-kicker):not(.sd-lead) { max-width: 690px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-digital-dashboard { position: relative; min-height: 390px; overflow: hidden; padding: 1rem; border: 1px solid rgba(255, 118, 62, .35); border-radius: 23px; background: radial-gradient(circle at 76% 20%, rgba(255, 118, 62, .2), transparent 30%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 25px 60px rgba(0, 0, 0, .3); transform: rotate(1deg); }
.sd-digital-dashboard-grid { position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 32px 32px; transform: perspective(500px) rotateX(58deg) scale(1.4) translateY(24%); transform-origin: center bottom; mask-image: linear-gradient(to top, #000 10%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 78%); }
.sd-digital-dashboard-top { position: relative; z-index: 2; display: flex; align-items: center; gap: .3rem; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-digital-dashboard-top span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sd-digital-dashboard-top span:nth-child(2) { background: var(--secondary); }
.sd-digital-dashboard-top span:nth-child(3) { background: rgba(255, 255, 255, .5); }
.sd-digital-dashboard-top code { margin-left: .45rem; color: var(--muted); }
.sd-digital-dashboard-body { position: relative; z-index: 2; min-height: 320px; padding: 2.8rem 1.8rem 1.2rem; }
.sd-digital-dashboard-heading { display: grid; gap: .45rem; }
.sd-digital-dashboard-heading span, .sd-digital-metric-row small { color: var(--secondary); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.2px; }
.sd-digital-dashboard-heading strong { max-width: 300px; color: var(--white); font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); line-height: 1; letter-spacing: -1.4px; }
.sd-digital-metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.8rem; }
.sd-digital-metric-row > div { padding: .75rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 10px; background: rgba(4, 5, 10, .45); }
.sd-digital-metric-row strong { display: block; margin-top: .35rem; color: var(--off-white); font-size: 13px; }
.sd-digital-metric-row i { display: block; height: 5px; margin-top: .7rem; border-radius: 999px; background: rgba(148, 163, 184, .2); }
.sd-digital-metric-row b { display: block; height: 100%; border-radius: inherit; background: var(--gradient-primary); }
.sd-digital-funnel { display: flex; align-items: center; justify-content: center; gap: .42rem; margin-top: 2.1rem; color: var(--off-white); font-family: var(--font-mono); font-size: 9px; }
.sd-digital-funnel span { padding: .38rem .48rem; border: 1px solid rgba(255, 118, 62, .27); border-radius: 6px; background: rgba(255, 62, 62, .06); }
.sd-digital-funnel i { width: 18px; height: 1px; background: var(--secondary); }
.sd-digital-dashboard-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem; }
.sd-digital-dashboard-tags span { padding: .38rem .5rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 999px; color: var(--muted); font-size: 10px; }
.sd-digital-dashboard-tags i { color: var(--secondary); }
.sd-digital-services { background: var(--navy); }
.sd-digital-section-head { margin-bottom: 3rem; }
.sd-digital-section-head:not(.text-center) { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.sd-digital-section-head:not(.text-center) > .sd-lead { max-width: 380px; margin: 0; }
.sd-digital-service-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; align-items: stretch; }
.sd-digital-service-card { min-width: 0; min-height: 265px; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-digital-service-card:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .44); box-shadow: 0 18px 38px rgba(255, 62, 62, .12); }
.sd-digital-service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border: 1px solid rgba(255, 118, 62, .25); border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.sd-digital-service-card h3 { margin: 0 0 .6rem; color: var(--off-white); font-size: 17px; line-height: 1.3; }
.sd-digital-service-card p { flex: 1; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.sd-digital-outcomes { background: var(--navy-dark); }
.sd-digital-outcome-points { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; }
.sd-digital-outcome-points span { display: inline-flex; align-items: center; gap: .42rem; padding: .55rem .65rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 999px; color: var(--off-white); background: rgba(255, 62, 62, .06); font-size: 11px; }
.sd-digital-outcome-points i { color: var(--secondary); }
.sd-digital-path { position: relative; display: grid; gap: 1.1rem; padding: 2rem 1.4rem 2rem 2rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 20px; background: linear-gradient(145deg, rgba(255, 62, 62, .09), var(--navy-mid)); box-shadow: 0 24px 52px rgba(0, 0, 0, .25); }
.sd-digital-path-line { position: absolute; top: 14%; bottom: 14%; left: 50px; width: 1px; background: var(--gradient-primary); opacity: .55; }
.sd-digital-path > div { position: relative; z-index: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .7rem; align-items: center; padding: .65rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 11px; background: rgba(4, 5, 10, .42); }
.sd-digital-path > div i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--white); background: var(--gradient-primary); }
.sd-digital-path strong, .sd-digital-path small { display: block; }
.sd-digital-path strong { color: var(--off-white); font-size: 14px; }
.sd-digital-path small { margin-top: .1rem; color: var(--muted); font-size: 11px; }
.sd-digital-problems { background: var(--navy); }
.sd-digital-problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.sd-digital-problem { min-width: 0; display: flex; gap: .7rem; min-height: 148px; padding: 1rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 14px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease; }
.sd-digital-problem:hover { transform: translateY(-4px); border-color: rgba(255, 118, 62, .4); }
.sd-digital-problem-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; color: var(--secondary); background: var(--accent-soft); }
.sd-digital-problem h3 { margin: .1rem 0 .35rem; color: var(--off-white); font-size: 14px; line-height: 1.3; }
.sd-digital-problem p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.sd-digital-process { background: var(--navy-dark); }
.sd-digital-process-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sd-digital-process-grid::before { content: ''; position: absolute; top: 44px; right: 10%; left: 10%; height: 1px; background: var(--gradient-primary); opacity: .45; }
.sd-digital-process-step { position: relative; z-index: 1; min-height: 235px; padding: 1.2rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 16px; background: linear-gradient(160deg, var(--navy-mid), var(--navy)); }
.sd-digital-step-number { display: block; margin-bottom: .7rem; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; }
.sd-digital-step-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 50%; color: var(--white); background: var(--gradient-primary); box-shadow: 0 10px 22px rgba(255, 62, 62, .18); }
.sd-digital-process-step h3 { margin: 0 0 .55rem; color: var(--off-white); font-size: 17px; }
.sd-digital-process-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-digital-why { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy), var(--navy-dark)); }
.sd-digital-why::before { content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .1) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); }
.sd-digital-trust-card { padding: 1.5rem; border: 1px solid rgba(255, 118, 62, .3); border-radius: 20px; background: radial-gradient(circle at 80% 20%, rgba(255, 118, 62, .16), transparent 38%), var(--navy-mid); box-shadow: 0 24px 52px rgba(0, 0, 0, .26); }
.sd-digital-trust-number { display: block; color: var(--secondary); font-family: var(--font-display); font-size: clamp(58px, 9vw, 100px); font-weight: 900; line-height: .85; letter-spacing: -5px; }
.sd-digital-trust-card strong { display: block; max-width: 290px; margin-top: 1rem; color: var(--off-white); font-size: 19px; line-height: 1.3; }
.sd-digital-trust-card p { margin: .8rem 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-digital-trust-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.sd-digital-trust-tags span { padding: .42rem .55rem; border: 1px solid rgba(255, 118, 62, .22); border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-digital-faq { background: var(--navy); }
.sd-digital-accordion .accordion-item { margin-bottom: .7rem; overflow: hidden; border: 1px solid rgba(255, 118, 62, .16); border-radius: 12px; background: var(--navy-mid); }
.sd-digital-accordion .accordion-button { color: var(--off-white); background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; }
.sd-digital-accordion .accordion-button:not(.collapsed) { color: var(--secondary); background: rgba(255, 62, 62, .07); }
.sd-digital-accordion .accordion-button::after { filter: brightness(0) invert(1); }
.sd-digital-accordion .accordion-body { color: var(--muted); font-size: 14px; line-height: 1.65; }
.sd-digital-cta { padding-top: 2rem; background: var(--navy); }
.sd-digital-cta-panel { max-width: 920px; margin: 0 auto; padding: clamp(2.3rem, 5vw, 4.5rem) clamp(1.1rem, 5vw, 3.5rem); border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box, var(--gradient-primary) border-box; box-shadow: 0 25px 60px rgba(255, 62, 62, .14); }
.sd-digital-cta-panel > p:not(.sd-kicker) { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 1199.98px) { .sd-digital-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .sd-digital-intro-grid, .sd-digital-outcomes-grid, .sd-digital-why-grid, .sd-digital-faq-grid { gap: 2.5rem; } .sd-digital-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-digital-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-digital-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-digital-process-grid::before { display: none; } }
@media (max-width: 767.98px) { .sd-digital-intro-grid, .sd-digital-outcomes-grid, .sd-digital-why-grid, .sd-digital-faq-grid { grid-template-columns: 1fr; } .sd-digital-section-head:not(.text-center) { display: block; } .sd-digital-section-head:not(.text-center) > .sd-lead { margin-top: .8rem; } .sd-digital-dashboard { min-height: 345px; } .sd-digital-problem-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .sd-digital-intro .sd-btn, .sd-digital-why .sd-btn, .sd-digital-cta .sd-btn { width: 100%; justify-content: center; } .sd-digital-dashboard { min-height: 285px; border-radius: 16px; } .sd-digital-dashboard-body { min-height: 220px; padding: 2rem 1rem 1rem; } .sd-digital-dashboard-heading strong { font-size: 31px; } .sd-digital-metric-row { gap: .45rem; margin-top: 1.25rem; } .sd-digital-metric-row > div { padding: .55rem; } .sd-digital-funnel { gap: .2rem; margin-top: 1.35rem; font-size: 7px; } .sd-digital-funnel span { padding: .3rem .35rem; } .sd-digital-funnel i { width: 9px; } .sd-digital-dashboard-tags { gap: .25rem; margin-top: .9rem; } .sd-digital-dashboard-tags span { padding: .3rem .4rem; font-size: 8px; } .sd-digital-service-grid, .sd-digital-process-grid { grid-template-columns: 1fr; gap: .75rem; } .sd-digital-service-card, .sd-digital-process-step { min-height: 0; } .sd-digital-path { padding: 1.2rem 1rem 1.2rem 1.3rem; } .sd-digital-path-line { left: 42px; } .sd-digital-outcome-points { gap: .4rem; } .sd-digital-outcome-points span { font-size: 10px; } .sd-digital-cta-panel { border-radius: 16px; padding: 2rem 1rem; } }
/* Digital Marketing responsive hardening */
.sd-digital-intro-grid > *, .sd-digital-outcomes-grid > *, .sd-digital-why-grid > *, .sd-digital-faq-grid > *, .sd-digital-service-card, .sd-digital-problem, .sd-digital-process-step { min-width: 0; }
.sd-digital-dashboard, .sd-digital-path, .sd-digital-trust-card { width: 100%; max-width: 100%; }
.sd-digital-dashboard-top code, .sd-digital-dashboard-heading strong, .sd-digital-problem p { overflow-wrap: anywhere; }

/* Dedicated Website Design & Development page */
.sd-website-page { overflow: hidden; }
.sd-website-intro { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-website-intro::before { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .11) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 78% 48%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 78% 48%, #000, transparent 65%); }
.sd-website-intro-grid, .sd-website-architecture-grid, .sd-website-branding-grid, .sd-website-why-grid, .sd-website-faq-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-website-intro p:not(.sd-kicker):not(.sd-lead), .sd-website-architecture p:not(.sd-kicker):not(.sd-lead), .sd-website-branding p:not(.sd-kicker):not(.sd-lead), .sd-website-why p:not(.sd-kicker):not(.sd-lead) { max-width: 690px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-website-browser { position: relative; min-height: 390px; overflow: hidden; padding: 1rem; border: 1px solid rgba(255, 118, 62, .35); border-radius: 23px; background: radial-gradient(circle at 76% 18%, rgba(255, 118, 62, .2), transparent 30%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 25px 60px rgba(0, 0, 0, .3); transform: rotate(1deg); }
.sd-website-browser-grid { position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 32px 32px; transform: perspective(500px) rotateX(58deg) scale(1.4) translateY(24%); transform-origin: center bottom; mask-image: linear-gradient(to top, #000 10%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 78%); }
.sd-website-browser-top { position: relative; z-index: 2; display: flex; align-items: center; gap: .3rem; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-website-browser-top span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sd-website-browser-top span:nth-child(2) { background: var(--secondary); }
.sd-website-browser-top span:nth-child(3) { background: rgba(255, 255, 255, .5); }
.sd-website-browser-top code { margin-left: .45rem; color: var(--muted); }
.sd-website-browser-body { position: relative; z-index: 2; min-height: 320px; padding: 2.7rem 1.4rem 1.2rem; }
.sd-website-screen { position: relative; width: 72%; min-height: 215px; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 13px; background: linear-gradient(145deg, #151b30, #04050a); box-shadow: 13px 18px 0 rgba(0, 0, 0, .17), 0 22px 42px rgba(0, 0, 0, .3); transform: rotate(-3deg); }
.sd-website-screen > span { display: block; margin-bottom: 1.3rem; color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-website-screen strong { display: block; color: var(--white); font-family: var(--font-display); font-size: clamp(22px, 3vw, 35px); line-height: 1; }
.sd-website-screen strong em { color: var(--secondary); font-style: normal; }
.sd-website-screen i { display: block; width: 64%; height: 5px; margin-top: .9rem; border-radius: 999px; background: rgba(148, 163, 184, .3); }
.sd-website-screen i:nth-of-type(2) { width: 46%; margin-top: .4rem; }
.sd-website-screen b { display: inline-block; margin-top: 1.1rem; padding: .43rem .6rem; border-radius: 5px; color: var(--white); background: var(--gradient-primary); font-size: 9px; font-weight: 600; }
.sd-website-mobile { position: absolute; right: 6%; bottom: 8%; width: 86px; min-height: 145px; padding: .55rem; border: 1px solid rgba(255, 118, 62, .36); border-radius: 12px; background: linear-gradient(145deg, #11172b, #04050a); box-shadow: 10px 15px 0 rgba(0, 0, 0, .2); transform: rotate(7deg); }
.sd-website-mobile > span { display: block; width: 23px; height: 3px; margin: 0 auto .8rem; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.sd-website-mobile strong { display: block; color: var(--off-white); font-family: var(--font-display); font-size: 16px; line-height: 1; }
.sd-website-mobile strong em { color: var(--secondary); font-style: normal; }
.sd-website-mobile i { display: block; width: 80%; height: 4px; margin-top: .8rem; border-radius: 999px; background: rgba(148, 163, 184, .3); }
.sd-website-mobile b { display: block; width: 50%; height: 17px; margin-top: .75rem; border-radius: 4px; background: var(--gradient-primary); }
.sd-website-float { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .68rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 10px; color: var(--off-white); background: rgba(14, 17, 31, .88); box-shadow: 0 12px 25px rgba(0, 0, 0, .28); font-size: 10px; font-weight: 700; }
.sd-website-float i { color: var(--secondary); }
.sd-website-float--speed { top: 22%; right: 6%; }
.sd-website-float--mobile { bottom: 8%; left: 7%; }
.sd-website-offer { background: var(--navy); }
.sd-website-section-head { margin-bottom: 3rem; }
.sd-website-section-head:not(.text-center) { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.sd-website-section-head:not(.text-center) > .sd-lead { max-width: 380px; margin: 0; }
.sd-website-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: stretch; }
.sd-website-service-card { min-width: 0; min-height: 235px; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-website-service-card:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .44); box-shadow: 0 18px 38px rgba(255, 62, 62, .12); }
.sd-website-service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border: 1px solid rgba(255, 118, 62, .25); border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.sd-website-service-card h3 { margin: 0 0 .6rem; color: var(--off-white); font-size: 17px; line-height: 1.3; }
.sd-website-service-card p { flex: 1; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.sd-website-architecture { background: var(--navy-dark); }
.sd-website-architecture-visual { position: relative; min-height: 355px; overflow: hidden; border: 1px solid rgba(255, 118, 62, .3); border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgba(255, 62, 62, .12), transparent 34%), linear-gradient(145deg, var(--navy-mid), var(--navy)); box-shadow: 0 24px 54px rgba(0, 0, 0, .28); }
.sd-website-architecture-grid-lines { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 30px 30px; }
.sd-website-architecture-core { position: absolute; top: 34%; left: 35%; z-index: 2; display: grid; place-items: center; width: 30%; min-height: 120px; padding: .7rem; border: 1px solid rgba(255, 118, 62, .42); border-radius: 16px; background: rgba(4, 5, 10, .65); box-shadow: 0 0 0 9px rgba(255, 118, 62, .05); text-align: center; transform: rotate(-3deg); }
.sd-website-architecture-core span { color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-website-architecture-core strong { color: var(--off-white); font-family: var(--font-display); font-size: 22px; line-height: 1; }
.sd-website-architecture-core i { width: 40px; height: 3px; margin-top: .2rem; border-radius: 999px; background: var(--gradient-primary); }
.sd-website-architecture-node { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .65rem; border: 1px solid rgba(255, 118, 62, .26); border-radius: 9px; color: var(--off-white); background: rgba(14, 17, 31, .9); box-shadow: 0 12px 25px rgba(0, 0, 0, .25); font-size: 10px; }
.sd-website-architecture-node i { color: var(--secondary); }
.sd-website-architecture-node--content { top: 16%; left: 11%; }
.sd-website-architecture-node--design { top: 16%; right: 11%; }
.sd-website-architecture-node--speed { right: 10%; bottom: 17%; }
.sd-website-architecture-node--trust { bottom: 17%; left: 10%; }
.sd-website-principles { display: grid; gap: .65rem; margin-top: 1.35rem; }
.sd-website-principles > div { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: .65rem .75rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 11px; color: var(--muted); background: rgba(14, 17, 31, .72); font-size: 13px; }
.sd-website-principles i { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: var(--secondary); background: var(--accent-soft); }
.sd-website-principles strong { color: var(--off-white); }
.sd-website-problems { background: var(--navy); }
.sd-website-problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.sd-website-problem { min-width: 0; display: flex; gap: .7rem; min-height: 145px; padding: 1rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 14px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease; }
.sd-website-problem:hover { transform: translateY(-4px); border-color: rgba(255, 118, 62, .4); }
.sd-website-problem-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; color: var(--secondary); background: var(--accent-soft); }
.sd-website-problem h3 { margin: .1rem 0 .35rem; color: var(--off-white); font-size: 14px; line-height: 1.3; }
.sd-website-problem p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.sd-website-process { background: var(--navy-dark); }
.sd-website-process-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; }
.sd-website-process-grid::before { content: ''; position: absolute; top: 44px; right: 8%; left: 8%; height: 1px; background: var(--gradient-primary); opacity: .45; }
.sd-website-process-step { position: relative; z-index: 1; min-height: 235px; padding: 1.1rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 16px; background: linear-gradient(160deg, var(--navy-mid), var(--navy)); }
.sd-website-step-number { display: block; margin-bottom: .7rem; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; }
.sd-website-step-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 1rem; border-radius: 50%; color: var(--white); background: var(--gradient-primary); box-shadow: 0 10px 22px rgba(255, 62, 62, .18); }
.sd-website-process-step h3 { margin: 0 0 .55rem; color: var(--off-white); font-size: 16px; }
.sd-website-process-step p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.sd-website-branding { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy), var(--navy-dark)); }
.sd-website-branding::before { content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .1) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); }
.sd-website-brand-system { position: relative; min-height: 340px; overflow: hidden; border: 1px solid rgba(255, 118, 62, .3); border-radius: 22px; background: radial-gradient(circle at 72% 22%, rgba(255, 118, 62, .18), transparent 32%), var(--navy-mid); box-shadow: 0 24px 54px rgba(0, 0, 0, .28); }
.sd-website-brand-system-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 28px 28px; }
.sd-website-brand-system-card { position: absolute; top: 22%; left: 22%; z-index: 2; width: 56%; min-height: 190px; padding: 1.2rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; background: #f5f1e8; box-shadow: 13px 17px 0 rgba(0, 0, 0, .2); transform: rotate(-4deg); }
.sd-website-brand-system-card small { display: block; color: #7b5a52; font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-website-brand-system-card strong { display: block; margin-top: 1.15rem; color: #191623; font-family: var(--font-display); font-size: 29px; line-height: .92; }
.sd-website-brand-system-card strong em { color: #c65b40; font-style: normal; }
.sd-website-brand-system-card > div { display: flex; gap: .35rem; margin-top: 1.15rem; }
.sd-website-brand-system-card i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); }
.sd-website-brand-system-card i:nth-child(2) { background: var(--secondary); }
.sd-website-brand-system-card i:nth-child(3) { background: #191623; }
.sd-website-brand-system-card i:nth-child(4) { background: #d9b9a9; }
.sd-website-brand-chip { position: absolute; z-index: 3; padding: .45rem .6rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 8px; color: var(--off-white); background: rgba(4, 5, 10, .72); font-family: var(--font-mono); font-size: 9px; }
.sd-website-brand-chip--logo { top: 16%; right: 10%; }
.sd-website-brand-chip--type { bottom: 16%; left: 11%; }
.sd-website-brand-chip--colour { right: 10%; bottom: 16%; color: var(--secondary); }
.sd-website-why { background: var(--navy-dark); }
.sd-website-trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.sd-website-trust-list > div { display: flex; align-items: center; gap: .65rem; min-height: 52px; padding: .7rem .75rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 11px; color: var(--off-white); background: rgba(14, 17, 31, .72); font-size: 12px; }
.sd-website-trust-list i { color: var(--secondary); }
.sd-website-faq { background: var(--navy); }
.sd-website-accordion .accordion-item { margin-bottom: .7rem; overflow: hidden; border: 1px solid rgba(255, 118, 62, .16); border-radius: 12px; background: var(--navy-mid); }
.sd-website-accordion .accordion-button { color: var(--off-white); background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; }
.sd-website-accordion .accordion-button:not(.collapsed) { color: var(--secondary); background: rgba(255, 62, 62, .07); }
.sd-website-accordion .accordion-button::after { filter: brightness(0) invert(1); }
.sd-website-accordion .accordion-body { color: var(--muted); font-size: 14px; line-height: 1.65; }
.sd-website-cta { padding-top: 2rem; background: var(--navy); }
.sd-website-cta-panel { max-width: 920px; margin: 0 auto; padding: clamp(2.3rem, 5vw, 4.5rem) clamp(1.1rem, 5vw, 3.5rem); border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box, var(--gradient-primary) border-box; box-shadow: 0 25px 60px rgba(255, 62, 62, .14); }
.sd-website-cta-panel > p:not(.sd-kicker) { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 1199.98px) { .sd-website-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sd-website-process-grid::before { display: none; } }
@media (max-width: 991.98px) { .sd-website-intro-grid, .sd-website-architecture-grid, .sd-website-branding-grid, .sd-website-why-grid, .sd-website-faq-grid { gap: 2.5rem; } .sd-website-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-website-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-website-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .sd-website-intro-grid, .sd-website-architecture-grid, .sd-website-branding-grid, .sd-website-why-grid, .sd-website-faq-grid { grid-template-columns: 1fr; } .sd-website-section-head:not(.text-center) { display: block; } .sd-website-section-head:not(.text-center) > .sd-lead { margin-top: .8rem; } .sd-website-browser { min-height: 345px; } .sd-website-problem-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .sd-website-intro .sd-btn, .sd-website-branding .sd-btn, .sd-website-why .sd-btn, .sd-website-cta .sd-btn { width: 100%; justify-content: center; } .sd-website-browser { min-height: 285px; border-radius: 16px; } .sd-website-browser-body { min-height: 220px; padding: 2rem .75rem 1rem; } .sd-website-screen { width: 76%; min-height: 160px; padding: .85rem; } .sd-website-screen > span { margin-bottom: .85rem; font-size: 7px; } .sd-website-screen strong { font-size: 23px; } .sd-website-screen b { margin-top: .75rem; font-size: 8px; } .sd-website-mobile { width: 67px; min-height: 120px; padding: .4rem; } .sd-website-mobile strong { font-size: 13px; } .sd-website-float { padding: .4rem .5rem; font-size: 8px; } .sd-website-float--speed { top: 17%; right: 4%; } .sd-website-float--mobile { bottom: 7%; left: 4%; } .sd-website-service-grid, .sd-website-process-grid { grid-template-columns: 1fr; gap: .75rem; } .sd-website-service-card, .sd-website-process-step { min-height: 0; } .sd-website-architecture-visual { min-height: 275px; border-radius: 16px; } .sd-website-architecture-core { top: 34%; left: 31%; width: 38%; min-height: 95px; } .sd-website-architecture-core strong { font-size: 17px; } .sd-website-architecture-node { padding: .4rem .45rem; font-size: 8px; } .sd-website-architecture-node--content { left: 5%; } .sd-website-architecture-node--design { right: 5%; } .sd-website-architecture-node--speed { right: 4%; } .sd-website-architecture-node--trust { left: 4%; } .sd-website-brand-system { min-height: 280px; border-radius: 16px; } .sd-website-brand-system-card { top: 21%; left: 16%; width: 68%; min-height: 160px; padding: .85rem; } .sd-website-brand-system-card strong { margin-top: .85rem; font-size: 23px; } .sd-website-brand-system-card > div { margin-top: .85rem; } .sd-website-brand-system-card i { width: 18px; height: 18px; } .sd-website-brand-chip { padding: .35rem .45rem; font-size: 8px; } .sd-website-trust-list { grid-template-columns: 1fr; } .sd-website-cta-panel { border-radius: 16px; padding: 2rem 1rem; } }
/* Website Design & Development responsive hardening */
.sd-website-intro-grid > *, .sd-website-architecture-grid > *, .sd-website-branding-grid > *, .sd-website-why-grid > *, .sd-website-faq-grid > *, .sd-website-service-card, .sd-website-problem, .sd-website-process-step { min-width: 0; }
.sd-website-browser, .sd-website-architecture-visual, .sd-website-brand-system { width: 100%; max-width: 100%; }
.sd-website-browser-top code, .sd-website-screen strong, .sd-website-problem p { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .sd-website-browser-top { max-width: 100%; overflow: hidden; }
    .sd-website-browser-top code { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sd-website-section-head { margin-bottom: 2rem; }
    .sd-website-section-head .sd-h2 { font-size: clamp(26px, 8vw, 34px); }
    .sd-website-architecture-node { max-width: 39%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Dedicated Website Maintenance page */
.sd-maintenance-page { overflow: hidden; }
.sd-maintenance-intro { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-maintenance-intro::before { content: ''; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .11) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 78% 48%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 78% 48%, #000, transparent 65%); }
.sd-maintenance-intro-grid, .sd-maintenance-matters-grid, .sd-maintenance-platforms-grid, .sd-maintenance-why-grid, .sd-maintenance-faq-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-maintenance-intro p:not(.sd-kicker):not(.sd-lead), .sd-maintenance-matters p:not(.sd-kicker):not(.sd-lead), .sd-maintenance-platforms p:not(.sd-kicker):not(.sd-lead), .sd-maintenance-why p:not(.sd-kicker):not(.sd-lead) { max-width: 690px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-maintenance-console { position: relative; min-height: 390px; overflow: hidden; padding: 1rem; border: 1px solid rgba(255, 118, 62, .35); border-radius: 23px; background: radial-gradient(circle at 76% 18%, rgba(255, 118, 62, .2), transparent 30%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 25px 60px rgba(0, 0, 0, .3); transform: rotate(1deg); }
.sd-maintenance-console-grid { position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 32px 32px; transform: perspective(500px) rotateX(58deg) scale(1.4) translateY(24%); transform-origin: center bottom; mask-image: linear-gradient(to top, #000 10%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 78%); }
.sd-maintenance-console-top { position: relative; z-index: 2; display: flex; align-items: center; gap: .3rem; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-maintenance-console-top span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sd-maintenance-console-top span:nth-child(2) { background: var(--secondary); }
.sd-maintenance-console-top span:nth-child(3) { background: rgba(255, 255, 255, .5); }
.sd-maintenance-console-top code { margin-left: .45rem; color: var(--muted); }
.sd-maintenance-console-body { position: relative; z-index: 2; min-height: 320px; padding: 2.8rem 1.4rem 1.2rem; }
.sd-maintenance-status { display: grid; grid-template-columns: 10px auto; column-gap: .45rem; align-items: center; }
.sd-maintenance-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 6px rgba(255, 118, 62, .1); }
.sd-maintenance-status small { color: var(--secondary); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.2px; }
.sd-maintenance-status strong { grid-column: 1 / -1; margin-top: .7rem; color: var(--white); font-family: var(--font-display); font-size: clamp(27px, 4vw, 44px); line-height: 1; letter-spacing: -1.3px; }
.sd-maintenance-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 2rem; }
.sd-maintenance-checks > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) 8px; gap: .55rem; align-items: center; padding: .7rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 10px; background: rgba(4, 5, 10, .45); }
.sd-maintenance-checks > div > i { color: var(--secondary); }
.sd-maintenance-checks small, .sd-maintenance-checks strong { display: block; }
.sd-maintenance-checks small { color: var(--muted); font-family: var(--font-mono); font-size: 8px; }
.sd-maintenance-checks strong { margin-top: .2rem; color: var(--off-white); font-size: 12px; }
.sd-maintenance-checks b { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 10px rgba(255, 118, 62, .7); }
.sd-maintenance-console-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; color: var(--muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .8px; }
.sd-maintenance-console-footer strong { color: var(--secondary); }
.sd-maintenance-includes, .sd-maintenance-plans { background: var(--navy); }
.sd-maintenance-section-head { margin-bottom: 3rem; }
.sd-maintenance-section-head:not(.text-center) { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.sd-maintenance-section-head:not(.text-center) > .sd-lead { max-width: 380px; margin: 0; }
.sd-maintenance-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.sd-maintenance-service-card { min-width: 0; min-height: 225px; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-maintenance-service-card:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .44); box-shadow: 0 18px 38px rgba(255, 62, 62, .12); }
.sd-maintenance-service-icon, .sd-maintenance-plan-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border: 1px solid rgba(255, 118, 62, .25); border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.sd-maintenance-service-card h3, .sd-maintenance-plan-card h3 { margin: 0 0 .6rem; color: var(--off-white); font-size: 17px; line-height: 1.3; }
.sd-maintenance-service-card p, .sd-maintenance-plan-card p { flex: 1; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.sd-maintenance-matters { background: var(--navy-dark); }
.sd-maintenance-risk-visual { position: relative; min-height: 355px; overflow: hidden; border: 1px solid rgba(255, 118, 62, .3); border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgba(255, 62, 62, .12), transparent 34%), linear-gradient(145deg, var(--navy-mid), var(--navy)); box-shadow: 0 24px 54px rgba(0, 0, 0, .28); }
.sd-maintenance-risk-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 30px 30px; }
.sd-maintenance-risk-core { position: absolute; top: 34%; left: 35%; z-index: 2; display: grid; place-items: center; width: 30%; min-height: 120px; padding: .7rem; border: 1px solid rgba(255, 118, 62, .42); border-radius: 16px; background: rgba(4, 5, 10, .65); box-shadow: 0 0 0 9px rgba(255, 118, 62, .05); text-align: center; transform: rotate(-3deg); }
.sd-maintenance-risk-core span { color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-maintenance-risk-core strong { color: var(--off-white); font-family: var(--font-display); font-size: 22px; line-height: 1; }
.sd-maintenance-risk-core strong em { color: var(--secondary); font-style: normal; }
.sd-maintenance-risk-core i { width: 40px; height: 3px; margin-top: .2rem; border-radius: 999px; background: var(--gradient-primary); }
.sd-maintenance-risk-node { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .65rem; border: 1px solid rgba(255, 118, 62, .26); border-radius: 9px; color: var(--off-white); background: rgba(14, 17, 31, .9); box-shadow: 0 12px 25px rgba(0, 0, 0, .25); font-size: 10px; }
.sd-maintenance-risk-node i { color: var(--secondary); }
.sd-maintenance-risk-node--update { top: 16%; left: 11%; }
.sd-maintenance-risk-node--security { top: 16%; right: 11%; }
.sd-maintenance-risk-node--backup { right: 10%; bottom: 17%; }
.sd-maintenance-risk-node--speed { bottom: 17%; left: 10%; }
.sd-maintenance-principles { display: grid; gap: .65rem; margin-top: 1.35rem; }
.sd-maintenance-principles > div { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: .65rem .75rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 11px; color: var(--muted); background: rgba(14, 17, 31, .72); font-size: 13px; }
.sd-maintenance-principles i { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: var(--secondary); background: var(--accent-soft); }
.sd-maintenance-principles strong { color: var(--off-white); }
.sd-maintenance-problems { background: var(--navy); }
.sd-maintenance-problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.sd-maintenance-problem { min-width: 0; display: flex; gap: .7rem; min-height: 145px; padding: 1rem; border: 1px solid rgba(255, 118, 62, .15); border-radius: 14px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease; }
.sd-maintenance-problem:hover { transform: translateY(-4px); border-color: rgba(255, 118, 62, .4); }
.sd-maintenance-problem-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; color: var(--secondary); background: var(--accent-soft); }
.sd-maintenance-problem h3 { margin: .1rem 0 .35rem; color: var(--off-white); font-size: 14px; line-height: 1.3; }
.sd-maintenance-problem p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.sd-maintenance-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.sd-maintenance-plan-card { position: relative; min-width: 0; min-height: 275px; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease; }
.sd-maintenance-plan-card.is-featured { border-color: rgba(255, 118, 62, .44); box-shadow: 0 16px 38px rgba(255, 62, 62, .12); }
.sd-maintenance-plan-card:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .5); }
.sd-maintenance-plan-number { display: block; margin-bottom: .7rem; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; }
.sd-maintenance-plan-card .sd-text-link { margin-top: 1rem; }
.sd-maintenance-platforms { background: var(--navy-dark); }
.sd-maintenance-platform-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sd-maintenance-platform-list > div { display: flex; align-items: center; gap: .7rem; min-height: 58px; padding: .75rem; border: 1px solid rgba(255, 118, 62, .18); border-radius: 12px; color: var(--off-white); background: rgba(14, 17, 31, .72); font-size: 13px; }
.sd-maintenance-platform-list > div:last-child { grid-column: span 2; }
.sd-maintenance-platform-list i { color: var(--secondary); font-size: 18px; }
.sd-maintenance-why { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy), var(--navy-dark)); }
.sd-maintenance-why::before { content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .1) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); -webkit-mask-image: radial-gradient(circle at 80% 50%, #000, transparent 65%); }
.sd-maintenance-trust-card { padding: 1.5rem; border: 1px solid rgba(255, 118, 62, .3); border-radius: 20px; background: radial-gradient(circle at 80% 20%, rgba(255, 118, 62, .16), transparent 38%), var(--navy-mid); box-shadow: 0 24px 52px rgba(0, 0, 0, .26); }
.sd-maintenance-trust-number { display: block; color: var(--secondary); font-family: var(--font-display); font-size: clamp(58px, 9vw, 100px); font-weight: 900; line-height: .85; letter-spacing: -5px; }
.sd-maintenance-trust-card strong { display: block; max-width: 300px; margin-top: 1rem; color: var(--off-white); font-size: 19px; line-height: 1.3; }
.sd-maintenance-trust-card p { margin: .8rem 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.sd-maintenance-trust-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.sd-maintenance-trust-tags span { padding: .42rem .55rem; border: 1px solid rgba(255, 118, 62, .22); border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-maintenance-faq { background: var(--navy); }
.sd-maintenance-accordion .accordion-item { margin-bottom: .7rem; overflow: hidden; border: 1px solid rgba(255, 118, 62, .16); border-radius: 12px; background: var(--navy-mid); }
.sd-maintenance-accordion .accordion-button { color: var(--off-white); background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; }
.sd-maintenance-accordion .accordion-button:not(.collapsed) { color: var(--secondary); background: rgba(255, 62, 62, .07); }
.sd-maintenance-accordion .accordion-button::after { filter: brightness(0) invert(1); }
.sd-maintenance-accordion .accordion-body { color: var(--muted); font-size: 14px; line-height: 1.65; }
.sd-maintenance-cta { padding-top: 2rem; background: var(--navy); }
.sd-maintenance-cta-panel { max-width: 920px; margin: 0 auto; padding: clamp(2.3rem, 5vw, 4.5rem) clamp(1.1rem, 5vw, 3.5rem); border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--navy-mid), var(--navy-mid)) padding-box, var(--gradient-primary) border-box; box-shadow: 0 25px 60px rgba(255, 62, 62, .14); }
.sd-maintenance-cta-panel > p:not(.sd-kicker) { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 1199.98px) { .sd-maintenance-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .sd-maintenance-intro-grid, .sd-maintenance-matters-grid, .sd-maintenance-platforms-grid, .sd-maintenance-why-grid, .sd-maintenance-faq-grid { gap: 2.5rem; } .sd-maintenance-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-maintenance-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .sd-maintenance-intro-grid, .sd-maintenance-matters-grid, .sd-maintenance-platforms-grid, .sd-maintenance-why-grid, .sd-maintenance-faq-grid { grid-template-columns: 1fr; } .sd-maintenance-section-head:not(.text-center) { display: block; } .sd-maintenance-section-head:not(.text-center) > .sd-lead { margin-top: .8rem; } .sd-maintenance-console { min-height: 345px; } .sd-maintenance-problem-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .sd-maintenance-intro .sd-btn, .sd-maintenance-platforms .sd-btn, .sd-maintenance-cta .sd-btn { width: 100%; justify-content: center; } .sd-maintenance-console { min-height: 285px; border-radius: 16px; } .sd-maintenance-console-body { min-height: 220px; padding: 2rem .75rem 1rem; } .sd-maintenance-status strong { font-size: 28px; } .sd-maintenance-checks { gap: .4rem; margin-top: 1.25rem; } .sd-maintenance-checks > div { grid-template-columns: 25px minmax(0, 1fr) 7px; gap: .35rem; padding: .5rem; } .sd-maintenance-checks small { font-size: 7px; } .sd-maintenance-checks strong { font-size: 10px; } .sd-maintenance-console-footer { gap: .35rem; margin-top: 1rem; font-size: 7px; } .sd-maintenance-service-grid, .sd-maintenance-plan-grid { grid-template-columns: 1fr; gap: .75rem; } .sd-maintenance-service-card, .sd-maintenance-plan-card { min-height: 0; } .sd-maintenance-risk-visual { min-height: 275px; border-radius: 16px; } .sd-maintenance-risk-core { top: 34%; left: 31%; width: 38%; min-height: 95px; } .sd-maintenance-risk-core strong { font-size: 17px; } .sd-maintenance-risk-node { padding: .4rem .45rem; font-size: 8px; } .sd-maintenance-risk-node--update { left: 5%; } .sd-maintenance-risk-node--security { right: 5%; } .sd-maintenance-risk-node--backup { right: 4%; } .sd-maintenance-risk-node--speed { left: 4%; } .sd-maintenance-platform-list { grid-template-columns: 1fr; } .sd-maintenance-platform-list > div:last-child { grid-column: auto; } .sd-maintenance-trust-tags { gap: .3rem; } .sd-maintenance-cta-panel { border-radius: 16px; padding: 2rem 1rem; } }
/* Website Maintenance responsive hardening */
.sd-maintenance-intro-grid > *, .sd-maintenance-matters-grid > *, .sd-maintenance-platforms-grid > *, .sd-maintenance-why-grid > *, .sd-maintenance-faq-grid > *, .sd-maintenance-service-card, .sd-maintenance-problem, .sd-maintenance-plan-card { min-width: 0; }
.sd-maintenance-console, .sd-maintenance-risk-visual, .sd-maintenance-trust-card { width: 100%; max-width: 100%; }
.sd-maintenance-console-top code, .sd-maintenance-status strong, .sd-maintenance-problem p { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .sd-maintenance-console-top { max-width: 100%; overflow: hidden; }
    .sd-maintenance-console-top code { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sd-maintenance-section-head { margin-bottom: 2rem; }
    .sd-maintenance-section-head .sd-h2 { font-size: clamp(26px, 8vw, 34px); }
}

/* Dedicated UI / UX Design page */
.sd-ux-page { overflow: hidden; }
.sd-ux-intro { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-ux-intro::before { content: ''; position: absolute; inset: 0; opacity: .17; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .12) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 78% 48%, #000, transparent 66%); -webkit-mask-image: radial-gradient(circle at 78% 48%, #000, transparent 66%); }
.sd-ux-intro-grid, .sd-ux-friction-grid, .sd-ux-audiences-grid, .sd-ux-faq-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.sd-ux-intro p:not(.sd-kicker):not(.sd-lead), .sd-ux-friction p:not(.sd-kicker):not(.sd-lead), .sd-ux-audiences p:not(.sd-kicker):not(.sd-lead) { max-width: 700px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.sd-ux-interface-board { position: relative; min-height: 405px; overflow: hidden; padding: 1rem; border: 1px solid rgba(255, 118, 62, .35); border-radius: 23px; background: radial-gradient(circle at 78% 16%, rgba(255, 118, 62, .18), transparent 32%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 25px 60px rgba(0, 0, 0, .3); transform: rotate(1deg); }
.sd-ux-board-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255, 118, 62, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .12) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to top, #000 15%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 85%); }
.sd-ux-board-toolbar { position: relative; z-index: 2; display: flex; align-items: center; gap: .3rem; color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.sd-ux-board-toolbar > span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sd-ux-board-toolbar > span:nth-child(2) { background: var(--secondary); }
.sd-ux-board-toolbar > span:nth-child(3) { background: rgba(255,255,255,.5); }
.sd-ux-board-toolbar code { min-width: 0; margin-left: .45rem; color: var(--muted); }
.sd-ux-board-toolbar b { margin-left: auto; padding: .3rem .45rem; border: 1px solid rgba(255,118,62,.26); border-radius: 999px; color: var(--secondary); font-size: 8px; font-weight: 500; }
.sd-ux-board-content { position: relative; z-index: 2; display: grid; grid-template-columns: 45px minmax(0,1fr); min-height: 300px; margin: 2.3rem .5rem 0; border: 1px solid rgba(255,118,62,.22); border-radius: 13px; background: rgba(4,5,10,.55); box-shadow: 0 18px 32px rgba(0,0,0,.22); }
.sd-ux-board-sidebar { display: grid; align-content: start; justify-items: center; gap: 1.15rem; padding: 1rem .55rem; border-right: 1px solid rgba(255,118,62,.16); }
.sd-ux-board-sidebar i { color: var(--secondary); font-size: 15px; }
.sd-ux-board-sidebar span { width: 16px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); }
.sd-ux-board-sidebar span:nth-of-type(2) { width: 11px; background: rgba(255,118,62,.55); }
.sd-ux-board-main { padding: 1.1rem; }
.sd-ux-board-breadcrumb { color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: .7px; }
.sd-ux-board-title, .sd-ux-board-copy { display: grid; gap: .35rem; margin-top: 1.1rem; }
.sd-ux-board-title span { display: block; width: 76%; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--secondary)); opacity: .88; }
.sd-ux-board-title span:nth-child(2) { width: 52%; height: 7px; opacity: .35; }
.sd-ux-board-title span:nth-child(3) { width: 36%; height: 7px; opacity: .2; }
.sd-ux-board-copy span { width: 88%; height: 5px; border-radius: 999px; background: rgba(255,255,255,.14); }
.sd-ux-board-copy span:nth-child(2) { width: 78%; }
.sd-ux-board-copy span:nth-child(3) { width: 91%; }
.sd-ux-board-copy span:nth-child(4) { width: 64%; }
.sd-ux-board-actions { display: flex; gap: .55rem; align-items: center; margin-top: 1.4rem; }
.sd-ux-board-actions b, .sd-ux-board-actions i { padding: .45rem .6rem; border-radius: 7px; font-size: 9px; font-style: normal; }
.sd-ux-board-actions b { color: var(--white); background: var(--gradient-primary); }
.sd-ux-board-actions i { border: 1px solid rgba(255,118,62,.2); color: var(--muted); }
.sd-ux-board-flow { display: flex; align-items: center; gap: .4rem; margin-top: 2rem; color: var(--off-white); font-family: var(--font-mono); font-size: 8px; }
.sd-ux-board-flow span { padding: .4rem .45rem; border: 1px solid rgba(255,118,62,.22); border-radius: 6px; background: rgba(255,62,62,.07); }
.sd-ux-board-flow i { width: 18px; height: 1px; background: var(--secondary); }
.sd-ux-board-note { position: absolute; z-index: 3; padding: .4rem .55rem; border: 1px solid rgba(255,118,62,.25); border-radius: 8px; color: var(--muted); background: rgba(14,17,31,.9); font-family: var(--font-mono); font-size: 8px; }
.sd-ux-board-note--one { top: 17%; right: 6%; }
.sd-ux-board-note--two { bottom: 13%; left: 6%; }
.sd-ux-board-note--three { right: 9%; bottom: 8%; color: var(--secondary); }
.sd-ux-services, .sd-ux-process, .sd-ux-faq { background: var(--navy); }
.sd-ux-section-head { margin-bottom: 3rem; }
.sd-ux-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem; }
.sd-ux-service-card { min-width: 0; min-height: 220px; display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid rgba(255,118,62,.16); border-radius: 16px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-ux-service-card:hover { transform: translateY(-5px); border-color: rgba(255,118,62,.45); box-shadow: 0 18px 40px rgba(255,62,62,.12); }
.sd-ux-service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 1rem; border: 1px solid rgba(255,118,62,.25); border-radius: 13px; color: var(--secondary); background: var(--accent-soft); }
.sd-ux-service-card h3 { margin: 0 0 .6rem; color: var(--off-white); font-size: 17px; }
.sd-ux-service-card p { flex: 1; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.sd-ux-friction { background: var(--navy-dark); }
.sd-ux-friction-visual { position: relative; min-height: 380px; overflow: hidden; border: 1px solid rgba(255,118,62,.3); border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgba(255,62,62,.14), transparent 34%), linear-gradient(145deg, var(--navy-mid), var(--navy)); box-shadow: 0 24px 54px rgba(0,0,0,.28); }
.sd-ux-friction-axis { position: absolute; background: rgba(255,118,62,.23); }
.sd-ux-friction-axis--x { top: 50%; right: 10%; left: 10%; height: 1px; }
.sd-ux-friction-axis--y { top: 10%; bottom: 10%; left: 50%; width: 1px; }
.sd-ux-friction-center { position: absolute; top: 34%; left: 34%; z-index: 2; display: grid; place-items: center; width: 32%; min-height: 125px; padding: .7rem; border: 1px solid rgba(255,118,62,.42); border-radius: 18px; color: var(--off-white); background: rgba(4,5,10,.72); box-shadow: 0 0 0 9px rgba(255,118,62,.05); text-align: center; transform: rotate(-3deg); }
.sd-ux-friction-center small { color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-ux-friction-center strong { margin-top: .35rem; font-family: var(--font-display); font-size: 20px; line-height: 1; }
.sd-ux-friction-center em { color: var(--secondary); font-style: normal; }
.sd-ux-friction-point { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border: 1px solid rgba(255,118,62,.25); border-radius: 9px; color: var(--off-white); background: rgba(14,17,31,.9); font-family: var(--font-mono); font-size: 9px; box-shadow: 0 12px 25px rgba(0,0,0,.25); }
.sd-ux-friction-point i { color: var(--secondary); }
.sd-ux-friction-point--a { top: 17%; left: 12%; }
.sd-ux-friction-point--b { top: 17%; right: 12%; }
.sd-ux-friction-point--c { right: 12%; bottom: 17%; }
.sd-ux-friction-point--d { bottom: 17%; left: 12%; }
.sd-ux-friction-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .6rem; margin-top: 1.3rem; }
.sd-ux-friction-list > div { display: flex; gap: .6rem; min-width: 0; padding: .65rem; border: 1px solid rgba(255,118,62,.15); border-radius: 11px; background: rgba(14,17,31,.72); }
.sd-ux-friction-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: var(--secondary); background: var(--accent-soft); }
.sd-ux-friction-list strong, .sd-ux-friction-list small { display: block; }
.sd-ux-friction-list strong { color: var(--off-white); font-size: 12px; line-height: 1.3; }
.sd-ux-friction-list small { margin-top: .25rem; color: var(--muted); font-size: 11px; line-height: 1.45; }
.sd-ux-principles { background: linear-gradient(180deg, var(--navy), var(--navy-dark)); }
.sd-ux-principles-head { max-width: 680px; margin-bottom: 2rem; }
.sd-ux-principles-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
.sd-ux-principles-grid article { position: relative; min-width: 0; min-height: 245px; padding: 1rem; border: 1px solid rgba(255,118,62,.17); border-radius: 14px; background: rgba(14,17,31,.72); transition: transform .3s ease, border-color .3s ease; }
.sd-ux-principles-grid article:hover { transform: translateY(-5px); border-color: rgba(255,118,62,.42); }
.sd-ux-principles-grid article > span { color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; }
.sd-ux-principles-grid article > i { display: block; margin: 1.8rem 0 1rem; color: var(--accent); font-size: 21px; }
.sd-ux-principles-grid h3 { margin: 0 0 .55rem; color: var(--off-white); font-size: 15px; line-height: 1.35; }
.sd-ux-principles-grid p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.sd-ux-process { overflow: hidden; }
.sd-ux-process-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; }
.sd-ux-process-line { position: absolute; top: 31px; right: 8%; left: 8%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, var(--accent), var(--secondary)); opacity: .55; }
.sd-ux-process-step { position: relative; z-index: 1; min-width: 0; padding: 0 .7rem; }
.sd-ux-process-number { display: block; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; }
.sd-ux-process-dot { display: block; width: 17px; height: 17px; margin: 13px 0 1rem; border: 4px solid var(--navy); border-radius: 50%; background: var(--secondary); box-shadow: 0 0 0 1px rgba(255,118,62,.48), 0 0 0 7px rgba(255,118,62,.08); }
.sd-ux-process-step h3 { margin: 0 0 .45rem; color: var(--off-white); font-size: 15px; }
.sd-ux-process-step p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.sd-ux-audiences { background: var(--navy-dark); }
.sd-ux-audience-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.sd-ux-audience-tags span { padding: .7rem .8rem; border: 1px solid rgba(255,118,62,.22); border-radius: 999px; color: var(--off-white); background: rgba(14,17,31,.72); font-size: 12px; transition: transform .25s ease, border-color .25s ease; }
.sd-ux-audience-tags span:hover { transform: translateY(-3px); border-color: rgba(255,118,62,.5); }
.sd-ux-accordion .accordion-item { margin-bottom: .7rem; overflow: hidden; border: 1px solid rgba(255,118,62,.16); border-radius: 12px; background: var(--navy-mid); }
.sd-ux-accordion .accordion-button { color: var(--off-white); background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; }
.sd-ux-accordion .accordion-button:not(.collapsed) { color: var(--secondary); background: rgba(255,62,62,.07); }
.sd-ux-accordion .accordion-button::after { filter: brightness(0) invert(1); }
.sd-ux-accordion .accordion-body { color: var(--muted); font-size: 14px; line-height: 1.65; }
.sd-ux-cta { padding-top: 2rem; background: var(--navy); }
.sd-ux-cta-panel { max-width: 920px; margin: 0 auto; padding: clamp(2.3rem,5vw,4.5rem) clamp(1.1rem,5vw,3.5rem); border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--navy-mid),var(--navy-mid)) padding-box, var(--gradient-primary) border-box; box-shadow: 0 25px 60px rgba(255,62,62,.14); }
.sd-ux-cta-panel > p:not(.sd-kicker) { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 1199.98px) { .sd-ux-principles-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 991.98px) { .sd-ux-intro-grid, .sd-ux-friction-grid, .sd-ux-audiences-grid, .sd-ux-faq-grid { gap: 2.5rem; } .sd-ux-service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .sd-ux-process-track { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 2.2rem; } .sd-ux-process-line { display: none; } }
@media (max-width: 767.98px) { .sd-ux-intro-grid, .sd-ux-friction-grid, .sd-ux-audiences-grid, .sd-ux-faq-grid { grid-template-columns: 1fr; } .sd-ux-process-track { grid-template-columns: repeat(2, minmax(0,1fr)); } .sd-ux-friction-list { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .sd-ux-intro .sd-btn, .sd-ux-audiences .sd-btn, .sd-ux-cta .sd-btn { width: 100%; justify-content: center; } .sd-ux-interface-board { min-height: 300px; border-radius: 16px; } .sd-ux-board-content { min-height: 220px; margin-top: 1.7rem; grid-template-columns: 30px minmax(0,1fr); } .sd-ux-board-main { padding: .7rem; } .sd-ux-board-toolbar code { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sd-ux-board-toolbar b { font-size: 7px; } .sd-ux-board-flow { gap: .2rem; font-size: 7px; } .sd-ux-board-flow span { padding: .3rem .25rem; } .sd-ux-board-flow i { width: 8px; } .sd-ux-board-note { padding: .3rem .4rem; font-size: 7px; } .sd-ux-board-note--one { top: 18%; right: 4%; } .sd-ux-board-note--two { bottom: 10%; left: 4%; } .sd-ux-board-note--three { right: 5%; bottom: 5%; } .sd-ux-friction-visual { min-height: 280px; border-radius: 16px; } .sd-ux-friction-center { top: 34%; left: 30%; width: 40%; min-height: 95px; } .sd-ux-friction-center strong { font-size: 16px; } .sd-ux-friction-point { padding: .38rem .4rem; font-size: 8px; } .sd-ux-friction-point--a { left: 4%; } .sd-ux-friction-point--b { right: 4%; } .sd-ux-friction-point--c { right: 4%; } .sd-ux-friction-point--d { left: 4%; } .sd-ux-principles-grid { grid-template-columns: 1fr; } .sd-ux-principles-grid article { min-height: 0; } .sd-ux-process-track { grid-template-columns: 1fr; row-gap: 1.2rem; } .sd-ux-process-step { padding: 0; } .sd-ux-process-step .sd-ux-process-dot { margin-top: .7rem; } .sd-ux-cta-panel { border-radius: 16px; padding: 2rem 1rem; } }
/* UI/UX responsive hardening */
.sd-ux-intro-grid > *, .sd-ux-friction-grid > *, .sd-ux-audiences-grid > *, .sd-ux-faq-grid > *, .sd-ux-service-card, .sd-ux-principles-grid article, .sd-ux-process-step { min-width: 0; }
.sd-ux-interface-board, .sd-ux-friction-visual, .sd-ux-cta-panel { width: 100%; max-width: 100%; }
.sd-ux-board-toolbar code, .sd-ux-board-breadcrumb, .sd-ux-friction-list small, .sd-ux-process-step p { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .sd-ux-section-head { margin-bottom: 2rem; } .sd-ux-section-head .sd-h2 { font-size: clamp(26px, 8vw, 34px); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sd-page-hero-grid,
    .sd-page-hero-orb,
    .sd-page-hero-scan,
    .sd-page-hero-particles,
    .sd-page-hero-beams,
    .sd-page-hero-data,
    .sd-about-goal-seal-ring,
    .sd-about-goal-name,
    .sd-logo-system-board,
    .sd-logo-system-mark,
    .sd-logo-system-type,
    .sd-logo-service-card,
    .sd-logo-application-card,
    .sd-logo-process-step,
    .sd-logo-checklist > div,
    .sd-logo-principles > div,
    .sd-digital-dashboard,
    .sd-digital-service-card,
    .sd-digital-problem,
    .sd-digital-process-step,
    .sd-digital-path,
    .sd-digital-trust-card,
    .sd-website-browser,
    .sd-website-service-card,
    .sd-website-problem,
    .sd-website-process-step,
    .sd-website-architecture-visual,
    .sd-website-brand-system,
    .sd-website-trust-list > div,
    .sd-maintenance-console,
    .sd-maintenance-service-card,
    .sd-maintenance-problem,
    .sd-maintenance-plan-card,
    .sd-maintenance-risk-visual,
    .sd-maintenance-trust-card,
    .sd-maintenance-platform-list > div,
    .sd-ux-interface-board,
    .sd-ux-friction-visual,
    .sd-ux-service-card,
    .sd-ux-principles-grid article,
    .sd-ux-process-step,
    .sd-ux-audience-tags span,
    .sd-ux-cta-panel,
    .sd-graphic-identity-board,
    .sd-graphic-brand-board,
    .sd-graphic-service-card,
    .sd-graphic-process-step,
    .sd-graphic-checklist > div { animation: none; transition: none; }
    [data-sd-anim] { opacity: 1; transform: none; }
    .sd-hero-media::after,
    .sd-scroll-cue-dot,
    .sd-partners[data-sd-partner-track],
    .sd-process-step,
    .sd-about-cta-panel,
    .sd-about-why-note,
    .sd-about-bg-code,
    .sd-about-bg-ui,
    .sd-about-bg-orb,
    .sd-services-wireframe,
    .sd-services-v2-visual-grid,
    .sd-services-v2-orbit,
    .sd-services-v2-screen,
    .sd-services-v2-float,
    .sd-services-v2-wireframe,
    .sd-services-v2-process-step,
    .sd-services-v2-decision-item,
    .sd-services-decision-item,
    .sd-contact-service-item,
    .sd-contact-problem,
    .sd-contact-process-step,
    .sd-contact-info-row,
    .sd-ux-process-line,
    .sd-ux-board-note,
    .sd-ux-friction-point { animation: none; transition: none; }
}

/* Portfolio listing and case-study detail refinement */
.sd-port-card { height: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: linear-gradient(145deg, rgba(15,18,32,.95), rgba(7,9,19,.95)); box-shadow: 0 14px 32px rgba(0,0,0,.14); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.sd-port-card:hover { transform: translateY(-6px); border-color: rgba(255,118,62,.44); box-shadow: 0 22px 44px rgba(0,0,0,.24); }
.sd-port-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #04050a; }
.sd-port-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.sd-port-card:hover .sd-port-card-media img { transform: scale(1.045); filter: saturate(1.08); }
.sd-port-card-arrow { position: absolute; right: 14px; bottom: 14px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(4,5,10,.72); backdrop-filter: blur(8px); font-size: 10px; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.sd-port-card:hover .sd-port-card-arrow, .sd-port-card:focus-within .sd-port-card-arrow { opacity: 1; transform: none; }
.sd-port-card-body { display: flex; min-height: 190px; flex-direction: column; padding: 18px; }
.sd-port-card-category { color: #ff9a70; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sd-port-card h3 { margin: 8px 0 0; font-size: 1.08rem; line-height: 1.25; }
.sd-port-card h3 a { color: #fff; text-decoration: none; }
.sd-port-card h3 a:hover { color: #ffb08d; }
.sd-port-card-body > p { margin: 10px 0 0; color: rgba(226,232,240,.68); font-size: .84rem; line-height: 1.65; }
.sd-port-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.sd-port-card-actions a { color: #ffb08d; font-size: .72rem; font-weight: 800; text-decoration: none; }
.sd-port-card-actions a:last-child { color: rgba(226,232,240,.62); }
.sd-port-card-actions a:hover { color: #fff; }
.sd-portfolio-article { position: relative; overflow: hidden; }
.sd-portfolio-detail-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 6vw, 92px); }
.sd-portfolio-detail-copy h1 { max-width: 680px; margin: 10px 0 0; color: #fff; font-size: clamp(2rem, 4.4vw, 4.5rem); line-height: 1.02; letter-spacing: -.055em; }
.sd-portfolio-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; color: rgba(226,232,240,.55); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sd-portfolio-rich-copy { color: rgba(226,232,240,.78); font-size: 1rem; line-height: 1.82; }
.sd-portfolio-rich-copy > *:first-child { margin-top: 0; }
.sd-portfolio-rich-copy > *:last-child { margin-bottom: 0; }
.sd-portfolio-rich-copy h1, .sd-portfolio-rich-copy h2, .sd-portfolio-rich-copy h3, .sd-portfolio-rich-copy h4, .sd-portfolio-rich-copy h5, .sd-portfolio-rich-copy h6 { margin: 1.8em 0 .6em; color: #fff; line-height: 1.2; }
.sd-portfolio-rich-copy h2 { font-size: 1.55rem; }
.sd-portfolio-rich-copy h3 { font-size: 1.25rem; }
.sd-portfolio-rich-copy h4, .sd-portfolio-rich-copy h5, .sd-portfolio-rich-copy h6 { font-size: 1.05rem; }
.sd-portfolio-rich-copy p { margin: 0 0 1.1em; }
.sd-portfolio-rich-copy a { color: #ff9a70; }
.sd-portfolio-rich-copy ul, .sd-portfolio-rich-copy ol { margin: 0 0 1.1em; padding-left: 1.25rem; }
.sd-portfolio-rich-copy blockquote { margin: 1.4em 0; padding: 1rem 1.15rem; border-left: 3px solid #ff763e; color: rgba(226,232,240,.86); background: rgba(255,118,62,.06); }
.sd-portfolio-rich-copy img { max-width: 100%; height: auto; border-radius: 12px; }
.sd-portfolio-rich-copy hr { margin: 1.8em 0; border-color: rgba(255,255,255,.16); }
.sd-portfolio-detail-media { position: relative; }
.sd-portfolio-detail-media > a { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255,118,62,.28); border-radius: 18px; background: #04050a; box-shadow: 0 22px 55px rgba(0,0,0,.28); }
.sd-portfolio-detail-media img { display: block; width: 100%; max-height: 720px; object-fit: contain; transition: transform .55s ease; }
.sd-portfolio-detail-media > a:hover img { transform: scale(1.018); }
.sd-portfolio-detail-zoom { position: absolute; right: 16px; bottom: 16px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(4,5,10,.7); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; }
.sd-portfolio-detail-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(48px, 8vw, 96px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.sd-text-link { color: #ffb08d; font-weight: 800; text-decoration: none; }
.sd-text-link:hover { color: #fff; }
@media (max-width: 900px) {
    .sd-portfolio-detail-grid { grid-template-columns: 1fr; gap: 42px; }
    .sd-portfolio-detail-copy { max-width: 720px; }
}
@media (max-width: 767px) {
    .sd-port-card-body { min-height: 176px; padding: 15px; }
    .sd-port-card h3 { font-size: 1rem; }
    .sd-port-card-body > p { font-size: .78rem; }
    .sd-port-card-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
    .sd-portfolio-detail-copy h1 { font-size: clamp(2rem, 12vw, 3.4rem); }
    .sd-portfolio-rich-copy { font-size: .95rem; }
    .sd-portfolio-detail-footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-port-card, .sd-port-card-media img, .sd-port-card-arrow, .sd-portfolio-detail-media img { transition: none; }
}


/* Our Work showcase — editorial portfolio listing */
.sd-portfolio-showcase { position: relative; overflow: hidden; }
.sd-portfolio-showcase::before { content: ''; position: absolute; top: 8%; right: -12%; width: 420px; height: 420px; border: 1px solid rgba(255, 118, 62, .12); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255, 118, 62, .025), 0 0 0 52px rgba(255, 118, 62, .02); pointer-events: none; }
.sd-portfolio-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; margin-bottom: 2.3rem; }
.sd-portfolio-intro-copy { max-width: 720px; }
.sd-portfolio-intro .sd-h2 { max-width: 700px; margin: .7rem 0 1rem; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.055em; }
.sd-portfolio-intro .sd-h2 span { color: var(--secondary); }
.sd-portfolio-intro .sd-lead { max-width: 600px; margin-bottom: 0; }
.sd-portfolio-stats { display: flex; align-items: stretch; border: 1px solid rgba(255, 118, 62, .23); border-radius: 16px; background: rgba(14, 17, 31, .55); }
.sd-portfolio-stat { display: flex; min-width: 132px; flex-direction: column; gap: .25rem; padding: 1rem 1.15rem; }
.sd-portfolio-stat + .sd-portfolio-stat { border-left: 1px solid rgba(255, 118, 62, .2); }
.sd-portfolio-stat strong { color: var(--secondary); font-family: var(--font-mono); font-size: 2rem; line-height: 1; }
.sd-portfolio-stat span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.sd-work-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin-bottom: clamp(3rem, 6vw, 5rem); padding: .8rem 0; border-top: 1px solid rgba(255, 118, 62, .18); border-bottom: 1px solid rgba(255, 118, 62, .18); }
.sd-work-nav-label { color: var(--secondary); font: 800 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sd-work-nav-links { display: flex; flex-wrap: wrap; gap: .45rem .7rem; }
.sd-work-nav-links a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border: 1px solid transparent; border-radius: 999px; color: rgba(248, 250, 252, .72); font-size: 12px; font-weight: 700; text-decoration: none; transition: color .25s ease, border-color .25s ease, background .25s ease; }
.sd-work-nav-links a:hover, .sd-work-nav-links a:focus-visible { border-color: rgba(255, 118, 62, .38); background: rgba(255, 118, 62, .08); color: var(--white); }
.sd-work-nav-links a span { color: var(--secondary); }
.sd-portfolio-category { position: relative; scroll-margin-top: calc(var(--nav-height) + 28px); }
.sd-portfolio-category + .sd-portfolio-category { margin-top: clamp(4rem, 9vw, 8rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(255, 118, 62, .16); }
.sd-port-info-heading { display: flex; flex-direction: column; gap: .45rem; }
.sd-port-info-count { color: var(--secondary); font: 800 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sd-port-info h3 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2.35rem); line-height: 1.05; letter-spacing: -.035em; }
.sd-port-info > p { max-width: 245px; color: rgba(226, 232, 240, .66); line-height: 1.7; }
.sd-port-scroll-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: .8rem; color: #ffb08d; font-size: 11px; font-weight: 800; text-decoration: none; }
.sd-port-scroll-link span { color: var(--secondary); transition: transform .25s ease; }
.sd-port-scroll-link:hover { color: var(--white); }
.sd-port-scroll-link:hover span { transform: translateY(3px); }
.sd-port-media { min-width: 0; }
.sd-port-card { border-color: rgba(255, 118, 62, .2); border-radius: 18px; background: linear-gradient(145deg, rgba(20, 18, 34, .98), rgba(7, 9, 19, .98)); }
.sd-port-card:hover { border-color: rgba(255, 118, 62, .62); box-shadow: 0 24px 55px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 62, 62, .1); }
.sd-port-card-media { aspect-ratio: 16 / 10; }
.sd-port-card-media::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(4, 5, 10, .68)); pointer-events: none; }
.sd-port-card-index { position: absolute; top: 13px; left: 13px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 118, 62, .48); border-radius: 50%; color: var(--secondary); background: rgba(4, 5, 10, .65); font: 800 10px var(--font-mono); }
.sd-port-card-arrow { z-index: 2; border-color: rgba(255, 118, 62, .45); color: var(--white); background: rgba(4, 5, 10, .78); }
.sd-port-card-body { min-height: 202px; padding: 20px; }
.sd-port-card-category { color: var(--secondary); }
.sd-port-card h3 { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.sd-port-card-body > p { max-width: 34ch; }
.sd-port-card-actions { padding-top: 20px; }
.sd-port-card-actions a:first-child { color: #ffb08d; }
@media (max-width: 991.98px) {
    .sd-portfolio-intro { grid-template-columns: 1fr; gap: 1.5rem; }
    .sd-portfolio-stats { width: fit-content; }
}
@media (max-width: 767.98px) {
    .sd-portfolio-intro .sd-h2 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
    .sd-work-nav { align-items: flex-start; flex-direction: column; }
    .sd-work-nav-links { width: 100%; }
    .sd-port-info { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; }
    .sd-port-info .sd-port-num { grid-row: span 2; }
    .sd-port-info > p, .sd-port-scroll-link { grid-column: 2; }
    .sd-port-info > p { margin-bottom: .25rem; }
    .sd-port-card-body { min-height: 188px; padding: 17px; }
}
@media (max-width: 420px) {
    .sd-portfolio-stats { width: 100%; }
    .sd-portfolio-stat { flex: 1; min-width: 0; }
    .sd-port-info { display: block; }
    .sd-port-info .sd-port-num { margin-bottom: .75rem; }
    .sd-port-info > p { margin-top: .8rem; }
}


/* Four-column Our Work grid — keep cards compact but readable on wide screens */
@media (min-width: 1200px) {
    .sd-portfolio-showcase .sd-port-media .row { --bs-gutter-x: 1.1rem; --bs-gutter-y: 1.1rem; }
    .sd-portfolio-showcase .sd-port-card-body { min-height: 214px; padding: 17px; }
    .sd-portfolio-showcase .sd-port-card h3 { font-size: 1.04rem; }
    .sd-portfolio-showcase .sd-port-card-body > p { font-size: .78rem; line-height: 1.55; }
    .sd-portfolio-showcase .sd-port-card-actions { flex-wrap: wrap; gap: 8px; }
    .sd-portfolio-showcase .sd-port-card-actions a { font-size: .68rem; }
}


/* Dedicated case-study pages — reusable project storytelling system */
.sd-case-study-page { position: relative; }
.sd-case-study-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 24%, rgba(255, 62, 62, .14), transparent 28%), linear-gradient(145deg, var(--navy-dark), var(--navy-mid)); }
.sd-case-study-hero::before { content: ''; position: absolute; inset: 0; opacity: .23; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .11) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 72% 45%, #000 8%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 72% 45%, #000 8%, transparent 70%); }
.sd-case-study-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.sd-case-study-copy { max-width: 650px; }
.sd-case-study-eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--secondary); font: 800 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sd-case-study-eyebrow i { font-size: 12px; }
.sd-case-study-copy h1 { max-width: 680px; margin: .9rem 0 1.1rem; color: var(--white); font-size: clamp(2.4rem, 5.4vw, 5.8rem); line-height: .96; letter-spacing: -.06em; }
.sd-case-study-lead { max-width: 590px; color: rgba(226, 232, 240, .75); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.75; }
.sd-case-study-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; margin-top: 2rem; border-top: 1px solid rgba(255, 118, 62, .25); border-bottom: 1px solid rgba(255, 118, 62, .25); }
.sd-case-study-fact { min-width: 0; padding: .85rem .8rem .85rem 0; }
.sd-case-study-fact + .sd-case-study-fact { padding-left: .8rem; border-left: 1px solid rgba(255, 118, 62, .19); }
.sd-case-study-fact span { display: block; margin-bottom: .35rem; color: var(--muted); font: 800 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sd-case-study-fact strong { display: block; overflow: hidden; color: rgba(248, 250, 252, .9); font-size: 12px; line-height: 1.45; text-overflow: ellipsis; }
.sd-case-study-hero-media { position: relative; min-width: 0; }
.sd-case-study-hero-media > a { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255, 118, 62, .42); border-radius: 20px; background: var(--navy-dark); box-shadow: 0 28px 70px rgba(0, 0, 0, .32); }
.sd-case-study-hero-media > a::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 62, 62, .08), transparent 40%, rgba(255, 118, 62, .08)); }
.sd-case-study-hero-media img { display: block; width: 100%; max-height: 660px; object-fit: contain; transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
.sd-case-study-hero-media > a:hover img { transform: scale(1.025); }
.sd-case-study-media-topline { position: absolute; z-index: 2; top: 16px; right: 16px; left: 16px; display: flex; justify-content: space-between; gap: 1rem; color: rgba(248, 250, 252, .76); font: 800 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sd-case-study-media-topline span:last-child { color: var(--secondary); }
.sd-case-study-breakdown { position: relative; }
.sd-case-study-section-heading { max-width: 760px; margin-bottom: clamp(2rem, 5vw, 4rem); }
.sd-case-study-section-heading .sd-h2 { margin: .65rem 0 .8rem; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.05em; }
.sd-case-study-section-heading .sd-lead { margin-bottom: 0; }
.sd-case-study-section-heading--split { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 2rem; }
.sd-case-study-section-heading--split > .sd-lead { max-width: 390px; }
.sd-case-study-breakdown-grid { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.sd-case-study-sidecard { position: sticky; top: calc(var(--nav-height) + 24px); padding: 1.45rem; border: 1px solid rgba(255, 118, 62, .3); border-radius: 18px; background: linear-gradient(145deg, rgba(20, 18, 34, .94), rgba(7, 9, 19, .94)); }
.sd-case-study-side-index { color: var(--secondary); font: 800 11px var(--font-mono); letter-spacing: .12em; }
.sd-case-study-sidecard h3 { margin: 1.8rem 0 .65rem; color: var(--white); font-size: 1.2rem; line-height: 1.2; }
.sd-case-study-sidecard > p { color: rgba(226, 232, 240, .68); font-size: 13px; line-height: 1.7; }
.sd-case-study-side-rule { height: 1px; margin: 1.35rem 0; background: linear-gradient(90deg, var(--accent), transparent); }
.sd-case-study-side-label { color: var(--muted); font: 800 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sd-case-study-list { display: grid; gap: .7rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.sd-case-study-list li { display: flex; align-items: start; gap: .55rem; color: rgba(248, 250, 252, .78); font-size: 12px; line-height: 1.5; }
.sd-case-study-list i { margin-top: .2rem; color: var(--secondary); font-size: 10px; }
.sd-case-study-rich-copy { max-width: 760px; }
.sd-case-study-rich-copy h2 { margin-top: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.sd-case-study-rich-copy h2:not(:first-child) { margin-top: 2.6em; }
.sd-case-study-gallery-section { position: relative; overflow: hidden; }
.sd-case-study-gallery-section::before { content: ''; position: absolute; inset: 0; opacity: .14; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .12) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at 80% 40%, #000 6%, transparent 68%); -webkit-mask-image: radial-gradient(ellipse at 80% 40%, #000 6%, transparent 68%); }
.sd-case-study-gallery { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sd-case-study-gallery.is-single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.sd-case-study-gallery-item { min-width: 0; margin: 0; }
.sd-case-study-gallery-item a { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255, 118, 62, .28); border-radius: 16px; background: var(--navy-dark); }
.sd-case-study-gallery-item img { display: block; width: 100%; max-height: 720px; object-fit: contain; transition: transform .55s ease, filter .55s ease; }
.sd-case-study-gallery-item a:hover img { transform: scale(1.025); filter: saturate(1.08); }
.sd-case-study-gallery-zoom { position: absolute; right: 14px; bottom: 14px; padding: .45rem .65rem; border: 1px solid rgba(255, 118, 62, .38); border-radius: 999px; color: var(--white); background: rgba(4, 5, 10, .72); font: 800 10px var(--font-mono); }
.sd-case-study-gallery-item figcaption { display: flex; align-items: center; gap: .55rem; padding: .65rem .2rem 0; color: var(--muted); font-size: 11px; }
.sd-case-study-gallery-item figcaption span { color: var(--secondary); font: 800 10px var(--font-mono); }
.sd-case-study-navigation { padding-top: 1rem; }
.sd-case-study-navigation-inner { padding-top: 1.6rem; border-top: 1px solid rgba(255, 118, 62, .2); }
.sd-case-study-nav-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.3rem; }
.sd-case-study-nav-card { display: flex; min-height: 108px; flex-direction: column; justify-content: space-between; padding: 1rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 14px; background: rgba(14, 17, 31, .5); text-decoration: none; transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.sd-case-study-nav-card:hover { border-color: rgba(255, 118, 62, .55); background: rgba(255, 118, 62, .06); transform: translateY(-3px); }
.sd-case-study-nav-card span { color: var(--secondary); font: 800 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sd-case-study-nav-card strong { color: var(--white); font-size: 13px; line-height: 1.35; }
.sd-case-study-nav-card--center { text-align: center; }
.sd-case-study-nav-card--center span, .sd-case-study-nav-card--center strong { align-self: center; }
.sd-case-study-nav-card--right { text-align: right; }
.sd-case-study-nav-card--right span, .sd-case-study-nav-card--right strong { align-self: end; }
@media (max-width: 900px) {
    .sd-case-study-hero-grid, .sd-case-study-breakdown-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .sd-case-study-copy { max-width: 760px; }
    .sd-case-study-sidecard { position: static; max-width: 560px; }
}
@media (max-width: 767.98px) {
    .sd-case-study-facts { grid-template-columns: 1fr; }
    .sd-case-study-fact, .sd-case-study-fact + .sd-case-study-fact { padding: .75rem 0; border-left: 0; }
    .sd-case-study-fact + .sd-case-study-fact { border-top: 1px solid rgba(255, 118, 62, .16); }
    .sd-case-study-section-heading--split { align-items: start; flex-direction: column; }
    .sd-case-study-gallery { grid-template-columns: 1fr; }
    .sd-case-study-nav-links { grid-template-columns: 1fr; }
    .sd-case-study-nav-card--center, .sd-case-study-nav-card--right { text-align: left; }
    .sd-case-study-nav-card--center span, .sd-case-study-nav-card--center strong, .sd-case-study-nav-card--right span, .sd-case-study-nav-card--right strong { align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-case-study-hero-media img, .sd-case-study-gallery-item img, .sd-case-study-nav-card { transition: none; }
}


/* Blog detail — focused article reading and SEO presentation */
.sd-page-hero--article { min-height: 390px; padding-block: clamp(4.8rem, 10vw, 8rem) clamp(3rem, 6vw, 4.5rem); }
.sd-page-hero--article .sd-page-hero-content { max-width: 1040px; }
.sd-page-hero--article .sd-page-hero-title { max-width: 940px; margin-inline: auto; color: var(--white); font-size: clamp(2.05rem, 5vw, 4.45rem); line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.sd-page-hero--article .sd-page-hero-subtitle { max-width: 700px; margin: 1.25rem auto 0; color: rgba(248, 250, 252, .78); font-size: clamp(.95rem, 1.7vw, 1.1rem); line-height: 1.7; }
.sd-page-hero--article .sd-breadcrumb a { color: var(--secondary); }
.sd-page-hero--article .sd-breadcrumb .active { color: rgba(248, 250, 252, .72); }
.sd-blog-article { background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.sd-blog-article > .container { max-width: 940px; }
.sd-blog-article-label { margin: 0 0 .65rem; color: var(--secondary); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
.sd-blog-article-heading { max-width: 780px; margin: 0; color: var(--off-white); font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.12; letter-spacing: -.035em; }
.sd-blog-article .sd-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .9rem; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.sd-blog-article .sd-blog-meta i { color: var(--secondary); }
.sd-blog-cover--featured { display: block; aspect-ratio: 16 / 9; object-fit: cover; margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; border: 1px solid rgba(255, 118, 62, .28); border-radius: 20px; background: var(--navy-mid); box-shadow: 0 22px 55px rgba(0, 0, 0, .3); }
.sd-blog-article-intro { max-width: 760px; margin-inline: auto; color: rgba(248, 250, 252, .82); font-size: clamp(1rem, 1.7vw, 1.12rem); line-height: 1.75; }
.sd-blog-content { max-width: 760px; margin: clamp(2rem, 5vw, 3.5rem) auto 0; color: var(--muted); font-size: clamp(.98rem, 1.4vw, 1.05rem); line-height: 1.82; }
.sd-blog-content > * + * { margin-top: 1.15rem; }
.sd-blog-content h2, .sd-blog-content h3, .sd-blog-content h4 { color: var(--off-white); font-family: var(--font-display); line-height: 1.22; letter-spacing: -.02em; }
.sd-blog-content h2 { margin-top: 2.8rem; padding-left: .9rem; border-left: 3px solid var(--accent); font-size: clamp(1.55rem, 2.8vw, 2.1rem); }
.sd-blog-content h3 { margin-top: 2.3rem; color: var(--secondary); font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.sd-blog-content h4 { margin-top: 1.8rem; color: var(--off-white); font-size: clamp(1.08rem, 1.8vw, 1.28rem); }
.sd-blog-content p { margin-bottom: 0; }
.sd-blog-content strong { color: var(--off-white); font-weight: 700; }
.sd-blog-content a { color: var(--secondary); font-weight: 700; text-decoration-color: rgba(255, 118, 62, .55); text-decoration-thickness: .1em; text-underline-offset: .18em; transition: color .2s ease, text-decoration-color .2s ease; }
.sd-blog-content a:hover, .sd-blog-content a:focus-visible { color: var(--white); text-decoration-color: var(--accent); }
.sd-blog-content ul, .sd-blog-content ol { padding-left: 1.35rem; }
.sd-blog-content li + li { margin-top: .45rem; }
.sd-blog-content li::marker { color: var(--secondary); }
.sd-blog-content blockquote { margin: 1.8rem 0; padding: 1rem 1.2rem; border-left: 3px solid var(--secondary); color: var(--off-white); background: rgba(255, 118, 62, .06); }
.sd-blog-content figure { margin: clamp(1.8rem, 4vw, 2.8rem) 0; }
.sd-blog-content figure img { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid rgba(255, 118, 62, .22); border-radius: 16px; background: var(--navy-mid); box-shadow: 0 18px 40px rgba(0, 0, 0, .24); }
.sd-blog-content figcaption { margin-top: .6rem; color: var(--muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.55; text-align: center; }
.sd-blog-article .border-top { border-color: rgba(255, 118, 62, .2) !important; }
@media (max-width: 575.98px) {
    .sd-page-hero--article { min-height: 350px; padding-block: 4.5rem 2.5rem; }
    .sd-page-hero--article .sd-page-hero-title { font-size: clamp(1.9rem, 9vw, 2.65rem); }
    .sd-blog-article > .container { padding-inline: 1rem; }
    .sd-blog-cover--featured { border-radius: 14px; }
    .sd-blog-content { font-size: .98rem; line-height: 1.75; }
    .sd-blog-content h2 { margin-top: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-blog-content a { transition: none; }
}


/* Blog engagement — reading, discovery, FAQ, author, and moderated comments */
.sd-page-hero--article .sd-page-hero-title { max-width: 900px; font-size: 3rem; }
.sd-blog-article-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.sd-blog-reading-time { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .42rem; margin-top: .35rem; padding: .48rem .65rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 999px; color: var(--secondary); background: rgba(255, 62, 62, .06); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.sd-blog-reading-time i { color: var(--accent); }
.sd-blog-meta { gap: .85rem !important; }
.sd-blog-meta > span { display: inline-flex; align-items: center; gap: .35rem; }
.sd-blog-author-box { display: flex; align-items: center; gap: 1rem; max-width: 760px; margin: 1.8rem auto 0; padding: 1rem 1.1rem; border: 1px solid rgba(255, 118, 62, .18); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 62, 62, .07), rgba(14, 17, 31, .8)); }
.sd-blog-author-avatar { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(255, 118, 62, .55); border-radius: 50%; color: var(--white); background: var(--gradient-primary); font-family: var(--font-mono); font-size: 11px; font-weight: 800; box-shadow: 0 8px 22px rgba(255, 62, 62, .18); }
.sd-blog-author-box > div:last-child { display: grid; gap: .18rem; }
.sd-blog-author-kicker, .sd-blog-section-kicker, .sd-blog-toc-kicker { color: var(--secondary); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.sd-blog-author-box strong { color: var(--off-white); font-size: 14px; }
.sd-blog-author-box p { margin: .2rem 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.sd-blog-reading-layout { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 760px); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; max-width: 1030px; margin: 2.5rem auto 0; }
.sd-blog-reading-layout--single { display: block; max-width: 760px; }
.sd-blog-toc { position: sticky; top: 100px; }
.sd-blog-toc-inner { padding: 1rem; border: 1px solid rgba(255, 118, 62, .18); border-radius: 14px; background: rgba(14, 17, 31, .78); }
.sd-blog-toc-inner strong { display: block; margin-top: .35rem; color: var(--off-white); font-size: 13px; }
.sd-blog-toc nav { margin-top: .8rem; }
.sd-blog-toc ol { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.sd-blog-toc li { padding-left: .55rem; border-left: 1px solid rgba(255, 118, 62, .18); }
.sd-blog-toc li.sd-blog-toc-level-3 { padding-left: 1rem; }
.sd-blog-toc a { color: var(--muted); font-size: 11px; line-height: 1.45; text-decoration: none; }
.sd-blog-toc a:hover, .sd-blog-toc a:focus-visible { color: var(--secondary); }
.sd-blog-reading-layout .sd-blog-content { max-width: none; margin: 0; }
.sd-blog-faq, .sd-blog-related, .sd-blog-comments { max-width: 1030px; margin: clamp(3.5rem, 7vw, 5.5rem) auto 0; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(255, 118, 62, .17); }
.sd-blog-location-links { max-width: 760px; margin: 2.2rem auto 0; padding: 1.1rem 1.2rem; border: 1px solid rgba(255, 118, 62, .2); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 62, 62, .07), rgba(14, 17, 31, .72)); }
.sd-blog-location-links h2 { margin: .45rem 0 .55rem; color: var(--off-white); font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.65rem); letter-spacing: -.03em; }
.sd-blog-location-links p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.sd-blog-location-links a { color: var(--secondary); font-weight: 700; text-decoration-color: rgba(255, 118, 62, .42); text-underline-offset: 3px; }
.sd-blog-location-links a:hover, .sd-blog-location-links a:focus-visible { color: var(--accent); }

.sd-blog-faq h2, .sd-blog-related h2, .sd-blog-comments h2 { margin: .45rem 0 0; color: var(--off-white); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.035em; }
.sd-blog-faq-grid { display: grid; gap: .65rem; margin-top: 1.5rem; }
.sd-blog-faq-item { padding: .95rem 1rem; border: 1px solid rgba(255, 118, 62, .16); border-radius: 12px; background: rgba(14, 17, 31, .7); }
.sd-blog-faq-item[open] { border-color: rgba(255, 118, 62, .38); background: rgba(255, 62, 62, .055); }
.sd-blog-faq-item summary { cursor: pointer; color: var(--off-white); font-size: 14px; font-weight: 700; }
.sd-blog-faq-item summary::marker { color: var(--secondary); }
.sd-blog-faq-item p { max-width: 800px; margin: .8rem 0 .1rem; color: var(--muted); font-size: 13px; line-height: 1.7; }
.sd-blog-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.sd-blog-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.sd-blog-related-card { overflow: hidden; border: 1px solid rgba(255, 118, 62, .16); border-radius: 16px; background: linear-gradient(155deg, var(--navy-mid), var(--navy-dark)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.sd-blog-related-card:hover { transform: translateY(-5px); border-color: rgba(255, 118, 62, .42); box-shadow: 0 18px 38px rgba(0, 0, 0, .22); }
.sd-blog-related-image { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy-mid); }
.sd-blog-related-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sd-blog-related-card:hover .sd-blog-related-image img { transform: scale(1.04); }
.sd-blog-related-body { display: flex; min-height: 225px; flex-direction: column; padding: 1rem; }
.sd-blog-related-body > span { color: var(--secondary); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.sd-blog-related-body h3 { margin: .55rem 0 .45rem; font-size: 17px; line-height: 1.3; }
.sd-blog-related-body h3 a { color: var(--off-white); text-decoration: none; }
.sd-blog-related-body h3 a:hover { color: var(--secondary); }
.sd-blog-related-body p { flex: 1; margin: 0 0 .8rem; color: var(--muted); font-size: 12px; line-height: 1.6; }
.sd-blog-related-body .sd-text-link { min-height: 36px; }
.sd-blog-comments > .sd-blog-section-head p { max-width: 560px; margin: .75rem 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.sd-blog-comments-list { display: grid; gap: .75rem; max-width: 760px; margin-top: 1.5rem; }
.sd-blog-comment { padding: 1rem 1.1rem; border-left: 2px solid var(--secondary); border-radius: 0 12px 12px 0; background: rgba(14, 17, 31, .68); }
.sd-blog-comment-head { display: flex; justify-content: space-between; gap: 1rem; color: var(--off-white); font-size: 13px; }
.sd-blog-comment-head time { color: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.sd-blog-comment p { margin: .55rem 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.sd-blog-comment-form { max-width: 760px; margin-top: 1.4rem; padding: 1.2rem; border: 1px solid rgba(255, 118, 62, .18); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 62, 62, .045), rgba(14, 17, 31, .8)); }
.sd-blog-comment-form label { display: block; margin-bottom: .4rem; color: var(--off-white); font-size: 12px; font-weight: 700; }
.sd-blog-comment-form label span { color: var(--muted); font-weight: 400; }
.sd-blog-comment-form .form-control { min-height: 42px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; color: var(--off-white); background: rgba(4, 5, 10, .7); }
.sd-blog-comment-form .form-control:focus { border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(255, 118, 62, .12); }
.sd-blog-comment-form .sd-form-msg { color: var(--muted); font-size: 12px; }
.sd-blog-comment-form .sd-form-msg.is-success { color: var(--secondary); }
.sd-blog-comment-form .sd-form-msg.is-error { color: #ff9a8d; }
.sd-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
@media (max-width: 991.98px) {
    .sd-blog-reading-layout { grid-template-columns: 1fr; }
    .sd-blog-toc { position: relative; top: auto; }
    .sd-blog-toc-inner { max-width: 760px; }
    .sd-blog-toc nav { max-height: 190px; overflow-y: auto; }
    .sd-blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .sd-page-hero--article .sd-page-hero-title { font-size: 2.35rem; }
    .sd-blog-article-heading-row, .sd-blog-section-head { display: block; }
    .sd-blog-reading-time { margin-top: .8rem; }
    .sd-blog-related-grid { grid-template-columns: 1fr; }
    .sd-blog-related-body { min-height: 0; }
}
@media (max-width: 575.98px) {
    .sd-page-hero--article .sd-page-hero-title { font-size: 2rem; }
    .sd-blog-author-box { align-items: flex-start; }
    .sd-blog-author-avatar { flex-basis: 44px; width: 44px; height: 44px; }
    .sd-blog-meta { align-items: flex-start !important; flex-direction: column; gap: .4rem !important; }
    .sd-blog-comment-head { align-items: flex-start; flex-direction: column; gap: .25rem; }
}


/* Blog editorial layout — main reading column with discovery sidebar */
.sd-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); gap: clamp(2rem, 4vw, 4.5rem); align-items: start; max-width: 1240px; margin-inline: auto; }
.sd-blog-main { min-width: 0; }
.sd-blog-sidebar { position: sticky; top: 96px; display: grid; gap: 1rem; min-width: 0; }
.sd-blog-side-card { position: relative; overflow: hidden; padding: 1.15rem; border: 1px solid rgba(255, 118, 62, .17); border-radius: 17px; background: linear-gradient(145deg, rgba(14, 17, 31, .96), rgba(7, 9, 19, .92)); box-shadow: 0 16px 34px rgba(0, 0, 0, .14); }
.sd-blog-side-card::before { position: absolute; top: 0; left: 0; width: 34%; height: 2px; background: var(--gradient-primary); content: ''; }
.sd-blog-side-card h2 { position: relative; z-index: 1; margin: .45rem 0 .9rem; color: var(--off-white); font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; letter-spacing: -.025em; }
.sd-blog-side-kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .42rem; color: var(--secondary); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.25px; line-height: 1.4; text-transform: uppercase; }
.sd-blog-side-kicker i { color: var(--accent); }
.sd-blog-side-card--toc { border-color: rgba(255, 62, 62, .28); background: linear-gradient(155deg, rgba(255, 62, 62, .08), rgba(14, 17, 31, .94) 48%); }
.sd-blog-side-card--toc nav { max-height: 310px; overflow-y: auto; padding-right: .3rem; }
.sd-blog-side-card--toc ol { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.sd-blog-side-card--toc li { padding-left: .65rem; border-left: 1px solid rgba(255, 118, 62, .22); }
.sd-blog-side-card--toc li.sd-blog-toc-level-3 { padding-left: 1.2rem; }
.sd-blog-side-card--toc a { color: var(--muted); font-size: 11px; line-height: 1.5; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.sd-blog-side-card--toc a:hover, .sd-blog-side-card--toc a:focus-visible { color: var(--secondary); }
.sd-blog-side-card--facts { display: grid; gap: .65rem; }
.sd-blog-side-card--facts .sd-blog-side-kicker { margin-bottom: .2rem; }
.sd-blog-side-fact { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-top: .65rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.sd-blog-side-fact span { color: var(--muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.sd-blog-side-fact strong { color: var(--off-white); font-size: 12px; text-align: right; }
.sd-blog-side-links { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.sd-blog-side-links li { min-width: 0; }
.sd-blog-side-links a { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .58rem .1rem; border-bottom: 1px solid rgba(255, 255, 255, .07); color: var(--muted); font-size: 12px; line-height: 1.35; text-decoration: none; transition: color .2s ease, padding .2s ease, border-color .2s ease; }
.sd-blog-side-links li:last-child a { border-bottom: 0; }
.sd-blog-side-links a:hover, .sd-blog-side-links a:focus-visible { padding-left: .35rem; border-color: rgba(255, 118, 62, .32); color: var(--off-white); }
.sd-blog-side-links a > span { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.sd-blog-side-links a > span i { width: 15px; color: var(--secondary); font-size: 11px; text-align: center; }
.sd-blog-side-links a > i { color: var(--accent); font-size: 10px; }
.sd-blog-side-links--categories a b { display: grid; min-width: 22px; height: 22px; place-items: center; border: 1px solid rgba(255, 118, 62, .25); border-radius: 999px; color: var(--secondary); background: rgba(255, 62, 62, .06); font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.sd-blog-side-card--subscribe { border-color: rgba(255, 62, 62, .32); background: linear-gradient(145deg, rgba(255, 62, 62, .14), rgba(255, 118, 62, .06) 55%, rgba(14, 17, 31, .96)); }
.sd-blog-side-card--subscribe h2 { max-width: 210px; font-size: 1.45rem; }
.sd-blog-side-card--subscribe p { position: relative; z-index: 1; margin: 0 0 1rem; color: rgba(248, 250, 252, .72); font-size: 12px; line-height: 1.65; }
.sd-blog-side-card--subscribe form { position: relative; z-index: 1; display: grid; gap: .65rem; }
.sd-blog-side-input { display: flex; align-items: center; gap: .5rem; min-height: 43px; padding: 0 .75rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(4, 5, 10, .66); }
.sd-blog-side-input i { color: var(--secondary); font-size: 12px; }
.sd-blog-side-input input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--off-white); background: transparent; font-size: 12px; }
.sd-blog-side-input input::placeholder { color: rgba(148, 163, 184, .72); }
.sd-blog-side-card--subscribe .sd-btn { justify-content: center; width: 100%; min-height: 42px; }
.sd-blog-side-card--subscribe .sd-form-msg { color: var(--off-white); font-size: 11px; line-height: 1.45; }
.sd-blog-side-card--subscribe small { position: relative; z-index: 1; display: block; margin-top: .85rem; color: rgba(248, 250, 252, .55); font-size: 10px; line-height: 1.45; }
.sd-blog-side-card--subscribe small i { margin-right: .25rem; color: var(--secondary); }
.sd-blog-side-orb { position: absolute; width: 115px; height: 115px; border: 1px solid rgba(255, 118, 62, .16); border-radius: 50%; pointer-events: none; }
.sd-blog-side-orb--one { top: -62px; right: -36px; box-shadow: 0 0 0 18px rgba(255, 62, 62, .025), 0 0 0 36px rgba(255, 62, 62, .018); }
.sd-blog-side-orb--two { right: 32px; bottom: -93px; width: 135px; height: 135px; border-color: rgba(255, 62, 62, .11); }
.sd-blog-side-card--cta { background: linear-gradient(155deg, rgba(255, 118, 62, .09), rgba(14, 17, 31, .95)); }
.sd-blog-side-card--cta p { margin: 0 0 .75rem; color: var(--muted); font-size: 12px; line-height: 1.65; }
.sd-blog-main > .sd-blog-faq, .sd-blog-main > .sd-blog-related, .sd-blog-main > .sd-blog-comments { max-width: none; }
.sd-blog-main > .sd-blog-related .sd-blog-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-blog-main > .sd-blog-content { max-width: 820px; }
@media (max-width: 1199.98px) {
    .sd-blog-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); gap: 2rem; }
    .sd-blog-side-card { padding: 1rem; }
}
@media (max-width: 991.98px) {
    .sd-blog-layout { display: flex; flex-direction: column; gap: 0; }
    .sd-blog-main { order: 1; width: 100%; }
    .sd-blog-sidebar { position: static; order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 3rem; }
    .sd-blog-side-card--toc, .sd-blog-side-card--subscribe, .sd-blog-side-card--cta { grid-column: 1 / -1; }
    .sd-blog-side-card--toc nav { max-height: 220px; }
}
@media (max-width: 767.98px) {
    .sd-blog-sidebar { grid-template-columns: 1fr; }
    .sd-blog-side-card--toc, .sd-blog-side-card--subscribe, .sd-blog-side-card--cta { grid-column: auto; }
    .sd-blog-main > .sd-blog-related .sd-blog-related-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-blog-side-links a, .sd-blog-side-card--toc a { transition: none; }
}


/* Wide editorial article canvas — prevent the sidebar layout from being trapped in the old 940px container */
.sd-blog-article > .container { max-width: 1380px; }
.sd-blog-layout { max-width: 1320px; }
.sd-blog-article-heading { max-width: 920px; }
.sd-blog-main > .sd-blog-article-intro { max-width: 920px; margin-inline: 0; }
.sd-blog-main > .sd-blog-author-box { max-width: 920px; margin-inline: 0; }
.sd-blog-main > .sd-blog-content { max-width: 920px; }
@media (max-width: 991.98px) {
    .sd-blog-article > .container { max-width: 100%; }
    .sd-blog-main > .sd-blog-article-intro, .sd-blog-main > .sd-blog-author-box, .sd-blog-main > .sd-blog-content { max-width: 100%; }
}


/* Blog typography normalization — one readable paragraph measure across every article */
.sd-blog-content,
.sd-blog-content p,
.sd-blog-content li,
.sd-blog-article-intro,
.sd-blog-faq-item p { font-size: 1rem; line-height: 1.8; }
.sd-blog-content p { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .sd-blog-content,
    .sd-blog-content p,
    .sd-blog-content li,
    .sd-blog-article-intro,
    .sd-blog-faq-item p { font-size: 1rem; line-height: 1.78; }
}

/* Premium case-study polish — existing stack only */
.sd-case-study-hero { min-height: 760px; padding-block: clamp(2.4rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem); background: radial-gradient(circle at 18% 78%, rgba(255,118,62,.08), transparent 28rem), radial-gradient(circle at 86% 22%, rgba(255,62,62,.2), transparent 32rem), linear-gradient(145deg, var(--navy-dark), var(--navy-mid)); }
.sd-case-study-hero::after { content: ''; position: absolute; right: 8%; bottom: 8%; width: min(28vw, 380px); height: min(28vw, 380px); border: 1px solid rgba(255,118,62,.16); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,118,62,.025), 0 0 0 56px rgba(255,62,62,.02); pointer-events: none; }
.sd-case-study-hero-orbit { position: absolute; z-index: 0; border: 1px solid rgba(255,118,62,.22); border-radius: 50%; pointer-events: none; transform: rotate(-18deg); }
.sd-case-study-hero-orbit--one { top: 14%; right: 1%; width: 280px; height: 92px; }
.sd-case-study-hero-orbit--two { top: 18%; right: 4%; width: 250px; height: 82px; border-color: rgba(255,62,62,.2); transform: rotate(18deg); }
.sd-case-study-hero-rail { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2.7rem, 7vw, 6rem); padding-bottom: .85rem; border-bottom: 1px solid rgba(255,118,62,.2); color: rgba(248,250,252,.58); font: 800 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sd-case-study-hero-rail a { display: inline-flex; align-items: center; gap: .45rem; color: var(--secondary); text-decoration: none; transition: color .25s ease, transform .25s ease; }
.sd-case-study-hero-rail a:hover { color: var(--white); transform: translateX(-3px); }
.sd-case-study-hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 6vw, 6.5rem); }
.sd-case-study-copy { position: relative; z-index: 2; }
.sd-case-study-title-line { display: inline; background: linear-gradient(100deg, #fff 14%, #ffb08d 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-case-study-context { max-width: 490px; margin: 0 0 1rem; color: rgba(255,176,141,.86); font: 700 .78rem/1.65 var(--font-mono); letter-spacing: .05em; }
.sd-case-study-lead { max-width: 540px; }
.sd-case-study-facts { max-width: 680px; border-color: rgba(255,118,62,.32); background: linear-gradient(90deg, rgba(255,62,62,.055), transparent); }
.sd-case-study-fact { min-height: 74px; }
.sd-case-study-hero-media { isolation: isolate; padding: 1.2rem 0 0 1.2rem; }
.sd-case-study-hero-media::before { content: ''; position: absolute; z-index: -1; inset: 0 0 1.2rem 0; border: 1px solid rgba(255,118,62,.2); border-radius: 24px; transform: translate(-.6rem, .6rem); }
.sd-case-study-hero-media::after { content: ''; position: absolute; z-index: -2; right: -2rem; bottom: -2rem; width: 58%; height: 58%; border-radius: 50%; background: rgba(255,62,62,.18); filter: blur(55px); pointer-events: none; }
.sd-case-study-hero-media > a { border-radius: 24px; box-shadow: 0 30px 90px rgba(0,0,0,.46), 0 0 0 1px rgba(255,118,62,.08); }
.sd-case-study-hero-media > a::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(4,5,10,.2), transparent 22%, transparent 72%, rgba(4,5,10,.52)); pointer-events: none; }
.sd-case-study-media-index { position: absolute; z-index: 3; top: -.05rem; left: -.15rem; color: rgba(255,176,141,.76); font: 800 clamp(3rem, 7vw, 6rem)/1 var(--font-mono); letter-spacing: -.1em; pointer-events: none; }
.sd-case-study-media-caption { position: absolute; z-index: 3; right: 1.1rem; bottom: 1rem; left: 1.1rem; display: flex; align-items: center; justify-content: space-between; color: rgba(248,250,252,.82); font: 800 .68rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sd-case-study-media-caption i { color: var(--secondary); font-size: .8rem; }
.sd-case-study-breakdown { background: linear-gradient(180deg, var(--navy), var(--navy-dark)); }
.sd-case-study-sidecard { box-shadow: 0 22px 70px rgba(0,0,0,.22); }
.sd-case-study-rich-copy { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid rgba(255,118,62,.12); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(4,5,10,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.sd-case-study-gallery-section { padding-top: clamp(4.5rem, 9vw, 8rem); padding-bottom: clamp(4.5rem, 9vw, 8rem); background: radial-gradient(circle at 18% 20%, rgba(255,118,62,.07), transparent 24rem), linear-gradient(145deg, var(--navy-dark), var(--navy-mid)); }
.sd-case-study-gallery { gap: clamp(1rem, 2vw, 1.5rem); }
.sd-case-study-gallery:not(.is-single) .sd-case-study-gallery-item.is-primary { grid-column: span 2; }
.sd-case-study-gallery-item a { border-radius: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.sd-case-study-gallery-item.is-primary a { border-color: rgba(255,118,62,.45); }
.sd-case-study-gallery-item figcaption { min-height: 30px; }
.sd-case-study-navigation { background: var(--navy-dark); }
.sd-case-study-nav-card { min-height: 132px; padding: 1.2rem; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(14,17,31,.72)); box-shadow: 0 16px 44px rgba(0,0,0,.18); }
.sd-case-study-nav-card--center { border-color: rgba(255,62,62,.4); background: linear-gradient(145deg, rgba(255,62,62,.13), rgba(255,118,62,.04)); }
@media (max-width: 900px) { .sd-case-study-hero { min-height: auto; } .sd-case-study-hero::after { right: -8%; bottom: 7%; } .sd-case-study-hero-media { max-width: 760px; padding-left: .8rem; } .sd-case-study-media-index { left: -.1rem; } }
@media (max-width: 767.98px) { .sd-case-study-hero { padding-top: 1.5rem; } .sd-case-study-hero-rail { align-items: flex-start; flex-direction: column; margin-bottom: 2.6rem; } .sd-case-study-hero-grid { gap: 2.2rem; } .sd-case-study-copy h1 { font-size: clamp(2.65rem, 13vw, 4rem); } .sd-case-study-context { font-size: .7rem; } .sd-case-study-hero-media { padding: .8rem 0 0 .45rem; } .sd-case-study-hero-media::before { inset: 0 0 .8rem 0; transform: translate(-.3rem, .3rem); } .sd-case-study-media-caption { right: .8rem; bottom: .75rem; left: .8rem; font-size: .57rem; } .sd-case-study-gallery:not(.is-single) .sd-case-study-gallery-item.is-primary { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .sd-case-study-hero-rail a, .sd-case-study-title-line { transition: none; } }

/* Case-study breakdown and gallery refinement */
.sd-case-study-breakdown { padding-block: clamp(4rem, 7vw, 6.5rem); }
.sd-case-study-breakdown .sd-case-study-section-heading { max-width: 660px; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.sd-case-study-breakdown-grid { grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr); gap: clamp(1.2rem, 3vw, 3rem); }
.sd-case-study-sidecard--compact { position: relative; top: auto; padding: 1.25rem; border-radius: 16px; }
.sd-case-study-sidecard-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sd-case-study-side-status { color: rgba(255,176,141,.74); font: 800 .58rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sd-case-study-sidecard--compact h3 { margin-top: 1.3rem; font-size: 1.08rem; }
.sd-case-study-sidecard--compact > p { max-width: 300px; font-size: .78rem; line-height: 1.6; }
.sd-case-study-sidecard--compact .sd-case-study-side-rule { margin: 1rem 0; }
.sd-case-study-sidecard--compact .sd-case-study-list { gap: .55rem; margin-top: .7rem; }
.sd-case-study-sidecard--compact .sd-case-study-list li { font-size: .7rem; }
.sd-case-study-rich-copy--minimal { align-self: start; min-height: 0; padding: clamp(1.1rem, 2.5vw, 1.65rem); border-radius: 16px; background: rgba(255,255,255,.025); }
.sd-case-study-copy-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,118,62,.18); color: var(--muted); font: 800 .62rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sd-case-study-copy-meta span:last-child { color: var(--secondary); text-align: right; }
.sd-case-study-copy-body { max-width: 680px; padding-top: 1rem; }
.sd-case-study-copy-body > :first-child { margin-top: 0; }
.sd-case-study-copy-body > :last-child { margin-bottom: 0; }
.sd-case-study-copy-body p { margin-bottom: .9rem; color: rgba(226,232,240,.76); font-size: .9rem; line-height: 1.75; }
.sd-case-study-copy-body h2, .sd-case-study-copy-body h3 { margin: 1.2rem 0 .55rem; color: var(--white); font-size: clamp(1.1rem, 2vw, 1.45rem); }
.sd-case-study-gallery.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.sd-case-study-gallery.is-four .sd-case-study-gallery-item.is-primary { grid-column: auto; }
.sd-case-study-gallery.is-four .sd-case-study-gallery-item a { height: clamp(180px, 19vw, 285px); border-radius: 14px; }
.sd-case-study-gallery.is-four .sd-case-study-gallery-item img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.sd-case-study-gallery.is-four .sd-case-study-gallery-zoom { right: .55rem; bottom: .55rem; padding: .35rem .45rem; font-size: .52rem; }
.sd-case-study-gallery.is-four .sd-case-study-gallery-item figcaption { padding-top: .5rem; font-size: .63rem; }
.sd-case-study-gallery.is-four .sd-case-study-gallery-item figcaption span { font-size: .58rem; }
@media (max-width: 991.98px) { .sd-case-study-gallery.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-case-study-gallery.is-four .sd-case-study-gallery-item a { height: clamp(200px, 30vw, 280px); } }
@media (max-width: 900px) { .sd-case-study-breakdown-grid { gap: 1.2rem; } .sd-case-study-sidecard--compact { max-width: none; } }
@media (max-width: 575.98px) { .sd-case-study-gallery.is-four { grid-template-columns: 1fr; } .sd-case-study-gallery.is-four .sd-case-study-gallery-item a { height: min(78vw, 330px); } .sd-case-study-copy-meta { align-items: flex-start; flex-direction: column; gap: .35rem; } .sd-case-study-copy-meta span:last-child { text-align: left; } }
.sd-case-study-gallery.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.sd-case-study-gallery.is-row .sd-case-study-gallery-item.is-primary { grid-column: auto; }
.sd-case-study-gallery.is-row .sd-case-study-gallery-item a { height: clamp(190px, 21vw, 300px); border-radius: 14px; }
.sd-case-study-gallery.is-row .sd-case-study-gallery-item img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.sd-case-study-gallery.is-row .sd-case-study-gallery-zoom { right: .55rem; bottom: .55rem; padding: .35rem .45rem; font-size: .52rem; }
@media (max-width: 991.98px) { .sd-case-study-gallery.is-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sd-case-study-gallery.is-row .sd-case-study-gallery-item a { height: clamp(200px, 30vw, 280px); } }
@media (max-width: 575.98px) { .sd-case-study-gallery.is-row { grid-template-columns: 1fr; } .sd-case-study-gallery.is-row .sd-case-study-gallery-item a { height: min(78vw, 330px); } }

/* Standardized portfolio gallery sizing */
.sd-case-study-gallery.is-single { width: min(100%, 560px); max-width: 560px; margin-inline: auto; }
.sd-case-study-gallery.is-single .sd-case-study-gallery-item a { height: clamp(220px, 30vw, 360px); border-radius: 16px; }
.sd-case-study-gallery.is-single .sd-case-study-gallery-item img { width: 100%; height: 100%; max-height: none; object-fit: contain; padding: .55rem; }
.sd-case-study-gallery.is-single .sd-case-study-gallery-zoom { right: .75rem; bottom: .75rem; padding: .38rem .5rem; font-size: .55rem; }
.sd-case-study-gallery.is-row:not(.is-four) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-case-study-gallery.is-row:not(.is-four) .sd-case-study-gallery-item a { height: clamp(190px, 21vw, 300px); }
@media (max-width: 991.98px) { .sd-case-study-gallery.is-row:not(.is-four) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sd-case-study-gallery.is-single { width: min(100%, 420px); } .sd-case-study-gallery.is-single .sd-case-study-gallery-item a { height: min(72vw, 300px); } .sd-case-study-gallery.is-row:not(.is-four) { grid-template-columns: 1fr; } }

/* Project notes content cues */
.sd-case-study-note-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.sd-case-study-note-tags span { padding: .3rem .48rem; border: 1px solid rgba(255,118,62,.26); border-radius: 999px; color: rgba(255,176,141,.9); background: rgba(255,62,62,.06); font: 800 .58rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.sd-case-study-sidecard--compact .sd-case-study-note-tags + .sd-case-study-side-rule { margin-top: 1rem; }

/* Compact Project notes editorial card */
.sd-case-study-rich-copy--minimal { position: relative; overflow: hidden; padding: clamp(1.1rem, 2.2vw, 1.55rem); border-color: rgba(255,118,62,.22); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(7,9,19,.58)); }
.sd-case-study-rich-copy--minimal::after { content: ''; position: absolute; top: -4rem; right: -3rem; width: 11rem; height: 11rem; border: 1px solid rgba(255,118,62,.14); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,62,62,.025), 0 0 0 36px rgba(255,118,62,.02); pointer-events: none; }
.sd-case-study-rich-copy--minimal .sd-case-study-copy-meta { position: relative; z-index: 1; }
.sd-case-study-rich-copy--minimal .sd-case-study-copy-body { position: relative; z-index: 1; counter-reset: project-note; padding-top: .45rem; }
.sd-case-study-rich-copy--minimal .sd-case-study-copy-body h2,
.sd-case-study-rich-copy--minimal .sd-case-study-copy-body h2:not(:first-child) { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: baseline; gap: .7rem; margin: 0; padding: .9rem 0 .35rem; border-top: 1px solid rgba(255,118,62,.15); color: var(--white); font-size: clamp(1.02rem, 1.7vw, 1.28rem); line-height: 1.25; letter-spacing: -.02em; }
.sd-case-study-rich-copy--minimal .sd-case-study-copy-body h2:first-child { padding-top: .35rem; border-top: 0; }
.sd-case-study-rich-copy--minimal .sd-case-study-copy-body h2::before { counter-increment: project-note; content: counter(project-note, decimal-leading-zero); color: var(--secondary); font: 800 .64rem var(--font-mono); letter-spacing: .08em; }
.sd-case-study-rich-copy--minimal .sd-case-study-copy-body p { max-width: 720px; margin: 0; padding: 0 0 1rem 3.05rem; color: rgba(226,232,240,.73); font-size: .86rem; line-height: 1.7; }
.sd-case-study-rich-copy--minimal .sd-case-study-copy-body p:last-child { padding-bottom: .25rem; }
@media (max-width: 575.98px) { .sd-case-study-rich-copy--minimal .sd-case-study-copy-body h2, .sd-case-study-rich-copy--minimal .sd-case-study-copy-body h2:not(:first-child) { grid-template-columns: 1.85rem minmax(0, 1fr); gap: .5rem; font-size: 1rem; } .sd-case-study-rich-copy--minimal .sd-case-study-copy-body p { padding-left: 2.35rem; font-size: .82rem; } }


/* --------------------------------------------------------------------------
   Landing page What We Do — Swap Design notch Beam Variants
   -------------------------------------------------------------------------- */
.sd-services .sd-tilt-inner {
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
    clip-path: polygon(0 0, calc(50% - 46px) 0, calc(50% - 34px) 13px, calc(50% + 34px) 13px, calc(50% + 46px) 0, 100% 0, 100% 100%, calc(50% + 46px) 100%, calc(50% + 34px) calc(100% - 13px), calc(50% - 34px) calc(100% - 13px), calc(50% - 46px) 100%, 0 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35), 0 0 12px rgba(255, 62, 62, .1);
}
.sd-services .sd-tilt-inner::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 69%, rgba(255, 118, 62, .35) 74%, #ffad8d 79%, #fff 82%, #ff763e 86%, transparent 92%);
    clip-path: polygon(0 0, calc(50% - 46px) 0, calc(50% - 34px) 13px, calc(50% + 34px) 13px, calc(50% + 46px) 0, 100% 0, 100% 100%, calc(50% + 46px) 100%, calc(50% + 34px) calc(100% - 13px), calc(50% - 34px) calc(100% - 13px), calc(50% - 46px) 100%, 0 100%);
    filter: drop-shadow(0 0 5px rgba(255, 62, 62, .9)) drop-shadow(0 0 15px rgba(255, 118, 62, .34));
    animation: sdLandingServiceBeam 4.4s linear infinite;
}
.sd-services .sd-tilt-inner::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 2px;
    pointer-events: none;
    background: linear-gradient(145deg, #190a12 0%, #090a14 54%, #120b12 100%);
    clip-path: polygon(0 0, calc(50% - 44px) 0, calc(50% - 32px) 11px, calc(50% + 32px) 11px, calc(50% + 44px) 0, 100% 0, 100% 100%, calc(50% + 44px) 100%, calc(50% + 32px) calc(100% - 11px), calc(50% - 32px) calc(100% - 11px), calc(50% - 44px) 100%, 0 100%);
}
.sd-services .sd-tilt-bg,
.sd-services .sd-tilt-glare,
.sd-services .sd-service-beam-edge,
.sd-services .sd-tilt-body { position: relative; z-index: 2; }
.sd-services .sd-tilt-bg { position: absolute; color: rgba(255, 62, 62, .055); }
.sd-services .sd-tilt-glare { position: absolute; }
.sd-services .sd-tilt-body { position: relative; }
.sd-services .sd-tilt:hover .sd-tilt-inner,
.sd-services .sd-tilt:focus-visible .sd-tilt-inner {
    border-color: transparent;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 62, 62, .2), 0 0 45px rgba(255, 118, 62, .12);
}
.sd-services .sd-tilt:nth-child(2) .sd-tilt-inner::before { background: conic-gradient(from 90deg, transparent 0 64%, rgba(255, 118, 62, .35) 71%, #fff 77%, #ff3e3e 84%, transparent 91%); animation-duration: 5.1s; }
.sd-services .sd-tilt:nth-child(3) .sd-tilt-inner::before { background: conic-gradient(from 180deg, transparent 0 70%, rgba(255, 118, 62, .35) 76%, #ffad8d 81%, #fff 85%, transparent 92%); animation-duration: 5.8s; }
.sd-services .sd-tilt:nth-child(4) .sd-tilt-inner::before { background: conic-gradient(from 270deg, transparent 0 62%, rgba(255, 118, 62, .35) 69%, #fff 77%, #ff763e 85%, transparent 92%); animation-duration: 4.9s; }
.sd-services .sd-tilt:nth-child(5) .sd-tilt-inner::before { animation-duration: 6.2s; }
.sd-services .sd-tilt:nth-child(6) .sd-tilt-inner::before { animation-duration: 5.4s; }
.sd-services .sd-service-beam-edge {
    display: block;
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, #ff763e 35%, #fff 50%, #ffad8d 65%, transparent 100%);
    box-shadow: 0 0 8px #ff3e3e, 0 0 18px rgba(255, 118, 62, .9);
}
.sd-services .sd-service-beam-edge--top,
.sd-services .sd-service-beam-edge--bottom { width: 34%; height: 2px; }
.sd-services .sd-service-beam-edge--top { top: 0; left: -36%; animation: sdLandingBeamTop 4.4s linear infinite; }
.sd-services .sd-service-beam-edge--bottom { right: -36%; bottom: 0; animation: sdLandingBeamBottom 4.4s linear infinite; }
.sd-services .sd-service-beam-edge--right,
.sd-services .sd-service-beam-edge--left { width: 2px; height: 34%; background: linear-gradient(180deg, transparent 0%, #ff763e 35%, #fff 50%, #ffad8d 65%, transparent 100%); }
.sd-services .sd-service-beam-edge--right { top: -36%; right: 0; animation: sdLandingBeamRight 4.4s linear infinite; }
.sd-services .sd-service-beam-edge--left { bottom: -36%; left: 0; animation: sdLandingBeamLeft 4.4s linear infinite; }
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    .sd-services .sd-service-beam-edge { display: none; }
}
@keyframes sdLandingServiceBeam { to { transform: rotate(360deg); } }
@keyframes sdLandingBeamTop { to { left: 102%; } }
@keyframes sdLandingBeamRight { to { top: 102%; } }
@keyframes sdLandingBeamBottom { to { right: 102%; } }
@keyframes sdLandingBeamLeft { to { bottom: 102%; } }
@media (max-width: 767.98px) {
    .sd-services .sd-tilt-inner {
        clip-path: polygon(0 0, calc(50% - 34px) 0, calc(50% - 25px) 10px, calc(50% + 25px) 10px, calc(50% + 34px) 0, 100% 0, 100% 100%, calc(50% + 34px) 100%, calc(50% + 25px) calc(100% - 10px), calc(50% - 25px) calc(100% - 10px), calc(50% - 34px) 100%, 0 100%);
    }
    .sd-services .sd-tilt-inner::before {
        clip-path: polygon(0 0, calc(50% - 34px) 0, calc(50% - 25px) 10px, calc(50% + 25px) 10px, calc(50% + 34px) 0, 100% 0, 100% 100%, calc(50% + 34px) 100%, calc(50% + 25px) calc(100% - 10px), calc(50% - 25px) calc(100% - 10px), calc(50% - 34px) 100%, 0 100%);
    }
    .sd-services .sd-tilt-inner::after {
        clip-path: polygon(0 0, calc(50% - 32px) 0, calc(50% - 23px) 8px, calc(50% + 23px) 8px, calc(50% + 32px) 0, 100% 0, 100% 100%, calc(50% + 32px) 100%, calc(50% + 23px) calc(100% - 8px), calc(50% - 23px) calc(100% - 8px), calc(50% - 32px) 100%, 0 100%);
    }
}
@media (max-width: 575.98px) {
    .sd-services .sd-tilt-inner { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-services .sd-tilt-inner::before,
    .sd-services .sd-service-beam-edge { animation: none; }
}


/* Compact proportions for the landing page What We Do cards */
.sd-services .sd-tilt {
    height: 304px;
    margin-bottom: 1rem;
}
.sd-services .sd-tilt-body {
    padding: 1.55rem 1.45rem;
}
.sd-services .sd-tilt-icon {
    width: 56px;
    height: 56px;
    font-size: 23px;
    border-radius: 15px;
    margin-bottom: .85rem;
    box-shadow: 0 10px 24px rgba(255, 62, 62, .34);
}
.sd-services .sd-tilt-body h5 {
    font-size: 18px;
    margin-bottom: .45rem;
}
.sd-services .sd-tilt-body p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: .8rem;
}
.sd-services .sd-tilt-body a {
    font-size: 14px;
}
@media (max-width: 991.98px) {
    .sd-services .sd-tilt { height: 292px; }
}
@media (max-width: 575.98px) {
    .sd-services .sd-tilt {
        height: 276px;
        margin-bottom: .75rem;
    }
    .sd-services .sd-tilt-body {
        padding: 1.35rem 1.2rem;
    }
    .sd-services .sd-tilt-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: .7rem;
    }
    .sd-services .sd-tilt-body h5 {
        font-size: 17px;
    }
    .sd-services .sd-tilt-body p {
        font-size: 13.5px;
        line-height: 1.48;
    }
}


/* Premium finish for the compact What We Do notch cards */
.sd-services .sd-tilt-inner {
    border: 1px solid rgba(255, 118, 62, .42);
    background: linear-gradient(145deg, rgba(255, 62, 62, .28), rgba(255, 118, 62, .12) 46%, rgba(255, 62, 62, .24));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 0 18px rgba(255, 62, 62, .1);
}
.sd-services .sd-tilt-inner::before {
    background: conic-gradient(from 0deg, transparent 0 66%, rgba(255, 62, 62, .32) 70%, rgba(255, 118, 62, .8) 75%, #fff 80%, #ffad8d 84%, rgba(255, 62, 62, .32) 89%, transparent 94%);
    filter: drop-shadow(0 0 6px rgba(255, 62, 62, .95)) drop-shadow(0 0 18px rgba(255, 118, 62, .42));
}
.sd-services .sd-tilt-inner::after {
    background: linear-gradient(145deg, rgba(25, 10, 18, .98) 0%, rgba(9, 10, 20, .985) 56%, rgba(18, 11, 18, .98) 100%);
}
.sd-services .sd-tilt:focus-visible {
    outline: 2px solid rgba(255, 173, 141, .9);
    outline-offset: 6px;
}
.sd-services .sd-tilt-icon {
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease;
}
.sd-services .sd-tilt-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(255, 173, 141, .3);
    border-radius: 18px;
    opacity: .65;
    transform: rotate(7deg);
    pointer-events: none;
}
.sd-services .sd-tilt:hover .sd-tilt-icon,
.sd-services .sd-tilt:focus-visible .sd-tilt-icon {
    transform: translateZ(14px) rotate(-3deg);
    box-shadow: 0 13px 28px rgba(255, 62, 62, .48), 0 0 0 4px rgba(255, 118, 62, .08);
}
.sd-services .sd-tilt-body h5 {
    position: relative;
    padding-bottom: .62rem;
}
.sd-services .sd-tilt-body h5::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    margin-top: .48rem;
    background: var(--gradient-primary);
    box-shadow: 0 0 9px rgba(255, 62, 62, .75);
    transition: width .35s ease;
}
.sd-services .sd-tilt:hover .sd-tilt-body h5::after,
.sd-services .sd-tilt:focus-visible .sd-tilt-body h5::after { width: 58px; }
.sd-services .sd-tilt-body a {
    text-underline-offset: 4px;
}
.sd-services .sd-tilt-body a::after {
    content: '';
    width: 4px;
    height: 4px;
    margin-left: .15rem;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 8px rgba(255, 118, 62, .9);
}
@media (prefers-reduced-motion: reduce) {
    .sd-services .sd-tilt-icon,
    .sd-services .sd-tilt-body h5::after { transition: none; }
}


/* Industries I Work With — matching compact notch Beam Variant cards */
.sd-industries .sd-industry-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: linear-gradient(145deg, rgba(255, 62, 62, .24), rgba(255, 118, 62, .1) 48%, rgba(255, 62, 62, .2));
    clip-path: polygon(0 0, calc(50% - 28px) 0, calc(50% - 20px) 9px, calc(50% + 20px) 9px, calc(50% + 28px) 0, 100% 0, 100% 100%, calc(50% + 28px) 100%, calc(50% + 20px) calc(100% - 9px), calc(50% - 20px) calc(100% - 9px), calc(50% - 28px) 100%, 0 100%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .26), 0 0 14px rgba(255, 62, 62, .08);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.sd-industries .sd-industry-card::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 35deg, transparent 0 66%, rgba(255, 62, 62, .35) 71%, rgba(255, 118, 62, .85) 77%, #fff 82%, #ffad8d 86%, transparent 93%);
    clip-path: inherit;
    filter: drop-shadow(0 0 5px rgba(255, 62, 62, .9)) drop-shadow(0 0 12px rgba(255, 118, 62, .36));
    animation: sdIndustryBeam 4.8s linear infinite;
}
.sd-industries .sd-industry-card::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 2px;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(25, 10, 18, .98), rgba(9, 10, 20, .99) 58%, rgba(18, 11, 18, .98));
    clip-path: polygon(0 0, calc(50% - 26px) 0, calc(50% - 18px) 7px, calc(50% + 18px) 7px, calc(50% + 26px) 0, 100% 0, 100% 100%, calc(50% + 26px) 100%, calc(50% + 18px) calc(100% - 7px), calc(50% - 18px) calc(100% - 7px), calc(50% - 26px) 100%, 0 100%);
}
.sd-industries .sd-industry-card > div,
.sd-industries .sd-industry-icon { position: relative; z-index: 2; }
.sd-industries .sd-industry-icon {
    transition: transform .35s ease, box-shadow .35s ease;
}
.sd-industries .sd-industry-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(255, 173, 141, .3);
    border-radius: 14px;
    transform: rotate(7deg);
    pointer-events: none;
}
.sd-industries .sd-industry-card h3 {
    position: relative;
    padding-bottom: .48rem;
}
.sd-industries .sd-industry-card h3::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    margin-top: .34rem;
    background: var(--gradient-primary);
    box-shadow: 0 0 8px rgba(255, 62, 62, .7);
    transition: width .35s ease;
}
.sd-industries .sd-industry-card:hover,
.sd-industries .sd-industry-card:focus-within {
    border-color: transparent;
    background: linear-gradient(145deg, rgba(255, 62, 62, .28), rgba(255, 118, 62, .13) 48%, rgba(255, 62, 62, .24));
    box-shadow: 0 22px 42px rgba(0, 0, 0, .36), 0 0 22px rgba(255, 62, 62, .16), 0 0 35px rgba(255, 118, 62, .08);
    filter: saturate(1.08);
}
.sd-industries .sd-industry-card:hover .sd-industry-icon,
.sd-industries .sd-industry-card:focus-within .sd-industry-icon {
    transform: translateZ(10px) rotate(-3deg);
    box-shadow: 0 10px 22px rgba(255, 62, 62, .38), 0 0 0 4px rgba(255, 118, 62, .07);
}
.sd-industries .sd-industry-card:hover h3::after,
.sd-industries .sd-industry-card:focus-within h3::after { width: 42px; }
.sd-industries .sd-industry-beam-edge {
    display: block;
    position: absolute;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #ff763e 36%, #fff 50%, #ffad8d 64%, transparent);
    box-shadow: 0 0 7px #ff3e3e, 0 0 15px rgba(255, 118, 62, .85);
}
.sd-industries .sd-industry-beam-edge--top,
.sd-industries .sd-industry-beam-edge--bottom { width: 32%; height: 2px; }
.sd-industries .sd-industry-beam-edge--top { top: 0; left: -34%; animation: sdIndustryBeamTop 4.8s linear infinite; }
.sd-industries .sd-industry-beam-edge--bottom { right: -34%; bottom: 0; animation: sdIndustryBeamBottom 4.8s linear infinite; }
.sd-industries .sd-industry-beam-edge--right,
.sd-industries .sd-industry-beam-edge--left { width: 2px; height: 32%; background: linear-gradient(180deg, transparent, #ff763e 36%, #fff 50%, #ffad8d 64%, transparent); }
.sd-industries .sd-industry-beam-edge--right { top: -34%; right: 0; animation: sdIndustryBeamRight 4.8s linear infinite; }
.sd-industries .sd-industry-beam-edge--left { bottom: -34%; left: 0; animation: sdIndustryBeamLeft 4.8s linear infinite; }
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
    .sd-industries .sd-industry-beam-edge { display: none; }
}
@keyframes sdIndustryBeam { to { transform: rotate(360deg); } }
@keyframes sdIndustryBeamTop { to { left: 102%; } }
@keyframes sdIndustryBeamRight { to { top: 102%; } }
@keyframes sdIndustryBeamBottom { to { right: 102%; } }
@keyframes sdIndustryBeamLeft { to { bottom: 102%; } }
@media (max-width: 575.98px) {
    .sd-industries .sd-industry-card {
        clip-path: polygon(0 0, calc(50% - 24px) 0, calc(50% - 17px) 8px, calc(50% + 17px) 8px, calc(50% + 24px) 0, 100% 0, 100% 100%, calc(50% + 24px) 100%, calc(50% + 17px) calc(100% - 8px), calc(50% - 17px) calc(100% - 8px), calc(50% - 24px) 100%, 0 100%);
    }
    .sd-industries .sd-industry-card::after {
        clip-path: polygon(0 0, calc(50% - 22px) 0, calc(50% - 15px) 6px, calc(50% + 15px) 6px, calc(50% + 22px) 0, 100% 0, 100% 100%, calc(50% + 22px) 100%, calc(50% + 15px) calc(100% - 6px), calc(50% - 15px) calc(100% - 6px), calc(50% - 22px) 100%, 0 100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sd-industries .sd-industry-card::before,
    .sd-industries .sd-industry-beam-edge,
    .sd-industries .sd-industry-icon,
    .sd-industries .sd-industry-card h3::after { animation: none; transition: none; }
}


/* Shared public box system — polished Swap Design notch cards */
.sd-why-item,
.sd-value-card,
.sd-service-card,
.sd-feature,
.sd-office,
.sd-blog-card,
.sd-partner-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: linear-gradient(145deg, rgba(255, 62, 62, .2), rgba(255, 118, 62, .08) 48%, rgba(255, 62, 62, .16));
    clip-path: polygon(0 0, calc(50% - 34px) 0, calc(50% - 24px) 10px, calc(50% + 24px) 10px, calc(50% + 34px) 0, 100% 0, 100% 100%, calc(50% + 34px) 100%, calc(50% + 24px) calc(100% - 10px), calc(50% - 24px) calc(100% - 10px), calc(50% - 34px) 100%, 0 100%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28), 0 0 15px rgba(255, 62, 62, .08);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.sd-why-item::before,
.sd-value-card::before,
.sd-service-card::before,
.sd-feature::before,
.sd-office::before,
.sd-blog-card::before,
.sd-partner-card::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 35deg, transparent 0 66%, rgba(255, 62, 62, .28) 71%, rgba(255, 118, 62, .8) 77%, #fff 82%, #ffad8d 86%, transparent 93%);
    clip-path: inherit;
    filter: drop-shadow(0 0 5px rgba(255, 62, 62, .9)) drop-shadow(0 0 12px rgba(255, 118, 62, .32));
    animation: sdSharedNotchBeam 5.2s linear infinite;
}
.sd-why-item::after,
.sd-value-card::after,
.sd-service-card::after,
.sd-feature::after,
.sd-office::after,
.sd-blog-card::after,
.sd-partner-card::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 2px;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(25, 10, 18, .97), rgba(9, 10, 20, .99) 58%, rgba(18, 11, 18, .98));
    clip-path: polygon(0 0, calc(50% - 32px) 0, calc(50% - 22px) 8px, calc(50% + 22px) 8px, calc(50% + 32px) 0, 100% 0, 100% 100%, calc(50% + 32px) 100%, calc(50% + 22px) calc(100% - 8px), calc(50% - 22px) calc(100% - 8px), calc(50% - 32px) 100%, 0 100%);
}
.sd-why-item > *,
.sd-value-card > *,
.sd-service-card > *,
.sd-feature > *,
.sd-office > *,
.sd-blog-card > *,
.sd-partner-card > * { position: relative; z-index: 2; }
.sd-why-item:hover,
.sd-why-item:focus-within,
.sd-value-card:hover,
.sd-service-card:hover,
.sd-feature:hover,
.sd-office:hover,
.sd-blog-card:hover,
.sd-partner-card:hover,
.sd-partner-card:focus-within {
    border-color: transparent;
    background: linear-gradient(145deg, rgba(255, 62, 62, .26), rgba(255, 118, 62, .12) 48%, rgba(255, 62, 62, .22));
    box-shadow: 0 22px 44px rgba(0, 0, 0, .38), 0 0 22px rgba(255, 62, 62, .15), 0 0 34px rgba(255, 118, 62, .08);
    filter: saturate(1.06);
}
.sd-why-item:focus-within,
.sd-service-card:focus-within,
.sd-feature:focus-within,
.sd-office:focus-within,
.sd-blog-card:focus-within { outline: 2px solid rgba(255, 173, 141, .82); outline-offset: 5px; }
@keyframes sdSharedNotchBeam { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) {
    .sd-why-item,
    .sd-value-card,
    .sd-service-card,
    .sd-feature,
    .sd-office,
    .sd-blog-card,
    .sd-partner-card {
        clip-path: polygon(0 0, calc(50% - 26px) 0, calc(50% - 18px) 8px, calc(50% + 18px) 8px, calc(50% + 26px) 0, 100% 0, 100% 100%, calc(50% + 26px) 100%, calc(50% + 18px) calc(100% - 8px), calc(50% - 18px) calc(100% - 8px), calc(50% - 26px) 100%, 0 100%);
    }
    .sd-why-item::after,
    .sd-value-card::after,
    .sd-service-card::after,
    .sd-feature::after,
    .sd-office::after,
    .sd-blog-card::after,
    .sd-partner-card::after { clip-path: polygon(0 0, calc(50% - 24px) 0, calc(50% - 16px) 6px, calc(50% + 16px) 6px, calc(50% + 24px) 0, 100% 0, 100% 100%, calc(50% + 24px) 100%, calc(50% + 16px) calc(100% - 6px), calc(50% - 16px) calc(100% - 6px), calc(50% - 24px) 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .sd-why-item::before,
    .sd-value-card::before,
    .sd-service-card::before,
    .sd-feature::before,
    .sd-office::before,
    .sd-blog-card::before,
    .sd-partner-card::before { animation: none; }
}


/* Additional public box families: FAQ panels, portfolio tiles, and stat boxes */
.sd-faq-accordion .accordion-item,
.sd-success-stat,
.sd-tilt--port .sd-tilt-inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: linear-gradient(145deg, rgba(255, 62, 62, .18), rgba(255, 118, 62, .07) 48%, rgba(255, 62, 62, .14));
    clip-path: polygon(0 0, calc(50% - 30px) 0, calc(50% - 21px) 9px, calc(50% + 21px) 9px, calc(50% + 30px) 0, 100% 0, 100% 100%, calc(50% + 30px) 100%, calc(50% + 21px) calc(100% - 9px), calc(50% - 21px) calc(100% - 9px), calc(50% - 30px) 100%, 0 100%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .25), 0 0 14px rgba(255, 62, 62, .07);
}
.sd-faq-accordion .accordion-item::before,
.sd-success-stat::before,
.sd-tilt--port .sd-tilt-inner::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 40deg, transparent 0 66%, rgba(255, 62, 62, .28) 71%, rgba(255, 118, 62, .78) 77%, #fff 82%, #ffad8d 86%, transparent 93%);
    clip-path: inherit;
    filter: drop-shadow(0 0 5px rgba(255, 62, 62, .88)) drop-shadow(0 0 12px rgba(255, 118, 62, .3));
    animation: sdSharedNotchBeam 5.4s linear infinite;
}
.sd-faq-accordion .accordion-item::after,
.sd-success-stat::after,
.sd-tilt--port .sd-tilt-inner::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 2px;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(25, 10, 18, .97), rgba(9, 10, 20, .99) 58%, rgba(18, 11, 18, .98));
    clip-path: polygon(0 0, calc(50% - 28px) 0, calc(50% - 19px) 7px, calc(50% + 19px) 7px, calc(50% + 28px) 0, 100% 0, 100% 100%, calc(50% + 28px) 100%, calc(50% + 19px) calc(100% - 7px), calc(50% - 19px) calc(100% - 7px), calc(50% - 28px) 100%, 0 100%);
}
.sd-faq-accordion .accordion-item > *,
.sd-success-stat > *,
.sd-tilt--port .sd-tilt-inner > * { position: relative; z-index: 2; }
.sd-faq-accordion .accordion-item:hover,
.sd-faq-accordion .accordion-item:focus-within,
.sd-success-stat:hover,
.sd-tilt--port .sd-tilt-inner:hover {
    border-color: transparent;
    box-shadow: 0 20px 42px rgba(0, 0, 0, .34), 0 0 20px rgba(255, 62, 62, .14);
}
@media (max-width: 575.98px) {
    .sd-faq-accordion .accordion-item,
    .sd-success-stat,
    .sd-tilt--port .sd-tilt-inner { clip-path: polygon(0 0, calc(50% - 24px) 0, calc(50% - 17px) 8px, calc(50% + 17px) 8px, calc(50% + 24px) 0, 100% 0, 100% 100%, calc(50% + 24px) 100%, calc(50% + 17px) calc(100% - 8px), calc(50% - 17px) calc(100% - 8px), calc(50% - 24px) 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .sd-faq-accordion .accordion-item::before,
    .sd-success-stat::before,
    .sd-tilt--port .sd-tilt-inner::before { animation: none; }
}


/* Final compact pass — landing page What We Do */
.sd-services > .container > .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: .55rem;
}
.sd-services > .container > .row > [data-sd-item] { display: flex; }
.sd-services .sd-tilt {
    width: 100%;
    height: 270px;
    margin-bottom: .45rem;
}
.sd-services .sd-tilt-body { padding: 1.25rem 1.2rem; }
.sd-services .sd-tilt-icon {
    width: 50px;
    height: 50px;
    font-size: 21px;
    border-radius: 14px;
    margin-bottom: .7rem;
}
.sd-services .sd-tilt-body h5 { font-size: 17px; margin-bottom: .35rem; }
.sd-services .sd-tilt-body p { font-size: 13.5px; line-height: 1.45; margin-bottom: .6rem; }
.sd-services .sd-tilt-body a { font-size: 13px; }
@media (max-width: 991.98px) {
    .sd-services .sd-tilt { height: 258px; }
}
@media (max-width: 575.98px) {
    .sd-services > .container > .row { --bs-gutter-x: .75rem; --bs-gutter-y: .35rem; }
    .sd-services .sd-tilt { height: 244px; margin-bottom: .3rem; }
    .sd-services .sd-tilt-body { padding: 1.1rem 1rem; }
    .sd-services .sd-tilt-icon { width: 46px; height: 46px; font-size: 18px; margin-bottom: .6rem; }
    .sd-services .sd-tilt-body h5 { font-size: 16px; }
    .sd-services .sd-tilt-body p { font-size: 13px; line-height: 1.42; }
}


/* Compact proportions — landing page List Project / Portfolio */
.sd-portfolio .sd-port-grid {
    column-gap: 1rem;
    row-gap: .9rem;
}
.sd-portfolio .sd-port-item-media img {
    aspect-ratio: 5 / 3;
}
.sd-portfolio .sd-port-item-body {
    padding: .85rem 1rem 1rem;
}
.sd-portfolio .sd-port-item-body h3 {
    font-size: 15px;
    margin-bottom: .2rem;
}
.sd-portfolio .sd-port-item-body p {
    font-size: 12.5px;
    line-height: 1.45;
}
@media (max-width: 991.98px) {
    .sd-portfolio .sd-port-grid { column-gap: .8rem; row-gap: .75rem; }
    .sd-portfolio .sd-port-item-body { padding: .75rem .85rem .85rem; }
}
@media (max-width: 575.98px) {
    .sd-portfolio .sd-port-grid { row-gap: .65rem; }
    .sd-portfolio .sd-port-item-media img { aspect-ratio: 16 / 10; }
    .sd-portfolio .sd-port-item-body { padding: .7rem .8rem .8rem; }
}


/* Preserve full artwork in landing List Project cards */
.sd-portfolio .sd-port-item-media img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: linear-gradient(145deg, #11131c, #07080d);
}
@media (max-width: 575.98px) {
    .sd-portfolio .sd-port-item-media img { aspect-ratio: 4 / 3; }
}


/* Landing Portfolio — full-width artwork with shared notch beam cards */
.sd-portfolio .sd-tilt-inner {
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    clip-path: polygon(0 0, calc(50% - 38px) 0, calc(50% - 27px) 11px, calc(50% + 27px) 11px, calc(50% + 38px) 0, 100% 0, 100% 100%, calc(50% + 38px) 100%, calc(50% + 27px) calc(100% - 11px), calc(50% - 27px) calc(100% - 11px), calc(50% - 38px) 100%, 0 100%);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 0 18px rgba(255, 62, 62, .1);
}
.sd-portfolio .sd-tilt-inner::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 35deg, transparent 0 66%, rgba(255, 62, 62, .3) 71%, rgba(255, 118, 62, .82) 77%, #fff 82%, #ffad8d 86%, transparent 93%);
    clip-path: inherit;
    filter: drop-shadow(0 0 6px rgba(255, 62, 62, .95)) drop-shadow(0 0 16px rgba(255, 118, 62, .38));
    animation: sdPortfolioNotchBeam 5.4s linear infinite;
}
.sd-portfolio .sd-tilt-inner::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 2px;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(25, 10, 18, .98), rgba(9, 10, 20, .99) 58%, rgba(18, 11, 18, .98));
    clip-path: polygon(0 0, calc(50% - 36px) 0, calc(50% - 25px) 9px, calc(50% + 25px) 9px, calc(50% + 36px) 0, 100% 0, 100% 100%, calc(50% + 36px) 100%, calc(50% + 25px) calc(100% - 9px), calc(50% - 25px) calc(100% - 9px), calc(50% - 36px) 100%, 0 100%);
}
.sd-portfolio .sd-tilt-inner > *,
.sd-portfolio .sd-port-item-media,
.sd-portfolio .sd-port-item-body { position: relative; z-index: 2; }
.sd-portfolio .sd-tilt-glare { position: absolute; z-index: 3; }
.sd-portfolio .sd-port-item-media { width: 100%; background: transparent; }
.sd-portfolio .sd-port-item-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    background: transparent;
}
.sd-portfolio .sd-port-item-body { background: rgba(4, 5, 10, .28); }
.sd-portfolio .sd-port-item:hover .sd-tilt-inner,
.sd-portfolio .sd-port-item:focus-visible .sd-tilt-inner {
    box-shadow: 0 24px 54px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 62, 62, .2), 0 0 42px rgba(255, 118, 62, .12);
}
@keyframes sdPortfolioNotchBeam { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) {
    .sd-portfolio .sd-tilt-inner {
        clip-path: polygon(0 0, calc(50% - 29px) 0, calc(50% - 21px) 9px, calc(50% + 21px) 9px, calc(50% + 29px) 0, 100% 0, 100% 100%, calc(50% + 29px) 100%, calc(50% + 21px) calc(100% - 9px), calc(50% - 21px) calc(100% - 9px), calc(50% - 29px) 100%, 0 100%);
    }
    .sd-portfolio .sd-tilt-inner::after { clip-path: polygon(0 0, calc(50% - 27px) 0, calc(50% - 19px) 7px, calc(50% + 19px) 7px, calc(50% + 27px) 0, 100% 0, 100% 100%, calc(50% + 27px) 100%, calc(50% + 19px) calc(100% - 7px), calc(50% - 19px) calc(100% - 7px), calc(50% - 27px) 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .sd-portfolio .sd-tilt-inner::before { animation: none; }
}


/* Equal-size landing Portfolio cards */
.sd-portfolio .sd-port-item,
.sd-portfolio .sd-tilt--port,
.sd-portfolio .sd-tilt--port .sd-tilt-inner {
    height: 100%;
}
.sd-portfolio .sd-tilt--port .sd-tilt-inner {
    display: flex;
    flex-direction: column;
}
.sd-portfolio .sd-port-item-media {
    flex: 0 0 clamp(210px, 18vw, 290px);
    height: clamp(210px, 18vw, 290px);
    min-height: 0;
}
.sd-portfolio .sd-port-item-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    background: transparent;
}
.sd-portfolio .sd-port-item-body {
    flex: 1 1 auto;
    min-height: 92px;
}
@media (max-width: 991.98px) {
    .sd-portfolio .sd-port-item-media {
        flex-basis: clamp(190px, 25vw, 250px);
        height: clamp(190px, 25vw, 250px);
    }
}
@media (max-width: 575.98px) {
    .sd-portfolio .sd-port-item-media {
        flex-basis: min(78vw, 300px);
        height: min(78vw, 300px);
    }
}


/* Google profile badge and review actions */
.sd-google-review-actions {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin-top: .35rem;
}
.sd-google-review-link,
.sd-google-review-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 38px;
    padding: .58rem .9rem;
    border: 1px solid rgba(255, 118, 62, .55);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sd-google-review-link {
    color: #fff;
    background: rgba(255, 62, 62, .1);
}
.sd-google-review-cta {
    color: #04050a;
    background: linear-gradient(135deg, #ffad8d, #ff763e);
    border-color: #ffad8d;
}
.sd-google-review-link:hover,
.sd-google-review-link:focus-visible {
    color: #fff;
    background: rgba(255, 62, 62, .28);
    border-color: #ff763e;
    box-shadow: 0 0 16px rgba(255, 62, 62, .24);
    transform: translateY(-2px);
}
.sd-google-review-cta:hover,
.sd-google-review-cta:focus-visible {
    color: #04050a;
    border-color: #fff;
    box-shadow: 0 0 18px rgba(255, 118, 62, .42);
    transform: translateY(-2px);
}
.sd-google-review-attribution {
    flex: 1 1 100%;
    display: block;
    margin-top: .05rem;
    color: rgba(255, 255, 255, .56);
    font-size: 11px;
    text-align: center;
}
@media (max-width: 575.98px) {
    .sd-google-review-actions { flex-direction: column; width: 100%; }
    .sd-google-review-link,
    .sd-google-review-cta { width: 100%; max-width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-google-review-link,
    .sd-google-review-cta { transition: none; }
}


/* Verified Google review source link */
.sd-review-source {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
    color: rgba(255, 173, 141, .82);
    font-size: 11px;
    line-height: 1.25;
    text-decoration: none;
}
.sd-review-source:hover,
.sd-review-source:focus-visible {
    color: #ff763e;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Modern Reviews section background */
.sd-reviews {
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 62, 62, .14), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(255, 118, 62, .12), transparent 30%),
        linear-gradient(135deg, #08090f 0%, #04050a 52%, #100b10 100%);
}
.sd-reviews::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(255, 173, 141, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 173, 141, .07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.sd-reviews::after {
    content: '';
    position: absolute;
    inset: 12% 5% 8%;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(255, 118, 62, .14);
    clip-path: polygon(0 0, calc(50% - 42px) 0, calc(50% - 30px) 12px, calc(50% + 30px) 12px, calc(50% + 42px) 0, 100% 0, 100% 100%, calc(50% + 42px) 100%, calc(50% + 30px) calc(100% - 12px), calc(50% - 30px) calc(100% - 12px), calc(50% - 42px) 100%, 0 100%);
    box-shadow: inset 0 0 42px rgba(255, 62, 62, .04), 0 0 30px rgba(255, 118, 62, .04);
}
.sd-reviews .sd-review-slider {
    touch-action: pan-y;
}
@media (max-width: 575.98px) {
    .sd-reviews::before { background-size: 34px 34px; opacity: .26; }
    .sd-reviews::after { inset: 8% 3% 5%; }
    .sd-reviews .sd-review-card { min-height: 270px; padding: 1.35rem; }
}


/* Compact mobile review cards */
@media (max-width: 575.98px) {
    .sd-reviews .sd-review-card {
        min-height: 0;
        padding: 1rem;
        border-radius: 14px;
    }
    .sd-reviews .sd-review-text {
        margin: .8rem 0 1rem;
        font-size: 13px;
        line-height: 1.55;
    }
    .sd-reviews .sd-review-name { font-size: 13px; }
    .sd-reviews .sd-review-date,
    .sd-reviews .sd-review-source { font-size: 10px; }
    .sd-reviews .sd-review-avatar { width: 30px; height: 30px; font-size: 12px; }
    .sd-reviews .sd-review-stars { font-size: 12px; letter-spacing: 1px; }
    .sd-reviews .sd-review-badge { width: 28px; height: 28px; font-size: 13px; }
    .sd-reviews .sd-review-quote { font-size: 1.55rem; }
}

/* Branded Back to Top control */
.sd-back-top {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 1998;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 173, 141, .68);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #ff3e3e, #ff763e);
    box-shadow: 0 10px 26px rgba(255, 62, 62, .28), inset 0 0 0 1px rgba(255, 255, 255, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    cursor: pointer;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease, box-shadow .25s ease;
}
.sd-back-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.sd-back-top:hover,
.sd-back-top:focus-visible { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(255, 118, 62, .42); }

/* Icon-only WhatsApp trigger in the Swap Design palette */
.wws-button {
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    border: 1px solid rgba(255, 173, 141, .72);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #ff3e3e, #ff763e);
    box-shadow: 0 12px 32px rgba(255, 62, 62, .32), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.wws-button:hover,
.wws-button:focus-visible { color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 34px rgba(255, 118, 62, .42); }
.wws-button .fa-whatsapp { font-size: 27px; }
.wws-button-open { display: inline-grid; place-items: center; }
.wws-widget.is-open .wws-button { width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.wws-widget.is-open .wws-button-close { display: grid; place-items: center; font-size: 17px; }
.wws-widget.is-open .wws-button-open { display: none; }
@media (max-width: 575.98px) {
    .wws-widget { right: 14px; bottom: 14px; }
    .wws-button { width: 50px; height: 50px; }
    .wws-button .fa-whatsapp { font-size: 25px; }
    .sd-back-top { right: 14px; bottom: 78px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-back-top,
    .wws-button { transition: none; }
}


/* Open WhatsApp popup: Swap Design branded treatment */
.wws-popup {
    background: #04050a;
    color: #f7f7f8;
    border: 1px solid rgba(255, 118, 62, .48);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .68), 0 0 28px rgba(255, 62, 62, .14);
}
.wws-popup-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ff3e3e 0%, #ff763e 62%, #ffad8d 135%);
    color: #fff;
}
.wws-popup-header::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -62px;
    top: -82px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(255, 255, 255, .06), 0 0 0 36px rgba(255, 255, 255, .04);
    pointer-events: none;
}
.wws-popup-header > * { position: relative; z-index: 1; }
.wws-avatar img { border-color: rgba(255, 255, 255, .82); }
.wws-header-text strong { color: #fff; }
.wws-header-text span { color: rgba(255, 255, 255, .92); }
.wws-close {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.wws-close:hover,
.wws-close:focus-visible {
    color: #04050a;
    background: #ffad8d;
    transform: rotate(8deg);
}
.wws-popup-body {
    background: linear-gradient(160deg, #04050a 0%, #0b0c12 100%);
    color: #f7f7f8;
}
.wws-popup-body label,
.wws-popup-body .form-check-label { color: #ffad8d; }
.wws-popup .form-control {
    background: #0d0f16;
    border-color: rgba(255, 173, 141, .24);
    color: #fff;
}
.wws-popup .form-control::placeholder { color: rgba(255, 255, 255, .54); }
.wws-popup .form-control:focus {
    background: #11131b;
    border-color: #ff763e;
    box-shadow: 0 0 0 .2rem rgba(255, 118, 62, .18);
}
.wws-popup .form-check-input {
    background-color: #0d0f16;
    border-color: rgba(255, 173, 141, .5);
}
.wws-popup .form-check-input:checked {
    background-color: #ff3e3e;
    border-color: #ff763e;
}
.wws-gdpr a { color: #ff763e; }
.wws-gdpr a:hover,
.wws-gdpr a:focus-visible { color: #ffad8d; }
.wws-send {
    background: linear-gradient(135deg, #ff3e3e, #ff763e);
    border: 1px solid rgba(255, 173, 141, .66);
    box-shadow: 0 10px 22px rgba(255, 62, 62, .2);
}
.wws-send:hover,
.wws-send:focus-visible { background: linear-gradient(135deg, #ff763e, #ffad8d); color: #04050a; }
.wws-success { color: #ffad8d; }
.wws-success i { color: #ff763e; }
@media (prefers-reduced-motion: reduce) {
    .wws-close { transition: none; }
}


/* Privacy Policy and footer legal navigation */
.sd-footer-bottom { text-align: left; }
.sd-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.sd-footer-bottom-left { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1.1rem; }
.sd-footer-bottom-left p,
.sd-footer-bottom-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sd-footer-bottom-left a { color: #ffad8d; font-size: 14px; }
.sd-footer-bottom-left a:hover,
.sd-footer-bottom-left a:focus-visible { color: #ff763e; }
.sd-footer-bottom-note { text-align: right; }

.sd-legal-page { position: relative; overflow: hidden; }
.sd-legal-intro { max-width: 860px; margin: 0 auto 2.75rem; text-align: center; }
.sd-legal-intro .sd-kicker { color: #ffad8d; }
.sd-legal-lead { margin: 1rem 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.8; }
.sd-legal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: clamp(2rem, 6vw, 5.5rem); max-width: 1180px; margin: 0 auto; }
.sd-legal-content { min-width: 0; }
.sd-legal-content section { padding: 0 0 2.4rem; margin: 0 0 2.4rem; border-bottom: 1px solid rgba(255, 118, 62, .16); }
.sd-legal-content section:last-child { margin-bottom: 0; }
.sd-legal-content h2 { margin: 0 0 .8rem; color: var(--white); font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; }
.sd-legal-content h2::before { content: '/ '; color: #ff3e3e; }
.sd-legal-content p { margin: 0 0 1rem; color: var(--muted); font-size: 1rem; line-height: 1.82; }
.sd-legal-content p:last-child { margin-bottom: 0; }
.sd-legal-content a { color: #ffad8d; text-decoration: underline; text-decoration-color: rgba(255, 118, 62, .45); text-underline-offset: 3px; }
.sd-legal-content a:hover,
.sd-legal-content a:focus-visible { color: #ff763e; }
.sd-legal-aside { position: sticky; top: 110px; padding: 1.45rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 16px; background: linear-gradient(155deg, rgba(255, 62, 62, .12), rgba(4, 5, 10, .84) 42%); box-shadow: 0 18px 42px rgba(0, 0, 0, .24); }
.sd-legal-aside-label { color: #ff763e; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.sd-legal-aside h2 { margin: .8rem 0 .7rem; color: var(--white); font-family: var(--font-display); font-size: 1.55rem; }
.sd-legal-aside p { margin: 0 0 1.25rem; color: var(--muted); font-size: 14px; line-height: 1.7; }
.sd-legal-aside .sd-btn { width: 100%; justify-content: center; }
.sd-legal-nav { display: grid; gap: .65rem; margin-top: 1.5rem; padding-top: 1.15rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.sd-legal-nav a { color: rgba(255, 255, 255, .68); font-size: 13px; }
.sd-legal-nav a:hover,
.sd-legal-nav a:focus-visible { color: #ffad8d; }
@media (max-width: 991.98px) {
    .sd-legal-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-legal-aside { position: static; order: -1; }
    .sd-legal-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .sd-footer-bottom-inner { display: grid; gap: .65rem; }
    .sd-footer-bottom-left { display: grid; gap: .25rem; }
    .sd-footer-bottom-left p,
    .sd-footer-bottom-left a,
    .sd-footer-bottom-note { font-size: 12px; }
    .sd-footer-bottom-note { text-align: left; }
    .sd-legal-intro { margin-bottom: 2rem; text-align: left; }
    .sd-legal-lead { font-size: 1rem; line-height: 1.72; }
    .sd-legal-content section { padding-bottom: 1.8rem; margin-bottom: 1.8rem; }
    .sd-legal-content p { font-size: .95rem; line-height: 1.75; }
    .sd-legal-aside { padding: 1.2rem; }
    .sd-legal-nav { grid-template-columns: 1fr; }
}


/* Footer legal links and FAQ page */
.sd-footer-bottom-legal-links { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.sd-faq-list { display: grid; gap: .85rem; max-width: 920px; margin: 0 auto; }
.sd-faq-card { overflow: hidden; border: 1px solid rgba(255, 118, 62, .22); border-radius: 14px; background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(4, 5, 10, .72)); }
.sd-faq-card summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.35rem; color: var(--white); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.04rem; font-weight: 700; line-height: 1.35; }
.sd-faq-card summary::-webkit-details-marker { display: none; }
.sd-faq-card summary::marker { display: none; }
.sd-faq-card summary i { flex: 0 0 auto; color: #ff763e; font-size: 14px; transition: transform .25s ease, color .25s ease; }
.sd-faq-card[open] summary { color: #ffad8d; }
.sd-faq-card[open] summary i { color: #ffad8d; transform: rotate(45deg); }
.sd-faq-card summary:focus-visible { outline: 2px solid #ffad8d; outline-offset: -3px; }
.sd-faq-answer { padding: 0 1.35rem 1.3rem; }
.sd-faq-answer p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.sd-faq-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 920px; margin: 3.5rem auto 0; padding: 1.5rem 1.6rem; border: 1px solid rgba(255, 118, 62, .28); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 62, 62, .12), rgba(255, 118, 62, .04)); }
.sd-faq-cta h2 { margin: .7rem 0 .45rem; color: var(--white); font-family: var(--font-display); font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.sd-faq-cta p { margin: 0; color: var(--muted); line-height: 1.65; }
.sd-faq-cta .sd-btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .sd-footer-bottom-legal-links { display: grid; gap: .25rem; }
    .sd-faq-card summary { padding: 1rem; font-size: .98rem; }
    .sd-faq-answer { padding: 0 1rem 1.1rem; }
    .sd-faq-answer p { font-size: .95rem; line-height: 1.72; }
    .sd-faq-cta { display: grid; gap: 1.2rem; margin-top: 2.4rem; padding: 1.2rem; }
    .sd-faq-cta .sd-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-faq-card summary i { transition: none; }
}


/* Footer bottom legal links sit opposite the copyright column */
.sd-footer-bottom-right { margin-left: auto; }
.sd-footer-bottom-legal-links { justify-content: flex-end; }
.sd-footer-bottom-legal-links a { color: #ffad8d; font-size: 14px; }
.sd-footer-bottom-legal-links a:hover,
.sd-footer-bottom-legal-links a:focus-visible { color: #ff763e; }
@media (max-width: 575.98px) {
    .sd-footer-bottom-right { margin-left: 0; }
    .sd-footer-bottom-legal-links { justify-content: flex-start; }
}


/* FAQ Beam Variants and footer legal-link states */
.sd-faq-accordion .sd-faq-card {
    border-color: transparent;
    background: linear-gradient(145deg, rgba(255, 62, 62, .16), rgba(255, 118, 62, .055) 48%, rgba(255, 62, 62, .12));
}
.sd-faq-accordion .sd-faq-card::before,
.sd-faq-accordion .sd-faq-card::after {
    clip-path: polygon(0 0, calc(50% - 30px) 0, calc(50% - 21px) 9px, calc(50% + 21px) 9px, calc(50% + 30px) 0, 100% 0, 100% 100%, calc(50% + 30px) 100%, calc(50% + 21px) calc(100% - 9px), calc(50% - 21px) calc(100% - 9px), calc(50% - 30px) 100%, 0 100%);
}
.sd-faq-accordion .sd-faq-card:hover,
.sd-faq-accordion .sd-faq-card:focus-within,
.sd-faq-accordion .sd-faq-card[open] {
    box-shadow: 0 20px 42px rgba(0, 0, 0, .34), 0 0 24px rgba(255, 62, 62, .16);
}
.sd-faq-accordion .sd-faq-card summary { position: relative; z-index: 3; }
.sd-faq-accordion .sd-faq-answer { position: relative; z-index: 3; }
.sd-footer-bottom-legal-links a {
    position: relative;
    padding: .2rem .45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sd-footer-bottom-legal-links a:hover,
.sd-footer-bottom-legal-links a:focus-visible {
    color: #fff;
    background: rgba(255, 62, 62, .14);
    border-color: rgba(255, 118, 62, .48);
    box-shadow: 0 0 16px rgba(255, 62, 62, .16);
}
.sd-footer-bottom-legal-links a:active,
.sd-footer-bottom-legal-links a.is-active {
    color: #04050a;
    background: linear-gradient(135deg, #ff3e3e, #ff763e);
    border-color: #ffad8d;
    box-shadow: 0 0 18px rgba(255, 118, 62, .3);
}
.sd-footer-bottom-legal-links a.is-active::after {
    content: '';
    position: absolute;
    right: .45rem;
    bottom: -.32rem;
    left: .45rem;
    height: 2px;
    border-radius: 999px;
    background: #ffad8d;
}
@media (max-width: 575.98px) {
    .sd-faq-accordion .sd-faq-card::before,
    .sd-faq-accordion .sd-faq-card::after {
        clip-path: polygon(0 0, calc(50% - 24px) 0, calc(50% - 17px) 8px, calc(50% + 17px) 8px, calc(50% + 24px) 0, 100% 0, 100% 100%, calc(50% + 24px) 100%, calc(50% + 17px) calc(100% - 8px), calc(50% - 17px) calc(100% - 8px), calc(50% - 24px) 100%, 0 100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sd-footer-bottom-legal-links a { transition: none; }
}


/* Services v2 — Beam Variants service cards */
.sd-services-v2-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    min-height: 270px;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border: 0;
    border-radius: 0;
    background: linear-gradient(145deg, rgba(255, 62, 62, .22), rgba(255, 118, 62, .08) 48%, rgba(255, 62, 62, .17));
    clip-path: polygon(0 0, calc(50% - 34px) 0, calc(50% - 24px) 10px, calc(50% + 24px) 10px, calc(50% + 34px) 0, 100% 0, 100% 100%, calc(50% + 34px) 100%, calc(50% + 24px) calc(100% - 10px), calc(50% - 24px) calc(100% - 10px), calc(50% - 34px) 100%, 0 100%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28), 0 0 15px rgba(255, 62, 62, .08);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.sd-services-v2-card::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 35deg, transparent 0 66%, rgba(255, 62, 62, .3) 71%, rgba(255, 118, 62, .82) 77%, #fff 82%, #ffad8d 86%, transparent 93%);
    clip-path: inherit;
    filter: drop-shadow(0 0 5px rgba(255, 62, 62, .9)) drop-shadow(0 0 12px rgba(255, 118, 62, .34));
    animation: sdServicesV2Beam 5.2s linear infinite;
}
.sd-services-v2-card::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 2px;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(25, 10, 18, .98), rgba(9, 10, 20, .99) 58%, rgba(18, 11, 18, .98));
    clip-path: polygon(0 0, calc(50% - 32px) 0, calc(50% - 22px) 8px, calc(50% + 22px) 8px, calc(50% + 32px) 0, 100% 0, 100% 100%, calc(50% + 32px) 100%, calc(50% + 22px) calc(100% - 8px), calc(50% - 22px) calc(100% - 8px), calc(50% - 32px) 100%, 0 100%);
}
.sd-services-v2-card > * { position: relative; z-index: 2; }
.sd-services-v2-card:hover,
.sd-services-v2-card:focus-within {
    background: linear-gradient(145deg, rgba(255, 62, 62, .29), rgba(255, 118, 62, .13) 48%, rgba(255, 62, 62, .23));
    box-shadow: 0 22px 44px rgba(0, 0, 0, .38), 0 0 22px rgba(255, 62, 62, .17), 0 0 34px rgba(255, 118, 62, .09);
    filter: saturate(1.07);
    transform: translateY(-4px);
}
.sd-services-v2-card:focus-within { outline: 2px solid rgba(255, 173, 141, .82); outline-offset: 5px; }
.sd-services-v2-card-icon { position: relative; z-index: 2; transition: transform .35s ease, box-shadow .35s ease; }
.sd-services-v2-card-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(255, 173, 141, .3);
    border-radius: 14px;
    transform: rotate(7deg);
    pointer-events: none;
}
.sd-services-v2-card:hover .sd-services-v2-card-icon,
.sd-services-v2-card:focus-within .sd-services-v2-card-icon {
    transform: translateY(-2px) rotate(-3deg);
    box-shadow: 0 10px 22px rgba(255, 62, 62, .34), 0 0 0 4px rgba(255, 118, 62, .07);
}
.sd-services-v2-card h4 { position: relative; padding-bottom: .48rem; }
.sd-services-v2-card h4::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    margin-top: .34rem;
    background: var(--gradient-primary);
    box-shadow: 0 0 8px rgba(255, 62, 62, .7);
    transition: width .35s ease;
}
.sd-services-v2-card:hover h4::after,
.sd-services-v2-card:focus-within h4::after { width: 42px; }
.sd-services-v2-card .sd-services-v2-link { min-height: 44px; }
.sd-services-v2-card .sd-services-v2-link:focus-visible { outline: 2px solid var(--pale-orange, #ffad8d); outline-offset: 4px; border-radius: 4px; }
@keyframes sdServicesV2Beam { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) {
    .sd-services-v2-card {
        min-height: 0;
        padding: 1.1rem;
        clip-path: polygon(0 0, calc(50% - 26px) 0, calc(50% - 18px) 8px, calc(50% + 18px) 8px, calc(50% + 26px) 0, 100% 0, 100% 100%, calc(50% + 26px) 100%, calc(50% + 18px) calc(100% - 8px), calc(50% - 18px) calc(100% - 8px), calc(50% - 26px) 100%, 0 100%);
    }
    .sd-services-v2-card::after { clip-path: polygon(0 0, calc(50% - 24px) 0, calc(50% - 16px) 6px, calc(50% + 16px) 6px, calc(50% + 24px) 0, 100% 0, 100% 100%, calc(50% + 24px) 100%, calc(50% + 16px) calc(100% - 6px), calc(50% - 16px) calc(100% - 6px), calc(50% - 24px) 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .sd-services-v2-card,
    .sd-services-v2-card::before,
    .sd-services-v2-card-icon,
    .sd-services-v2-card h4::after { animation: none; transition: none; }
}


/* Dedicated Services sub-pages — shared Beam Variant cards */
.sd-website-service-card,
.sd-website-problem,
.sd-website-process-step,
.sd-website-principles > div,
.sd-website-trust-list > div,
.sd-maintenance-service-card,
.sd-maintenance-principles > div,
.sd-maintenance-problem,
.sd-maintenance-plan-card,
.sd-maintenance-platform-list > div,
.sd-maintenance-trust-card,
.sd-logo-principles > div,
.sd-logo-service-card,
.sd-logo-application-card,
.sd-logo-process-step,
.sd-logo-checklist > div,
.sd-graphic-service-card,
.sd-graphic-process-step,
.sd-graphic-checklist > div,
.sd-digital-service-card,
.sd-digital-path > div,
.sd-digital-problem,
.sd-digital-process-step,
.sd-digital-trust-card,
.sd-ux-service-card,
.sd-ux-friction-list > div,
.sd-ux-principles-grid article,
.sd-ux-process-step {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: linear-gradient(145deg, rgba(255, 62, 62, .2), rgba(255, 118, 62, .08) 48%, rgba(255, 62, 62, .16));
    clip-path: polygon(0 0, calc(50% - 34px) 0, calc(50% - 24px) 10px, calc(50% + 24px) 10px, calc(50% + 34px) 0, 100% 0, 100% 100%, calc(50% + 34px) 100%, calc(50% + 24px) calc(100% - 10px), calc(50% - 24px) calc(100% - 10px), calc(50% - 34px) 100%, 0 100%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28), 0 0 15px rgba(255, 62, 62, .08);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.sd-website-service-card::before,
.sd-website-problem::before,
.sd-website-process-step::before,
.sd-website-principles > div::before,
.sd-website-trust-list > div::before,
.sd-maintenance-service-card::before,
.sd-maintenance-principles > div::before,
.sd-maintenance-problem::before,
.sd-maintenance-plan-card::before,
.sd-maintenance-platform-list > div::before,
.sd-maintenance-trust-card::before,
.sd-logo-principles > div::before,
.sd-logo-service-card::before,
.sd-logo-application-card::before,
.sd-logo-process-step::before,
.sd-logo-checklist > div::before,
.sd-graphic-service-card::before,
.sd-graphic-process-step::before,
.sd-graphic-checklist > div::before,
.sd-digital-service-card::before,
.sd-digital-path > div::before,
.sd-digital-problem::before,
.sd-digital-process-step::before,
.sd-digital-trust-card::before,
.sd-ux-service-card::before,
.sd-ux-friction-list > div::before,
.sd-ux-principles-grid article::before,
.sd-ux-process-step::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 35deg, transparent 0 66%, rgba(255, 62, 62, .28) 71%, rgba(255, 118, 62, .8) 77%, #fff 82%, #ffad8d 86%, transparent 93%);
    clip-path: inherit;
    filter: drop-shadow(0 0 5px rgba(255, 62, 62, .9)) drop-shadow(0 0 12px rgba(255, 118, 62, .32));
    animation: sdServicesSubpageBeam 5.2s linear infinite;
}
.sd-website-service-card::after,
.sd-website-problem::after,
.sd-website-process-step::after,
.sd-website-principles > div::after,
.sd-website-trust-list > div::after,
.sd-maintenance-service-card::after,
.sd-maintenance-principles > div::after,
.sd-maintenance-problem::after,
.sd-maintenance-plan-card::after,
.sd-maintenance-platform-list > div::after,
.sd-maintenance-trust-card::after,
.sd-logo-principles > div::after,
.sd-logo-service-card::after,
.sd-logo-application-card::after,
.sd-logo-process-step::after,
.sd-logo-checklist > div::after,
.sd-graphic-service-card::after,
.sd-graphic-process-step::after,
.sd-graphic-checklist > div::after,
.sd-digital-service-card::after,
.sd-digital-path > div::after,
.sd-digital-problem::after,
.sd-digital-process-step::after,
.sd-digital-trust-card::after,
.sd-ux-service-card::after,
.sd-ux-friction-list > div::after,
.sd-ux-principles-grid article::after,
.sd-ux-process-step::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 2px;
    pointer-events: none;
    background: linear-gradient(145deg, rgba(25, 10, 18, .97), rgba(9, 10, 20, .99) 58%, rgba(18, 11, 18, .98));
    clip-path: polygon(0 0, calc(50% - 32px) 0, calc(50% - 22px) 8px, calc(50% + 22px) 8px, calc(50% + 32px) 0, 100% 0, 100% 100%, calc(50% + 32px) 100%, calc(50% + 22px) calc(100% - 8px), calc(50% - 22px) calc(100% - 8px), calc(50% - 32px) 100%, 0 100%);
}
.sd-website-service-card > *,
.sd-website-problem > *,
.sd-website-process-step > *,
.sd-website-principles > div > *,
.sd-website-trust-list > div > *,
.sd-maintenance-service-card > *,
.sd-maintenance-principles > div > *,
.sd-maintenance-problem > *,
.sd-maintenance-plan-card > *,
.sd-maintenance-platform-list > div > *,
.sd-maintenance-trust-card > *,
.sd-logo-principles > div > *,
.sd-logo-service-card > *,
.sd-logo-application-card > *,
.sd-logo-process-step > *,
.sd-logo-checklist > div > *,
.sd-graphic-service-card > *,
.sd-graphic-process-step > *,
.sd-graphic-checklist > div > *,
.sd-digital-service-card > *,
.sd-digital-path > div > *,
.sd-digital-problem > *,
.sd-digital-process-step > *,
.sd-digital-trust-card > *,
.sd-ux-service-card > *,
.sd-ux-friction-list > div > *,
    .sd-ux-principles-grid article > *,
.sd-ux-process-step > * { position: relative; z-index: 2; }
/* Preserve decorative elements that are intentionally positioned inside cards. */
.sd-logo-application-card > i { position: absolute; z-index: 3; }
.sd-website-service-card:hover,
.sd-website-service-card:focus-within,
.sd-website-problem:hover,
.sd-website-problem:focus-within,
.sd-website-process-step:hover,
.sd-website-process-step:focus-within,
.sd-website-principles > div:hover,
.sd-website-trust-list > div:hover,
.sd-maintenance-service-card:hover,
.sd-maintenance-service-card:focus-within,
.sd-maintenance-principles > div:hover,
.sd-maintenance-problem:hover,
.sd-maintenance-problem:focus-within,
.sd-maintenance-plan-card:hover,
.sd-maintenance-plan-card:focus-within,
.sd-maintenance-platform-list > div:hover,
.sd-maintenance-trust-card:hover,
.sd-logo-principles > div:hover,
.sd-logo-service-card:hover,
.sd-logo-service-card:focus-within,
.sd-logo-application-card:hover,
.sd-logo-process-step:hover,
.sd-logo-checklist > div:hover,
.sd-graphic-service-card:hover,
.sd-graphic-process-step:hover,
.sd-graphic-checklist > div:hover,
.sd-digital-service-card:hover,
.sd-digital-path > div:hover,
.sd-digital-problem:hover,
.sd-digital-process-step:hover,
.sd-digital-trust-card:hover,
.sd-ux-service-card:hover,
.sd-ux-friction-list > div:hover,
.sd-ux-principles-grid article:hover,
.sd-ux-process-step:hover {
    background: linear-gradient(145deg, rgba(255, 62, 62, .28), rgba(255, 118, 62, .13) 48%, rgba(255, 62, 62, .23));
    box-shadow: 0 22px 44px rgba(0, 0, 0, .38), 0 0 22px rgba(255, 62, 62, .17), 0 0 34px rgba(255, 118, 62, .09);
    filter: saturate(1.07);
    transform: translateY(-4px);
}
.sd-website-service-card:focus-within,
.sd-website-problem:focus-within,
.sd-website-process-step:focus-within,
.sd-maintenance-service-card:focus-within,
.sd-maintenance-problem:focus-within,
.sd-maintenance-plan-card:focus-within,
.sd-logo-service-card:focus-within,
.sd-graphic-service-card:focus-within,
.sd-digital-service-card:focus-within {
    outline: 2px solid rgba(255, 173, 141, .82);
    outline-offset: 5px;
}
@keyframes sdServicesSubpageBeam { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) {
    .sd-website-service-card,
    .sd-website-problem,
    .sd-website-process-step,
    .sd-website-principles > div,
    .sd-website-trust-list > div,
    .sd-maintenance-service-card,
    .sd-maintenance-principles > div,
    .sd-maintenance-problem,
    .sd-maintenance-plan-card,
    .sd-maintenance-platform-list > div,
    .sd-maintenance-trust-card,
    .sd-logo-principles > div,
    .sd-logo-service-card,
    .sd-logo-application-card,
    .sd-logo-process-step,
    .sd-logo-checklist > div,
    .sd-graphic-service-card,
    .sd-graphic-process-step,
    .sd-graphic-checklist > div,
    .sd-digital-service-card,
    .sd-digital-path > div,
    .sd-digital-problem,
    .sd-digital-process-step,
    .sd-digital-trust-card,
    .sd-ux-service-card,
    .sd-ux-friction-list > div,
    .sd-ux-principles-grid article,
    .sd-ux-process-step {
        clip-path: polygon(0 0, calc(50% - 26px) 0, calc(50% - 18px) 8px, calc(50% + 18px) 8px, calc(50% + 26px) 0, 100% 0, 100% 100%, calc(50% + 26px) 100%, calc(50% + 18px) calc(100% - 8px), calc(50% - 18px) calc(100% - 8px), calc(50% - 26px) 100%, 0 100%);
    }
    .sd-website-service-card::after,
    .sd-website-problem::after,
    .sd-website-process-step::after,
    .sd-website-principles > div::after,
    .sd-website-trust-list > div::after,
    .sd-maintenance-service-card::after,
    .sd-maintenance-principles > div::after,
    .sd-maintenance-problem::after,
    .sd-maintenance-plan-card::after,
    .sd-maintenance-platform-list > div::after,
    .sd-maintenance-trust-card::after,
    .sd-logo-principles > div::after,
    .sd-logo-service-card::after,
    .sd-logo-application-card::after,
    .sd-logo-process-step::after,
    .sd-logo-checklist > div::after,
    .sd-graphic-service-card::after,
    .sd-graphic-process-step::after,
    .sd-graphic-checklist > div::after,
    .sd-digital-service-card::after,
    .sd-digital-path > div::after,
    .sd-digital-problem::after,
    .sd-digital-process-step::after,
    .sd-digital-trust-card::after,
    .sd-ux-service-card::after,
    .sd-ux-friction-list > div::after,
    .sd-ux-principles-grid article::after,
    .sd-ux-process-step::after {
        clip-path: polygon(0 0, calc(50% - 24px) 0, calc(50% - 16px) 6px, calc(50% + 16px) 6px, calc(50% + 24px) 0, 100% 0, 100% 100%, calc(50% + 24px) 100%, calc(50% + 16px) calc(100% - 6px), calc(50% - 16px) calc(100% - 6px), calc(50% - 24px) 100%, 0 100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sd-website-service-card,
    .sd-website-service-card::before,
    .sd-website-problem,
    .sd-website-problem::before,
    .sd-website-process-step,
    .sd-website-process-step::before,
    .sd-website-principles > div,
    .sd-website-principles > div::before,
    .sd-website-trust-list > div,
    .sd-website-trust-list > div::before,
    .sd-maintenance-service-card,
    .sd-maintenance-service-card::before,
    .sd-maintenance-principles > div,
    .sd-maintenance-principles > div::before,
    .sd-maintenance-problem,
    .sd-maintenance-problem::before,
    .sd-maintenance-plan-card,
    .sd-maintenance-plan-card::before,
    .sd-maintenance-platform-list > div,
    .sd-maintenance-platform-list > div::before,
    .sd-maintenance-trust-card,
    .sd-maintenance-trust-card::before,
    .sd-logo-principles > div,
    .sd-logo-principles > div::before,
    .sd-logo-service-card,
    .sd-logo-service-card::before,
    .sd-logo-application-card,
    .sd-logo-application-card::before,
    .sd-logo-process-step,
    .sd-logo-process-step::before,
    .sd-logo-checklist > div,
    .sd-logo-checklist > div::before,
    .sd-graphic-service-card,
    .sd-graphic-service-card::before,
    .sd-graphic-process-step,
    .sd-graphic-process-step::before,
    .sd-graphic-checklist > div,
    .sd-graphic-checklist > div::before,
    .sd-digital-service-card,
    .sd-digital-service-card::before,
    .sd-digital-path > div,
    .sd-digital-path > div::before,
    .sd-digital-problem,
    .sd-digital-problem::before,
    .sd-digital-process-step,
    .sd-digital-process-step::before,
    .sd-digital-trust-card,
    .sd-digital-trust-card::before,
    .sd-ux-service-card,
    .sd-ux-service-card::before,
    .sd-ux-friction-list > div,
    .sd-ux-friction-list > div::before,
    .sd-ux-principles-grid article,
    .sd-ux-principles-grid article::before,
    .sd-ux-process-step,
    .sd-ux-process-step::before { animation: none; transition: none; }
}


/* Landing hero — sparkling gradient text highlight.
   Background-position is the only animated property; H1 geometry remains stable. */
.sd-hero-title-outline {
    display: block;
    max-width: 100%;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px rgba(255, 118, 62, .9);
    paint-order: stroke fill;
    background-image: linear-gradient(105deg, #ff763e 0%, #ffad8d 22%, #fff1eb 38%, #ff3e3e 50%, #ff763e 68%, #ffad8d 86%, #ff763e 100%);
    background-size: 260% 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 16px rgba(255, 62, 62, .16);
    text-wrap: balance;
    animation: sd-hero-sparkle 5.5s linear .25s infinite;
}
@keyframes sd-hero-sparkle {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}
.sd-hero-title-outline:hover,
.sd-hero-title-outline:focus-visible {
    -webkit-text-stroke-color: #ffad8d;
    text-shadow: 0 0 10px rgba(255, 62, 62, .38), 0 0 22px rgba(255, 118, 62, .22);
}
@media (max-width: 767.98px) {
    .sd-hero-title-outline { -webkit-text-stroke-width: .75px; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-hero-title-outline { animation: none; }
}


/* How It Works refinement — clear stages, no repeated labels */
.sd-work-list li {
    max-width: 420px;
    border-radius: 18px;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.sd-work-list li:hover,
.sd-work-list li:focus-within {
    border-color: rgba(255, 118, 62, .45);
    background: linear-gradient(110deg, rgba(255, 62, 62, .14), rgba(255, 118, 62, .08));
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28), 0 0 18px rgba(255, 62, 62, .1);
}
.sd-work-list-copy {
    display: grid;
    gap: .18rem;
    min-width: 0;
}
.sd-work-list-copy strong {
    color: var(--off-white);
    font-size: 14px;
    line-height: 1.25;
}
.sd-work-list-copy small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}
.sd-work-3d-card {
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease, filter .3s ease;
}
.sd-work-3d-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 20% 12%, rgba(255, 118, 62, .16), transparent 38%), linear-gradient(145deg, rgba(255, 62, 62, .06), transparent 55%);
}
.sd-work-3d-card:hover,
.sd-work-3d-card:focus-within {
    border-color: rgba(255, 173, 141, .75);
    box-shadow: 0 30px 58px rgba(0, 0, 0, .58), 0 0 24px rgba(255, 62, 62, .18);
    filter: saturate(1.08);
}
.sd-work-3d-card > * {
    position: relative;
    z-index: 1;
}
.sd-work-3d-label {
    display: block;
    margin-bottom: .55rem;
    color: var(--secondary);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 1.2px;
    line-height: 1.2;
    text-transform: uppercase;
}
.sd-work-3d-card p {
    max-width: 190px;
    margin: .65rem auto 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}
@media (max-width: 991.98px) {
    .sd-work-list li { max-width: 100%; }
}
@media (max-width: 767.98px) {
    .sd-work-3d-card p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-work-list li,
    .sd-work-3d-card { transition: none; }
}


/* Testimonials refinement — compact review presentation */
.sd-reviews.sd-section { padding: 4.75rem 0; }
.sd-reviews .text-center.mb-5 { margin-bottom: 1.75rem !important; }
.sd-reviews .sd-rating-summary { margin-bottom: 1.5rem; }
.sd-reviews .sd-rating-card {
    gap: .65rem;
    padding: .65rem 1rem;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
.sd-reviews .sd-rating-google { font-size: 21px; }
.sd-reviews .sd-rating-score { gap: .45rem; }
.sd-reviews .sd-rating-score strong { font-size: 28px; }
.sd-reviews .sd-rating-stars { font-size: 12px; letter-spacing: 1px; }
.sd-reviews .sd-rating-note { font-size: 12px; }
.sd-reviews .sd-review-slider { padding: .5rem .25rem; }
.sd-reviews .sd-review-track { gap: 1rem; }
.sd-reviews .sd-review-card {
    min-height: 205px;
    padding: 1.2rem;
    border-radius: 15px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
}
.sd-reviews .sd-review-quote { top: .7rem; right: .9rem; font-size: 42px; }
.sd-reviews .sd-review-stars { font-size: 13px; letter-spacing: 1px; }
.sd-reviews .sd-review-badge { width: 30px; height: 30px; font-size: 13px; }
.sd-reviews .sd-review-text {
    margin: .7rem 0 .85rem;
    font-size: 13.5px;
    line-height: 1.55;
}
.sd-reviews .sd-review-meta { gap: .6rem; }
.sd-reviews .sd-review-avatar { width: 36px; height: 36px; font-size: 13px; }
.sd-reviews .sd-review-name { font-size: 13.5px; }
.sd-reviews .sd-review-date { font-size: 11px; }
.sd-reviews .sd-review-source { font-size: 10px; }
.sd-reviews .sd-slider-nav { gap: .6rem; margin-top: 1.35rem; }
.sd-reviews .sd-slider-nav button { width: 42px; height: 42px; font-size: 13px; }
@media (max-width: 767.98px) {
    .sd-reviews.sd-section { padding: 3.75rem 0; }
}
@media (max-width: 575.98px) {
    .sd-reviews .text-center.mb-5 { margin-bottom: 1.35rem !important; }
    .sd-reviews .sd-rating-summary { margin-bottom: 1.1rem; }
    .sd-reviews .sd-rating-card { gap: .45rem; padding: .65rem .75rem; }
    .sd-reviews .sd-rating-note { flex: 1 1 100%; text-align: center; }
    .sd-reviews .sd-review-card { min-height: 0; padding: .95rem; }
    .sd-reviews .sd-review-text { margin: .65rem 0 .8rem; font-size: 12.5px; }
    .sd-reviews .sd-slider-nav { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-reviews .sd-review-card,
    .sd-reviews .sd-slider-nav button { transition: none; }
}


/* Contact validation and mobile overflow hardening */
.sd-contact-form .was-validated .form-control:invalid,
.sd-contact-form .was-validated .form-select:invalid {
    border-color: #ff3e3e;
    box-shadow: 0 0 0 .2rem rgba(255, 62, 62, .12), 0 0 14px rgba(255, 62, 62, .1);
}
.sd-contact-form .sd-brand-select.has-error .sd-brand-select-toggle,
.sd-contact-form .sd-brand-select-toggle[aria-invalid="true"] {
    border-color: #ff3e3e;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(255, 62, 62, .12), 0 0 14px rgba(255, 62, 62, .1);
}
.sd-contact-form .sd-form-msg.is-error { color: #ffaaa0; }
.sd-hero-title-outline { max-width: 100%; overflow-wrap: normal; word-break: normal; }
@media (max-width: 767.98px) {
    .sd-page-hero-content,
    .sd-contact-intro .row > *,
    .sd-contact-why .row > *,
    .sd-contact-main .sd-contact-wrap > * { min-width: 0; max-width: 100%; }
    .sd-page-hero-content { padding-inline: .75rem; }
    .sd-page-hero-title,
    .sd-page-hero-subtitle,
    .sd-contact-intro .sd-h2,
    .sd-contact-intro p,
    .sd-contact-why .sd-h2,
    .sd-contact-why p,
    .sd-contact-main .sd-h2,
    .sd-contact-main p { max-width: 100%; overflow-wrap: anywhere; }
    .sd-page-hero-title { font-size: clamp(34px, 11vw, 48px); line-height: 1.08; }
    .sd-page-hero-eyebrow { max-width: 100%; flex-wrap: wrap; justify-content: center; letter-spacing: 1.2px; text-align: center; }
    .sd-page-hero-subtitle { font-size: 14px; line-height: 1.55; }
    .sd-hero-title-outline { font-size: clamp(30px, 9vw, 40px); line-height: 1.15; letter-spacing: -.02em; }
    .sd-contact-form .d-flex { align-items: stretch !important; }
    .sd-contact-form .d-flex .sd-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
@media (max-width: 575.98px) {
    .sd-contact-form .d-flex { gap: .65rem !important; }
    .sd-contact-form .sd-form-msg { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-contact-form .form-control,
    .sd-contact-form .form-select,
    .sd-contact-form .sd-brand-select-toggle { transition: none; }
}


/* Mobile layout hardening for grouped hero text and contact content */
.sd-hero-title-outline .sd-outline-word {
    display: inline;
    white-space: normal;
}
@media (max-width: 767.98px) {
    .sd-hero-title-outline { overflow-wrap: normal; }
    .sd-contact-intro .row,
    .sd-contact-why .row { width: 100%; margin-inline: 0; }
    .sd-contact-intro .row > [class*="col-"],
    .sd-contact-why .row > [class*="col-"] { min-width: 0; padding-inline: .75rem; }
    .sd-contact-intro .sd-h2,
    .sd-contact-why .sd-h2 { font-size: clamp(27px, 8vw, 36px); line-height: 1.15; letter-spacing: -.025em; }
}


/* Final mobile containment pass — prevent clipped text and controls */
@media (max-width: 767.98px) {
    main .row > [class*="col-"],
    main .container,
    main .container-fluid { min-width: 0; max-width: 100%; }
    .sd-hero .col-lg-7,
    .sd-hero .sd-hero-phone-column { min-width: 0; width: 100%; max-width: 100%; }
    .sd-hero-sub {
        display: block;
        max-width: 100%;
        font-size: 13px;
        letter-spacing: 1px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }
    .sd-hero-sub::before {
        display: inline-block;
        vertical-align: middle;
        margin-right: .45rem;
    }
    .sd-hero-title-outline {
        width: 100%;
        max-width: 100%;
        text-wrap: wrap;
        overflow-wrap: normal;
    }
    .sd-contact-intro .row,
    .sd-contact-why .row { max-width: 100%; }
    .sd-contact-intro p,
    .sd-contact-why p,
    .sd-contact-main p { overflow-wrap: anywhere; }
    main .sd-btn { max-width: 100%; }
}


/* Final 390px mobile fit pass */
@media (max-width: 575.98px) {
    .sd-hero-title-outline { font-size: clamp(28px, 7.8vw, 34px); line-height: 1.12; letter-spacing: -.045em; }
    .sd-hero-sub { padding-inline: .5rem; font-size: 11px; letter-spacing: .55px; }
    .sd-contact-intro .container,
    .sd-contact-why .container,
    .sd-contact-main .container { padding-inline: 1rem; }
    .sd-contact-intro .row > [class*="col-"],
    .sd-contact-why .row > [class*="col-"] { padding-inline: .25rem; }
}


/* Mobile hero width guard for narrow and emulated viewports */
@media (max-width: 767.98px) {
    .sd-hero .container,
    .sd-hero .row,
    .sd-hero .col-lg-7 { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }
    .sd-hero-title-outline {
        display: block;
        inline-size: 100%;
        max-inline-size: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        text-align: center;
    }
}


/* Mobile hero readability and viewport-fit correction */
@media (max-width: 575.98px) {
    .sd-hero-title-outline { font-size: clamp(25px, 7vw, 30px); line-height: 1.16; letter-spacing: -.035em; }
    .sd-hero-lead,
    .sd-hero-proof,
    .sd-hero p.lead { width: 100%; max-width: 100%; overflow-wrap: anywhere; }
}


@media (max-width: 575.98px) {
    .sd-hero-title-outline { font-size: clamp(24px, 6.6vw, 28px); padding-inline: .25rem; letter-spacing: -.04em; }
}


/* Stable picture wrappers for optimized image delivery */
.sd-port-card-media picture,
.sd-blog-cover.sd-blog-cover--featured,
.sd-case-study-hero-media picture,
.sd-case-study-gallery-item picture { display: block; width: 100%; line-height: 0; }

/* Fresh Brand Identity visual — replaces the old single-letter board */
.sd-brand-identity-visual { position: relative; min-height: 390px; overflow: hidden; padding: 1rem; border: 1px solid rgba(255, 118, 62, .38); border-radius: 23px; background: radial-gradient(circle at 20% 20%, rgba(255, 62, 62, .12), transparent 34%), radial-gradient(circle at 80% 78%, rgba(255, 118, 62, .14), transparent 30%), linear-gradient(145deg, var(--navy-mid), var(--navy-dark)); box-shadow: 0 25px 60px rgba(0, 0, 0, .3); }
.sd-brand-identity-visual::before { position: absolute; inset: 0; content: ''; pointer-events: none; border: 1px solid rgba(255, 173, 141, .08); border-radius: inherit; }
.sd-brand-identity-grid { position: absolute; inset: 0; opacity: .24; pointer-events: none; background-image: linear-gradient(rgba(255, 118, 62, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 118, 62, .13) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 78%); }
.sd-brand-identity-header, .sd-brand-identity-footer { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-brand-identity-header code, .sd-brand-identity-footer code { color: var(--secondary); font: inherit; }
.sd-brand-status { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.sd-brand-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(255, 62, 62, .8); }
.sd-brand-identity-stage { position: relative; z-index: 2; min-height: 315px; }
.sd-brand-orbit { position: absolute; border: 1px dashed rgba(255, 118, 62, .25); border-radius: 50%; pointer-events: none; }
.sd-brand-orbit--one { top: 9%; left: 9%; width: 68%; height: 72%; transform: rotate(-18deg); }
.sd-brand-orbit--two { top: 18%; left: 22%; width: 53%; height: 53%; border-color: rgba(255, 62, 62, .28); transform: rotate(30deg); }
.sd-brand-logo-card { position: absolute; z-index: 3; top: 20%; left: 9%; display: flex; flex-direction: column; justify-content: center; width: 58%; min-height: 185px; padding: 1.2rem 1.25rem; border: 1px solid rgba(255, 173, 141, .42); border-radius: 15px; background: linear-gradient(145deg, rgba(4, 5, 10, .92), rgba(14, 17, 31, .82)); box-shadow: 16px 20px 35px rgba(0, 0, 0, .3), 0 0 0 6px rgba(255, 62, 62, .04); transform: rotate(-4deg); }
.sd-brand-card-label { margin-bottom: 1.25rem; color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.3px; }
.sd-brand-logo-card img { display: block; width: min(170px, 100%); height: auto; }
.sd-brand-card-line { display: block; width: 72%; height: 1px; margin: 1.1rem 0 .65rem; background: linear-gradient(90deg, var(--accent), transparent); }
.sd-brand-logo-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.sd-brand-type-card { position: absolute; z-index: 4; top: 12%; right: 3%; display: grid; gap: .18rem; min-width: 105px; padding: .8rem; border: 1px solid rgba(255, 118, 62, .3); border-radius: 11px; background: rgba(14, 17, 31, .86); box-shadow: 0 16px 30px rgba(0, 0, 0, .25); transform: rotate(7deg); }
.sd-brand-type-card strong { color: var(--off-white); font-family: var(--font-display); font-size: 34px; line-height: .8; letter-spacing: -.08em; }
.sd-brand-type-card span { margin-top: .45rem; color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: .8px; }
.sd-brand-type-card em { color: var(--muted); font-family: var(--font-mono); font-size: 7px; font-style: normal; }
.sd-brand-application-card { position: absolute; z-index: 4; right: 5%; bottom: 7%; display: grid; gap: .42rem; min-width: 145px; padding: .75rem .85rem; border-left: 2px solid var(--accent); background: rgba(4, 5, 10, .78); box-shadow: 0 15px 28px rgba(0, 0, 0, .28); transform: rotate(-3deg); }
.sd-brand-application-card span, .sd-brand-identity-footer > span { color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; }
.sd-brand-application-card b { color: var(--off-white); font-size: 11px; font-weight: 600; }
.sd-brand-application-card i { display: inline-block; width: 20px; height: 4px; margin-right: .25rem; border-radius: 999px; background: var(--accent); }
.sd-brand-application-card i:nth-of-type(2) { background: var(--secondary); }
.sd-brand-application-card i:nth-of-type(3) { background: var(--off-white); opacity: .7; }
.sd-brand-identity-footer { padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.sd-brand-swatch-row { display: flex; align-items: center; gap: .28rem; margin-left: auto; }
.sd-brand-swatch-row i { display: block; width: 15px; height: 15px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; background: var(--accent); }
.sd-brand-swatch-row i:nth-child(2) { background: var(--secondary); }
.sd-brand-swatch-row i:nth-child(3) { background: var(--off-white); }
.sd-brand-swatch-row i:nth-child(4) { background: var(--navy-dark); }
@media (max-width: 767.98px) {
    .sd-brand-identity-visual { min-height: 345px; }
    .sd-brand-identity-stage { min-height: 270px; }
}
@media (max-width: 575.98px) {
    .sd-brand-identity-visual { min-height: 310px; padding: .75rem; border-radius: 16px; }
    .sd-brand-identity-header, .sd-brand-identity-footer { font-size: 7px; }
    .sd-brand-identity-header code { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sd-brand-identity-stage { min-height: 245px; }
    .sd-brand-logo-card { top: 21%; left: 2%; width: 68%; min-height: 150px; padding: .85rem; }
    .sd-brand-card-label { margin-bottom: .85rem; font-size: 7px; }
    .sd-brand-logo-card img { width: 135px; }
    .sd-brand-card-line { margin: .8rem 0 .5rem; }
    .sd-brand-logo-card small { font-size: 8px; }
    .sd-brand-type-card { top: 9%; right: 0; min-width: 88px; padding: .6rem; }
    .sd-brand-type-card strong { font-size: 28px; }
    .sd-brand-type-card span { font-size: 7px; }
    .sd-brand-type-card em { font-size: 6px; }
    .sd-brand-application-card { right: 1%; bottom: 7%; min-width: 125px; padding: .6rem; }
    .sd-brand-application-card b { font-size: 9px; }
    .sd-brand-application-card span, .sd-brand-identity-footer > span { font-size: 7px; }
    .sd-brand-swatch-row i { width: 12px; height: 12px; }
}

/* Compact Contact form field layout */
.sd-contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: .15rem; align-items: start; }
.sd-contact-form-grid > .sd-contact-form-field--full { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
    .sd-contact-form-grid { grid-template-columns: 1fr; column-gap: 0; }
    .sd-contact-form-grid > .sd-contact-form-field--full { grid-column: auto; }
}

/* Contact mobile animation containment: prevent pre-reveal transforms from widening the viewport */
@media (max-width: 767.98px) {
    .sd-contact-main [data-sd-anim] { max-width: 100%; transform: none !important; }
}

/* Contact Us — Beam Variants for How I Can Help cards */
.sd-contact-beam-card { position: relative; min-width: 0; min-height: 188px; padding: 0; border: 0; border-radius: 0; background: transparent; outline: 0; }
.sd-contact-beam-inner { position: relative; isolation: isolate; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: transparent; clip-path: polygon(0 0, calc(50% - 34px) 0, calc(50% - 24px) 11px, calc(50% + 24px) 11px, calc(50% + 34px) 0, 100% 0, 100% 100%, calc(50% + 34px) 100%, calc(50% + 24px) calc(100% - 11px), calc(50% - 24px) calc(100% - 11px), calc(50% - 34px) 100%, 0 100%); box-shadow: 0 20px 45px rgba(0, 0, 0, .3), 0 0 14px rgba(255, 62, 62, .09); }
.sd-contact-beam-inner::before { position: absolute; z-index: 0; inset: 0; content: ''; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 69%, rgba(255, 118, 62, .35) 74%, #ffad8d 79%, #fff 82%, #ff763e 86%, transparent 92%); clip-path: inherit; filter: drop-shadow(0 0 5px rgba(255, 62, 62, .9)) drop-shadow(0 0 15px rgba(255, 118, 62, .34)); animation: sdContactBeamSpin 4.8s linear infinite; }
.sd-contact-beam-inner::after { position: absolute; z-index: 1; inset: 2px; content: ''; pointer-events: none; background: linear-gradient(145deg, #190a12 0%, #090a14 54%, #120b12 100%); clip-path: polygon(0 0, calc(50% - 32px) 0, calc(50% - 22px) 9px, calc(50% + 22px) 9px, calc(50% + 32px) 0, 100% 0, 100% 100%, calc(50% + 32px) 100%, calc(50% + 22px) calc(100% - 9px), calc(50% - 22px) calc(100% - 9px), calc(50% - 32px) 100%, 0 100%); }
.sd-contact-beam-bg, .sd-contact-beam-glare, .sd-contact-beam-body { position: relative; z-index: 2; }
.sd-contact-beam-bg { position: absolute; top: 18%; right: 8%; color: rgba(255, 62, 62, .06); font-size: 92px; line-height: 1; transform: rotate(-12deg); }
.sd-contact-beam-glare { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 80% 20%, rgba(255, 173, 141, .16), transparent 32%); transition: opacity .35s ease; }
.sd-contact-beam-body { display: flex; height: 100%; min-height: 188px; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1.35rem; }
.sd-contact-beam-card .sd-contact-service-icon { position: relative; z-index: 3; width: 48px; height: 48px; margin-bottom: .9rem; border: 1px solid rgba(255, 118, 62, .25); border-radius: 13px; color: var(--accent); background: var(--accent-soft); box-shadow: 0 10px 24px rgba(255, 62, 62, .1); }
.sd-contact-beam-card h3 { position: relative; z-index: 3; max-width: 220px; margin: 0; color: var(--off-white); font-size: 16px; line-height: 1.3; }
.sd-contact-beam-caption { position: relative; z-index: 3; display: flex; align-items: center; gap: .45rem; margin-top: .85rem; color: var(--secondary); font-family: var(--font-mono); font-size: 8px; letter-spacing: .8px; opacity: .78; }
.sd-contact-beam-caption i { font-size: 9px; transition: transform .25s ease; }
.sd-contact-beam-card:hover .sd-contact-beam-inner,
.sd-contact-beam-card:focus-visible .sd-contact-beam-inner { box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 22px rgba(255, 62, 62, .2), 0 0 45px rgba(255, 118, 62, .12); }
.sd-contact-beam-card:hover .sd-contact-beam-glare,
.sd-contact-beam-card:focus-visible .sd-contact-beam-glare { opacity: 1; }
.sd-contact-beam-card:hover .sd-contact-beam-caption i,
.sd-contact-beam-card:focus-visible .sd-contact-beam-caption i { transform: translateX(3px); }
.sd-contact-beam-card:nth-child(2) .sd-contact-beam-inner::before { background: conic-gradient(from 90deg, transparent 0 64%, rgba(255, 118, 62, .35) 71%, #fff 77%, #ff3e3e 84%, transparent 91%); animation-duration: 5.2s; }
.sd-contact-beam-card:nth-child(3) .sd-contact-beam-inner::before { background: conic-gradient(from 180deg, transparent 0 70%, rgba(255, 118, 62, .35) 76%, #ffad8d 81%, #fff 85%, transparent 92%); animation-duration: 5.7s; }
.sd-contact-beam-card:nth-child(4) .sd-contact-beam-inner::before { animation-duration: 4.4s; }
.sd-contact-beam-card:nth-child(5) .sd-contact-beam-inner::before { animation-duration: 6.1s; }
.sd-contact-beam-card:nth-child(6) .sd-contact-beam-inner::before { animation-duration: 5.5s; }
.sd-contact-beam-card:nth-child(7) .sd-contact-beam-inner::before { animation-duration: 4.9s; }
.sd-contact-beam-card:nth-child(8) .sd-contact-beam-inner::before { animation-duration: 6.2s; }
.sd-contact-beam-card:nth-child(9) .sd-contact-beam-inner::before { animation-duration: 5.1s; }
.sd-contact-beam-card:nth-child(10) .sd-contact-beam-inner::before { animation-duration: 4.6s; }
@keyframes sdContactBeamSpin { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) {
    .sd-contact-beam-card, .sd-contact-beam-body { min-height: 150px; }
    .sd-contact-beam-body { padding: 1.05rem; }
    .sd-contact-beam-card .sd-contact-service-icon { width: 42px; height: 42px; margin-bottom: .65rem; }
    .sd-contact-beam-card h3 { max-width: 250px; font-size: 15px; }
    .sd-contact-beam-caption { margin-top: .55rem; font-size: 7px; }
    .sd-contact-beam-bg { font-size: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-contact-beam-inner::before { animation: none; }
    .sd-contact-beam-card:hover .sd-contact-beam-caption i,
    .sd-contact-beam-card:focus-visible .sd-contact-beam-caption i { transform: none; }
}

/* Contact Beam card equal-size pass */
.sd-contact-service-grid { grid-auto-rows: minmax(188px, 1fr); align-items: stretch; }
.sd-contact-beam-card, .sd-contact-beam-inner, .sd-contact-beam-body { height: 100%; }
.sd-contact-beam-card h3 { display: flex; align-items: flex-start; min-height: 42px; }
.sd-contact-beam-caption { margin-top: auto; }
@media (max-width: 575.98px) {
    .sd-contact-service-grid { grid-auto-rows: 150px; }
    .sd-contact-beam-card, .sd-contact-beam-body { min-height: 0; }
    .sd-contact-beam-card h3 { min-height: 40px; }
}

/* Contact Beam width consistency pass */
.sd-contact-service-grid > .sd-contact-beam-card { width: 100%; max-width: none; min-width: 0; justify-self: stretch; }
.sd-contact-beam-card > .sd-contact-beam-inner { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.sd-contact-beam-body { width: 100%; box-sizing: border-box; }
@media (max-width: 767.98px) {
    .sd-contact-service-grid > .sd-contact-beam-card { width: 100%; }
}

/* Contact intro — subtle branded neon heading shapes */
.sd-contact-heading-decor { position: relative; isolation: isolate; max-width: 100%; padding: .35rem 0 .25rem; }
.sd-contact-heading-decor > .sd-kicker,
.sd-contact-heading-decor > .sd-h2 { position: relative; z-index: 2; }
.sd-contact-neon-shape { position: absolute; z-index: 1; display: block; pointer-events: none; }
.sd-contact-neon-shape--ring { top: -1.25rem; left: -1.1rem; width: 92px; height: 92px; border: 1px solid rgba(255, 62, 62, .36); border-radius: 50%; box-shadow: 0 0 18px rgba(255, 62, 62, .12), inset 0 0 16px rgba(255, 118, 62, .07); animation: sdContactNeonFloat 6s ease-in-out infinite; }
.sd-contact-neon-shape--ring::after { position: absolute; top: 12px; right: 10px; width: 7px; height: 7px; content: ''; border-radius: 50%; background: var(--secondary); box-shadow: 0 0 12px rgba(255, 118, 62, .8); }
.sd-contact-neon-shape--diamond { top: 1.1rem; right: 17%; width: 17px; height: 17px; border: 1px solid rgba(255, 173, 141, .65); transform: rotate(45deg); box-shadow: 0 0 12px rgba(255, 118, 62, .25); animation: sdContactNeonDrift 5s ease-in-out infinite; }
.sd-contact-neon-shape--dot { right: 5%; bottom: 1rem; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(255, 62, 62, .8); animation: sdContactNeonPulse 3.2s ease-in-out infinite; }
.sd-contact-neon-shape--line { right: 2%; bottom: 1.35rem; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--secondary)); opacity: .65; transform: rotate(-18deg); }
@keyframes sdContactNeonFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(7px, -5px, 0) rotate(8deg); } }
@keyframes sdContactNeonDrift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(45deg); } 50% { transform: translate3d(-5px, 6px, 0) rotate(135deg); } }
@keyframes sdContactNeonPulse { 0%, 100% { opacity: .42; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.25); } }
@media (max-width: 767.98px) {
    .sd-contact-heading-decor { padding-block: .2rem; }
    .sd-contact-neon-shape--ring { top: -1rem; left: -.55rem; width: 72px; height: 72px; opacity: .72; }
    .sd-contact-neon-shape--diamond { top: 1rem; right: 8%; width: 13px; height: 13px; opacity: .72; }
    .sd-contact-neon-shape--line { right: 0; bottom: .7rem; width: 38px; }
    .sd-contact-neon-shape--dot { right: 1%; bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-contact-neon-shape--ring,
    .sd-contact-neon-shape--diamond,
    .sd-contact-neon-shape--dot { animation: none; }
}

/* Contact intro — branded neon badge replacement */
.sd-contact-neon-badge { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; margin: 0 0 .8rem; overflow: hidden; padding: .48rem .7rem .48rem .58rem; border: 1px solid transparent; border-radius: 999px; color: var(--secondary); background: linear-gradient(var(--navy-dark), var(--navy-dark)) padding-box, linear-gradient(100deg, rgba(255, 62, 62, .82), rgba(255, 173, 141, .86), rgba(255, 118, 62, .3)) border-box; box-shadow: 0 0 0 4px rgba(255, 62, 62, .04), 0 0 22px rgba(255, 118, 62, .12); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.2; text-transform: uppercase; }
.sd-contact-neon-badge::before { position: absolute; top: -1px; bottom: -1px; left: -35%; width: 28%; content: ''; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 173, 141, .95), transparent); filter: blur(2px); opacity: .8; transform: skewX(-18deg); animation: sdContactBadgeBeam 4.4s ease-in-out infinite; }
.sd-contact-neon-badge-text, .sd-contact-neon-badge-index { position: relative; z-index: 1; }
.sd-contact-neon-badge-text { overflow-wrap: anywhere; }
.sd-contact-neon-badge-index { padding-left: .55rem; border-left: 1px solid rgba(255, 118, 62, .38); color: var(--accent); font-size: 8px; letter-spacing: .8px; }
.sd-contact-neon-badge-dot { position: relative; z-index: 1; display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(255, 62, 62, .95), 0 0 18px rgba(255, 118, 62, .48); }
.sd-contact-neon-badge:hover { box-shadow: 0 0 0 4px rgba(255, 62, 62, .06), 0 0 28px rgba(255, 118, 62, .2); }
@keyframes sdContactBadgeBeam { 0%, 18% { left: -35%; opacity: 0; } 35% { opacity: .85; } 72%, 100% { left: 125%; opacity: 0; } }
@media (max-width: 575.98px) {
    .sd-contact-neon-badge { gap: .42rem; margin-bottom: .65rem; padding: .44rem .58rem .44rem .5rem; font-size: 8px; letter-spacing: .85px; }
    .sd-contact-neon-badge-index { padding-left: .42rem; font-size: 7px; }
    .sd-contact-neon-badge-dot { width: 6px; height: 6px; flex-basis: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-contact-neon-badge::before { animation: none; opacity: .2; }
}

/* Global sd-kicker — responsive branded neon badge treatment */
.sd-kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; max-width: 100%; margin: 0 0 .7rem; overflow: hidden; padding: .42rem .72rem; border: 1px solid transparent; border-radius: 999px; color: var(--accent); background: linear-gradient(var(--navy-dark), var(--navy-dark)) padding-box, linear-gradient(100deg, rgba(255, 62, 62, .78), rgba(255, 173, 141, .78), rgba(255, 118, 62, .3)) border-box; box-shadow: 0 0 0 3px rgba(255, 62, 62, .035), 0 0 18px rgba(255, 118, 62, .1); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; line-height: 1.25; text-transform: uppercase; text-wrap: balance; }
.sd-kicker::before { position: absolute; top: -1px; bottom: -1px; left: -35%; width: 26%; content: ''; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 173, 141, .92), transparent); filter: blur(2px); opacity: .76; transform: skewX(-18deg); animation: sdGlobalKickerBeam 5.2s ease-in-out infinite; }
.sd-kicker::after { width: 6px; height: 6px; flex: 0 0 6px; margin-right: .48rem; content: ''; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(255, 62, 62, .82), 0 0 16px rgba(255, 118, 62, .35); }
@keyframes sdGlobalKickerBeam { 0%, 18% { left: -35%; opacity: 0; } 35% { opacity: .78; } 72%, 100% { left: 125%; opacity: 0; } }
@media (max-width: 767.98px) {
    .sd-kicker { max-width: 100%; padding: .38rem .58rem; font-size: 8px; letter-spacing: 1.15px; line-height: 1.35; }
    .sd-kicker::after { width: 5px; height: 5px; flex-basis: 5px; margin-right: .38rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-kicker::before { animation: none; opacity: .16; }
}

/* Global sd-kicker mobile containment */
@media (max-width: 767.98px) {
    main { overflow-x: clip; }
    .sd-kicker { max-width: calc(100vw - 2rem); flex-wrap: wrap; overflow-wrap: anywhere; white-space: normal; }
}

/* Template picture wrappers — preserve media box dimensions during loading */
.sd-blog-thumb picture,
.sd-blog-thumb picture img,
.sd-port-item-media picture,
.sd-port-item-media picture img,
.sd-pune-feature-card picture,
.sd-pune-feature-card picture img { display: block; width: 100%; }
.sd-blog-thumb picture img,
.sd-port-item-media picture img,
.sd-pune-feature-card picture img { height: 100%; object-fit: cover; }

/* Footer — lightweight static branded geometry (no canvas or continuous animation) */
.sd-footer-hexagons {
    position: absolute;
    z-index: 0 !important;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='114' viewBox='0 0 132 114'%3E%3Cpath d='M33 1h66l32 56-32 56H33L1 57 33 1Z' fill='none' stroke='%23ff763e' stroke-opacity='.3' stroke-width='1'/%3E%3Cpath d='M33 20h66l22 37-22 37H33L11 57 33 20Z' fill='none' stroke='%23ff3e3e' stroke-opacity='.1' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 132px 114px;
    background-position: 14px 12px;
    background-repeat: repeat;
    background-blend-mode: screen;
    mix-blend-mode: screen;
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
}
.sd-footer-hexagons::after {
    position: absolute;
    top: 16%;
    right: 13%;
    width: 180px;
    height: 180px;
    content: '';
    border: 1px solid rgba(255, 118, 62, .3);
    clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
    filter: drop-shadow(0 0 14px rgba(255, 62, 62, .14));
}
.sd-footer .container, .sd-footer .sd-footer-bottom { position: relative; z-index: 1; }
@media (max-width: 767.98px) {
    .sd-footer-hexagons { opacity: .15; background-size: 100px 87px; background-position: 8px 10px; }
    .sd-footer-hexagons::after { top: 10%; right: -35px; width: 120px; height: 120px; border-color: rgba(255, 118, 62, .24); }
}

/* Mobile performance: defer below-the-fold home sections without changing layout content */
@media (max-width: 767.98px) {
    body[data-sd-page="home"] main#content > section:not(.sd-hero) {
        content-visibility: auto;
        contain-intrinsic-size: 720px;
    }
}


/* Optional Google reCAPTCHA v2 checkbox — only rendered when enabled in Admin Security */
.sd-recaptcha-wrap {
    width: 100%;
    min-height: 78px;
    margin: 1rem 0;
    padding: .7rem .8rem .55rem;
    overflow: hidden;
    border: 1px solid rgba(255, 118, 62, .2);
    border-radius: 10px;
    background: rgba(255, 62, 62, .035);
}
.sd-recaptcha-wrap .g-recaptcha {
    min-height: 78px;
    transform-origin: left top;
}
.sd-recaptcha-note {
    display: block;
    margin-top: .1rem;
    color: rgba(255, 255, 255, .5);
    font-size: .68rem;
}
@media (max-width: 360px) {
    .sd-recaptcha-wrap .g-recaptcha { transform: scale(.88); }
    .sd-recaptcha-wrap { min-height: 72px; padding-left: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-recaptcha-wrap { transition: none; }
}


/* Global privacy-choice banner */
.sd-cookie-banner[hidden] { display: none !important; }
.sd-cookie-banner {
    position: fixed;
    z-index: 2100;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    max-width: 1120px;
    margin-inline: auto;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(255, 118, 62, .38);
    border-radius: 14px;
    color: #f8fafc;
    background: linear-gradient(125deg, rgba(4, 5, 10, .98), rgba(35, 10, 12, .98));
    box-shadow: 0 18px 55px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 62, 62, .08), 0 0 26px rgba(255, 62, 62, .12);
    animation: sdCookieBannerIn .35s cubic-bezier(.16, 1, .3, 1) both;
}
.sd-cookie-banner::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(180deg, #ff3e3e, #ff763e);
    content: '';
}
.sd-cookie-copy { min-width: 0; }
.sd-cookie-kicker {
    display: block;
    margin-bottom: .25rem;
    color: #ffad8d;
    font: 700 .66rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sd-cookie-copy h2 { margin: 0 0 .2rem; color: #fff; font-size: 1rem; }
.sd-cookie-copy p { max-width: 680px; margin: 0; color: rgba(255, 255, 255, .7); font-size: .78rem; line-height: 1.5; }
.sd-cookie-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .55rem; flex: 0 0 auto; }
.sd-cookie-more, .sd-cookie-settings-link { color: #ffad8d; font-size: .76rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sd-cookie-more:hover, .sd-cookie-more:focus-visible, .sd-cookie-settings-link:hover, .sd-cookie-settings-link:focus-visible { color: #fff; }
.sd-cookie-btn {
    min-height: 38px;
    padding: .55rem .8rem;
    border: 1px solid rgba(255, 118, 62, .42);
    border-radius: 7px;
    color: #fff;
    background: rgba(255, 255, 255, .04);
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
}
.sd-cookie-btn:hover, .sd-cookie-btn:focus-visible { border-color: #ffad8d; color: #fff; background: rgba(255, 62, 62, .14); }
.sd-cookie-btn--accept { border-color: transparent; background: linear-gradient(120deg, #ff3e3e, #ff763e); }
.sd-cookie-btn--accept:hover, .sd-cookie-btn--accept:focus-visible { background: linear-gradient(120deg, #ff763e, #ffad8d); }
.sd-cookie-btn:focus-visible, .sd-cookie-settings-link:focus-visible, .sd-cookie-more:focus-visible { outline: 2px solid #ffad8d; outline-offset: 3px; }
.sd-cookie-settings-link { padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }
@keyframes sdCookieBannerIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767.98px) {
    .sd-cookie-banner { right: .65rem; bottom: .65rem; left: .65rem; display: block; padding: .95rem 1rem; }
    .sd-cookie-copy p { font-size: .74rem; }
    .sd-cookie-actions { justify-content: flex-start; margin-top: .8rem; }
    .sd-cookie-more { width: 100%; }
    .sd-cookie-btn { flex: 1 1 auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-cookie-banner { animation: none; }
}


/* Homepage performance guard: preserve the H1 sparkle while stopping non-essential animated paint. */
[data-sd-page="home"] .sd-btn,
[data-sd-page="home"] .sd-about-circle-svg,
[data-sd-page="home"] .sd-about-goal-seal-ring,
[data-sd-page="home"] .sd-success-orb--a,
[data-sd-page="home"] .sd-success-orb--b,
[data-sd-page="home"] .sd-scroll-cue-dot,
[data-sd-page="home"] .sd-services-v2-card::before,
[data-sd-page="home"] .sd-portfolio .sd-tilt-inner::before { animation: none !important; }