/* =========================================================
   D15 Designs — Theme stylesheet
   Modernized recreation of the Squarespace site.
   ========================================================= */

/* Accessibility — visually hide skip link until focused */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--c-bg-dark);
    color: #fff;
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    display: block;
    font-weight: 700;
    height: auto;
    left: 12px;
    line-height: normal;
    padding: 14px 22px;
    text-decoration: none;
    top: 12px;
    width: auto;
    z-index: 100000;
    border-radius: 999px;
}

:root {
    --c-bg:        #ffffff;
    --c-bg-alt:    #f6f6f6;
    --c-bg-dark:   #0e0e0e;
    --c-bg-darker: #679DCF;
    --c-text:      #272727;
    --c-text-2:    #3e3e3e;
    --c-muted:     #757575;
    --c-line:      #e7e7e7;
    --c-accent:    #679DCF;
    --c-accent-2:  #4a82b8;
    --c-accent-soft:#e3eef8;

    --ff-sans:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ff-display: "Space Grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 22px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 6px 20px rgba(0,0,0,.08);
    --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.18);

    --container: 1240px;
    --gap: clamp(16px, 2.4vw, 28px);

    --nav-h: 84px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--ff-sans);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-accent); }

h1, h2, h3, h4 {
    font-family: var(--ff-display);
    color: var(--c-text);
    line-height: 1.1;
    margin: 0 0 .6em;
    letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }
p  { margin: 0 0 1em; color: var(--c-text-2); }
small { color: var(--c-muted); }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 36px);
}
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--alt   { background: var(--c-bg-alt); }
.section--dark  { background: var(--c-bg-dark); color: #e7e7e7; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: #c9c9c9; }

.eyebrow {
    display: inline-block;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 14px;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--r-pill);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
    line-height: 1;
    white-space: nowrap;
}
.btn--primary {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(103,157,207,.45);
}
.btn--primary:hover {
    background: var(--c-accent-2);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(103,157,207,.55);
}
.btn--ghost {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-text);
}
.btn--ghost:hover { background: var(--c-text); color: #fff; }
.btn--light {
    background: #fff;
    color: var(--c-text);
}
.btn--light:hover { background: var(--c-accent); color: #fff; }
.btn--lg { padding: 18px 34px; font-size: 1rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Header ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.site-header__inner {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.site-logo img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
}
.site-nav a {
    display: inline-block;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    font-weight: 500;
    font-size: .95rem;
    color: var(--c-text);
}
.site-nav a:hover, .site-nav .current-menu-item > a {
    color: var(--c-accent);
    background: var(--c-accent-soft);
}
.nav-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
    font-weight: 600;
    font-size: .9rem;
}
.nav-cart:hover { background: var(--c-accent); color: #fff; }
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--c-text);
    margin: 6px 0;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Hero ---- */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 12vw, 160px) 0 clamp(72px, 10vw, 140px);
    background: radial-gradient(1100px 600px at 85% -10%, rgba(103,157,207,.16), transparent 60%),
                radial-gradient(900px 500px at 0% 100%, rgba(14,14,14,.06), transparent 60%),
                #fff;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}
.hero h1 .accent {
    background: linear-gradient(120deg, var(--c-accent), var(--c-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
.hero__lede {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--c-text-2);
    max-width: 540px;
    margin-bottom: 32px;
}
.hero__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin-left: auto;
}
.hero__shape {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
    border-radius: 38% 62% 54% 46% / 52% 44% 56% 48%;
    animation: morph 14s ease-in-out infinite;
    box-shadow: var(--shadow-lg);
}
.hero__shape::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: inherit;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}
.hero__logo {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 60%;
    filter: brightness(0) invert(1);
    z-index: 2;
}
@keyframes morph {
    0%,100% { border-radius: 38% 62% 54% 46% / 52% 44% 56% 48%; }
    50%     { border-radius: 56% 44% 38% 62% / 44% 60% 40% 56%; }
}

/* ---- Service highlight grid ---- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 24px);
}
.svc-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 32px 28px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svc-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}
.svc-card .icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--c-accent-soft);
    display: grid; place-items: center;
    color: var(--c-accent);
    margin-bottom: 18px;
    font-size: 22px;
}
.svc-card h3 { margin-bottom: 8px; }
.svc-card p { font-size: .95rem; margin: 0; }

/* ---- Section header ---- */
.s-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); }
.s-head--left { text-align: left; margin-left: 0; }

/* ---- Clients ---- */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.client-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.client-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.client-card__media {
    aspect-ratio: 16/10;
    background: var(--c-bg-alt);
    overflow: hidden;
}
.client-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.client-card:hover .client-card__media img { transform: scale(1.04); }
.client-card__body {
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.client-card__name { font-family: var(--ff-display); font-weight: 600; }
.client-card__cta {
    color: var(--c-accent);
    font-weight: 600;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---- Quote ---- */
.quote {
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}
.quote__text {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 22px;
}
.quote__by { color: var(--c-accent); letter-spacing: .2em; font-size: .85rem; text-transform: uppercase; }

/* ---- Newsletter ---- */
.newsletter {
    background: var(--c-bg-alt);
    border-radius: var(--r-lg);
    padding: clamp(36px, 5vw, 64px);
    text-align: center;
}
.newsletter h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 8px; }
.newsletter p { color: var(--c-text-2); margin-bottom: 24px; }
.newsletter form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.newsletter input[type="email"] {
    flex: 1 1 240px;
    padding: 14px 18px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
    background: #fff;
    font-family: inherit;
    font-size: .95rem;
}
.newsletter input[type="email"]:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
}

/* ---- Footer ---- */
.site-footer {
    background: var(--c-bg-darker);
    color: rgba(255,255,255,.92);
    padding: clamp(48px, 7vw, 80px) 0 28px;
}
.site-footer p { color: rgba(255,255,255,.85); }
.site-footer__top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(28px, 4vw, 60px);
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,.22);
}
.site-footer h4 { color: #fff; margin-bottom: 16px; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: rgba(255,255,255,.92); transition: color .2s ease; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer img.brand { height: 40px; filter: brightness(0) invert(1); margin-bottom: 18px; }
.site-footer .btn--primary {
    background: #fff;
    color: var(--c-accent-2);
}
.site-footer .btn--primary:hover {
    background: var(--c-bg-dark);
    color: #fff;
}
.site-footer__bottom {
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: rgba(255,255,255,.78);
    flex-wrap: wrap;
    gap: 12px;
}

/* ---- Page hero ---- */
.page-hero {
    padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
    background: var(--c-bg-alt);
    text-align: center;
}
.page-hero h1 { margin-bottom: 16px; }
.page-hero p { max-width: 720px; margin: 0 auto; font-size: 1.1rem; color: var(--c-text-2); }

/* ---- Generic page content ---- */
.page-content { max-width: 820px; margin: 0 auto; }
.page-content p { font-size: 1.05rem; }

/* ---- Booking websites: feature lists ---- */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: clamp(36px, 6vw, 80px) 0;
    border-bottom: 1px solid var(--c-line);
}
.feature-row:nth-child(even) > .feature-row__media { order: -1; }
.feature-row__media {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-bg-alt);
    box-shadow: var(--shadow-md);
}
.feature-row__media img { width: 100%; }
.feature-row h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.feature-row ul {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
    display: grid;
    gap: 10px;
}
.feature-row li {
    position: relative;
    padding-left: 28px;
    color: var(--c-text-2);
}
.feature-row li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
}

/* ---- Pricing / service cards ---- */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
}
.price-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card.featured {
    background: var(--c-bg-dark);
    color: #fff;
    border-color: transparent;
}
.price-card.featured h3, .price-card.featured .price-card__price { color: #fff; }
.price-card.featured p { color: #c9c9c9; }
.price-card__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.price-card__price {
    font-family: var(--ff-display);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 6px 0 4px;
}
.price-card__price .unit { font-size: .9rem; color: var(--c-muted); font-weight: 500; margin-left: 4px; }
.price-card__price .strike { color: var(--c-muted); font-size: 1.1rem; text-decoration: line-through; margin-right: 8px; }
.price-card ul {
    list-style: none;
    margin: 22px 0 28px;
    padding: 0;
    display: grid;
    gap: 10px;
}
.price-card li {
    position: relative;
    padding-left: 26px;
    font-size: .95rem;
}
.price-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-accent);
    font-weight: 700;
}
.price-card .btn { margin-top: auto; align-self: flex-start; }

/* ---- Portfolio grid ---- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2vw, 28px);
}
.portfolio-card {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-bg-alt);
    position: relative;
    aspect-ratio: 4/3;
    display: block;
}
.portfolio-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.portfolio-card:hover img { transform: scale(1.05); }
.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.78) 100%);
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 22px 24px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.05rem;
}

/* ---- Contact ---- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: start;
}
.contact-info ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.contact-info li { padding-left: 32px; position: relative; color: var(--c-text-2); }
.contact-info li::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    box-shadow: inset 0 0 0 4px var(--c-accent);
}
.contact-form {
    background: #fff;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-sm);
}
.contact-form .row { display: grid; gap: 18px; }
.contact-form .row.cols-2 { grid-template-columns: 1fr 1fr; }
.contact-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    font-family: inherit;
    font-size: .95rem;
    background: #fff;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
}
.contact-form textarea { min-height: 140px; resize: vertical; }

/* ---- WooCommerce light overrides ---- */
.wc-main { padding: clamp(48px, 6vw, 80px) 0; }
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    padding: 12px 22px !important;
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-size: .85rem !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--c-accent-2) !important; }
.woocommerce ul.products li.product .price { color: var(--c-text) !important; font-family: var(--ff-display); font-weight: 700; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--c-accent) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--c-accent) !important; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .clients-grid, .portfolio-grid, .price-grid { grid-template-columns: repeat(2, 1fr); }
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { margin: 0 auto; }
    .feature-row { grid-template-columns: 1fr; }
    .feature-row:nth-child(even) > .feature-row__media { order: 0; }
    .site-footer__top { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .nav-toggle { display: block; }
    /* Slide-out anchored to the header bottom (accounts for announcement bar + shrink) */
    .site-header { position: sticky; }
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 18px 24px 24px;
        border-bottom: 1px solid var(--c-line);
        box-shadow: 0 12px 24px rgba(15,39,69,.1);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform .3s ease, opacity .25s ease;
        gap: 0;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
    }
    .nav-open .site-nav {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .site-nav ul { flex-direction: column; gap: 0; width: 100%; }
    .site-nav a { padding: 14px 12px; display: block; }
    .nav-cart { align-self: flex-start; margin-top: 8px; }
    .clients-grid, .portfolio-grid, .svc-grid { grid-template-columns: 1fr; }
    /* Force every price-grid to stack, beating inline grid-template-columns */
    .price-grid { grid-template-columns: 1fr !important; }
    /* The "build" price-card uses inline grid auto 1fr auto — stack vertically on mobile */
    .price-card[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        text-align: left !important;
        gap: 16px !important;
    }
    .price-card[style*="grid-template-columns"] > div:nth-child(2) {
        border: none !important;
        padding: 12px 0 !important;
        text-align: left !important;
        border-top: 1px solid rgba(255,255,255,.18) !important;
        border-bottom: 1px solid rgba(255,255,255,.18) !important;
    }
    .price-card[style*="grid-template-columns"] > div:nth-child(3) {
        align-items: flex-start !important;
    }
    /* Contact form 2-col rows stack */
    .contact-form .row.cols-2 { grid-template-columns: 1fr; }
    /* Stack any 2-up grids used inline on pricing pages */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    .site-footer__top { grid-template-columns: 1fr; }
}

/* =========================================================
   ENHANCED COMPONENTS
   ========================================================= */

/* ---- Stats strip ---- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 40px);
    text-align: center;
}
.stat__num {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(120deg, var(--c-accent), var(--c-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px;
}
.stat__label {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .8rem;
    color: var(--c-muted);
    font-weight: 600;
}
.section--dark .stat__label { color: #aaa; }

/* ---- Process steps ---- */
.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 32px);
    counter-reset: step;
}
.process__step {
    position: relative;
    padding: 36px 28px 28px;
    background: #fff;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-line);
    counter-increment: step;
}
.process__step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -18px;
    left: 28px;
    background: var(--c-accent);
    color: #fff;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .06em;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    box-shadow: 0 6px 14px rgba(103,157,207,.32);
}
.process__step h4 { margin-bottom: 8px; font-size: 1.15rem; }
.process__step p { margin: 0; font-size: .95rem; }
.section--dark .process__step {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}

/* ---- FAQ accordion ---- */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item {
    border-bottom: 1px solid var(--c-line);
}
.faq__q {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 22px 0;
    text-align: left;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq__q::after {
    content: "+";
    font-size: 1.6rem;
    color: var(--c-accent);
    transition: transform .25s ease;
    line-height: 1;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a {
    padding: 0 0 22px;
    color: var(--c-text-2);
    font-size: 1rem;
    line-height: 1.65;
}
.faq__a p:last-child { margin-bottom: 0; }

/* ---- Comparison table ---- */
.compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-line);
}
.compare th, .compare td {
    padding: 18px 22px;
    text-align: center;
    border-bottom: 1px solid var(--c-line);
    font-size: .95rem;
}
.compare thead th {
    background: var(--c-bg-alt);
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-text);
}
.compare tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--c-text);
    background: #fff;
}
.compare tr:last-child td, .compare tr:last-child th { border-bottom: 0; }
.compare .yes { color: var(--c-accent); font-weight: 700; font-size: 1.1rem; }
.compare .no  { color: #c5c5c5; font-size: 1.1rem; }
.compare .featured-col { background: var(--c-accent-soft); }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Integrations / logo wall ---- */
.integrations {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    align-items: center;
}
.integration {
    aspect-ratio: 2/1;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    padding: 14px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.integration:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.integration img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(.4); opacity: .85; }
.integration:hover img { filter: none; opacity: 1; }

/* ---- Testimonials ---- */
.testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 28px);
}
.testimonial {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.testimonial::before {
    content: "“";
    position: absolute;
    top: 8px;
    right: 22px;
    font-family: var(--ff-display);
    font-size: 5rem;
    line-height: 1;
    color: var(--c-accent-soft);
    font-weight: 700;
}
.testimonial__quote {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--c-text);
    margin: 0 0 22px;
    flex: 1;
}
.testimonial__by {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--c-line);
    padding-top: 18px;
}
.testimonial__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--c-bg-alt);
    display: grid; place-items: center;
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-accent);
}
.testimonial__name { font-weight: 600; font-size: .95rem; }
.testimonial__role { font-size: .82rem; color: var(--c-muted); }

/* ---- CTA banner ---- */
.cta-banner {
    background: linear-gradient(135deg, var(--c-bg-dark), #1a1a1a);
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(40px, 6vw, 72px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(103,157,207,.45), transparent 60%);
    pointer-events: none;
}
.cta-banner h2 { color: #fff; margin-bottom: 8px; }
.cta-banner p { color: #c9c9c9; margin-bottom: 0; }
.cta-banner .btn-row { justify-content: flex-end; position: relative; z-index: 2; }
@media (max-width: 720px) {
    .cta-banner { grid-template-columns: 1fr; text-align: center; }
    .cta-banner .btn-row { justify-content: center; }
}

/* ---- Pillar / split intro ---- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}
.split__media {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-bg-alt);
    box-shadow: var(--shadow-md);
    aspect-ratio: 4/3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split--reverse .split__media { order: 1; }
@media (max-width: 1024px) {
    .split, .split--reverse { grid-template-columns: 1fr; }
    .split--reverse .split__media { order: 0; }
}

/* ---- Process timeline (vertical for booking) ---- */
.timeline {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    padding-left: 36px;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--c-accent), var(--c-accent-soft));
}
.timeline__item {
    position: relative;
    padding-bottom: 32px;
}
.timeline__item::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
}
.timeline__item h4 {
    font-size: 1.1rem;
    margin-bottom: 6px;
}
.timeline__item p { margin: 0; color: var(--c-text-2); }

/* ---- Tag chips ---- */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
    color: var(--c-text-2);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tag--accent { background: var(--c-accent-soft); color: var(--c-accent-2); }

/* ---- Portfolio meta ---- */
.case-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    margin: 32px 0;
}
.case-meta dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 4px; }
.case-meta dd { margin: 0; font-family: var(--ff-display); font-weight: 600; }

/* ---- Pricing toggle (subscriptions) ---- */
.toggle-row {
    display: inline-flex;
    background: var(--c-bg-alt);
    padding: 4px;
    border-radius: var(--r-pill);
    margin-bottom: 32px;
}
.toggle-row button {
    border: 0;
    background: transparent;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--c-text-2);
    transition: background .2s ease, color .2s ease;
}
.toggle-row button.active {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(103,157,207,.32);
}

/* ---- Reveal-on-scroll ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Responsive overrides for new components */
@media (max-width: 1024px) {
    .stats, .process, .testimonials { grid-template-columns: repeat(2, 1fr); }
    .integrations { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
    .stats, .process, .testimonials { grid-template-columns: 1fr; }
    .integrations { grid-template-columns: repeat(3, 1fr); }
    .cta-banner .btn-row { flex-direction: column; }
    .cta-banner .btn { width: 100%; justify-content: center; }
    .case-meta { grid-template-columns: 1fr; }
}

/* =========================================================
   v1.3 — VISUAL POLISH PASS
   ========================================================= */

:root {
    --c-navy:      #0f2745;
    --c-navy-2:    #1a3a5c;
    --c-navy-3:    #2c5f93;
    --c-cream:     #faf7f2;
    --c-gold:      #d4a574;
    --c-accent-3:  #2c5f93;
    --grad-brand:  linear-gradient(135deg, #679DCF 0%, #4a82b8 50%, #2c5f93 100%);
    --grad-soft:   linear-gradient(180deg, #f6faff 0%, #ffffff 100%);
    --grad-mesh:   radial-gradient(at 12% 18%, rgba(103,157,207,.18) 0px, transparent 50%),
                   radial-gradient(at 88% 8%, rgba(74,130,184,.16) 0px, transparent 50%),
                   radial-gradient(at 76% 92%, rgba(212,165,116,.10) 0px, transparent 50%),
                   radial-gradient(at 14% 86%, rgba(44,95,147,.12) 0px, transparent 50%);
    --shadow-glow:    0 30px 80px -20px rgba(103,157,207,.45);
    --shadow-glow-2:  0 24px 60px -16px rgba(15,39,69,.35);
}

/* ---- Re-tone dark sections from pure black to brand navy ---- */
.section--dark { background: var(--c-navy); }
.cta-banner { background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-2) 100%); }

/* ---- Subtle noise texture overlay (paper-grain depth) ---- */
.noise::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/></svg>");
    mix-blend-mode: multiply;
    z-index: 0;
}
.noise > * { position: relative; z-index: 1; }

/* ---- Announcement bar ---- */
.announcement {
    background: var(--c-navy);
    color: #fff;
    text-align: center;
    font-size: .85rem;
    letter-spacing: .04em;
    padding: 10px 16px;
    position: relative;
    overflow: hidden;
}
.announcement::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-brand);
    opacity: .25;
    pointer-events: none;
}
.announcement a {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.5);
    margin-left: 6px;
    font-weight: 600;
    transition: border-color .2s ease;
}
.announcement a:hover { border-color: #fff; color: #fff; }
.announcement .pulse {
    display: inline-block;
    width: 8px; height: 8px;
    background: #d4a574;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 0 rgba(212,165,116,.7);
    animation: pulse 2.4s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(212,165,116,.7); }
    70%  { box-shadow: 0 0 0 14px rgba(212,165,116,0); }
    100% { box-shadow: 0 0 0 0 rgba(212,165,116,0); }
}

/* ---- Site header gloss ---- */
.site-header {
    background: rgba(255,255,255,.85);
    border-bottom: 1px solid rgba(15,39,69,.06);
}

/* ---- HERO 2.0 — layered browser mockup stack ---- */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 13vw, 170px) 0 clamp(72px, 11vw, 150px);
    background:
        radial-gradient(1200px 700px at 100% 0%, rgba(103,157,207,.20), transparent 60%),
        radial-gradient(900px 600px at -10% 100%, rgba(212,165,116,.14), transparent 55%),
        var(--grad-soft);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15,39,69,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,39,69,.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; }
.hero__copy { animation: fadeUp .9s .1s ease both; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* Layered mockup stack — replaces the morphing blob */
.hero__stack {
    position: relative;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 1 / 0.95;
    margin-left: auto;
    perspective: 1400px;
    animation: fadeUp 1s .25s ease both;
}
.mockup {
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(15,39,69,.35), 0 12px 30px -10px rgba(15,39,69,.18);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.mockup__bar {
    height: 28px;
    background: linear-gradient(180deg, #f6f6f6, #ececec);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-bottom: 1px solid #e3e3e3;
}
.mockup__bar::before, .mockup__bar::after {
    content: "";
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ddd;
    box-shadow: 16px 0 0 #ddd, 32px 0 0 #ddd;
}
.mockup__bar::after { display: none; }
.mockup__shot { display: block; width: 100%; height: calc(100% - 28px); object-fit: cover; object-position: top; }

.mockup--main {
    width: 78%;
    height: 70%;
    top: 8%;
    left: 12%;
    transform: rotate(-3deg);
    z-index: 3;
}
.mockup--back {
    width: 62%;
    height: 56%;
    top: 0;
    right: 0;
    transform: rotate(6deg);
    z-index: 1;
    opacity: .92;
}
.mockup--front {
    width: 50%;
    height: 44%;
    bottom: 0;
    left: 0;
    transform: rotate(-7deg);
    z-index: 2;
}
.hero__stack:hover .mockup--main  { transform: rotate(-1.5deg) translateY(-6px); }
.hero__stack:hover .mockup--back  { transform: rotate(8deg)    translateY(-4px); }
.hero__stack:hover .mockup--front { transform: rotate(-5deg)   translateY(-4px); }

/* Floating accent badges on the stack */
.hero__badge {
    position: absolute;
    background: #fff;
    border-radius: var(--r-pill);
    padding: 10px 16px;
    box-shadow: var(--shadow-md);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}
.hero__badge::before {
    content: "";
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 4px rgba(103,157,207,.18);
}
.hero__badge--1 { top: 6%; left: -4%; animation: float 6s ease-in-out infinite; }
.hero__badge--2 { bottom: 12%; right: -2%; animation: float 7s ease-in-out infinite reverse; }
.hero__badge--2::before { background: var(--c-gold); box-shadow: 0 0 0 4px rgba(212,165,116,.22); }
@keyframes float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
}

/* ---- Logo marquee ---- */
.marquee {
    position: relative;
    overflow: hidden;
    padding: 36px 0;
    background: var(--c-cream);
    border-top: 1px solid rgba(15,39,69,.06);
    border-bottom: 1px solid rgba(15,39,69,.06);
}
.marquee::before, .marquee::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--c-cream), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--c-cream), transparent); }
.marquee__track {
    display: flex;
    gap: 64px;
    animation: scroll 40s linear infinite;
    width: max-content;
    align-items: center;
}
.marquee__item {
    height: 48px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--c-navy);
    opacity: .55;
    transition: opacity .25s ease;
    letter-spacing: -.01em;
}
.marquee__item:hover { opacity: 1; }
.marquee__item img { height: 100%; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s; }
.marquee__item:hover img { filter: grayscale(0); opacity: 1; }
@keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ---- Section heading visual upgrades ---- */
.s-head h2 { letter-spacing: -0.025em; }
.s-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.s-head .eyebrow::before {
    content: "";
    width: 22px; height: 1px;
    background: var(--c-accent);
}

/* ---- SVG icon system (all service cards now use real icons) ---- */
.svc-card .icon {
    background: var(--grad-soft);
    border: 1px solid var(--c-line);
    width: 56px; height: 56px;
    transition: transform .25s ease, background .25s ease;
}
.svc-card:hover .icon {
    background: var(--grad-brand);
    transform: scale(1.08) rotate(-6deg);
}
.svc-card:hover .icon svg { stroke: #fff; }
.svc-card .icon svg { width: 26px; height: 26px; stroke: var(--c-accent); fill: none; stroke-width: 1.6; transition: stroke .25s ease; }

/* ---- Feature card with gradient border (used on web-design / brand-design) ---- */
.feature-card {
    position: relative;
    background: #fff;
    border-radius: var(--r-lg);
    padding: 32px;
    overflow: hidden;
    border: 1px solid var(--c-line);
    transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.feature-card:hover::before { transform: scaleX(1); }

/* ---- Glass cards for hero & mockup overlays ---- */
.glass {
    background: rgba(255,255,255,.78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255,255,255,.6);
}

/* ---- Animated counters (works with or without JS) ---- */
.stat__num { transition: opacity .8s ease; }
.stat--reveal .stat__num { opacity: 0; }
.stat--reveal.is-visible .stat__num { opacity: 1; }

/* ---- Section divider (curved bottom) ---- */
.divider-curve {
    position: relative;
    height: 80px;
    margin-top: -1px;
    background: var(--c-bg-alt);
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 60%, transparent 62%);
    mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 60%, transparent 62%);
}

/* ---- Recognition / awards strip ---- */
.recognition {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: center;
}
.recog__icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    display: grid; place-items: center;
    color: var(--c-accent);
}
.recog__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.recog h4 { font-size: .95rem; margin-bottom: 4px; }
.recog p  { font-size: .85rem; color: var(--c-muted); margin: 0; }

/* ---- Mockup row (used on web-design page) ---- */
.mockup-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    perspective: 1400px;
}
.mockup-row .mockup {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    transform: none;
    box-shadow: var(--shadow-md);
    transition: transform .35s ease, box-shadow .35s ease;
}
.mockup-row .mockup:nth-child(1) { transform: rotate(-2deg); }
.mockup-row .mockup:nth-child(3) { transform: rotate(2deg); }
.mockup-row .mockup:hover { transform: translateY(-8px) rotate(0deg); box-shadow: var(--shadow-lg); }

/* ---- Pill icon callouts (booking, services pages) ---- */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--c-accent-soft);
    color: var(--c-navy);
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid rgba(103,157,207,.25);
}
.pill svg { width: 14px; height: 14px; stroke: var(--c-accent); fill: none; stroke-width: 2; }

/* ---- Background pattern variant ---- */
.section--pattern {
    position: relative;
    background: var(--c-cream);
    overflow: hidden;
}
.section--pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(15,39,69,.08) 1px, transparent 0);
    background-size: 22px 22px;
    pointer-events: none;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.section--pattern > .container { position: relative; z-index: 1; }

/* ---- Mesh background variant for sections ---- */
.section--mesh {
    position: relative;
    background: #fff;
}
.section--mesh::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-mesh);
    pointer-events: none;
}
.section--mesh > .container { position: relative; z-index: 1; }

/* ---- Big number pull (used in industry sections) ---- */
.bignum {
    font-family: var(--ff-display);
    font-size: clamp(5rem, 12vw, 9rem);
    font-weight: 700;
    line-height: 0.85;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -.03em;
    margin-bottom: 12px;
}

/* ---- Improved testimonial (with star rating + brand-color quote) ---- */
.testimonial { transition: transform .3s ease, box-shadow .3s ease; }
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial::before {
    content: "“";
    color: var(--c-accent);
    opacity: .15;
    font-size: 6rem;
}
.testimonial__stars {
    display: flex;
    gap: 2px;
    color: var(--c-gold);
    margin-bottom: 14px;
    font-size: 1rem;
}
.testimonial__stars::before {
    content: "★ ★ ★ ★ ★";
    letter-spacing: 2px;
}
.testimonial__avatar {
    background: var(--grad-brand);
    color: #fff;
}

/* ---- Better client cards in clients-grid (more polish) ---- */
.client-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.client-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow); border-color: rgba(103,157,207,.3); }
.client-card__media {
    position: relative;
}
.client-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(15,39,69,.45));
    opacity: 0;
    transition: opacity .3s ease;
}
.client-card:hover .client-card__media::after { opacity: 1; }

/* ---- Page hero variant — big, gradient mesh, with breadcrumb ---- */
.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--c-cream);
    padding: clamp(80px, 11vw, 140px) 0 clamp(56px, 7vw, 90px);
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad-mesh);
    pointer-events: none;
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(15,39,69,.06) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
    pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 {
    background: linear-gradient(180deg, var(--c-text) 30%, var(--c-navy) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Breadcrumb styles removed in v2.4.3 — we no longer render breadcrumbs. */

/* ---- Buttons — icon variant + shadow (consolidated) ---- */
.btn {
    position: relative;
    /* overflow: visible so shadows / hover lift aren't clipped weirdly */
    overflow: visible;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---- Service price card upgrade ---- */
.price-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; position: relative; overflow: hidden; }
.price-card.featured {
    background: linear-gradient(155deg, var(--c-navy) 0%, var(--c-navy-2) 65%, var(--c-accent-3) 100%);
    box-shadow: var(--shadow-glow-2);
}
.price-card.featured::before {
    content: "";
    position: absolute;
    top: -60%;
    right: -20%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(212,165,116,.32), transparent 60%);
    pointer-events: none;
}
.price-card.featured .btn--primary {
    background: #fff;
    color: var(--c-navy);
    box-shadow: 0 8px 20px -8px rgba(255,255,255,.4);
}
.price-card.featured .btn--primary:hover { background: var(--c-cream); color: var(--c-navy); }
.price-card.featured li::before { color: var(--c-gold); }
.price-card .price-card__badge { background: var(--c-gold); color: var(--c-navy); }

/* ---- Service icons — stroke set ---- */
.s-icons { display: none; }

/* ---- Feature row visual upgrade ---- */
.feature-row__media {
    position: relative;
    box-shadow: var(--shadow-glow-2);
}
.feature-row__media::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: var(--r-lg);
    background: var(--grad-brand);
    z-index: -1;
    opacity: 0;
    transition: opacity .3s ease;
}
.feature-row:hover .feature-row__media::before { opacity: .5; filter: blur(20px); }

/* ---- Newsletter visual upgrade ---- */
.newsletter {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-cream) 0%, #fff 100%);
    border: 1px solid rgba(103,157,207,.18);
}
.newsletter::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(103,157,207,.18), transparent 60%);
    pointer-events: none;
}
.newsletter::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(212,165,116,.12), transparent 60%);
    pointer-events: none;
}
.newsletter > * { position: relative; z-index: 1; }

/* ---- Footer visual upgrade ---- */
.site-footer {
    background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-3) 100%);
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
    pointer-events: none;
}
.site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 50%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%);
    pointer-events: none;
}
.site-footer > .container { position: relative; z-index: 1; }

/* ---- FAQ marker upgrade ---- */
.faq__item { transition: padding .25s ease; }
.faq__item[open] {
    padding-left: 16px;
    background: linear-gradient(90deg, var(--c-accent-soft), transparent 60%);
    border-radius: var(--r-md);
    border-bottom-color: transparent;
}

/* ---- Responsive overrides for new components ---- */
@media (max-width: 1024px) {
    .recognition, .mockup-row { grid-template-columns: repeat(2, 1fr); }
    .hero__stack { margin: 0 auto; }
}
@media (max-width: 720px) {
    .recognition, .mockup-row { grid-template-columns: 1fr; }
    .hero__badge--1, .hero__badge--2 { display: none; }
    .marquee__item { font-size: 1.1rem; }
    .marquee__track { gap: 36px; }
}

/* ---- Buy buttons inside price cards ---- */
.price-card .btn,
.feature-card .btn {
    margin-top: auto;
    align-self: flex-start;
}
.card-details-link {
    display: block;
    margin-top: 10px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: color .2s ease;
}
.card-details-link:hover { color: var(--c-accent); }
.price-card.featured .card-details-link { color: rgba(255,255,255,.7); }
.price-card.featured .card-details-link:hover { color: #fff; }

/* ---- Booking page hero with mockup ---- */
.booking-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(70px, 10vw, 130px) 0 clamp(56px, 8vw, 100px);
    background:
        radial-gradient(900px 600px at 100% 0%, rgba(103,157,207,.20), transparent 60%),
        radial-gradient(700px 500px at 0% 100%, rgba(212,165,116,.12), transparent 55%),
        var(--c-cream);
}
.booking-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(15,39,69,.06) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, transparent);
    pointer-events: none;
}
.booking-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
    position: relative;
    z-index: 2;
}
.booking-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.booking-hero__visual {
    position: relative;
    aspect-ratio: 4/3;
    perspective: 1400px;
}
.booking-hero__visual .mockup {
    position: absolute;
    width: 88%;
    height: 78%;
    top: 4%;
    left: 6%;
    transform: rotate(-2deg);
}
.booking-hero__visual .mockup--accent {
    width: 56%;
    height: 50%;
    top: auto;
    bottom: 0;
    left: auto;
    right: -2%;
    transform: rotate(5deg);
    z-index: 2;
}
.booking-hero__pill {
    position: absolute;
    z-index: 5;
    background: #fff;
    border-radius: var(--r-pill);
    padding: 10px 16px 10px 12px;
    box-shadow: var(--shadow-md);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-text);
}
.booking-hero__pill svg { width: 16px; height: 16px; stroke: var(--c-accent); }
.booking-hero__pill--top { top: -8px; left: -8%; animation: float 7s ease-in-out infinite; }
.booking-hero__pill--bottom { bottom: -10px; right: 8%; animation: float 6s ease-in-out infinite reverse; }
@media (max-width: 1024px) {
    .booking-hero__inner { grid-template-columns: 1fr; }
    .booking-hero__visual { max-width: 520px; margin: 0 auto; }
    .booking-hero__pill--top { left: 2%; }
}

/* ---- Side-by-side comparison stat ---- */
.vs-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(16px, 3vw, 36px);
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 44px);
    box-shadow: var(--shadow-sm);
}
.vs-grid__col h4 { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.vs-grid__col .num {
    font-family: var(--ff-display);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
}
.vs-grid__col .num--bad { color: var(--c-text-2); }
.vs-grid__col .num--good {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.vs-grid__col .label { font-size: .9rem; color: var(--c-muted); margin-top: 6px; }
.vs-grid__divider {
    font-family: var(--ff-display);
    font-weight: 700;
    color: var(--c-muted);
    font-size: .9rem;
    letter-spacing: .14em;
}
@media (max-width: 720px) {
    .vs-grid { grid-template-columns: 1fr; }
    .vs-grid__divider { padding: 8px 0; }
}

/* Annual prepay link beneath subscribe button */
.card-annual-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    background: var(--c-accent-soft);
    color: var(--c-accent-2);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .2s ease, color .2s ease;
}
.card-annual-link:hover {
    background: var(--c-accent);
    color: #fff;
}
.price-card.featured .card-annual-link {
    background: rgba(212,165,116,.18);
    color: var(--c-gold);
}
.price-card.featured .card-annual-link:hover {
    background: var(--c-gold);
    color: var(--c-navy);
}

/* =========================================================
   v1.8 — JS-driven interaction styles
   ========================================================= */

/* ---- Header shrink on scroll ---- */
.site-header { transition: height .3s ease, box-shadow .3s ease, background .3s ease; }
.site-header.is-scrolled {
    box-shadow: 0 4px 20px rgba(15,39,69,.1);
    background: rgba(255,255,255,.96);
}
.site-header.is-scrolled .site-header__inner { height: 64px; }
.site-header.is-scrolled .site-logo img { height: 36px; }
.site-logo img { transition: height .3s ease; }
.site-header__inner { transition: height .3s ease; }

/* ---- Scroll-triggered reveal ---- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .65s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* Stagger cards in grids */
.svc-grid .reveal:nth-child(2),
.price-grid .reveal:nth-child(2),
.clients-grid .reveal:nth-child(2),
.testimonials .reveal:nth-child(2),
.portfolio-grid .reveal:nth-child(2) { transition-delay: .08s; }
.svc-grid .reveal:nth-child(3),
.price-grid .reveal:nth-child(3),
.clients-grid .reveal:nth-child(3),
.testimonials .reveal:nth-child(3),
.portfolio-grid .reveal:nth-child(3) { transition-delay: .16s; }
.svc-grid .reveal:nth-child(4),
.price-grid .reveal:nth-child(4),
.clients-grid .reveal:nth-child(4),
.portfolio-grid .reveal:nth-child(4) { transition-delay: .24s; }
.clients-grid .reveal:nth-child(5) { transition-delay: .32s; }
.clients-grid .reveal:nth-child(6) { transition-delay: .40s; }
.portfolio-grid .reveal:nth-child(5) { transition-delay: .32s; }
.portfolio-grid .reveal:nth-child(6) { transition-delay: .40s; }

/* Process steps stagger */
.process .reveal:nth-child(1) { transition-delay: 0s; }
.process .reveal:nth-child(2) { transition-delay: .1s; }
.process .reveal:nth-child(3) { transition-delay: .2s; }
.process .reveal:nth-child(4) { transition-delay: .3s; }

/* Recognition stagger */
.recognition .reveal:nth-child(1) { transition-delay: 0s; }
.recognition .reveal:nth-child(2) { transition-delay: .08s; }
.recognition .reveal:nth-child(3) { transition-delay: .16s; }
.recognition .reveal:nth-child(4) { transition-delay: .24s; }

/* Feature rows alternate direction */
.feature-row.reveal { transform: translateY(32px); }
.feature-row.reveal:nth-child(even) { transform: translateX(-24px); opacity: 0; }
.feature-row.reveal:nth-child(odd)  { transform: translateX(24px); opacity: 0; }
.feature-row.reveal.is-visible { transform: none; opacity: 1; }

/* ---- Lazy image fade-in ---- */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity .5s ease;
}
img[loading="lazy"].is-loaded,
img.is-loaded { opacity: 1; }

/* ---- Contact form messages ---- */
.form-message {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: .95rem;
}
.form-message--ok {
    background: #e6f7ee;
    color: #15803d;
    border: 1px solid #bbf0d1;
}
.form-message--err {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ---- Mobile menu backdrop ---- */
@media (max-width: 720px) {
    .nav-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15,39,69,.5);
        z-index: 99;
        animation: fadeIn .2s ease;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- Honeypot field (hidden from humans) ---- */
.ohnohoney { position: absolute; left: -9999px; }

/* ---- Cookie consent banner ---- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--c-navy);
    color: rgba(255,255,255,.92);
    padding: 18px 0;
    box-shadow: 0 -8px 32px rgba(15,39,69,.3);
    animation: slideUp .4s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-banner__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.cookie-banner__text { flex: 1; min-width: 280px; }
.cookie-banner__text p { margin: 0; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.85); }
.cookie-banner__text a { color: var(--c-accent); font-weight: 600; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn { padding: 10px 20px; font-size: .85rem; }
.cookie-banner .btn--ghost { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.8); }
.cookie-banner .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; }

/* =========================================================
   WooCommerce single product page — themed to match D15
   ========================================================= */
.wc-main .product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}
.wc-main .product .woocommerce-product-gallery { grid-column: 1; }
.wc-main .product .summary.entry-summary { grid-column: 2; }
.wc-main .product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 32px; }
.wc-main .product .related.products { grid-column: 1 / -1; }

/* Summary typography */
.wc-main .product .product_title {
    font-family: var(--ff-display);
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 12px;
}
.wc-main .product .price {
    font-family: var(--ff-display) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--c-accent) !important;
    margin-bottom: 20px !important;
}
.wc-main .product .price del { color: var(--c-muted) !important; font-size: 1.2rem !important; }
.wc-main .product .woocommerce-product-details__short-description {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--c-text-2);
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--c-line);
}

/* Tabs */
.wc-main .woocommerce-tabs ul.tabs {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 28px !important;
    display: flex !important;
    gap: 4px !important;
    border-bottom: 2px solid var(--c-line) !important;
    background: none !important;
}
.wc-main .woocommerce-tabs ul.tabs::before { display: none !important; }
.wc-main .woocommerce-tabs ul.tabs li {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.wc-main .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 20px !important;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--c-muted) !important;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .2s ease, border-color .2s ease;
}
.wc-main .woocommerce-tabs ul.tabs li.active a {
    color: var(--c-accent) !important;
    border-bottom-color: var(--c-accent);
}
.wc-main .woocommerce-tabs .panel { padding: 0 !important; }
.wc-main .woocommerce-tabs .panel h2 { font-size: 1.3rem; margin-bottom: 12px; }

/* Related products */
.wc-main .related.products h2 {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    margin-bottom: 24px;
}
.wc-main .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
}
.wc-main .related.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* Archive / shop page */
.wc-main ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}
.wc-main ul.products li.product {
    margin: 0 !important;
    width: auto !important;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 28px 24px !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.wc-main ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.wc-main ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    padding: 0 !important;
}
.wc-main ul.products li.product .price {
    font-family: var(--ff-display) !important;
    color: var(--c-accent) !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
}

@media (max-width: 1024px) {
    .wc-main .product { grid-template-columns: 1fr; }
    .wc-main .product .summary.entry-summary { grid-column: 1; }
    .wc-main ul.products,
    .wc-main .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px) {
    .wc-main ul.products,
    .wc-main .related.products ul.products { grid-template-columns: 1fr !important; }
}

/* =========================================================
   Blog archive + single post
   ========================================================= */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 32px);
}
.blog-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card__media {
    aspect-ratio: 16/9;
    background: var(--c-bg-alt);
    overflow: hidden;
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card__meta {
    font-size: .82rem;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 10px;
}
.blog-card__title {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 10px;
    color: var(--c-text);
}
.blog-card__excerpt { color: var(--c-text-2); font-size: .95rem; flex: 1; margin-bottom: 16px; }
.blog-card__cta { color: var(--c-accent); font-weight: 600; font-size: .9rem; }

/* Single post */
.post-header { text-align: center; max-width: 820px; margin: 0 auto clamp(28px, 4vw, 48px); }
.post-header .post-meta {
    font-size: .85rem;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 16px;
}
.post-content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}
.post-content h2, .post-content h3 { margin-top: 2em; }
.post-content img { border-radius: var(--r-md); margin: 2em 0; }
.post-content blockquote {
    border-left: 3px solid var(--c-accent);
    margin: 2em 0;
    padding: 1em 1.5em;
    background: var(--c-accent-soft);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-style: italic;
}

@media (max-width: 720px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   v2.0.1 — More mobile refinements
   ========================================================= */
@media (max-width: 720px) {
    /* Announcement bar: shorten text on tiny screens */
    .announcement {
        padding: 8px 12px;
        font-size: .78rem;
        line-height: 1.4;
    }
    /* Hero: reduce top padding since there's less room */
    .hero, .booking-hero {
        padding: 48px 0 36px;
    }
    .hero__stack, .booking-hero__visual {
        max-width: 360px;
        margin: 24px auto 0;
    }
    /* Hide the floating badges on very small screens — they clip */
    .hero__badge, .booking-hero__pill {
        display: none;
    }
    /* Page hero: tighter */
    .page-hero {
        padding: 56px 0 36px;
    }
    /* Container padding tighter */
    .container { padding: 0 18px; }
    /* Feature-row media: cap height so they don't dominate */
    .feature-row__media img { max-height: 380px; object-fit: cover; }
    /* Integrations wall: 2 cols on small phones */
    .integrations { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* Compare table: force smaller font to fit */
    .compare th, .compare td { padding: 10px 8px; font-size: .82rem; }
    .compare thead th small { font-size: .75rem; }
    /* Stats row: bigger number still, less label */
    .stat__num { font-size: 2.4rem; }
    /* CTA banner: always stack, center */
    .cta-banner { text-align: center; }
    .cta-banner .btn-row { justify-content: center; }
    .cta-banner .btn { width: 100%; }
    /* Hero stack mockups — smaller tilt on mobile */
    .mockup--back, .mockup--main, .mockup--front { transform: none !important; }
    .mockup--main { width: 100%; height: 100%; top: 0; left: 0; }
    .mockup--back, .mockup--front { display: none; }
    /* Booking hero stack too */
    .booking-hero__visual .mockup { width: 100%; height: 100%; transform: none !important; top: 0; left: 0; }
    .booking-hero__visual .mockup--accent { display: none; }
    /* Mockup-row on web-design: stack */
    .mockup-row { grid-template-columns: 1fr; }
    .mockup-row .mockup { transform: none !important; }
    /* Timeline left-align tighter */
    .timeline { padding-left: 28px; }
    /* Cookie banner: stack and tighten */
    .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 0 16px; }
    .cookie-banner__actions { width: 100%; }
    .cookie-banner__actions .btn { flex: 1; justify-content: center; }
    /* Form buttons full-width */
    .contact-form button[type="submit"] { width: 100%; justify-content: center; }
    /* Newsletter input stacks */
    .newsletter form { flex-direction: column; align-items: stretch; }
    .newsletter input[type="email"], .newsletter .btn { width: 100%; flex: none; }
    /* Testimonials: scale down quote */
    .testimonial__quote { font-size: .95rem; }
    /* VS grid */
    .vs-grid { padding: 20px; }
    /* Portfolio / portfolio-card overlay text smaller */
    .portfolio-card__overlay { padding: 16px 18px; font-size: .95rem; }
    /* Hide noise decorations that don't serve mobile */
    .hero::before { display: none; }
    /* Prevent horizontal scroll from any decorative overflow */
    body { overflow-x: hidden; }
}

/* =========================================================
   Companion-product modal
   ========================================================= */
.d15-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 3vw, 32px);
}
.d15-modal.is-open { display: flex; animation: modalFade .25s ease; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.d15-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 39, 69, .62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.d15-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: var(--r-lg);
    max-width: 580px;
    width: 100%;
    padding: clamp(28px, 4vw, 44px);
    box-shadow: 0 30px 80px -20px rgba(15,39,69,.45);
    animation: modalRise .35s ease;
    max-height: 92vh;
    overflow-y: auto;
}
@keyframes modalRise {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.d15-modal__close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--c-muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.d15-modal__close:hover { background: var(--c-bg-alt); color: var(--c-text); }

.d15-modal__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    display: grid;
    place-items: center;
    margin-bottom: 20px;
}

.d15-modal__title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    line-height: 1.2;
    margin-bottom: 12px;
}
.d15-modal__lede {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-text-2);
    margin-bottom: 24px;
}

.d15-modal__options {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}
.d15-modal__option {
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    transition: border-color .2s ease, background .2s ease;
}
.d15-modal__option--primary {
    background: var(--c-accent-soft);
    border-color: rgba(103,157,207,.3);
}
.d15-modal__option:hover { border-color: var(--c-accent); }
.d15-modal__option-body h3 {
    font-size: 1rem;
    margin-bottom: 4px;
}
.d15-modal__option-body p {
    font-size: .88rem;
    margin: 0;
    color: var(--c-text-2);
}
.d15-modal__option .btn {
    white-space: nowrap;
    padding: 10px 18px;
    font-size: .82rem;
}

.d15-modal__footnote {
    font-size: .85rem;
    color: var(--c-muted);
    text-align: center;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--c-line);
}
.d15-modal__footnote a { color: var(--c-accent); font-weight: 600; }

@media (max-width: 580px) {
    .d15-modal__option {
        grid-template-columns: 1fr;
    }
    .d15-modal__option .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Header: Sign-in / Account link
   ========================================================= */
.nav-account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
    font-weight: 600;
    font-size: .9rem;
    color: var(--c-text);
    margin-right: 8px;
    transition: background .2s ease, color .2s ease;
}
.nav-account:hover { background: var(--c-accent); color: #fff; }
.nav-account--login {
    background: transparent;
    color: var(--c-text);
    border: 1px solid var(--c-line);
}
.nav-account--login:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.nav-account__label { white-space: nowrap; }

@media (max-width: 720px) {
    .nav-account__label { display: none; }
    .nav-account { padding: 10px 12px; }
}

/* =========================================================
   WooCommerce My Account page — themed to match
   ========================================================= */
.woocommerce-account .wc-main { padding: clamp(40px, 5vw, 64px) 0; }

/* Account dashboard layout */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 20px !important;
    width: 26% !important;
    box-shadow: var(--shadow-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--c-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 14px !important;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: .95rem;
    color: var(--c-text) !important;
    border-radius: var(--r-sm);
    transition: background .2s ease, color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
    background: var(--c-accent);
    color: #fff !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 70% !important;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 36px) !important;
    box-shadow: var(--shadow-sm);
}
.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    font-family: var(--ff-display);
    font-weight: 700;
}

/* Login + Register forms */
.woocommerce-account:not(.logged-in) .wc-main .woocommerce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 36px);
    max-width: 900px;
    margin: 0 auto;
}
.woocommerce-account:not(.logged-in) .wc-main .woocommerce > h2 {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 16px;
}
.woocommerce-account:not(.logged-in) form.login,
.woocommerce-account:not(.logged-in) form.register {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 32px) !important;
    box-shadow: var(--shadow-sm);
}
.woocommerce form .form-row label { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.woocommerce form .form-row input.input-text {
    padding: 12px 14px !important;
    border-radius: var(--r-md) !important;
    border: 1px solid var(--c-line) !important;
    font-size: .95rem !important;
    width: 100% !important;
}
.woocommerce form .form-row input.input-text:focus {
    outline: none !important;
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 4px var(--c-accent-soft) !important;
}

/* Orders / subscriptions tables */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .shop_table {
    border-radius: var(--r-md) !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .shop_table th {
    background: var(--c-bg-alt) !important;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .85rem;
    text-align: left;
    padding: 14px 16px !important;
}
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .shop_table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--c-line);
    font-size: .9rem;
}

/* Dashboard welcome text */
.woocommerce-account .woocommerce-MyAccount-content p:first-child {
    font-size: 1.05rem;
    color: var(--c-text-2);
}

@media (max-width: 900px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 20px; }
    .woocommerce-account:not(.logged-in) .wc-main .woocommerce {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   WooCommerce BLOCKS — Cart / Checkout / Mini-cart buttons
   (the new Gutenberg-based cart/checkout uses different markup
    than the legacy shortcodes, so these selectors are separate)
   ========================================================= */

/* Primary block buttons (Proceed to Checkout, Place Order, etc.) */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-components-button.contained,
.wc-block-components-checkout-place-order-button,
a.wc-block-components-button.contained,
button.wc-block-components-button.contained,
.wp-block-button__link,
.wc-block-components-button:not(.wc-block-components-button--text) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    font-size: .92rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    background: var(--c-accent) !important;
    color: #fff !important;
    border: 2px solid transparent !important;
    box-shadow: 0 8px 20px -6px rgba(103,157,207,.45) !important;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease !important;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1 !important;
    width: auto !important;
}
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover,
.wc-block-components-checkout-place-order-button:hover,
a.wc-block-components-button.contained:hover,
button.wc-block-components-button.contained:hover,
.wp-block-button__link:hover,
.wc-block-components-button:not(.wc-block-components-button--text):hover {
    background: var(--c-accent-2) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(103,157,207,.55) !important;
}

/* "Proceed to Checkout" often renders as a plain link without .button class
   in the cart block. The outer container has a known class — target it. */
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block button,
.wc-block-cart__actions a,
.wc-block-cart__actions button,
.wc-block-cart__submit a,
.wc-block-cart__submit button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 26px !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    font-size: .92rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    background: var(--c-accent) !important;
    color: #fff !important;
    border: 2px solid transparent !important;
    box-shadow: 0 8px 20px -6px rgba(103,157,207,.45) !important;
    text-decoration: none !important;
    transition: transform .15s ease, background .2s ease, box-shadow .2s ease !important;
    line-height: 1 !important;
    width: auto !important;
}
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-proceed-to-checkout-block button:hover,
.wc-block-cart__actions a:hover,
.wc-block-cart__actions button:hover {
    background: var(--c-accent-2) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(103,157,207,.55) !important;
}

/* Secondary/text buttons in blocks (Apply coupon links, etc.) */
.wc-block-components-button--text,
.wc-block-components-panel__button,
.wc-block-cart__sidebar .wc-block-components-button--text {
    color: var(--c-accent) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.wc-block-components-button--text:hover { color: var(--c-accent-2) !important; }

/* Coupon/totals panel */
.wc-block-components-totals-wrapper,
.wc-block-components-panel {
    border-color: var(--c-line) !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-product-name {
    font-family: var(--ff-display);
    font-weight: 600;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
    font-family: var(--ff-display);
    font-weight: 700;
}

/* Apply coupon button inside coupon panel */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon button {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    padding: 10px 18px !important;
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-size: .8rem !important;
}

/* Cart line items + quantity spinner */
.wc-block-cart-item__product .wc-block-components-product-name {
    color: var(--c-text) !important;
    font-size: 1rem;
}
.wc-block-components-quantity-selector input {
    font-family: var(--ff-display);
    font-weight: 600;
}

/* Checkout page form inputs (blocks) */
.wc-block-components-text-input input,
.wc-block-components-select,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
    border-radius: var(--r-md) !important;
    border-color: var(--c-line) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select:focus-within,
.wc-block-components-textarea textarea:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 4px var(--c-accent-soft) !important;
}

/* Headings inside blocks */
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-sidebar-layout__content h2 {
    font-family: var(--ff-display) !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
}

/* =========================================================
   Legacy WooCommerce — any stragglers we missed
   ========================================================= */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button,
.woocommerce a.checkout-button {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    padding: 14px 26px !important;
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-size: .92rem !important;
    box-shadow: 0 8px 20px -6px rgba(103,157,207,.45) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover {
    background: var(--c-accent-2) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(103,157,207,.55) !important;
}

/* Single product page add-to-cart button */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    padding: 14px 28px !important;
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-size: .95rem !important;
    box-shadow: 0 8px 20px -6px rgba(103,157,207,.45) !important;
}

/* Quantity spinner on product page */
.woocommerce .quantity .qty {
    padding: 12px 14px !important;
    border-radius: var(--r-md) !important;
    border: 1px solid var(--c-line) !important;
    font-family: var(--ff-display) !important;
    font-weight: 600;
}

/* Account / login / register submit buttons */
.woocommerce form.login .button,
.woocommerce form.register .button,
.woocommerce-ResetPassword .button,
.woocommerce-EditAccountForm .button {
    background: var(--c-accent) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    padding: 12px 24px !important;
    font-family: var(--ff-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    font-size: .9rem !important;
    box-shadow: 0 8px 20px -6px rgba(103,157,207,.45) !important;
    cursor: pointer;
}
.woocommerce form.login .button:hover,
.woocommerce form.register .button:hover {
    background: var(--c-accent-2) !important;
    transform: translateY(-2px);
}

/* "Remove from cart" trash icon — hover state */
.wc-block-cart-item__remove-link,
.wc-block-components-quantity-selector__button {
    color: var(--c-muted) !important;
    transition: color .2s ease;
}
.wc-block-cart-item__remove-link:hover {
    color: var(--c-accent-2) !important;
}

/* =========================================================
   WooCommerce block cart — full-width sidebar CTAs
   Match the digital-wallet button (GPay / Apple Pay) which
   stretches full width in the basket totals column.
   ========================================================= */
.wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart__submit,
.wc-block-cart__actions {
    width: 100%;
    display: block;
}
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout-block button,
.wc-block-cart__submit-button,
.wc-block-cart__submit a,
.wc-block-cart__submit button,
.wc-block-cart__actions a,
.wc-block-cart__actions button,
.wc-block-components-checkout-place-order-button {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 18px 26px !important;
    font-size: .95rem !important;
}

/* =========================================================
   Long-homepage-screenshot reveal — JS driven
   JS attaches to elements matching the selectors below, calculates
   the exact translate distance based on actual image height vs card
   height, and animates transform on hover. Works for any image ratio.
   ========================================================= */

/* Containers hosting long screenshots — positioned for absolute image layout */
.client-card__media,
.portfolio-card,
.mockup-row .mockup,
.split__media--scroll {
    position: relative;
    overflow: hidden;
}

/* Images inside: absolute-positioned, natural height, ready for translateY */
.client-card__media > img,
.portfolio-card > img,
.mockup-row .mockup > .mockup__shot,
.split__media--scroll > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: unset !important;
    object-position: unset !important;
    display: block;
    transform: translateY(0);
    transition: transform 6s ease-in-out;
    will-change: transform;
}

/* Enforce container heights so absolute-positioned img has somewhere to live */
.client-card__media { aspect-ratio: 16/10; }
.portfolio-card    { aspect-ratio: 4/3; }
.split__media--scroll { aspect-ratio: 4/3; }
.mockup-row .mockup {
    aspect-ratio: 4/3;
}
/* Mockup chrome bar sits above the scrolling content */
.mockup-row .mockup .mockup__bar { position: relative; z-index: 2; }
.mockup-row .mockup > .mockup__shot { top: 28px !important; height: calc(100% - 28px) !important; }

/* Hero layered mockups — keep object-fit behavior, show top only */
.hero__stack .mockup__shot {
    object-position: 50% 0% !important;
}

/* Subtle hint that the card scrolls — gradient at bottom suggests "more below" */
.client-card__media::before,
.portfolio-card::before,
.mockup-row .mockup::before,
.split__media--scroll::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(180deg, transparent, rgba(15,39,69,.08));
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity .3s ease;
}
.client-card:hover .client-card__media::before,
.portfolio-card:hover::before,
.mockup-row .mockup:hover::before,
.split__media--scroll:hover::before {
    opacity: 0;
}
/* Make sure content that should stay above stays above */
.portfolio-card__overlay { z-index: 2; }

/* =========================================================
   Phosphor Duotone icon sizing (inline <i> tags)
   ========================================================= */
i[class*="ph-"] {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}
/* Override emoji rendering so the icon takes current color */
.ph-duotone { color: currentColor; }
/* Size helpers */
.ph-sm { font-size: 16px; }
.ph-md { font-size: 22px; }
.ph-lg { font-size: 28px; }
.ph-xl { font-size: 40px; }

/* Replace existing SVG stroke styles on service cards since d15_icon now outputs Phosphor */
.svc-card .icon i[class*="ph-"] {
    font-size: 26px;
    color: var(--c-accent);
}
.svc-card:hover .icon i[class*="ph-"] { color: #fff; }

.recog__icon i[class*="ph-"] {
    font-size: 26px;
    color: var(--c-accent);
}